Skip to content

Commit 8ae6440

Browse files
marthendalnunesmarthendalnunes
committed
refactor: components docs
1 parent b7216df commit 8ae6440

25 files changed

+132
-44
lines changed

‎apps/www/content/docs/components/balance.mdx

+5-8
Original file line numberDiff line numberDiff line change
@@ -53,15 +53,12 @@ wagmi:
5353
## Usage
5454

5555
```tsx
56-
import {
57-
GasPrice,
58-
MaxFeePerGas,
59-
MaxPriorityFeePerGas,
60-
} from "@/registry/default/buidl/balance"
56+
import { Balance } from "@/registry/default/buidl/balance"
6157
```
6258

6359
```tsx
64-
<GasPrice />
65-
<MaxFeePerGas />
66-
<MaxPriorityFeePerGas />
60+
<Balance />
61+
<Balance
62+
address="0x0000000000000000000000000000000000000000"
63+
/>
6764
```

‎apps/www/content/docs/components/blockie.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: Blockie
33
description: Display an account blockie identicon.
44
component: true
5+
wagmi:
6+
link: https://wagmi.sh/react/hooks/useAccount
57
---
68

79
<ComponentPreview

‎apps/www/content/docs/components/ens-avatar.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,5 @@ import { EnsAvatar } from "@/components/buidl/ens-avatar"
6262

6363
```tsx
6464
<EnsAvatar address="0x0000000000000000000000000000000000000000" />
65+
<EnsAvatar name="vitalik.eth" />
6566
```

‎apps/www/content/docs/components/ens-name.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -57,5 +57,6 @@ import { EnsName } from "@/components/buidl/ens-name"
5757
```
5858

5959
```tsx
60+
<EnsName />
6061
<EnsName address="0x0000000000000000000000000000000000000000" />
6162
```

‎apps/www/content/docs/components/erc20-balance.mdx

+4
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ wagmi:
3636

3737
<Steps>
3838

39+
<Step>Install the following shadcn/ui components:</Step>
40+
41+
- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
42+
3943
<Step>Copy and paste the following code into your project.</Step>
4044

4145
<ComponentSource name="erc20-balance" />

‎apps/www/content/docs/components/erc20-decimals.mdx

+4
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ wagmi:
3636

3737
<Steps>
3838

39+
<Step>Install the following shadcn/ui components:</Step>
40+
41+
- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
42+
3943
<Step>Copy and paste the following code into your project.</Step>
4044

4145
<ComponentSource name="erc20-decimals" />

‎apps/www/content/docs/components/erc20-name.mdx

+6
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: ERC20 Name
33
description: Display the name of an ERC20 token
44
component: true
5+
wagmi:
6+
link: https://wagmi.sh/react/hooks/useContractRead
57
---
68

79
<ComponentPreview
@@ -34,6 +36,10 @@ component: true
3436

3537
<Steps>
3638

39+
<Step>Install the following shadcn/ui components:</Step>
40+
41+
- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
42+
3743
<Step>Copy and paste the following code into your project.</Step>
3844

3945
<ComponentSource name="erc20-name" />

‎apps/www/content/docs/components/erc20-symbol.mdx

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
---
2-
title: ENS Symbol
2+
title: ERC20 Symbol
33
description: Display the symbol of an ERC20 token
44
component: true
5+
wagmi:
6+
link: https://wagmi.sh/react/hooks/useContractRead
57
---
68

79
<ComponentPreview
@@ -34,6 +36,10 @@ component: true
3436

3537
<Steps>
3638

39+
<Step>Install the following shadcn/ui components:</Step>
40+
41+
- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
42+
3743
<Step>Copy and paste the following code into your project.</Step>
3844

3945
<ComponentSource name="erc20-symbol" />

‎apps/www/content/docs/components/erc20-total-supply.mdx

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
---
2-
title: ENS Symbol
3-
description: Display the symbol of an ERC20 token
2+
title: ERC20 Total Supply
3+
description: Display the total supply of an ERC20 token.
44
component: true
5+
wagmi:
6+
link: https://wagmi.sh/react/hooks/useContractRead
57
---
68

79
<ComponentPreview
@@ -34,6 +36,10 @@ component: true
3436

3537
<Steps>
3638

39+
<Step>Install the following shadcn/ui components:</Step>
40+
41+
- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
42+
3743
<Step>Copy and paste the following code into your project.</Step>
3844

3945
<ComponentSource name="erc20-total-supply" />
@@ -51,5 +57,5 @@ import { Erc20Symbol } from "@/components/buidl/erc20-total-supply"
5157
```
5258

5359
```tsx
54-
<Erc20Symbol address="0x0000000000000000000000000000000000000000" />
60+
<Erc20TotalSupply address="0x0000000000000000000000000000000000000000" />
5561
```

‎apps/www/content/docs/components/erc721-metadata.mdx

+15-5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: ERC721 Metadata
33
description: Display the metadata of an ERC721 token.
44
component: true
5+
wagmi:
6+
link: https://wagmi.sh/react/hooks/useContractRead
57
---
68

79
<ComponentPreview
@@ -34,6 +36,10 @@ component: true
3436

3537
<Steps>
3638

39+
<Step>Install the following shadcn/ui components:</Step>
40+
41+
- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
42+
3743
<Step>Copy and paste the following code into your project.</Step>
3844

3945
<ComponentSource name="erc721-metadata" />
@@ -46,10 +52,14 @@ component: true
4652

4753
## Usage
4854

49-
```tsx
50-
import { Erc721Name } from "@/registry/default/buidl/erc721/erc721-metadata"
51-
```
55+
````tsx
56+
import { Erc721MetadataImage } from "@/registry/default/buidl/erc721/erc721-metadata"```
5257
5358
```tsx
54-
<Erc721Name address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB" chainId={1} />
55-
```
59+
<Erc721MetadataImage
60+
className="mt-1 h-[250px] w-[250px]"
61+
address="0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D"
62+
tokenId={1}
63+
chainId={1}
64+
/>
65+
````

‎apps/www/content/docs/components/erc721-name.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: ERC721 Name
33
description: Display the name of an ERC721 token
44
component: true
5+
wagmi:
6+
link: https://wagmi.sh/react/hooks/useContractRead
57
---
68

79
<ComponentPreview

‎apps/www/content/docs/components/erc721-owner-of.mdx

+11-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: ERC721 Owner Of
33
description: Display the owner of an ERC721 token
44
component: true
5+
wagmi:
6+
link: https://wagmi.sh/react/hooks/useContractRead
57
---
68

79
<ComponentPreview
@@ -34,6 +36,10 @@ component: true
3436

3537
<Steps>
3638

39+
<Step>Install the following shadcn/ui components:</Step>
40+
41+
- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
42+
3743
<Step>Copy and paste the following code into your project.</Step>
3844

3945
<ComponentSource name="erc721-owner-of" />
@@ -47,9 +53,12 @@ component: true
4753
## Usage
4854

4955
```tsx
50-
import { Erc20owner } from "@/components/buidl/erc721-owner-of"
56+
import { Erc721OwnerOf } from "@/registry/default/buidl/erc721/erc721-owner-of"
5157
```
5258

5359
```tsx
54-
<Erc20owner address="0x0000000000000000000000000000000000000000" />
60+
<Erc721OwnerOf
61+
tokenId={1}
62+
address="0x0000000000000000000000000000000000000000"
63+
/>
5564
```

‎apps/www/content/docs/components/erc721-symbol.mdx

+8-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: ERC721 Symbol
33
description: Display the symbol of an ERC721 token
44
component: true
5+
wagmi:
6+
link: https://wagmi.sh/react/hooks/useContractRead
57
---
68

79
<ComponentPreview
@@ -34,6 +36,10 @@ component: true
3436

3537
<Steps>
3638

39+
<Step>Install the following shadcn/ui components:</Step>
40+
41+
- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
42+
3743
<Step>Copy and paste the following code into your project.</Step>
3844

3945
<ComponentSource name="erc721-symbol" />
@@ -47,9 +53,9 @@ component: true
4753
## Usage
4854

4955
```tsx
50-
import { Erc20Symbol } from "@/components/buidl/erc721-symbol"
56+
import { Erc721Symbol } from "@/components/buidl/erc721-symbol"
5157
```
5258

5359
```tsx
54-
<Erc20Symbol address="0x0000000000000000000000000000000000000000" />
60+
<Erc721Symbol address="0x0000000000000000000000000000000000000000" />
5561
```

‎apps/www/content/docs/components/erc721-token-uri.mdx

+12-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: ERC721 Token URI
33
description: Display the token uri of an ERC721 token
44
component: true
5+
wagmi:
6+
link: https://wagmi.sh/react/hooks/useContractRead
57
---
68

79
<ComponentPreview
@@ -34,6 +36,10 @@ component: true
3436

3537
<Steps>
3638

39+
<Step>Install the following shadcn/ui components:</Step>
40+
41+
- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
42+
3743
<Step>Copy and paste the following code into your project.</Step>
3844

3945
<ComponentSource name="erc721-token-uri" />
@@ -47,9 +53,13 @@ component: true
4753
## Usage
4854

4955
```tsx
50-
import { Erc721Name } from "@/registry/default/buidl/erc721/erc721-token-uri"
56+
import { Erc721TokenUri } from "@/registry/default/buidl/erc721/erc721-token-uri"
5157
```
5258

5359
```tsx
54-
<Erc721Name address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB" chainId={1} />
60+
<Erc721TokenUri
61+
tokenId={1}
62+
address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB"
63+
chainId={1}
64+
/>
5565
```

‎apps/www/content/docs/components/erc721-total-supply.mdx

+11-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: ERC721 Total Supply
33
description: Display the total supply of an ERC721 token
44
component: true
5+
wagmi:
6+
link: https://wagmi.sh/react/hooks/useContractRead
57
---
68

79
<ComponentPreview
@@ -34,6 +36,10 @@ component: true
3436

3537
<Steps>
3638

39+
<Step>Install the following shadcn/ui components:</Step>
40+
41+
- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
42+
3743
<Step>Copy and paste the following code into your project.</Step>
3844

3945
<ComponentSource name="erc721-total-supply" />
@@ -47,9 +53,12 @@ component: true
4753
## Usage
4854

4955
```tsx
50-
import { Erc721Name } from "@/registry/default/buidl/erc721/erc721-total-supply"
56+
import { Erc721TotalSupply } from "@/registry/default/buidl/erc721/erc721-total-supply"
5157
```
5258

5359
```tsx
54-
<Erc721Name address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB" chainId={1} />
60+
<Erc721TotalSupply
61+
address="0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB"
62+
chainId={1}
63+
/>
5564
```

‎apps/www/content/docs/components/nonce.mdx

+7-2
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ wagmi:
3636

3737
<Steps>
3838

39+
<Step>Install the following shadcn/ui components:</Step>
40+
41+
- [Skeleton](https://ui.shadcn.com/docs/components/skeleton)
42+
3943
<Step>Copy and paste the following code into your project.</Step>
4044

4145
<ComponentSource name="nonce" />
@@ -49,9 +53,10 @@ wagmi:
4953
## Usage
5054

5155
```tsx
52-
import { AccountNonce } from "@/components/buidl/nonce"
56+
import { Nonce } from "@/registry/default/buidl/nonce"
5357
```
5458

5559
```tsx
56-
<AccountNonce />
60+
<Nonce />
61+
<Nonce chainId={1} />
5762
```

‎apps/www/content/docs/components/sign-message-button.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,5 +57,5 @@ import { SignMessageButton } from "@/registry/default/buidl/sign-message-button"
5757
```
5858

5959
```tsx
60-
<SignMessageButton message={message} />
60+
<SignMessageButton onSuccess={setSignature} message={message} />
6161
```

‎apps/www/public/registry/styles/default/erc20-total-supply.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"files": [
77
{
88
"name": "erc20-total-supply.tsx",
9-
"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"
9+
"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"
1010
}
1111
],
1212
"folder": "erc20",

‎apps/www/public/registry/styles/default/sign-message-button.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"files": [
77
{
88
"name": "sign-message-button.tsx",
9-
"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"
9+
"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"
1010
}
1111
],
1212
"type": "components:buidl"

‎apps/www/public/registry/styles/default/transaction-status.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"files": [
77
{
88
"name": "transaction-status.tsx",
9-
"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"
9+
"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"
1010
}
1111
],
1212
"type": "components:buidl"

‎apps/www/registry/default/buidl/erc20/erc20-total-supply.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ const Erc20TotalSupply = React.forwardRef<
8787
})
8888

8989
if (isLoadingTotalSupply || isLoadingDecimals) {
90-
return <Skeleton className="h-6 w-12" {...props} />
90+
return <Skeleton className="h-6 w-20" {...props} />
9191
}
9292

9393
if (isErrorTotalSupply || isErrorDecimals) {

0 commit comments

Comments
 (0)