UltimateDigits · Thirumurugan7 · Oct 9, 2024 · Oct 9, 2024 · Oct 9, 2024 · Oct 9, 2024
diff --git a/index.html b/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="description" content="Instantly evaluate any cryptocurrency token directly on Twitter with real-time insights and token metrics, designed for traders and enthusiasts" />
+    <meta name="description" content="Buy your Virtual Number within a minute abd receieve crypto seamlessly. Click anywhere to start." />
     <meta name="twitter:card" content="player" />
     <meta name="twitter:site" content="https://x.com/ultimatedigits">
     <meta name="twitter:title" content="CCIP X Wink" />
-    <meta name="twitter:description" content="Evaluate any cryptocurrency token instantly on Twitter with real-time insights and metrics, right in your feed." />    
-    <meta name="twitter:player" content="https://ccip-mint.vercel.app">
+    <meta name="twitter:description" content="Buy your Virtual Number within a minute abd receieve crypto seamlessly. Click anywhere to start." />    
+    <meta name="twitter:player" content="https://ccip-mint-ashen.vercel.app">
     <meta name="twitter:player:width" content="360">
     <meta name="twitter:player:height" content="560">
     <meta name="twitter:image" content="https://res.cloudinary.com/dg8ssfxu3/image/upload/v1722584912/ud/y6uypvxozxsutmrkhot0.png">
@@ -22,7 +22,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="CCIP X Wink"
-      content="Instantly evaluate any cryptocurrency token directly on Twitter with real-time insights and token metrics, designed for traders and enthusiasts "
+      content="Buy your Virtual Number within a minute abd receieve crypto seamlessly. Click anywhere to start. "
     />
     <title>CCIP X Wink</title>
   </head>

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.jsx b/src/App.jsx
@@ -4,6 +4,7 @@ import SearchResults from './components/SearchResults';
 import CartCheckout from './components/CartCheckout'; 
 import MintNFT from './components/nft/MintNumber';
 import MintSuccess from './components/Successful';
+import BridgeSuccess from './components/BridgeSuccess';
 import { GlobalURL } from './constants';
 import { useAccount } from 'wagmi'
 
@@ -38,7 +39,8 @@ const App = () => {
   const [showCartCheckout, setShowCartCheckout] = useState(false); // New state for CartCheckout
   const [showMintNFT, setShowMintNFT] = useState(false); // New state for MintNFT
   const [showMintSuccess, setShowMintSuccess] = useState(false); // New state for MintSuccess
-
+  const [showBridgeSuccess, setShowBridgeSuccess] = useState(false);
+  const [hash, setHash] = useState("");
   // Function to handle showing search results
   const handleSearch = (inputValue) => {
     setSearchInput(inputValue); // Store the phone number
@@ -59,11 +61,20 @@ const App = () => {
     setShowMintNFT(false); // Hide MintNFT component
   };
 
+  const handleBridgeSuccess = () => {
+    setShowBridgeSuccess(true);
+    setShowMintSuccess(false);
+  }
+
   return (
     <div className="min-h-screen w-full bg-cover bg-center bricolage-font pb-6 bg-gradient-to-t from-[#06061E] via-[#06061E] to-blue-950 flex justify-center items-center inter-font">
       <div className="space-y-3">
-        {showMintSuccess ? ( // Conditionally render MintSuccess component
-          <MintSuccess />
+        {showBridgeSuccess ? 
+        ( 
+          <BridgeSuccess hash={hash} />
+        )
+          : showMintSuccess ? ( // Conditionally render MintSuccess component
+          <MintSuccess onBridgeSuccess={handleBridgeSuccess} setHash={setHash} />
         ) : showMintNFT ? ( // Conditionally render MintNFT component
           <MintNFT onMintSuccess={handleMintSuccess} /> // Pass function to MintNFT
         ) : showCartCheckout ? ( 

diff --git a/src/components/BridgeSuccess.jsx b/src/components/BridgeSuccess.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const BridgeSuccess = ({ hash }) => {
+  return (
+    <div className='text-white text-center'>
+        <div className='font-bold text-base'>
+            Bridging Successful
+        </div>
+        <div className='text-base font-semibold pt-2'>
+            Arbitrum Transaction Hash:
+        </div>
+        <a className='text-base cursor-pointer pt-2 underline' href={`https://sepolia.arbiscan.io/tx/${hash}`} target='_blank'>
+            {hash}
+        </a>
+    </div>
+  )
+}
+
+export default BridgeSuccess;
diff --git a/src/components/Successful.jsx b/src/components/Successful.jsx
@@ -4,13 +4,24 @@ import { useAccount } from "wagmi";
 import { selectCartItems } from "../redux/cartSlice";
 import { useSelector } from "react-redux";
 import { formatPhoneNumber } from "../functions/formatPhoneNumber";
+import { switchChain } from '@wagmi/core'
+import { arbitrumSepolia } from '@wagmi/core/chains'
+import { config } from "../main";
+import { ethers } from 'ethers';
+import { uploadToIPFS } from "../functions/ipfs/uploadToIPF";
+import checkTotalPrice from "../functions/checkTotalPrice";
+import { RECEIVER_ADDRESS } from "../constants";
+import { MINTARBITRUMNUMBERNFT } from "../contract/contractIntegration";
 
-
-const MintSuccess = ({ }) => {
+const MintSuccess = ({ onBridgeSuccess, setHash }) => {
     const account = useAccount();
 
     const cartArray = useSelector(selectCartItems);
-
+    const [currentChain, setCurrentChain] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [status, setStatus] = useState("");
+    const [networkSwitching, setNetworkSwitching] = useState(false);
+    const currentAddress = account.address;
     const formattedPhoneNumbers = cartArray.map((phone) =>
         formatPhoneNumber(phone)
     ).join(", ");
@@ -19,6 +30,120 @@ const MintSuccess = ({ }) => {
         navigate(path);
     };
 
+
+    const BridgeArbitritum = async() => {
+        console.log("will brige to arbi");
+        const netchange = checkNetwork();
+        if (!netchange) {
+            buynumber();
+        }
+        else {
+            console.log("network change problem");
+        }
+    }
+
+    const switchNetwork = async (desiredChainId) => {
+        try {
+          const chainIdHex = `0x${desiredChainId.toString(16)}`;
+          setNetworkSwitching(true); 
+          await window.ethereum.request({
+            method: 'wallet_switchEthereumChain',
+            params: [{ chainId: chainIdHex }],
+          });
+          setCurrentChain(desiredChainId);
+          buynumber();
+        } catch (error) {
+          if (error.code === 4902) {
+            console.error('Chain not found in wallet, please add it.');
+          } else {
+            console.error('Failed to switch network:', error);
+          }
+        }
+        finally {
+          setNetworkSwitching(false); // Stop switching network
+        }
+      };
+
+      const checkNetwork = async () => {
+        if (window.ethereum) {
+          const provider = new ethers.providers.Web3Provider(window.ethereum);
+          const { chainId } = await provider.getNetwork();
+          setCurrentChain(chainId);
+          if (chainId !== 42161) {
+            switchNetwork(42161);
+            return true;
+          }
+          return false;
+        } else {
+          console.error('MetaMask is not installed');
+          return false;
+        }
+      };
+
+      const buynumber = async () => {
+        if (cartArray.length === 0) {
+          setStatus("No phone numbers to mint.");
+          return;
+        }
+
+        try {
+          setLoading(true);
+          setStatus("Uploading data to IPFS...");
+
+          // Step 1: Upload data to IPFS
+          const imageUrl = await uploadToIPFS('/src/contract/tokenAssets/ud-square-logo2.png');
+          const metadata = {
+            name: `UDWeb3Number UDW3N`,
+            description: "This NFT represents ownership of virtual phone number in Arbitrum.",
+            image: imageUrl,
+            phoneNumbers: cartArray.map(number => `+999 ${formatPhoneNumber(number.toString())}`),
+            owner: currentAddress,
+            attributes: [
+              {
+                trait_type: "Phone Numbers",
+                value: cartArray.map(number => `+999 ${formatPhoneNumber(number.toString())}`).join(", "),
+              },
+              {
+                trait_type: "Owner Address",
+                value: currentAddress,
+              },
+            ],
+          };
+          const tokenUri = await uploadToIPFS(JSON.stringify(metadata));
+          console.log("Token URI: ", tokenUri);
+
+          // Step 2: Mint the NFT
+          setStatus("Minting in progress...");
+          const totalPrice = checkTotalPrice(cartArray);
+          if (isNaN(totalPrice) || totalPrice <= 0) {
+            throw new Error("Invalid total price. Please check the input values.");
+          }
+
+          const transacamount = ethers.utils.parseUnits(totalPrice.toString(), "ether");
+          console.log("Parsed Amount as BigNumber:", transacamount.toString());
+
+            const result = await MINTARBITRUMNUMBERNFT({
+              phoneNumbers: cartArray,
+              tokenUri,
+              address: RECEIVER_ADDRESS,
+              amount: transacamount
+            });
+            if (result && result.hash) {
+              setHash(result.hash);
+              setStatus(`NFT minted successfully! Transaction Hash: ${result.hash}`);
+              onBridgeSuccess();
+            } else {
+              throw new Error("Minting failed, no transaction hash returned.");
+            }
+        } catch (error) {
+          console.error("Error during minting process:", error);
+          setStatus(`Error: ${error.message || "An unexpected error occurred."}`);
+        } finally {
+          setLoading(false);
+        }
+      };
+
+
     return (
         <div className=" text-white">
             <div className="flex justify-center items-center">
@@ -46,7 +171,7 @@ const MintSuccess = ({ }) => {
                         </p>
                     </div>
                     <div className=" flex justify-center">
-                        <div className="bg-[#181931] h-[60px] mt-2 p-2 px-4 w-[300px] md:w-full rounded-lg border border-[#7B8DB7]/20">
+                        <div className="bg-[#181931] h-fit mt-2 p-2 px-4 w-[350px] md:w-full rounded-lg border border-[#7B8DB7]/20">
                             <p className="text-sm font-medium">Your current number</p>
                             <p className="text-xs text-customText pt-1">
                                 +999 {formattedPhoneNumbers || "Enter your Phone Number"}
@@ -70,35 +195,43 @@ const MintSuccess = ({ }) => {
                     </div>
 
                     <div className=" flex justify-center">
-                        <div className="bg-[#181931] h-[60px] mt-2 p-2 px-4 w-[300px] md:w-full rounded-lg border border-[#7B8DB7]/20">
+                        <div className="bg-[#181931] h-[60px] mt-2 p-2 px-4 w-[350px] md:w-full rounded-lg border border-[#7B8DB7]/20">
                             <p className="text-sm font-medium">Wallet Address</p>
                             {/* Display the wallet address fetched from local storage */}
                             <p className="text-xs text-customText pt-1">
                                 {account.address || "No wallet address linked"}
                             </p>
                         </div>
                     </div>
-                    {/* <motion.button
-                        whileTap={{ scale: 0.9 }}
-                        className="border-2 border-customBlue bg-customBlue hover:bg-transparent w-full p-2 rounded-full mt-6"
-                        onClick={() => handleNavigation("/sending-crpto/home-page")}
-                    >
-                        <p className="font-bold flex justify-center mx-auto gap-3 items-center text-center">
-                            Start Sending Crypto
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 24 24"
-                                fill="currentColor"
-                                className="size-6"
-                            >
-                                <path
-                                    fillRule="evenodd"
-                                    d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
-                                    clipRule="evenodd"
-                                />
-                            </svg>
-                        </p>
-                    </motion.button> */}
+                    <div className="pt-4">
+                      <motion.button
+                          whileTap={{ scale: 0.9 }}
+                          className={`font-bold text-sm p-2 w-full rounded-full ${loading || networkSwitching ? "bg-gray-400" : "bg-customBlue"} text-white border border-customBlue`}
+                          onClick={BridgeArbitritum}
+                          disabled={loading || networkSwitching} 
+                      >
+                        {networkSwitching
+                                ? "Switching Network..."
+                                : loading
+                                ? "Bridging..."
+                                : "Bridge to Arbitrum"}
+                          {/* <p className={`font-bold text-sm p-2 w-full rounded-full ${loading ? "bg-gray-400" : "bg-customBlue"} text-white border border-customBlue`}>
+                              {loading ? "Bridging ..." : "Bridge to Arbitrum"}
+                              <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  viewBox="0 0 24 24"
+                                  fill="currentColor"
+                                  className="size-6"
+                              >
+                                  <path
+                                      fillRule="evenodd"
+                                      d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
+                                      clipRule="evenodd"
+                                  />
+                              </svg>
+                          </p> */}
+                      </motion.button>
+                    </div>
                 </div>
             </div>
             <div className="flex justify-center">