Merge branch 'main' of https://github.com/emerald-fi/erc721-superchai…

…n-bridge into feat/ux-update

README.md

@@ -1,5 +1,3 @@
-<!-- ![image](/apps/website/app/opengraph-image.png) -->
-
 # Based Bridge - Native Superchain ERC721 Bridge
 
 The Based Bridge application allows you to bridge your NFTs from Ethereum to the Superchain - and back again if needed. It uses the Optimism developed smart contracts to bridge the NFTs between the two networks.

apps/website/app/(general)/create/page.tsx

@@ -6,7 +6,7 @@ export default function CreatePage() {
   return (
     <div className="container relative mt-20 flex h-full w-full flex-col items-center justify-center px-4 pb-16 sm:px-0">
       <div className="w-full text-center">
-        <h4 className="mb-4 text-2xl font-black sm:text-6xl">
+        <h4 className="mb-4 text-4xl font-black sm:text-6xl">
           Create New L2 NFT
         </h4>
         <p className="mx-auto text-base leading-relaxed lg:w-3/4 xl:w-2/4">
@@ -18,17 +18,17 @@ export default function CreatePage() {
       <Card className="my-12 w-full max-w-lg p-10">
         <FormCreateL2ERC721 />
       </Card>
-      <div className="w-full max-w-lg text-center">
-        <p className="mb-4 text-xs">
+      <div className="w-full max-w-xl text-center">
+        <p className="mb-4 text-sm">
           <span className="font-bold">
-            We recommend only creating a new L2 NFT with the approval of the
+            We recommend creating a new L2 NFT with the approval of the
             collection creator.
           </span>{" "}
-          This ensures that the new L2 NFT can be properly associated with the
+          This ensures the new L2 NFT can be properly associated with the
           original collection and third-party platforms, like OpenSea, can
-          properly properly display the provenance.
+          properly display the provenance.
         </p>
-        <p className="text-xs">
+        <p className="text-sm">
           <LinkComponent href="/documentation" className="link font-bold">
             Learn more about getting a collection listed and verified.
           </LinkComponent>

apps/website/app/(general)/documentation/page.tsx

@@ -69,11 +69,11 @@ export default function DocumentationPage() {
       </p>
       <img src="/images/docs-create-collection.png" alt="Create New L2 NFT" />
       <p className="">
-        The "name" and "symbol" will be automatically generated using the
+        The "name" and "symbol" fields will be automatically populated using the
         original Ethereum L1 NFT collection name and symbol.{" "}
         <span className="font-bold">
-          It's highly recommended to use the same name and symbol to avoid
-          confusion for holders.
+          The fields can be updated, but it's highly recommended to use the same
+          name and symbol to avoid confusion for holders.
         </span>
       </p>
       <h4 className="text-2xl font-bold">
@@ -83,20 +83,156 @@ export default function DocumentationPage() {
         <span className="font-bold">
           Verifying the collection provenance is a crucial step in the process.
         </span>{" "}
-        This step ensures that the collection is authentic and not a phishing
-        attempt.
+        This step ensures that the collection is authentic and the "official"
+        collection. Giving holders confidence that the collection is legitimate.
+      </p>
+      <img
+        className="rounded-xl"
+        src="/images/verification-cast.png"
+        alt="Provenance Verification Example"
+      />
+      <p className="text-xs">
+        <LinkComponent
+          className="link"
+          href="https://warpcast.com/kames/0x1a34f541"
+        >
+          Example of a Provenance Verification
+        </LinkComponent>
       </p>
       <p className="">
         Since the Optimism <span className="font-bold">L1ERC721Bridge</span> and{" "}
         <span className="font-bold">OptimismERC721Factory</span> smart contracts
         are open and permissionless, anyone can create a new Superchain L2
-        ERC721 collection from an L1 Ethereum ERC721 collection. That's why it's
-        important to verify the collection provenance to ensure the collection
-        is authentic.
+        ERC721 collection from an L1 Ethereum ERC721 collection.{" "}
+        <span className="italic">
+          That's why it's important to verify the collection provenance to
+          ensure the collection is authentic.
+        </span>
+      </p>
+      <p className="font-bold">Potential Verification Methods:</p>
+      <ul className="my-4 list-inside list-decimal pl-5">
+        <li>Ethereum Attestation Station</li>
+
+        <li>Twitter Post</li>
+
+        <li>Farcaster Post</li>
+
+        <li>Github Gist</li>
+
+        <li>Other</li>
+      </ul>
+      <p>
+        A signature/attestation from the original ERC721 collection deployer
+        being the strongest form of provenance verification. But if a
+        creator/team is unable to access the original private keys that deployed
+        the smart contract, a public statement will also work.
+      </p>
+      <p>
+        <LinkComponent
+          className="link"
+          href="https://optimism.easscan.org/attestation/attestWithSchema/0xf58b8b212ef75ee8cd7e8d803c37c03e0519890502d5e99ee2412aae1456cafe"
+        >
+          Click here
+        </LinkComponent>{" "}
+        to verify using the Ethereum Attestation Station.
       </p>
+
       <h4 className="text-2xl font-bold">
         Step 3. Update the Emerald Superchain NFT token list
       </h4>
+      <p>
+        The final step is to add the new NFT collection to the Emerald
+        Superchain NFT token list. The token list is a JSON file that contains
+        all the verified L2 NFT collections that are available on the Based
+        Bridge application.
+      </p>
+      <p>
+        <LinkComponent
+          className="link"
+          href="https://github.com/emerald-fi/erc721-superchain-bridge/blob/main/packages/token-list/src/default-token-list.json"
+        >
+          Emerald NFT Superchain Token List
+        </LinkComponent>
+      </p>
+      <p>
+        The testnet token list has a complete example using the Emerald NFT
+        collection. You can use this as a reference when adding your collection
+        to the mainnet token list.
+      </p>
+      <p>
+        <LinkComponent
+          className="link"
+          href="https://github.com/emerald-fi/erc721-superchain-bridge/blob/main/packages/token-list/src/testnet-token-list.json"
+        >
+          Testnet Emerald NFT Superchain Token List
+        </LinkComponent>
+      </p>
+      <h3 className="text-xl font-bold">Technical User</h3>
+      <p>
+        If you are a technical user and would like to add a new L2 NFT
+        collection to the Emerald Superchain NFT token list, you can submit a
+        pull request to the Github repository.
+      </p>
+      <ol className="list-decimal pl-8">
+        <li>
+          Fork the{" "}
+          <LinkComponent
+            className="link"
+            href="https://github.com/emerald-fi/erc721-superchain-bridge"
+          >
+            {" "}
+            Emerald Superchain NFT token list repository
+          </LinkComponent>
+          .
+        </li>
+        <li>Add the new L2 NFT collection to the token list.</li>
+        <li>Submit a pull request to the main repository.</li>
+        <li>
+          The Emerald team will review the pull request and merge it into the
+          main repository.
+        </li>
+      </ol>
+      <h3 className="text-xl font-bold">Non-Technical User</h3>
+      <p>
+        If you are a non-technical user and would like to add a new L2 NFT
+        collection to the Emerald Superchain NFT token list, you can reach out
+        to the Emerald team directly via Telegram.
+      </p>
+      <p className="">
+        <LinkComponent className="link" href="https://t.me/emeraldfi">
+          Emerald Telegram Channel
+        </LinkComponent>
+      </p>
+      <p>
+        We'll help you get everything setup and added to the Emerald Superchain
+        NFT token list. You just need to provide the necessary information and
+        we'll take care of the rest.
+      </p>
+
+      <h3 className="text-2xl font-bold">Support</h3>
+
+      <p className="">
+        If you have any questions, need assistance, or are non-technical, you
+        can join the Emerald Telegram channel and we'll help you get everything
+        setup.
+      </p>
+
+      <p className="">
+        <LinkComponent className="link" href="https://t.me/emeraldfi">
+          Emerald Telegram Channel
+        </LinkComponent>
+      </p>
+
+      <p className="">Or reach out to us in the Emerald Farcaster channel.</p>
+
+      <p className="">
+        <LinkComponent
+          className="link"
+          href="https://warpcast.com/~/channel/emerald"
+        >
+          Emerald Farcaster Channel
+        </LinkComponent>
+      </p>
     </ContentPage>
   )
 }

apps/website/app/layout.tsx

@@ -19,7 +19,9 @@ export const metadata = {
   icons: {
     icon: "/favicon.ico",
   },
-  themeColor: "#feefc4",
+  visualViewport: {
+    themeColor: "#feefc4",
+  },
   openGraph: {
     title: siteConfig.name,
     description: siteConfig.description,

apps/website/components/blockchain/erc721/erc721-collection-selector.tsx

@@ -449,7 +449,7 @@ export function Erc721CollectionSelector({
             <span className="font-bold">
               Don't see an NFT collection you want to bridge?
             </span>{" "}
-            <br /> Try searching using the mainnet address or{" "}
+            <br /> Try searching using the collection address or{" "}
             <LinkComponent className="link font-bold" href="/documentation">
               learn how to add a new collection
             </LinkComponent>

apps/website/components/forms/form-create-l2-erc721.tsx

@@ -120,8 +120,6 @@ export const FormCreateL2ERC721 = ({
       },
     })
 
-  getOtimismMintableERC721ByRemoteTokenQuery.data
-
   const { address, chainId: currentChainId } = useAccount()
   const erc721NameRead = useReadErc721Name({
     chainId: l1Chain.chainId,
@@ -240,8 +238,11 @@ export const FormCreateL2ERC721 = ({
           getOtimismMintableERC721ByRemoteTokenQuery.data
             ?.optimismMintableERC721s?.items?.length > 0 && (
             <div className="flex flex-col gap-y-2">
-              <p className="text-sm font-medium text-red-500">
-                This NFT has already been bridged to the L2 network.
+              <p className="text-center text-sm font-medium text-red-500">
+                The NFT collection has already been synced with{" "}
+                {l2NetworksOptions[appMode][currentChainId || 1].name}. If the
+                token is not in the Emerald Superchain NFT token list, please
+                contact the collection creator to have it added.
               </p>
               <Card className="max-h-[200px] overflow-y-auto break-words p-4">
                 {getOtimismMintableERC721ByRemoteTokenQuery.data?.optimismMintableERC721s?.items?.map(
@@ -331,27 +332,27 @@ const NFTAddressFromTransactionReceipt = ({
   if (!localToken) return null
 
   return (
-    <Card className="mt-4 p-3 text-xs">
+    <Card className="mt-4 p-3 text-sm">
       <p className="mb-2">
-        <span className="font-bold">Congratulations!</span> The L2 NFT has been
+        <span className="font-bold">Success!</span> The L2 NFT has been
         successfully created.
       </p>
       <div className="mb-2">
         <BlockExplorerLink
           address={localToken}
-          className="font-bold text-blue-700 no-underline underline-offset-2 hover:underline"
+          className="link font-bold no-underline underline-offset-2 hover:underline"
         >
           {localToken}
         </BlockExplorerLink>
       </div>
       <p className="mb-2">
         Please review the{" "}
-        <LinkComponent className="link" href="/documentation">
+        <LinkComponent className="link font-bold" href="/documentation">
           documentation
         </LinkComponent>{" "}
-        to learn how a collection can listed and verified in the{" "}
+        to learn how a collection can listed/verified in the{" "}
         <LinkComponent
-          className="link"
+          className="link font-bold"
           href="https://github.com/emerald-fi/erc721-superchain-bridge/blob/main/packages/token-list/src/default-token-list.json"
         >
           Emerald Superchain NFT token list

packages/token-list/README.md

@@ -0,0 +1,50 @@
+# Embrace Superchain ERC721 Token List
+
+The Emerald Superchain ERC721 Token List is a list of verified NFT contracts on the Superchain network.
+
+## Adding A New ERC71 Token
+The token list is display verified Superchain NFT contracts in the [Based Bridge Application](https://bridge.emeraldfi.xyz/).
+
+The District Labs, Inc. team is responsible for maintaining the token list and adding new NFT contracts to the list.
+
+But we welcome anyone to submit new NFT contracts to the list. To add a new token to the list, you need to open a pull request adding the NFT contract address from the L1 network and the corresponding bridged contract address on the L2 network to the token list.
+
+[Superchain NFT Documentation](https://bridge.emeraldfi.xyz/documentation)
+
+To be added to the token list, a public statement that can be linked to, using an official channel of the NFT project is required. This link will be added to the token list to verify the authenticity of the NFT contract.
+
+## Example of a Token List Entry
+
+Below is an example of a complete token list entry.
+
+```json
+{
+    "chainId": 11155111,
+    "address": "0xEd7AEda7069fD33D558ecD5D11b281359EfDb40e",
+    "name": "Emerald",
+    "symbol": "EMRLD",
+    "logoURI": "https://raw.seadn.io/files/e50201ecff78ca6b8613c2bbe4eefb83.svg",
+    "extensions": {
+        "verification": "https://warpcast.com/kames/0x1a34f541",
+        "bridgeInfo": {
+            "84532": {
+                "tokenAddress": "0x113054f9992ba521D1c4B985b449a4C301291806"
+            },
+            "11155420": {
+                "tokenAddress": "0x79351CBCFDA3B78953f19b268396cFaa80fF2298"
+            }
+        }
+    }
+}
+```
+
+The `extensions` field contains the verification link and the bridge information for the token.
+
+The `verification` link is the public statement from the NFT project that verifies the authenticity of the NFT contract.
+
+The `bridgeInfo` object contains the chainId and the token address for the L2 network.
+
+
+## Credit
+
+This NFT token list standard is based on [Uniswap Token List](). The standard includes minor modifications to support NFT contracts and collection verification. 

packages/token-list/src/testnet-token-list.json

@@ -17,6 +17,7 @@
       "symbol": "EMRLD",
       "logoURI": "https://raw.seadn.io/files/e50201ecff78ca6b8613c2bbe4eefb83.svg",
       "extensions": {
+        "verification": "https://warpcast.com/kames/0x1a34f541",
         "bridgeInfo": {
           "84532": {
             "tokenAddress": "0x113054f9992ba521D1c4B985b449a4C301291806"