refactor: buidl components

turbo-eth · Dec 1, 2023 · e8646c7 · e8646c7
1 parent 684dc84
commit e8646c7
Show file tree

Hide file tree

Showing 73 changed files with 801 additions and 396 deletions.
diff --git a/apps/www/__registry__/index.tsx b/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"],
+    },
   },
 }
diff --git a/apps/www/config/docs.ts b/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: [],
+        },
+      ],
+    },
   ],
 }
diff --git a/apps/www/content/docs/components/balance.mdx b/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)

diff --git a/apps/www/content/docs/components/block-number.mdx b/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)

diff --git a/apps/www/content/docs/components/blockie.mdx b/apps/www/content/docs/components/blockie.mdx
@@ -42,6 +42,10 @@ wagmi:
 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" />

diff --git a/apps/www/content/docs/components/ens-address.mdx b/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>
 

diff --git a/apps/www/content/docs/components/ens-name.mdx b/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>
 

diff --git 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 components:</Step>
+
+- [ErrorMessage](/docs/components/error-message)
+
 <Step>Install the following shadcn/ui components:</Step>
 
 - [Skeleton](https://ui.shadcn.com/docs/components/skeleton)

diff --git 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 components:</Step>
+
+- [ErrorMessage](/docs/components/error-message)
+
 <Step>Install the following shadcn/ui components:</Step>
 
 - [Skeleton](https://ui.shadcn.com/docs/components/skeleton)

diff --git a/apps/www/content/docs/components/erc20-name.mdx b/apps/www/content/docs/components/erc20-name.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)

diff --git a/apps/www/content/docs/components/erc20-symbol.mdx b/apps/www/content/docs/components/erc20-symbol.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)

diff --git a/apps/www/content/docs/components/erc20-total-supply.mdx b/apps/www/content/docs/components/erc20-total-supply.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)

diff --git a/apps/www/content/docs/components/erc721-metadata.mdx b/apps/www/content/docs/components/erc721-metadata.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)

diff --git a/apps/www/content/docs/components/erc721-name.mdx b/apps/www/content/docs/components/erc721-name.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="erc721-name" />

diff --git a/apps/www/content/docs/components/erc721-owner-of.mdx b/apps/www/content/docs/components/erc721-owner-of.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)

diff --git a/apps/www/content/docs/components/erc721-symbol.mdx b/apps/www/content/docs/components/erc721-symbol.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)

diff --git a/apps/www/content/docs/components/erc721-token-uri.mdx b/apps/www/content/docs/components/erc721-token-uri.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)

diff --git a/apps/www/content/docs/components/erc721-total-supply.mdx b/apps/www/content/docs/components/erc721-total-supply.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)

diff --git a/apps/www/content/docs/components/error-message.mdx b/apps/www/content/docs/components/error-message.mdx
@@ -0,0 +1,56 @@
+---
+title: Error Message
+description: Generic error message component.
+component: true
+---
+
+<ComponentPreview
+  name="error-message-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="error-message" />
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { EnsName } from "@/components/buidl/error-message"
+```
+
+```tsx
+<EnsName />
+<EnsName address="0x0000000000000000000000000000000000000000" />
+```
diff --git a/apps/www/content/docs/components/fee-data.mdx b/apps/www/content/docs/components/fee-data.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)

diff --git a/apps/www/content/docs/components/image-ipfs.mdx b/apps/www/content/docs/components/image-ipfs.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="image-ipfs" />

diff --git 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 components:</Step>
+
+- [ErrorMessage](/docs/components/error-message)
+
 <Step>Install the following shadcn/ui components:</Step>
 
 - [Skeleton](https://ui.shadcn.com/docs/components/skeleton)

diff --git a/apps/www/content/docs/components/transaction-status.mdx b/apps/www/content/docs/components/transaction-status.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="transaction-status" />

diff --git a/apps/www/content/docs/components/transaction.mdx b/apps/www/content/docs/components/transaction.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)

diff --git a/apps/www/public/registry/index.json b/apps/www/public/registry/index.json
@@ -321,5 +321,15 @@
     ],
     "folder": "erc721",
     "type": "components:buidl"
+  },
+  {
+    "name": "error-message",
+    "dependencies": [
+      "wagmi"
+    ],
+    "files": [
+      "buidl/error-message.tsx"
+    ],
+    "type": "components:buidl"
   }
 ]
diff --git a/apps/www/public/registry/styles/default/balance.json b/apps/www/public/registry/styles/default/balance.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "balance.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useAccount, useBalance, type Address } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\ninterface BalanceProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  address?: Address\n  chainId?: number\n  decimals?: number\n  displayLoading?: boolean\n  displayError?: boolean\n}\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 fee data\"}\n    </div>\n  )\n}\n\nconst Balance = React.forwardRef<HTMLDivElement, BalanceProps>(\n  (\n    {\n      address,\n      chainId,\n      className,\n      decimals = 4,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { address: connectedAddress } = useAccount()\n\n    const selectedAddress = address ? address : connectedAddress\n\n    const { data, isLoading, isSuccess, isError, error } = useBalance({\n      chainId,\n      address: selectedAddress,\n    })\n\n    if ((isLoading && displayLoading) || !selectedAddress)\n      return <Skeleton className={cn(\"h-6 w-24\", className)} {...props} />\n\n    if (isError && displayError) return <ErrorMessage error={error} />\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {trimFormattedBalance(data?.formatted, decimals)}\n        </div>\n      )\n    }\n\n    return null\n  }\n)\n\nBalance.displayName = \"Balance\"\n\nexport { Balance }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useAccount, useBalance, type Address } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ErrorMessage } from \"@/registry/default/buidl/error-message\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\ninterface BalanceProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  address?: Address\n  chainId?: number\n  decimals?: number\n  displayLoading?: boolean\n  displayError?: boolean\n}\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 Balance = React.forwardRef<HTMLDivElement, BalanceProps>(\n  (\n    {\n      address,\n      chainId,\n      className,\n      decimals = 4,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { address: connectedAddress } = useAccount()\n\n    const selectedAddress = address ? address : connectedAddress\n\n    const { data, isLoading, isSuccess, isError, error } = useBalance({\n      chainId,\n      address: selectedAddress,\n    })\n\n    if ((isLoading && displayLoading) || !selectedAddress)\n      return <Skeleton className={cn(\"h-6 w-24\", className)} {...props} />\n\n    if (isError && displayError)\n      return (\n        <ErrorMessage\n          ref={ref}\n          error={error}\n          defaultErrorMessage=\"Error while fetching fee data\"\n          {...props}\n        />\n      )\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {trimFormattedBalance(data?.formatted, decimals)}\n        </div>\n      )\n    }\n\n    return null\n  }\n)\n\nBalance.displayName = \"Balance\"\n\nexport { Balance }\n"
     }
   ],
   "type": "components:buidl"

diff --git a/apps/www/public/registry/styles/default/block-explorer-link.json b/apps/www/public/registry/styles/default/block-explorer-link.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "block-explorer-link.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Chain, useNetwork, type Address } from \"wagmi\"\nimport { mainnet } from \"wagmi/chains\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface BlockExplorerLinkProps\n  extends React.HTMLAttributes<HTMLAnchorElement> {\n  chain?: Chain\n  data: Address | undefined\n  showBlockExplorerName?: boolean\n  type?: \"address\" | \"tx\"\n}\n\nconst BlockExplorerLink = React.forwardRef<\n  HTMLAnchorElement,\n  BlockExplorerLinkProps\n>(\n  (\n    {\n      chain: selectedChain,\n      data,\n      children,\n      className,\n      showBlockExplorerName,\n      type = \"address\",\n      ...props\n    },\n    ref\n  ) => {\n    const { chain: currentChain } = useNetwork()\n\n    // Use mainnet as default chain\n    const chain =\n      selectedChain ?? (currentChain && !currentChain.unsupported)\n        ? currentChain\n        : mainnet\n    const blockExplorer = chain?.blockExplorers?.default\n\n    if (!data || !blockExplorer) return null\n\n    return (\n      <a\n        ref={ref}\n        className={cn(\n          \"overflow-x-auto font-medium underline-offset-2 hover:underline\",\n          className\n        )}\n        href={`${blockExplorer.url}/${type}/${data}`}\n        rel=\"noreferrer\"\n        target=\"_blank\"\n        {...props}\n      >\n        {showBlockExplorerName ? blockExplorer.name : children ?? data}\n      </a>\n    )\n  }\n)\n\nBlockExplorerLink.displayName = \"BlockExplorerLink\"\n\nexport { BlockExplorerLink }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useNetwork, type Address, type Chain } from \"wagmi\"\nimport { mainnet } from \"wagmi/chains\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface BlockExplorerLinkProps\n  extends React.HTMLAttributes<HTMLAnchorElement> {\n  chain?: Chain\n  data: Address | undefined\n  showBlockExplorerName?: boolean\n  type?: \"address\" | \"tx\"\n}\n\nconst BlockExplorerLink = React.forwardRef<\n  HTMLAnchorElement,\n  BlockExplorerLinkProps\n>(\n  (\n    {\n      chain: selectedChain,\n      data,\n      children,\n      className,\n      showBlockExplorerName,\n      type = \"address\",\n      ...props\n    },\n    ref\n  ) => {\n    const { chain: currentChain } = useNetwork()\n\n    // Use mainnet as default chain\n    const chain =\n      selectedChain ?? (currentChain && !currentChain.unsupported)\n        ? currentChain\n        : mainnet\n    const blockExplorer = chain?.blockExplorers?.default\n\n    if (!data || !blockExplorer) return null\n\n    return (\n      <a\n        ref={ref}\n        className={cn(\n          \"overflow-x-auto font-medium underline-offset-2 hover:underline\",\n          className\n        )}\n        href={`${blockExplorer.url}/${type}/${data}`}\n        rel=\"noreferrer\"\n        target=\"_blank\"\n        {...props}\n      >\n        {showBlockExplorerName ? blockExplorer.name : children ?? data}\n      </a>\n    )\n  }\n)\n\nBlockExplorerLink.displayName = \"BlockExplorerLink\"\n\nexport { BlockExplorerLink }\n"
     }
   ],
   "type": "components:buidl"

diff --git a/apps/www/public/registry/styles/default/block-number.json b/apps/www/public/registry/styles/default/block-number.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "block-number.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useBlockNumber } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\ninterface BlockNumberProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  chainId?: number\n  displayLoading?: boolean\n  displayError?: boolean\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 block number data\"}\n    </div>\n  )\n}\n\nconst BlockNumber = React.forwardRef<HTMLDivElement, BlockNumberProps>(\n  (\n    {\n      chainId,\n      className,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { data, isLoading, isSuccess, isError, error } = useBlockNumber({\n      chainId,\n    })\n\n    if (isLoading && displayLoading)\n      return <Skeleton className={cn(\"h-6 w-24\", className)} {...props} />\n\n    if (isError && displayError) return <ErrorMessage error={error} />\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {data?.toString()}\n        </div>\n      )\n    }\n\n    return null\n  }\n)\n\nBlockNumber.displayName = \"BlockNumber\"\n\nexport { BlockNumber }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useBlockNumber } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ErrorMessage } from \"@/registry/default/buidl/error-message\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\ninterface BlockNumberProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  chainId?: number\n  displayLoading?: boolean\n  displayError?: boolean\n}\n\nconst BlockNumber = React.forwardRef<HTMLDivElement, BlockNumberProps>(\n  (\n    {\n      chainId,\n      className,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { data, isLoading, isSuccess, isError, error } = useBlockNumber({\n      chainId,\n    })\n\n    if (isLoading && displayLoading)\n      return <Skeleton className={cn(\"h-6 w-24\", className)} {...props} />\n\n    if (isError && displayError)\n      return (\n        <ErrorMessage\n          defaultErrorMessage=\"Error while fetching block number data\"\n          error={error}\n        />\n      )\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {data?.toString()}\n        </div>\n      )\n    }\n\n    return null\n  }\n)\n\nBlockNumber.displayName = \"BlockNumber\"\n\nexport { BlockNumber }\n"
     }
   ],
   "type": "components:buidl"