feat: added fallback for no funds

FuelLabs · Dec 18, 2024 · ff930b8 · ff930b8
1 parent 7a8bbba
commit ff930b8
Show file tree

Hide file tree

Showing 8 changed files with 202 additions and 51 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,6 +1,6 @@
 import { cssObj } from "@fuel-ui/css";
 import { Box, BoxCentered, Heading } from "@fuel-ui/react";
-import { useIsConnected, useWallet, useCurrentConnector } from "@fuels/react";
+import { useIsConnected, useWallet } from "@fuels/react";
 //Add Analytics
 import { useState, useEffect, useMemo } from "react";
 
@@ -22,13 +22,11 @@ function App() {
   );
   const { isConnected } = useIsConnected();
   const { wallet } = useWallet();
-  const { currentConnector } = useCurrentConnector();
 
   useEffect(() => {
     const userAgent = navigator.userAgent.toLowerCase();
     const mobile = /(iphone|android|windows phone)/.test(userAgent);
     setIsMobile(mobile);
-    console.log("currentConnector", currentConnector?.name);
   }, []);
 
   const contract = useMemo(() => {

diff --git a/frontend/src/components/NewPlayer.tsx b/frontend/src/components/NewPlayer.tsx
@@ -35,7 +35,7 @@ export default function NewPlayer({
     "error" | "loading" | "retrying" | "none"
   >("none");
   const [hasFunds, setHasFunds] = useState<boolean>(false);
-
+  const [showNoFunds, setShowNoFunds] = useState<boolean>(false);
   const { wallet } = useWallet();
   const paymaster = usePaymaster();
   const isGaslessSupported = useGaslessWalletSupported();
@@ -53,11 +53,6 @@ export default function NewPlayer({
 
     if (balanceNum) {
       setHasFunds(balanceNum > 0);
-      if (balanceNum > 0) {
-        toast.success("You have enough funds to play!");
-      } else {
-        toast.error("You need some ETH to play. Please visit the Bridge.");
-      }
     }
   }
 
@@ -146,7 +141,7 @@ export default function NewPlayer({
         if (!canUseGasless) {
           toast.error(
             "Hourly gasless transaction limit reached. Trying regular transaction...",
-            { duration: 5000 }
+            { duration: 5000 },
           );
         }
         if (isGaslessSupported && canUseGasless) {
@@ -159,11 +154,25 @@ export default function NewPlayer({
             );
             toast.error("Gas Station error, please sign from wallet.");
             setStatus("retrying");
-            await createPlayerWithoutGasStation();
+            if (!hasFunds) {
+              setShowNoFunds(true);
+              setTimeout(() => {
+                setShowNoFunds(false);
+              }, 5000);
+            } else {
+              await createPlayerWithoutGasStation();
+            }
           }
         } else {
-          console.log("Using direct transaction method...");
-          await createPlayerWithoutGasStation();
+          if (!hasFunds) {
+            setShowNoFunds(true);
+            setTimeout(() => {
+              setShowNoFunds(false);
+            }, 5000);
+          } else {
+            console.log("Using direct transaction method...");
+            await createPlayerWithoutGasStation();
+          }
         }
 
         setStatus("none");
@@ -181,12 +190,12 @@ export default function NewPlayer({
 
   return (
     <div className="new-player-modal">
-      {status === "none" && (
+      {status === "none" && !showNoFunds && (
         <Button css={buttonStyle} onPress={handleNewPlayer}>
           Make A New Player
         </Button>
       )}
-      {status === "none" && !hasFunds && (
+      {status === "none" && !hasFunds && showNoFunds && (
         <BoxCentered css={styles.container}>
           You need some ETH to play:
           <Link isExternal href={`https://app.fuel.network/bridge`}>
@@ -233,7 +242,6 @@ const styles = {
     fontFamily: "pressStart2P",
     fontSize: "14px",
     gap: "20px",
-    display: "none",
   }),
   link: cssObj({
     fontFamily: "pressStart2P",

diff --git a/frontend/src/components/modals/BuySeeds.tsx b/frontend/src/components/modals/BuySeeds.tsx
@@ -2,6 +2,8 @@ import { Button, Spinner, BoxCentered } from "@fuel-ui/react";
 import { type BytesLike, Address, bn, Provider } from "fuels";
 import type { Dispatch, SetStateAction } from "react";
 import { useState } from "react";
+import { useWalletFunds } from "../../hooks/useWalletFunds";
+import { NoFundsMessage } from "./NoFundsMessage";
 import { FUEL_PROVIDER_URL, useGaslessWalletSupported } from "../../constants";
 import { buttonStyle, FoodTypeInput } from "../../constants";
 import type { FarmContract } from "../../sway-api/contracts/FarmContract";
@@ -28,6 +30,8 @@ export default function BuySeeds({
   const { wallet } = useWallet();
   const paymaster = usePaymaster();
   const isGaslessSupported = useGaslessWalletSupported();
+  const { hasFunds, showNoFunds, getBalance, showNoFundsMessage } =
+    useWalletFunds(contract);
 
   async function buyWithGasStation() {
     if (!wallet) {
@@ -88,7 +92,7 @@ export default function BuySeeds({
       estimateTxDependencies: false,
     });
     if (tx) {
-      console.log("tx", tx);
+      toast.success("Successfully bought seeds!");
       updatePageNum();
     }
   }
@@ -116,6 +120,8 @@ export default function BuySeeds({
       .call();
 
     if (tx) {
+      toast.success("Successfully bought seeds!");
+
       updatePageNum();
     }
     return tx;
@@ -130,11 +136,12 @@ export default function BuySeeds({
         setStatus("loading");
         setCanMove(false);
         const canUseGasless = await paymaster.shouldUseGasless();
-        if(!canUseGasless) {
-          toast.error("Hourly gasless transaction limit reached. Trying regular transaction...", 
-            { duration: 5000 });
+        if (!canUseGasless) {
+          toast.error(
+            "Hourly gasless transaction limit reached. Trying regular transaction...",
+            { duration: 5000 },
+          );
         }
-
         if (isGaslessSupported && canUseGasless) {
           try {
             await buyWithGasStation();
@@ -143,16 +150,24 @@ export default function BuySeeds({
               "Gas station failed, trying direct transaction...",
               error,
             );
+            toast.error("Gas Station error, please sign from wallet.");
             setStatus("retrying");
-            await buyWithoutGasStation();
+            if (!hasFunds) {
+              showNoFundsMessage();
+            } else {
+              await buyWithoutGasStation();
+            }
           }
         } else {
-          console.log("Using direct transaction method...");
-          await buyWithoutGasStation();
+          if (!hasFunds) {
+            showNoFundsMessage();
+          } else {
+            console.log("Using direct transaction method...");
+            await buyWithoutGasStation();
+          }
         }
 
         setStatus("none");
-        toast.success("Successfully bought seeds!");
       } catch (err) {
         console.log("Error in BuySeeds:", err);
         setStatus("error");
@@ -193,14 +208,17 @@ export default function BuySeeds({
           </Button>
         </div>
       )}
-      {status === "none" && (
+      {status === "none" && !showNoFunds && (
         <>
           <div className="market-header">Buy Seeds</div>
           <Button css={buttonStyle} variant="outlined" onPress={buySeeds}>
             Buy 10 seeds
           </Button>
         </>
       )}
+      {status === "none" && !hasFunds && showNoFunds && (
+        <NoFundsMessage onRecheck={getBalance} />
+      )}
     </>
   );
 }
diff --git a/frontend/src/components/modals/HarvestModal.tsx b/frontend/src/components/modals/HarvestModal.tsx
@@ -1,6 +1,7 @@
 import { Spinner, Button, BoxCentered } from "@fuel-ui/react";
 import type { Dispatch, SetStateAction } from "react";
 import { useState } from "react";
+import { cssObj } from "@fuel-ui/css";
 
 import {
   buttonStyle,
@@ -13,6 +14,8 @@ import { useWallet } from "@fuels/react";
 import { Address, Provider } from "fuels";
 import { usePaymaster } from "../../hooks/usePaymaster";
 import { toast } from "react-hot-toast";
+import { useWalletFunds } from "../../hooks/useWalletFunds";
+import { NoFundsMessage } from "./NoFundsMessage";
 
 interface HarvestProps {
   contract: FarmContract | null;
@@ -37,6 +40,8 @@ export default function HarvestModal({
   const { wallet } = useWallet();
   const paymaster = usePaymaster();
   const isGaslessSupported = useGaslessWalletSupported();
+  const { hasFunds, showNoFunds, getBalance, showNoFundsMessage } =
+    useWalletFunds(contract);
 
   async function harvestWithoutGasStation() {
     if (!wallet || !contract) throw new Error("Wallet or contract not found");
@@ -79,7 +84,7 @@ export default function HarvestModal({
     request.addCoinOutput(
       gasCoin.owner,
       gasCoin.amount.sub(maxValuePerCoin),
-      provider.getBaseAssetId()
+      provider.getBaseAssetId(),
     );
     request.addChangeOutput(gasCoin.owner, provider.getBaseAssetId());
 
@@ -113,7 +118,7 @@ export default function HarvestModal({
         if (!canUseGasless) {
           toast.error(
             "Hourly gasless transaction limit reached. Trying regular transaction...",
-            { duration: 5000 }
+            { duration: 5000 },
           );
         }
         if (isGaslessSupported && canUseGasless) {
@@ -122,17 +127,23 @@ export default function HarvestModal({
           } catch (error) {
             console.log(
               "Gas station failed, trying direct transaction...",
-              error
-            );
-            toast.error(
-              "Failed to harvest the seed :( Retrying with alternate method..."
+              error,
             );
+            toast.error("Gas Station error, please sign from wallet.");
             setStatus("retrying");
-            await harvestWithoutGasStation();
+            if (!hasFunds) {
+              showNoFundsMessage();
+            } else {
+              await harvestWithoutGasStation();
+            }
           }
         } else {
-          console.log("Using direct transaction method...");
-          await harvestWithoutGasStation();
+          if (!hasFunds) {
+            showNoFundsMessage();
+          } else {
+            console.log("Using direct transaction method...");
+            await harvestWithoutGasStation();
+          }
         }
 
         setStatus("none");
@@ -176,7 +187,10 @@ export default function HarvestModal({
           </Button>
         </div>
       )}
-      {status === "none" && (
+      {status === "none" && !hasFunds && showNoFunds && (
+        <NoFundsMessage onRecheck={getBalance} />
+      )}
+      {status === "none" && !hasFunds && !showNoFunds && (
         <>
           <div style={styles.items}>Harvest this item?</div>
           <Button css={buttonStyle} onPress={harvestItem}>
@@ -189,6 +203,16 @@ export default function HarvestModal({
 }
 
 const styles = {
+  container: cssObj({
+    flexDirection: "column",
+    fontFamily: "pressStart2P",
+    fontSize: "14px",
+    gap: "20px",
+  }),
+  link: cssObj({
+    fontFamily: "pressStart2P",
+    fontSize: "14px",
+  }),
   items: {
     marginBottom: "20px",
   },

diff --git a/frontend/src/components/modals/NoFundsMessage.tsx b/frontend/src/components/modals/NoFundsMessage.tsx
@@ -0,0 +1,36 @@
+import { BoxCentered, Button, Link } from "@fuel-ui/react";
+import { cssObj } from "@fuel-ui/css";
+import { buttonStyle } from "../../constants";
+
+interface NoFundsMessageProps {
+  onRecheck: () => void;
+}
+
+export function NoFundsMessage({ onRecheck }: NoFundsMessageProps) {
+  return (
+    <BoxCentered css={styles.container}>
+      You need some ETH to play:
+      <Link isExternal href={`https://app.fuel.network/bridge`}>
+        <Button css={styles.link} variant="link">
+          Go to Bridge
+        </Button>
+      </Link>
+      <Button css={buttonStyle} onPress={onRecheck}>
+        Recheck balance
+      </Button>
+    </BoxCentered>
+  );
+}
+
+const styles = {
+  container: cssObj({
+    flexDirection: "column",
+    fontFamily: "pressStart2P",
+    fontSize: "14px",
+    gap: "20px",
+  }),
+  link: cssObj({
+    fontFamily: "pressStart2P",
+    fontSize: "14px",
+  }),
+};