feat: added custom toast icons, messaging improvements

FuelLabs · Dec 18, 2024 · 34d6c81 · 34d6c81
1 parent 1d8193b
commit 34d6c81
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 11 deletions.
diff --git a/frontend/src/components/NewPlayer.tsx b/frontend/src/components/NewPlayer.tsx
@@ -16,6 +16,7 @@ import { PlayerOutput } from "../sway-api/contracts/FarmContract";
 import { Address, BN, Provider } from "fuels";
 import { usePaymaster } from "../hooks/usePaymaster";
 import { cssObj } from "@fuel-ui/css";
+import { toast } from "react-hot-toast";
 
 interface NewPlayerProps {
   contract: FarmContract | null;
@@ -52,6 +53,11 @@ 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.");
+      }
     }
   }
 
@@ -78,6 +84,7 @@ export default function NewPlayer({
       } as PlayerOutput);
       setModal("none");
       updatePageNum();
+      toast.success("Welcome to Sway Farm! 🌱");
     }
     return tx;
   }
@@ -124,6 +131,7 @@ export default function NewPlayer({
       } as PlayerOutput);
       setModal("none");
       updatePageNum();
+      toast.success("Welcome to Sway Farm! 🌱");
     }
   }
 
@@ -143,6 +151,7 @@ export default function NewPlayer({
               "Gas station failed, trying direct transaction...",
               error,
             );
+            toast.error("Gas Station error, please sign from wallet.");
             setStatus("retrying");
             await createPlayerWithoutGasStation();
           }
@@ -155,10 +164,12 @@ export default function NewPlayer({
       } catch (err) {
         console.log("Error in NewPlayer:", err);
         setStatus("error");
+        toast.error("Failed to create player :(.");
       }
     } else {
       console.log("ERROR: contract missing");
       setStatus("error");
+      toast.error("Failed to create player :(");
     }
   }
 
@@ -185,22 +196,21 @@ export default function NewPlayer({
       {status === "loading" && (
         <BoxCentered>
           <Loading />
-          <p>Creating new player...</p>
         </BoxCentered>
       )}
       {status === "retrying" && (
         <BoxCentered>
           <Loading />
-          <p>Retrying with alternate method...</p>
         </BoxCentered>
       )}
       {status === "error" && (
         <div>
-          <p>Failed to create player! Please try again.</p>
+          <p>Something went wrong!</p>
           <Button
             css={buttonStyle}
             onPress={() => {
               setStatus("none");
+              updatePageNum();
             }}
           >
             Try Again

diff --git a/frontend/src/components/modals/BuySeeds.tsx b/frontend/src/components/modals/BuySeeds.tsx
@@ -167,25 +167,24 @@ export default function BuySeeds({
       {status === "loading" && (
         <BoxCentered>
           <Spinner color="#754a1e" />
-          <p>Processing transaction...</p>
         </BoxCentered>
       )}
       {status === "retrying" && (
         <BoxCentered>
           <Spinner color="#754a1e" />
-          <p>Retrying with alternate method...</p>
         </BoxCentered>
       )}
       {status === "error" && (
         <div>
-          <p>Transaction failed! Please try again.</p>
+          <p>Something went wrong!</p>
           <Button
             css={buttonStyle}
             onPress={() => {
               setStatus("none");
+              updatePageNum();
             }}
           >
-            Buy 10 seeds
+            Try Again
           </Button>
         </div>
       )}

diff --git a/frontend/src/components/modals/HarvestModal.tsx b/frontend/src/components/modals/HarvestModal.tsx
@@ -149,22 +149,21 @@ export default function HarvestModal({
       {status === "loading" && (
         <BoxCentered>
           <Spinner color="#754a1e" />
-          <p>Processing harvest...</p>
         </BoxCentered>
       )}
       {status === "retrying" && (
         <BoxCentered>
           <Spinner color="#754a1e" />
-          <p>Retrying with alternate method...</p>
         </BoxCentered>
       )}
       {status === "error" && (
         <div>
-          <p>Harvest failed! Please try again.</p>
+          <p>Something went wrong!</p>
           <Button
             css={buttonStyle}
             onPress={() => {
               setStatus("none");
+              updatePageNum();
             }}
           >
             Try Again

diff --git a/frontend/src/components/modals/PlantModal.tsx b/frontend/src/components/modals/PlantModal.tsx
@@ -159,7 +159,7 @@ export default function PlantModal({
       {status === "retrying" && <Loading />}
       {status === "error" && (
         <div>
-          <p>Planting failed! Please try again.</p>
+          <p>Something went wrong!</p>
           <Button
             css={buttonStyle}
             onPress={() => {

diff --git a/frontend/src/components/toast/ToastIcons.tsx b/frontend/src/components/toast/ToastIcons.tsx
@@ -0,0 +1,33 @@
+export const CustomSuccessIcon = () => (
+  <div className="flex items-center justify-center w-7 h-7">
+    <svg
+      width="26"
+      height="26"
+      viewBox="0 0 26 26"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13 0.5C6.09651 0.5 0.5 6.09651 0.5 13C0.5 19.9035 6.09651 25.5 13 25.5C19.9035 25.5 25.5 19.9035 25.5 13C25.5 6.09651 19.9035 0.5 13 0.5ZM12.5489 20.1217C11.8469 20.8237 10.7088 20.8237 10.0068 20.1217L8.73569 18.8506L4.57888 14.6941C3.87685 13.9921 3.87685 12.854 4.57888 12.1519C5.2809 11.4499 6.41898 11.4499 7.121 12.1519L11.2775 16.3085L19.6381 7.94791C20.3401 7.24588 21.4782 7.24588 22.1802 7.94791C22.8823 8.64993 22.8823 9.78801 22.1802 10.49L12.5489 20.1217Z"
+        fill="#357333"
+      />
+    </svg>
+  </div>
+);
+
+export const CustomErrorIcon = () => (
+  <div className="flex items-center justify-center w-7 h-7">
+    <svg
+      width="26"
+      height="26"
+      viewBox="0 0 26 26"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13 0.5C6.0965 0.5 0.5 6.0965 0.5 13C0.5 19.9035 6.0965 25.5 13 25.5C19.9035 25.5 25.5 19.9035 25.5 13C25.5 6.0965 19.9035 0.5 13 0.5ZM19.3268 16.6845C20.0566 17.4142 20.0566 18.5974 19.3268 19.3268C18.5971 20.0566 17.414 20.0566 16.6845 19.3268L13 15.6423L9.31549 19.3268C8.58576 20.0566 7.40264 20.0566 6.67318 19.3268C5.94345 18.5971 5.94345 17.414 6.67318 16.6845L10.3577 13L6.67318 9.31549C5.94345 8.58576 5.94345 7.40264 6.67318 6.67318C7.40292 5.94345 8.58604 5.94345 9.31549 6.67318L13 10.3577L16.6845 6.67318C17.4142 5.94345 18.5974 5.94345 19.3268 6.67318C20.0566 7.40292 20.0566 8.58604 19.3268 9.31549L15.6423 13L19.3268 16.6845Z"
+        fill="#993B45"
+      />
+    </svg>
+  </div>
+);
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -20,6 +20,10 @@ import type { Config as WagmiConfig } from "@wagmi/core";
 import "./index.css";
 import App from "./App.tsx";
 import { Toaster } from "react-hot-toast";
+import {
+  CustomSuccessIcon,
+  CustomErrorIcon,
+} from "./components/toast/ToastIcons";
 
 const queryClient = new QueryClient();
 const networks = [
@@ -28,6 +32,7 @@ const networks = [
     url: FUEL_PROVIDER_URL,
   },
 ];
+
 const FUEL_CONFIG = createFuelConfig(() => {
   const WalletConnectProjectId = "35b967d8f17700b2de24f0abee77e579";
   const wagmiConfig = createConfig({
@@ -99,6 +104,14 @@ createRoot(document.getElementById("root")!).render(
               border: "4px solid #754a1e",
               borderRadius: "8px",
               color: "black",
+              padding: "8px 12px",
+              fontSize: "14px",
+            },
+            success: {
+              icon: <CustomSuccessIcon />,
+            },
+            error: {
+              icon: <CustomErrorIcon />,
             },
             position: "bottom-center",
           }}