feat: add erc20 and erc721 components

apps/www/__registry__/index.tsx

@@ -117,13 +117,6 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/buidl/is-wallet-disconnected")),
       files: ["registry/default/buidl/is-wallet-disconnected.tsx"],
     },
-    "network-manage": {
-      name: "network-manage",
-      type: "components:buidl",
-      registryDependencies: undefined,
-      component: React.lazy(() => import("@/registry/default/buidl/network-manage")),
-      files: ["registry/default/buidl/network-manage.tsx"],
-    },
     "wallet-connect": {
       name: "wallet-connect",
       type: "components:buidl",
@@ -138,26 +131,19 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/buidl/wallet-disconnect")),
       files: ["registry/default/buidl/wallet-disconnect.tsx"],
     },
-    "wallet-manage": {
-      name: "wallet-manage",
-      type: "components:buidl",
-      registryDependencies: undefined,
-      component: React.lazy(() => import("@/registry/default/buidl/wallet-manage")),
-      files: ["registry/default/buidl/wallet-manage.tsx"],
-    },
     "erc20-balance": {
       name: "erc20-balance",
       type: "components:buidl",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/buidl/erc20/erc20-balance")),
       files: ["registry/default/buidl/erc20/erc20-balance.tsx"],
     },
-    "erc20-image": {
-      name: "erc20-image",
+    "erc20-decimals": {
+      name: "erc20-decimals",
       type: "components:buidl",
       registryDependencies: undefined,
-      component: React.lazy(() => import("@/registry/default/buidl/erc20/erc20-image")),
-      files: ["registry/default/buidl/erc20/erc20-image.tsx"],
+      component: React.lazy(() => import("@/registry/default/buidl/erc20/erc20-decimals")),
+      files: ["registry/default/buidl/erc20/erc20-decimals.tsx"],
     },
     "erc20-name": {
       name: "erc20-name",
@@ -187,6 +173,55 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/buidl/erc20/erc20-symbol")),
       files: ["registry/default/buidl/erc20/erc20-symbol.tsx"],
     },
+    "erc20-total-supply": {
+      name: "erc20-total-supply",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/erc20/erc20-total-supply")),
+      files: ["registry/default/buidl/erc20/erc20-total-supply.tsx"],
+    },
+    "erc721-name": {
+      name: "erc721-name",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/erc721/erc721-name")),
+      files: ["registry/default/buidl/erc721/erc721-name.tsx"],
+    },
+    "erc721-symbol": {
+      name: "erc721-symbol",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/erc721/erc721-symbol")),
+      files: ["registry/default/buidl/erc721/erc721-symbol.tsx"],
+    },
+    "erc721-owner-of": {
+      name: "erc721-owner-of",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/erc721/erc721-owner-of")),
+      files: ["registry/default/buidl/erc721/erc721-owner-of.tsx"],
+    },
+    "erc721-total-supply": {
+      name: "erc721-total-supply",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/erc721/erc721-total-supply")),
+      files: ["registry/default/buidl/erc721/erc721-total-supply.tsx"],
+    },
+    "erc721-token-uri": {
+      name: "erc721-token-uri",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/erc721/erc721-token-uri")),
+      files: ["registry/default/buidl/erc721/erc721-token-uri.tsx"],
+    },
+    "erc721-metadata": {
+      name: "erc721-metadata",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/erc721/erc721-metadata")),
+      files: ["registry/default/buidl/erc721/erc721-metadata.tsx"],
+    },
     "nonce-demo": {
       name: "nonce-demo",
       type: "components:example",
@@ -299,13 +334,6 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/is-wallet-disconnected-demo")),
       files: ["registry/default/example/is-wallet-disconnected-demo.tsx"],
     },
-    "network-manage-demo": {
-      name: "network-manage-demo",
-      type: "components:example",
-      registryDependencies: ["network-manage"],
-      component: React.lazy(() => import("@/registry/default/example/network-manage-demo")),
-      files: ["registry/default/example/network-manage-demo.tsx"],
-    },
     "wallet-connect-demo": {
       name: "wallet-connect-demo",
       type: "components:example",
@@ -320,26 +348,19 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/wallet-disconnect-demo")),
       files: ["registry/default/example/wallet-disconnect-demo.tsx"],
     },
-    "wallet-manage-demo": {
-      name: "wallet-manage-demo",
-      type: "components:example",
-      registryDependencies: ["wallet-manage"],
-      component: React.lazy(() => import("@/registry/default/example/wallet-manage-demo")),
-      files: ["registry/default/example/wallet-manage-demo.tsx"],
-    },
     "erc20-balance-demo": {
       name: "erc20-balance-demo",
       type: "components:example",
       registryDependencies: ["erc20-balance"],
       component: React.lazy(() => import("@/registry/default/example/erc20-balance-demo")),
       files: ["registry/default/example/erc20-balance-demo.tsx"],
     },
-    "erc20-image-demo": {
-      name: "erc20-image-demo",
+    "erc20-decimals-demo": {
+      name: "erc20-decimals-demo",
       type: "components:example",
-      registryDependencies: ["erc20-image"],
-      component: React.lazy(() => import("@/registry/default/example/erc20-image-demo")),
-      files: ["registry/default/example/erc20-image-demo.tsx"],
+      registryDependencies: ["erc20-decimals"],
+      component: React.lazy(() => import("@/registry/default/example/erc20-decimals-demo")),
+      files: ["registry/default/example/erc20-decimals-demo.tsx"],
     },
     "erc20-name-demo": {
       name: "erc20-name-demo",
@@ -369,5 +390,54 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/erc20-symbol-demo")),
       files: ["registry/default/example/erc20-symbol-demo.tsx"],
     },
+    "erc20-total-supply-demo": {
+      name: "erc20-total-supply-demo",
+      type: "components:example",
+      registryDependencies: ["erc20-total-supply"],
+      component: React.lazy(() => import("@/registry/default/example/erc20-total-supply-demo")),
+      files: ["registry/default/example/erc20-total-supply-demo.tsx"],
+    },
+    "erc721-name-demo": {
+      name: "erc721-name-demo",
+      type: "components:example",
+      registryDependencies: ["erc721-name"],
+      component: React.lazy(() => import("@/registry/default/example/erc721-name-demo")),
+      files: ["registry/default/example/erc721-name-demo.tsx"],
+    },
+    "erc721-symbol-demo": {
+      name: "erc721-symbol-demo",
+      type: "components:example",
+      registryDependencies: ["erc721-symbol"],
+      component: React.lazy(() => import("@/registry/default/example/erc721-symbol-demo")),
+      files: ["registry/default/example/erc721-symbol-demo.tsx"],
+    },
+    "erc721-owner-of-demo": {
+      name: "erc721-owner-of-demo",
+      type: "components:example",
+      registryDependencies: ["erc721-owner-of"],
+      component: React.lazy(() => import("@/registry/default/example/erc721-owner-of-demo")),
+      files: ["registry/default/example/erc721-owner-of-demo.tsx"],
+    },
+    "erc721-total-supply-demo": {
+      name: "erc721-total-supply-demo",
+      type: "components:example",
+      registryDependencies: ["erc721-total-supply"],
+      component: React.lazy(() => import("@/registry/default/example/erc721-total-supply-demo")),
+      files: ["registry/default/example/erc721-total-supply-demo.tsx"],
+    },
+    "erc721-token-uri-demo": {
+      name: "erc721-token-uri-demo",
+      type: "components:example",
+      registryDependencies: ["erc721-total-token-uri"],
+      component: React.lazy(() => import("@/registry/default/example/erc721-token-uri-demo")),
+      files: ["registry/default/example/erc721-total-token-uri-demo.tsx"],
+    },
+    "erc721-metadata-demo": {
+      name: "erc721-metadata-demo",
+      type: "components:example",
+      registryDependencies: ["erc721-metadata"],
+      component: React.lazy(() => import("@/registry/default/example/erc721-metadata-demo")),
+      files: ["registry/default/example/erc721-metadata-demo.tsx"],
+    },
   },
 }

apps/www/config/docs.ts

@@ -70,16 +70,6 @@ export const docsConfig: DocsConfig = {
           href: "/docs/components/is-wallet-disconnected",
           items: [],
         },
-        {
-          title: "(WIP) Wallet Manage",
-          href: "/docs/components/wallet-manage",
-          items: [],
-        },
-        {
-          title: "(WIP) Network Manage",
-          href: "/docs/components/network-manage",
-          items: [],
-        },
       ],
     },
     {
@@ -166,8 +156,8 @@ export const docsConfig: DocsConfig = {
           items: [],
         },
         {
-          title: "ERC20 Image",
-          href: "/docs/components/erc20-image",
+          title: "ERC20 Decimals",
+          href: "/docs/components/erc20-decimals",
           items: [],
         },
         {
@@ -181,13 +171,43 @@ export const docsConfig: DocsConfig = {
           items: [],
         },
         {
-          title: "ERC20 Select",
-          href: "/docs/components/erc20-select",
+          title: "ERC20 Total Supply",
+          href: "/docs/components/erc20-total-supply",
+          items: [],
+        },
+      ],
+    },
+    {
+      title: "ERC721",
+      items: [
+        {
+          title: "ERC721 Name",
+          href: "/docs/components/erc721-name",
+          items: [],
+        },
+        {
+          title: "ERC721 Symbol",
+          href: "/docs/components/erc721-symbol",
+          items: [],
+        },
+        {
+          title: "ERC721 Owner Of",
+          href: "/docs/components/erc721-owner-of",
+          items: [],
+        },
+        {
+          title: "ERC721 Total Supply",
+          href: "/docs/components/erc721-total-supply",
+          items: [],
+        },
+        {
+          title: "ERC721 Token URI",
+          href: "/docs/components/erc721-token-uri",
           items: [],
         },
         {
-          title: "ERC20 Select & Amount",
-          href: "/docs/components/erc20-select-and-amount",
+          title: "ERC721 Metadata",
+          href: "/docs/components/erc721-metadata",
           items: [],
         },
       ],

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

@@ -2,6 +2,8 @@
 title: ERC20 Balance
 description: Display the balance of an ERC20 token for a given address.
 component: true
+wagmi:
+  link: https://wagmi.sh/react/hooks/useContractRead
 ---
 
 <ComponentPreview

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

@@ -0,0 +1,60 @@
+---
+title: ERC20 Decimals
+description: Display the decimals of an ERC20 token.
+component: true
+wagmi:
+  link: https://wagmi.sh/react/hooks/useContractRead
+---
+
+<ComponentPreview
+  name="erc20-decimals-demo"
+  className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
+/>
+
+## Installation
+
+<Tabs defaultValue="manual">
+
+<TabsList>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+  <TabsTrigger disabled={true} value="cli">
+    CLI (Coming Soon)
+  </TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
+<Steps>
+
+<Step>Coming soon...</Step>
+
+</Steps>
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="erc20-decimals" />
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { Erc20Decimals } from "@/registry/default/buidl/erc20/erc20-decimals"
+```
+
+```tsx
+<Erc20Decimals
+  address="0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2"
+  chainId={1}
+/>
+```

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

@@ -1,13 +1,11 @@
 ---
-title: (WIP) Network Manage
-description: Manage your wallet's network connections.
+title: ENS Symbol
+description: Display the symbol of an ERC20 token
 component: true
-wagmi:
-  link: https://wagmi.sh/react/hooks/useEnsAvatar
 ---
 
 <ComponentPreview
-  name="network-manage-demo"
+  name="erc20-total-supply-demo"
   className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
 />
 
@@ -38,7 +36,7 @@ wagmi:
 
 <Step>Copy and paste the following code into your project.</Step>
 
-<ComponentSource name="network-manage" />
+<ComponentSource name="erc20-total-supply" />
 
 </Steps>
 
@@ -49,9 +47,9 @@ wagmi:
 ## Usage
 
 ```tsx
-import { NetworkManage } from "@/components/buidl/network-manage"
+import { Erc20Symbol } from "@/components/buidl/erc20-total-supply"
 ```
 
 ```tsx
-<NetworkManage />
+<Erc20Symbol address="0x0000000000000000000000000000000000000000" />
 ```