Changes

components/CoinTable/CoinTable.tsx

@@ -29,7 +29,8 @@ const CoinTable: React.FC<CoinTableProps> = ({
     }
     return acc;
   }, {});
-
+
+  console.log("SELECTIONS",selectedChain,selectedCoin)
   return (
     <>
       {Object.entries(groupedCoins).map(([chain, chainCoins]) => (
@@ -52,11 +53,12 @@ const CoinTable: React.FC<CoinTableProps> = ({
               </thead>
               <tbody>
                 {chainCoins.map((token) => {
+                  console.log("TOKEN",token.name,chain)
                   return (
                     <tr
                       key={token.name}
                       className={`border-b ${
-                        selectedCoin === token.name && chain === selectedChain
+                        selectedCoin === token.symbol && chain === selectedChain
                           ? "bg-blue-100"
                           : "bg-white"
                       }`}

components/CoinTable/CoinTableUser.tsx

@@ -1,27 +1,34 @@
-import React from "react";
-
+import React, { useEffect, useState } from "react";
+import { desiredTokensByChain } from "../../utils/utils";
 interface Coin {
   name: string;
   symbol: string;
-  address: string|`0x${string}`;
-
+  address: string | `0x${string}`;
 }
 
 interface CoinTableProps {
   coins: Coin[];
   selectedCoin: string | null;
   confirmedCoin: string | null;
+  selectedChain: string | null;
   setSelectedCoin: (coin: string | null) => void;
   handleConfirmCoin: () => void;
 }
 
 const CoinTableUser: React.FC<CoinTableProps> = ({
   coins,
   selectedCoin,
+  selectedChain,
   confirmedCoin,
   setSelectedCoin,
   handleConfirmCoin,
 }) => {
+  const [symbol, setSymbol] = useState<string | null>(null);
+  useEffect(() => {
+    if (selectedChain && selectedCoin)
+      setSymbol(desiredTokensByChain[selectedChain][selectedCoin]);
+  }, [selectedCoin]);
+  console.log("HERE", symbol);
   return (
     <>
       <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
@@ -37,18 +44,21 @@ const CoinTableUser: React.FC<CoinTableProps> = ({
             </tr>
           </thead>
           <tbody>
-            {coins.map((token) => (
-              <tr
-                key={token.name}
-                className={`border-b ${
-                  selectedCoin === token.name ? "bg-blue-100" : "bg-white"
-                }`}
-                onClick={() => setSelectedCoin(token.address)}
-              >
-                <td className="px-6 py-4">{token.symbol}</td>
-                <td className="px-6 py-4">{token.name}</td>
-              </tr>
-            ))}
+            {coins.map((token) => {
+              console.log("ABC", token.name);
+              return (
+                <tr
+                  key={token.symbol}
+                  className={`border-b ${
+                    symbol === token.name ? "bg-blue-100" : "bg-white"
+                  }`}
+                  onClick={() => setSelectedCoin(token.address)}
+                >
+                  <td className="px-6 py-4">{token.symbol}</td>
+                  <td className="px-6 py-4">{token.name}</td>
+                </tr>
+              );
+            })}
           </tbody>
         </table>
       </div>

components/Deploy/Deploy.tsx

@@ -17,7 +17,9 @@ import { getContractAddress } from "viem";
 import Navbar from "../HomePage/Navbar";
 import { useRouter } from "next/router";
 import { desiredTokensByChain, tokenSymbolToName } from "../../utils/utils";
+import { useToast } from "@chakra-ui/react";
 const DeployWelcome: NextPage = () => {
+  const toast = useToast();
   const { switchNetwork } = useSwitchNetwork();
 
   const router = useRouter();
@@ -127,23 +129,43 @@ const DeployWelcome: NextPage = () => {
   const { data: client, isError, isLoading } = useWalletClient();
   const [fetchedTokens, setFetchedTokens] = useState<Coin[]>();
 
-  async function deployContract() {
+  const deployContract = async () => {
     let abiData = require("../../destabi.json");
 
     console.log(client);
     const gasLimit = BigInt("2000000");
     const factory = new ContractFactory(abiData["abi"], abiData["bytecode"]);
     try {
+      toast({
+        position:"top-right",
+        title:"Deploying your Contract",
+        description:"Your transaction has been submitted",
+        status:"loading",
+        isClosable:true,
+        duration:5000,
+
+      })
       const a = await client?.deployContract({
         abi: abiData["abi"],
         account: address,
         bytecode: abiData["bytecode"] as `0x${string}`,
         args: [confirmedCoin, "0xE592427A0AEce92De3Edee1F18E0157C05861564"],
         gas: gasLimit,
       });
-      if (!a) return;
+      if (!a){ 
+        return;
+      }
+
       const receipt = await publicClient.waitForTransactionReceipt({ hash: a });
       console.log("RECEIPT", receipt);
+      toast({
+        position:'top-right',
+        title: 'Contract Deployed',
+        description: "Your contract is deployed. We'll update it in your profile",
+        status: 'success',
+        duration: 5000,
+        isClosable: true,
+      })
       if (!address) return;
       const nonce = await publicClient.getTransactionCount({
         address: address,
@@ -155,6 +177,7 @@ const DeployWelcome: NextPage = () => {
       });
 
       console.log("Address", contractAddress);
+
       const request = await fetch(process.env.NEXT_PUBLIC_API_URL + "/deploy", {
         method: "POST",
         headers: {
@@ -168,8 +191,16 @@ const DeployWelcome: NextPage = () => {
         }),
       });
       console.log(await request.json());
+      toast({
+        position:'top-right',
+        title: 'Profile Updated',
+        description: "Your contract is stored in your profile",
+        status: 'success',
+        duration: 5000,
+        isClosable: true,
+      })
     } catch (err: unknown) {}
-  }
+  };
   const { heading, subheading } = getHeadingText();
 
   return (
@@ -232,6 +263,7 @@ const DeployWelcome: NextPage = () => {
                         >
                           <CoinTable
                             coins={fetchedTokens}
+                            selectedChain={confirmedChain}
                             selectedCoin={selectedCoin}
                             confirmedCoin={confirmedCoin}
                             setSelectedCoin={setSelectedCoin}

components/RedirectWelcome/RedirectWelcome.tsx

@@ -39,7 +39,7 @@ const RedirectWelcome = ({ txId, hero }: RedirectProps) => {
   const { chain } = useNetwork();
   const [fetchedTokens, setFetchedTokens] = useState<Coin[]>([]);
   const [sendConnext] = useConnext();
-  const [transferId, setTransferId] = useState<string | null>("0x53d74aee258bd3107a48a7b609596a65bd7ddc0f2c30cec7836a7fe2e7912856");
+  const [transferId, setTransferId] = useState<string | null>(null);
   const { openConnectModal } = useConnectModal();
   const { address, isConnecting, isDisconnected } = useAccount();
   const [confirmedChain, setConfirmedChain] = useState<string | null>(null);

hooks/useConnext.tsx

@@ -7,8 +7,9 @@ import { chainIdToRPC, domainToChainID, chainToDomainId } from "../utils/utils";
 import { SdkBase, SdkConfig, create } from "@connext/sdk";
 import "../destabi.json";
 import { WalletClient, parseEther } from "viem";
-
+import { useToast } from "@chakra-ui/react";
 export const useConnext = () => {
+  const toast = useToast();
   const [sdkBase, setSDKBase] = useState<SdkBase>();
   const [auth, setAuth] = useRecoilState(authState);
   const { chain } = useNetwork();
@@ -51,7 +52,6 @@ export const useConnext = () => {
             },
           },
         };
-        console.log("FLAG 1");
         const { sdkBase: data, sdkUtils: data2 } = await create(sdkConfig);
         setSDKBase(data);
       }
@@ -67,7 +67,13 @@ export const useConnext = () => {
     toAddress: string,
     amount: number
   ) {
-    console.log("FLAG2", token);
+    toast({
+      title: "Initiated",
+      description: "Fetching parameters for transaction",
+      status: "loading",
+      duration: 4000,
+      position: "top-right",
+    });
     let abiData = require("../destabi.json");
     const poolFee = 3000;
 
@@ -108,37 +114,67 @@ export const useConnext = () => {
       parseEther(amount.toString()).toString()
     );
 
-    function walletClientToSigner(walletClient: WalletClient) {
-      const { account, chain, transport } = walletClient;
-      if (!chain) {
-        return null;
-      }
-      const network = {
-        chainId: chain.id,
-        name: chain.name,
-        ensAddress: chain.contracts?.ensRegistry?.address,
-      };
-
-      const provider = new ethers.providers.Web3Provider(transport, network);
-      const signer = provider.getSigner(account?.address);
-      return signer;
-    }
-
     const signer = client ? walletClientToSigner(client) : null;
 
     if (approveTxReq) {
+      toast({
+        title:"Approval Needed",
+        description:"Please approve the connext contract to spend your tokens",
+        status:"warning",
+        duration:3000,
+        position:"top-right"
+
+      })
       const approveTxReceipt = await signer?.sendTransaction(approveTxReq);
+
       await approveTxReceipt?.wait();
     }
-
+    toast({
+      title:"Approved",
+      description:"Token Approved! Fetching Transaction parameters",
+      status:"success",
+      duration:3000,
+      position:"top-right"
+
+    })
     const xcallTxReq = await sdkBase?.xcall(xcallParams)!;
     console.log(xcallTxReq);
     xcallTxReq.gasLimit = BigNumber.from("400000");
     const xcallTxReceipt = await signer?.sendTransaction(xcallTxReq);
+    toast({
+      title:"Transaction Sent",
+      description:"Your transaction has been submitted ",
+      status:"success",
+      duration:4000,
+      position:"top-right"
+
+    })
     console.log(xcallTxReceipt);
     await xcallTxReceipt?.wait();
+    toast({
+      title:"Transaction Successful",
+      description:"Your transaction is registed on chain!",
+      status:"loading",
+      duration:3000,
+      position:"top-right"
+
+    })
     return xcallTxReceipt?.hash;
   }
+  function walletClientToSigner(walletClient: WalletClient) {
+    const { account, chain, transport } = walletClient;
+    if (!chain) {
+      return null;
+    }
+    const network = {
+      chainId: chain.id,
+      name: chain.name,
+      ensAddress: chain.contracts?.ensRegistry?.address,
+    };
 
+    const provider = new ethers.providers.Web3Provider(transport, network);
+    const signer = provider.getSigner(account?.address);
+    return signer;
+  }
   return [sendConnext];
 };