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< <>