Merge branch 'dev' into fix(web)-prevent-long-text-overflow

Author: nikhilverma360

web/src/components/EnsureChain.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { useChainId } from "wagmi";
+import { useAccount } from "wagmi";
 
 import { DEFAULT_CHAIN } from "consts/chains";
 
@@ -12,7 +12,7 @@ interface IEnsureChain {
 }
 
 export const EnsureChain: React.FC<IEnsureChain> = ({ children, className }) => {
-  const chainId = useChainId();
+  const { chainId } = useAccount();
 
   return chainId === DEFAULT_CHAIN ? children : <ConnectWallet {...{ className }} />;
 };

web/src/components/Field.tsx

@@ -24,12 +24,6 @@ const FieldContainer = styled.div<FieldContainerProps>`
     flex-shrink: 0;
   }
 
-  .link {
-    color: ${({ theme }) => theme.primaryBlue};
-    :hover {
-      cursor: pointer;
-    }
-  }
   ${({ isList }) =>
     isList &&
     css`
@@ -63,6 +57,12 @@ const FieldContainer = styled.div<FieldContainerProps>`
     `};
 `;
 
+const LinkContainer = styled.div``;
+
+const StyledLink = styled(Link)`
+  color: ${({ theme }) => theme.primaryBlue};
+`;
+
 type FieldContainerProps = {
   width?: string;
   isList?: boolean;
@@ -98,15 +98,16 @@ const Field: React.FC<IField> = ({
       <Icon />
       {(!displayAsList || isOverview || isJurorBalance) && <label>{name}:</label>}
       {link ? (
-        <Link
-          className="link value"
-          to={link}
-          onClick={(event) => {
-            event.stopPropagation();
-          }}
-        >
-          {value}
-        </Link>
+        <LinkContainer className="value">
+          <StyledLink
+            to={link}
+            onClick={(event) => {
+              event.stopPropagation();
+            }}
+          >
+            {value}
+          </StyledLink>
+        </LinkContainer>
       ) : (
         <label className="value">{value}</label>
       )}

web/src/utils/commify.ts

@@ -1,14 +1,8 @@
 export function commify(value: string | number): string {
   const comps = String(value).split(".");
 
-  if (
-    comps.length > 2 ||
-    !comps[0].match(/^-?[0-9]*$/) ||
-    (comps[1] && !comps[1].match(/^[0-9]*$/)) ||
-    value === "." ||
-    value === "-."
-  ) {
-    return value.toString();
+  if (!String(value).match(/^-?[0-9]*\.?[0-9]*$/)) {
+    return "0";
   }
 
   // Make sure we have at least one whole digit (0 if none)

web/src/utils/uri.ts

@@ -5,17 +5,15 @@ import { Dispute_Filter } from "src/graphql/graphql";
 export const encodeURIFilter = (filter: Dispute_Filter): string => {
   if (Object.keys(filter).length === 0) {
     return "all";
-  } else {
-    return encodeURI(JSON.stringify(filter));
   }
+  return encodeURIComponent(JSON.stringify(filter));
 };
 
 export const decodeURIFilter = (filter: string): Dispute_Filter => {
   if (filter === "all") {
     return {};
-  } else {
-    return JSON.parse(decodeURI(filter));
   }
+  return JSON.parse(decodeURI(filter));
 };
 
 export const useRootPath = () => {