refactor: snake case props

covalenthq · Dec 2, 2023 · a7b6beb · a7b6beb
1 parent 60e9210
commit a7b6beb
Show file tree

Hide file tree

Showing 16 changed files with 212 additions and 181 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,5 +1,10 @@
 {
-    "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended"
+    ],
+    "plugins": ["prettier", "react"],
     "rules": {
         "semi": "error",
         "no-multiple-empty-lines": "error",
@@ -21,6 +26,14 @@
         "@typescript-eslint/no-inferrable-types": "off",
         "@typescript-eslint/no-non-null-assertion": "off",
         "@typescript-eslint/consistent-type-imports": "error",
-        "@typescript-eslint/no-explicit-any": "warn"
+        "@typescript-eslint/no-explicit-any": "warn",
+        "prettier/prettier": "error",
+        "react/prop-types": "off",
+        "react/react-in-jsx-scope": "off"
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
     }
 }
diff --git a/src/components/Atoms/Address/Address.tsx b/src/components/Atoms/Address/Address.tsx
@@ -11,9 +11,9 @@ export const Address: React.FC<AddressProps> = ({ address }) => {
                 onClick={() => copyToClipboard(address)}
             >
                 <IconWrapper
-                    iconClassName="content_copy"
-                    iconSize="text-sm"
-                    className="text-secondary dark:text-secondary"
+                    icon_class_name="content_copy"
+                    icon_size="text-sm"
+                    class_name="text-secondary dark:text-secondary"
                 />
             </button>
         </div>

diff --git a/src/components/Atoms/AddressAvatar/AddressAvatar.tsx b/src/components/Atoms/AddressAvatar/AddressAvatar.tsx
@@ -12,7 +12,7 @@ export const AddressAvatar: React.FC<AddressAvatarProps> = ({
     size,
     fallback,
     rounded = false,
-    className,
+    class_name,
 }) => {
     const SRC = useMemo<string>(() => {
         switch (type) {
@@ -57,7 +57,7 @@ export const AddressAvatar: React.FC<AddressAvatarProps> = ({
     return (
         <Avatar
             className={`${SIZE_CLASS} ${rounded ? "rounded-full" : "rounded"} ${
-                className || ""
+                class_name || ""
             }`}
         >
             <AvatarImage style={BG_COLOR} src={SRC} />

diff --git a/src/components/Atoms/CopyImage/CopyImage.tsx b/src/components/Atoms/CopyImage/CopyImage.tsx
@@ -8,15 +8,15 @@ export const CopyImage: React.FC<CopyImageProps> = ({ url }) => {
 
     return copied ? (
         <IconWrapper
-            iconClassName="done"
-            iconSize="text-sm text-secondary dark:text-secondary"
+            icon_class_name="done"
+            icon_size="text-sm text-secondary dark:text-secondary"
         />
     ) : (
         <IconWrapper
-            iconClassName="content_copy"
-            iconSize="text-sm text-text-color-900 dark:text-text-color-50"
-            className="cursor-pointer"
-            onClick={() => {
+            icon_class_name="content_copy"
+            icon_size="text-sm text-text-color-900 dark:text-text-color-50"
+            class_name="cursor-pointer"
+            on_click={() => {
                 showCopied(true);
                 setTimeout(() => {
                     showCopied(false);

diff --git a/src/components/Atoms/IconWrapper/IconWrapper.tsx b/src/components/Atoms/IconWrapper/IconWrapper.tsx
@@ -1,24 +1,24 @@
 import { type IconWrapperPropsType } from "@/utils/types/atoms.types";
 
 export const IconWrapper: React.FC<IconWrapperPropsType> = ({
-    className,
-    iconClassName,
-    onClick,
-    iconSize,
-    iconType,
+    class_name,
+    icon_class_name,
+    on_click,
+    icon_size,
+    icon_type,
 }) => {
     return (
         <div
             role={"presentation"}
-            className={`flex items-center justify-center ${className ?? ""}`}
-            onClick={onClick}
+            className={`flex items-center justify-center ${class_name ?? ""}`}
+            onClick={on_click}
         >
             <span
-                className={`material-symbols-${iconType || "outlined"} ${
-                    iconSize || ""
+                className={`material-symbols-${icon_type || "outlined"} ${
+                    icon_size || ""
                 }`}
             >
-                {iconClassName}
+                {icon_class_name}
             </span>
         </div>
     );

diff --git a/src/components/Atoms/TokenAvatar/TokenAvatar.stories.tsx b/src/components/Atoms/TokenAvatar/TokenAvatar.stories.tsx
@@ -20,63 +20,63 @@ export const TokenAvatarDisplay: Story = {
             <>
                 <div className="m-1">
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.MEDIUM}
                     />
                 </div>
                 <div className="m-1 mt-20 flex gap-1">
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.EXTRA_EXTRA_SMALL}
                     />
 
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.EXTRA_SMALL}
                     />
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.SMALL}
                     />
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.MEDIUM}
                     />
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.LARGE}
                     />
                 </div>
                 <div className="m-1 mt-20 flex gap-3">
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.EXTRA_SMALL}
-                        chainColor={"grey"}
-                        subUrl={
+                        chain_color={"grey"}
+                        sub_url={
                             "https://www.datocms-assets.com/86369/1699425239-uniswap.jpg"
                         }
                     />
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.SMALL}
-                        chainColor={"grey"}
-                        subUrl={
+                        chain_color={"grey"}
+                        sub_url={
                             "https://www.datocms-assets.com/86369/1699425239-uniswap.jpg"
                         }
                     />
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.MEDIUM}
-                        chainColor={"grey"}
-                        subUrl={
+                        chain_color={"grey"}
+                        sub_url={
                             "https://www.datocms-assets.com/86369/1699425239-uniswap.jpg"
                         }
                     />
                     <TokenAvatar
-                        tokenUrl="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
+                        token_url="https://logos.covalenthq.com/tokens/1/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png"
                         size={GRK_SIZES.LARGE}
-                        chainColor={"grey"}
-                        subUrl={
+                        chain_color={"grey"}
+                        sub_url={
                             "https://www.datocms-assets.com/86369/1699425239-uniswap.jpg"
                         }
                     />

diff --git a/src/components/Atoms/TokenAvatar/TokenAvatar.tsx b/src/components/Atoms/TokenAvatar/TokenAvatar.tsx
@@ -3,11 +3,11 @@ import { type TokenAvatarProps } from "@/utils/types/atoms.types";
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
 
 export const TokenAvatar: React.FC<TokenAvatarProps> = ({
-    tokenUrl,
-    subUrl,
+    token_url,
+    sub_url,
     size,
-    isChainLogo = false,
-    chainColor,
+    is_chain_logo = false,
+    chain_color,
 }) => {
     const ref = useRef<HTMLDivElement>(null);
 
@@ -46,10 +46,10 @@ export const TokenAvatar: React.FC<TokenAvatarProps> = ({
     }, [size]);
 
     useEffect(() => {
-        if (isChainLogo) {
+        if (is_chain_logo) {
             (async () => {
                 const response = await fetch(
-                    tokenUrl ?? "https://goldrush.vercel.app/icons/token.svg"
+                    token_url ?? "https://goldrush.vercel.app/icons/token.svg"
                 );
                 const data = await response.text();
 
@@ -78,17 +78,17 @@ export const TokenAvatar: React.FC<TokenAvatarProps> = ({
                 }
             })();
         }
-    }, [tokenUrl, SIZE_CLASS]);
+    }, [token_url, SIZE_CLASS]);
 
-    return isChainLogo ? (
+    return is_chain_logo ? (
         <div ref={ref} className={SIZE_CLASS} />
     ) : (
         <div
             className={`${SIZE_CLASS} relative rounded-[100%]`}
-            style={{ background: chainColor ?? "", padding: "2px" }}
+            style={{ background: chain_color ?? "", padding: "2px" }}
         >
             <img
-                src={tokenUrl ?? "https://goldrush.vercel.app/icons/token.svg"}
+                src={token_url ?? "https://goldrush.vercel.app/icons/token.svg"}
                 alt="Token Image"
                 style={{ background: "#fff" }}
                 className={`h-full w-full rounded-[100%] p-0.5`}
@@ -97,12 +97,12 @@ export const TokenAvatar: React.FC<TokenAvatarProps> = ({
                         "https://goldrush.vercel.app/icons/token.svg";
                 }}
             />
-            {subUrl && (
+            {sub_url && (
                 <img
-                    src={subUrl}
+                    src={sub_url}
                     alt="Token Image"
                     style={{
-                        background: chainColor ? chainColor : "grey",
+                        background: chain_color ? chain_color : "grey",
                         padding: "1px",
                     }}
                     className={`${SUB_SIZE} absolute -bottom-2 -left-3 rounded-[100%] p-0.5`}

diff --git a/src/components/Molecules/AccountCardView/AccountCardView.tsx b/src/components/Molecules/AccountCardView/AccountCardView.tsx
@@ -54,16 +54,16 @@ export const AccountCardView: React.FC<AccountCardViewProps> = ({
                         >
                             {showCopy ? (
                                 <IconWrapper
-                                    iconClassName="done"
-                                    iconSize="text-sm"
-                                    className="text-secondary dark:text-secondary"
+                                    icon_class_name="done"
+                                    icon_size="text-sm"
+                                    class_name="text-secondary dark:text-secondary"
                                 />
                             ) : (
                                 <IconWrapper
-                                    iconClassName="content_copy"
-                                    iconSize="text-sm"
-                                    className="text-secondary dark:text-secondary"
-                                    onClick={() => handleCopyClick()}
+                                    icon_class_name="content_copy"
+                                    icon_size="text-sm"
+                                    class_name="text-secondary dark:text-secondary"
+                                    on_click={() => handleCopyClick()}
                                 />
                             )}
                         </div>
@@ -72,9 +72,9 @@ export const AccountCardView: React.FC<AccountCardViewProps> = ({
                                 <DialogTrigger>
                                     <div className="h-5 w-5 items-center justify-center rounded-full">
                                         <IconWrapper
-                                            iconClassName="qr_code_2"
-                                            iconSize="text-sm pt-1"
-                                            className="text-secondary dark:text-secondary"
+                                            icon_class_name="qr_code_2"
+                                            icon_size="text-sm pt-1"
+                                            class_name="text-secondary dark:text-secondary"
                                         />
                                     </div>
                                 </DialogTrigger>

diff --git a/src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.tsx b/src/components/Molecules/NFTs/NFTFloorPriceView/NFTFloorPriceView.tsx
@@ -4,7 +4,10 @@ import { Button } from "@/components/ui/button";
 import { LineChart } from "@tremor/react";
 import { rootColor, timestampParser } from "@/utils/functions";
 import { TypographyH4 } from "@/components/ui/typography";
-import { calculatePrettyBalance, prettifyCurrency } from "@covalenthq/client-sdk";
+import {
+    calculatePrettyBalance,
+    prettifyCurrency,
+} from "@covalenthq/client-sdk";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
     CURRENCY,

diff --git a/src/components/Organisms/NFTs/NFTWalletCollectionView/NFTWalletCollectionView.tsx b/src/components/Organisms/NFTs/NFTWalletCollectionView/NFTWalletCollectionView.tsx
@@ -1,6 +1,9 @@
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
 import { type Option, Some, None } from "@/utils/option";
-import { prettifyCurrency, type NftTokenContractBalanceItem } from "@covalenthq/client-sdk";
+import {
+    prettifyCurrency,
+    type NftTokenContractBalanceItem,
+} from "@covalenthq/client-sdk";
 import { useEffect, useState } from "react";
 import {
     Card,
@@ -62,11 +65,24 @@ export const NFTWalletCollectionView: React.FC<
                                     >
                                         <CardContent>
                                             <img
-                                                className={`block h-[10rem] w-full rounded-t ${it.external_data ? "object-cover" : "p-2"}`}
-                                                src={it.external_data ? it.external_data.image_512 : "https://www.datocms-assets.com/86369/1685489960-nft.svg"}
+                                                className={`block h-[10rem] w-full rounded-t ${
+                                                    it.external_data
+                                                        ? "object-cover"
+                                                        : "p-2"
+                                                }`}
+                                                src={
+                                                    it.external_data
+                                                        ? it.external_data
+                                                              .image_512
+                                                        : "https://www.datocms-assets.com/86369/1685489960-nft.svg"
+                                                }
                                                 onError={(e) => {
-                                                    e.currentTarget.classList.remove("object-cover");
-                                                    e.currentTarget.classList.add("p-2");
+                                                    e.currentTarget.classList.remove(
+                                                        "object-cover"
+                                                    );
+                                                    e.currentTarget.classList.add(
+                                                        "p-2"
+                                                    );
                                                     e.currentTarget.src =
                                                         "https://www.datocms-assets.com/86369/1685489960-nft.svg";
                                                 }}
@@ -122,7 +138,14 @@ export const NFTWalletCollectionView: React.FC<
                                                 )
                                             );
                                             return (
-                                                <span>{prettifyCurrency(s, 2, "USD", true)}</span>
+                                                <span>
+                                                    {prettifyCurrency(
+                                                        s,
+                                                        2,
+                                                        "USD",
+                                                        true
+                                                    )}
+                                                </span>
                                             );
                                         },
                                     })}