Merge pull request #77 from kateberryd/buner_wallet_fix

feat: estimate transaction maxFee
horuslabsio · May 10, 2024 · 6cb7b2d · 6cb7b2d
2 parents 7744e8e + c72b6cd
commit 6cb7b2d
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 20 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -25,6 +25,7 @@
     "react": "^18",
     "react-blockies": "^1.4.1",
     "react-dom": "^18",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^5.0.1",
     "starknet": "^6.0.0",
     "starknetkit": "^1.1.4",

diff --git a/frontend/src/app/components/AssetTransferModal.tsx b/frontend/src/app/components/AssetTransferModal.tsx
@@ -6,9 +6,17 @@ import rightArr from "../../../public/assets/right-arr.svg";
 import { useEffect, useState } from "react";
 import downChevron from "../../../public/assets/down-chevron.svg";
 import ethLogo from "../../../public/assets/ethereumLogo2.svg";
-import { Call, Contract, RpcProvider, Uint256, cairo } from "starknet";
+import {
+  Call,
+  CallData,
+  Contract,
+  RpcProvider,
+  Uint256,
+  cairo,
+} from "starknet";
 import abi from "./../../../public/abi/strk_abi.json";
 import spinner from "../../../public/assets/spinner.svg";
+import toast from "react-hot-toast";
 
 type Props = {
   isOpen: boolean;
@@ -83,15 +91,24 @@ function AssetTransferModal({
       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 { suggestedMaxFee: maxFee } = await account.estimateInvokeFee({
+        contractAddress: starknet_contract.address,
+        entrypoint: "transfer",
+        calldata: [walletAddress, toTransferTk],
       });
-      const { transaction_hash: transferTxHash, } =
-        await starknet_contract.transfer(transferCall.calldata);
+
+      const { transaction_hash: transferTxHash } =
+        await starknet_contract.invoke(
+          "transfer",
+          [walletAddress, toTransferTk],
+          {
+            maxFee: maxFee,
+          }
+        );
       await provider.waitForTransaction(transferTxHash);
-      window.alert("Your transfer was successful!");
+      toast.success("Your transfer was successful!", { duration: 2000 });
     } catch (err: any) {
+      toast.error("Your transfer was unsuccessfully", { duration: 2000 });
       console.log(err.message);
     } finally {
       setLoading(false);

diff --git a/frontend/src/app/components/BurnerWallet/BurnerWallet.tsx b/frontend/src/app/components/BurnerWallet/BurnerWallet.tsx
@@ -48,11 +48,13 @@ function BurnerWallet({ wallet }: { wallet: IWallet }) {
     const provider = new RpcProvider({
       nodeUrl: "https://starknet-sepolia.public.blastapi.io",
     });
+
     const account: any = new Account(
       provider,
       wallet.address,
       wallet.privateKey
     );
+
     setAccount(account);
     setIsConnected(true);
     setIsConnecting(false);
@@ -90,7 +92,16 @@ function BurnerWallet({ wallet }: { wallet: IWallet }) {
           />,
           document.body
         )}
-      <h2 className="mb-[60px] text-2xl font-semibold">Burner Wallet</h2>
+      <h2 className="mb-[5px] text-2xl font-semibold">Burner Wallet</h2>
+
+      {ethBalance == 0 && (
+        <div>
+          <p className="mb-[40px] text-sm font-light">
+            <span className="font-medium">NB:</span> To proceed with the
+            transaction, please deposit ETH into your account.
+          </p>
+        </div>
+      )}
       <div className="flex gap-[100px] text-2xl font-normal">
         <div>
           <h2>
@@ -124,7 +135,7 @@ function BurnerWallet({ wallet }: { wallet: IWallet }) {
       <div className="mt-[80px] flex  gap-[60px] justify-center">
         {isConnected ? (
           <>
-            {(ethBalance > 0 || strkBalance > 0) && (
+            {ethBalance > 0 && (
               <button
                 className=" px-6 py-4 bg-[#f77448] text-white rounded-[5px] disabled:cursor-not-allowed w-[200px] font-semibold"
                 disabled={!eth || !strk}
@@ -133,13 +144,15 @@ function BurnerWallet({ wallet }: { wallet: IWallet }) {
                 SEND
               </button>
             )}
-            <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>
+            {ethBalance > 0 && (
+              <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>
+            )}
           </>
         ) : (
           <button

diff --git a/frontend/src/app/components/ContractExecutionModal.tsx b/frontend/src/app/components/ContractExecutionModal.tsx
@@ -5,6 +5,7 @@ import rightArr from "../../../public/assets/right-arr.svg";
 import { useEffect, useState } from "react";
 import { Call } from "starknet";
 import spinner from "../../../public/assets/spinner.svg";
+import toast from "react-hot-toast";
 
 interface Errors {
   contractAddress?: boolean;
@@ -122,22 +123,30 @@ function ContractExecutionModal({ isOpen, onClose, account }: Props) {
 
       setLoading(true);
 
+
       const call: Call = {
         contractAddress: contractAddress,
         calldata: JSON.parse(callData),
         entrypoint: functionName,
       };
+      const { suggestedMaxFee: maxFee } = await account.estimateInvokeFee({
+        contractAddress: contractAddress,
+        entrypoint: functionName,
+        calldata: JSON.parse(callData),
+      });
 
-      const { transaction_hash: transferTxHash } = await account.execute(call);
+      const { transaction_hash: transferTxHash } = await account.execute(call, {maxFee});
       const transactionReponse = await account.waitForTransaction(
         transferTxHash
       );
-      console.log(transactionReponse);
 
-      window.alert("Your contract function was executed successfully!");
+      console.log(transactionReponse);
+      toast.success("Your contract function was executed successfully!", {
+        duration: 2000,
+      });
       success = true;
     } catch (err: any) {
-      window.alert("An error occured! Please try again.");
+      toast.error("An error occured! Please try again.", { duration: 2000 });
       console.log(err.message);
     } finally {
       setLoading(false);

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { StarknetProvider } from "./components/StarknetProvider";
+import {Toaster} from "react-hot-toast"
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -21,6 +22,7 @@ export default function RootLayout({
         className={`${inter.className} dark:bg-black bg-gray-300 dark:text-white transition-all duration-500 ease-in-out`}
       >
         <StarknetProvider>{children}</StarknetProvider>
+        <Toaster/>
       </body>
     </html>
   );