Merge pull request #73 from bhavyagosai/feat/func-for-burner-wallet

Feat/func for burner wallet and some ui improvements
horuslabsio · May 7, 2024 · 72857a2 · 72857a2
2 parents 9fe1dd1 + 7c60f0d
commit 72857a2
Show file tree

Hide file tree

Showing 7 changed files with 388 additions and 60 deletions.
diff --git a/frontend/public/assets/spinner.svg b/frontend/public/assets/spinner.svg
diff --git a/frontend/src/app/components/AssetTransferModal.tsx b/frontend/src/app/components/AssetTransferModal.tsx
@@ -8,6 +8,7 @@ import downChevron from "../../../public/assets/down-chevron.svg";
 import ethLogo from "../../../public/assets/ethereumLogo2.svg";
 import { Call, Contract, RpcProvider, Uint256, cairo } from "starknet";
 import abi from "./../../../public/abi/strk_abi.json";
+import spinner from "../../../public/assets/spinner.svg";
 
 type Props = {
   isOpen: boolean;
@@ -32,6 +33,7 @@ function AssetTransferModal({
   const [animate, setAnimate] = useState(false);
   const [activeToken, setActiveToken] = useState("strk");
   const [assetDropDownIsOpen, setAssetDropDownIsOpen] = useState(false);
+  const [loading, setLoading] = useState<boolean>(false);
 
   const closeModal = (e: React.MouseEvent<HTMLButtonElement>) => {
     setAnimate(false);
@@ -78,18 +80,21 @@ function AssetTransferModal({
       if (!walletAddress.length && !amount) {
         return;
       }
+      setLoading(true);
       starknet_contract.connect(account);
       const toTransferTk: Uint256 = cairo.uint256(Number(amount) * 1e18);
       const transferCall: Call = starknet_contract.populate("transfer", {
         recipient: walletAddress,
         amount: toTransferTk,
       });
-      const { transaction_hash: transferTxHash,  } = await starknet_contract.transfer(transferCall.calldata);
+      const { transaction_hash: transferTxHash } =
+        await starknet_contract.transfer(transferCall.calldata);
       await provider.waitForTransaction(transferTxHash);
       window.alert("Your transfer was successful!");
     } catch (err: any) {
       console.log(err.message);
     } finally {
+      setLoading(false);
       setTimeout(() => {
         onClose();
       }, 400);
@@ -232,7 +237,13 @@ function AssetTransferModal({
             await handleTransfer();
           }}
         >
-          Send <Image src={rightArr} alt="right arrow" height={16} width={16} />
+          Send{" "}
+          <Image
+            src={loading ? spinner : rightArr}
+            alt={loading ? "loading" : "right arrow"}
+            height={16}
+            width={16}
+          />
         </button>
       </form>
     </GenericModal>

diff --git a/frontend/src/app/components/Burner/Burner.tsx b/frontend/src/app/components/Burner/Burner.tsx
@@ -1,11 +1,12 @@
 "use client";
 import React, { useState, useEffect } from "react";
 import { useAccount, useNetwork } from "@starknet-react/core";
-
 import { Contract, RpcProvider, ec, stark } from "starknet";
 import * as Abi from "../../../../public/abi/burnerWallet.json";
 import Header from "../Header";
 import BurnerWallet from "../BurnerWallet/BurnerWallet";
+import spinner from "../../../../public/assets/spinner.svg";
+import Image from "next/image";
 
 type Wallet = {
   address: string;
@@ -15,6 +16,7 @@ type Wallet = {
 
 const Burners: React.FC = () => {
   const [wallets, setWallets] = useState<Wallet[]>([]);
+  const [burnerWalletLoading, setBurnerWalletLoading] = useState<boolean>(true);
   const { account } = useAccount();
   const { chain } = useNetwork();
 
@@ -62,22 +64,30 @@ const Burners: React.FC = () => {
 
   useEffect(() => {
     const loadedWallets = localStorage.getItem("wallets");
-    if (loadedWallets && loadedWallets.length > 0) {
-      setWallets(JSON.parse(loadedWallets));
-    }
+    if (loadedWallets) {
+      const parsedWallets: Wallet[] = JSON.parse(loadedWallets);
+      setWallets(parsedWallets);
+      setBurnerWalletLoading(false);
+    } else setBurnerWalletLoading(false);
   }, []);
 
-  useEffect(() => {
-    if (wallets.length > 0) {
-      localStorage.setItem("wallets", JSON.stringify(wallets));
-    }
-  }, [wallets]);
-
   const handleCreate = async () => {
     if (wallets.length < 5) {
       if (burnerWalletDeployer) {
-        const newWallet = await generateWallet(burnerWalletDeployer);
-        setWallets([...wallets, newWallet]);
+        try {
+          setBurnerWalletLoading(true);
+          const newWallet = await generateWallet(burnerWalletDeployer);
+          setWallets([...wallets, newWallet]);
+          localStorage.setItem(
+            "wallets",
+            JSON.stringify([...wallets, newWallet])
+          );
+          console.log(newWallet);
+        } catch (error) {
+          console.log(error);
+        } finally {
+          setBurnerWalletLoading(false);
+        }
       } else {
         console.error("Burner wallet deployer is undefined.");
       }
@@ -108,21 +118,35 @@ const Burners: React.FC = () => {
           <br />
 
           <h3 className="font-bold text-start">Burner Wallets:</h3>
-          {wallets.map((wallet, index) => (
-            <BurnerWallet key={index} wallet={wallet} />
-          ))}
-          <button
-            className="mt-4 p-2 bg-[#f77448] text-white rounded"
-            onClick={handleCreate}
-          >
-            Generate Wallet
-          </button>
-          <button
-            className="mt-2 p-2 bg-blue-500 text-white rounded"
-            onClick={clearWallets}
-          >
-            Clear Wallets
-          </button>
+          {!burnerWalletLoading ? (
+            wallets.length !== 0 ? (
+              wallets.map((wallet, index) => (
+                <BurnerWallet key={index} wallet={wallet} />
+              ))
+            ) : (
+              <div className="flex justify-center items-center rounded-lg border px-8 py-12 border-gray-300 bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/30 w-full">
+                <div>No burner wallets found</div>
+              </div>
+            )
+          ) : (
+            <div className="flex justify-center items-center rounded-lg border px-8 py-12 border-gray-300 bg-gray-100 dark:border-neutral-700 dark:bg-neutral-800/30 w-full">
+              <Image src={spinner} width={32} height={32} alt="loading" />
+            </div>
+          )}
+          <div className="flex">
+            <button
+              className="mt-2 mr-5 p-2 bg-blue-500 text-white rounded"
+              onClick={handleCreate}
+            >
+              Generate Wallet
+            </button>
+            <button
+              className="mt-2 p-2 bg-red-500 text-white rounded"
+              onClick={clearWallets}
+            >
+              Clear Wallets
+            </button>
+          </div>
         </div>
       </div>
     </div>

diff --git a/frontend/src/app/components/BurnerWallet/BurnerWallet.tsx b/frontend/src/app/components/BurnerWallet/BurnerWallet.tsx
@@ -9,6 +9,7 @@ import CopyButton from "../CopyButton";
 import Erc20Abi from "../../abi/token.abi.json";
 import { ETH_SEPOLIA, STRK_SEPOLIA } from "@/app/utils/constant";
 import { formatCurrency } from "@/app/utils/currency";
+import ContractExecutionModal from "../ContractExecutionModal";
 interface IWallet {
   address: string;
   privateKey: string;
@@ -17,6 +18,7 @@ interface IWallet {
 
 function BurnerWallet({ wallet }: { wallet: IWallet }) {
   const [isSending, setIsSending] = useState(false);
+  const [isExecuting, setIsExecuting] = useState(false);
   const [account, setAccount] = useState(undefined);
   const [isConnecting, setIsConnecting] = useState(false);
   const [isConnected, setIsConnected] = useState(false);
@@ -69,6 +71,15 @@ function BurnerWallet({ wallet }: { wallet: IWallet }) {
           />,
           document.body
         )}
+      {isExecuting &&
+        createPortal(
+          <ContractExecutionModal
+            isOpen={isExecuting}
+            onClose={() => setIsExecuting(false)}
+            account={account}
+          />,
+          document.body
+        )}
       {isConnecting &&
         createPortal(
           <ConnectionModal
@@ -113,7 +124,7 @@ function BurnerWallet({ wallet }: { wallet: IWallet }) {
       <div className="mt-[80px] flex  gap-[60px] justify-center">
         {isConnected ? (
           <>
-            {ethBalance != 0 && strkBalance != 0 && (
+            {(ethBalance > 0 || strkBalance > 0) && (
               <button
                 className=" px-6 py-4 bg-[#f77448] text-white rounded-[5px] disabled:cursor-not-allowed w-[200px] font-semibold"
                 disabled={!eth || !strk}
@@ -125,6 +136,7 @@ function BurnerWallet({ wallet }: { wallet: IWallet }) {
             <button
               className=" px-6 py-4 bg-[#f77448] text-white rounded-[5px] w-[200px] font-semibold disabled:cursor-not-allowed"
               disabled={!eth || !strk}
+              onClick={() => setIsExecuting(true)}
             >
               EXECUTE
             </button>