feat: added balance changes

frontend/src/components/modals/PlantModal.tsx

@@ -39,7 +39,7 @@ export default function PlantModal({
   setModal,
 }: PlantModalProps) {
   const [status, setStatus] = useState<
-    "error" | "none" | "loading" | "retrying"
+    "error" | "none" | "loading" | "retrying" | "accelerating"
   >("none");
   const { wallet } = useWallet();
   const paymaster = usePaymaster();
@@ -166,6 +166,7 @@ export default function PlantModal({
 
       tx = await wallet.sendTransaction(request);
     } else {
+      setStatus("accelerating");
       const scope = contract.functions
         .accelerate_plant_seed_at_index(
           seedType,
@@ -289,6 +290,12 @@ export default function PlantModal({
   return (
     <div className="plant-modal">
       {status === "loading" && <Loading />}
+      {status === "accelerating" && (
+        <div>
+          <p>$FARM detected, accelerating harvest...</p>
+          <Loading />
+        </div>
+      )}
       {status === "retrying" && <Loading />}
       {status === "error" && (
         <div>

frontend/src/components/show/ShowCoins.tsx

@@ -30,7 +30,7 @@ export default function ShowCoins({
   }, [wallet, updateNum, contract]);
 
   if (balance) {
-    return <Box css={styles}>Farm Coins: {balance.format()}</Box>;
+    return <Box css={styles}>In-app Coins: {balance.format()}</Box>;
   }
 
   return null;

frontend/src/components/show/ShowPlayerInfo.tsx

@@ -1,21 +1,25 @@
 import { cssObj } from "@fuel-ui/css";
 import { Flex, Box } from "@fuel-ui/react";
 import type { BytesLike } from "fuels";
+import { useWallet } from "@fuels/react";
 
 import type {
   FarmContract,
   PlayerOutput,
 } from "../../sway-api/contracts/FarmContract";
 
 import ShowCoins from "./ShowCoins";
+import { useState } from "react";
+import { useEffect } from "react";
 
 interface PlayerProps {
   player: PlayerOutput | null;
   contract: FarmContract | null;
   updateNum: number;
   farmCoinAssetID: BytesLike;
 }
-
+const dollarFarmAssetID =
+  "0x9858ea1307794a769dc91aaad7dc7ddb9fa29dadb08345ba82c8f762b2eb0c97";
 export default function ShowPlayerInfo({
   player,
   contract,
@@ -26,6 +30,16 @@ export default function ShowPlayerInfo({
   if (player !== null) {
     valSold = parseFloat(player.total_value_sold.format().toLocaleString());
   }
+  const [balance, setBalance] = useState<string>();
+  const { wallet } = useWallet();
+  useEffect(() => {
+    (async () => {
+      const balance = await wallet?.getBalance(dollarFarmAssetID);
+      const balanceinBN = balance?.div(10 ** 9);
+      setBalance(balanceinBN?.toString());
+    })();
+  }, [wallet]);
+  console.log("balance", balance);
 
   return (
     <Box css={styles.playerInfo}>
@@ -36,6 +50,7 @@ export default function ShowPlayerInfo({
           updateNum={updateNum}
           farmCoinAssetID={farmCoinAssetID}
         />
+        <Box css={styles.box}>$FARM: {balance ?? "0"}</Box>
       </Flex>
     </Box>
   );