refactor: standardize components

turbo-eth · Nov 30, 2023 · 684dc84 · 684dc84
1 parent 8ae6440
commit 684dc84
Show file tree

Hide file tree

Showing 35 changed files with 218 additions and 157 deletions.
diff --git a/apps/www/content/docs/components/nonce.mdx b/apps/www/content/docs/components/nonce.mdx
@@ -59,4 +59,5 @@ import { Nonce } from "@/registry/default/buidl/nonce"
 ```tsx
 <Nonce />
 <Nonce chainId={1} />
+<Nonce address="0x761d584f1C2d43cBc3F42ECd739701a36dFFAa31" />
 ```
diff --git a/apps/www/public/registry/styles/default/address.json b/apps/www/public/registry/styles/default/address.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "address.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Copy } from \"lucide-react\"\nimport { useAccount, useNetwork, type Address as AddressType } from \"wagmi\"\nimport { mainnet } from \"wagmi/chains\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/default/ui/use-toast\"\n\nexport interface AddressProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"children\"> {\n  address?: AddressType\n  truncate?: boolean\n  truncateAmount?: number\n  link?: boolean\n  copy?: boolean\n}\n\nconst AddressCopy = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement> & {\n    address: AddressType\n  }\n>(({ address, className, children, ...props }, ref) => {\n  return (\n    <span\n      ref={ref}\n      className={cn(\"flex cursor-pointer items-center gap-x-2\", className)}\n      onClick={async () => {\n        await navigator.clipboard.writeText(address)\n        toast({\n          title: \"Copied address\",\n          description: \"The address has been copied to your clipboard.\",\n        })\n      }}\n      {...props}\n    >\n      {children ?? address}\n      <span className=\"sr-only\">Copy address</span>\n      <Copy size={12} />\n    </span>\n  )\n})\n\nAddressCopy.displayName = \"AddressCopy\"\n\nconst AddressLink = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement> & {\n    address: AddressType\n  }\n>(({ address, className, children, ...props }, ref) => {\n  const { chain: currentChain } = useNetwork()\n\n  // Use mainnet as default chain\n  const chain = currentChain ?? mainnet\n\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        \"cursor-pointer underline-offset-2 hover:underline\",\n        className\n      )}\n      {...props}\n    >\n      {chain.blockExplorers?.default.url ? (\n        <a\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          href={`${chain.blockExplorers?.default.url}/address/${address}`}\n        >\n          {children ?? address}\n        </a>\n      ) : (\n        <>{children ?? address}</>\n      )}\n    </span>\n  )\n})\n\nAddressLink.displayName = \"AddressLink\"\n\nconst Address = React.forwardRef<HTMLElement, AddressProps>(\n  (\n    { address, className, truncate, truncateAmount = 4, link, copy, ...props },\n    ref\n  ) => {\n    const { address: connectedAddress } = useAccount()\n\n    const selectedAddress = address ?? connectedAddress\n\n    const formattedAddress = React.useMemo(\n      () =>\n        truncate\n          ? `${selectedAddress?.slice(\n              0,\n              truncateAmount + 2\n            )}...${selectedAddress?.slice(-Number(truncateAmount))}`\n          : selectedAddress,\n      [selectedAddress, truncate, truncateAmount]\n    )\n\n    if (!selectedAddress) {\n      return null\n    }\n\n    if (link) {\n      return (\n        <AddressLink\n          ref={ref}\n          address={selectedAddress}\n          className={className}\n          {...props}\n        >\n          {copy ? (\n            <AddressCopy address={selectedAddress}>\n              {formattedAddress}\n            </AddressCopy>\n          ) : (\n            <>{formattedAddress}</>\n          )}\n        </AddressLink>\n      )\n    }\n\n    if (copy) {\n      return (\n        <AddressCopy ref={ref} address={selectedAddress} {...props}>\n          {formattedAddress}\n        </AddressCopy>\n      )\n    }\n\n    return (\n      <span ref={ref} className={className} {...props}>\n        {formattedAddress}\n      </span>\n    )\n  }\n)\n\nAddress.displayName = \"Address\"\n\nexport { Address, AddressCopy, AddressLink }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Copy } from \"lucide-react\"\nimport { useAccount, useNetwork, type Address as AddressType } from \"wagmi\"\nimport { mainnet } from \"wagmi/chains\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/default/ui/use-toast\"\n\nexport interface AddressProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"children\"> {\n  address?: AddressType\n  truncate?: boolean\n  truncateAmount?: number\n  link?: boolean\n  copy?: boolean\n}\n\nconst AddressCopy = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & {\n    address: AddressType\n  }\n>(({ address, className, children, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex cursor-pointer items-center gap-x-2\", className)}\n      onClick={async () => {\n        await navigator.clipboard.writeText(address)\n        toast({\n          title: \"Copied address\",\n          description: \"The address has been copied to your clipboard.\",\n        })\n      }}\n      {...props}\n    >\n      {children ?? address}\n      <span className=\"sr-only\">Copy address</span>\n      <Copy size={12} />\n    </div>\n  )\n})\n\nAddressCopy.displayName = \"AddressCopy\"\n\nconst AddressLink = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & {\n    address: AddressType\n  }\n>(({ address, className, children, ...props }, ref) => {\n  const { chain: currentChain } = useNetwork()\n\n  // Use mainnet as default chain\n  const chain = currentChain ?? mainnet\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"cursor-pointer underline-offset-2 hover:underline\",\n        className\n      )}\n      {...props}\n    >\n      {chain.blockExplorers?.default.url ? (\n        <a\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          href={`${chain.blockExplorers?.default.url}/address/${address}`}\n        >\n          {children ?? address}\n        </a>\n      ) : (\n        <>{children ?? address}</>\n      )}\n    </div>\n  )\n})\n\nAddressLink.displayName = \"AddressLink\"\n\nconst Address = React.forwardRef<HTMLDivElement, AddressProps>(\n  (\n    { address, className, truncate, truncateAmount = 4, link, copy, ...props },\n    ref\n  ) => {\n    const { address: connectedAddress } = useAccount()\n\n    const selectedAddress = address ?? connectedAddress\n\n    const formattedAddress = React.useMemo(\n      () =>\n        truncate\n          ? `${selectedAddress?.slice(\n              0,\n              truncateAmount + 2\n            )}...${selectedAddress?.slice(-Number(truncateAmount))}`\n          : selectedAddress,\n      [selectedAddress, truncate, truncateAmount]\n    )\n\n    if (!selectedAddress) {\n      return null\n    }\n\n    if (link) {\n      return (\n        <AddressLink\n          ref={ref}\n          address={selectedAddress}\n          className={className}\n          {...props}\n        >\n          {copy ? (\n            <AddressCopy address={selectedAddress}>\n              {formattedAddress}\n            </AddressCopy>\n          ) : (\n            <>{formattedAddress}</>\n          )}\n        </AddressLink>\n      )\n    }\n\n    if (copy) {\n      return (\n        <AddressCopy ref={ref} address={selectedAddress} {...props}>\n          {formattedAddress}\n        </AddressCopy>\n      )\n    }\n\n    return (\n      <span ref={ref} className={className} {...props}>\n        {formattedAddress}\n      </span>\n    )\n  }\n)\n\nAddress.displayName = \"Address\"\n\nexport { Address, AddressCopy, AddressLink }\n"
     }
   ],
   "type": "components:buidl"

diff --git a/apps/www/public/registry/styles/default/blockie.json b/apps/www/public/registry/styles/default/blockie.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "blockie.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { VariantProps, cva } from \"class-variance-authority\"\nimport makeBlockie from \"ethereum-blockies-base64\"\nimport { useAccount } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst blockieVariants = cva(\"inline-block\", {\n  variants: {\n    variant: {\n      default:\n        \"rounded-full border-2 border-primary-foreground shadow-sm hover:shadow-md\",\n      curved:\n        \"rounded-md border-2 border-primary-foreground shadow-sm hover:shadow-md\",\n    },\n    size: {\n      default: \"h-10 w-10\",\n      sm: \"h-7 w-7\",\n      lg: \"h-12 w-12\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n})\n\nexport type BlockieProps = React.HTMLAttributes<HTMLImageElement> &\n  VariantProps<typeof blockieVariants> & {\n    address?: `0x${string}`\n  }\n\nexport const Blockie = ({\n  className,\n  address,\n  variant,\n  size,\n  ...props\n}: BlockieProps) => {\n  const { address: connectedAddress } = useAccount()\n  const selectedAddress = address ?? connectedAddress\n\n  if (!selectedAddress) return null\n\n  return (\n    <img\n      alt={`${address} blockie`}\n      className={cn(blockieVariants({ variant, size, className }))}\n      src={makeBlockie(selectedAddress)}\n      {...props}\n    />\n  )\n}\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { VariantProps, cva } from \"class-variance-authority\"\nimport makeBlockie from \"ethereum-blockies-base64\"\nimport { useAccount } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst blockieVariants = cva(\"inline-block\", {\n  variants: {\n    variant: {\n      default:\n        \"rounded-full border-2 border-primary-foreground shadow-sm hover:shadow-md\",\n      curved:\n        \"rounded-md border-2 border-primary-foreground shadow-sm hover:shadow-md\",\n    },\n    size: {\n      default: \"h-10 w-10\",\n      sm: \"h-7 w-7\",\n      lg: \"h-12 w-12\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n})\n\nexport type BlockieProps = React.HTMLAttributes<HTMLImageElement> &\n  VariantProps<typeof blockieVariants> & {\n    address?: `0x${string}`\n  }\n\nconst Blockie = React.forwardRef<HTMLImageElement, BlockieProps>(\n  ({ className, address, variant, size, ...props }, ref) => {\n    const [isLoading, setIsLoading] = React.useState(true)\n    const { address: connectedAddress, isConnecting } = useAccount()\n    const selectedAddress = address ?? connectedAddress ?? \"0x0\"\n\n    return (\n      <>\n        {isLoading || isConnecting ? (\n          <Skeleton\n            className={cn(blockieVariants({ variant, size, className }))}\n            {...props}\n          />\n        ) : null}\n        <img\n          ref={ref}\n          alt={`${address} blockie`}\n          onLoad={() => setIsLoading(false)}\n          className={cn(\n            blockieVariants({ variant, size, className }),\n            (isLoading || isConnecting) && \"hidden\"\n          )}\n          src={makeBlockie(selectedAddress)}\n          {...props}\n        />\n      </>\n    )\n  }\n)\n\nBlockie.displayName = \"Blockie\"\n\nexport { Blockie }\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
@@ -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    <div className={cn(\"break-words text-sm font-medium text-red-500\")}>\n      {error?.message ?? \"Error while fetching fee data\"}\n    </div>\n  )\n}\n\ninterface EnsAddressProps extends Omit<AddressProps, \"address\"> {\n  name: string\n}\n\nconst EnsAddress = React.forwardRef<HTMLSpanElement, EnsAddressProps>(\n  ({ name, className, ...props }, ref) => {\n    const { data, isLoading, isSuccess, isError, error } = useEnsAddress({\n      chainId: 1,\n      name,\n    })\n\n    if (isLoading) {\n      return (\n        <Skeleton\n          className={cn(\n            \"h-6\",\n            props.truncate ? \"w-32\" : \"w-[420px]\",\n            className\n          )}\n          {...props}\n        />\n      )\n    }\n\n    if (isSuccess && data) {\n      return (\n        <Address ref={ref} address={data} className={className} {...props} />\n      )\n    }\n\n    if (isError) {\n      return <ErrorMessage error={error} />\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 { 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 fee data\"}\n    </div>\n  )\n}\n\ninterface EnsAddressProps extends Omit<AddressProps, \"address\"> {\n  name: string\n}\n\nconst EnsAddress = React.forwardRef<HTMLDivElement, EnsAddressProps>(\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 <ErrorMessage error={error} />\n    }\n\n    if (isLoading || !data) {\n      return (\n        <Skeleton\n          className={cn(\n            \"h-6\",\n            props.truncate ? \"w-32\" : \"w-[420px]\",\n            className\n          )}\n          {...props}\n        />\n      )\n    }\n\n    if (isSuccess && data) {\n      return (\n        <Address ref={ref} address={data} className={className} {...props} />\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-avatar.json b/apps/www/public/registry/styles/default/ens-avatar.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "ens-avatar.tsx",
-      "content": "\"useClient\"\n\nimport * as React from \"react\"\nimport { VariantProps, cva } from \"class-variance-authority\"\nimport { useAccount, useEnsAvatar, useEnsName } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Blockie } from \"@/registry/default/buidl/blockie\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst ensAvatarVariants = cva(\"inline-block\", {\n  variants: {\n    variant: {\n      default:\n        \"rounded-full border-2 border-primary-foreground shadow-sm hover:shadow-md\",\n      curved:\n        \"rounded-md border-2 border-primary-foreground shadow-sm hover:shadow-md\",\n    },\n    size: {\n      default: \"h-10 w-10\",\n      sm: \"h-7 w-7\",\n      lg: \"h-12 w-12\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n})\n\ninterface EnsAvatarProps\n  extends React.HTMLAttributes<HTMLImageElement>,\n    VariantProps<typeof ensAvatarVariants> {\n  address?: `0x${string}`\n  name?: string\n  displayLoading?: boolean\n}\n\nconst EnsAvatar = React.forwardRef<HTMLImageElement, EnsAvatarProps>(\n  (\n    {\n      className,\n      address,\n      name,\n      variant,\n      size,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { address: connectedAddress } = useAccount()\n    const selectedAddress = address ?? connectedAddress\n\n    const { data: dataEnsName, isLoading: isLoadingEnsName } = useEnsName({\n      chainId: 1,\n      address: selectedAddress,\n      enabled: !name && !!selectedAddress,\n    })\n\n    const ensName = name ?? dataEnsName\n\n    const { data: dataEnsAvatar, isLoading: isLoadingEnsAvatar } = useEnsAvatar(\n      {\n        chainId: 1,\n        name: ensName,\n        enabled: !!ensName,\n      }\n    )\n\n    if (\n      displayLoading &&\n      (isLoadingEnsName || isLoadingEnsAvatar || !selectedAddress)\n    ) {\n      return (\n        <Skeleton\n          className={cn(\n            \"h-10 w-10\",\n            ensAvatarVariants({ variant, size }),\n            className\n          )}\n        />\n      )\n    }\n\n    if (dataEnsAvatar) {\n      return (\n        <img\n          ref={ref}\n          alt={`${selectedAddress} EnsAvatar`}\n          className={cn(ensAvatarVariants({ variant, size }), className)}\n          src={dataEnsAvatar}\n          {...props}\n        />\n      )\n    }\n\n    return (\n      <Blockie\n        address={selectedAddress}\n        className={cn(\"w-10\", ensAvatarVariants({ variant, size }), className)}\n      />\n    )\n  }\n)\n\nEnsAvatar.displayName = \"EnsAvatar\"\n\nexport { EnsAvatar }\n"
+      "content": "\"useClient\"\n\nimport * as React from \"react\"\nimport { VariantProps, cva } from \"class-variance-authority\"\nimport { useAccount, useEnsAvatar, useEnsName } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Blockie } from \"@/registry/default/buidl/blockie\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst ensAvatarVariants = cva(\"inline-block\", {\n  variants: {\n    variant: {\n      default:\n        \"rounded-full border-2 border-primary-foreground shadow-sm hover:shadow-md\",\n      curved:\n        \"rounded-md border-2 border-primary-foreground shadow-sm hover:shadow-md\",\n    },\n    size: {\n      default: \"h-10 w-10\",\n      sm: \"h-7 w-7\",\n      lg: \"h-12 w-12\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n})\n\ninterface EnsAvatarProps\n  extends React.HTMLAttributes<HTMLImageElement>,\n    VariantProps<typeof ensAvatarVariants> {\n  address?: `0x${string}`\n  name?: string\n  displayLoading?: boolean\n}\n\nconst EnsAvatar = React.forwardRef<HTMLImageElement, EnsAvatarProps>(\n  (\n    {\n      className,\n      address,\n      name,\n      variant,\n      size,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const [isLoadingImg, setIsLoadingImg] = React.useState(true)\n\n    const { address: connectedAddress } = useAccount()\n    const selectedAddress = address ?? connectedAddress\n\n    const { data: dataEnsName, isLoading: isLoadingEnsName } = useEnsName({\n      chainId: 1,\n      address: selectedAddress,\n      enabled: !name && !!selectedAddress,\n    })\n\n    const ensName = name ?? dataEnsName\n\n    const { data: dataEnsAvatar, isLoading: isLoadingEnsAvatar } = useEnsAvatar(\n      {\n        chainId: 1,\n        name: ensName,\n        enabled: !!ensName,\n      }\n    )\n\n    if (\n      displayLoading &&\n      (isLoadingEnsName || isLoadingEnsAvatar || !selectedAddress)\n    ) {\n      return (\n        <Skeleton\n          className={cn(\n            \"h-10 w-10\",\n            ensAvatarVariants({ variant, size, className })\n          )}\n        />\n      )\n    }\n\n    if (dataEnsAvatar) {\n      return (\n        <>\n          {isLoadingImg ? (\n            <Skeleton\n              className={cn(ensAvatarVariants({ variant, size, className }))}\n              {...props}\n            />\n          ) : null}\n          <img\n            ref={ref}\n            alt={`${selectedAddress} EnsAvatar`}\n            className={cn(\n              ensAvatarVariants({ variant, size, className }),\n              isLoadingImg && \"hidden\"\n            )}\n            onLoad={() => {\n              setIsLoadingImg(false)\n            }}\n            src={dataEnsAvatar}\n            {...props}\n          />\n        </>\n      )\n    }\n\n    return (\n      <Blockie\n        address={selectedAddress}\n        className={cn(\"w-10\", ensAvatarVariants({ variant, size }), className)}\n      />\n    )\n  }\n)\n\nEnsAvatar.displayName = \"EnsAvatar\"\n\nexport { EnsAvatar }\n"
     }
   ],
   "type": "components:buidl"