refactor: components docs

apps/www/content/docs/components/balance.mdx

@@ -53,15 +53,12 @@ wagmi:
 ## Usage
 
 ```tsx
-import {
-  GasPrice,
-  MaxFeePerGas,
-  MaxPriorityFeePerGas,
-} from "@/registry/default/buidl/balance"
+import { Balance } from "@/registry/default/buidl/balance"
 ```
 
 ```tsx
-<GasPrice />
-<MaxFeePerGas />
-<MaxPriorityFeePerGas />
+<Balance />
+<Balance
+  address="0x0000000000000000000000000000000000000000"
+/>
 ```

apps/www/content/docs/components/blockie.mdx

@@ -2,6 +2,8 @@
 title: Blockie
 description: Display an account blockie identicon.
 component: true
+wagmi:
+  link: https://wagmi.sh/react/hooks/useAccount
 ---
 
 <ComponentPreview

apps/www/content/docs/components/ens-avatar.mdx

@@ -62,4 +62,5 @@ import { EnsAvatar } from "@/components/buidl/ens-avatar"
 
 ```tsx
 <EnsAvatar address="0x0000000000000000000000000000000000000000" />
+<EnsAvatar name="vitalik.eth" />
 ```

apps/www/content/docs/components/ens-name.mdx

@@ -57,5 +57,6 @@ import { EnsName } from "@/components/buidl/ens-name"
 ```
 
 ```tsx
+<EnsName />
 <EnsName address="0x0000000000000000000000000000000000000000" />
 ```

apps/www/content/docs/components/erc20-balance.mdx

@@ -36,6 +36,10 @@ wagmi:
 
 <Steps>
 
+<Step>Install the following shadcn/ui components:</Step>
+
+- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="erc20-balance" />

apps/www/content/docs/components/erc20-decimals.mdx

@@ -36,6 +36,10 @@ wagmi:
 
 <Steps>
 
+<Step>Install the following shadcn/ui components:</Step>
+
+- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="erc20-decimals" />

apps/www/content/docs/components/erc20-name.mdx

@@ -2,6 +2,8 @@
 title: ERC20 Name
 description: Display the name of an ERC20 token
 component: true
+wagmi:
+  link: https://wagmi.sh/react/hooks/useContractRead
 ---
 
 <ComponentPreview
@@ -34,6 +36,10 @@ component: true
 
 <Steps>
 
+<Step>Install the following shadcn/ui components:</Step>
+
+- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="erc20-name" />

apps/www/content/docs/components/erc20-symbol.mdx

@@ -1,7 +1,9 @@
 ---
-title: ENS Symbol
+title: ERC20 Symbol
 description: Display the symbol of an ERC20 token
 component: true
+wagmi:
+  link: https://wagmi.sh/react/hooks/useContractRead
 ---
 
 <ComponentPreview
@@ -34,6 +36,10 @@ component: true
 
 <Steps>
 
+<Step>Install the following shadcn/ui components:</Step>
+
+- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="erc20-symbol" />

apps/www/content/docs/components/erc20-total-supply.mdx

@@ -1,7 +1,9 @@
 ---
-title: ENS Symbol
-description: Display the symbol of an ERC20 token
+title: ERC20 Total Supply
+description: Display the total supply of an ERC20 token.
 component: true
+wagmi:
+  link: https://wagmi.sh/react/hooks/useContractRead
 ---
 
 <ComponentPreview
@@ -34,6 +36,10 @@ component: true
 
 <Steps>
 
+<Step>Install the following shadcn/ui components:</Step>
+
+- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="erc20-total-supply" />
@@ -51,5 +57,5 @@ import { Erc20Symbol } from "@/components/buidl/erc20-total-supply"
 ```
 
 ```tsx
-<Erc20Symbol address="0x0000000000000000000000000000000000000000" />
+<Erc20TotalSupply address="0x0000000000000000000000000000000000000000" />
 ```

apps/www/content/docs/components/erc721-metadata.mdx

@@ -2,6 +2,8 @@
 title: ERC721 Metadata
 description: Display the metadata of an ERC721 token.
 component: true
+wagmi:
+  link: https://wagmi.sh/react/hooks/useContractRead
 ---
 
 <ComponentPreview
@@ -34,6 +36,10 @@ component: true
 
 <Steps>
 
+<Step>Install the following shadcn/ui components:</Step>
+
+- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="erc721-metadata" />
@@ -46,10 +52,14 @@ component: true
 
 ## Usage
 
-```tsx
-import { Erc721Name } from "@/registry/default/buidl/erc721/erc721-metadata"
-```
+````tsx
+import { Erc721MetadataImage } from "@/registry/default/buidl/erc721/erc721-metadata"```
 
 ```tsx
-<Erc721Name address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB" chainId={1} />
-```
+<Erc721MetadataImage
+  className="mt-1 h-[250px] w-[250px]"
+  address="0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D"
+  tokenId={1}
+  chainId={1}
+/>
+````

apps/www/content/docs/components/erc721-name.mdx

@@ -2,6 +2,8 @@
 title: ERC721 Name
 description: Display the name of an ERC721 token
 component: true
+wagmi:
+  link: https://wagmi.sh/react/hooks/useContractRead
 ---
 
 <ComponentPreview

apps/www/content/docs/components/erc721-owner-of.mdx

@@ -2,6 +2,8 @@
 title: ERC721 Owner Of
 description: Display the owner of an ERC721 token
 component: true
+wagmi:
+  link: https://wagmi.sh/react/hooks/useContractRead
 ---
 
 <ComponentPreview
@@ -34,6 +36,10 @@ component: true
 
 <Steps>
 
+<Step>Install the following shadcn/ui components:</Step>
+
+- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="erc721-owner-of" />
@@ -47,9 +53,12 @@ component: true
 ## Usage
 
 ```tsx
-import { Erc20owner } from "@/components/buidl/erc721-owner-of"
+import { Erc721OwnerOf } from "@/registry/default/buidl/erc721/erc721-owner-of"
 ```
 
 ```tsx
-<Erc20owner address="0x0000000000000000000000000000000000000000" />
+<Erc721OwnerOf
+  tokenId={1}
+  address="0x0000000000000000000000000000000000000000"
+/>
 ```

apps/www/content/docs/components/erc721-symbol.mdx

@@ -2,6 +2,8 @@
 title: ERC721 Symbol
 description: Display the symbol of an ERC721 token
 component: true
+wagmi:
+  link: https://wagmi.sh/react/hooks/useContractRead
 ---
 
 <ComponentPreview
@@ -34,6 +36,10 @@ component: true
 
 <Steps>
 
+<Step>Install the following shadcn/ui components:</Step>
+
+- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="erc721-symbol" />
@@ -47,9 +53,9 @@ component: true
 ## Usage
 
 ```tsx
-import { Erc20Symbol } from "@/components/buidl/erc721-symbol"
+import { Erc721Symbol } from "@/components/buidl/erc721-symbol"
 ```
 
 ```tsx
-<Erc20Symbol address="0x0000000000000000000000000000000000000000" />
+<Erc721Symbol address="0x0000000000000000000000000000000000000000" />
 ```

apps/www/content/docs/components/erc721-token-uri.mdx

@@ -2,6 +2,8 @@
 title: ERC721 Token URI
 description: Display the token uri of an ERC721 token
 component: true
+wagmi:
+  link: https://wagmi.sh/react/hooks/useContractRead
 ---
 
 <ComponentPreview
@@ -34,6 +36,10 @@ component: true
 
 <Steps>
 
+<Step>Install the following shadcn/ui components:</Step>
+
+- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="erc721-token-uri" />
@@ -47,9 +53,13 @@ component: true
 ## Usage
 
 ```tsx
-import { Erc721Name } from "@/registry/default/buidl/erc721/erc721-token-uri"
+import { Erc721TokenUri } from "@/registry/default/buidl/erc721/erc721-token-uri"
 ```
 
 ```tsx
-<Erc721Name address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB" chainId={1} />
+<Erc721TokenUri
+  tokenId={1}
+  address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB"
+  chainId={1}
+/>
 ```

apps/www/content/docs/components/erc721-total-supply.mdx

@@ -2,6 +2,8 @@
 title: ERC721 Total Supply
 description: Display the total supply of an ERC721 token
 component: true
+wagmi:
+  link: https://wagmi.sh/react/hooks/useContractRead
 ---
 
 <ComponentPreview
@@ -34,6 +36,10 @@ component: true
 
 <Steps>
 
+<Step>Install the following shadcn/ui components:</Step>
+
+- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="erc721-total-supply" />
@@ -47,9 +53,12 @@ component: true
 ## Usage
 
 ```tsx
-import { Erc721Name } from "@/registry/default/buidl/erc721/erc721-total-supply"
+import { Erc721TotalSupply } from "@/registry/default/buidl/erc721/erc721-total-supply"
 ```
 
 ```tsx
-<Erc721Name address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB" chainId={1} />
+<Erc721TotalSupply
+  address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB"
+  chainId={1}
+/>
 ```

apps/www/content/docs/components/nonce.mdx

@@ -36,6 +36,10 @@ wagmi:
 
 <Steps>
 
+<Step>Install the following shadcn/ui components:</Step>
+
+- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
+
 <Step>Copy and paste the following code into your project.</Step>
 
 <ComponentSource name="nonce" />
@@ -49,9 +53,10 @@ wagmi:
 ## Usage
 
 ```tsx
-import { AccountNonce } from "@/components/buidl/nonce"
+import { Nonce } from "@/registry/default/buidl/nonce"
 ```
 
 ```tsx
-<AccountNonce />
+<Nonce />
+<Nonce chainId={1} />
 ```

apps/www/content/docs/components/sign-message-button.mdx

@@ -57,5 +57,5 @@ import { SignMessageButton } from "@/registry/default/buidl/sign-message-button"
 ```
 
 ```tsx
-<SignMessageButton message={message} />
+<SignMessageButton onSuccess={setSignature} message={message} />
 ```

apps/www/public/registry/styles/default/erc20-total-supply.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "erc20-total-supply.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatUnits } from \"viem\"\nimport { useContractRead } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc20TotalSupplyAbi = [\n  {\n    inputs: [],\n    name: \"totalSupply\",\n    outputs: [{ internalType: \"uint256\", name: \"\", type: \"uint256\" }],\n    stateMutability: \"view\",\n    type: \"function\",\n  },\n] as const\n\nconst erc20DecimalsAbi = [\n  {\n    inputs: [],\n    name: \"decimals\",\n    outputs: [\n      {\n        internalType: \"uint8\",\n        name: \"\",\n        type: \"uint8\",\n      },\n    ],\n    stateMutability: \"view\",\n    type: \"function\",\n  },\n] as const\n\nfunction trimFormattedBalance(balance: string | undefined, decimals = 4) {\n  if (!balance) {\n    return \"0\"\n  }\n  const [integer, decimal] = balance.split(\".\")\n  if (!decimal) return integer\n\n  const trimmedDecimal = decimal.slice(0, decimals)\n  return `${integer}.${trimmedDecimal}`\n}\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n  return (\n    <div className={cn(\"break-words text-sm font-medium text-red-500\")}>\n      {error?.message ?? \"Error while fetching ERC20 data\"}\n    </div>\n  )\n}\n\nexport type Erc20TotalSupplyProps = React.HTMLAttributes<HTMLSpanElement> & {\n  address: `0x${string}`\n  chainId?: number\n  formatDecimals?: number\n}\n\nconst Erc20TotalSupply = React.forwardRef<\n  HTMLSpanElement,\n  Erc20TotalSupplyProps\n>(({ chainId, address, formatDecimals = 4, ...props }, ref) => {\n  const {\n    data: totalSupply,\n    isLoading: isLoadingTotalSupply,\n    isError: isErrorTotalSupply,\n    error: errorTotalSupply,\n  } = useContractRead({\n    address,\n    abi: erc20TotalSupplyAbi,\n    functionName: \"totalSupply\",\n    chainId,\n  })\n\n  const {\n    data: decimals,\n    isLoading: isLoadingDecimals,\n    isError: isErrorDecimals,\n    error: errorDecimals,\n  } = useContractRead({\n    address,\n    abi: erc20DecimalsAbi,\n    functionName: \"decimals\",\n    chainId,\n  })\n\n  if (isLoadingTotalSupply || isLoadingDecimals) {\n    return <Skeleton className=\"h-6 w-12\" {...props} />\n  }\n\n  if (isErrorTotalSupply || isErrorDecimals) {\n    return <ErrorMessage error={errorTotalSupply ?? errorDecimals} />\n  }\n\n  if (totalSupply === undefined || decimals === undefined) {\n    return null\n  }\n\n  return (\n    <span ref={ref} {...props}>\n      {trimFormattedBalance(formatUnits(totalSupply, decimals), formatDecimals)}\n    </span>\n  )\n})\n\nErc20TotalSupply.displayName = \"Erc20TotalSupply\"\n\nexport { Erc20TotalSupply }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { formatUnits } from \"viem\"\nimport { useContractRead } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc20TotalSupplyAbi = [\n  {\n    inputs: [],\n    name: \"totalSupply\",\n    outputs: [{ internalType: \"uint256\", name: \"\", type: \"uint256\" }],\n    stateMutability: \"view\",\n    type: \"function\",\n  },\n] as const\n\nconst erc20DecimalsAbi = [\n  {\n    inputs: [],\n    name: \"decimals\",\n    outputs: [\n      {\n        internalType: \"uint8\",\n        name: \"\",\n        type: \"uint8\",\n      },\n    ],\n    stateMutability: \"view\",\n    type: \"function\",\n  },\n] as const\n\nfunction trimFormattedBalance(balance: string | undefined, decimals = 4) {\n  if (!balance) {\n    return \"0\"\n  }\n  const [integer, decimal] = balance.split(\".\")\n  if (!decimal) return integer\n\n  const trimmedDecimal = decimal.slice(0, decimals)\n  return `${integer}.${trimmedDecimal}`\n}\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n  return (\n    <div className={cn(\"break-words text-sm font-medium text-red-500\")}>\n      {error?.message ?? \"Error while fetching ERC20 data\"}\n    </div>\n  )\n}\n\nexport type Erc20TotalSupplyProps = React.HTMLAttributes<HTMLSpanElement> & {\n  address: `0x${string}`\n  chainId?: number\n  formatDecimals?: number\n}\n\nconst Erc20TotalSupply = React.forwardRef<\n  HTMLSpanElement,\n  Erc20TotalSupplyProps\n>(({ chainId, address, formatDecimals = 4, ...props }, ref) => {\n  const {\n    data: totalSupply,\n    isLoading: isLoadingTotalSupply,\n    isError: isErrorTotalSupply,\n    error: errorTotalSupply,\n  } = useContractRead({\n    address,\n    abi: erc20TotalSupplyAbi,\n    functionName: \"totalSupply\",\n    chainId,\n  })\n\n  const {\n    data: decimals,\n    isLoading: isLoadingDecimals,\n    isError: isErrorDecimals,\n    error: errorDecimals,\n  } = useContractRead({\n    address,\n    abi: erc20DecimalsAbi,\n    functionName: \"decimals\",\n    chainId,\n  })\n\n  if (isLoadingTotalSupply || isLoadingDecimals) {\n    return <Skeleton className=\"h-6 w-20\" {...props} />\n  }\n\n  if (isErrorTotalSupply || isErrorDecimals) {\n    return <ErrorMessage error={errorTotalSupply ?? errorDecimals} />\n  }\n\n  if (totalSupply === undefined || decimals === undefined) {\n    return null\n  }\n\n  return (\n    <span ref={ref} {...props}>\n      {trimFormattedBalance(formatUnits(totalSupply, decimals), formatDecimals)}\n    </span>\n  )\n})\n\nErc20TotalSupply.displayName = \"Erc20TotalSupply\"\n\nexport { Erc20TotalSupply }\n"
     }
   ],
   "folder": "erc20",

apps/www/public/registry/styles/default/sign-message-button.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "sign-message-button.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useSignMessage } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, ButtonProps } from \"@/registry/default/ui/button\"\n\ninterface SignMessageButtonProps extends Omit<ButtonProps, \"onCick\"> {\n  message: string\n  onSuccess?: (signature: string) => void\n}\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n  return (\n    <div className={cn(\"break-words text-sm font-medium text-red-500\")}>\n      {error?.message ?? \"Error while signing message\"}\n    </div>\n  )\n}\n\nconst SignMessageButton = React.forwardRef<\n  HTMLButtonElement,\n  SignMessageButtonProps\n>(({ message, onSuccess, className, children, disabled, ...props }, ref) => {\n  const { isLoading, isError, error, signMessage } = useSignMessage({\n    message,\n    onSuccess,\n  })\n\n  return (\n    <>\n      <Button\n        ref={ref}\n        disabled={isLoading || disabled}\n        onClick={() => signMessage()}\n        className={className}\n        {...props}\n      >\n        {isLoading ? \"Check Wallet\" : children ?? \"Sign Message\"}\n      </Button>\n      {isError && <ErrorMessage error={error} />}\n    </>\n  )\n})\n\nSignMessageButton.displayName = \"SignMessageButton\"\n\nexport { SignMessageButton }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useSignMessage } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, ButtonProps } from \"@/registry/default/ui/button\"\n\ninterface SignMessageButtonProps extends Omit<ButtonProps, \"onCick\"> {\n  message: string\n  onSuccess?: (signature: string) => void\n}\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n  return (\n    <div className={cn(\"break-words text-sm font-medium text-red-500\")}>\n      {error?.message ?? \"Error while signing message\"}\n    </div>\n  )\n}\n\nconst SignMessageButton = React.forwardRef<\n  HTMLButtonElement,\n  SignMessageButtonProps\n>(({ message, onSuccess, className, children, disabled, ...props }, ref) => {\n  const { isLoading, isError, error, signMessage } = useSignMessage({\n    message,\n    onSuccess,\n  })\n\n  return (\n    <>\n      <Button\n        ref={ref}\n        disabled={disabled || isLoading || message.length === 0}\n        onClick={() => signMessage()}\n        className={className}\n        {...props}\n      >\n        {isLoading ? \"Check Wallet\" : children ?? \"Sign Message\"}\n      </Button>\n      {isError && <ErrorMessage error={error} />}\n    </>\n  )\n})\n\nSignMessageButton.displayName = \"SignMessageButton\"\n\nexport { SignMessageButton }\n"
     }
   ],
   "type": "components:buidl"

apps/www/public/registry/styles/default/transaction-status.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "transaction-status.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useChainId, useWaitForTransaction } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst TransactionStatus = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & {\n    hash: `0x${string}`\n    chainId?: number\n  }\n>(({ chainId: selectedChainId, children, className, hash, ...props }, ref) => {\n  const currentChainId = useChainId()\n\n  const { isLoading, isSuccess, isError, error } = useWaitForTransaction({\n    hash: hash,\n    chainId: selectedChainId ?? currentChainId,\n  })\n\n  return (\n    <>\n      <div\n        ref={ref}\n        className={cn(\"flex flex-col items-center\", className)}\n        {...props}\n      >\n        {(isLoading || isSuccess) && (\n          <>\n            {isLoading && \"Processing transaction...\"}\n            {isSuccess && \"Transaction successful!\"}\n            {children}\n          </>\n        )}\n      </div>\n      {isError && (\n        <div className=\"break-words font-medium text-red-500\">\n          Error: {error?.message ?? \"Error processing transaction\"}\n        </div>\n      )}\n    </>\n  )\n})\n\nTransactionStatus.displayName = \"TransactionStatus\"\n\nexport { TransactionStatus }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useChainId, useWaitForTransaction } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n  return (\n    <div className={cn(\"break-words text-sm font-medium text-red-500\")}>\n      {error?.message ?? \"Error while fetching ERC721 data\"}\n    </div>\n  )\n}\n\nconst TransactionStatus = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & {\n    hash: `0x${string}`\n    chainId?: number\n  }\n>(({ chainId: selectedChainId, children, className, hash, ...props }, ref) => {\n  const currentChainId = useChainId()\n\n  const { isLoading, isSuccess, isError, error, isFetching } =\n    useWaitForTransaction({\n      hash: hash,\n      chainId: selectedChainId ?? currentChainId,\n    })\n\n  if (isFetching)\n    return <Skeleton className={cn(\"h-6 w-52\", className)} {...props} />\n\n  if (isError) return <ErrorMessage error={error} />\n\n  return (\n    <>\n      <div\n        ref={ref}\n        className={cn(\"flex flex-col items-center\", className)}\n        {...props}\n      >\n        {(isLoading || isSuccess) && (\n          <>\n            {isLoading && \"Processing transaction...\"}\n            {isSuccess && \"Transaction successful!\"}\n            {children}\n          </>\n        )}\n      </div>\n    </>\n  )\n})\n\nTransactionStatus.displayName = \"TransactionStatus\"\n\nexport { TransactionStatus }\n"
     }
   ],
   "type": "components:buidl"

apps/www/registry/default/buidl/erc20/erc20-total-supply.tsx

@@ -87,7 +87,7 @@ const Erc20TotalSupply = React.forwardRef<
   })
 
   if (isLoadingTotalSupply || isLoadingDecimals) {
-    return <Skeleton className="h-6 w-12" {...props} />
+    return <Skeleton className="h-6 w-20" {...props} />
   }
 
   if (isErrorTotalSupply || isErrorDecimals) {