Feat: add support for ens names

apps/website/components/blockchain/erc721/erc721-token-id-selector.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useMemo, useState } from "react"
 import Image from "next/image"
+import { ENS_CONTRACT_ADDRESS } from "@/data/constants"
 import { type Address } from "viem"
 
 import { type Nft } from "@/lib/hooks/web3/use-nfts-for-owner"
@@ -31,6 +32,12 @@ export function Erc721TokenIdSelector({
     },
     [setSelectedTokenId]
   )
+
+  const isEnsContract = useMemo(
+    () => contractAddress === ENS_CONTRACT_ADDRESS,
+    [contractAddress]
+  )
+
   const filteredTokenList = useMemo(
     () =>
       nfts?.filter(
@@ -63,35 +70,37 @@ export function Erc721TokenIdSelector({
   return (
     <div
       className={cn(
-        "grid max-h-[380px] w-full grid-cols-1 gap-4 overflow-y-auto rounded-xl border border-primary/10 p-3 sm:grid-cols-2",
+        "grid max-h-[380px] w-full grid-cols-1 gap-2 overflow-y-auto rounded-xl border border-primary/10 p-3",
         className
       )}
     >
       {filteredTokenList?.map((nft) => (
         <Card
           className={cn(
-            "flex h-fit cursor-pointer items-center gap-x-6 border-2  p-4 transition duration-200",
+            "flex h-fit w-full cursor-pointer items-center gap-x-4 border-2 p-4 transition duration-200",
             selectedTokenId === nft.tokenId
               ? "border-primary"
               : "hover:border-primary/25"
           )}
           onClick={() => handleSelect(nft.tokenId)}
           key={nft.tokenId}
         >
-          <div className="relative h-[60px] w-[60px]">
+          <div className="relative h-[64px] min-w-[64px]">
             {imageLoaded ? null : (
-              <Skeleton className="absolute h-[60px] w-[60px] rounded-md" />
+              <Skeleton className="absolute h-[64px] w-[64px] rounded-md" />
             )}
             <Image
-              width={60}
-              height={60}
+              width={64}
+              height={64}
               className={cn("absolute rounded-md", !imageLoaded && "invisible")}
               alt={`${nft.tokenId} image`}
               src={nft.imageUrl ?? "/logo.svg"}
               onLoad={() => setImageLoaded(true)}
             />
           </div>
-          <div className="text-2xl font-semibold">#{nft.tokenId}</div>
+          <div className="overflow-x-auto text-xl font-semibold">
+            {isEnsContract ? nft.name : "#" + nft.tokenId}
+          </div>
         </Card>
       ))}
     </div>

apps/website/components/forms/form-L1-to-L2-bridge.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useMemo, useState, type HTMLAttributes } from "react"
 import Image from "next/image"
 import { l1Erc721BridgeAbi } from "@/data/abis"
+import { ENS_CONTRACT_ADDRESS } from "@/data/constants"
 import { l1NetworkOptions, l2NetworksOptions } from "@/data/networks/options"
 import { type Address, type BaseError } from "viem"
 import {
@@ -69,6 +70,10 @@ export function FormL1ToL2Bridge({
   })
 
   const { chainId: currentChainId } = useAccount()
+  const isEnsContract = useMemo(
+    () => localToken === ENS_CONTRACT_ADDRESS,
+    [localToken]
+  )
 
   // ERC721 Approve
   const readErc721GetApproved = useReadErc721GetApproved({
@@ -189,7 +194,7 @@ export function FormL1ToL2Bridge({
             <Label>Item</Label>
             {nft ? (
               <div className="flex items-center gap-x-5 p-2">
-                <div className="relative h-[80px] w-[80px]">
+                <div className="relative h-[80px] min-w-[80px]">
                   {imageLoaded ? null : (
                     <Skeleton className="absolute h-[80px] w-[80px] rounded-md" />
                   )}
@@ -205,7 +210,9 @@ export function FormL1ToL2Bridge({
                     onLoad={() => setImageLoaded(true)}
                   />
                 </div>
-                <div className="text-3xl font-semibold">#{nft.tokenId}</div>
+                <div className="overflow-x-auto text-3xl font-semibold">
+                  {isEnsContract ? nft.name : "#" + nft.tokenId}
+                </div>
               </div>
             ) : (
               <Skeleton className="h-16 w-full" />

apps/website/components/forms/form-select-erc721-token-l1.tsx

@@ -89,17 +89,20 @@ export function FormSelectErc721TokenL1({
   })
 
   const onSubmit: SubmitHandler<FormData> = (data) => {
-    const remoteToken = tokenList.tokens.find(
+    const selectedToken = tokenList.tokens.find(
       ({ address }) => address.toLowerCase() === data.localToken.toLowerCase()
-    )?.extensions?.bridgeInfo?.[data?.destinationNetwork]
-      ?.tokenAddress as Address
+    )
+    const remoteTokenAddress = selectedToken?.extensions?.bridgeInfo?.[
+      data?.destinationNetwork
+    ]?.tokenAddress as Address
+
     onTokenSelected?.({
       destinationNetwork: data.destinationNetwork,
-      remoteToken: data.remoteToken ?? remoteToken,
+      remoteToken: data.remoteToken ?? remoteTokenAddress,
       localToken: data.localToken,
       tokenId: data.tokenId,
-      name: data.name ?? "",
-      logoURI: data.logoURI ?? "/logo.svg",
+      name: data.name ?? selectedToken?.name ?? "",
+      logoURI: data.logoURI ?? selectedToken?.logoURI ?? "/logo.svg",
     })
   }
 

apps/website/components/ui/card.tsx

@@ -8,10 +8,7 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
-      className
-    )}
+    className={cn("rounded-xl border text-card-foreground shadow", className)}
     {...props}
   />
 ))
@@ -73,4 +70,4 @@ const CardFooter = React.forwardRef<
 ))
 CardFooter.displayName = "CardFooter"
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }

apps/website/data/constants.ts

@@ -0,0 +1 @@
+export const ENS_CONTRACT_ADDRESS = "0x57f1887a8BF19b14fC0dF6Fd9B2acc9Af147eA85"

apps/website/lib/hooks/web3/use-nfts-for-owner.ts

@@ -120,9 +120,9 @@ export function useNftsForOwner({ owner, contractAddresses, chainId }: Params) {
           ...nft,
           // Adds a convenience property that gets fallback image from the NFT metadata
           imageUrl:
-            nft.image.cachedUrl ??
             nft.image.pngUrl ??
             nft.image.originalUrl ??
+            nft.image.cachedUrl ??
             nft.contract.openSeaMetadata?.imageUrl,
         }))
       return allNfts

apps/website/next.config.mjs

@@ -4,6 +4,7 @@ import "./env.mjs"
 const nextConfig = {
   reactStrictMode: true,
   images: {
+    dangerouslyAllowSVG: true,
     remotePatterns: [
       {
         protocol: "https",