From 8ae644063b61eccc3e53594ac54407a834f7471f Mon Sep 17 00:00:00 2001 From: Vitor <marthendalnunes@gmail.com> Date: Thu, 30 Nov 2023 10:58:02 -0300 Subject: [PATCH] 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 -<GasPrice /> -<MaxFeePerGas /> -<MaxPriorityFeePerGas /> +<Balance /> +<Balance + address="0x0000000000000000000000000000000000000000" +/> ``` 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 --- <ComponentPreview diff --git a/apps/www/content/docs/components/ens-avatar.mdx b/apps/www/content/docs/components/ens-avatar.mdx index a11336b..542ba3b 100644 --- a/apps/www/content/docs/components/ens-avatar.mdx +++ b/apps/www/content/docs/components/ens-avatar.mdx @@ -62,4 +62,5 @@ import { EnsAvatar } from "@/components/buidl/ens-avatar" ```tsx <EnsAvatar address="0x0000000000000000000000000000000000000000" /> +<EnsAvatar name="vitalik.eth" /> ``` 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 +<EnsName /> <EnsName address="0x0000000000000000000000000000000000000000" /> ``` 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: <Steps> +<Step>Install the following shadcn/ui components:</Step> + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + <Step>Copy and paste the following code into your project.</Step> <ComponentSource name="erc20-balance" /> 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: <Steps> +<Step>Install the following shadcn/ui components:</Step> + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + <Step>Copy and paste the following code into your project.</Step> <ComponentSource name="erc20-decimals" /> 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 --- <ComponentPreview @@ -34,6 +36,10 @@ component: true <Steps> +<Step>Install the following shadcn/ui components:</Step> + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + <Step>Copy and paste the following code into your project.</Step> <ComponentSource name="erc20-name" /> 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 --- <ComponentPreview @@ -34,6 +36,10 @@ component: true <Steps> +<Step>Install the following shadcn/ui components:</Step> + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + <Step>Copy and paste the following code into your project.</Step> <ComponentSource name="erc20-symbol" /> 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 --- <ComponentPreview @@ -34,6 +36,10 @@ component: true <Steps> +<Step>Install the following shadcn/ui components:</Step> + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + <Step>Copy and paste the following code into your project.</Step> <ComponentSource name="erc20-total-supply" /> @@ -51,5 +57,5 @@ import { Erc20Symbol } from "@/components/buidl/erc20-total-supply" ``` ```tsx -<Erc20Symbol address="0x0000000000000000000000000000000000000000" /> +<Erc20TotalSupply address="0x0000000000000000000000000000000000000000" /> ``` 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 --- <ComponentPreview @@ -34,6 +36,10 @@ component: true <Steps> +<Step>Install the following shadcn/ui components:</Step> + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + <Step>Copy and paste the following code into your project.</Step> <ComponentSource name="erc721-metadata" /> @@ -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 -<Erc721Name address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB" chainId={1} /> -``` +<Erc721MetadataImage + className="mt-1 h-[250px] w-[250px]" + address="0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D" + tokenId={1} + chainId={1} +/> +```` 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 --- <ComponentPreview diff --git a/apps/www/content/docs/components/erc721-owner-of.mdx b/apps/www/content/docs/components/erc721-owner-of.mdx index 9e0600e..27bd0e5 100644 --- a/apps/www/content/docs/components/erc721-owner-of.mdx +++ b/apps/www/content/docs/components/erc721-owner-of.mdx @@ -2,6 +2,8 @@ title: ERC721 Owner Of description: Display the owner of an ERC721 token component: true +wagmi: + link: https://wagmi.sh/react/hooks/useContractRead --- <ComponentPreview @@ -34,6 +36,10 @@ component: true <Steps> +<Step>Install the following shadcn/ui components:</Step> + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + <Step>Copy and paste the following code into your project.</Step> <ComponentSource name="erc721-owner-of" /> @@ -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 -<Erc20owner address="0x0000000000000000000000000000000000000000" /> +<Erc721OwnerOf + tokenId={1} + address="0x0000000000000000000000000000000000000000" +/> ``` 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 --- <ComponentPreview @@ -34,6 +36,10 @@ component: true <Steps> +<Step>Install the following shadcn/ui components:</Step> + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + <Step>Copy and paste the following code into your project.</Step> <ComponentSource name="erc721-symbol" /> @@ -47,9 +53,9 @@ component: true ## Usage ```tsx -import { Erc20Symbol } from "@/components/buidl/erc721-symbol" +import { Erc721Symbol } from "@/components/buidl/erc721-symbol" ``` ```tsx -<Erc20Symbol address="0x0000000000000000000000000000000000000000" /> +<Erc721Symbol address="0x0000000000000000000000000000000000000000" /> ``` 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 --- <ComponentPreview @@ -34,6 +36,10 @@ component: true <Steps> +<Step>Install the following shadcn/ui components:</Step> + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + <Step>Copy and paste the following code into your project.</Step> <ComponentSource name="erc721-token-uri" /> @@ -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 -<Erc721Name address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB" chainId={1} /> +<Erc721TokenUri + tokenId={1} + address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB" + chainId={1} +/> ``` 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 --- <ComponentPreview @@ -34,6 +36,10 @@ component: true <Steps> +<Step>Install the following shadcn/ui components:</Step> + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + <Step>Copy and paste the following code into your project.</Step> <ComponentSource name="erc721-total-supply" /> @@ -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 -<Erc721Name address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB" chainId={1} /> +<Erc721TotalSupply + address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB" + chainId={1} +/> ``` 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: <Steps> +<Step>Install the following shadcn/ui components:</Step> + +- [Skeleton](https://ui.shadcn.com/docs/components/skeleton) + <Step>Copy and paste the following code into your project.</Step> <ComponentSource name="nonce" /> @@ -49,9 +53,10 @@ wagmi: ## Usage ```tsx -import { AccountNonce } from "@/components/buidl/nonce" +import { Nonce } from "@/registry/default/buidl/nonce" ``` ```tsx -<AccountNonce /> +<Nonce /> +<Nonce chainId={1} /> ``` 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 -<SignMessageButton message={message} /> +<SignMessageButton onSuccess={setSignature} message={message} /> ``` 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 <div className={cn(\"break-words text-sm font-medium text-red-500\")}>\n {error?.message ?? \"Error while fetching ERC20 data\"}\n </div>\n )\n}\n\nexport type Erc20TotalSupplyProps = React.HTMLAttributes<HTMLSpanElement> & {\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 <Skeleton className=\"h-6 w-12\" {...props} />\n }\n\n if (isErrorTotalSupply || isErrorDecimals) {\n return <ErrorMessage error={errorTotalSupply ?? errorDecimals} />\n }\n\n if (totalSupply === undefined || decimals === undefined) {\n return null\n }\n\n return (\n <span ref={ref} {...props}>\n {trimFormattedBalance(formatUnits(totalSupply, decimals), formatDecimals)}\n </span>\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 <div className={cn(\"break-words text-sm font-medium text-red-500\")}>\n {error?.message ?? \"Error while fetching ERC20 data\"}\n </div>\n )\n}\n\nexport type Erc20TotalSupplyProps = React.HTMLAttributes<HTMLSpanElement> & {\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 <Skeleton className=\"h-6 w-20\" {...props} />\n }\n\n if (isErrorTotalSupply || isErrorDecimals) {\n return <ErrorMessage error={errorTotalSupply ?? errorDecimals} />\n }\n\n if (totalSupply === undefined || decimals === undefined) {\n return null\n }\n\n return (\n <span ref={ref} {...props}>\n {trimFormattedBalance(formatUnits(totalSupply, decimals), formatDecimals)}\n </span>\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<ButtonProps, \"onCick\"> {\n message: string\n onSuccess?: (signature: string) => void\n}\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n return (\n <div className={cn(\"break-words text-sm font-medium text-red-500\")}>\n {error?.message ?? \"Error while signing message\"}\n </div>\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 <Button\n ref={ref}\n disabled={isLoading || disabled}\n onClick={() => signMessage()}\n className={className}\n {...props}\n >\n {isLoading ? \"Check Wallet\" : children ?? \"Sign Message\"}\n </Button>\n {isError && <ErrorMessage error={error} />}\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<ButtonProps, \"onCick\"> {\n message: string\n onSuccess?: (signature: string) => void\n}\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n return (\n <div className={cn(\"break-words text-sm font-medium text-red-500\")}>\n {error?.message ?? \"Error while signing message\"}\n </div>\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 <Button\n ref={ref}\n disabled={disabled || isLoading || message.length === 0}\n onClick={() => signMessage()}\n className={className}\n {...props}\n >\n {isLoading ? \"Check Wallet\" : children ?? \"Sign Message\"}\n </Button>\n {isError && <ErrorMessage error={error} />}\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<HTMLDivElement> & {\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 <div\n ref={ref}\n className={cn(\"flex flex-col items-center\", className)}\n {...props}\n >\n {(isLoading || isSuccess) && (\n <>\n {isLoading && \"Processing transaction...\"}\n {isSuccess && \"Transaction successful!\"}\n {children}\n </>\n )}\n </div>\n {isError && (\n <div className=\"break-words font-medium text-red-500\">\n Error: {error?.message ?? \"Error processing transaction\"}\n </div>\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 <div className={cn(\"break-words text-sm font-medium text-red-500\")}>\n {error?.message ?? \"Error while fetching ERC721 data\"}\n </div>\n )\n}\n\nconst TransactionStatus = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & {\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 <Skeleton className={cn(\"h-6 w-52\", className)} {...props} />\n\n if (isError) return <ErrorMessage error={error} />\n\n return (\n <>\n <div\n ref={ref}\n className={cn(\"flex flex-col items-center\", className)}\n {...props}\n >\n {(isLoading || isSuccess) && (\n <>\n {isLoading && \"Processing transaction...\"}\n {isSuccess && \"Transaction successful!\"}\n {children}\n </>\n )}\n </div>\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 <Skeleton className="h-6 w-12" {...props} /> + return <Skeleton className="h-6 w-20" {...props} /> } 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< <> <Button ref={ref} - disabled={isLoading || disabled} + disabled={disabled || isLoading || message.length === 0} onClick={() => signMessage()} className={className} {...props} diff --git a/apps/www/registry/default/buidl/transaction-status.tsx b/apps/www/registry/default/buidl/transaction-status.tsx index 70e0c52..3c12894 100644 --- a/apps/www/registry/default/buidl/transaction-status.tsx +++ b/apps/www/registry/default/buidl/transaction-status.tsx @@ -4,6 +4,15 @@ import * as React from "react" import { useChainId, useWaitForTransaction } from "wagmi" import { cn } from "@/lib/utils" +import { Skeleton } from "@/registry/default/ui/skeleton" + +const ErrorMessage = ({ error }: { error: Error | null }) => { + return ( + <div className={cn("break-words text-sm font-medium text-red-500")}> + {error?.message ?? "Error while fetching ERC721 data"} + </div> + ) +} const TransactionStatus = React.forwardRef< HTMLDivElement, @@ -14,10 +23,16 @@ const TransactionStatus = React.forwardRef< >(({ chainId: selectedChainId, children, className, hash, ...props }, ref) => { const currentChainId = useChainId() - const { isLoading, isSuccess, isError, error } = useWaitForTransaction({ - hash: hash, - chainId: selectedChainId ?? currentChainId, - }) + const { isLoading, isSuccess, isError, error, isFetching } = + useWaitForTransaction({ + hash: hash, + chainId: selectedChainId ?? currentChainId, + }) + + if (isFetching) + return <Skeleton className={cn("h-6 w-52", className)} {...props} /> + + if (isError) return <ErrorMessage error={error} /> return ( <> @@ -34,11 +49,6 @@ const TransactionStatus = React.forwardRef< </> )} </div> - {isError && ( - <div className="break-words font-medium text-red-500"> - Error: {error?.message ?? "Error processing transaction"} - </div> - )} </> ) }) diff --git a/apps/www/registry/default/example/erc20-total-supply-demo.tsx b/apps/www/registry/default/example/erc20-total-supply-demo.tsx index b2d7f47..097c690 100644 --- a/apps/www/registry/default/example/erc20-total-supply-demo.tsx +++ b/apps/www/registry/default/example/erc20-total-supply-demo.tsx @@ -1,6 +1,6 @@ import { Erc20TotalSupply } from "@/registry/default/buidl/erc20/erc20-total-supply" -export default function Erc20SymbolDemo() { +export default function Erc20TotalSupplyDemo() { return ( <div className="flex flex-col items-center gap-4 text-center"> <h3 className="text-lg font-bold">Default (WETH)</h3> diff --git a/apps/www/registry/default/ui/skeleton.tsx b/apps/www/registry/default/ui/skeleton.tsx index f7855b9..11ca1b5 100644 --- a/apps/www/registry/default/ui/skeleton.tsx +++ b/apps/www/registry/default/ui/skeleton.tsx @@ -7,7 +7,7 @@ function Skeleton({ return ( <div className={cn( - "animate-pulse rounded-md bg-neutral-300 dark:bg-muted", + "animate-pulse rounded-md bg-neutral-300/90 dark:bg-neutral-500/90", className )} {...props}