From 8ae644063b61eccc3e53594ac54407a834f7471f Mon Sep 17 00:00:00 2001
From: Vitor <marthendalnunes@gmail.com>
Date: Thu, 30 Nov 2023 10:58:02 -0300
Subject: [PATCH] refactor: components docs

---
 apps/www/content/docs/components/balance.mdx  | 13 ++++-----
 apps/www/content/docs/components/blockie.mdx  |  2 ++
 .../content/docs/components/ens-avatar.mdx    |  1 +
 apps/www/content/docs/components/ens-name.mdx |  1 +
 .../content/docs/components/erc20-balance.mdx |  4 +++
 .../docs/components/erc20-decimals.mdx        |  4 +++
 .../content/docs/components/erc20-name.mdx    |  6 ++++
 .../content/docs/components/erc20-symbol.mdx  |  8 +++++-
 .../docs/components/erc20-total-supply.mdx    | 12 ++++++--
 .../docs/components/erc721-metadata.mdx       | 20 +++++++++----
 .../content/docs/components/erc721-name.mdx   |  2 ++
 .../docs/components/erc721-owner-of.mdx       | 13 +++++++--
 .../content/docs/components/erc721-symbol.mdx | 10 +++++--
 .../docs/components/erc721-token-uri.mdx      | 14 ++++++++--
 .../docs/components/erc721-total-supply.mdx   | 13 +++++++--
 apps/www/content/docs/components/nonce.mdx    |  9 ++++--
 .../docs/components/sign-message-button.mdx   |  2 +-
 .../styles/default/erc20-total-supply.json    |  2 +-
 .../styles/default/sign-message-button.json   |  2 +-
 .../styles/default/transaction-status.json    |  2 +-
 .../buidl/erc20/erc20-total-supply.tsx        |  2 +-
 .../default/buidl/sign-message-button.tsx     |  2 +-
 .../default/buidl/transaction-status.tsx      | 28 +++++++++++++------
 .../example/erc20-total-supply-demo.tsx       |  2 +-
 apps/www/registry/default/ui/skeleton.tsx     |  2 +-
 25 files changed, 132 insertions(+), 44 deletions(-)

diff --git a/apps/www/content/docs/components/balance.mdx b/apps/www/content/docs/components/balance.mdx
index 4b23413..8466170 100644
--- a/apps/www/content/docs/components/balance.mdx
+++ b/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"
+/>
 ```
diff --git a/apps/www/content/docs/components/blockie.mdx b/apps/www/content/docs/components/blockie.mdx
index dddc5fd..f85aea2 100644
--- a/apps/www/content/docs/components/blockie.mdx
+++ b/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
diff --git a/apps/www/content/docs/components/ens-avatar.mdx b/apps/www/content/docs/components/ens-avatar.mdx
index a11336b..542ba3b 100644
--- a/apps/www/content/docs/components/ens-avatar.mdx
+++ b/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" />
 ```
diff --git a/apps/www/content/docs/components/ens-name.mdx b/apps/www/content/docs/components/ens-name.mdx
index 425288f..2491169 100644
--- a/apps/www/content/docs/components/ens-name.mdx
+++ b/apps/www/content/docs/components/ens-name.mdx
@@ -57,5 +57,6 @@ import { EnsName } from "@/components/buidl/ens-name"
 ```
 
 ```tsx
+<EnsName />
 <EnsName address="0x0000000000000000000000000000000000000000" />
 ```
diff --git a/apps/www/content/docs/components/erc20-balance.mdx b/apps/www/content/docs/components/erc20-balance.mdx
index 2ebb2a1..22ffe04 100644
--- a/apps/www/content/docs/components/erc20-balance.mdx
+++ b/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" />
diff --git a/apps/www/content/docs/components/erc20-decimals.mdx b/apps/www/content/docs/components/erc20-decimals.mdx
index 9af3301..8a7803c 100644
--- a/apps/www/content/docs/components/erc20-decimals.mdx
+++ b/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" />
diff --git a/apps/www/content/docs/components/erc20-name.mdx b/apps/www/content/docs/components/erc20-name.mdx
index d2da2fc..5616dd8 100644
--- a/apps/www/content/docs/components/erc20-name.mdx
+++ b/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" />
diff --git a/apps/www/content/docs/components/erc20-symbol.mdx b/apps/www/content/docs/components/erc20-symbol.mdx
index 7eefe42..00fcc11 100644
--- a/apps/www/content/docs/components/erc20-symbol.mdx
+++ b/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" />
diff --git a/apps/www/content/docs/components/erc20-total-supply.mdx b/apps/www/content/docs/components/erc20-total-supply.mdx
index a12301b..feb0583 100644
--- a/apps/www/content/docs/components/erc20-total-supply.mdx
+++ b/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" />
 ```
diff --git a/apps/www/content/docs/components/erc721-metadata.mdx b/apps/www/content/docs/components/erc721-metadata.mdx
index 8d6e10b..cc5735d 100644
--- a/apps/www/content/docs/components/erc721-metadata.mdx
+++ b/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}
+/>
+````
diff --git a/apps/www/content/docs/components/erc721-name.mdx b/apps/www/content/docs/components/erc721-name.mdx
index bfedfa9..7eac17d 100644
--- a/apps/www/content/docs/components/erc721-name.mdx
+++ b/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
diff --git a/apps/www/content/docs/components/erc721-owner-of.mdx b/apps/www/content/docs/components/erc721-owner-of.mdx
index 9e0600e..27bd0e5 100644
--- a/apps/www/content/docs/components/erc721-owner-of.mdx
+++ b/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"
+/>
 ```
diff --git a/apps/www/content/docs/components/erc721-symbol.mdx b/apps/www/content/docs/components/erc721-symbol.mdx
index dcc6207..b935b62 100644
--- a/apps/www/content/docs/components/erc721-symbol.mdx
+++ b/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" />
 ```
diff --git a/apps/www/content/docs/components/erc721-token-uri.mdx b/apps/www/content/docs/components/erc721-token-uri.mdx
index 8662b0d..4a0cbcb 100644
--- a/apps/www/content/docs/components/erc721-token-uri.mdx
+++ b/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}
+/>
 ```
diff --git a/apps/www/content/docs/components/erc721-total-supply.mdx b/apps/www/content/docs/components/erc721-total-supply.mdx
index 842537f..2e683a9 100644
--- a/apps/www/content/docs/components/erc721-total-supply.mdx
+++ b/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}
+/>
 ```
diff --git a/apps/www/content/docs/components/nonce.mdx b/apps/www/content/docs/components/nonce.mdx
index 0eedf70..d9c71a9 100644
--- a/apps/www/content/docs/components/nonce.mdx
+++ b/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} />
 ```
diff --git a/apps/www/content/docs/components/sign-message-button.mdx b/apps/www/content/docs/components/sign-message-button.mdx
index 617202e..62a7f2f 100644
--- a/apps/www/content/docs/components/sign-message-button.mdx
+++ b/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} />
 ```
diff --git a/apps/www/public/registry/styles/default/erc20-total-supply.json b/apps/www/public/registry/styles/default/erc20-total-supply.json
index 0fa73b4..2884118 100644
--- a/apps/www/public/registry/styles/default/erc20-total-supply.json
+++ b/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",
diff --git a/apps/www/public/registry/styles/default/sign-message-button.json b/apps/www/public/registry/styles/default/sign-message-button.json
index a9f25fc..266129b 100644
--- a/apps/www/public/registry/styles/default/sign-message-button.json
+++ b/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"
diff --git a/apps/www/public/registry/styles/default/transaction-status.json b/apps/www/public/registry/styles/default/transaction-status.json
index e270152..832a3b0 100644
--- a/apps/www/public/registry/styles/default/transaction-status.json
+++ b/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"
diff --git a/apps/www/registry/default/buidl/erc20/erc20-total-supply.tsx b/apps/www/registry/default/buidl/erc20/erc20-total-supply.tsx
index 07da805..36c627e 100644
--- a/apps/www/registry/default/buidl/erc20/erc20-total-supply.tsx
+++ b/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) {
diff --git a/apps/www/registry/default/buidl/sign-message-button.tsx b/apps/www/registry/default/buidl/sign-message-button.tsx
index 7dbde38..2b9c257 100644
--- a/apps/www/registry/default/buidl/sign-message-button.tsx
+++ b/apps/www/registry/default/buidl/sign-message-button.tsx
@@ -32,7 +32,7 @@ const SignMessageButton = React.forwardRef<
     <>
       <Button
         ref={ref}
-        disabled={isLoading || disabled}
+        disabled={disabled || isLoading || message.length === 0}
         onClick={() => signMessage()}
         className={className}
         {...props}
diff --git a/apps/www/registry/default/buidl/transaction-status.tsx b/apps/www/registry/default/buidl/transaction-status.tsx
index 70e0c52..3c12894 100644
--- a/apps/www/registry/default/buidl/transaction-status.tsx
+++ b/apps/www/registry/default/buidl/transaction-status.tsx
@@ -4,6 +4,15 @@ import * as React from "react"
 import { useChainId, useWaitForTransaction } from "wagmi"
 
 import { cn } from "@/lib/utils"
+import { Skeleton } from "@/registry/default/ui/skeleton"
+
+const ErrorMessage = ({ error }: { error: Error | null }) => {
+  return (
+    <div className={cn("break-words text-sm font-medium text-red-500")}>
+      {error?.message ?? "Error while fetching ERC721 data"}
+    </div>
+  )
+}
 
 const TransactionStatus = React.forwardRef<
   HTMLDivElement,
@@ -14,10 +23,16 @@ const TransactionStatus = React.forwardRef<
 >(({ chainId: selectedChainId, children, className, hash, ...props }, ref) => {
   const currentChainId = useChainId()
 
-  const { isLoading, isSuccess, isError, error } = useWaitForTransaction({
-    hash: hash,
-    chainId: selectedChainId ?? currentChainId,
-  })
+  const { isLoading, isSuccess, isError, error, isFetching } =
+    useWaitForTransaction({
+      hash: hash,
+      chainId: selectedChainId ?? currentChainId,
+    })
+
+  if (isFetching)
+    return <Skeleton className={cn("h-6 w-52", className)} {...props} />
+
+  if (isError) return <ErrorMessage error={error} />
 
   return (
     <>
@@ -34,11 +49,6 @@ const TransactionStatus = React.forwardRef<
           </>
         )}
       </div>
-      {isError && (
-        <div className="break-words font-medium text-red-500">
-          Error: {error?.message ?? "Error processing transaction"}
-        </div>
-      )}
     </>
   )
 })
diff --git a/apps/www/registry/default/example/erc20-total-supply-demo.tsx b/apps/www/registry/default/example/erc20-total-supply-demo.tsx
index b2d7f47..097c690 100644
--- a/apps/www/registry/default/example/erc20-total-supply-demo.tsx
+++ b/apps/www/registry/default/example/erc20-total-supply-demo.tsx
@@ -1,6 +1,6 @@
 import { Erc20TotalSupply } from "@/registry/default/buidl/erc20/erc20-total-supply"
 
-export default function Erc20SymbolDemo() {
+export default function Erc20TotalSupplyDemo() {
   return (
     <div className="flex flex-col items-center gap-4 text-center">
       <h3 className="text-lg font-bold">Default (WETH)</h3>
diff --git a/apps/www/registry/default/ui/skeleton.tsx b/apps/www/registry/default/ui/skeleton.tsx
index f7855b9..11ca1b5 100644
--- a/apps/www/registry/default/ui/skeleton.tsx
+++ b/apps/www/registry/default/ui/skeleton.tsx
@@ -7,7 +7,7 @@ function Skeleton({
   return (
     <div
       className={cn(
-        "animate-pulse rounded-md bg-neutral-300 dark:bg-muted",
+        "animate-pulse rounded-md bg-neutral-300/90 dark:bg-neutral-500/90",
         className
       )}
       {...props}