Refactoring UI

packages/nextjs/pages/bridge.tsx

@@ -248,12 +248,16 @@ const Bridge: NextPage = () => {
               <div className="stat">
                 <ul className="list-disc">
                   <li className="label-text-alt text-left">
-                    You are in <span>{configuredNetwork.name}</span>
+                    You are in <span className="italic">{configuredNetwork.name}</span>
                     <br />
-                    NFTs must be in <span>{configuredNetwork.name}</span> or change the network in your wallet.
+                    NFTs must be in <span className="italic">{configuredNetwork.name}</span> or change the network in
+                    your wallet.
                   </li>
                   <li className="label-text-alt text-left">
-                    NFT must be <Link href={"/approve"}>approved</Link>
+                    To bridge original blockchain, the NFT must be{" "}
+                    <Link href={"/approve"} className="italic bg-base-300">
+                      approved
+                    </Link>
                   </li>
                   <li className="label-text-alt text-left">
                     Its <span className={"bold"}>Free</span>

packages/nextjs/pages/index.tsx

@@ -11,13 +11,12 @@ const Home: NextPage = () => {
         <div className="px-5">
           <h1 className="text-center mb-8">
             <span className="block text-4xl font-bold">NFT Bridge</span>
-            <span className="block text-2xl mb-2">Powered by Chainlink CCIP</span>
+            <span className="block text-2xl mb-2">
+              Powered by <Link href={"https://chain.link/cross-chain"}>Chainlink CCIP</Link>
+            </span>
           </h1>
           <p className="text-center text-lg">
-            An NFT Bridge, secured by decentralized Oracles from a
-            <Link href={"https://chain.link/cross-chain"} className="italic bg-base-300 font-bold max-w-full ml-1">
-              Unicorn
-            </Link>
+            An <strong className="text-bold">NFT Bridge</strong>, that is:
           </p>
           <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
             <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
@@ -40,11 +39,15 @@ const Home: NextPage = () => {
           <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
             <div className="flex flex-col px-10 py-10 text-center items-center max-w-xs rounded-3xl">
               <p>Are you a Project Owner?</p>
-              <button className="btn btn-secondary">Setup</button>
+              <Link href="/register" className="btn btn-secondary">
+                Register
+              </Link>
             </div>
             <div className="flex flex-col px-10 py-10 text-center items-center max-w-xs rounded-3xl">
               <p>Are you an NFT Owner?</p>
-              <button className="btn btn-primary">Primary</button>
+              <Link href="/bridge" className="btn btn-primary">
+                Bridge
+              </Link>
             </div>
           </div>
         </div>

packages/nextjs/pages/setup.tsx

@@ -112,6 +112,49 @@ const Setup: NextPage = () => {
       notification.error(<TxnNotification message="The NFT already set up a link to the target blockchain" />);
     }
 
+    const res0 = (await readContract({
+      address: wrapperAddress as string,
+      abi: WrapperNft as Abi,
+      functionName: "nftSupportedChains",
+      args: [0],
+    })) as bigint;
+    console.log(`first supported chain`, res0);
+
+    const res1 = (await readContract({
+      address: wrapperAddress as string,
+      abi: WrapperNft as Abi,
+      functionName: "nftSupportedChains",
+      args: [1],
+    })) as bigint;
+    console.log(`second supported chain`, res1);
+
+    const routerInWrapped = (await readContract({
+      address: wrapperAddress as string,
+      abi: WrapperNft as Abi,
+      functionName: "router",
+      args: [],
+    })) as string;
+    console.log(`router in wrapped nft`, routerInWrapped);
+
+    const linked0 = (await readContract({
+      address: wrapperAddress as string,
+      abi: WrapperNft as Abi,
+      functionName: "linkedNfts",
+      args: [res0],
+    })) as string;
+    console.log(`first linked nft`, linked0);
+
+    const linked1 = (await readContract({
+      address: wrapperAddress as string,
+      abi: WrapperNft as Abi,
+      functionName: "linkedNfts",
+      args: [res1],
+    })) as string;
+    console.log(`second linked nft`, linked1);
+
+    console.log(`Wrapper`, wrapperAddress);
+
+    return;
     // Calculating the fee.
     let createFee: bigint;
     notificationId = notification.loading(<TxnNotification message="Calculating the fee" />);
@@ -220,7 +263,7 @@ const Setup: NextPage = () => {
                       Registered
                     </Link>
                   </li>
-                  <li className="label-text-alt text-left">:) Supports cross-chain, simply setup repeatedly</li>
+                  {/*<li className="label-text-alt text-left">:) Supports cross-chain, simply setup repeatedly</li>*/}
                 </ul>
               </div>
             </div>
@@ -258,8 +301,12 @@ const Setup: NextPage = () => {
             <div className="stats">
               <div className="stat">
                 <ul className="list-disc">
+                  {/*<li className="label-text-alt text-left">*/}
+                  {/*  Setup creates a linked NFT on a target blockchain linked to all other Linked NFTs and Wrapped NFT.*/}
+                  {/*</li>*/}
                   <li className="label-text-alt text-left">
-                    Setup creates a linked NFT on a target blockchain linked to all other Linked NFTs and Wrapped NFT.
+                    Create an NFT on blockchain code(<span className="italic">{selectedNetwork}</span>) linked to the
+                    NFT in <span className="italic">{configuredNetwork.name}</span>
                   </li>
                 </ul>
               </div>