From 8ae644063b61eccc3e53594ac54407a834f7471f Mon Sep 17 00:00:00 2001 From: Vitor Date: Thu, 30 Nov 2023 10:58:02 -0300 Subject: [PATCH 1/3] refactor: components docs --- apps/www/content/docs/components/balance.mdx | 13 ++++----- apps/www/content/docs/components/blockie.mdx | 2 ++ .../content/docs/components/ens-avatar.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 | 6 ++++ .../content/docs/components/erc20-symbol.mdx | 8 +++++- .../docs/components/erc20-total-supply.mdx | 12 ++++++-- .../docs/components/erc721-metadata.mdx | 20 +++++++++---- .../content/docs/components/erc721-name.mdx | 2 ++ .../docs/components/erc721-owner-of.mdx | 13 +++++++-- .../content/docs/components/erc721-symbol.mdx | 10 +++++-- .../docs/components/erc721-token-uri.mdx | 14 ++++++++-- .../docs/components/erc721-total-supply.mdx | 13 +++++++-- apps/www/content/docs/components/nonce.mdx | 9 ++++-- .../docs/components/sign-message-button.mdx | 2 +- .../styles/default/erc20-total-supply.json | 2 +- .../styles/default/sign-message-button.json | 2 +- .../styles/default/transaction-status.json | 2 +- .../buidl/erc20/erc20-total-supply.tsx | 2 +- .../default/buidl/sign-message-button.tsx | 2 +- .../default/buidl/transaction-status.tsx | 28 +++++++++++++------ .../example/erc20-total-supply-demo.tsx | 2 +- apps/www/registry/default/ui/skeleton.tsx | 2 +- 25 files changed, 132 insertions(+), 44 deletions(-) diff --git a/apps/www/content/docs/components/balance.mdx b/apps/www/content/docs/components/balance.mdx index 4b23413..8466170 100644 --- a/apps/www/content/docs/components/balance.mdx +++ b/apps/www/content/docs/components/balance.mdx @@ -53,15 +53,12 @@ wagmi: ## Usage ```tsx -import { - GasPrice, - MaxFeePerGas, - MaxPriorityFeePerGas, -} from "@/registry/default/buidl/balance" +import { Balance } from "@/registry/default/buidl/balance" ``` ```tsx - - - + + ``` diff --git a/apps/www/content/docs/components/blockie.mdx b/apps/www/content/docs/components/blockie.mdx index dddc5fd..f85aea2 100644 --- a/apps/www/content/docs/components/blockie.mdx +++ b/apps/www/content/docs/components/blockie.mdx @@ -2,6 +2,8 @@ title: Blockie description: Display an account blockie identicon. component: true +wagmi: + link: https://wagmi.sh/react/hooks/useAccount --- + ``` diff --git a/apps/www/content/docs/components/ens-name.mdx b/apps/www/content/docs/components/ens-name.mdx index 425288f..2491169 100644 --- a/apps/www/content/docs/components/ens-name.mdx +++ b/apps/www/content/docs/components/ens-name.mdx @@ -57,5 +57,6 @@ import { EnsName } from "@/components/buidl/ens-name" ``` ```tsx + ``` diff --git a/apps/www/content/docs/components/erc20-balance.mdx b/apps/www/content/docs/components/erc20-balance.mdx index 2ebb2a1..22ffe04 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 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/erc20-decimals.mdx b/apps/www/content/docs/components/erc20-decimals.mdx index 9af3301..8a7803c 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 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/erc20-name.mdx b/apps/www/content/docs/components/erc20-name.mdx index d2da2fc..5616dd8 100644 --- a/apps/www/content/docs/components/erc20-name.mdx +++ b/apps/www/content/docs/components/erc20-name.mdx @@ -2,6 +2,8 @@ title: ERC20 Name description: Display the name of an ERC20 token component: true +wagmi: + link: https://wagmi.sh/react/hooks/useContractRead --- +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/erc20-symbol.mdx b/apps/www/content/docs/components/erc20-symbol.mdx index 7eefe42..00fcc11 100644 --- a/apps/www/content/docs/components/erc20-symbol.mdx +++ b/apps/www/content/docs/components/erc20-symbol.mdx @@ -1,7 +1,9 @@ --- -title: ENS Symbol +title: ERC20 Symbol description: Display the symbol of an ERC20 token component: true +wagmi: + link: https://wagmi.sh/react/hooks/useContractRead --- +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/erc20-total-supply.mdx b/apps/www/content/docs/components/erc20-total-supply.mdx index a12301b..feb0583 100644 --- a/apps/www/content/docs/components/erc20-total-supply.mdx +++ b/apps/www/content/docs/components/erc20-total-supply.mdx @@ -1,7 +1,9 @@ --- -title: ENS Symbol -description: Display the symbol of an ERC20 token +title: ERC20 Total Supply +description: Display the total supply of an ERC20 token. component: true +wagmi: + link: https://wagmi.sh/react/hooks/useContractRead --- +Install the following shadcn/ui components: + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + Copy and paste the following code into your project. @@ -51,5 +57,5 @@ import { Erc20Symbol } from "@/components/buidl/erc20-total-supply" ``` ```tsx - + ``` diff --git a/apps/www/content/docs/components/erc721-metadata.mdx b/apps/www/content/docs/components/erc721-metadata.mdx index 8d6e10b..cc5735d 100644 --- a/apps/www/content/docs/components/erc721-metadata.mdx +++ b/apps/www/content/docs/components/erc721-metadata.mdx @@ -2,6 +2,8 @@ title: ERC721 Metadata description: Display the metadata of an ERC721 token. component: true +wagmi: + link: https://wagmi.sh/react/hooks/useContractRead --- +Install the following shadcn/ui components: + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + Copy and paste the following code into your project. @@ -46,10 +52,14 @@ component: true ## Usage -```tsx -import { Erc721Name } from "@/registry/default/buidl/erc721/erc721-metadata" -``` +````tsx +import { Erc721MetadataImage } from "@/registry/default/buidl/erc721/erc721-metadata"``` ```tsx - -``` + +```` diff --git a/apps/www/content/docs/components/erc721-name.mdx b/apps/www/content/docs/components/erc721-name.mdx index bfedfa9..7eac17d 100644 --- a/apps/www/content/docs/components/erc721-name.mdx +++ b/apps/www/content/docs/components/erc721-name.mdx @@ -2,6 +2,8 @@ title: ERC721 Name description: Display the name of an ERC721 token component: true +wagmi: + link: https://wagmi.sh/react/hooks/useContractRead --- +Install the following shadcn/ui components: + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + Copy and paste the following code into your project. @@ -47,9 +53,12 @@ component: true ## Usage ```tsx -import { Erc20owner } from "@/components/buidl/erc721-owner-of" +import { Erc721OwnerOf } from "@/registry/default/buidl/erc721/erc721-owner-of" ``` ```tsx - + ``` diff --git a/apps/www/content/docs/components/erc721-symbol.mdx b/apps/www/content/docs/components/erc721-symbol.mdx index dcc6207..b935b62 100644 --- a/apps/www/content/docs/components/erc721-symbol.mdx +++ b/apps/www/content/docs/components/erc721-symbol.mdx @@ -2,6 +2,8 @@ title: ERC721 Symbol description: Display the symbol of an ERC721 token component: true +wagmi: + link: https://wagmi.sh/react/hooks/useContractRead --- +Install the following shadcn/ui components: + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + Copy and paste the following code into your project. @@ -47,9 +53,9 @@ component: true ## Usage ```tsx -import { Erc20Symbol } from "@/components/buidl/erc721-symbol" +import { Erc721Symbol } from "@/components/buidl/erc721-symbol" ``` ```tsx - + ``` diff --git a/apps/www/content/docs/components/erc721-token-uri.mdx b/apps/www/content/docs/components/erc721-token-uri.mdx index 8662b0d..4a0cbcb 100644 --- a/apps/www/content/docs/components/erc721-token-uri.mdx +++ b/apps/www/content/docs/components/erc721-token-uri.mdx @@ -2,6 +2,8 @@ title: ERC721 Token URI description: Display the token uri of an ERC721 token component: true +wagmi: + link: https://wagmi.sh/react/hooks/useContractRead --- +Install the following shadcn/ui components: + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + Copy and paste the following code into your project. @@ -47,9 +53,13 @@ component: true ## Usage ```tsx -import { Erc721Name } from "@/registry/default/buidl/erc721/erc721-token-uri" +import { Erc721TokenUri } from "@/registry/default/buidl/erc721/erc721-token-uri" ``` ```tsx - + ``` diff --git a/apps/www/content/docs/components/erc721-total-supply.mdx b/apps/www/content/docs/components/erc721-total-supply.mdx index 842537f..2e683a9 100644 --- a/apps/www/content/docs/components/erc721-total-supply.mdx +++ b/apps/www/content/docs/components/erc721-total-supply.mdx @@ -2,6 +2,8 @@ title: ERC721 Total Supply description: Display the total supply of an ERC721 token component: true +wagmi: + link: https://wagmi.sh/react/hooks/useContractRead --- +Install the following shadcn/ui components: + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + Copy and paste the following code into your project. @@ -47,9 +53,12 @@ component: true ## Usage ```tsx -import { Erc721Name } from "@/registry/default/buidl/erc721/erc721-total-supply" +import { Erc721TotalSupply } from "@/registry/default/buidl/erc721/erc721-total-supply" ``` ```tsx - + ``` diff --git a/apps/www/content/docs/components/nonce.mdx b/apps/www/content/docs/components/nonce.mdx index 0eedf70..d9c71a9 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 shadcn/ui components: + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + Copy and paste the following code into your project. @@ -49,9 +53,10 @@ wagmi: ## Usage ```tsx -import { AccountNonce } from "@/components/buidl/nonce" +import { Nonce } from "@/registry/default/buidl/nonce" ``` ```tsx - + + ``` diff --git a/apps/www/content/docs/components/sign-message-button.mdx b/apps/www/content/docs/components/sign-message-button.mdx index 617202e..62a7f2f 100644 --- a/apps/www/content/docs/components/sign-message-button.mdx +++ b/apps/www/content/docs/components/sign-message-button.mdx @@ -57,5 +57,5 @@ import { SignMessageButton } from "@/registry/default/buidl/sign-message-button" ``` ```tsx - + ``` 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 0fa73b4..2884118 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 { 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" } ], "folder": "erc20", 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 a9f25fc..266129b 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 { 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" } ], "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 e270152..832a3b0 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\"\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 } = useWaitForTransaction({\n hash: hash,\n chainId: selectedChainId ?? currentChainId,\n })\n\n return (\n <>\n \n {(isLoading || isSuccess) && (\n <>\n {isLoading && \"Processing transaction...\"}\n {isSuccess && \"Transaction successful!\"}\n {children}\n \n )}\n \n {isError && (\n
\n Error: {error?.message ?? \"Error processing transaction\"}\n
\n )}\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 { 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 \n {(isLoading || isSuccess) && (\n <>\n {isLoading && \"Processing transaction...\"}\n {isSuccess && \"Transaction successful!\"}\n {children}\n \n )}\n \n \n )\n})\n\nTransactionStatus.displayName = \"TransactionStatus\"\n\nexport { TransactionStatus }\n" } ], "type": "components:buidl" 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 07da805..36c627e 100644 --- a/apps/www/registry/default/buidl/erc20/erc20-total-supply.tsx +++ b/apps/www/registry/default/buidl/erc20/erc20-total-supply.tsx @@ -87,7 +87,7 @@ const Erc20TotalSupply = React.forwardRef< }) if (isLoadingTotalSupply || isLoadingDecimals) { - return + return } if (isErrorTotalSupply || isErrorDecimals) { diff --git a/apps/www/registry/default/buidl/sign-message-button.tsx b/apps/www/registry/default/buidl/sign-message-button.tsx index 7dbde38..2b9c257 100644 --- a/apps/www/registry/default/buidl/sign-message-button.tsx +++ b/apps/www/registry/default/buidl/sign-message-button.tsx @@ -32,7 +32,7 @@ const SignMessageButton = React.forwardRef< <> \n \n \n \n Connect Wallet\n
\n \n
\n {connectors.map((connector, index) => (\n \n ))}\n
\n \n \n )\n }\n)\n\nWalletConnect.displayName = \"WalletConnect\"\n\nconst WalletPreview = React.forwardRef<\n HTMLButtonElement,\n Omit & {\n connector: Connector\n }\n>(({ className, connector, ...props }, ref) => {\n const { connect, isLoading, isError, error } = useConnect()\n\n const handleConnect = () => {\n connect({ connector })\n }\n\n return (\n \n

{connector.name}

\n {isLoading && (\n

\n Accept the connection request in your wallet\n

\n )}\n {isError && (\n
\n {error?.message ?? \"Error while connecting wallet\"}\n
\n )}\n \n )\n})\n\nWalletPreview.displayName = \"WalletPreview\"\n\nexport { WalletConnect, WalletPreview }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useAccount, useConnect, type Connector } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, ButtonProps } from \"@/registry/default/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\n\nconst WalletConnect = React.forwardRef(\n ({ children, className, ...props }, ref) => {\n const { address } = useAccount()\n const { connectors } = useConnect()\n\n if (address) {\n return
{address}
\n }\n\n return (\n \n \n \n \n \n \n Connect Wallet\n
\n \n
\n {connectors.map((connector, index) => (\n \n ))}\n
\n \n \n )\n }\n)\n\nWalletConnect.displayName = \"WalletConnect\"\n\nconst WalletPreview = React.forwardRef<\n HTMLButtonElement,\n Omit & {\n connector: Connector\n }\n>(({ className, connector, ...props }, ref) => {\n const { connect, isLoading, isError, error } = useConnect()\n\n const handleConnect = () => {\n connect({ connector })\n }\n\n return (\n \n

{connector.name}

\n {isLoading && (\n

\n Accept the connection request in your wallet\n

\n )}\n {isError && (\n
\n {error?.message ?? \"Error while connecting wallet\"}\n
\n )}\n \n )\n})\n\nWalletPreview.displayName = \"WalletPreview\"\n\nexport { WalletConnect, WalletPreview }\n" } ], "type": "components:buidl" diff --git a/apps/www/public/registry/styles/default/wallet-disconnect.json b/apps/www/public/registry/styles/default/wallet-disconnect.json index e7707e7..3ff7a09 100644 --- a/apps/www/public/registry/styles/default/wallet-disconnect.json +++ b/apps/www/public/registry/styles/default/wallet-disconnect.json @@ -6,7 +6,7 @@ "files": [ { "name": "wallet-disconnect.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useDisconnect } from \"wagmi\"\n\nimport { Button, type ButtonProps } from \"../ui/button\"\n\nconst WalletDisconnect = React.forwardRef<\n HTMLButtonElement,\n Omit\n>(({ children, ...props }, ref) => {\n const { disconnect } = useDisconnect()\n\n return (\n {\n disconnect()\n }}\n {...props}\n >\n {children ?? \"Disconnect\"}\n \n )\n})\n\nWalletDisconnect.displayName = \"WalletDisconnect\"\n\nexport { WalletDisconnect }\n" + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useDisconnect } from \"wagmi\"\n\nimport { Button, type ButtonProps } from \"@/registry/default/ui/button\"\n\nconst WalletDisconnect = React.forwardRef<\n HTMLButtonElement,\n Omit\n>(({ children, ...props }, ref) => {\n const { disconnect } = useDisconnect()\n\n return (\n {\n disconnect()\n }}\n {...props}\n >\n {children ?? \"Disconnect\"}\n \n )\n})\n\nWalletDisconnect.displayName = \"WalletDisconnect\"\n\nexport { WalletDisconnect }\n" } ], "type": "components:buidl" diff --git a/apps/www/registry/default/buidl/address.tsx b/apps/www/registry/default/buidl/address.tsx index 6354649..d88fb66 100644 --- a/apps/www/registry/default/buidl/address.tsx +++ b/apps/www/registry/default/buidl/address.tsx @@ -18,13 +18,13 @@ export interface AddressProps } const AddressCopy = React.forwardRef< - HTMLSpanElement, - React.HTMLAttributes & { + HTMLDivElement, + React.HTMLAttributes & { address: AddressType } >(({ address, className, children, ...props }, ref) => { return ( - { @@ -39,15 +39,15 @@ const AddressCopy = React.forwardRef< {children ?? address} Copy address - + ) }) AddressCopy.displayName = "AddressCopy" const AddressLink = React.forwardRef< - HTMLElement, - React.HTMLAttributes & { + HTMLDivElement, + React.HTMLAttributes & { address: AddressType } >(({ address, className, children, ...props }, ref) => { @@ -57,7 +57,7 @@ const AddressLink = React.forwardRef< const chain = currentChain ?? mainnet return ( - {children ?? address} )} - + ) }) AddressLink.displayName = "AddressLink" -const Address = React.forwardRef( +const Address = React.forwardRef( ( { address, className, truncate, truncateAmount = 4, link, copy, ...props }, ref diff --git a/apps/www/registry/default/buidl/blockie.tsx b/apps/www/registry/default/buidl/blockie.tsx index b0d1a36..8228324 100644 --- a/apps/www/registry/default/buidl/blockie.tsx +++ b/apps/www/registry/default/buidl/blockie.tsx @@ -6,6 +6,7 @@ import makeBlockie from "ethereum-blockies-base64" import { useAccount } from "wagmi" import { cn } from "@/lib/utils" +import { Skeleton } from "@/registry/default/ui/skeleton" const blockieVariants = cva("inline-block", { variants: { @@ -32,24 +33,36 @@ export type BlockieProps = React.HTMLAttributes & address?: `0x${string}` } -export const Blockie = ({ - className, - address, - variant, - size, - ...props -}: BlockieProps) => { - const { address: connectedAddress } = useAccount() - const selectedAddress = address ?? connectedAddress - - if (!selectedAddress) return null - - return ( - {`${address} - ) -} +const Blockie = React.forwardRef( + ({ className, address, variant, size, ...props }, ref) => { + const [isLoading, setIsLoading] = React.useState(true) + const { address: connectedAddress, isConnecting } = useAccount() + const selectedAddress = address ?? connectedAddress ?? "0x0" + + return ( + <> + {isLoading || isConnecting ? ( + + ) : null} + {`${address} setIsLoading(false)} + className={cn( + blockieVariants({ variant, size, className }), + (isLoading || isConnecting) && "hidden" + )} + src={makeBlockie(selectedAddress)} + {...props} + /> + + ) + } +) + +Blockie.displayName = "Blockie" + +export { Blockie } diff --git a/apps/www/registry/default/buidl/ens-address.tsx b/apps/www/registry/default/buidl/ens-address.tsx index 2168f12..7374ff3 100644 --- a/apps/www/registry/default/buidl/ens-address.tsx +++ b/apps/www/registry/default/buidl/ens-address.tsx @@ -19,14 +19,18 @@ interface EnsAddressProps extends Omit { name: string } -const EnsAddress = React.forwardRef( +const EnsAddress = React.forwardRef( ({ name, className, ...props }, ref) => { const { data, isLoading, isSuccess, isError, error } = useEnsAddress({ chainId: 1, name, }) - if (isLoading) { + if (isError) { + return + } + + if (isLoading || !data) { return ( ( ) } - if (isError) { - return - } - return null } ) diff --git a/apps/www/registry/default/buidl/ens-avatar.tsx b/apps/www/registry/default/buidl/ens-avatar.tsx index 1345c58..2c0cc91 100644 --- a/apps/www/registry/default/buidl/ens-avatar.tsx +++ b/apps/www/registry/default/buidl/ens-avatar.tsx @@ -49,6 +49,8 @@ const EnsAvatar = React.forwardRef( }, ref ) => { + const [isLoadingImg, setIsLoadingImg] = React.useState(true) + const { address: connectedAddress } = useAccount() const selectedAddress = address ?? connectedAddress @@ -76,8 +78,7 @@ const EnsAvatar = React.forwardRef( ) @@ -85,13 +86,27 @@ const EnsAvatar = React.forwardRef( if (dataEnsAvatar) { return ( - {`${selectedAddress} + <> + {isLoadingImg ? ( + + ) : null} + {`${selectedAddress} { + setIsLoadingImg(false) + }} + src={dataEnsAvatar} + {...props} + /> + ) } diff --git a/apps/www/registry/default/buidl/ens-name.tsx b/apps/www/registry/default/buidl/ens-name.tsx index 14e0c7a..d560510 100644 --- a/apps/www/registry/default/buidl/ens-name.tsx +++ b/apps/www/registry/default/buidl/ens-name.tsx @@ -5,14 +5,13 @@ import { useAccount, useEnsName } from "wagmi" import { cn } from "@/lib/utils" import { Address } from "@/registry/default/buidl/address" +import { Skeleton } from "@/registry/default/ui/skeleton" -import { Skeleton } from "../ui/skeleton" - -interface EnsNameProps extends React.HTMLAttributes { +interface EnsNameProps extends React.HTMLAttributes { address?: `0x${string}` } -const EnsName = React.forwardRef( +const EnsName = React.forwardRef( ({ address, className, ...props }, ref) => { const { address: connectedAddress } = useAccount() const selectedAddress = address ?? connectedAddress @@ -25,13 +24,13 @@ const EnsName = React.forwardRef( if (isSuccess && data) { return ( - +
{data} - +
) } - if (isLoading) { + if (isLoading || !selectedAddress) { return } diff --git a/apps/www/registry/default/buidl/erc20/erc20-selector.tsx b/apps/www/registry/default/buidl/erc20/erc20-selector.tsx index 899c662..deb61bf 100644 --- a/apps/www/registry/default/buidl/erc20/erc20-selector.tsx +++ b/apps/www/registry/default/buidl/erc20/erc20-selector.tsx @@ -1,18 +1,17 @@ "use client" import { useCallback, useMemo, useState } from "react" -import Image from "next/image" import { cn } from "@/lib/utils" - +import { ImageIpfs } from "@/registry/default/buidl/image-ipfs" import { CommandDialog, CommandEmpty, CommandInput, CommandItem, CommandList, -} from "../../ui/command" -import { ImageIpfs } from "../image-ipfs" +} from "@/registry/default/ui/command" + import { Token, TokenList } from "./types" interface Erc20SelectorProps { diff --git a/apps/www/registry/default/buidl/erc721/erc721-metadata.tsx b/apps/www/registry/default/buidl/erc721/erc721-metadata.tsx index 6811952..22a5287 100644 --- a/apps/www/registry/default/buidl/erc721/erc721-metadata.tsx +++ b/apps/www/registry/default/buidl/erc721/erc721-metadata.tsx @@ -48,7 +48,7 @@ function useERC721Metadata({ address, chainId, tokenId, - ipfsGatewayUrl = "https://ipfs.io/ipfs", + ipfsGatewayUrl = "https://ipfs.io/ipfs/", }: useERC721MetadataProps) { const { data, isLoading, isError, error } = useContractRead({ address, @@ -64,14 +64,14 @@ function useERC721Metadata({ queryFn: async () => { if (!data) throw new Error("No tokenUri found") const uri = data.replace("ipfs://", "") - const response = await fetch(`${ipfsGatewayUrl}/${uri}`) + const response = await fetch(`${ipfsGatewayUrl}${uri}`) const json = (await response.json()) as IERC721Metadata if (!json.image) throw new Error("No image found in metadata") if (!json.attributes) throw new Error("No attributes found in metadata") json.image = json.image.startsWith("ipfs://") - ? json.image.replace("ipfs://", `${ipfsGatewayUrl}/`) + ? json.image.replace("ipfs://", `${ipfsGatewayUrl}`) : json.image return json }, @@ -113,8 +113,6 @@ const Erc721MetadataImage = React.forwardRef< ipfsGatewayUrl, }) - console.log(data) - if (isLoading) { return } diff --git a/apps/www/registry/default/buidl/image-ipfs.tsx b/apps/www/registry/default/buidl/image-ipfs.tsx index e93a6b9..2ab7f55 100644 --- a/apps/www/registry/default/buidl/image-ipfs.tsx +++ b/apps/www/registry/default/buidl/image-ipfs.tsx @@ -1,40 +1,59 @@ -import { useMemo } from "react" +import * as React from "react" import { cn } from "@/lib/utils" +import { Skeleton } from "@/registry/default/ui/skeleton" -type ImageIpfs = React.HTMLAttributes & { +const ErrorMessage = ({ error }: { error: Error | null }) => { + return ( +
+ {error?.message ?? "Error while fetching image"} +
+ ) +} + +interface ImageIpfsProps extends React.HTMLAttributes { + ipfsGatewayUrl?: string src: string alt: string - width?: string - height?: string } -export const ImageIpfs = ({ - className, - src, - alt, - width, - height, -}: ImageIpfs) => { - const classes = cn(className) - - const imgSrc = useMemo( - () => - src?.startsWith("ipfs://") - ? src.replace("ipfs://", "https://gateway.ipfs.io/ipfs/") - : src, - [src] - ) +const ImageIpfs = React.forwardRef( + ( + { className, src, alt, ipfsGatewayUrl = "https://ipfs.io/ipfs/", ...props }, + ref + ) => { + const [isLoading, setIsLoading] = React.useState(true) + const [isError, setIsError] = React.useState(false) - if (!imgSrc) return null + const imgSrc = React.useMemo( + () => + src?.startsWith("ipfs://") + ? src.replace("ipfs://", ipfsGatewayUrl) + : src, + [src, ipfsGatewayUrl] + ) - return ( - {alt} - ) -} + return ( + <> + {isError ? ( + + ) : isLoading ? ( + + ) : null} + {alt} setIsLoading(false)} + onError={() => setIsError(true)} + className={cn((isLoading || isError) && "hidden", className)} + {...props} + /> + + ) + } +) + +ImageIpfs.displayName = "ImageIpfs" + +export { ImageIpfs } diff --git a/apps/www/registry/default/buidl/is-wallet-connected.tsx b/apps/www/registry/default/buidl/is-wallet-connected.tsx index 681306e..98e52d4 100644 --- a/apps/www/registry/default/buidl/is-wallet-connected.tsx +++ b/apps/www/registry/default/buidl/is-wallet-connected.tsx @@ -4,9 +4,9 @@ import * as React from "react" import { useAccount } from "wagmi" const IsWalletConnected = ({ children }: { children: React.ReactNode }) => { - const { isConnected } = useAccount() + const { isConnected, isConnecting } = useAccount() - if (isConnected) return <>{children} + if (isConnected || isConnecting) return <>{children} return null } diff --git a/apps/www/registry/default/buidl/nonce.tsx b/apps/www/registry/default/buidl/nonce.tsx index 9364ab9..6827681 100644 --- a/apps/www/registry/default/buidl/nonce.tsx +++ b/apps/www/registry/default/buidl/nonce.tsx @@ -12,7 +12,7 @@ import { import { cn } from "@/lib/utils" import { Skeleton } from "@/registry/default/ui/skeleton" -interface NonceProps extends React.HTMLAttributes { +interface NonceProps extends React.HTMLAttributes { address?: `0x${string}` chainId?: number } @@ -32,8 +32,8 @@ const useNonce = ({ }) } -const Nonce = React.forwardRef( - ({ className, address, chainId, ...props }: NonceProps) => { +const Nonce = React.forwardRef( + ({ className, address, chainId, ...props }, ref) => { const connectedChainId = useChainId() const selectedChainId = chainId ?? connectedChainId @@ -54,9 +54,9 @@ const Nonce = React.forwardRef( } return ( - +
{data} - +
) } ) diff --git a/apps/www/registry/default/buidl/transaction-status.tsx b/apps/www/registry/default/buidl/transaction-status.tsx index 3c12894..e8bba57 100644 --- a/apps/www/registry/default/buidl/transaction-status.tsx +++ b/apps/www/registry/default/buidl/transaction-status.tsx @@ -35,21 +35,15 @@ const TransactionStatus = React.forwardRef< if (isError) return return ( - <> -
- {(isLoading || isSuccess) && ( - <> - {isLoading && "Processing transaction..."} - {isSuccess && "Transaction successful!"} - {children} - - )} -
- +
+ {isLoading && "Processing transaction..."} + {isSuccess && "Transaction successful!"} + {children} +
) }) diff --git a/apps/www/registry/default/buidl/transaction.tsx b/apps/www/registry/default/buidl/transaction.tsx index d03c5f1..b5e90df 100644 --- a/apps/www/registry/default/buidl/transaction.tsx +++ b/apps/www/registry/default/buidl/transaction.tsx @@ -40,7 +40,7 @@ const TransactionBlockHash = React.forwardRef( }) if (isLoading && displayLoading) - return + return if (isError && displayError) return diff --git a/apps/www/registry/default/buidl/wallet-connect.tsx b/apps/www/registry/default/buidl/wallet-connect.tsx index c4f3775..1b8d820 100644 --- a/apps/www/registry/default/buidl/wallet-connect.tsx +++ b/apps/www/registry/default/buidl/wallet-connect.tsx @@ -4,15 +4,14 @@ import * as React from "react" import { useAccount, useConnect, type Connector } from "wagmi" import { cn } from "@/lib/utils" - -import { Button, ButtonProps } from "../ui/button" +import { Button, ButtonProps } from "@/registry/default/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, -} from "../ui/dialog" +} from "@/registry/default/ui/dialog" const WalletConnect = React.forwardRef( ({ children, className, ...props }, ref) => { @@ -20,7 +19,7 @@ const WalletConnect = React.forwardRef( const { connectors } = useConnect() if (address) { - return {address} + return
{address}
} return ( diff --git a/apps/www/registry/default/buidl/wallet-disconnect.tsx b/apps/www/registry/default/buidl/wallet-disconnect.tsx index 3c57926..b898d40 100644 --- a/apps/www/registry/default/buidl/wallet-disconnect.tsx +++ b/apps/www/registry/default/buidl/wallet-disconnect.tsx @@ -3,7 +3,7 @@ import * as React from "react" import { useDisconnect } from "wagmi" -import { Button, type ButtonProps } from "../ui/button" +import { Button, type ButtonProps } from "@/registry/default/ui/button" const WalletDisconnect = React.forwardRef< HTMLButtonElement, diff --git a/apps/www/registry/default/example/address-demo.tsx b/apps/www/registry/default/example/address-demo.tsx index 43c2ad3..a7c9b3b 100644 --- a/apps/www/registry/default/example/address-demo.tsx +++ b/apps/www/registry/default/example/address-demo.tsx @@ -3,10 +3,9 @@ import { AddressCopy, AddressLink, } from "@/registry/default/buidl/address" - -import { IsWalletConnected } from "../buidl/is-wallet-connected" -import { IsWalletDisconnected } from "../buidl/is-wallet-disconnected" -import { WalletConnect } from "../buidl/wallet-connect" +import { IsWalletConnected } from "@/registry/default/buidl/is-wallet-connected" +import { IsWalletDisconnected } from "@/registry/default/buidl/is-wallet-disconnected" +import { WalletConnect } from "@/registry/default/buidl/wallet-connect" export const ADDRESS_EXAMPLE = "0x761d584f1C2d43cBc3F42ECd739701a36dFFAa31" diff --git a/apps/www/registry/default/example/blockie-demo.tsx b/apps/www/registry/default/example/blockie-demo.tsx index 717dda4..45586fb 100644 --- a/apps/www/registry/default/example/blockie-demo.tsx +++ b/apps/www/registry/default/example/blockie-demo.tsx @@ -1,8 +1,7 @@ import { Blockie } from "@/registry/default/buidl/blockie" - -import { IsWalletConnected } from "../buidl/is-wallet-connected" -import { IsWalletDisconnected } from "../buidl/is-wallet-disconnected" -import { WalletConnect } from "../buidl/wallet-connect" +import { IsWalletConnected } from "@/registry/default/buidl/is-wallet-connected" +import { IsWalletDisconnected } from "@/registry/default/buidl/is-wallet-disconnected" +import { WalletConnect } from "@/registry/default/buidl/wallet-connect" const ADDRESS_EXAMPLE = "0x761d584f1C2d43cBc3F42ECd739701a36dFFAa31" diff --git a/apps/www/registry/default/example/ens-avatar-demo.tsx b/apps/www/registry/default/example/ens-avatar-demo.tsx index b7ff5bd..5af6e76 100644 --- a/apps/www/registry/default/example/ens-avatar-demo.tsx +++ b/apps/www/registry/default/example/ens-avatar-demo.tsx @@ -1,7 +1,5 @@ import { EnsAvatar } from "@/registry/default/buidl/ens-avatar" import { IsWalletConnected } from "@/registry/default/buidl/is-wallet-connected" -import { IsWalletDisconnected } from "@/registry/default/buidl/is-wallet-disconnected" -import { WalletConnect } from "@/registry/default/buidl/wallet-connect" const ADDRESS_EXAMPLE = "0x761d584f1C2d43cBc3F42ECd739701a36dFFAa31" @@ -15,9 +13,9 @@ export default function EnsAvatarDemo() { - + {/* - + */}

Input ENS name (vitalik.eth)

diff --git a/apps/www/registry/default/example/image-ipfs-demo.tsx b/apps/www/registry/default/example/image-ipfs-demo.tsx index 5c86f6f..f9598cf 100644 --- a/apps/www/registry/default/example/image-ipfs-demo.tsx +++ b/apps/www/registry/default/example/image-ipfs-demo.tsx @@ -3,8 +3,7 @@ import { ImageIpfs } from "@/registry/default/buidl/image-ipfs" export default function ImageIpfsDemo() { return ( diff --git a/apps/www/registry/default/example/is-wallet-disconnected-demo.tsx b/apps/www/registry/default/example/is-wallet-disconnected-demo.tsx index faa0d46..d8184ef 100644 --- a/apps/www/registry/default/example/is-wallet-disconnected-demo.tsx +++ b/apps/www/registry/default/example/is-wallet-disconnected-demo.tsx @@ -1,8 +1,7 @@ import { IsWalletConnected } from "@/registry/default/buidl/is-wallet-connected" import { IsWalletDisconnected } from "@/registry/default/buidl/is-wallet-disconnected" import { WalletConnect } from "@/registry/default/buidl/wallet-connect" - -import { WalletDisconnect } from "../buidl/wallet-disconnect" +import { WalletDisconnect } from "@/registry/default/buidl/wallet-disconnect" export default function IsWalletDisconnectedDemo() { return ( diff --git a/apps/www/registry/default/example/transaction-demo.tsx b/apps/www/registry/default/example/transaction-demo.tsx index dd70126..46d70a1 100644 --- a/apps/www/registry/default/example/transaction-demo.tsx +++ b/apps/www/registry/default/example/transaction-demo.tsx @@ -17,20 +17,36 @@ export default function TransactionStatusDemo() {

Transaction

From:

- +

To:

- +

BlockHash:

- +

BlockNumber:

Gas:

- +

Gas Price:

- +

Nonce:

- +
diff --git a/apps/www/registry/default/example/transaction-status-demo.tsx b/apps/www/registry/default/example/transaction-status-demo.tsx index 8b6f1f1..6c5da9b 100644 --- a/apps/www/registry/default/example/transaction-status-demo.tsx +++ b/apps/www/registry/default/example/transaction-status-demo.tsx @@ -1,7 +1,6 @@ +import { BlockExplorerLink } from "@/registry/default/buidl/block-explorer-link" import { TransactionStatus } from "@/registry/default/buidl/transaction-status" -import { BlockExplorerLink } from "../buidl/block-explorer-link" - export default function TransactionStatusDemo() { return (
From e8646c77e26d164f342ce810a1a69199d1948f31 Mon Sep 17 00:00:00 2001 From: Vitor Date: Fri, 1 Dec 2023 11:58:12 -0300 Subject: [PATCH 3/3] 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]