Feat: add missing demo components (#1)

* feat: add missing demo components * feat: add missing component pages * chore: update typecheck command
turbo-eth · Nov 27, 2023 · 19342e8 · 19342e8
1 parent 8820053
commit 19342e8
Show file tree

Hide file tree

Showing 89 changed files with 1,790 additions and 1,461 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -9,6 +9,7 @@
   ],
   "plugins": ["tailwindcss"],
   "rules": {
+    "@next/next/no-img-element": "off",
     "@next/next/no-html-link-for-pages": "off",
     "tailwindcss/no-custom-classname": "off",
     "tailwindcss/classnames-order": "error"

diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx
@@ -5,13 +5,62 @@ import * as React from "react"
 
 export const Index: Record<string, any> = {
   "default": {
+    "account-address": {
+      name: "account-address",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/account-address")),
+      files: ["registry/default/buidl/account-address.tsx"],
+    },
+    "account-balance": {
+      name: "account-balance",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/account-balance")),
+      files: ["registry/default/buidl/account-balance.tsx"],
+    },
+    "account-blockie": {
+      name: "account-blockie",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/account-blockie")),
+      files: ["registry/default/buidl/account-blockie.tsx"],
+    },
+    "account-ens-avatar": {
+      name: "account-ens-avatar",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/account-ens-avatar")),
+      files: ["registry/default/buidl/account-ens-avatar.tsx"],
+    },
+    "account-ens-name": {
+      name: "account-ens-name",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/account-ens-name")),
+      files: ["registry/default/buidl/account-ens-name.tsx"],
+    },
+    "account-nonce": {
+      name: "account-nonce",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/account-nonce")),
+      files: ["registry/default/buidl/account-nonce.tsx"],
+    },
     "address": {
       name: "address",
       type: "components:buidl",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/buidl/address")),
       files: ["registry/default/buidl/address.tsx"],
     },
+    "block-explorer-link": {
+      name: "block-explorer-link",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/block-explorer-link")),
+      files: ["registry/default/buidl/block-explorer-link.tsx"],
+    },
     "blockie": {
       name: "blockie",
       type: "components:buidl",
@@ -33,27 +82,55 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/buidl/ens-name")),
       files: ["registry/default/buidl/ens-name.tsx"],
     },
+    "image-ipfs": {
+      name: "image-ipfs",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/image-ipfs")),
+      files: ["registry/default/buidl/image-ipfs.tsx"],
+    },
+    "is-wallet-connected": {
+      name: "is-wallet-connected",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/buidl/is-wallet-connected")),
+      files: ["registry/default/buidl/is-wallet-connected.tsx"],
+    },
+    "is-wallet-disconnected": {
+      name: "is-wallet-disconnected",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      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",
       registryDependencies: undefined,
       component: React.lazy(() => import("@/registry/default/buidl/wallet-connect")),
       files: ["registry/default/buidl/wallet-connect.tsx"],
     },
+    "wallet-disconnect": {
+      name: "wallet-disconnect",
+      type: "components:buidl",
+      registryDependencies: undefined,
+      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"],
     },
-    "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"],
-    },
     "erc20-balance": {
       name: "erc20-balance",
       type: "components:buidl",
@@ -75,12 +152,12 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/buidl/erc20/erc20-name")),
       files: ["registry/default/buidl/erc20/erc20-name.tsx"],
     },
-    "erc20-symbol": {
-      name: "erc20-symbol",
+    "erc20-select-and-amount": {
+      name: "erc20-select-and-amount",
       type: "components:buidl",
       registryDependencies: undefined,
-      component: React.lazy(() => import("@/registry/default/buidl/erc20/erc20-symbol")),
-      files: ["registry/default/buidl/erc20/erc20-symbol.tsx"],
+      component: React.lazy(() => import("@/registry/default/buidl/erc20/erc20-select-and-amount")),
+      files: ["registry/default/buidl/erc20/erc20-select-and-amount.tsx"],
     },
     "erc20-select": {
       name: "erc20-select",
@@ -89,12 +166,54 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/buidl/erc20/erc20-select")),
       files: ["registry/default/buidl/erc20/erc20-select.tsx"],
     },
-    "erc20-select-and-amount": {
-      name: "erc20-select-and-amount",
+    "erc20-symbol": {
+      name: "erc20-symbol",
       type: "components:buidl",
       registryDependencies: undefined,
-      component: React.lazy(() => import("@/registry/default/buidl/erc20/erc20-select-and-amount")),
-      files: ["registry/default/buidl/erc20/erc20-select-and-amount.tsx"],
+      component: React.lazy(() => import("@/registry/default/buidl/erc20/erc20-symbol")),
+      files: ["registry/default/buidl/erc20/erc20-symbol.tsx"],
+    },
+    "account-address-demo": {
+      name: "account-address-demo",
+      type: "components:example",
+      registryDependencies: ["account-address"],
+      component: React.lazy(() => import("@/registry/default/example/account-address-demo")),
+      files: ["registry/default/example/account-address-demo.tsx"],
+    },
+    "account-balance-demo": {
+      name: "account-balance-demo",
+      type: "components:example",
+      registryDependencies: ["account-address"],
+      component: React.lazy(() => import("@/registry/default/example/account-balance-demo")),
+      files: ["registry/default/example/account-balance-demo.tsx"],
+    },
+    "account-blockie-demo": {
+      name: "account-blockie-demo",
+      type: "components:example",
+      registryDependencies: ["account-address"],
+      component: React.lazy(() => import("@/registry/default/example/account-blockie-demo")),
+      files: ["registry/default/example/account-blockie-demo.tsx"],
+    },
+    "account-ens-avatar-demo": {
+      name: "account-ens-avatar-demo",
+      type: "components:example",
+      registryDependencies: ["account-ens-avatar"],
+      component: React.lazy(() => import("@/registry/default/example/account-ens-avatar-demo")),
+      files: ["registry/default/example/account-ens-avatar-demo.tsx"],
+    },
+    "account-ens-name-demo": {
+      name: "account-ens-name-demo",
+      type: "components:example",
+      registryDependencies: ["account-ens-name"],
+      component: React.lazy(() => import("@/registry/default/example/account-ens-name-demo")),
+      files: ["registry/default/example/account-ens-name-demo.tsx"],
+    },
+    "account-nonce-demo": {
+      name: "account-nonce-demo",
+      type: "components:example",
+      registryDependencies: ["account-ens-name"],
+      component: React.lazy(() => import("@/registry/default/example/account-nonce-demo")),
+      files: ["registry/default/example/account-nonce-demo.tsx"],
     },
     "address-demo": {
       name: "address-demo",
@@ -103,6 +222,13 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/address-demo")),
       files: ["registry/default/example/address-demo.tsx"],
     },
+    "block-explorer-link-demo": {
+      name: "block-explorer-link-demo",
+      type: "components:example",
+      registryDependencies: ["address"],
+      component: React.lazy(() => import("@/registry/default/example/block-explorer-link-demo")),
+      files: ["registry/default/example/block-explorer-link-demo.tsx"],
+    },
     "blockie-demo": {
       name: "blockie-demo",
       type: "components:example",
@@ -124,33 +250,33 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/ens-name-demo")),
       files: ["registry/default/example/ens-name-demo.tsx"],
     },
-    "account-address-demo": {
-      name: "account-address-demo",
+    "image-ipfs-demo": {
+      name: "image-ipfs-demo",
       type: "components:example",
-      registryDependencies: ["account-address"],
-      component: React.lazy(() => import("@/registry/default/example/account-address-demo")),
-      files: ["registry/default/example/account-address-demo.tsx"],
+      registryDependencies: ["ens-name"],
+      component: React.lazy(() => import("@/registry/default/example/image-ipfs-demo")),
+      files: ["registry/default/example/image-ipfs-demo.tsx"],
     },
-    "account-blockie-demo": {
-      name: "account-blockie-demo",
+    "is-wallet-connected-demo": {
+      name: "is-wallet-connected-demo",
       type: "components:example",
-      registryDependencies: ["account-blockie"],
-      component: React.lazy(() => import("@/registry/default/example/account-blockie-demo")),
-      files: ["registry/default/example/account-blockie-demo.tsx"],
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/is-wallet-connected-demo")),
+      files: ["registry/default/example/is-wallet-connected-demo.tsx"],
     },
-    "account-ens-avatar-demo": {
-      name: "account-ens-avatar-demo",
+    "is-wallet-disconnected-demo": {
+      name: "is-wallet-disconnected-demo",
       type: "components:example",
-      registryDependencies: ["account-ens-avatar"],
-      component: React.lazy(() => import("@/registry/default/example/account-ens-avatar-demo")),
-      files: ["registry/default/example/account-ens-avatar-demo.tsx"],
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/is-wallet-disconnected-demo")),
+      files: ["registry/default/example/is-wallet-disconnected-demo.tsx"],
     },
-    "account-ens-name-demo": {
-      name: "account-ens-name-demo",
+    "network-manage-demo": {
+      name: "network-manage-demo",
       type: "components:example",
-      registryDependencies: ["account-ens-name"],
-      component: React.lazy(() => import("@/registry/default/example/account-ens-name-demo")),
-      files: ["registry/default/example/account-ens-name-demo.tsx"],
+      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",
@@ -159,20 +285,20 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/wallet-connect-demo")),
       files: ["registry/default/example/wallet-connect-demo.tsx"],
     },
+    "wallet-disconnect-demo": {
+      name: "wallet-disconnect-demo",
+      type: "components:example",
+      registryDependencies: ["wallet-connect"],
+      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"],
     },
-    "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"],
-    },
     "erc20-balance-demo": {
       name: "erc20-balance-demo",
       type: "components:example",
@@ -194,12 +320,12 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/erc20-name-demo")),
       files: ["registry/default/example/erc20-name-demo.tsx"],
     },
-    "erc20-symbol-demo": {
-      name: "erc20-symbol-demo",
+    "erc20-select-and-amount-demo": {
+      name: "erc20-select-and-amount-demo",
       type: "components:example",
-      registryDependencies: ["erc20-symbol"],
-      component: React.lazy(() => import("@/registry/default/example/erc20-symbol-demo")),
-      files: ["registry/default/example/erc20-symbol-demo.tsx"],
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/example/erc20-select-and-amount-demo")),
+      files: ["registry/default/example/erc20-select-and-amount-demo.tsx"],
     },
     "erc20-select-demo": {
       name: "erc20-select-demo",
@@ -208,12 +334,12 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/erc20-select-demo")),
       files: ["registry/default/example/erc20-select-demo.tsx"],
     },
-    "erc20-select-and-amount-demo": {
-      name: "erc20-select-and-amount-demo",
+    "erc20-symbol-demo": {
+      name: "erc20-symbol-demo",
       type: "components:example",
-      registryDependencies: ["erc20-select-and-amount"],
-      component: React.lazy(() => import("@/registry/default/example/erc20-select-and-amount-demo")),
-      files: ["registry/default/example/erc20-select-and-amount-demo.tsx"],
+      registryDependencies: ["erc20-symbol"],
+      component: React.lazy(() => import("@/registry/default/example/erc20-symbol-demo")),
+      files: ["registry/default/example/erc20-symbol-demo.tsx"],
     },
   },
 }
diff --git a/apps/www/app/examples/layout.tsx b/apps/www/app/examples/layout.tsx
@@ -26,15 +26,15 @@ export default function ExamplesLayout({ children }: ExamplesLayoutProps) {
     <>
       <div className="container relative">
         <PageHeader className="page-header pb-8">
-        <Link
-          href="/docs/components/wallet-connect"
-          className="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
-        >
-          ⚡️ <Separator className="mx-2 h-4" orientation="vertical" />{" "}
-          <span className="sm:hidden">Build Web3 in Turbo Mode.</span>
-          <span className="hidden sm:inline">Build Web3 in Turbo Mode</span>
-          <ArrowRightIcon className="ml-1 h-4 w-4" />
-        </Link>
+          <Link
+            href="/docs/components/wallet-connect"
+            className="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
+          >
+            ⚡️ <Separator className="mx-2 h-4" orientation="vertical" />{" "}
+            <span className="sm:hidden">Build Web3 in Turbo Mode.</span>
+            <span className="hidden sm:inline">Build Web3 in Turbo Mode</span>
+            <ArrowRightIcon className="ml-1 h-4 w-4" />
+          </Link>
           <PageHeaderHeading className="hidden md:block">
             Check out some examples.
           </PageHeaderHeading>

diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
@@ -31,7 +31,7 @@ export const metadata: Metadata = {
     "Radix UI",
     "WAGMI",
     "Web3",
-    "Ethereum"
+    "Ethereum",
   ],
   authors: [
     {