some frontend nice-to-haves

frontend/package.json

@@ -25,6 +25,7 @@
     "ramda": "^0.30.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hot-toast": "^2.4.1",
     "three": "^0.150.1"
   },
   "devDependencies": {

frontend/src/App.tsx

@@ -29,7 +29,7 @@
     const mobile = /(iphone|android|windows phone)/.test(userAgent);
     setIsMobile(mobile);
     console.log("currentConnector", currentConnector?.name);
   }, []);
 
   const contract = useMemo(() => {
     if (wallet) {
@@ -64,6 +64,7 @@
             <Heading css={styles.heading} as={"h1"}>
               SWAY FARM
             </Heading>
+            <span style={styles.gaslessLine}>Now completely GASLESS! 🎉</span>
             <Home isMobile={isMobile} />
           </BoxCentered>
         </BoxCentered>
@@ -129,4 +130,8 @@
       display: "none",
     },
   }),
+  gaslessLine: cssObj({
+    color: "white",
+    fontSize: "20px",
+  }),
 };

frontend/src/components/home/Home.tsx

@@ -3,30 +3,45 @@ import { Button, Box } from "@fuel-ui/react";
 import { useConnectUI } from "@fuels/react";
 
 import Instructions from "./Instructions.tsx";
+import { UnsupportedWalletsNoticeModal } from "../modals/UnsupportedWalletsNoticeModal.tsx";
+import { useState } from "react";
 
 interface HomeProps {
   isMobile: boolean;
 }
 
 export default function Home({ isMobile }: HomeProps) {
   const { connect, isConnecting } = useConnectUI();
+  const [isUnsupportedWalletModalOpen, setIsUnsupportedWalletModalOpen] =
+    useState(false);
+
+  const onConnectPress = () => {
+    setIsUnsupportedWalletModalOpen(true);
+  };
 
   return (
     <div>
       <Instructions isMobile={isMobile} />
       <Box>
         <Box css={styles.download}>
-          <p>Connect with the Fuel Wallet</p>
+          <p>Connect Your Fuel Wallet</p>
           <Button
             css={styles.button}
             onPress={() => {
-              connect();
+              onConnectPress();
             }}
           >
             {isConnecting ? "Connecting" : "Connect"}
           </Button>
         </Box>
       </Box>
+      <UnsupportedWalletsNoticeModal
+        isOpen={isUnsupportedWalletModalOpen}
+        onClose={() => {
+          setIsUnsupportedWalletModalOpen(false);
+          connect();
+        }}
+      />
     </div>
   );
 }

frontend/src/components/home/Instructions.tsx

@@ -28,6 +28,7 @@ const styles = {
     fontFamily: "pressStart2P",
     color: "#aaa",
     maxWidth: "800px",
+    margin: "0 auto",
   }),
   text: {
     fontSize: "14px",

frontend/src/components/modals/BuySeeds.tsx

@@ -7,6 +7,7 @@ import { buttonStyle, FoodTypeInput } from "../../constants";
 import type { FarmContract } from "../../sway-api/contracts/FarmContract";
 import { useWallet } from "@fuels/react";
 import { usePaymaster } from "../../hooks/usePaymaster";
+import { toast } from "react-hot-toast";
 
 interface BuySeedsProps {
   contract: FarmContract | null;
@@ -146,15 +147,18 @@ export default function BuySeeds({
         }
 
         setStatus("none");
+        toast.success("Successfully bought seeds!");
       } catch (err) {
         console.log("Error in BuySeeds:", err);
         setStatus("error");
+        toast.error("Failed to buy seeds :( Please try again.");
       } finally {
         setCanMove(true);
       }
     } else {
       console.log("ERROR: contract missing");
       setStatus("error");
+      toast.error("Failed to buy seeds :( Please try again.");
     }
   }
 

frontend/src/components/modals/HarvestModal.tsx

@@ -12,6 +12,8 @@ import type { Modals } from "../../constants";
 import { useWallet } from "@fuels/react";
 import { Address, Provider } from "fuels";
 import { usePaymaster } from "../../hooks/usePaymaster";
+import { toast } from "react-hot-toast";
+
 interface HarvestProps {
   contract: FarmContract | null;
   tileArray: number[];
@@ -53,6 +55,7 @@ export default function HarvestModal({
       onHarvestSuccess(tileArray[0]);
       setModal("plant");
       updatePageNum();
+      toast.success("Seed harvested!");
     }
     return tx;
   }
@@ -94,6 +97,7 @@ export default function HarvestModal({
       onHarvestSuccess(tileArray[0]);
       setModal("plant");
       updatePageNum();
+      toast.success("Seed harvested!");
     }
   }
 
@@ -114,6 +118,9 @@ export default function HarvestModal({
               "Gas station failed, trying direct transaction...",
               error,
             );
+            toast.error(
+              "Failed to harvest the seed :( Retrying with alternate method...",
+            );
             setStatus("retrying");
             await harvestWithoutGasStation();
           }
@@ -126,12 +133,14 @@ export default function HarvestModal({
       } catch (err) {
         console.log("Error in HarvestModal:", err);
         setStatus("error");
+        toast.error("Failed to harvest the seed :( Please try again.");
       } finally {
         setCanMove(true);
       }
     } else {
       console.log("ERROR: contract missing");
       setStatus("error");
+      toast.error("Failed to harvest the seed :( Please try again.");
     }
   }
 

frontend/src/components/modals/PlantModal.tsx

@@ -14,6 +14,7 @@ import Loading from "../Loading";
 import { Address, Provider } from "fuels";
 import { useWallet } from "@fuels/react";
 import { usePaymaster } from "../../hooks/usePaymaster";
+import { toast } from "react-hot-toast";
 
 interface PlantModalProps {
   contract: FarmContract | null;
@@ -58,6 +59,7 @@ export default function PlantModal({
     if (tx) {
       onPlantSuccess(tileArray[0]);
       setModal("none");
+      toast.success("Planted the seed!");
       updatePageNum();
     }
     return tx;
@@ -104,6 +106,7 @@ export default function PlantModal({
       onPlantSuccess(tileArray[0]);
       setModal("none");
       updatePageNum();
+      toast.success("Planted the seed!");
     }
   }
 
@@ -125,6 +128,9 @@ export default function PlantModal({
               error,
             );
             setStatus("retrying");
+            toast.error(
+              "Failed to plant the seed :( Retrying with alternate method...",
+            );
             await plantWithoutGasStation();
           }
         } else {
@@ -136,12 +142,14 @@ export default function PlantModal({
       } catch (err) {
         console.log("Error in PlantModal:", err);
         setStatus("error");
+        toast.error("Failed to plant the seed :( Please try again.");
       } finally {
         setCanMove(true);
       }
     } else {
       console.log("ERROR: contract missing");
       setStatus("error");
+      toast.error("Failed to plant the seed :( Please try again.");
     }
   }
 

frontend/src/components/modals/SellItem.tsx

@@ -13,6 +13,7 @@ import type { FarmContract } from "../../sway-api/contracts";
 import Loading from "../Loading";
 import { useWallet } from "@fuels/react";
 import { usePaymaster } from "../../hooks/usePaymaster";
+import { toast } from "react-hot-toast";
 
 interface SellItemProps {
   contract: FarmContract | null;
@@ -111,6 +112,7 @@ export default function SellItem({
     const tx = await wallet.sendTransaction(request);
     if (tx) {
       updatePageNum();
+      toast.success("Successfully sold the item!");
     }
   }
 
@@ -143,12 +145,14 @@ export default function SellItem({
       } catch (err) {
         console.log("Error in SellItem:", err);
         setStatus("error");
+        toast.error("Failed to sell the item :( Please try again.");
       } finally {
         setCanMove(true);
       }
     } else {
       console.log("ERROR: contract missing");
       setStatus("error");
+      toast.error("Failed to sell the item :( Please try again.");
     }
   }
 

frontend/src/components/modals/UnsupportedWalletsNoticeModal.tsx

@@ -0,0 +1,69 @@
+export const UnsupportedWalletsNoticeModal = ({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+}) => {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      onClick={onClose}
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        zIndex: 1000,
+      }}
+    >
+      <div
+        className="modal-content"
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          backgroundColor: "white",
+          padding: "20px",
+          borderRadius: "8px",
+          maxWidth: "400px",
+          width: "90%",
+          position: "relative",
+        }}
+      >
+        <div
+          style={{ fontWeight: "bold", marginBottom: "15px", fontSize: "16px" }}
+        >
+          Wallet Support Notice
+        </div>
+        <div style={{ fontSize: "14px" }}>
+          Note: Gasless transactions are currently only supported for the Burner
+          wallet & Fuelet.
+          <br />
+          <br />
+          Support for other wallets is coming soon. If you use these other
+          wallets, you can still play the game, but you will need to pay gas
+          fees yourself.
+        </div>
+        <button
+          onClick={onClose}
+          style={{
+            marginTop: "20px",
+            padding: "8px 16px",
+            borderRadius: "4px",
+            border: "none",
+            backgroundColor: "#007bff",
+            color: "white",
+            cursor: "pointer",
+          }}
+        >
+          Continue
+        </button>
+      </div>
+    </div>
+  );
+};

frontend/src/main.tsx

@@ -19,6 +19,7 @@ import { walletConnect } from "@wagmi/connectors";
 import type { Config as WagmiConfig } from "@wagmi/core";
 import "./index.css";
 import App from "./App.tsx";
+import { Toaster } from "react-hot-toast";
 
 const queryClient = new QueryClient();
 const networks = [
@@ -91,6 +92,17 @@ createRoot(document.getElementById("root")!).render(
         uiConfig={{ suggestBridge: false }}
         theme="dark"
       >
+        <Toaster
+          toastOptions={{
+            style: {
+              backgroundColor: "#ac7339",
+              border: "4px solid #754a1e",
+              borderRadius: "8px",
+              color: "black",
+            },
+            position: "bottom-center",
+          }}
+        />
         <App />
       </FuelProvider>
     </QueryClientProvider>{" "}