From e8646c77e26d164f342ce810a1a69199d1948f31 Mon Sep 17 00:00:00 2001 From: Vitor Date: Fri, 1 Dec 2023 11:58:12 -0300 Subject: [PATCH] refactor: buidl components --- apps/www/__registry__/index.tsx | 14 ++ apps/www/config/docs.ts | 10 ++ apps/www/content/docs/components/balance.mdx | 4 + .../content/docs/components/block-number.mdx | 4 + apps/www/content/docs/components/blockie.mdx | 4 + .../content/docs/components/ens-address.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 | 4 + .../content/docs/components/erc20-symbol.mdx | 4 + .../docs/components/erc20-total-supply.mdx | 4 + .../docs/components/erc721-metadata.mdx | 4 + .../content/docs/components/erc721-name.mdx | 8 ++ .../docs/components/erc721-owner-of.mdx | 4 + .../content/docs/components/erc721-symbol.mdx | 4 + .../docs/components/erc721-token-uri.mdx | 4 + .../docs/components/erc721-total-supply.mdx | 4 + .../content/docs/components/error-message.mdx | 56 ++++++++ apps/www/content/docs/components/fee-data.mdx | 4 + .../content/docs/components/image-ipfs.mdx | 8 ++ apps/www/content/docs/components/nonce.mdx | 4 + .../docs/components/transaction-status.mdx | 8 ++ .../content/docs/components/transaction.mdx | 4 + apps/www/public/registry/index.json | 10 ++ .../registry/styles/default/balance.json | 2 +- .../styles/default/block-explorer-link.json | 2 +- .../registry/styles/default/block-number.json | 2 +- .../registry/styles/default/ens-address.json | 2 +- .../registry/styles/default/ens-name.json | 2 +- .../styles/default/erc20-balance.json | 2 +- .../styles/default/erc20-decimals.json | 2 +- .../registry/styles/default/erc20-name.json | 2 +- .../registry/styles/default/erc20-symbol.json | 2 +- .../styles/default/erc20-total-supply.json | 2 +- .../styles/default/erc721-metadata.json | 2 +- .../registry/styles/default/erc721-name.json | 2 +- .../styles/default/erc721-owner-of.json | 2 +- .../styles/default/erc721-symbol.json | 2 +- .../styles/default/erc721-token-uri.json | 2 +- .../styles/default/erc721-total-supply.json | 2 +- .../styles/default/error-message.json | 13 ++ .../registry/styles/default/fee-data.json | 2 +- .../registry/styles/default/image-ipfs.json | 2 +- .../public/registry/styles/default/nonce.json | 2 +- .../styles/default/sign-message-button.json | 2 +- .../styles/default/transaction-status.json | 2 +- .../registry/styles/default/transaction.json | 2 +- apps/www/registry/default/buidl/balance.tsx | 19 +-- .../default/buidl/block-explorer-link.tsx | 2 +- .../registry/default/buidl/block-number.tsx | 17 ++- .../registry/default/buidl/ens-address.tsx | 28 ++-- apps/www/registry/default/buidl/ens-name.tsx | 8 +- .../default/buidl/erc20/erc20-balance.tsx | 45 ++++--- .../default/buidl/erc20/erc20-decimals.tsx | 37 +++--- .../default/buidl/erc20/erc20-name.tsx | 37 +++--- .../default/buidl/erc20/erc20-symbol.tsx | 37 +++--- .../buidl/erc20/erc20-total-supply.tsx | 121 ++++++++++-------- .../default/buidl/erc721/erc721-metadata.tsx | 69 ++++++---- .../default/buidl/erc721/erc721-name.tsx | 37 +++--- .../default/buidl/erc721/erc721-owner-of.tsx | 51 ++++---- .../default/buidl/erc721/erc721-symbol.tsx | 37 +++--- .../default/buidl/erc721/erc721-token-uri.tsx | 44 ++++--- .../buidl/erc721/erc721-total-supply.tsx | 71 +++++----- .../registry/default/buidl/error-message.tsx | 33 +++++ apps/www/registry/default/buidl/fee-data.tsx | 18 +-- .../www/registry/default/buidl/image-ipfs.tsx | 31 +++-- apps/www/registry/default/buidl/nonce.tsx | 29 ++++- .../default/buidl/sign-message-button.tsx | 17 +-- .../default/buidl/transaction-status.tsx | 83 +++++++----- .../registry/default/buidl/transaction.tsx | 72 ++++++++--- .../default/example/error-message-demo.tsx | 5 + apps/www/registry/registry.ts | 12 ++ 73 files changed, 801 insertions(+), 396 deletions(-) create mode 100644 apps/www/content/docs/components/error-message.mdx create mode 100644 apps/www/public/registry/styles/default/error-message.json create mode 100644 apps/www/registry/default/buidl/error-message.tsx create mode 100644 apps/www/registry/default/example/error-message-demo.tsx diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx index c2d0270..253bb19 100644 --- a/apps/www/__registry__/index.tsx +++ b/apps/www/__registry__/index.tsx @@ -222,6 +222,13 @@ export const Index: Record = { 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 = { 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 index 7c08c4d..65c09fd 100644 --- 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 index 8466170..1f39c53 100644 --- a/apps/www/content/docs/components/balance.mdx +++ b/apps/www/content/docs/components/balance.mdx @@ -36,6 +36,10 @@ wagmi: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + Install the following shadcn/ui components: - [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 index fa1b52d..753f35d 100644 --- a/apps/www/content/docs/components/block-number.mdx +++ b/apps/www/content/docs/components/block-number.mdx @@ -36,6 +36,10 @@ wagmi: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + Install the following shadcn/ui components: - [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 index f85aea2..adbf19a 100644 --- 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 ``` +Install the following shadcn/ui components: + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/ens-address.mdx b/apps/www/content/docs/components/ens-address.mdx index 752f0ea..f91655d 100644 --- a/apps/www/content/docs/components/ens-address.mdx +++ b/apps/www/content/docs/components/ens-address.mdx @@ -39,6 +39,7 @@ wagmi: Install the following components: - [Address](/docs/components/address) +- [ErrorMessage](/docs/components/error-message) Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/ens-name.mdx b/apps/www/content/docs/components/ens-name.mdx index 2491169..85332fb 100644 --- a/apps/www/content/docs/components/ens-name.mdx +++ b/apps/www/content/docs/components/ens-name.mdx @@ -39,6 +39,7 @@ wagmi: Install the following components: - [Address](/docs/components/address) +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/erc20-balance.mdx b/apps/www/content/docs/components/erc20-balance.mdx index 22ffe04..573f7bf 100644 --- a/apps/www/content/docs/components/erc20-balance.mdx +++ b/apps/www/content/docs/components/erc20-balance.mdx @@ -36,6 +36,10 @@ wagmi: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + Install the following shadcn/ui components: - [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 index 8a7803c..5093f97 100644 --- a/apps/www/content/docs/components/erc20-decimals.mdx +++ b/apps/www/content/docs/components/erc20-decimals.mdx @@ -36,6 +36,10 @@ wagmi: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + Install the following shadcn/ui components: - [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 index 5616dd8..9ba82a1 100644 --- a/apps/www/content/docs/components/erc20-name.mdx +++ b/apps/www/content/docs/components/erc20-name.mdx @@ -36,6 +36,10 @@ wagmi: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + Install the following shadcn/ui components: - [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 index 00fcc11..8567b51 100644 --- a/apps/www/content/docs/components/erc20-symbol.mdx +++ b/apps/www/content/docs/components/erc20-symbol.mdx @@ -36,6 +36,10 @@ wagmi: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + Install the following shadcn/ui components: - [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 index feb0583..dde82ba 100644 --- 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: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + Install the following shadcn/ui components: - [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 index cc5735d..cfe1a6f 100644 --- a/apps/www/content/docs/components/erc721-metadata.mdx +++ b/apps/www/content/docs/components/erc721-metadata.mdx @@ -36,6 +36,10 @@ wagmi: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + Install the following shadcn/ui components: - [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 index 7eac17d..eea1d5f 100644 --- a/apps/www/content/docs/components/erc721-name.mdx +++ b/apps/www/content/docs/components/erc721-name.mdx @@ -36,6 +36,14 @@ wagmi: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + +Install the following shadcn/ui components: + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/erc721-owner-of.mdx b/apps/www/content/docs/components/erc721-owner-of.mdx index 27bd0e5..24743e0 100644 --- 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: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + Install the following shadcn/ui components: - [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 index b935b62..8f75a5e 100644 --- a/apps/www/content/docs/components/erc721-symbol.mdx +++ b/apps/www/content/docs/components/erc721-symbol.mdx @@ -36,6 +36,10 @@ wagmi: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + Install the following shadcn/ui components: - [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 index 4a0cbcb..2cf1f14 100644 --- 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: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + Install the following shadcn/ui components: - [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 index 2e683a9..a2b7102 100644 --- 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: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + Install the following shadcn/ui components: - [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 new file mode 100644 index 0000000..9152baa --- /dev/null +++ b/apps/www/content/docs/components/error-message.mdx @@ -0,0 +1,56 @@ +--- +title: Error Message +description: Generic error message component. +component: true +--- + + + +## Installation + + + + + Manual + + CLI (Coming Soon) + + + + + + + +Coming soon... + + + + + + + + + +Copy and paste the following code into your project. + + + + + + + + + +## Usage + +```tsx +import { EnsName } from "@/components/buidl/error-message" +``` + +```tsx + + +``` diff --git a/apps/www/content/docs/components/fee-data.mdx b/apps/www/content/docs/components/fee-data.mdx index 520f423..8c611f5 100644 --- a/apps/www/content/docs/components/fee-data.mdx +++ b/apps/www/content/docs/components/fee-data.mdx @@ -36,6 +36,10 @@ wagmi: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + Install the following shadcn/ui components: - [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 index 3a44612..8aea640 100644 --- a/apps/www/content/docs/components/image-ipfs.mdx +++ b/apps/www/content/docs/components/image-ipfs.mdx @@ -36,6 +36,14 @@ wagmi: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + +Install the following shadcn/ui components: + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/nonce.mdx b/apps/www/content/docs/components/nonce.mdx index a78dee7..d1f7574 100644 --- a/apps/www/content/docs/components/nonce.mdx +++ b/apps/www/content/docs/components/nonce.mdx @@ -36,6 +36,10 @@ wagmi: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + Install the following shadcn/ui components: - [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 index 7cb2463..0d40f23 100644 --- a/apps/www/content/docs/components/transaction-status.mdx +++ b/apps/www/content/docs/components/transaction-status.mdx @@ -36,6 +36,14 @@ wagmi: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + +Install the following shadcn/ui components: + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + Copy and paste the following code into your project. diff --git a/apps/www/content/docs/components/transaction.mdx b/apps/www/content/docs/components/transaction.mdx index f301cc9..807505d 100644 --- a/apps/www/content/docs/components/transaction.mdx +++ b/apps/www/content/docs/components/transaction.mdx @@ -36,6 +36,10 @@ wagmi: +Install the following components: + +- [ErrorMessage](/docs/components/error-message) + Install the following shadcn/ui components: - [Skeleton](https://ui.shadcn.com/docs/components/skeleton) diff --git a/apps/www/public/registry/index.json b/apps/www/public/registry/index.json index 923bbf1..30955e0 100644 --- 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" } ] \ No newline at end of file diff --git a/apps/www/public/registry/styles/default/balance.json b/apps/www/public/registry/styles/default/balance.json index 52235c2..6e99140 100644 --- 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, \"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
\n {error?.message ?? \"Error while fetching fee data\"}\n
\n )\n}\n\nconst Balance = React.forwardRef(\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 \n\n if (isError && displayError) return \n\n if (isSuccess) {\n return (\n
\n {trimFormattedBalance(data?.formatted, decimals)}\n
\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, \"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(\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 \n\n if (isError && displayError)\n return (\n \n )\n\n if (isSuccess) {\n return (\n
\n {trimFormattedBalance(data?.formatted, decimals)}\n
\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 index ffbf1a3..bd0b9d6 100644 --- 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 {\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 \n {showBlockExplorerName ? blockExplorer.name : children ?? data}\n \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 {\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 \n {showBlockExplorerName ? blockExplorer.name : children ?? data}\n \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 index 6703f57..0fe135f 100644 --- 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, \"children\"> {\n chainId?: number\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n return (\n
\n {error?.message ?? \"Error while fetching block number data\"}\n
\n )\n}\n\nconst BlockNumber = React.forwardRef(\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 \n\n if (isError && displayError) return \n\n if (isSuccess) {\n return (\n
\n {data?.toString()}\n
\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, \"children\"> {\n chainId?: number\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst BlockNumber = React.forwardRef(\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 \n\n if (isError && displayError)\n return (\n \n )\n\n if (isSuccess) {\n return (\n
\n {data?.toString()}\n
\n )\n }\n\n return null\n }\n)\n\nBlockNumber.displayName = \"BlockNumber\"\n\nexport { BlockNumber }\n" } ], "type": "components:buidl" diff --git a/apps/www/public/registry/styles/default/ens-address.json b/apps/www/public/registry/styles/default/ens-address.json index bbf01e0..6ed03e2 100644 --- a/apps/www/public/registry/styles/default/ens-address.json +++ b/apps/www/public/registry/styles/default/ens-address.json @@ -6,7 +6,7 @@ "files": [ { "name": "ens-address.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useEnsAddress } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Address, AddressProps } from \"@/registry/default/buidl/address\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n return (\n
\n {error?.message ?? \"Error while fetching fee data\"}\n
\n )\n}\n\ninterface EnsAddressProps extends Omit {\n name: string\n}\n\nconst EnsAddress = React.forwardRef(\n ({ name, className, ...props }, ref) => {\n const { data, isLoading, isSuccess, isError, error } = useEnsAddress({\n chainId: 1,\n name,\n })\n\n if (isError) {\n return \n }\n\n if (isLoading || !data) {\n return (\n \n )\n }\n\n if (isSuccess && data) {\n return (\n
\n )\n }\n\n return null\n }\n)\n\nEnsAddress.displayName = \"EnsAddress\"\n\nexport { EnsAddress }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useEnsAddress } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Address, AddressProps } from \"@/registry/default/buidl/address\"\nimport { ErrorMessage } from \"@/registry/default/buidl/error-message\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\ninterface EnsAddressProps extends Omit {\n name: string\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst EnsAddress = React.forwardRef(\n (\n { name, className, displayLoading = true, displayError = true, ...props },\n ref\n ) => {\n const { data, isLoading, isSuccess, isError, error } = useEnsAddress({\n chainId: 1,\n name,\n })\n\n if (displayError && isError) {\n return (\n \n )\n }\n\n if (displayLoading && (isLoading || !data)) {\n return (\n \n )\n }\n\n if (isSuccess && data) {\n return (\n
\n )\n }\n\n return null\n }\n)\n\nEnsAddress.displayName = \"EnsAddress\"\n\nexport { EnsAddress }\n" } ], "type": "components:buidl" diff --git a/apps/www/public/registry/styles/default/ens-name.json b/apps/www/public/registry/styles/default/ens-name.json index e81a1e8..090dbe8 100644 --- a/apps/www/public/registry/styles/default/ens-name.json +++ b/apps/www/public/registry/styles/default/ens-name.json @@ -6,7 +6,7 @@ "files": [ { "name": "ens-name.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useAccount, useEnsName } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Address } from \"@/registry/default/buidl/address\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\ninterface EnsNameProps extends React.HTMLAttributes {\n address?: `0x${string}`\n}\n\nconst EnsName = React.forwardRef(\n ({ address, className, ...props }, ref) => {\n const { address: connectedAddress } = useAccount()\n const selectedAddress = address ?? connectedAddress\n\n const { data, isLoading, isSuccess } = useEnsName({\n chainId: 1,\n address: selectedAddress,\n enabled: !!selectedAddress,\n })\n\n if (isSuccess && data) {\n return (\n
\n {data}\n
\n )\n }\n\n if (isLoading || !selectedAddress) {\n return \n }\n\n return (\n
\n )\n }\n)\n\nEnsName.displayName = \"EnsName\"\n\nexport { EnsName }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useAccount, useEnsName } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Address } from \"@/registry/default/buidl/address\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\ninterface EnsNameProps extends React.HTMLAttributes {\n address?: `0x${string}`\n}\n\nconst EnsName = React.forwardRef(\n ({ address, className, ...props }, ref) => {\n const { address: connectedAddress } = useAccount()\n const selectedAddress = address ?? connectedAddress\n\n const { data, isLoading, isSuccess } = useEnsName({\n chainId: 1,\n address: selectedAddress,\n enabled: !!selectedAddress,\n })\n\n if (isLoading || !selectedAddress) {\n return \n }\n\n if (isSuccess && data) {\n return (\n
\n {data}\n
\n )\n }\n\n return (\n
\n )\n }\n)\n\nEnsName.displayName = \"EnsName\"\n\nexport { EnsName }\n" } ], "type": "components:buidl" diff --git a/apps/www/public/registry/styles/default/erc20-balance.json b/apps/www/public/registry/styles/default/erc20-balance.json index e918f72..3ba29d0 100644 --- a/apps/www/public/registry/styles/default/erc20-balance.json +++ b/apps/www/public/registry/styles/default/erc20-balance.json @@ -6,7 +6,7 @@ "files": [ { "name": "erc20-balance.tsx", - "content": "import * as React from \"react\"\nimport { formatUnits } from \"viem\"\nimport { useAccount, useContractRead } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc20BalanceOfAbi = [\n {\n inputs: [\n {\n internalType: \"address\",\n name: \"account\",\n type: \"address\",\n },\n ],\n name: \"balanceOf\",\n outputs: [\n {\n internalType: \"uint256\",\n name: \"balance\",\n type: \"uint256\",\n },\n ],\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
\n {error?.message ?? \"Error while fetching ERC20 data\"}\n
\n )\n}\n\nexport type Erc20BalanceProps = React.HTMLAttributes & {\n address: `0x${string}`\n chainId?: number\n account?: `0x${string}`\n formatDecimals?: number\n}\n\nconst Erc20Balance = React.forwardRef(\n ({ chainId, address, account, formatDecimals = 4, ...props }, ref) => {\n const { address: currentAccount } = useAccount()\n const selectedAccount = account ?? currentAccount\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 const {\n data: balance,\n isLoading: isLoadingBalance,\n isError: isErrorBalance,\n error: errorBalance,\n } = useContractRead({\n address,\n abi: erc20BalanceOfAbi,\n functionName: \"balanceOf\",\n args: selectedAccount ? [selectedAccount] : undefined,\n enabled: !!selectedAccount,\n chainId,\n })\n\n if (isLoadingDecimals || isLoadingBalance) {\n return \n }\n\n if (isErrorDecimals || isErrorBalance) {\n return \n }\n\n if (balance === undefined || decimals === undefined) {\n return null\n }\n\n return (\n \n {trimFormattedBalance(formatUnits(balance, decimals), formatDecimals)}\n \n )\n }\n)\n\nErc20Balance.displayName = \"Erc20Balance\"\n\nexport { Erc20Balance }\n" + "content": "import * as React from \"react\"\nimport { formatUnits } from \"viem\"\nimport { useAccount, useContractRead } from \"wagmi\"\n\nimport { ErrorMessage } from \"@/registry/default/buidl/error-message\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc20BalanceOfAbi = [\n {\n inputs: [\n {\n internalType: \"address\",\n name: \"account\",\n type: \"address\",\n },\n ],\n name: \"balanceOf\",\n outputs: [\n {\n internalType: \"uint256\",\n name: \"balance\",\n type: \"uint256\",\n },\n ],\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\nexport type Erc20BalanceProps = React.HTMLAttributes & {\n address: `0x${string}`\n chainId?: number\n account?: `0x${string}`\n formatDecimals?: number\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst Erc20Balance = React.forwardRef(\n (\n {\n chainId,\n address,\n account,\n formatDecimals = 4,\n displayLoading = true,\n displayError = true,\n ...props\n },\n ref\n ) => {\n const { address: currentAccount } = useAccount()\n const selectedAccount = account ?? currentAccount\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 const {\n data: balance,\n isLoading: isLoadingBalance,\n isError: isErrorBalance,\n error: errorBalance,\n } = useContractRead({\n address,\n abi: erc20BalanceOfAbi,\n functionName: \"balanceOf\",\n args: selectedAccount ? [selectedAccount] : undefined,\n enabled: !!selectedAccount,\n chainId,\n })\n\n if (displayLoading && (isLoadingDecimals || isLoadingBalance)) {\n return \n }\n\n if (displayError && (isErrorDecimals || isErrorBalance)) {\n return (\n \n )\n }\n\n if (balance === undefined || decimals === undefined) {\n return null\n }\n\n return (\n
\n {trimFormattedBalance(formatUnits(balance, decimals), formatDecimals)}\n
\n )\n }\n)\n\nErc20Balance.displayName = \"Erc20Balance\"\n\nexport { Erc20Balance }\n" } ], "folder": "erc20", diff --git a/apps/www/public/registry/styles/default/erc20-decimals.json b/apps/www/public/registry/styles/default/erc20-decimals.json index 6af6f3a..7831fb8 100644 --- a/apps/www/public/registry/styles/default/erc20-decimals.json +++ b/apps/www/public/registry/styles/default/erc20-decimals.json @@ -6,7 +6,7 @@ "files": [ { "name": "erc20-decimals.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\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\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n return (\n
\n {error?.message ?? \"Error while fetching ERC20 data\"}\n
\n )\n}\n\nexport type Erc20DecimalsProps = React.HTMLAttributes & {\n address: `0x${string}`\n chainId?: number\n}\n\nconst Erc20Decimals = React.forwardRef(\n ({ chainId, address, ...props }, ref) => {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc20DecimalsAbi,\n functionName: \"decimals\",\n chainId,\n })\n\n if (isLoading) {\n return \n }\n\n if (isError) {\n return \n }\n\n if (data === undefined) {\n return null\n }\n\n return (\n \n {data}\n \n )\n }\n)\n\nErc20Decimals.displayName = \"Erc20Decimals\"\n\nexport { Erc20Decimals }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead } from \"wagmi\"\n\nimport { ErrorMessage } from \"@/registry/default/buidl/error-message\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\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\nexport type Erc20DecimalsProps = React.HTMLAttributes & {\n address: `0x${string}`\n chainId?: number\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst Erc20Decimals = React.forwardRef(\n (\n { chainId, address, displayLoading = true, displayError = true, ...props },\n ref\n ) => {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc20DecimalsAbi,\n functionName: \"decimals\",\n chainId,\n })\n\n if (displayLoading && isLoading) {\n return \n }\n\n if (displayError && isError) {\n return (\n \n )\n }\n\n if (data === undefined) {\n return null\n }\n\n return (\n
\n {data}\n
\n )\n }\n)\n\nErc20Decimals.displayName = \"Erc20Decimals\"\n\nexport { Erc20Decimals }\n" } ], "folder": "erc20", diff --git a/apps/www/public/registry/styles/default/erc20-name.json b/apps/www/public/registry/styles/default/erc20-name.json index 5e5dc99..5b44964 100644 --- a/apps/www/public/registry/styles/default/erc20-name.json +++ b/apps/www/public/registry/styles/default/erc20-name.json @@ -6,7 +6,7 @@ "files": [ { "name": "erc20-name.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc20NameAbi = [\n {\n inputs: [],\n name: \"name\",\n outputs: [\n {\n internalType: \"string\",\n name: \"name\",\n type: \"string\",\n },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n] as const\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n return (\n
\n {error?.message ?? \"Error while fetching ERC20 data\"}\n
\n )\n}\n\nexport type Erc20NameProps = React.HTMLAttributes & {\n address: `0x${string}`\n chainId?: number\n}\n\nconst Erc20Name = React.forwardRef(\n ({ chainId, address, ...props }, ref) => {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc20NameAbi,\n functionName: \"name\",\n chainId,\n })\n\n if (isLoading) {\n return \n }\n\n if (isError) {\n return \n }\n\n if (data === undefined) {\n return null\n }\n\n return (\n \n {data}\n \n )\n }\n)\n\nErc20Name.displayName = \"Erc20Name\"\n\nexport { Erc20Name }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead } from \"wagmi\"\n\nimport { ErrorMessage } from \"@/registry/default/buidl/error-message\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc20NameAbi = [\n {\n inputs: [],\n name: \"name\",\n outputs: [\n {\n internalType: \"string\",\n name: \"name\",\n type: \"string\",\n },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n] as const\n\nexport type Erc20NameProps = React.HTMLAttributes & {\n address: `0x${string}`\n chainId?: number\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst Erc20Name = React.forwardRef(\n (\n { chainId, address, displayLoading = true, displayError = true, ...props },\n ref\n ) => {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc20NameAbi,\n functionName: \"name\",\n chainId,\n })\n\n if (displayLoading && isLoading) {\n return \n }\n\n if (displayError && isError) {\n return (\n \n )\n }\n\n if (data === undefined) {\n return null\n }\n\n return (\n
\n {data}\n
\n )\n }\n)\n\nErc20Name.displayName = \"Erc20Name\"\n\nexport { Erc20Name }\n" } ], "folder": "erc20", diff --git a/apps/www/public/registry/styles/default/erc20-symbol.json b/apps/www/public/registry/styles/default/erc20-symbol.json index 1a33581..9223e56 100644 --- a/apps/www/public/registry/styles/default/erc20-symbol.json +++ b/apps/www/public/registry/styles/default/erc20-symbol.json @@ -6,7 +6,7 @@ "files": [ { "name": "erc20-symbol.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc20SymbolAbi = [\n {\n inputs: [],\n name: \"symbol\",\n outputs: [\n {\n internalType: \"string\",\n name: \"symbol\",\n type: \"string\",\n },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n] as const\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n return (\n
\n {error?.message ?? \"Error while fetching ERC20 data\"}\n
\n )\n}\n\nexport type Erc20SymbolProps = React.HTMLAttributes & {\n address: `0x${string}`\n chainId?: number\n}\n\nconst Erc20Symbol = React.forwardRef(\n ({ chainId, address, ...props }, ref) => {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc20SymbolAbi,\n functionName: \"symbol\",\n chainId,\n })\n\n if (isLoading) {\n return \n }\n\n if (isError) {\n return \n }\n\n if (data === undefined) {\n return null\n }\n\n return (\n \n {data}\n \n )\n }\n)\n\nErc20Symbol.displayName = \"Erc20Symbol\"\n\nexport { Erc20Symbol }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead } from \"wagmi\"\n\nimport { ErrorMessage } from \"@/registry/default/buidl/error-message\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc20SymbolAbi = [\n {\n inputs: [],\n name: \"symbol\",\n outputs: [\n {\n internalType: \"string\",\n name: \"symbol\",\n type: \"string\",\n },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n] as const\n\nexport type Erc20SymbolProps = React.HTMLAttributes & {\n address: `0x${string}`\n chainId?: number\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst Erc20Symbol = React.forwardRef(\n (\n { chainId, address, displayLoading = true, displayError = true, ...props },\n ref\n ) => {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc20SymbolAbi,\n functionName: \"symbol\",\n chainId,\n })\n\n if (displayLoading && isLoading) {\n return \n }\n\n if (displayError && isError) {\n return (\n \n )\n }\n\n if (data === undefined) {\n return null\n }\n\n return (\n
\n {data}\n
\n )\n }\n)\n\nErc20Symbol.displayName = \"Erc20Symbol\"\n\nexport { Erc20Symbol }\n" } ], "folder": "erc20", 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 2884118..875b280 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
\n {error?.message ?? \"Error while fetching ERC20 data\"}\n
\n )\n}\n\nexport type Erc20TotalSupplyProps = React.HTMLAttributes & {\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 \n }\n\n if (isErrorTotalSupply || isErrorDecimals) {\n return \n }\n\n if (totalSupply === undefined || decimals === undefined) {\n return null\n }\n\n return (\n \n {trimFormattedBalance(formatUnits(totalSupply, decimals), formatDecimals)}\n \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 { ErrorMessage } from \"@/registry/default/buidl/error-message\"\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\nexport type Erc20TotalSupplyProps = React.HTMLAttributes & {\n address: `0x${string}`\n chainId?: number\n formatDecimals?: number\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst Erc20TotalSupply = React.forwardRef<\n HTMLDivElement,\n Erc20TotalSupplyProps\n>(\n (\n {\n chainId,\n address,\n formatDecimals = 4,\n displayLoading = true,\n displayError = true,\n ...props\n },\n ref\n ) => {\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 (displayLoading && (isLoadingTotalSupply || isLoadingDecimals)) {\n return \n }\n\n if (displayError && (isErrorTotalSupply || isErrorDecimals)) {\n return (\n \n )\n }\n\n if (totalSupply === undefined || decimals === undefined) {\n return null\n }\n\n return (\n
\n {trimFormattedBalance(\n formatUnits(totalSupply, decimals),\n formatDecimals\n )}\n
\n )\n }\n)\n\nErc20TotalSupply.displayName = \"Erc20TotalSupply\"\n\nexport { Erc20TotalSupply }\n" } ], "folder": "erc20", diff --git a/apps/www/public/registry/styles/default/erc721-metadata.json b/apps/www/public/registry/styles/default/erc721-metadata.json index 9b0942b..6d8cd1b 100644 --- a/apps/www/public/registry/styles/default/erc721-metadata.json +++ b/apps/www/public/registry/styles/default/erc721-metadata.json @@ -6,7 +6,7 @@ "files": [ { "name": "erc721-metadata.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead, useQuery, type Address } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc721TokenUriAbi = [\n {\n inputs: [\n {\n internalType: \"uint256\",\n name: \"tokenId\",\n type: \"uint256\",\n },\n ],\n name: \"tokenURI\",\n outputs: [\n {\n internalType: \"string\",\n name: \"\",\n type: \"string\",\n },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n] as const\n\ninterface useERC721MetadataProps {\n tokenId: bigint\n ipfsGatewayUrl?: string\n address?: Address\n chainId?: number\n}\ninterface IERC721Metadata {\n name?: string\n description?: string\n image: string\n attributes: Array<{\n trait_type: string\n value: string\n }>\n}\n\nfunction useERC721Metadata({\n address,\n chainId,\n tokenId,\n ipfsGatewayUrl = \"https://ipfs.io/ipfs/\",\n}: useERC721MetadataProps) {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc721TokenUriAbi,\n functionName: \"tokenURI\",\n args: [tokenId],\n chainId,\n })\n\n const metadataQuery = useQuery(\n [\"erc721-metadata\", address, chainId, tokenId, data],\n {\n queryFn: async () => {\n if (!data) throw new Error(\"No tokenUri found\")\n const uri = data.replace(\"ipfs://\", \"\")\n const response = await fetch(`${ipfsGatewayUrl}${uri}`)\n const json = (await response.json()) as IERC721Metadata\n\n if (!json.image) throw new Error(\"No image found in metadata\")\n if (!json.attributes) throw new Error(\"No attributes found in metadata\")\n\n json.image = json.image.startsWith(\"ipfs://\")\n ? json.image.replace(\"ipfs://\", `${ipfsGatewayUrl}`)\n : json.image\n return json\n },\n enabled: !!data,\n }\n )\n\n return {\n isLoading: isLoading || metadataQuery.isLoading,\n isError: isError || metadataQuery.isError,\n error: error || metadataQuery.error,\n data: metadataQuery.data,\n }\n}\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n return (\n
\n {error?.message ?? \"Error while fetching ERC721 data\"}\n
\n )\n}\n\nexport type Erc721MetadataProps = React.HTMLAttributes & {\n address: `0x${string}`\n tokenId: number | string | bigint\n chainId?: number\n ipfsGatewayUrl?: string\n}\n\nconst Erc721MetadataImage = React.forwardRef<\n HTMLImageElement,\n Erc721MetadataProps\n>(({ chainId, address, tokenId, ipfsGatewayUrl, ...props }, ref) => {\n const { data, isLoading, isError, error } = useERC721Metadata({\n address,\n chainId,\n tokenId: BigInt(tokenId),\n ipfsGatewayUrl,\n })\n\n if (isLoading) {\n return \n }\n\n if (isError) {\n return \n }\n\n if (data?.image === undefined) {\n return null\n }\n\n return {`${tokenId}\n})\n\nErc721MetadataImage.displayName = \"Erc721MetadataImage\"\n\nexport { Erc721MetadataImage }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead, useQuery, type Address } from \"wagmi\"\n\nimport { ErrorMessage } from \"@/registry/default/buidl/error-message\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc721TokenUriAbi = [\n {\n inputs: [\n {\n internalType: \"uint256\",\n name: \"tokenId\",\n type: \"uint256\",\n },\n ],\n name: \"tokenURI\",\n outputs: [\n {\n internalType: \"string\",\n name: \"\",\n type: \"string\",\n },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n] as const\n\ninterface useERC721MetadataProps {\n tokenId: bigint\n ipfsGatewayUrl?: string\n address?: Address\n chainId?: number\n}\ninterface IERC721Metadata {\n name?: string\n description?: string\n image: string\n attributes: Array<{\n trait_type: string\n value: string\n }>\n}\n\nfunction useERC721Metadata({\n address,\n chainId,\n tokenId,\n ipfsGatewayUrl = \"https://ipfs.io/ipfs/\",\n}: useERC721MetadataProps) {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc721TokenUriAbi,\n functionName: \"tokenURI\",\n args: [tokenId],\n chainId,\n })\n\n const metadataQuery = useQuery(\n [\"erc721-metadata\", address, chainId, tokenId, data],\n {\n queryFn: async () => {\n if (!data) throw new Error(\"No tokenUri found\")\n const uri = data.replace(\"ipfs://\", \"\")\n const response = await fetch(`${ipfsGatewayUrl}${uri}`)\n const json = (await response.json()) as IERC721Metadata\n\n if (!json.image) throw new Error(\"No image found in metadata\")\n if (!json.attributes) throw new Error(\"No attributes found in metadata\")\n\n json.image = json.image.startsWith(\"ipfs://\")\n ? json.image.replace(\"ipfs://\", `${ipfsGatewayUrl}`)\n : json.image\n return json\n },\n enabled: !!data,\n }\n )\n\n return {\n isLoading: isLoading || metadataQuery.isLoading,\n isError: isError || metadataQuery.isError,\n error: error || metadataQuery.error,\n data: metadataQuery.data,\n }\n}\n\nexport type Erc721MetadataProps = React.HTMLAttributes & {\n address: `0x${string}`\n tokenId: number | string | bigint\n chainId?: number\n ipfsGatewayUrl?: string\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst Erc721MetadataImage = React.forwardRef<\n HTMLImageElement,\n Erc721MetadataProps\n>(\n (\n {\n chainId,\n address,\n tokenId,\n ipfsGatewayUrl,\n displayLoading = true,\n displayError = true,\n ...props\n },\n ref\n ) => {\n const { data, isLoading, isError, error } = useERC721Metadata({\n address,\n chainId,\n tokenId: BigInt(tokenId),\n ipfsGatewayUrl,\n })\n\n if (displayLoading && isLoading) {\n return \n }\n\n if (displayError && isError) {\n return (\n \n )\n }\n\n if (data?.image === undefined) {\n return null\n }\n\n return (\n {`${tokenId}\n )\n }\n)\n\nErc721MetadataImage.displayName = \"Erc721MetadataImage\"\n\nexport { Erc721MetadataImage }\n" } ], "folder": "erc721", diff --git a/apps/www/public/registry/styles/default/erc721-name.json b/apps/www/public/registry/styles/default/erc721-name.json index eb34ffe..2361bb6 100644 --- a/apps/www/public/registry/styles/default/erc721-name.json +++ b/apps/www/public/registry/styles/default/erc721-name.json @@ -6,7 +6,7 @@ "files": [ { "name": "erc721-name.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc721NameAbi = [\n {\n inputs: [],\n name: \"name\",\n outputs: [\n {\n internalType: \"string\",\n name: \"\",\n type: \"string\",\n },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n] as const\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n return (\n
\n {error?.message ?? \"Error while fetching ERC721 data\"}\n
\n )\n}\n\nexport type Erc721NameProps = React.HTMLAttributes & {\n address: `0x${string}`\n chainId?: number\n}\n\nconst Erc721Name = React.forwardRef(\n ({ chainId, address, ...props }, ref) => {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc721NameAbi,\n functionName: \"name\",\n chainId,\n })\n\n if (isLoading) {\n return \n }\n\n if (isError) {\n return \n }\n\n if (data === undefined) {\n return null\n }\n\n return (\n \n {data}\n \n )\n }\n)\n\nErc721Name.displayName = \"Erc721Name\"\n\nexport { Erc721Name }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead } from \"wagmi\"\n\nimport { ErrorMessage } from \"@/registry/default/buidl/error-message\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc721NameAbi = [\n {\n inputs: [],\n name: \"name\",\n outputs: [\n {\n internalType: \"string\",\n name: \"\",\n type: \"string\",\n },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n] as const\n\nexport type Erc721NameProps = React.HTMLAttributes & {\n address: `0x${string}`\n chainId?: number\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst Erc721Name = React.forwardRef(\n (\n { chainId, address, displayLoading = true, displayError = true, ...props },\n ref\n ) => {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc721NameAbi,\n functionName: \"name\",\n chainId,\n })\n\n if (displayLoading && isLoading) {\n return \n }\n\n if (displayError && isError) {\n return (\n \n )\n }\n\n if (data === undefined) {\n return null\n }\n\n return (\n
\n {data}\n
\n )\n }\n)\n\nErc721Name.displayName = \"Erc721Name\"\n\nexport { Erc721Name }\n" } ], "folder": "erc721", diff --git a/apps/www/public/registry/styles/default/erc721-owner-of.json b/apps/www/public/registry/styles/default/erc721-owner-of.json index bf6fa73..c2c19be 100644 --- a/apps/www/public/registry/styles/default/erc721-owner-of.json +++ b/apps/www/public/registry/styles/default/erc721-owner-of.json @@ -6,7 +6,7 @@ "files": [ { "name": "erc721-owner-of.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc721OwnerOfAbi = [\n {\n inputs: [\n {\n internalType: \"uint256\",\n name: \"tokenId\",\n type: \"uint256\",\n },\n ],\n name: \"ownerOf\",\n outputs: [\n {\n internalType: \"address\",\n name: \"\",\n type: \"address\",\n },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n] as const\n\nconst ErrorMessage = ({\n error,\n className,\n ...props\n}: React.HTMLAttributes & { error: Error | null }) => {\n return (\n \n {error?.message ?? \"Error while fetching ERC721 data\"}\n \n )\n}\n\nexport type Erc721OwnerOfProps = React.HTMLAttributes & {\n address: `0x${string}`\n tokenId: number | string | bigint\n chainId?: number\n}\n\nconst Erc721OwnerOf = React.forwardRef(\n ({ chainId, address, tokenId, ...props }, ref) => {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc721OwnerOfAbi,\n functionName: \"ownerOf\",\n args: [BigInt(tokenId)],\n chainId,\n })\n\n if (isLoading) {\n return \n }\n\n if (isError) {\n return \n }\n\n if (data === undefined) {\n return null\n }\n\n return (\n \n {data}\n \n )\n }\n)\n\nErc721OwnerOf.displayName = \"Erc721OwnerOf\"\n\nexport { Erc721OwnerOf }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead } from \"wagmi\"\n\nimport { ErrorMessage } from \"@/registry/default/buidl/error-message\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc721OwnerOfAbi = [\n {\n inputs: [\n {\n internalType: \"uint256\",\n name: \"tokenId\",\n type: \"uint256\",\n },\n ],\n name: \"ownerOf\",\n outputs: [\n {\n internalType: \"address\",\n name: \"\",\n type: \"address\",\n },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n] as const\n\nexport type Erc721OwnerOfProps = React.HTMLAttributes & {\n address: `0x${string}`\n tokenId: number | string | bigint\n chainId?: number\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst Erc721OwnerOf = React.forwardRef(\n (\n {\n chainId,\n address,\n tokenId,\n displayLoading = true,\n displayError = true,\n ...props\n },\n ref\n ) => {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc721OwnerOfAbi,\n functionName: \"ownerOf\",\n args: [BigInt(tokenId)],\n chainId,\n })\n\n if (displayLoading && isLoading) {\n return \n }\n\n if (displayError && isError) {\n return (\n \n )\n }\n\n if (data === undefined) {\n return null\n }\n\n return (\n
\n {data}\n
\n )\n }\n)\n\nErc721OwnerOf.displayName = \"Erc721OwnerOf\"\n\nexport { Erc721OwnerOf }\n" } ], "folder": "erc721", diff --git a/apps/www/public/registry/styles/default/erc721-symbol.json b/apps/www/public/registry/styles/default/erc721-symbol.json index 7afdee7..9fefd15 100644 --- a/apps/www/public/registry/styles/default/erc721-symbol.json +++ b/apps/www/public/registry/styles/default/erc721-symbol.json @@ -6,7 +6,7 @@ "files": [ { "name": "erc721-symbol.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc721SymbolAbi = [\n {\n inputs: [],\n name: \"symbol\",\n outputs: [\n {\n internalType: \"string\",\n name: \"\",\n type: \"string\",\n },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n] as const\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n return (\n
\n {error?.message ?? \"Error while fetching ERC721 data\"}\n
\n )\n}\n\nexport type Erc721SymbolProps = React.HTMLAttributes & {\n address: `0x${string}`\n chainId?: number\n}\n\nconst Erc721Symbol = React.forwardRef(\n ({ chainId, address, ...props }, ref) => {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc721SymbolAbi,\n functionName: \"symbol\",\n chainId,\n })\n\n if (isLoading) {\n return \n }\n\n if (isError) {\n return \n }\n\n if (data === undefined) {\n return null\n }\n\n return (\n \n {data}\n \n )\n }\n)\n\nErc721Symbol.displayName = \"Erc721Symbol\"\n\nexport { Erc721Symbol }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead } from \"wagmi\"\n\nimport { ErrorMessage } from \"@/registry/default/buidl/error-message\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc721SymbolAbi = [\n {\n inputs: [],\n name: \"symbol\",\n outputs: [\n {\n internalType: \"string\",\n name: \"\",\n type: \"string\",\n },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n] as const\n\nexport type Erc721SymbolProps = React.HTMLAttributes & {\n address: `0x${string}`\n chainId?: number\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst Erc721Symbol = React.forwardRef(\n (\n { chainId, address, displayLoading = true, displayError = true, ...props },\n ref\n ) => {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc721SymbolAbi,\n functionName: \"symbol\",\n chainId,\n })\n\n if (displayLoading && isLoading) {\n return \n }\n\n if (displayError && isError) {\n return (\n \n )\n }\n\n if (data === undefined) {\n return null\n }\n\n return (\n
\n {data}\n
\n )\n }\n)\n\nErc721Symbol.displayName = \"Erc721Symbol\"\n\nexport { Erc721Symbol }\n" } ], "folder": "erc721", diff --git a/apps/www/public/registry/styles/default/erc721-token-uri.json b/apps/www/public/registry/styles/default/erc721-token-uri.json index 4eb82c3..cc62a56 100644 --- a/apps/www/public/registry/styles/default/erc721-token-uri.json +++ b/apps/www/public/registry/styles/default/erc721-token-uri.json @@ -6,7 +6,7 @@ "files": [ { "name": "erc721-token-uri.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc721TokenUriAbi = [\n {\n inputs: [\n {\n internalType: \"uint256\",\n name: \"tokenId\",\n type: \"uint256\",\n },\n ],\n name: \"tokenURI\",\n outputs: [\n {\n internalType: \"string\",\n name: \"\",\n type: \"string\",\n },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n] as const\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n return (\n
\n {error?.message ?? \"Error while fetching ERC721 data\"}\n
\n )\n}\n\nexport type Erc721TokenUriProps = React.HTMLAttributes & {\n address: `0x${string}`\n tokenId: number | string | bigint\n chainId?: number\n}\n\nconst Erc721TokenUri = React.forwardRef(\n ({ chainId, address, tokenId, ...props }, ref) => {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc721TokenUriAbi,\n functionName: \"tokenURI\",\n args: [BigInt(tokenId)],\n chainId,\n })\n\n if (isLoading) {\n return \n }\n\n if (isError) {\n return \n }\n\n if (data === undefined) {\n return null\n }\n\n return (\n \n {data}\n \n )\n }\n)\n\nErc721TokenUri.displayName = \"Erc721TokenUri\"\n\nexport { Erc721TokenUri }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead } from \"wagmi\"\n\nimport { ErrorMessage } from \"@/registry/default/buidl/error-message\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc721TokenUriAbi = [\n {\n inputs: [\n {\n internalType: \"uint256\",\n name: \"tokenId\",\n type: \"uint256\",\n },\n ],\n name: \"tokenURI\",\n outputs: [\n {\n internalType: \"string\",\n name: \"\",\n type: \"string\",\n },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n] as const\n\nexport type Erc721TokenUriProps = React.HTMLAttributes & {\n address: `0x${string}`\n tokenId: number | string | bigint\n chainId?: number\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst Erc721TokenUri = React.forwardRef(\n (\n {\n chainId,\n address,\n tokenId,\n displayLoading = true,\n displayError = true,\n ...props\n },\n ref\n ) => {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc721TokenUriAbi,\n functionName: \"tokenURI\",\n args: [BigInt(tokenId)],\n chainId,\n })\n\n if (displayLoading && isLoading) {\n return \n }\n\n if (displayError && isError) {\n return (\n \n )\n }\n\n if (data === undefined) {\n return null\n }\n\n return (\n
\n {data}\n
\n )\n }\n)\n\nErc721TokenUri.displayName = \"Erc721TokenUri\"\n\nexport { Erc721TokenUri }\n" } ], "folder": "erc721", diff --git a/apps/www/public/registry/styles/default/erc721-total-supply.json b/apps/www/public/registry/styles/default/erc721-total-supply.json index 1d8fca9..089b7d7 100644 --- a/apps/www/public/registry/styles/default/erc721-total-supply.json +++ b/apps/www/public/registry/styles/default/erc721-total-supply.json @@ -6,7 +6,7 @@ "files": [ { "name": "erc721-total-supply.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc721TotalSupplyAbi = [\n {\n inputs: [],\n name: \"totalSupply\",\n outputs: [\n {\n internalType: \"uint256\",\n name: \"\",\n type: \"uint256\",\n },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n] as const\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n return (\n
\n {error?.message ?? \"Error while fetching ERC721 data\"}\n
\n )\n}\n\nexport type Erc721TotalSupplyProps = React.HTMLAttributes & {\n address: `0x${string}`\n chainId?: number\n}\n\nconst Erc721TotalSupply = React.forwardRef<\n HTMLSpanElement,\n Erc721TotalSupplyProps\n>(({ chainId, address, ...props }, ref) => {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc721TotalSupplyAbi,\n functionName: \"totalSupply\",\n chainId,\n })\n\n if (isLoading) {\n return \n }\n\n if (isError) {\n return \n }\n\n if (data === undefined) {\n return null\n }\n\n return (\n \n {data.toString()}\n \n )\n})\n\nErc721TotalSupply.displayName = \"Erc721TotalSupply\"\n\nexport { Erc721TotalSupply }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead } from \"wagmi\"\n\nimport { ErrorMessage } from \"@/registry/default/buidl/error-message\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc721TotalSupplyAbi = [\n {\n inputs: [],\n name: \"totalSupply\",\n outputs: [\n {\n internalType: \"uint256\",\n name: \"\",\n type: \"uint256\",\n },\n ],\n stateMutability: \"view\",\n type: \"function\",\n },\n] as const\n\nexport type Erc721TotalSupplyProps = React.HTMLAttributes & {\n address: `0x${string}`\n chainId?: number\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst Erc721TotalSupply = React.forwardRef<\n HTMLDivElement,\n Erc721TotalSupplyProps\n>(\n (\n { chainId, address, displayLoading = true, displayError = true, ...props },\n ref\n ) => {\n const { data, isLoading, isError, error } = useContractRead({\n address,\n abi: erc721TotalSupplyAbi,\n functionName: \"totalSupply\",\n chainId,\n })\n\n if (displayLoading && isLoading) {\n return \n }\n\n if (displayError && isError) {\n return (\n \n )\n }\n\n if (data === undefined) {\n return null\n }\n\n return (\n
\n {data.toString()}\n
\n )\n }\n)\n\nErc721TotalSupply.displayName = \"Erc721TotalSupply\"\n\nexport { Erc721TotalSupply }\n" } ], "folder": "erc721", diff --git a/apps/www/public/registry/styles/default/error-message.json b/apps/www/public/registry/styles/default/error-message.json new file mode 100644 index 0000000..c9341b6 --- /dev/null +++ b/apps/www/public/registry/styles/default/error-message.json @@ -0,0 +1,13 @@ +{ + "name": "error-message", + "dependencies": [ + "wagmi" + ], + "files": [ + { + "name": "error-message.tsx", + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ErrorMessage = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & {\n error: Error | null\n defaultErrorMessage?: string\n }\n>(\n (\n { error, className, defaultErrorMessage = \"An error occurred\", ...props },\n ref\n ) => {\n return (\n \n {error?.message ?? defaultErrorMessage}\n \n )\n }\n)\n\nErrorMessage.displayName = \"ErrorMessage\"\n\nexport { ErrorMessage }\n" + } + ], + "type": "components:buidl" +} \ No newline at end of file diff --git a/apps/www/public/registry/styles/default/fee-data.json b/apps/www/public/registry/styles/default/fee-data.json index 09d0be7..eeefcd2 100644 --- a/apps/www/public/registry/styles/default/fee-data.json +++ b/apps/www/public/registry/styles/default/fee-data.json @@ -6,7 +6,7 @@ "files": [ { "name": "fee-data.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useFeeData } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\ninterface FeeDataProps\n extends Omit, \"children\"> {\n chainId?: number\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n return (\n
\n {error?.message ?? \"Error while fetching fee data\"}\n
\n )\n}\n\nconst GasPrice = React.forwardRef(\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 } = useFeeData({\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError) return \n\n if (isSuccess) {\n return (\n
\n {data?.formatted.gasPrice}\n
\n )\n }\n\n return null\n }\n)\n\nGasPrice.displayName = \"GasPrice\"\n\nconst MaxPriorityFeePerGas = React.forwardRef(\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 } = useFeeData({\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError) return \n\n if (isSuccess) {\n return (\n
\n {data?.formatted.maxPriorityFeePerGas}\n
\n )\n }\n\n return null\n }\n)\n\nMaxPriorityFeePerGas.displayName = \"MaxPriorityFeePerGas\"\n\nconst MaxFeePerGas = React.forwardRef(\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 } = useFeeData({\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError) return \n\n if (isSuccess) {\n return (\n
\n {data?.formatted.maxFeePerGas}\n
\n )\n }\n\n return null\n }\n)\n\nMaxFeePerGas.displayName = \"MaxFeePerGas\"\n\nexport { GasPrice, MaxFeePerGas, MaxPriorityFeePerGas }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useFeeData } 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 FeeDataProps\n extends Omit, \"children\"> {\n chainId?: number\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst GasPrice = React.forwardRef(\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 } = useFeeData({\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError)\n return (\n \n )\n\n if (isSuccess) {\n return (\n
\n {data?.formatted.gasPrice}\n
\n )\n }\n\n return null\n }\n)\n\nGasPrice.displayName = \"GasPrice\"\n\nconst MaxPriorityFeePerGas = React.forwardRef(\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 } = useFeeData({\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError) return \n\n if (isSuccess) {\n return (\n
\n {data?.formatted.maxPriorityFeePerGas}\n
\n )\n }\n\n return null\n }\n)\n\nMaxPriorityFeePerGas.displayName = \"MaxPriorityFeePerGas\"\n\nconst MaxFeePerGas = React.forwardRef(\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 } = useFeeData({\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError) return \n\n if (isSuccess) {\n return (\n
\n {data?.formatted.maxFeePerGas}\n
\n )\n }\n\n return null\n }\n)\n\nMaxFeePerGas.displayName = \"MaxFeePerGas\"\n\nexport { GasPrice, MaxFeePerGas, MaxPriorityFeePerGas }\n" } ], "type": "components:buidl" diff --git a/apps/www/public/registry/styles/default/image-ipfs.json b/apps/www/public/registry/styles/default/image-ipfs.json index d997aee..9ad50f9 100644 --- a/apps/www/public/registry/styles/default/image-ipfs.json +++ b/apps/www/public/registry/styles/default/image-ipfs.json @@ -6,7 +6,7 @@ "files": [ { "name": "image-ipfs.tsx", - "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n return (\n
\n {error?.message ?? \"Error while fetching image\"}\n
\n )\n}\n\ninterface ImageIpfsProps extends React.HTMLAttributes {\n ipfsGatewayUrl?: string\n src: string\n alt: string\n}\n\nconst ImageIpfs = React.forwardRef(\n (\n { className, src, alt, ipfsGatewayUrl = \"https://ipfs.io/ipfs/\", ...props },\n ref\n ) => {\n const [isLoading, setIsLoading] = React.useState(true)\n const [isError, setIsError] = React.useState(false)\n\n const imgSrc = React.useMemo(\n () =>\n src?.startsWith(\"ipfs://\")\n ? src.replace(\"ipfs://\", ipfsGatewayUrl)\n : src,\n [src, ipfsGatewayUrl]\n )\n\n return (\n <>\n {isError ? (\n \n ) : isLoading ? (\n \n ) : null}\n setIsLoading(false)}\n onError={() => setIsError(true)}\n className={cn((isLoading || isError) && \"hidden\", className)}\n {...props}\n />\n \n )\n }\n)\n\nImageIpfs.displayName = \"ImageIpfs\"\n\nexport { ImageIpfs }\n" + "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ErrorMessage } from \"@/registry/default/buidl/error-message\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\ninterface ImageIpfsProps extends React.HTMLAttributes {\n ipfsGatewayUrl?: string\n src: string\n alt: string\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst ImageIpfs = React.forwardRef(\n (\n {\n className,\n src,\n alt,\n ipfsGatewayUrl = \"https://ipfs.io/ipfs/\",\n displayLoading = true,\n displayError = true,\n ...props\n },\n ref\n ) => {\n const [isLoading, setIsLoading] = React.useState(true)\n const [isError, setIsError] = React.useState(false)\n\n const imgSrc = React.useMemo(\n () =>\n src?.startsWith(\"ipfs://\")\n ? src.replace(\"ipfs://\", ipfsGatewayUrl)\n : src,\n [src, ipfsGatewayUrl]\n )\n\n return (\n <>\n {displayError && isError ? (\n \n ) : displayLoading && isLoading ? (\n \n ) : null}\n setIsLoading(false)}\n onError={() => setIsError(true)}\n className={cn((isLoading || isError) && \"hidden\", className)}\n {...props}\n />\n \n )\n }\n)\n\nImageIpfs.displayName = \"ImageIpfs\"\n\nexport { ImageIpfs }\n" } ], "type": "components:buidl" diff --git a/apps/www/public/registry/styles/default/nonce.json b/apps/www/public/registry/styles/default/nonce.json index 51c0ad8..94143ce 100644 --- a/apps/www/public/registry/styles/default/nonce.json +++ b/apps/www/public/registry/styles/default/nonce.json @@ -6,7 +6,7 @@ "files": [ { "name": "nonce.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n useAccount,\n useChainId,\n usePublicClient,\n useQuery,\n type PublicClient,\n} from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\ninterface NonceProps extends React.HTMLAttributes {\n address?: `0x${string}`\n chainId?: number\n}\n\nconst useNonce = ({\n address,\n publicClient,\n}: Pick & { publicClient: PublicClient }) => {\n return useQuery([\"wallet-nonce\", address, publicClient.chain.id], {\n queryFn: () => {\n if (!address) return\n return publicClient?.getTransactionCount({\n address,\n })\n },\n enabled: !!address && !!publicClient,\n })\n}\n\nconst Nonce = React.forwardRef(\n ({ className, address, chainId, ...props }, ref) => {\n const connectedChainId = useChainId()\n const selectedChainId = chainId ?? connectedChainId\n\n const publicClient = usePublicClient({\n chainId: selectedChainId,\n })\n\n const { address: connectedAddress } = useAccount()\n const selectedAddress = address ?? connectedAddress\n\n const { data, isLoading } = useNonce({\n publicClient,\n address: selectedAddress,\n })\n\n if (isLoading) {\n return \n }\n\n return (\n
\n {data}\n
\n )\n }\n)\n\nNonce.displayName = \"Nonce\"\n\nexport { Nonce }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n useAccount,\n useChainId,\n usePublicClient,\n useQuery,\n type PublicClient,\n} 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 NonceProps extends React.HTMLAttributes {\n address?: `0x${string}`\n chainId?: number\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst useNonce = ({\n address,\n publicClient,\n}: Pick & { publicClient: PublicClient }) => {\n return useQuery([\"wallet-nonce\", address, publicClient.chain.id], {\n queryFn: () => {\n if (!address) return\n return publicClient?.getTransactionCount({\n address,\n })\n },\n enabled: !!address && !!publicClient,\n })\n}\n\nconst Nonce = React.forwardRef(\n (\n {\n className,\n address,\n chainId,\n displayLoading = true,\n displayError = true,\n ...props\n },\n ref\n ) => {\n const connectedChainId = useChainId()\n const selectedChainId = chainId ?? connectedChainId\n\n const publicClient = usePublicClient({\n chainId: selectedChainId,\n })\n\n const { address: connectedAddress } = useAccount()\n const selectedAddress = address ?? connectedAddress\n\n const { data, isLoading, isError, error } = useNonce({\n publicClient,\n address: selectedAddress,\n })\n\n if (displayLoading && (isLoading || !selectedAddress)) {\n return \n }\n\n if (displayError && isError) {\n return (\n \n )\n }\n\n return (\n
\n {data}\n
\n )\n }\n)\n\nNonce.displayName = \"Nonce\"\n\nexport { Nonce }\n" } ], "type": "components:buidl" 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 266129b..41c79fc 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 {\n message: string\n onSuccess?: (signature: string) => void\n}\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n return (\n
\n {error?.message ?? \"Error while signing message\"}\n
\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 signMessage()}\n className={className}\n {...props}\n >\n {isLoading ? \"Check Wallet\" : children ?? \"Sign Message\"}\n \n {isError && }\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 { ErrorMessage } from \"@/registry/default/buidl/error-message\"\nimport { Button, ButtonProps } from \"@/registry/default/ui/button\"\n\ninterface SignMessageButtonProps extends Omit {\n message: string\n onSuccess?: (signature: string) => void\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 signMessage()}\n className={className}\n {...props}\n >\n {isLoading ? \"Check Wallet\" : children ?? \"Sign Message\"}\n \n {isError && (\n \n )}\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 1698af9..1730238 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\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n return (\n
\n {error?.message ?? \"Error while fetching ERC721 data\"}\n
\n )\n}\n\nconst TransactionStatus = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & {\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 \n\n if (isError) return \n\n return (\n \n {isLoading && \"Processing transaction...\"}\n {isSuccess && \"Transaction successful!\"}\n {children}\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 { ErrorMessage } from \"@/registry/default/buidl/error-message\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst TransactionStatus = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & {\n hash: `0x${string}`\n chainId?: number\n displayLoading?: boolean\n displayError?: boolean\n }\n>(\n (\n {\n chainId: selectedChainId,\n children,\n className,\n hash,\n displayLoading = true,\n displayError = true,\n ...props\n },\n ref\n ) => {\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 (displayLoading && isFetching)\n return \n\n if (displayError && isError)\n return (\n \n )\n\n return (\n \n {isLoading && \"Processing transaction...\"}\n {isSuccess && \"Transaction successful!\"}\n {children}\n \n )\n }\n)\n\nTransactionStatus.displayName = \"TransactionStatus\"\n\nexport { TransactionStatus }\n" } ], "type": "components:buidl" diff --git a/apps/www/public/registry/styles/default/transaction.json b/apps/www/public/registry/styles/default/transaction.json index 78d29a5..dcf31ba 100644 --- a/apps/www/public/registry/styles/default/transaction.json +++ b/apps/www/public/registry/styles/default/transaction.json @@ -6,7 +6,7 @@ "files": [ { "name": "transaction.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useTransaction } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\ninterface TransactionProps\n extends Omit, \"children\"> {\n hash: `0x${string}`\n chainId?: number\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n return (\n
\n {error?.message ?? \"Error while fetching transaction data\"}\n
\n )\n}\n\nconst TransactionBlockHash = React.forwardRef(\n (\n {\n chainId,\n hash,\n className,\n displayError = true,\n displayLoading = true,\n ...props\n },\n ref\n ) => {\n const { data, isSuccess, isLoading, isError, error } = useTransaction({\n hash,\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError) return \n\n if (isSuccess) {\n return (\n
\n {data?.blockHash}\n
\n )\n }\n\n return null\n }\n)\n\nTransactionBlockHash.displayName = \"TransactionBlockHash\"\n\nconst TransactionBlockNumber = React.forwardRef<\n HTMLDivElement,\n TransactionProps\n>(\n (\n {\n chainId,\n hash,\n className,\n displayError = true,\n displayLoading = true,\n ...props\n },\n ref\n ) => {\n const { data, isSuccess, isLoading, isError, error } = useTransaction({\n hash,\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError) return \n\n if (isSuccess) {\n return (\n
\n {data?.blockNumber.toString()}\n
\n )\n }\n\n return null\n }\n)\n\nTransactionBlockNumber.displayName = \"TransactionBlockNumber\"\n\nconst TransactionFrom = React.forwardRef(\n (\n {\n chainId,\n hash,\n className,\n displayError = true,\n displayLoading = true,\n ...props\n },\n ref\n ) => {\n const { data, isSuccess, isLoading, isError, error } = useTransaction({\n hash,\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError) return \n\n if (isSuccess) {\n return (\n
\n {data?.from}\n
\n )\n }\n\n return null\n }\n)\n\nTransactionFrom.displayName = \"TransactionFrom\"\n\nconst TransactionTo = React.forwardRef(\n (\n {\n chainId,\n hash,\n className,\n displayError = true,\n displayLoading = true,\n ...props\n },\n ref\n ) => {\n const { data, isSuccess, isLoading, isError, error } = useTransaction({\n hash,\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError) return \n\n if (isSuccess) {\n return (\n
\n {data?.from}\n
\n )\n }\n\n return null\n }\n)\n\nTransactionTo.displayName = \"TransactionTo\"\n\nconst TransactionGas = React.forwardRef(\n (\n {\n chainId,\n hash,\n className,\n displayError = true,\n displayLoading = true,\n ...props\n },\n ref\n ) => {\n const { data, isSuccess, isLoading, isError, error } = useTransaction({\n hash,\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError) return \n\n if (isSuccess) {\n return (\n
\n {data?.gas.toString()}\n
\n )\n }\n\n return null\n }\n)\n\nTransactionGas.displayName = \"TransactionGas\"\n\nconst TransactionGasPrice = React.forwardRef(\n (\n {\n chainId,\n hash,\n className,\n displayError = true,\n displayLoading = true,\n ...props\n },\n ref\n ) => {\n const { data, isSuccess, isLoading, isError, error } = useTransaction({\n hash,\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError) return \n\n if (isSuccess) {\n return (\n
\n {data?.gasPrice?.toString()}\n
\n )\n }\n\n return null\n }\n)\n\nTransactionGasPrice.displayName = \"TransactionGasPrice\"\n\nconst TransactionNonce = React.forwardRef(\n (\n {\n chainId,\n hash,\n className,\n displayError = true,\n displayLoading = true,\n ...props\n },\n ref\n ) => {\n const { data, isSuccess, isLoading, isError, error } = useTransaction({\n hash,\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError) return \n\n if (isSuccess) {\n return (\n
\n {data?.nonce.toString()}\n
\n )\n }\n return null\n }\n)\n\nTransactionNonce.displayName = \"TransactionNonce\"\n\nexport {\n TransactionBlockHash,\n TransactionBlockNumber,\n TransactionFrom,\n TransactionGas,\n TransactionGasPrice,\n TransactionNonce,\n TransactionTo,\n}\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useTransaction } 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 TransactionProps\n extends Omit, \"children\"> {\n hash: `0x${string}`\n chainId?: number\n displayLoading?: boolean\n displayError?: boolean\n}\n\nconst TransactionBlockHash = React.forwardRef(\n (\n {\n chainId,\n hash,\n className,\n displayError = true,\n displayLoading = true,\n ...props\n },\n ref\n ) => {\n const { data, isSuccess, isLoading, isError, error } = useTransaction({\n hash,\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError)\n return (\n \n )\n\n if (isSuccess) {\n return (\n
\n {data?.blockHash}\n
\n )\n }\n\n return null\n }\n)\n\nTransactionBlockHash.displayName = \"TransactionBlockHash\"\n\nconst TransactionBlockNumber = React.forwardRef<\n HTMLDivElement,\n TransactionProps\n>(\n (\n {\n chainId,\n hash,\n className,\n displayError = true,\n displayLoading = true,\n ...props\n },\n ref\n ) => {\n const { data, isSuccess, isLoading, isError, error } = useTransaction({\n hash,\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError)\n return (\n \n )\n\n if (isSuccess) {\n return (\n
\n {data?.blockNumber.toString()}\n
\n )\n }\n\n return null\n }\n)\n\nTransactionBlockNumber.displayName = \"TransactionBlockNumber\"\n\nconst TransactionFrom = React.forwardRef(\n (\n {\n chainId,\n hash,\n className,\n displayError = true,\n displayLoading = true,\n ...props\n },\n ref\n ) => {\n const { data, isSuccess, isLoading, isError, error } = useTransaction({\n hash,\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError)\n return (\n \n )\n\n if (isSuccess) {\n return (\n
\n {data?.from}\n
\n )\n }\n\n return null\n }\n)\n\nTransactionFrom.displayName = \"TransactionFrom\"\n\nconst TransactionTo = React.forwardRef(\n (\n {\n chainId,\n hash,\n className,\n displayError = true,\n displayLoading = true,\n ...props\n },\n ref\n ) => {\n const { data, isSuccess, isLoading, isError, error } = useTransaction({\n hash,\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError)\n return (\n \n )\n\n if (isSuccess) {\n return (\n
\n {data?.from}\n
\n )\n }\n\n return null\n }\n)\n\nTransactionTo.displayName = \"TransactionTo\"\n\nconst TransactionGas = React.forwardRef(\n (\n {\n chainId,\n hash,\n className,\n displayError = true,\n displayLoading = true,\n ...props\n },\n ref\n ) => {\n const { data, isSuccess, isLoading, isError, error } = useTransaction({\n hash,\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError)\n return (\n \n )\n\n if (isSuccess) {\n return (\n
\n {data?.gas.toString()}\n
\n )\n }\n\n return null\n }\n)\n\nTransactionGas.displayName = \"TransactionGas\"\n\nconst TransactionGasPrice = React.forwardRef(\n (\n {\n chainId,\n hash,\n className,\n displayError = true,\n displayLoading = true,\n ...props\n },\n ref\n ) => {\n const { data, isSuccess, isLoading, isError, error } = useTransaction({\n hash,\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError)\n return (\n \n )\n\n if (isSuccess) {\n return (\n
\n {data?.gasPrice?.toString()}\n
\n )\n }\n\n return null\n }\n)\n\nTransactionGasPrice.displayName = \"TransactionGasPrice\"\n\nconst TransactionNonce = React.forwardRef(\n (\n {\n chainId,\n hash,\n className,\n displayError = true,\n displayLoading = true,\n ...props\n },\n ref\n ) => {\n const { data, isSuccess, isLoading, isError, error } = useTransaction({\n hash,\n chainId,\n })\n\n if (isLoading && displayLoading)\n return \n\n if (isError && displayError)\n return (\n \n )\n\n if (isSuccess) {\n return (\n
\n {data?.nonce.toString()}\n
\n )\n }\n return null\n }\n)\n\nTransactionNonce.displayName = \"TransactionNonce\"\n\nexport {\n TransactionBlockHash,\n TransactionBlockNumber,\n TransactionFrom,\n TransactionGas,\n TransactionGasPrice,\n TransactionNonce,\n TransactionTo,\n}\n" } ], "type": "components:buidl" diff --git a/apps/www/registry/default/buidl/balance.tsx b/apps/www/registry/default/buidl/balance.tsx index 3330085..15b44f8 100644 --- a/apps/www/registry/default/buidl/balance.tsx +++ b/apps/www/registry/default/buidl/balance.tsx @@ -4,6 +4,7 @@ import * as React from "react" import { useAccount, useBalance, type Address } from "wagmi" import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" interface BalanceProps @@ -26,14 +27,6 @@ function trimFormattedBalance(balance: string | undefined, decimals = 4) { return `${integer}.${trimmedDecimal}` } -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching fee data"} -
- ) -} - const Balance = React.forwardRef( ( { @@ -59,7 +52,15 @@ const Balance = React.forwardRef( if ((isLoading && displayLoading) || !selectedAddress) return - if (isError && displayError) return + if (isError && displayError) + return ( + + ) if (isSuccess) { return ( diff --git a/apps/www/registry/default/buidl/block-explorer-link.tsx b/apps/www/registry/default/buidl/block-explorer-link.tsx index 5cb9828..029f947 100644 --- a/apps/www/registry/default/buidl/block-explorer-link.tsx +++ b/apps/www/registry/default/buidl/block-explorer-link.tsx @@ -1,7 +1,7 @@ "use client" import * as React from "react" -import { Chain, useNetwork, type Address } from "wagmi" +import { useNetwork, type Address, type Chain } from "wagmi" import { mainnet } from "wagmi/chains" import { cn } from "@/lib/utils" diff --git a/apps/www/registry/default/buidl/block-number.tsx b/apps/www/registry/default/buidl/block-number.tsx index 6d5b6e5..84002d2 100644 --- a/apps/www/registry/default/buidl/block-number.tsx +++ b/apps/www/registry/default/buidl/block-number.tsx @@ -4,6 +4,7 @@ import * as React from "react" import { useBlockNumber } from "wagmi" import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" interface BlockNumberProps @@ -13,14 +14,6 @@ interface BlockNumberProps displayError?: boolean } -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching block number data"} -
- ) -} - const BlockNumber = React.forwardRef( ( { @@ -39,7 +32,13 @@ const BlockNumber = React.forwardRef( if (isLoading && displayLoading) return - if (isError && displayError) return + if (isError && displayError) + return ( + + ) if (isSuccess) { return ( diff --git a/apps/www/registry/default/buidl/ens-address.tsx b/apps/www/registry/default/buidl/ens-address.tsx index 7374ff3..40fcb43 100644 --- a/apps/www/registry/default/buidl/ens-address.tsx +++ b/apps/www/registry/default/buidl/ens-address.tsx @@ -5,32 +5,36 @@ import { useEnsAddress } from "wagmi" import { cn } from "@/lib/utils" import { Address, AddressProps } from "@/registry/default/buidl/address" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching fee data"} -
- ) -} - interface EnsAddressProps extends Omit { name: string + displayLoading?: boolean + displayError?: boolean } const EnsAddress = React.forwardRef( - ({ name, className, ...props }, ref) => { + ( + { name, className, displayLoading = true, displayError = true, ...props }, + ref + ) => { const { data, isLoading, isSuccess, isError, error } = useEnsAddress({ chainId: 1, name, }) - if (isError) { - return + if (displayError && isError) { + return ( + + ) } - if (isLoading || !data) { + if (displayLoading && (isLoading || !data)) { return ( ( enabled: !!selectedAddress, }) + if (isLoading || !selectedAddress) { + return + } + if (isSuccess && data) { return (
@@ -30,10 +34,6 @@ const EnsName = React.forwardRef( ) } - if (isLoading || !selectedAddress) { - return - } - return (
) diff --git a/apps/www/registry/default/buidl/erc20/erc20-balance.tsx b/apps/www/registry/default/buidl/erc20/erc20-balance.tsx index 429f8ac..0eac0b7 100644 --- a/apps/www/registry/default/buidl/erc20/erc20-balance.tsx +++ b/apps/www/registry/default/buidl/erc20/erc20-balance.tsx @@ -2,7 +2,7 @@ import * as React from "react" import { formatUnits } from "viem" import { useAccount, useContractRead } from "wagmi" -import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" const erc20BalanceOfAbi = [ @@ -54,23 +54,28 @@ function trimFormattedBalance(balance: string | undefined, decimals = 4) { return `${integer}.${trimmedDecimal}` } -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching ERC20 data"} -
- ) -} - -export type Erc20BalanceProps = React.HTMLAttributes & { +export type Erc20BalanceProps = React.HTMLAttributes & { address: `0x${string}` chainId?: number account?: `0x${string}` formatDecimals?: number + displayLoading?: boolean + displayError?: boolean } -const Erc20Balance = React.forwardRef( - ({ chainId, address, account, formatDecimals = 4, ...props }, ref) => { +const Erc20Balance = React.forwardRef( + ( + { + chainId, + address, + account, + formatDecimals = 4, + displayLoading = true, + displayError = true, + ...props + }, + ref + ) => { const { address: currentAccount } = useAccount() const selectedAccount = account ?? currentAccount @@ -100,12 +105,18 @@ const Erc20Balance = React.forwardRef( chainId, }) - if (isLoadingDecimals || isLoadingBalance) { + if (displayLoading && (isLoadingDecimals || isLoadingBalance)) { return } - if (isErrorDecimals || isErrorBalance) { - return + if (displayError && (isErrorDecimals || isErrorBalance)) { + return ( + + ) } if (balance === undefined || decimals === undefined) { @@ -113,9 +124,9 @@ const Erc20Balance = React.forwardRef( } return ( - +
{trimFormattedBalance(formatUnits(balance, decimals), formatDecimals)} - +
) } ) diff --git a/apps/www/registry/default/buidl/erc20/erc20-decimals.tsx b/apps/www/registry/default/buidl/erc20/erc20-decimals.tsx index 88ecc99..86c4ea5 100644 --- a/apps/www/registry/default/buidl/erc20/erc20-decimals.tsx +++ b/apps/www/registry/default/buidl/erc20/erc20-decimals.tsx @@ -3,7 +3,7 @@ import * as React from "react" import { useContractRead } from "wagmi" -import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" const erc20DecimalsAbi = [ @@ -22,21 +22,18 @@ const erc20DecimalsAbi = [ }, ] as const -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching ERC20 data"} -
- ) -} - -export type Erc20DecimalsProps = React.HTMLAttributes & { +export type Erc20DecimalsProps = React.HTMLAttributes & { address: `0x${string}` chainId?: number + displayLoading?: boolean + displayError?: boolean } -const Erc20Decimals = React.forwardRef( - ({ chainId, address, ...props }, ref) => { +const Erc20Decimals = React.forwardRef( + ( + { chainId, address, displayLoading = true, displayError = true, ...props }, + ref + ) => { const { data, isLoading, isError, error } = useContractRead({ address, abi: erc20DecimalsAbi, @@ -44,12 +41,18 @@ const Erc20Decimals = React.forwardRef( chainId, }) - if (isLoading) { + if (displayLoading && isLoading) { return } - if (isError) { - return + if (displayError && isError) { + return ( + + ) } if (data === undefined) { @@ -57,9 +60,9 @@ const Erc20Decimals = React.forwardRef( } return ( - +
{data} - +
) } ) diff --git a/apps/www/registry/default/buidl/erc20/erc20-name.tsx b/apps/www/registry/default/buidl/erc20/erc20-name.tsx index 3e52b45..8942d73 100644 --- a/apps/www/registry/default/buidl/erc20/erc20-name.tsx +++ b/apps/www/registry/default/buidl/erc20/erc20-name.tsx @@ -3,7 +3,7 @@ import * as React from "react" import { useContractRead } from "wagmi" -import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" const erc20NameAbi = [ @@ -22,21 +22,18 @@ const erc20NameAbi = [ }, ] as const -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching ERC20 data"} -
- ) -} - -export type Erc20NameProps = React.HTMLAttributes & { +export type Erc20NameProps = React.HTMLAttributes & { address: `0x${string}` chainId?: number + displayLoading?: boolean + displayError?: boolean } -const Erc20Name = React.forwardRef( - ({ chainId, address, ...props }, ref) => { +const Erc20Name = React.forwardRef( + ( + { chainId, address, displayLoading = true, displayError = true, ...props }, + ref + ) => { const { data, isLoading, isError, error } = useContractRead({ address, abi: erc20NameAbi, @@ -44,12 +41,18 @@ const Erc20Name = React.forwardRef( chainId, }) - if (isLoading) { + if (displayLoading && isLoading) { return } - if (isError) { - return + if (displayError && isError) { + return ( + + ) } if (data === undefined) { @@ -57,9 +60,9 @@ const Erc20Name = React.forwardRef( } return ( - +
{data} - +
) } ) diff --git a/apps/www/registry/default/buidl/erc20/erc20-symbol.tsx b/apps/www/registry/default/buidl/erc20/erc20-symbol.tsx index 8a6bf01..78bc487 100644 --- a/apps/www/registry/default/buidl/erc20/erc20-symbol.tsx +++ b/apps/www/registry/default/buidl/erc20/erc20-symbol.tsx @@ -3,7 +3,7 @@ import * as React from "react" import { useContractRead } from "wagmi" -import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" const erc20SymbolAbi = [ @@ -22,21 +22,18 @@ const erc20SymbolAbi = [ }, ] as const -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching ERC20 data"} -
- ) -} - -export type Erc20SymbolProps = React.HTMLAttributes & { +export type Erc20SymbolProps = React.HTMLAttributes & { address: `0x${string}` chainId?: number + displayLoading?: boolean + displayError?: boolean } -const Erc20Symbol = React.forwardRef( - ({ chainId, address, ...props }, ref) => { +const Erc20Symbol = React.forwardRef( + ( + { chainId, address, displayLoading = true, displayError = true, ...props }, + ref + ) => { const { data, isLoading, isError, error } = useContractRead({ address, abi: erc20SymbolAbi, @@ -44,12 +41,18 @@ const Erc20Symbol = React.forwardRef( chainId, }) - if (isLoading) { + if (displayLoading && isLoading) { return } - if (isError) { - return + if (displayError && isError) { + return ( + + ) } if (data === undefined) { @@ -57,9 +60,9 @@ const Erc20Symbol = React.forwardRef( } return ( - +
{data} - +
) } ) 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 36c627e..40b2e70 100644 --- a/apps/www/registry/default/buidl/erc20/erc20-total-supply.tsx +++ b/apps/www/registry/default/buidl/erc20/erc20-total-supply.tsx @@ -4,7 +4,7 @@ import * as React from "react" import { formatUnits } from "viem" import { useContractRead } from "wagmi" -import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" const erc20TotalSupplyAbi = [ @@ -44,66 +44,81 @@ function trimFormattedBalance(balance: string | undefined, decimals = 4) { return `${integer}.${trimmedDecimal}` } -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching ERC20 data"} -
- ) -} - -export type Erc20TotalSupplyProps = React.HTMLAttributes & { +export type Erc20TotalSupplyProps = React.HTMLAttributes & { address: `0x${string}` chainId?: number formatDecimals?: number + displayLoading?: boolean + displayError?: boolean } const Erc20TotalSupply = React.forwardRef< - HTMLSpanElement, + HTMLDivElement, Erc20TotalSupplyProps ->(({ chainId, address, formatDecimals = 4, ...props }, ref) => { - const { - data: totalSupply, - isLoading: isLoadingTotalSupply, - isError: isErrorTotalSupply, - error: errorTotalSupply, - } = useContractRead({ - address, - abi: erc20TotalSupplyAbi, - functionName: "totalSupply", - chainId, - }) - - const { - data: decimals, - isLoading: isLoadingDecimals, - isError: isErrorDecimals, - error: errorDecimals, - } = useContractRead({ - address, - abi: erc20DecimalsAbi, - functionName: "decimals", - chainId, - }) - - if (isLoadingTotalSupply || isLoadingDecimals) { - return +>( + ( + { + chainId, + address, + formatDecimals = 4, + displayLoading = true, + displayError = true, + ...props + }, + ref + ) => { + const { + data: totalSupply, + isLoading: isLoadingTotalSupply, + isError: isErrorTotalSupply, + error: errorTotalSupply, + } = useContractRead({ + address, + abi: erc20TotalSupplyAbi, + functionName: "totalSupply", + chainId, + }) + + const { + data: decimals, + isLoading: isLoadingDecimals, + isError: isErrorDecimals, + error: errorDecimals, + } = useContractRead({ + address, + abi: erc20DecimalsAbi, + functionName: "decimals", + chainId, + }) + + if (displayLoading && (isLoadingTotalSupply || isLoadingDecimals)) { + return + } + + if (displayError && (isErrorTotalSupply || isErrorDecimals)) { + return ( + + ) + } + + if (totalSupply === undefined || decimals === undefined) { + return null + } + + return ( +
+ {trimFormattedBalance( + formatUnits(totalSupply, decimals), + formatDecimals + )} +
+ ) } - - if (isErrorTotalSupply || isErrorDecimals) { - return - } - - if (totalSupply === undefined || decimals === undefined) { - return null - } - - return ( - - {trimFormattedBalance(formatUnits(totalSupply, decimals), formatDecimals)} - - ) -}) +) Erc20TotalSupply.displayName = "Erc20TotalSupply" diff --git a/apps/www/registry/default/buidl/erc721/erc721-metadata.tsx b/apps/www/registry/default/buidl/erc721/erc721-metadata.tsx index 22a5287..0af3110 100644 --- a/apps/www/registry/default/buidl/erc721/erc721-metadata.tsx +++ b/apps/www/registry/default/buidl/erc721/erc721-metadata.tsx @@ -3,7 +3,7 @@ import * as React from "react" import { useContractRead, useQuery, type Address } from "wagmi" -import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" const erc721TokenUriAbi = [ @@ -87,46 +87,61 @@ function useERC721Metadata({ } } -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching ERC721 data"} -
- ) -} - export type Erc721MetadataProps = React.HTMLAttributes & { address: `0x${string}` tokenId: number | string | bigint chainId?: number ipfsGatewayUrl?: string + displayLoading?: boolean + displayError?: boolean } const Erc721MetadataImage = React.forwardRef< HTMLImageElement, Erc721MetadataProps ->(({ chainId, address, tokenId, ipfsGatewayUrl, ...props }, ref) => { - const { data, isLoading, isError, error } = useERC721Metadata({ - address, - chainId, - tokenId: BigInt(tokenId), - ipfsGatewayUrl, - }) +>( + ( + { + chainId, + address, + tokenId, + ipfsGatewayUrl, + displayLoading = true, + displayError = true, + ...props + }, + ref + ) => { + const { data, isLoading, isError, error } = useERC721Metadata({ + address, + chainId, + tokenId: BigInt(tokenId), + ipfsGatewayUrl, + }) + + if (displayLoading && isLoading) { + return + } - if (isLoading) { - return - } + if (displayError && isError) { + return ( + + ) + } - if (isError) { - return - } + if (data?.image === undefined) { + return null + } - if (data?.image === undefined) { - return null + return ( + {`${tokenId} + ) } - - return {`${tokenId} -}) +) Erc721MetadataImage.displayName = "Erc721MetadataImage" diff --git a/apps/www/registry/default/buidl/erc721/erc721-name.tsx b/apps/www/registry/default/buidl/erc721/erc721-name.tsx index 242c054..f7e4509 100644 --- a/apps/www/registry/default/buidl/erc721/erc721-name.tsx +++ b/apps/www/registry/default/buidl/erc721/erc721-name.tsx @@ -3,7 +3,7 @@ import * as React from "react" import { useContractRead } from "wagmi" -import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" const erc721NameAbi = [ @@ -22,21 +22,18 @@ const erc721NameAbi = [ }, ] as const -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching ERC721 data"} -
- ) -} - -export type Erc721NameProps = React.HTMLAttributes & { +export type Erc721NameProps = React.HTMLAttributes & { address: `0x${string}` chainId?: number + displayLoading?: boolean + displayError?: boolean } -const Erc721Name = React.forwardRef( - ({ chainId, address, ...props }, ref) => { +const Erc721Name = React.forwardRef( + ( + { chainId, address, displayLoading = true, displayError = true, ...props }, + ref + ) => { const { data, isLoading, isError, error } = useContractRead({ address, abi: erc721NameAbi, @@ -44,12 +41,18 @@ const Erc721Name = React.forwardRef( chainId, }) - if (isLoading) { + if (displayLoading && isLoading) { return } - if (isError) { - return + if (displayError && isError) { + return ( + + ) } if (data === undefined) { @@ -57,9 +60,9 @@ const Erc721Name = React.forwardRef( } return ( - +
{data} - +
) } ) diff --git a/apps/www/registry/default/buidl/erc721/erc721-owner-of.tsx b/apps/www/registry/default/buidl/erc721/erc721-owner-of.tsx index 92ffefe..8f4969e 100644 --- a/apps/www/registry/default/buidl/erc721/erc721-owner-of.tsx +++ b/apps/www/registry/default/buidl/erc721/erc721-owner-of.tsx @@ -3,7 +3,7 @@ import * as React from "react" import { useContractRead } from "wagmi" -import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" const erc721OwnerOfAbi = [ @@ -28,29 +28,26 @@ const erc721OwnerOfAbi = [ }, ] as const -const ErrorMessage = ({ - error, - className, - ...props -}: React.HTMLAttributes & { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching ERC721 data"} -
- ) -} - -export type Erc721OwnerOfProps = React.HTMLAttributes & { +export type Erc721OwnerOfProps = React.HTMLAttributes & { address: `0x${string}` tokenId: number | string | bigint chainId?: number + displayLoading?: boolean + displayError?: boolean } -const Erc721OwnerOf = React.forwardRef( - ({ chainId, address, tokenId, ...props }, ref) => { +const Erc721OwnerOf = React.forwardRef( + ( + { + chainId, + address, + tokenId, + displayLoading = true, + displayError = true, + ...props + }, + ref + ) => { const { data, isLoading, isError, error } = useContractRead({ address, abi: erc721OwnerOfAbi, @@ -59,12 +56,18 @@ const Erc721OwnerOf = React.forwardRef( chainId, }) - if (isLoading) { + if (displayLoading && isLoading) { return } - if (isError) { - return + if (displayError && isError) { + return ( + + ) } if (data === undefined) { @@ -72,9 +75,9 @@ const Erc721OwnerOf = React.forwardRef( } return ( - +
{data} - +
) } ) diff --git a/apps/www/registry/default/buidl/erc721/erc721-symbol.tsx b/apps/www/registry/default/buidl/erc721/erc721-symbol.tsx index b09410f..e28f5db 100644 --- a/apps/www/registry/default/buidl/erc721/erc721-symbol.tsx +++ b/apps/www/registry/default/buidl/erc721/erc721-symbol.tsx @@ -3,7 +3,7 @@ import * as React from "react" import { useContractRead } from "wagmi" -import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" const erc721SymbolAbi = [ @@ -22,21 +22,18 @@ const erc721SymbolAbi = [ }, ] as const -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching ERC721 data"} -
- ) -} - -export type Erc721SymbolProps = React.HTMLAttributes & { +export type Erc721SymbolProps = React.HTMLAttributes & { address: `0x${string}` chainId?: number + displayLoading?: boolean + displayError?: boolean } -const Erc721Symbol = React.forwardRef( - ({ chainId, address, ...props }, ref) => { +const Erc721Symbol = React.forwardRef( + ( + { chainId, address, displayLoading = true, displayError = true, ...props }, + ref + ) => { const { data, isLoading, isError, error } = useContractRead({ address, abi: erc721SymbolAbi, @@ -44,12 +41,18 @@ const Erc721Symbol = React.forwardRef( chainId, }) - if (isLoading) { + if (displayLoading && isLoading) { return } - if (isError) { - return + if (displayError && isError) { + return ( + + ) } if (data === undefined) { @@ -57,9 +60,9 @@ const Erc721Symbol = React.forwardRef( } return ( - +
{data} - +
) } ) diff --git a/apps/www/registry/default/buidl/erc721/erc721-token-uri.tsx b/apps/www/registry/default/buidl/erc721/erc721-token-uri.tsx index d401c00..99efcf8 100644 --- a/apps/www/registry/default/buidl/erc721/erc721-token-uri.tsx +++ b/apps/www/registry/default/buidl/erc721/erc721-token-uri.tsx @@ -3,7 +3,7 @@ import * as React from "react" import { useContractRead } from "wagmi" -import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" const erc721TokenUriAbi = [ @@ -28,22 +28,26 @@ const erc721TokenUriAbi = [ }, ] as const -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching ERC721 data"} -
- ) -} - -export type Erc721TokenUriProps = React.HTMLAttributes & { +export type Erc721TokenUriProps = React.HTMLAttributes & { address: `0x${string}` tokenId: number | string | bigint chainId?: number + displayLoading?: boolean + displayError?: boolean } -const Erc721TokenUri = React.forwardRef( - ({ chainId, address, tokenId, ...props }, ref) => { +const Erc721TokenUri = React.forwardRef( + ( + { + chainId, + address, + tokenId, + displayLoading = true, + displayError = true, + ...props + }, + ref + ) => { const { data, isLoading, isError, error } = useContractRead({ address, abi: erc721TokenUriAbi, @@ -52,12 +56,18 @@ const Erc721TokenUri = React.forwardRef( chainId, }) - if (isLoading) { + if (displayLoading && isLoading) { return } - if (isError) { - return + if (displayError && isError) { + return ( + + ) } if (data === undefined) { @@ -65,9 +75,9 @@ const Erc721TokenUri = React.forwardRef( } return ( - +
{data} - +
) } ) diff --git a/apps/www/registry/default/buidl/erc721/erc721-total-supply.tsx b/apps/www/registry/default/buidl/erc721/erc721-total-supply.tsx index b8ba9e4..820672e 100644 --- a/apps/www/registry/default/buidl/erc721/erc721-total-supply.tsx +++ b/apps/www/registry/default/buidl/erc721/erc721-total-supply.tsx @@ -3,7 +3,7 @@ import * as React from "react" import { useContractRead } from "wagmi" -import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" const erc721TotalSupplyAbi = [ @@ -22,48 +22,53 @@ const erc721TotalSupplyAbi = [ }, ] as const -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching ERC721 data"} -
- ) -} - -export type Erc721TotalSupplyProps = React.HTMLAttributes & { +export type Erc721TotalSupplyProps = React.HTMLAttributes & { address: `0x${string}` chainId?: number + displayLoading?: boolean + displayError?: boolean } const Erc721TotalSupply = React.forwardRef< - HTMLSpanElement, + HTMLDivElement, Erc721TotalSupplyProps ->(({ chainId, address, ...props }, ref) => { - const { data, isLoading, isError, error } = useContractRead({ - address, - abi: erc721TotalSupplyAbi, - functionName: "totalSupply", - chainId, - }) +>( + ( + { chainId, address, displayLoading = true, displayError = true, ...props }, + ref + ) => { + const { data, isLoading, isError, error } = useContractRead({ + address, + abi: erc721TotalSupplyAbi, + functionName: "totalSupply", + chainId, + }) - if (isLoading) { - return - } + if (displayLoading && isLoading) { + return + } - if (isError) { - return - } + if (displayError && isError) { + return ( + + ) + } - if (data === undefined) { - return null - } + if (data === undefined) { + return null + } - return ( - - {data.toString()} - - ) -}) + return ( +
+ {data.toString()} +
+ ) + } +) Erc721TotalSupply.displayName = "Erc721TotalSupply" diff --git a/apps/www/registry/default/buidl/error-message.tsx b/apps/www/registry/default/buidl/error-message.tsx new file mode 100644 index 0000000..a1dce0c --- /dev/null +++ b/apps/www/registry/default/buidl/error-message.tsx @@ -0,0 +1,33 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +const ErrorMessage = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & { + error: Error | null + defaultErrorMessage?: string + } +>( + ( + { error, className, defaultErrorMessage = "An error occurred", ...props }, + ref + ) => { + return ( +
+ {error?.message ?? defaultErrorMessage} +
+ ) + } +) + +ErrorMessage.displayName = "ErrorMessage" + +export { ErrorMessage } diff --git a/apps/www/registry/default/buidl/fee-data.tsx b/apps/www/registry/default/buidl/fee-data.tsx index efde105..09a5914 100644 --- a/apps/www/registry/default/buidl/fee-data.tsx +++ b/apps/www/registry/default/buidl/fee-data.tsx @@ -4,6 +4,7 @@ import * as React from "react" import { useFeeData } from "wagmi" import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" interface FeeDataProps @@ -13,14 +14,6 @@ interface FeeDataProps displayError?: boolean } -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching fee data"} -
- ) -} - const GasPrice = React.forwardRef( ( { @@ -39,7 +32,14 @@ const GasPrice = React.forwardRef( if (isLoading && displayLoading) return - if (isError && displayError) return + if (isError && displayError) + return ( + + ) if (isSuccess) { return ( diff --git a/apps/www/registry/default/buidl/image-ipfs.tsx b/apps/www/registry/default/buidl/image-ipfs.tsx index 2ab7f55..0fa42d9 100644 --- a/apps/www/registry/default/buidl/image-ipfs.tsx +++ b/apps/www/registry/default/buidl/image-ipfs.tsx @@ -1,25 +1,28 @@ import * as React from "react" import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching image"} -
- ) -} - interface ImageIpfsProps extends React.HTMLAttributes { ipfsGatewayUrl?: string src: string alt: string + displayLoading?: boolean + displayError?: boolean } const ImageIpfs = React.forwardRef( ( - { className, src, alt, ipfsGatewayUrl = "https://ipfs.io/ipfs/", ...props }, + { + className, + src, + alt, + ipfsGatewayUrl = "https://ipfs.io/ipfs/", + displayLoading = true, + displayError = true, + ...props + }, ref ) => { const [isLoading, setIsLoading] = React.useState(true) @@ -35,9 +38,13 @@ const ImageIpfs = React.forwardRef( return ( <> - {isError ? ( - - ) : isLoading ? ( + {displayError && isError ? ( + + ) : displayLoading && isLoading ? ( ) : null} { address?: `0x${string}` chainId?: number + displayLoading?: boolean + displayError?: boolean } const useNonce = ({ @@ -33,7 +36,17 @@ const useNonce = ({ } const Nonce = React.forwardRef( - ({ className, address, chainId, ...props }, ref) => { + ( + { + className, + address, + chainId, + displayLoading = true, + displayError = true, + ...props + }, + ref + ) => { const connectedChainId = useChainId() const selectedChainId = chainId ?? connectedChainId @@ -44,15 +57,25 @@ const Nonce = React.forwardRef( const { address: connectedAddress } = useAccount() const selectedAddress = address ?? connectedAddress - const { data, isLoading } = useNonce({ + const { data, isLoading, isError, error } = useNonce({ publicClient, address: selectedAddress, }) - if (isLoading) { + if (displayLoading && (isLoading || !selectedAddress)) { return } + if (displayError && isError) { + return ( + + ) + } + return (
{data} diff --git a/apps/www/registry/default/buidl/sign-message-button.tsx b/apps/www/registry/default/buidl/sign-message-button.tsx index 2b9c257..e6fb152 100644 --- a/apps/www/registry/default/buidl/sign-message-button.tsx +++ b/apps/www/registry/default/buidl/sign-message-button.tsx @@ -3,7 +3,7 @@ import * as React from "react" import { useSignMessage } from "wagmi" -import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Button, ButtonProps } from "@/registry/default/ui/button" interface SignMessageButtonProps extends Omit { @@ -11,14 +11,6 @@ interface SignMessageButtonProps extends Omit { onSuccess?: (signature: string) => void } -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while signing message"} -
- ) -} - const SignMessageButton = React.forwardRef< HTMLButtonElement, SignMessageButtonProps @@ -39,7 +31,12 @@ const SignMessageButton = React.forwardRef< > {isLoading ? "Check Wallet" : children ?? "Sign Message"} - {isError && } + {isError && ( + + )} ) }) diff --git a/apps/www/registry/default/buidl/transaction-status.tsx b/apps/www/registry/default/buidl/transaction-status.tsx index e8bba57..23a0b7e 100644 --- a/apps/www/registry/default/buidl/transaction-status.tsx +++ b/apps/www/registry/default/buidl/transaction-status.tsx @@ -4,48 +4,63 @@ import * as React from "react" import { useChainId, useWaitForTransaction } from "wagmi" import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching ERC721 data"} -
- ) -} - const TransactionStatus = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { hash: `0x${string}` chainId?: number + displayLoading?: boolean + displayError?: boolean + } +>( + ( + { + chainId: selectedChainId, + children, + className, + hash, + displayLoading = true, + displayError = true, + ...props + }, + ref + ) => { + const currentChainId = useChainId() + + const { isLoading, isSuccess, isError, error, isFetching } = + useWaitForTransaction({ + hash: hash, + chainId: selectedChainId ?? currentChainId, + }) + + if (displayLoading && isFetching) + return + + if (displayError && isError) + return ( + + ) + + return ( +
+ {isLoading && "Processing transaction..."} + {isSuccess && "Transaction successful!"} + {children} +
+ ) } ->(({ chainId: selectedChainId, children, className, hash, ...props }, ref) => { - const currentChainId = useChainId() - - const { isLoading, isSuccess, isError, error, isFetching } = - useWaitForTransaction({ - hash: hash, - chainId: selectedChainId ?? currentChainId, - }) - - if (isFetching) - return - - if (isError) return - - return ( -
- {isLoading && "Processing transaction..."} - {isSuccess && "Transaction successful!"} - {children} -
- ) -}) +) TransactionStatus.displayName = "TransactionStatus" diff --git a/apps/www/registry/default/buidl/transaction.tsx b/apps/www/registry/default/buidl/transaction.tsx index b5e90df..3e690ca 100644 --- a/apps/www/registry/default/buidl/transaction.tsx +++ b/apps/www/registry/default/buidl/transaction.tsx @@ -4,6 +4,7 @@ import * as React from "react" import { useTransaction } from "wagmi" import { cn } from "@/lib/utils" +import { ErrorMessage } from "@/registry/default/buidl/error-message" import { Skeleton } from "@/registry/default/ui/skeleton" interface TransactionProps @@ -14,14 +15,6 @@ interface TransactionProps displayError?: boolean } -const ErrorMessage = ({ error }: { error: Error | null }) => { - return ( -
- {error?.message ?? "Error while fetching transaction data"} -
- ) -} - const TransactionBlockHash = React.forwardRef( ( { @@ -42,7 +35,14 @@ const TransactionBlockHash = React.forwardRef( if (isLoading && displayLoading) return - if (isError && displayError) return + if (isError && displayError) + return ( + + ) if (isSuccess) { return ( @@ -81,7 +81,14 @@ const TransactionBlockNumber = React.forwardRef< if (isLoading && displayLoading) return - if (isError && displayError) return + if (isError && displayError) + return ( + + ) if (isSuccess) { return ( @@ -117,7 +124,14 @@ const TransactionFrom = React.forwardRef( if (isLoading && displayLoading) return - if (isError && displayError) return + if (isError && displayError) + return ( + + ) if (isSuccess) { return ( @@ -153,7 +167,14 @@ const TransactionTo = React.forwardRef( if (isLoading && displayLoading) return - if (isError && displayError) return + if (isError && displayError) + return ( + + ) if (isSuccess) { return ( @@ -189,7 +210,14 @@ const TransactionGas = React.forwardRef( if (isLoading && displayLoading) return - if (isError && displayError) return + if (isError && displayError) + return ( + + ) if (isSuccess) { return ( @@ -225,7 +253,14 @@ const TransactionGasPrice = React.forwardRef( if (isLoading && displayLoading) return - if (isError && displayError) return + if (isError && displayError) + return ( + + ) if (isSuccess) { return ( @@ -261,7 +296,14 @@ const TransactionNonce = React.forwardRef( if (isLoading && displayLoading) return - if (isError && displayError) return + if (isError && displayError) + return ( + + ) if (isSuccess) { return ( diff --git a/apps/www/registry/default/example/error-message-demo.tsx b/apps/www/registry/default/example/error-message-demo.tsx new file mode 100644 index 0000000..317b897 --- /dev/null +++ b/apps/www/registry/default/example/error-message-demo.tsx @@ -0,0 +1,5 @@ +import { ErrorMessage } from "@/registry/default/buidl/error-message" + +export default function ErrorMessageDemo() { + return +} diff --git a/apps/www/registry/registry.ts b/apps/www/registry/registry.ts index 4f9f638..91bb3fb 100644 --- a/apps/www/registry/registry.ts +++ b/apps/www/registry/registry.ts @@ -200,6 +200,12 @@ const buidl: Registry = [ dependencies: ["wagmi"], files: ["buidl/erc721/erc721-metadata.tsx"], }, + { + name: "error-message", + type: "components:buidl", + dependencies: ["wagmi"], + files: ["buidl/error-message.tsx"], + }, ] const example: Registry = [ @@ -389,6 +395,12 @@ const example: Registry = [ registryDependencies: ["erc721-metadata"], files: ["example/erc721-metadata-demo.tsx"], }, + { + name: "error-message-demo", + type: "components:example", + registryDependencies: ["error-message"], + files: ["example/error-message-demo.tsx"], + }, ] export const registry: Registry = [...buidl, ...example]