Refactor: components

apps/www/__registry__/index.tsx

@@ -222,6 +222,13 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/buidl/erc721/erc721-metadata")),
       files: ["registry/default/buidl/erc721/erc721-metadata.tsx"],
     },
+    "error-message": {
+      name: "error-message",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/error-message")),
+      files: ["registry/default/buidl/error-message.tsx"],
+    },
     "nonce-demo": {
       name: "nonce-demo",
       type: "components:example",
@@ -439,5 +446,12 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/erc721-metadata-demo")),
       files: ["registry/default/example/erc721-metadata-demo.tsx"],
     },
+    "error-message-demo": {
+      name: "error-message-demo",
+      type: "components:example",
+      registryDependencies: ["error-message"],
+      component: React.lazy(() => import("@/registry/default/example/error-message-demo")),
+      files: ["registry/default/example/error-message-demo.tsx"],
+    },
   },
 }

apps/www/config/docs.ts

@@ -222,5 +222,15 @@ export const docsConfig: DocsConfig = {
         },
       ],
     },
+    {
+      title: "Miscellaneous",
+      items: [
+        {
+          title: "Error Message",
+          href: "/docs/components/error-message",
+          items: [],
+        },
+      ],
+    },
   ],
 }

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

@@ -36,6 +36,10 @@ wagmi:
 
 <Steps>
 
+<Step>Install the following components:</Step>
+
+- [ErrorMessage](/docs/components/error-message)
+
 <Step>Install the following shadcn/ui components:</Step>
 
 - [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
@@ -53,15 +57,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/block-number.mdx

@@ -36,6 +36,10 @@ wagmi:
 
 <Steps>
 
+<Step>Install the following components:</Step>
+
+- [ErrorMessage](/docs/components/error-message)
+
 <Step>Install the following shadcn/ui components:</Step>
 
 - [Skeleton](https://ui.shadcn.com/docs/components/skeleton)

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
@@ -40,6 +42,10 @@ component: true
 npm add ethereum-blockies-base64
 ```
 
+<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="blockie" />

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

@@ -39,6 +39,7 @@ wagmi:
 <Step>Install the following components:</Step>
 
 - [Address](/docs/components/address)
+- [ErrorMessage](/docs/components/error-message)
 
 <Step>Copy and paste the following code into your project.</Step>
 

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

@@ -39,6 +39,7 @@ wagmi:
 <Step>Install the following components:</Step>
 
 - [Address](/docs/components/address)
+- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
 
 <Step>Copy and paste the following code into your project.</Step>
 
@@ -57,5 +58,6 @@ import { EnsName } from "@/components/buidl/ens-name"
 ```
 
 ```tsx
+<EnsName />
 <EnsName address="0x0000000000000000000000000000000000000000" />
 ```

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

@@ -36,6 +36,14 @@ wagmi:
 
 <Steps>
 
+<Step>Install the following components:</Step>
+
+- [ErrorMessage](/docs/components/error-message)
+
+<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,14 @@ wagmi:
 
 <Steps>
 
+<Step>Install the following components:</Step>
+
+- [ErrorMessage](/docs/components/error-message)
+
+<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,14 @@ component: true
 
 <Steps>
 
+<Step>Install the following components:</Step>
+
+- [ErrorMessage](/docs/components/error-message)
+
+<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,14 @@ component: true
 
 <Steps>
 
+<Step>Install the following components:</Step>
+
+- [ErrorMessage](/docs/components/error-message)
+
+<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,14 @@ component: true
 
 <Steps>
 
+<Step>Install the following components:</Step>
+
+- [ErrorMessage](/docs/components/error-message)
+
+<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 +61,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,14 @@ component: true
 
 <Steps>
 
+<Step>Install the following components:</Step>
+
+- [ErrorMessage](/docs/components/error-message)
+
+<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 +56,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
@@ -34,6 +36,14 @@ component: true
 
 <Steps>
 
+<Step>Install the following components:</Step>
+
+- [ErrorMessage](/docs/components/error-message)
+
+<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-name" />

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,14 @@ component: true
 
 <Steps>
 
+<Step>Install the following components:</Step>
+
+- [ErrorMessage](/docs/components/error-message)
+
+<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 +57,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,14 @@ component: true
 
 <Steps>
 
+<Step>Install the following components:</Step>
+
+- [ErrorMessage](/docs/components/error-message)
+
+<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 +57,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" />
 ```