diff --git a/apps/www/content/docs/components/nonce.mdx b/apps/www/content/docs/components/nonce.mdx
index d9c71a9..a78dee7 100644
--- 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
index 94cfc60..1638c73 100644
--- 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
index 88c31b0..396dff0 100644
--- 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
index f6eaa54..bbf01e0 100644
--- a/apps/www/public/registry/styles/default/ens-address.json
+++ b/apps/www/public/registry/styles/default/ens-address.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "ens-address.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useEnsAddress } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Address, AddressProps } from \"@/registry/default/buidl/address\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n  return (\n    <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
index f1a308f..c6e32cd 100644
--- 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"
diff --git a/apps/www/public/registry/styles/default/ens-name.json b/apps/www/public/registry/styles/default/ens-name.json
index e9225a2..e81a1e8 100644
--- a/apps/www/public/registry/styles/default/ens-name.json
+++ b/apps/www/public/registry/styles/default/ens-name.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "ens-name.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useAccount, useEnsName } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Address } from \"@/registry/default/buidl/address\"\n\nimport { Skeleton } from \"../ui/skeleton\"\n\ninterface EnsNameProps extends React.HTMLAttributes<HTMLSpanElement> {\n  address?: `0x${string}`\n}\n\nconst EnsName = React.forwardRef<HTMLSpanElement, EnsNameProps>(\n  ({ address, className, ...props }, ref) => {\n    const { address: connectedAddress } = useAccount()\n    const selectedAddress = address ?? connectedAddress\n\n    const { data, isLoading, isSuccess } = useEnsName({\n      chainId: 1,\n      address: selectedAddress,\n      enabled: !!selectedAddress,\n    })\n\n    if (isSuccess && data) {\n      return (\n        <span ref={ref} className={className} {...props}>\n          {data}\n        </span>\n      )\n    }\n\n    if (isLoading) {\n      return <Skeleton className={cn(\"h-6 w-32\", className)} {...props} />\n    }\n\n    return (\n      <Address address={selectedAddress} className={className} {...props} />\n    )\n  }\n)\n\nEnsName.displayName = \"EnsName\"\n\nexport { EnsName }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useAccount, useEnsName } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Address } from \"@/registry/default/buidl/address\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\ninterface EnsNameProps extends React.HTMLAttributes<HTMLDivElement> {\n  address?: `0x${string}`\n}\n\nconst EnsName = React.forwardRef<HTMLDivElement, EnsNameProps>(\n  ({ address, className, ...props }, ref) => {\n    const { address: connectedAddress } = useAccount()\n    const selectedAddress = address ?? connectedAddress\n\n    const { data, isLoading, isSuccess } = useEnsName({\n      chainId: 1,\n      address: selectedAddress,\n      enabled: !!selectedAddress,\n    })\n\n    if (isSuccess && data) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {data}\n        </div>\n      )\n    }\n\n    if (isLoading || !selectedAddress) {\n      return <Skeleton className={cn(\"h-6 w-32\", className)} {...props} />\n    }\n\n    return (\n      <Address address={selectedAddress} className={className} {...props} />\n    )\n  }\n)\n\nEnsName.displayName = \"EnsName\"\n\nexport { EnsName }\n"
     }
   ],
   "type": "components:buidl"
diff --git a/apps/www/public/registry/styles/default/erc721-metadata.json b/apps/www/public/registry/styles/default/erc721-metadata.json
index cb694ad..9b0942b 100644
--- a/apps/www/public/registry/styles/default/erc721-metadata.json
+++ b/apps/www/public/registry/styles/default/erc721-metadata.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "erc721-metadata.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead, useQuery, type Address } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc721TokenUriAbi = [\n  {\n    inputs: [\n      {\n        internalType: \"uint256\",\n        name: \"tokenId\",\n        type: \"uint256\",\n      },\n    ],\n    name: \"tokenURI\",\n    outputs: [\n      {\n        internalType: \"string\",\n        name: \"\",\n        type: \"string\",\n      },\n    ],\n    stateMutability: \"view\",\n    type: \"function\",\n  },\n] as const\n\ninterface useERC721MetadataProps {\n  tokenId: bigint\n  ipfsGatewayUrl?: string\n  address?: Address\n  chainId?: number\n}\ninterface IERC721Metadata {\n  name?: string\n  description?: string\n  image: string\n  attributes: Array<{\n    trait_type: string\n    value: string\n  }>\n}\n\nfunction useERC721Metadata({\n  address,\n  chainId,\n  tokenId,\n  ipfsGatewayUrl = \"https://ipfs.io/ipfs\",\n}: useERC721MetadataProps) {\n  const { data, isLoading, isError, error } = useContractRead({\n    address,\n    abi: erc721TokenUriAbi,\n    functionName: \"tokenURI\",\n    args: [tokenId],\n    chainId,\n  })\n\n  const metadataQuery = useQuery(\n    [\"erc721-metadata\", address, chainId, tokenId, data],\n    {\n      queryFn: async () => {\n        if (!data) throw new Error(\"No tokenUri found\")\n        const uri = data.replace(\"ipfs://\", \"\")\n        const response = await fetch(`${ipfsGatewayUrl}/${uri}`)\n        const json = (await response.json()) as IERC721Metadata\n\n        if (!json.image) throw new Error(\"No image found in metadata\")\n        if (!json.attributes) throw new Error(\"No attributes found in metadata\")\n\n        json.image = json.image.startsWith(\"ipfs://\")\n          ? json.image.replace(\"ipfs://\", `${ipfsGatewayUrl}/`)\n          : json.image\n        return json\n      },\n      enabled: !!data,\n    }\n  )\n\n  return {\n    isLoading: isLoading || metadataQuery.isLoading,\n    isError: isError || metadataQuery.isError,\n    error: error || metadataQuery.error,\n    data: metadataQuery.data,\n  }\n}\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n  return (\n    <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\nexport type Erc721MetadataProps = React.HTMLAttributes<HTMLElement> & {\n  address: `0x${string}`\n  tokenId: number | string | bigint\n  chainId?: number\n  ipfsGatewayUrl?: string\n}\n\nconst Erc721MetadataImage = React.forwardRef<\n  HTMLImageElement,\n  Erc721MetadataProps\n>(({ chainId, address, tokenId, ipfsGatewayUrl, ...props }, ref) => {\n  const { data, isLoading, isError, error } = useERC721Metadata({\n    address,\n    chainId,\n    tokenId: BigInt(tokenId),\n    ipfsGatewayUrl,\n  })\n\n  console.log(data)\n\n  if (isLoading) {\n    return <Skeleton className=\"h-6 w-12\" {...props} />\n  }\n\n  if (isError) {\n    return <ErrorMessage error={error as Error | null} />\n  }\n\n  if (data?.image === undefined) {\n    return null\n  }\n\n  return <img alt={`${tokenId} image`} ref={ref} {...props} src={data.image} />\n})\n\nErc721MetadataImage.displayName = \"Erc721MetadataImage\"\n\nexport { Erc721MetadataImage }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useContractRead, useQuery, type Address } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst erc721TokenUriAbi = [\n  {\n    inputs: [\n      {\n        internalType: \"uint256\",\n        name: \"tokenId\",\n        type: \"uint256\",\n      },\n    ],\n    name: \"tokenURI\",\n    outputs: [\n      {\n        internalType: \"string\",\n        name: \"\",\n        type: \"string\",\n      },\n    ],\n    stateMutability: \"view\",\n    type: \"function\",\n  },\n] as const\n\ninterface useERC721MetadataProps {\n  tokenId: bigint\n  ipfsGatewayUrl?: string\n  address?: Address\n  chainId?: number\n}\ninterface IERC721Metadata {\n  name?: string\n  description?: string\n  image: string\n  attributes: Array<{\n    trait_type: string\n    value: string\n  }>\n}\n\nfunction useERC721Metadata({\n  address,\n  chainId,\n  tokenId,\n  ipfsGatewayUrl = \"https://ipfs.io/ipfs/\",\n}: useERC721MetadataProps) {\n  const { data, isLoading, isError, error } = useContractRead({\n    address,\n    abi: erc721TokenUriAbi,\n    functionName: \"tokenURI\",\n    args: [tokenId],\n    chainId,\n  })\n\n  const metadataQuery = useQuery(\n    [\"erc721-metadata\", address, chainId, tokenId, data],\n    {\n      queryFn: async () => {\n        if (!data) throw new Error(\"No tokenUri found\")\n        const uri = data.replace(\"ipfs://\", \"\")\n        const response = await fetch(`${ipfsGatewayUrl}${uri}`)\n        const json = (await response.json()) as IERC721Metadata\n\n        if (!json.image) throw new Error(\"No image found in metadata\")\n        if (!json.attributes) throw new Error(\"No attributes found in metadata\")\n\n        json.image = json.image.startsWith(\"ipfs://\")\n          ? json.image.replace(\"ipfs://\", `${ipfsGatewayUrl}`)\n          : json.image\n        return json\n      },\n      enabled: !!data,\n    }\n  )\n\n  return {\n    isLoading: isLoading || metadataQuery.isLoading,\n    isError: isError || metadataQuery.isError,\n    error: error || metadataQuery.error,\n    data: metadataQuery.data,\n  }\n}\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n  return (\n    <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\nexport type Erc721MetadataProps = React.HTMLAttributes<HTMLElement> & {\n  address: `0x${string}`\n  tokenId: number | string | bigint\n  chainId?: number\n  ipfsGatewayUrl?: string\n}\n\nconst Erc721MetadataImage = React.forwardRef<\n  HTMLImageElement,\n  Erc721MetadataProps\n>(({ chainId, address, tokenId, ipfsGatewayUrl, ...props }, ref) => {\n  const { data, isLoading, isError, error } = useERC721Metadata({\n    address,\n    chainId,\n    tokenId: BigInt(tokenId),\n    ipfsGatewayUrl,\n  })\n\n  if (isLoading) {\n    return <Skeleton className=\"h-6 w-12\" {...props} />\n  }\n\n  if (isError) {\n    return <ErrorMessage error={error as Error | null} />\n  }\n\n  if (data?.image === undefined) {\n    return null\n  }\n\n  return <img alt={`${tokenId} image`} ref={ref} {...props} src={data.image} />\n})\n\nErc721MetadataImage.displayName = \"Erc721MetadataImage\"\n\nexport { Erc721MetadataImage }\n"
     }
   ],
   "folder": "erc721",
diff --git a/apps/www/public/registry/styles/default/image-ipfs.json b/apps/www/public/registry/styles/default/image-ipfs.json
index cc706e0..d997aee 100644
--- a/apps/www/public/registry/styles/default/image-ipfs.json
+++ b/apps/www/public/registry/styles/default/image-ipfs.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "image-ipfs.tsx",
-      "content": "import { useMemo } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype ImageIpfs = React.HTMLAttributes<HTMLElement> & {\n  src: string\n  alt: string\n  width?: string\n  height?: string\n}\n\nexport const ImageIpfs = ({\n  className,\n  src,\n  alt,\n  width,\n  height,\n}: ImageIpfs) => {\n  const classes = cn(className)\n\n  const imgSrc = useMemo(\n    () =>\n      src?.startsWith(\"ipfs://\")\n        ? src.replace(\"ipfs://\", \"https://gateway.ipfs.io/ipfs/\")\n        : src,\n    [src]\n  )\n\n  if (!imgSrc) return null\n\n  return (\n    <img\n      src={imgSrc}\n      width={width}\n      height={height}\n      alt={alt}\n      className={classes}\n    />\n  )\n}\n"
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n  return (\n    <div className={cn(\"break-words text-sm font-medium text-red-500\")}>\n      {error?.message ?? \"Error while fetching image\"}\n    </div>\n  )\n}\n\ninterface ImageIpfsProps extends React.HTMLAttributes<HTMLImageElement> {\n  ipfsGatewayUrl?: string\n  src: string\n  alt: string\n}\n\nconst ImageIpfs = React.forwardRef<HTMLImageElement, ImageIpfsProps>(\n  (\n    { className, src, alt, ipfsGatewayUrl = \"https://ipfs.io/ipfs/\", ...props },\n    ref\n  ) => {\n    const [isLoading, setIsLoading] = React.useState(true)\n    const [isError, setIsError] = React.useState(false)\n\n    const imgSrc = React.useMemo(\n      () =>\n        src?.startsWith(\"ipfs://\")\n          ? src.replace(\"ipfs://\", ipfsGatewayUrl)\n          : src,\n      [src, ipfsGatewayUrl]\n    )\n\n    return (\n      <>\n        {isError ? (\n          <ErrorMessage error={null} />\n        ) : isLoading ? (\n          <Skeleton className={className} {...props} />\n        ) : null}\n        <img\n          ref={ref}\n          alt={alt}\n          src={imgSrc}\n          onLoad={() => setIsLoading(false)}\n          onError={() => setIsError(true)}\n          className={cn((isLoading || isError) && \"hidden\", className)}\n          {...props}\n        />\n      </>\n    )\n  }\n)\n\nImageIpfs.displayName = \"ImageIpfs\"\n\nexport { ImageIpfs }\n"
     }
   ],
   "type": "components:buidl"
diff --git a/apps/www/public/registry/styles/default/is-wallet-connected.json b/apps/www/public/registry/styles/default/is-wallet-connected.json
index 3393f1c..4fa770a 100644
--- a/apps/www/public/registry/styles/default/is-wallet-connected.json
+++ b/apps/www/public/registry/styles/default/is-wallet-connected.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "is-wallet-connected.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useAccount } from \"wagmi\"\n\nconst IsWalletConnected = ({ children }: { children: React.ReactNode }) => {\n  const { isConnected } = useAccount()\n\n  if (isConnected) return <>{children}</>\n\n  return null\n}\n\nexport { IsWalletConnected }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useAccount } from \"wagmi\"\n\nconst IsWalletConnected = ({ children }: { children: React.ReactNode }) => {\n  const { isConnected, isConnecting } = useAccount()\n\n  if (isConnected || isConnecting) return <>{children}</>\n\n  return null\n}\n\nexport { IsWalletConnected }\n"
     }
   ],
   "type": "components:buidl"
diff --git a/apps/www/public/registry/styles/default/nonce.json b/apps/www/public/registry/styles/default/nonce.json
index 167b4bc..51c0ad8 100644
--- a/apps/www/public/registry/styles/default/nonce.json
+++ b/apps/www/public/registry/styles/default/nonce.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "nonce.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  useAccount,\n  useChainId,\n  usePublicClient,\n  useQuery,\n  type PublicClient,\n} from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\ninterface NonceProps extends React.HTMLAttributes<HTMLSpanElement> {\n  address?: `0x${string}`\n  chainId?: number\n}\n\nconst useNonce = ({\n  address,\n  publicClient,\n}: Pick<NonceProps, \"address\"> & { publicClient: PublicClient }) => {\n  return useQuery([\"wallet-nonce\", address, publicClient.chain.id], {\n    queryFn: () => {\n      if (!address) return\n      return publicClient?.getTransactionCount({\n        address,\n      })\n    },\n    enabled: !!address && !!publicClient,\n  })\n}\n\nconst Nonce = React.forwardRef<HTMLSpanElement, NonceProps>(\n  ({ className, address, chainId, ...props }: NonceProps) => {\n    const connectedChainId = useChainId()\n    const selectedChainId = chainId ?? connectedChainId\n\n    const publicClient = usePublicClient({\n      chainId: selectedChainId,\n    })\n\n    const { address: connectedAddress } = useAccount()\n    const selectedAddress = address ?? connectedAddress\n\n    const { data, isLoading } = useNonce({\n      publicClient,\n      address: selectedAddress,\n    })\n\n    if (isLoading) {\n      return <Skeleton className={cn(\"h-6 w-14\", className)} {...props} />\n    }\n\n    return (\n      <span className={className} {...props}>\n        {data}\n      </span>\n    )\n  }\n)\n\nNonce.displayName = \"Nonce\"\n\nexport { Nonce }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  useAccount,\n  useChainId,\n  usePublicClient,\n  useQuery,\n  type PublicClient,\n} from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\ninterface NonceProps extends React.HTMLAttributes<HTMLDivElement> {\n  address?: `0x${string}`\n  chainId?: number\n}\n\nconst useNonce = ({\n  address,\n  publicClient,\n}: Pick<NonceProps, \"address\"> & { publicClient: PublicClient }) => {\n  return useQuery([\"wallet-nonce\", address, publicClient.chain.id], {\n    queryFn: () => {\n      if (!address) return\n      return publicClient?.getTransactionCount({\n        address,\n      })\n    },\n    enabled: !!address && !!publicClient,\n  })\n}\n\nconst Nonce = React.forwardRef<HTMLDivElement, NonceProps>(\n  ({ className, address, chainId, ...props }, ref) => {\n    const connectedChainId = useChainId()\n    const selectedChainId = chainId ?? connectedChainId\n\n    const publicClient = usePublicClient({\n      chainId: selectedChainId,\n    })\n\n    const { address: connectedAddress } = useAccount()\n    const selectedAddress = address ?? connectedAddress\n\n    const { data, isLoading } = useNonce({\n      publicClient,\n      address: selectedAddress,\n    })\n\n    if (isLoading) {\n      return <Skeleton className={cn(\"h-6 w-14\", className)} {...props} />\n    }\n\n    return (\n      <div ref={ref} className={className} {...props}>\n        {data}\n      </div>\n    )\n  }\n)\n\nNonce.displayName = \"Nonce\"\n\nexport { Nonce }\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 832a3b0..1698af9 100644
--- a/apps/www/public/registry/styles/default/transaction-status.json
+++ b/apps/www/public/registry/styles/default/transaction-status.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "transaction-status.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useChainId, useWaitForTransaction } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n  return (\n    <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"
+      "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    <div\n      ref={ref}\n      className={cn(\"flex flex-col items-center\", className)}\n      {...props}\n    >\n      {isLoading && \"Processing transaction...\"}\n      {isSuccess && \"Transaction successful!\"}\n      {children}\n    </div>\n  )\n})\n\nTransactionStatus.displayName = \"TransactionStatus\"\n\nexport { TransactionStatus }\n"
     }
   ],
   "type": "components:buidl"
diff --git a/apps/www/public/registry/styles/default/transaction.json b/apps/www/public/registry/styles/default/transaction.json
index 6c5a845..78d29a5 100644
--- a/apps/www/public/registry/styles/default/transaction.json
+++ b/apps/www/public/registry/styles/default/transaction.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "transaction.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useTransaction } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\ninterface TransactionProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  hash: `0x${string}`\n  chainId?: number\n  displayLoading?: boolean\n  displayError?: boolean\n}\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n  return (\n    <div className={cn(\"break-words text-sm font-medium text-red-500\")}>\n      {error?.message ?? \"Error while fetching transaction data\"}\n    </div>\n  )\n}\n\nconst TransactionBlockHash = React.forwardRef<HTMLDivElement, TransactionProps>(\n  (\n    {\n      chainId,\n      hash,\n      className,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { data, isSuccess, isLoading, isError, error } = useTransaction({\n      hash,\n      chainId,\n    })\n\n    if (isLoading && displayLoading)\n      return <Skeleton className={cn(\"h-6 w-[630px]\", className)} {...props} />\n\n    if (isError && displayError) return <ErrorMessage error={error} />\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {data?.blockHash}\n        </div>\n      )\n    }\n\n    return null\n  }\n)\n\nTransactionBlockHash.displayName = \"TransactionBlockHash\"\n\nconst TransactionBlockNumber = React.forwardRef<\n  HTMLDivElement,\n  TransactionProps\n>(\n  (\n    {\n      chainId,\n      hash,\n      className,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { data, isSuccess, isLoading, isError, error } = useTransaction({\n      hash,\n      chainId,\n    })\n\n    if (isLoading && displayLoading)\n      return <Skeleton className={cn(\"h-6 w-24\", className)} {...props} />\n\n    if (isError && displayError) return <ErrorMessage error={error} />\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {data?.blockNumber.toString()}\n        </div>\n      )\n    }\n\n    return null\n  }\n)\n\nTransactionBlockNumber.displayName = \"TransactionBlockNumber\"\n\nconst TransactionFrom = React.forwardRef<HTMLDivElement, TransactionProps>(\n  (\n    {\n      chainId,\n      hash,\n      className,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { data, isSuccess, isLoading, isError, error } = useTransaction({\n      hash,\n      chainId,\n    })\n\n    if (isLoading && displayLoading)\n      return <Skeleton className={cn(\"h-6 w-[400px]\", className)} {...props} />\n\n    if (isError && displayError) return <ErrorMessage error={error} />\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {data?.from}\n        </div>\n      )\n    }\n\n    return null\n  }\n)\n\nTransactionFrom.displayName = \"TransactionFrom\"\n\nconst TransactionTo = React.forwardRef<HTMLDivElement, TransactionProps>(\n  (\n    {\n      chainId,\n      hash,\n      className,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { data, isSuccess, isLoading, isError, error } = useTransaction({\n      hash,\n      chainId,\n    })\n\n    if (isLoading && displayLoading)\n      return <Skeleton className={cn(\"h-6 w-[400px]\", className)} {...props} />\n\n    if (isError && displayError) return <ErrorMessage error={error} />\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {data?.from}\n        </div>\n      )\n    }\n\n    return null\n  }\n)\n\nTransactionTo.displayName = \"TransactionTo\"\n\nconst TransactionGas = React.forwardRef<HTMLDivElement, TransactionProps>(\n  (\n    {\n      chainId,\n      hash,\n      className,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { data, isSuccess, isLoading, isError, error } = useTransaction({\n      hash,\n      chainId,\n    })\n\n    if (isLoading && displayLoading)\n      return <Skeleton className={cn(\"h-6 w-24\", className)} {...props} />\n\n    if (isError && displayError) return <ErrorMessage error={error} />\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {data?.gas.toString()}\n        </div>\n      )\n    }\n\n    return null\n  }\n)\n\nTransactionGas.displayName = \"TransactionGas\"\n\nconst TransactionGasPrice = React.forwardRef<HTMLDivElement, TransactionProps>(\n  (\n    {\n      chainId,\n      hash,\n      className,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { data, isSuccess, isLoading, isError, error } = useTransaction({\n      hash,\n      chainId,\n    })\n\n    if (isLoading && displayLoading)\n      return <Skeleton className={cn(\"h-6 w-12\", className)} {...props} />\n\n    if (isError && displayError) return <ErrorMessage error={error} />\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {data?.gasPrice?.toString()}\n        </div>\n      )\n    }\n\n    return null\n  }\n)\n\nTransactionGasPrice.displayName = \"TransactionGasPrice\"\n\nconst TransactionNonce = React.forwardRef<HTMLDivElement, TransactionProps>(\n  (\n    {\n      chainId,\n      hash,\n      className,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { data, isSuccess, isLoading, isError, error } = useTransaction({\n      hash,\n      chainId,\n    })\n\n    if (isLoading && displayLoading)\n      return <Skeleton className={cn(\"h-6 w-16\", className)} {...props} />\n\n    if (isError && displayError) return <ErrorMessage error={error} />\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {data?.nonce.toString()}\n        </div>\n      )\n    }\n    return null\n  }\n)\n\nTransactionNonce.displayName = \"TransactionNonce\"\n\nexport {\n  TransactionBlockHash,\n  TransactionBlockNumber,\n  TransactionFrom,\n  TransactionGas,\n  TransactionGasPrice,\n  TransactionNonce,\n  TransactionTo,\n}\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useTransaction } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Skeleton } from \"@/registry/default/ui/skeleton\"\n\ninterface TransactionProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  hash: `0x${string}`\n  chainId?: number\n  displayLoading?: boolean\n  displayError?: boolean\n}\n\nconst ErrorMessage = ({ error }: { error: Error | null }) => {\n  return (\n    <div className={cn(\"break-words text-sm font-medium text-red-500\")}>\n      {error?.message ?? \"Error while fetching transaction data\"}\n    </div>\n  )\n}\n\nconst TransactionBlockHash = React.forwardRef<HTMLDivElement, TransactionProps>(\n  (\n    {\n      chainId,\n      hash,\n      className,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { data, isSuccess, isLoading, isError, error } = useTransaction({\n      hash,\n      chainId,\n    })\n\n    if (isLoading && displayLoading)\n      return <Skeleton className={cn(\"h-6 w-[620px]\", className)} {...props} />\n\n    if (isError && displayError) return <ErrorMessage error={error} />\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {data?.blockHash}\n        </div>\n      )\n    }\n\n    return null\n  }\n)\n\nTransactionBlockHash.displayName = \"TransactionBlockHash\"\n\nconst TransactionBlockNumber = React.forwardRef<\n  HTMLDivElement,\n  TransactionProps\n>(\n  (\n    {\n      chainId,\n      hash,\n      className,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { data, isSuccess, isLoading, isError, error } = useTransaction({\n      hash,\n      chainId,\n    })\n\n    if (isLoading && displayLoading)\n      return <Skeleton className={cn(\"h-6 w-24\", className)} {...props} />\n\n    if (isError && displayError) return <ErrorMessage error={error} />\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {data?.blockNumber.toString()}\n        </div>\n      )\n    }\n\n    return null\n  }\n)\n\nTransactionBlockNumber.displayName = \"TransactionBlockNumber\"\n\nconst TransactionFrom = React.forwardRef<HTMLDivElement, TransactionProps>(\n  (\n    {\n      chainId,\n      hash,\n      className,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { data, isSuccess, isLoading, isError, error } = useTransaction({\n      hash,\n      chainId,\n    })\n\n    if (isLoading && displayLoading)\n      return <Skeleton className={cn(\"h-6 w-[400px]\", className)} {...props} />\n\n    if (isError && displayError) return <ErrorMessage error={error} />\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {data?.from}\n        </div>\n      )\n    }\n\n    return null\n  }\n)\n\nTransactionFrom.displayName = \"TransactionFrom\"\n\nconst TransactionTo = React.forwardRef<HTMLDivElement, TransactionProps>(\n  (\n    {\n      chainId,\n      hash,\n      className,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { data, isSuccess, isLoading, isError, error } = useTransaction({\n      hash,\n      chainId,\n    })\n\n    if (isLoading && displayLoading)\n      return <Skeleton className={cn(\"h-6 w-[400px]\", className)} {...props} />\n\n    if (isError && displayError) return <ErrorMessage error={error} />\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {data?.from}\n        </div>\n      )\n    }\n\n    return null\n  }\n)\n\nTransactionTo.displayName = \"TransactionTo\"\n\nconst TransactionGas = React.forwardRef<HTMLDivElement, TransactionProps>(\n  (\n    {\n      chainId,\n      hash,\n      className,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { data, isSuccess, isLoading, isError, error } = useTransaction({\n      hash,\n      chainId,\n    })\n\n    if (isLoading && displayLoading)\n      return <Skeleton className={cn(\"h-6 w-24\", className)} {...props} />\n\n    if (isError && displayError) return <ErrorMessage error={error} />\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {data?.gas.toString()}\n        </div>\n      )\n    }\n\n    return null\n  }\n)\n\nTransactionGas.displayName = \"TransactionGas\"\n\nconst TransactionGasPrice = React.forwardRef<HTMLDivElement, TransactionProps>(\n  (\n    {\n      chainId,\n      hash,\n      className,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { data, isSuccess, isLoading, isError, error } = useTransaction({\n      hash,\n      chainId,\n    })\n\n    if (isLoading && displayLoading)\n      return <Skeleton className={cn(\"h-6 w-12\", className)} {...props} />\n\n    if (isError && displayError) return <ErrorMessage error={error} />\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {data?.gasPrice?.toString()}\n        </div>\n      )\n    }\n\n    return null\n  }\n)\n\nTransactionGasPrice.displayName = \"TransactionGasPrice\"\n\nconst TransactionNonce = React.forwardRef<HTMLDivElement, TransactionProps>(\n  (\n    {\n      chainId,\n      hash,\n      className,\n      displayError = true,\n      displayLoading = true,\n      ...props\n    },\n    ref\n  ) => {\n    const { data, isSuccess, isLoading, isError, error } = useTransaction({\n      hash,\n      chainId,\n    })\n\n    if (isLoading && displayLoading)\n      return <Skeleton className={cn(\"h-6 w-16\", className)} {...props} />\n\n    if (isError && displayError) return <ErrorMessage error={error} />\n\n    if (isSuccess) {\n      return (\n        <div ref={ref} className={className} {...props}>\n          {data?.nonce.toString()}\n        </div>\n      )\n    }\n    return null\n  }\n)\n\nTransactionNonce.displayName = \"TransactionNonce\"\n\nexport {\n  TransactionBlockHash,\n  TransactionBlockNumber,\n  TransactionFrom,\n  TransactionGas,\n  TransactionGasPrice,\n  TransactionNonce,\n  TransactionTo,\n}\n"
     }
   ],
   "type": "components:buidl"
diff --git a/apps/www/public/registry/styles/default/wallet-connect.json b/apps/www/public/registry/styles/default/wallet-connect.json
index 21e3083..785c57d 100644
--- a/apps/www/public/registry/styles/default/wallet-connect.json
+++ b/apps/www/public/registry/styles/default/wallet-connect.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "wallet-connect.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useAccount, useConnect, type Connector } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport { Button, ButtonProps } from \"../ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"../ui/dialog\"\n\nconst WalletConnect = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ children, className, ...props }, ref) => {\n    const { address } = useAccount()\n    const { connectors } = useConnect()\n\n    if (address) {\n      return <span>{address}</span>\n    }\n\n    return (\n      <Dialog>\n        <DialogTrigger>\n          <Button ref={ref} className={className} {...props}>\n            {children ?? \"Connect Wallet\"}\n          </Button>\n        </DialogTrigger>\n        <DialogContent className=\"flex w-full flex-col\">\n          <DialogHeader>\n            <DialogTitle>Connect Wallet</DialogTitle>\n            <hr className=\"my-6\" />\n          </DialogHeader>\n          <div className=\"flex max-w-full flex-col items-center gap-y-3 py-3\">\n            {connectors.map((connector, index) => (\n              <WalletPreview key={index} connector={connector} />\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    )\n  }\n)\n\nWalletConnect.displayName = \"WalletConnect\"\n\nconst WalletPreview = React.forwardRef<\n  HTMLButtonElement,\n  Omit<ButtonProps, \"onClick\"> & {\n    connector: Connector\n  }\n>(({ className, connector, ...props }, ref) => {\n  const { connect, isLoading, isError, error } = useConnect()\n\n  const handleConnect = () => {\n    connect({ connector })\n  }\n\n  return (\n    <Button\n      ref={ref}\n      className={cn(\"flex h-16 w-full flex-col justify-center\", className)}\n      variant={\"outline\"}\n      disabled={isLoading}\n      onClick={handleConnect}\n      {...props}\n    >\n      <h3 className=\"text-lg font-normal\">{connector.name}</h3>\n      {isLoading && (\n        <p className=\"text-sm text-neutral-400\">\n          Accept the connection request in your wallet\n        </p>\n      )}\n      {isError && (\n        <div className=\"w-full items-center gap-x-2 overflow-auto break-words text-xs text-red-500\">\n          {error?.message ?? \"Error while connecting wallet\"}\n        </div>\n      )}\n    </Button>\n  )\n})\n\nWalletPreview.displayName = \"WalletPreview\"\n\nexport { WalletConnect, WalletPreview }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useAccount, useConnect, type Connector } from \"wagmi\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, ButtonProps } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\n\nconst WalletConnect = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ children, className, ...props }, ref) => {\n    const { address } = useAccount()\n    const { connectors } = useConnect()\n\n    if (address) {\n      return <div className={className}>{address}</div>\n    }\n\n    return (\n      <Dialog>\n        <DialogTrigger>\n          <Button ref={ref} className={className} {...props}>\n            {children ?? \"Connect Wallet\"}\n          </Button>\n        </DialogTrigger>\n        <DialogContent className=\"flex w-full flex-col\">\n          <DialogHeader>\n            <DialogTitle>Connect Wallet</DialogTitle>\n            <hr className=\"my-6\" />\n          </DialogHeader>\n          <div className=\"flex max-w-full flex-col items-center gap-y-3 py-3\">\n            {connectors.map((connector, index) => (\n              <WalletPreview key={index} connector={connector} />\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    )\n  }\n)\n\nWalletConnect.displayName = \"WalletConnect\"\n\nconst WalletPreview = React.forwardRef<\n  HTMLButtonElement,\n  Omit<ButtonProps, \"onClick\"> & {\n    connector: Connector\n  }\n>(({ className, connector, ...props }, ref) => {\n  const { connect, isLoading, isError, error } = useConnect()\n\n  const handleConnect = () => {\n    connect({ connector })\n  }\n\n  return (\n    <Button\n      ref={ref}\n      className={cn(\"flex h-16 w-full flex-col justify-center\", className)}\n      variant={\"outline\"}\n      disabled={isLoading}\n      onClick={handleConnect}\n      {...props}\n    >\n      <h3 className=\"text-lg font-normal\">{connector.name}</h3>\n      {isLoading && (\n        <p className=\"text-sm text-neutral-400\">\n          Accept the connection request in your wallet\n        </p>\n      )}\n      {isError && (\n        <div className=\"w-full items-center gap-x-2 overflow-auto break-words text-xs text-red-500\">\n          {error?.message ?? \"Error while connecting wallet\"}\n        </div>\n      )}\n    </Button>\n  )\n})\n\nWalletPreview.displayName = \"WalletPreview\"\n\nexport { WalletConnect, WalletPreview }\n"
     }
   ],
   "type": "components:buidl"
diff --git a/apps/www/public/registry/styles/default/wallet-disconnect.json b/apps/www/public/registry/styles/default/wallet-disconnect.json
index e7707e7..3ff7a09 100644
--- a/apps/www/public/registry/styles/default/wallet-disconnect.json
+++ b/apps/www/public/registry/styles/default/wallet-disconnect.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "wallet-disconnect.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useDisconnect } from \"wagmi\"\n\nimport { Button, type ButtonProps } from \"../ui/button\"\n\nconst WalletDisconnect = React.forwardRef<\n  HTMLButtonElement,\n  Omit<ButtonProps, \"onClick\">\n>(({ children, ...props }, ref) => {\n  const { disconnect } = useDisconnect()\n\n  return (\n    <Button\n      ref={ref}\n      onClick={() => {\n        disconnect()\n      }}\n      {...props}\n    >\n      {children ?? \"Disconnect\"}\n    </Button>\n  )\n})\n\nWalletDisconnect.displayName = \"WalletDisconnect\"\n\nexport { WalletDisconnect }\n"
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useDisconnect } from \"wagmi\"\n\nimport { Button, type ButtonProps } from \"@/registry/default/ui/button\"\n\nconst WalletDisconnect = React.forwardRef<\n  HTMLButtonElement,\n  Omit<ButtonProps, \"onClick\">\n>(({ children, ...props }, ref) => {\n  const { disconnect } = useDisconnect()\n\n  return (\n    <Button\n      ref={ref}\n      onClick={() => {\n        disconnect()\n      }}\n      {...props}\n    >\n      {children ?? \"Disconnect\"}\n    </Button>\n  )\n})\n\nWalletDisconnect.displayName = \"WalletDisconnect\"\n\nexport { WalletDisconnect }\n"
     }
   ],
   "type": "components:buidl"
diff --git a/apps/www/registry/default/buidl/address.tsx b/apps/www/registry/default/buidl/address.tsx
index 6354649..d88fb66 100644
--- a/apps/www/registry/default/buidl/address.tsx
+++ b/apps/www/registry/default/buidl/address.tsx
@@ -18,13 +18,13 @@ export interface AddressProps
 }
 
 const AddressCopy = React.forwardRef<
-  HTMLSpanElement,
-  React.HTMLAttributes<HTMLSpanElement> & {
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
     address: AddressType
   }
 >(({ address, className, children, ...props }, ref) => {
   return (
-    <span
+    <div
       ref={ref}
       className={cn("flex cursor-pointer items-center gap-x-2", className)}
       onClick={async () => {
@@ -39,15 +39,15 @@ const AddressCopy = React.forwardRef<
       {children ?? address}
       <span className="sr-only">Copy address</span>
       <Copy size={12} />
-    </span>
+    </div>
   )
 })
 
 AddressCopy.displayName = "AddressCopy"
 
 const AddressLink = React.forwardRef<
-  HTMLElement,
-  React.HTMLAttributes<HTMLElement> & {
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
     address: AddressType
   }
 >(({ address, className, children, ...props }, ref) => {
@@ -57,7 +57,7 @@ const AddressLink = React.forwardRef<
   const chain = currentChain ?? mainnet
 
   return (
-    <span
+    <div
       ref={ref}
       className={cn(
         "cursor-pointer underline-offset-2 hover:underline",
@@ -76,13 +76,13 @@ const AddressLink = React.forwardRef<
       ) : (
         <>{children ?? address}</>
       )}
-    </span>
+    </div>
   )
 })
 
 AddressLink.displayName = "AddressLink"
 
-const Address = React.forwardRef<HTMLElement, AddressProps>(
+const Address = React.forwardRef<HTMLDivElement, AddressProps>(
   (
     { address, className, truncate, truncateAmount = 4, link, copy, ...props },
     ref
diff --git a/apps/www/registry/default/buidl/blockie.tsx b/apps/www/registry/default/buidl/blockie.tsx
index b0d1a36..8228324 100644
--- a/apps/www/registry/default/buidl/blockie.tsx
+++ b/apps/www/registry/default/buidl/blockie.tsx
@@ -6,6 +6,7 @@ import makeBlockie from "ethereum-blockies-base64"
 import { useAccount } from "wagmi"
 
 import { cn } from "@/lib/utils"
+import { Skeleton } from "@/registry/default/ui/skeleton"
 
 const blockieVariants = cva("inline-block", {
   variants: {
@@ -32,24 +33,36 @@ export type BlockieProps = React.HTMLAttributes<HTMLImageElement> &
     address?: `0x${string}`
   }
 
-export const Blockie = ({
-  className,
-  address,
-  variant,
-  size,
-  ...props
-}: BlockieProps) => {
-  const { address: connectedAddress } = useAccount()
-  const selectedAddress = address ?? connectedAddress
-
-  if (!selectedAddress) return null
-
-  return (
-    <img
-      alt={`${address} blockie`}
-      className={cn(blockieVariants({ variant, size, className }))}
-      src={makeBlockie(selectedAddress)}
-      {...props}
-    />
-  )
-}
+const Blockie = React.forwardRef<HTMLImageElement, BlockieProps>(
+  ({ className, address, variant, size, ...props }, ref) => {
+    const [isLoading, setIsLoading] = React.useState(true)
+    const { address: connectedAddress, isConnecting } = useAccount()
+    const selectedAddress = address ?? connectedAddress ?? "0x0"
+
+    return (
+      <>
+        {isLoading || isConnecting ? (
+          <Skeleton
+            className={cn(blockieVariants({ variant, size, className }))}
+            {...props}
+          />
+        ) : null}
+        <img
+          ref={ref}
+          alt={`${address} blockie`}
+          onLoad={() => setIsLoading(false)}
+          className={cn(
+            blockieVariants({ variant, size, className }),
+            (isLoading || isConnecting) && "hidden"
+          )}
+          src={makeBlockie(selectedAddress)}
+          {...props}
+        />
+      </>
+    )
+  }
+)
+
+Blockie.displayName = "Blockie"
+
+export { Blockie }
diff --git a/apps/www/registry/default/buidl/ens-address.tsx b/apps/www/registry/default/buidl/ens-address.tsx
index 2168f12..7374ff3 100644
--- a/apps/www/registry/default/buidl/ens-address.tsx
+++ b/apps/www/registry/default/buidl/ens-address.tsx
@@ -19,14 +19,18 @@ interface EnsAddressProps extends Omit<AddressProps, "address"> {
   name: string
 }
 
-const EnsAddress = React.forwardRef<HTMLSpanElement, EnsAddressProps>(
+const EnsAddress = React.forwardRef<HTMLDivElement, EnsAddressProps>(
   ({ name, className, ...props }, ref) => {
     const { data, isLoading, isSuccess, isError, error } = useEnsAddress({
       chainId: 1,
       name,
     })
 
-    if (isLoading) {
+    if (isError) {
+      return <ErrorMessage error={error} />
+    }
+
+    if (isLoading || !data) {
       return (
         <Skeleton
           className={cn(
@@ -45,10 +49,6 @@ const EnsAddress = React.forwardRef<HTMLSpanElement, EnsAddressProps>(
       )
     }
 
-    if (isError) {
-      return <ErrorMessage error={error} />
-    }
-
     return null
   }
 )
diff --git a/apps/www/registry/default/buidl/ens-avatar.tsx b/apps/www/registry/default/buidl/ens-avatar.tsx
index 1345c58..2c0cc91 100644
--- a/apps/www/registry/default/buidl/ens-avatar.tsx
+++ b/apps/www/registry/default/buidl/ens-avatar.tsx
@@ -49,6 +49,8 @@ const EnsAvatar = React.forwardRef<HTMLImageElement, EnsAvatarProps>(
     },
     ref
   ) => {
+    const [isLoadingImg, setIsLoadingImg] = React.useState(true)
+
     const { address: connectedAddress } = useAccount()
     const selectedAddress = address ?? connectedAddress
 
@@ -76,8 +78,7 @@ const EnsAvatar = React.forwardRef<HTMLImageElement, EnsAvatarProps>(
         <Skeleton
           className={cn(
             "h-10 w-10",
-            ensAvatarVariants({ variant, size }),
-            className
+            ensAvatarVariants({ variant, size, className })
           )}
         />
       )
@@ -85,13 +86,27 @@ const EnsAvatar = React.forwardRef<HTMLImageElement, EnsAvatarProps>(
 
     if (dataEnsAvatar) {
       return (
-        <img
-          ref={ref}
-          alt={`${selectedAddress} EnsAvatar`}
-          className={cn(ensAvatarVariants({ variant, size }), className)}
-          src={dataEnsAvatar}
-          {...props}
-        />
+        <>
+          {isLoadingImg ? (
+            <Skeleton
+              className={cn(ensAvatarVariants({ variant, size, className }))}
+              {...props}
+            />
+          ) : null}
+          <img
+            ref={ref}
+            alt={`${selectedAddress} EnsAvatar`}
+            className={cn(
+              ensAvatarVariants({ variant, size, className }),
+              isLoadingImg && "hidden"
+            )}
+            onLoad={() => {
+              setIsLoadingImg(false)
+            }}
+            src={dataEnsAvatar}
+            {...props}
+          />
+        </>
       )
     }
 
diff --git a/apps/www/registry/default/buidl/ens-name.tsx b/apps/www/registry/default/buidl/ens-name.tsx
index 14e0c7a..d560510 100644
--- a/apps/www/registry/default/buidl/ens-name.tsx
+++ b/apps/www/registry/default/buidl/ens-name.tsx
@@ -5,14 +5,13 @@ import { useAccount, useEnsName } from "wagmi"
 
 import { cn } from "@/lib/utils"
 import { Address } from "@/registry/default/buidl/address"
+import { Skeleton } from "@/registry/default/ui/skeleton"
 
-import { Skeleton } from "../ui/skeleton"
-
-interface EnsNameProps extends React.HTMLAttributes<HTMLSpanElement> {
+interface EnsNameProps extends React.HTMLAttributes<HTMLDivElement> {
   address?: `0x${string}`
 }
 
-const EnsName = React.forwardRef<HTMLSpanElement, EnsNameProps>(
+const EnsName = React.forwardRef<HTMLDivElement, EnsNameProps>(
   ({ address, className, ...props }, ref) => {
     const { address: connectedAddress } = useAccount()
     const selectedAddress = address ?? connectedAddress
@@ -25,13 +24,13 @@ const EnsName = React.forwardRef<HTMLSpanElement, EnsNameProps>(
 
     if (isSuccess && data) {
       return (
-        <span ref={ref} className={className} {...props}>
+        <div ref={ref} className={className} {...props}>
           {data}
-        </span>
+        </div>
       )
     }
 
-    if (isLoading) {
+    if (isLoading || !selectedAddress) {
       return <Skeleton className={cn("h-6 w-32", className)} {...props} />
     }
 
diff --git a/apps/www/registry/default/buidl/erc20/erc20-selector.tsx b/apps/www/registry/default/buidl/erc20/erc20-selector.tsx
index 899c662..deb61bf 100644
--- a/apps/www/registry/default/buidl/erc20/erc20-selector.tsx
+++ b/apps/www/registry/default/buidl/erc20/erc20-selector.tsx
@@ -1,18 +1,17 @@
 "use client"
 
 import { useCallback, useMemo, useState } from "react"
-import Image from "next/image"
 
 import { cn } from "@/lib/utils"
-
+import { ImageIpfs } from "@/registry/default/buidl/image-ipfs"
 import {
   CommandDialog,
   CommandEmpty,
   CommandInput,
   CommandItem,
   CommandList,
-} from "../../ui/command"
-import { ImageIpfs } from "../image-ipfs"
+} from "@/registry/default/ui/command"
+
 import { Token, TokenList } from "./types"
 
 interface Erc20SelectorProps {
diff --git a/apps/www/registry/default/buidl/erc721/erc721-metadata.tsx b/apps/www/registry/default/buidl/erc721/erc721-metadata.tsx
index 6811952..22a5287 100644
--- a/apps/www/registry/default/buidl/erc721/erc721-metadata.tsx
+++ b/apps/www/registry/default/buidl/erc721/erc721-metadata.tsx
@@ -48,7 +48,7 @@ function useERC721Metadata({
   address,
   chainId,
   tokenId,
-  ipfsGatewayUrl = "https://ipfs.io/ipfs",
+  ipfsGatewayUrl = "https://ipfs.io/ipfs/",
 }: useERC721MetadataProps) {
   const { data, isLoading, isError, error } = useContractRead({
     address,
@@ -64,14 +64,14 @@ function useERC721Metadata({
       queryFn: async () => {
         if (!data) throw new Error("No tokenUri found")
         const uri = data.replace("ipfs://", "")
-        const response = await fetch(`${ipfsGatewayUrl}/${uri}`)
+        const response = await fetch(`${ipfsGatewayUrl}${uri}`)
         const json = (await response.json()) as IERC721Metadata
 
         if (!json.image) throw new Error("No image found in metadata")
         if (!json.attributes) throw new Error("No attributes found in metadata")
 
         json.image = json.image.startsWith("ipfs://")
-          ? json.image.replace("ipfs://", `${ipfsGatewayUrl}/`)
+          ? json.image.replace("ipfs://", `${ipfsGatewayUrl}`)
           : json.image
         return json
       },
@@ -113,8 +113,6 @@ const Erc721MetadataImage = React.forwardRef<
     ipfsGatewayUrl,
   })
 
-  console.log(data)
-
   if (isLoading) {
     return <Skeleton className="h-6 w-12" {...props} />
   }
diff --git a/apps/www/registry/default/buidl/image-ipfs.tsx b/apps/www/registry/default/buidl/image-ipfs.tsx
index e93a6b9..2ab7f55 100644
--- a/apps/www/registry/default/buidl/image-ipfs.tsx
+++ b/apps/www/registry/default/buidl/image-ipfs.tsx
@@ -1,40 +1,59 @@
-import { useMemo } from "react"
+import * as React from "react"
 
 import { cn } from "@/lib/utils"
+import { Skeleton } from "@/registry/default/ui/skeleton"
 
-type ImageIpfs = React.HTMLAttributes<HTMLElement> & {
+const ErrorMessage = ({ error }: { error: Error | null }) => {
+  return (
+    <div className={cn("break-words text-sm font-medium text-red-500")}>
+      {error?.message ?? "Error while fetching image"}
+    </div>
+  )
+}
+
+interface ImageIpfsProps extends React.HTMLAttributes<HTMLImageElement> {
+  ipfsGatewayUrl?: string
   src: string
   alt: string
-  width?: string
-  height?: string
 }
 
-export const ImageIpfs = ({
-  className,
-  src,
-  alt,
-  width,
-  height,
-}: ImageIpfs) => {
-  const classes = cn(className)
-
-  const imgSrc = useMemo(
-    () =>
-      src?.startsWith("ipfs://")
-        ? src.replace("ipfs://", "https://gateway.ipfs.io/ipfs/")
-        : src,
-    [src]
-  )
+const ImageIpfs = React.forwardRef<HTMLImageElement, ImageIpfsProps>(
+  (
+    { className, src, alt, ipfsGatewayUrl = "https://ipfs.io/ipfs/", ...props },
+    ref
+  ) => {
+    const [isLoading, setIsLoading] = React.useState(true)
+    const [isError, setIsError] = React.useState(false)
 
-  if (!imgSrc) return null
+    const imgSrc = React.useMemo(
+      () =>
+        src?.startsWith("ipfs://")
+          ? src.replace("ipfs://", ipfsGatewayUrl)
+          : src,
+      [src, ipfsGatewayUrl]
+    )
 
-  return (
-    <img
-      src={imgSrc}
-      width={width}
-      height={height}
-      alt={alt}
-      className={classes}
-    />
-  )
-}
+    return (
+      <>
+        {isError ? (
+          <ErrorMessage error={null} />
+        ) : isLoading ? (
+          <Skeleton className={className} {...props} />
+        ) : null}
+        <img
+          ref={ref}
+          alt={alt}
+          src={imgSrc}
+          onLoad={() => setIsLoading(false)}
+          onError={() => setIsError(true)}
+          className={cn((isLoading || isError) && "hidden", className)}
+          {...props}
+        />
+      </>
+    )
+  }
+)
+
+ImageIpfs.displayName = "ImageIpfs"
+
+export { ImageIpfs }
diff --git a/apps/www/registry/default/buidl/is-wallet-connected.tsx b/apps/www/registry/default/buidl/is-wallet-connected.tsx
index 681306e..98e52d4 100644
--- a/apps/www/registry/default/buidl/is-wallet-connected.tsx
+++ b/apps/www/registry/default/buidl/is-wallet-connected.tsx
@@ -4,9 +4,9 @@ import * as React from "react"
 import { useAccount } from "wagmi"
 
 const IsWalletConnected = ({ children }: { children: React.ReactNode }) => {
-  const { isConnected } = useAccount()
+  const { isConnected, isConnecting } = useAccount()
 
-  if (isConnected) return <>{children}</>
+  if (isConnected || isConnecting) return <>{children}</>
 
   return null
 }
diff --git a/apps/www/registry/default/buidl/nonce.tsx b/apps/www/registry/default/buidl/nonce.tsx
index 9364ab9..6827681 100644
--- a/apps/www/registry/default/buidl/nonce.tsx
+++ b/apps/www/registry/default/buidl/nonce.tsx
@@ -12,7 +12,7 @@ import {
 import { cn } from "@/lib/utils"
 import { Skeleton } from "@/registry/default/ui/skeleton"
 
-interface NonceProps extends React.HTMLAttributes<HTMLSpanElement> {
+interface NonceProps extends React.HTMLAttributes<HTMLDivElement> {
   address?: `0x${string}`
   chainId?: number
 }
@@ -32,8 +32,8 @@ const useNonce = ({
   })
 }
 
-const Nonce = React.forwardRef<HTMLSpanElement, NonceProps>(
-  ({ className, address, chainId, ...props }: NonceProps) => {
+const Nonce = React.forwardRef<HTMLDivElement, NonceProps>(
+  ({ className, address, chainId, ...props }, ref) => {
     const connectedChainId = useChainId()
     const selectedChainId = chainId ?? connectedChainId
 
@@ -54,9 +54,9 @@ const Nonce = React.forwardRef<HTMLSpanElement, NonceProps>(
     }
 
     return (
-      <span className={className} {...props}>
+      <div ref={ref} className={className} {...props}>
         {data}
-      </span>
+      </div>
     )
   }
 )
diff --git a/apps/www/registry/default/buidl/transaction-status.tsx b/apps/www/registry/default/buidl/transaction-status.tsx
index 3c12894..e8bba57 100644
--- a/apps/www/registry/default/buidl/transaction-status.tsx
+++ b/apps/www/registry/default/buidl/transaction-status.tsx
@@ -35,21 +35,15 @@ const TransactionStatus = React.forwardRef<
   if (isError) return <ErrorMessage error={error} />
 
   return (
-    <>
-      <div
-        ref={ref}
-        className={cn("flex flex-col items-center", className)}
-        {...props}
-      >
-        {(isLoading || isSuccess) && (
-          <>
-            {isLoading && "Processing transaction..."}
-            {isSuccess && "Transaction successful!"}
-            {children}
-          </>
-        )}
-      </div>
-    </>
+    <div
+      ref={ref}
+      className={cn("flex flex-col items-center", className)}
+      {...props}
+    >
+      {isLoading && "Processing transaction..."}
+      {isSuccess && "Transaction successful!"}
+      {children}
+    </div>
   )
 })
 
diff --git a/apps/www/registry/default/buidl/transaction.tsx b/apps/www/registry/default/buidl/transaction.tsx
index d03c5f1..b5e90df 100644
--- a/apps/www/registry/default/buidl/transaction.tsx
+++ b/apps/www/registry/default/buidl/transaction.tsx
@@ -40,7 +40,7 @@ const TransactionBlockHash = React.forwardRef<HTMLDivElement, TransactionProps>(
     })
 
     if (isLoading && displayLoading)
-      return <Skeleton className={cn("h-6 w-[630px]", className)} {...props} />
+      return <Skeleton className={cn("h-6 w-[620px]", className)} {...props} />
 
     if (isError && displayError) return <ErrorMessage error={error} />
 
diff --git a/apps/www/registry/default/buidl/wallet-connect.tsx b/apps/www/registry/default/buidl/wallet-connect.tsx
index c4f3775..1b8d820 100644
--- a/apps/www/registry/default/buidl/wallet-connect.tsx
+++ b/apps/www/registry/default/buidl/wallet-connect.tsx
@@ -4,15 +4,14 @@ import * as React from "react"
 import { useAccount, useConnect, type Connector } from "wagmi"
 
 import { cn } from "@/lib/utils"
-
-import { Button, ButtonProps } from "../ui/button"
+import { Button, ButtonProps } from "@/registry/default/ui/button"
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "../ui/dialog"
+} from "@/registry/default/ui/dialog"
 
 const WalletConnect = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ children, className, ...props }, ref) => {
@@ -20,7 +19,7 @@ const WalletConnect = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const { connectors } = useConnect()
 
     if (address) {
-      return <span>{address}</span>
+      return <div className={className}>{address}</div>
     }
 
     return (
diff --git a/apps/www/registry/default/buidl/wallet-disconnect.tsx b/apps/www/registry/default/buidl/wallet-disconnect.tsx
index 3c57926..b898d40 100644
--- a/apps/www/registry/default/buidl/wallet-disconnect.tsx
+++ b/apps/www/registry/default/buidl/wallet-disconnect.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 import { useDisconnect } from "wagmi"
 
-import { Button, type ButtonProps } from "../ui/button"
+import { Button, type ButtonProps } from "@/registry/default/ui/button"
 
 const WalletDisconnect = React.forwardRef<
   HTMLButtonElement,
diff --git a/apps/www/registry/default/example/address-demo.tsx b/apps/www/registry/default/example/address-demo.tsx
index 43c2ad3..a7c9b3b 100644
--- a/apps/www/registry/default/example/address-demo.tsx
+++ b/apps/www/registry/default/example/address-demo.tsx
@@ -3,10 +3,9 @@ import {
   AddressCopy,
   AddressLink,
 } from "@/registry/default/buidl/address"
-
-import { IsWalletConnected } from "../buidl/is-wallet-connected"
-import { IsWalletDisconnected } from "../buidl/is-wallet-disconnected"
-import { WalletConnect } from "../buidl/wallet-connect"
+import { IsWalletConnected } from "@/registry/default/buidl/is-wallet-connected"
+import { IsWalletDisconnected } from "@/registry/default/buidl/is-wallet-disconnected"
+import { WalletConnect } from "@/registry/default/buidl/wallet-connect"
 
 export const ADDRESS_EXAMPLE = "0x761d584f1C2d43cBc3F42ECd739701a36dFFAa31"
 
diff --git a/apps/www/registry/default/example/blockie-demo.tsx b/apps/www/registry/default/example/blockie-demo.tsx
index 717dda4..45586fb 100644
--- a/apps/www/registry/default/example/blockie-demo.tsx
+++ b/apps/www/registry/default/example/blockie-demo.tsx
@@ -1,8 +1,7 @@
 import { Blockie } from "@/registry/default/buidl/blockie"
-
-import { IsWalletConnected } from "../buidl/is-wallet-connected"
-import { IsWalletDisconnected } from "../buidl/is-wallet-disconnected"
-import { WalletConnect } from "../buidl/wallet-connect"
+import { IsWalletConnected } from "@/registry/default/buidl/is-wallet-connected"
+import { IsWalletDisconnected } from "@/registry/default/buidl/is-wallet-disconnected"
+import { WalletConnect } from "@/registry/default/buidl/wallet-connect"
 
 const ADDRESS_EXAMPLE = "0x761d584f1C2d43cBc3F42ECd739701a36dFFAa31"
 
diff --git a/apps/www/registry/default/example/ens-avatar-demo.tsx b/apps/www/registry/default/example/ens-avatar-demo.tsx
index b7ff5bd..5af6e76 100644
--- a/apps/www/registry/default/example/ens-avatar-demo.tsx
+++ b/apps/www/registry/default/example/ens-avatar-demo.tsx
@@ -1,7 +1,5 @@
 import { EnsAvatar } from "@/registry/default/buidl/ens-avatar"
 import { IsWalletConnected } from "@/registry/default/buidl/is-wallet-connected"
-import { IsWalletDisconnected } from "@/registry/default/buidl/is-wallet-disconnected"
-import { WalletConnect } from "@/registry/default/buidl/wallet-connect"
 
 const ADDRESS_EXAMPLE = "0x761d584f1C2d43cBc3F42ECd739701a36dFFAa31"
 
@@ -15,9 +13,9 @@ export default function EnsAvatarDemo() {
       <IsWalletConnected>
         <EnsAvatar />
       </IsWalletConnected>
-      <IsWalletDisconnected>
+      {/* <IsWalletDisconnected>
         <WalletConnect />
-      </IsWalletDisconnected>
+      </IsWalletDisconnected> */}
 
       <h3 className="text-lg font-bold">Input ENS name (vitalik.eth)</h3>
       <EnsAvatar name="vitalik.eth" />
diff --git a/apps/www/registry/default/example/image-ipfs-demo.tsx b/apps/www/registry/default/example/image-ipfs-demo.tsx
index 5c86f6f..f9598cf 100644
--- a/apps/www/registry/default/example/image-ipfs-demo.tsx
+++ b/apps/www/registry/default/example/image-ipfs-demo.tsx
@@ -3,8 +3,7 @@ import { ImageIpfs } from "@/registry/default/buidl/image-ipfs"
 export default function ImageIpfsDemo() {
   return (
     <ImageIpfs
-      width="250"
-      height="250"
+      className="h-[250px] w-[250px]"
       src="ipfs://QmPbxeGcXhYQQNgsC6a36dDyYUcHgMLnGKnF8pVFmGsvqi"
       alt="ipfs"
     />
diff --git a/apps/www/registry/default/example/is-wallet-disconnected-demo.tsx b/apps/www/registry/default/example/is-wallet-disconnected-demo.tsx
index faa0d46..d8184ef 100644
--- a/apps/www/registry/default/example/is-wallet-disconnected-demo.tsx
+++ b/apps/www/registry/default/example/is-wallet-disconnected-demo.tsx
@@ -1,8 +1,7 @@
 import { IsWalletConnected } from "@/registry/default/buidl/is-wallet-connected"
 import { IsWalletDisconnected } from "@/registry/default/buidl/is-wallet-disconnected"
 import { WalletConnect } from "@/registry/default/buidl/wallet-connect"
-
-import { WalletDisconnect } from "../buidl/wallet-disconnect"
+import { WalletDisconnect } from "@/registry/default/buidl/wallet-disconnect"
 
 export default function IsWalletDisconnectedDemo() {
   return (
diff --git a/apps/www/registry/default/example/transaction-demo.tsx b/apps/www/registry/default/example/transaction-demo.tsx
index dd70126..46d70a1 100644
--- a/apps/www/registry/default/example/transaction-demo.tsx
+++ b/apps/www/registry/default/example/transaction-demo.tsx
@@ -17,20 +17,36 @@ export default function TransactionStatusDemo() {
       <h2 className="text-lg font-bold">Transaction</h2>
       <div>
         <h3 className="text-base font-bold">From:</h3>
-        <TransactionFrom chainId={chainId} className="mt-1" hash={hash} />
+        <TransactionFrom
+          chainId={chainId}
+          displayError={false}
+          className="mt-1"
+          hash={hash}
+        />
       </div>
       <div>
         <h3 className="text-base font-bold">To:</h3>
-        <TransactionTo chainId={chainId} className="mt-1" hash={hash} />
+        <TransactionTo
+          chainId={chainId}
+          displayError={false}
+          className="mt-1"
+          hash={hash}
+        />
       </div>
       <div>
         <h3 className="text-base font-bold">BlockHash:</h3>
-        <TransactionBlockHash chainId={chainId} className="mt-1" hash={hash} />
+        <TransactionBlockHash
+          chainId={chainId}
+          displayError={false}
+          className="mt-1"
+          hash={hash}
+        />
       </div>
       <div className="flex items-center gap-x-6">
         <div>
           <h3 className="text-base font-bold">BlockNumber:</h3>
           <TransactionBlockNumber
+            displayError={false}
             chainId={chainId}
             className="mt-1"
             hash={hash}
@@ -38,15 +54,30 @@ export default function TransactionStatusDemo() {
         </div>
         <div>
           <h3 className="text-base font-bold">Gas:</h3>
-          <TransactionGas chainId={chainId} className="mt-1" hash={hash} />
+          <TransactionGas
+            chainId={chainId}
+            displayError={false}
+            className="mt-1"
+            hash={hash}
+          />
         </div>
         <div>
           <h3 className="text-base font-bold">Gas Price:</h3>
-          <TransactionGasPrice chainId={chainId} className="mt-1" hash={hash} />
+          <TransactionGasPrice
+            chainId={chainId}
+            displayError={false}
+            className="mt-1"
+            hash={hash}
+          />
         </div>
         <div>
           <h3 className="text-base font-bold">Nonce:</h3>
-          <TransactionNonce chainId={chainId} className="mt-1" hash={hash} />
+          <TransactionNonce
+            chainId={chainId}
+            displayError={false}
+            className="mt-1"
+            hash={hash}
+          />
         </div>
       </div>
     </div>
diff --git a/apps/www/registry/default/example/transaction-status-demo.tsx b/apps/www/registry/default/example/transaction-status-demo.tsx
index 8b6f1f1..6c5da9b 100644
--- a/apps/www/registry/default/example/transaction-status-demo.tsx
+++ b/apps/www/registry/default/example/transaction-status-demo.tsx
@@ -1,7 +1,6 @@
+import { BlockExplorerLink } from "@/registry/default/buidl/block-explorer-link"
 import { TransactionStatus } from "@/registry/default/buidl/transaction-status"
 
-import { BlockExplorerLink } from "../buidl/block-explorer-link"
-
 export default function TransactionStatusDemo() {
   return (
     <div className="flex flex-col items-center gap-4 text-center">