Toast

packages/client/index.css

@@ -8,6 +8,6 @@
 
 :root {
   --toastify-toast-background: #343434;
-  --toastify-color-progress-success: #c586c0;
-  --toastify-text-color-dark: #969696;
+  --toastify-color-progress-success: #343434;
+  --toastify-text-color-dark: #cccccc;
 }

packages/client/src/components/Wanderer/index.tsx

@@ -7,7 +7,7 @@ export default function Wanderer({ wandererEntity }: { wandererEntity: EntityInd
   const { selectedWandererEntity, selectWandererEntity } = useWandererContext();
 
   return (
-    <div className="border border-dark-400 w-72 h-auto py-2 px-4 flex flex-col justify-between items-center bg-dark-500 transform delay-500">
+    <div className="border border-dark-400 w-72 h-auto p-6 flex flex-col justify-between items-center bg-dark-500 transform delay-500">
       <WandererImage entity={wandererEntity} />
       <div className="mt-4 flex justify-around w-full">
         {wandererEntity === selectedWandererEntity && (

packages/client/src/components/info/ClaimTurnsButton.tsx

@@ -2,6 +2,7 @@ import { useCallback, useState } from "react";
 import { useWandererContext } from "../../contexts/WandererContext";
 import { useMUD } from "../../mud/MUDContext";
 import CustomButton from "../UI/Button/CustomButton";
+import { toastPromise } from "../../mud/utils/toast";
 
 export default function ClaimTurnsButton({ claimableTurns }: { claimableTurns: number }) {
   const { world, systems } = useMUD();
@@ -14,7 +15,7 @@ export default function ClaimTurnsButton({ claimableTurns }: { claimableTurns: n
     }
     setIsBusy(true);
     const tx = await systems["system.ClaimCycleTurns"].executeTyped(world.entities[selectedWandererEntity]);
-    await tx.wait();
+    await toastPromise(tx.wait(), `Claim Turns `, `Claimed Turns `);
     setIsBusy(false);
   }, [world, systems, selectedWandererEntity]);
 

packages/client/src/components/info/PassTurnButton.tsx

@@ -3,6 +3,7 @@ import { useWandererContext } from "../../contexts/WandererContext";
 import { useCycleTurns } from "../../mud/hooks/turns";
 import { useMUD } from "../../mud/MUDContext";
 import CustomButton from "../UI/Button/CustomButton";
+import { toastPromise } from "../../mud/utils/toast";
 
 export default function PassTurnButton() {
   const { world, systems } = useMUD();
@@ -16,7 +17,7 @@ export default function PassTurnButton() {
     if (selectedWandererEntity === undefined) throw new Error("No wanderer selected");
     setIsBusy(true);
     const tx = await systems["system.PassCycleTurn"].executeTyped(world.entities[selectedWandererEntity]);
-    await tx.wait();
+    await toastPromise(tx.wait(), `Pass turn... `, `Turn is passed`);
     setIsBusy(false);
   }, [world, systems, selectedWandererEntity]);
 

packages/client/src/index.tsx

@@ -8,7 +8,6 @@ import { MUDProvider } from "./mud/MUDContext";
 import { ComponentBrowser } from "./ComponentBrowser";
 import "../index.css";
 import { WandererProvider } from "./contexts/WandererContext";
-import { defaultToastOptions } from "./mud/utils/toast";
 
 const rootElement = document.getElementById("react-root");
 if (!rootElement) throw new Error("React root not found");
@@ -20,7 +19,7 @@ setup().then((result) => {
     <MUDProvider {...result}>
       <WandererProvider>
         <App />
-        <ToastContainer {...defaultToastOptions} />
+        <ToastContainer />
       </WandererProvider>
       {import.meta.env.DEV ? <ComponentBrowser /> : null}
     </MUDProvider>

packages/client/src/mud/hooks/combat.ts

@@ -14,6 +14,7 @@ import { useMUD } from "../MUDContext";
 import { useEntityQuery } from "../useEntityQuery";
 import { CombatAction } from "../utils/combat";
 import { parsePStats } from "../utils/experience";
+import { toastPromise } from "../utils/toast";
 
 export const useActiveCombat = (entity: EntityIndex | undefined) => {
   const mud = useMUD();
@@ -41,7 +42,7 @@ export const useActivateCycleCombat = () => {
         world.entities[wandererEntity],
         world.entities[mapEntity]
       );
-      await tx.wait();
+      await toastPromise(tx.wait(), `Activate map...`, `Map is active`);
     },
     [world, systems]
   );
@@ -53,7 +54,7 @@ export const useExecuteCycleCombatRound = () => {
   return useCallback(
     async (wandererEntity: EntityIndex, actions: CombatAction[]) => {
       const tx = await systems["system.CycleCombat"].executeTyped(world.entities[wandererEntity], actions);
-      await tx.wait();
+      await toastPromise(tx.wait(), `Execute cycle combat round..`, `Combat!`);
     },
     [world, systems]
   );
@@ -68,7 +69,7 @@ export const useClaimCycleCombatReward = () => {
         world.entities[wandererEntity],
         world.entities[requestEntity]
       );
-      await tx.wait();
+      await toastPromise(tx.wait(), `Claim combat reward...`, `Claim is rewarded!`);
     },
     [world, systems]
   );
@@ -83,7 +84,7 @@ export const useCancelCycleCombatReward = () => {
         world.entities[wandererEntity],
         world.entities[requestEntity]
       );
-      await tx.wait();
+      await toastPromise(tx.wait(), `Cancel claim combat reward...`, `Claim is cancelled!`);
     },
     [world, systems]
   );

packages/client/src/mud/hooks/cycle.ts

@@ -1,6 +1,7 @@
 import { EntityID, EntityIndex } from "@latticexyz/recs";
 import { useCallback, useEffect } from "react";
 import { useMUD } from "../MUDContext";
+import { toastPromise } from "../utils/toast";
 
 export const useCompleteCycle = (wandererEntity: EntityIndex | undefined) => {
   const { world, systems } = useMUD();
@@ -10,7 +11,7 @@ export const useCompleteCycle = (wandererEntity: EntityIndex | undefined) => {
     const tx = await systems["system.CompleteCycle"].executeTyped(world.entities[wandererEntity], {
       gasLimit: 5000000,
     });
-    await tx.wait();
+    await toastPromise(tx.wait(), `Cycle complete... `, `Cycle completed! `);
   }, [world, systems, wandererEntity]);
 };
 
@@ -26,7 +27,7 @@ export const useStartCycle = (wandererEntity: EntityIndex | undefined) => {
         world.entities[wheelEntity],
         { gasLimit: 30000000 }
       );
-      await tx.wait();
+      await toastPromise(tx.wait(), `Starts cycle... `, `Cycle started!`);
     },
     [world, systems, wandererEntity]
   );

packages/client/src/mud/hooks/skill.ts

@@ -3,6 +3,7 @@ import { EntityIndex, Has } from "@latticexyz/recs";
 import { useCallback, useMemo } from "react";
 import { useMUD } from "../MUDContext";
 import { getSkill } from "../utils/skill";
+import { toastPromise } from "../utils/toast";
 
 export const useSkill = (entity: EntityIndex | undefined) => {
   const { world, components } = useMUD();
@@ -57,7 +58,7 @@ export const useLearnedSkillEntities = (targetEntity: EntityIndex | undefined) =
 };
 
 export const useLearnCycleSkill = (wandererEntity: EntityIndex | undefined) => {
-  const { world, systems } = useMUD();
+  const { world, systems, components } = useMUD();
 
   return useCallback(
     async (skillEntity: EntityIndex) => {
@@ -66,14 +67,15 @@ export const useLearnCycleSkill = (wandererEntity: EntityIndex | undefined) => {
         world.entities[wandererEntity],
         world.entities[skillEntity]
       );
-      await tx.wait();
+      const skill = getSkill(world, components, skillEntity);
+      await toastPromise(tx.wait(), `Learning ${skill.name}`, `${skill.name} learned!`);
     },
-    [world, systems, wandererEntity]
+    [world, systems, components, wandererEntity]
   );
 };
 
 export const usePermSkill = (wandererEntity: EntityIndex | undefined) => {
-  const { world, systems } = useMUD();
+  const { world, systems, components } = useMUD();
 
   return useCallback(
     async (skillEntity: EntityIndex) => {
@@ -82,23 +84,25 @@ export const usePermSkill = (wandererEntity: EntityIndex | undefined) => {
         world.entities[wandererEntity],
         world.entities[skillEntity]
       );
-      await tx.wait();
+      const skill = getSkill(world, components, skillEntity);
+      await toastPromise(tx.wait(), `Use ${skill.name}`, `${skill.name} used`);
     },
-    [world, systems, wandererEntity]
+    [world, systems, components, wandererEntity]
   );
 };
 
 export const useExecuteNoncombatSkill = () => {
-  const { world, systems } = useMUD();
+  const { world, systems, components } = useMUD();
 
   return useCallback(
     async (cycleEntity: EntityIndex, skillEntity: EntityIndex) => {
       const tx = await systems["system.NoncombatSkill"].executeTyped(
         world.entities[cycleEntity],
         world.entities[skillEntity]
       );
-      await tx.wait();
+      const skill = getSkill(world, components, skillEntity);
+      await toastPromise(tx.wait(), `Use execute ${skill.name}`, `Execute ${skill.name} is a used`);
     },
-    [world, systems]
+    [world, systems, components]
   );
 };

packages/client/src/mud/hooks/transfer.ts

@@ -1,14 +1,19 @@
 import { EntityID } from "@latticexyz/recs";
 import { useCallback } from "react";
 import { useMUD } from "../../mud/MUDContext";
+import { toastPromise } from "../utils/toast";
 
 export default function useTransferFrom() {
   const { systems, playerEntityId } = useMUD();
 
   return useCallback(
     async (toPlayerEntityId: string, tokenId: EntityID) => {
       const tx = await systems["system.WNFT"].transferFrom(playerEntityId, toPlayerEntityId, tokenId);
-      await tx.wait();
+      await toastPromise(
+        tx.wait(),
+        `Transfer for ${toPlayerEntityId}..`,
+        `The transfer for ${toPlayerEntityId} is completed`
+      );
     },
     [systems, playerEntityId]
   );

packages/client/src/mud/hooks/useChangeCycleEquipment.ts

@@ -2,14 +2,16 @@ import { EntityIndex } from "@latticexyz/recs";
 import { useCallback } from "react";
 import { useWandererContext } from "../../contexts/WandererContext";
 import { useMUD } from "../MUDContext";
+import { toastPromise } from "../utils/toast";
+import { getLoot } from "../utils/getLoot";
 
 export enum EquipmentAction {
   UNEQUIP,
   EQUIP,
 }
 
 export const useChangeCycleEquipment = () => {
-  const { world, systems } = useMUD();
+  const { world, systems, components } = useMUD();
   const { selectedWandererEntity } = useWandererContext();
 
   return useCallback(
@@ -26,7 +28,8 @@ export const useChangeCycleEquipment = () => {
         equipmentSlotId,
         equipmentEntityId
       );
-      await tx.wait();
+      const loot = getLoot(world, components, equipmentEntity);
+      await toastPromise(tx.wait(), `Equip ${loot.name}...`, `${loot.name} equipped...`);
     },
     [world, systems, selectedWandererEntity]
   );

packages/client/src/mud/hooks/useWandererSpawn.ts

@@ -1,14 +1,15 @@
 import { EntityIndex } from "@latticexyz/recs";
 import { useCallback } from "react";
 import { useMUD } from "../MUDContext";
+import { toastPromise } from "../utils/toast";
 
 export const useWandererSpawn = () => {
   const { world, systems } = useMUD();
 
   return useCallback(
     async (guiseProtoEntity: EntityIndex) => {
       const tx = await systems["system.WandererSpawn"].executeTyped(world.entities[guiseProtoEntity]);
-      await tx.wait();
+      await toastPromise(tx.wait(), `Generate Wanderer..`, `Wanderer generated`);
     },
     [world, systems]
   );

packages/client/src/mud/utils/toast.ts

@@ -1,18 +1,43 @@
-import { ToastContent } from "react-toastify";
+import { toast } from "react-toastify";
 
-export const defaultToastOptions = {
-  style: {
-    borderRadius: "0",
-    padding: "10px",
-    border: "1px solid #3c3c3c",
-    backgroundColor: "#252526",
-  },
-  icon: false,
-  position: "bottom-right",
-  autoClose: 2500,
-  hideProgressBar: true,
-  closeOnClick: true,
-  pauseOnHover: true,
-  draggable: false,
-  theme: "dark",
-} as const;
+export const toastPromise = async (
+  promise: Promise<unknown> | (() => Promise<unknown>),
+  loadingRender: string,
+  successRender: string
+) => {
+  await toast.promise(promise, {
+    pending: {
+      style: {
+        borderRadius: "0",
+        padding: "10px",
+        border: "1px solid #3c3c3c",
+        backgroundColor: "#252526",
+      },
+      render: loadingRender,
+      icon: false,
+      position: "bottom-right",
+      autoClose: 0,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: false,
+      theme: "dark",
+    },
+    success: {
+      style: {
+        borderRadius: "0",
+        padding: "10px",
+        border: "1px solid #3c3c3c",
+        backgroundColor: "#252526",
+      },
+      render: successRender,
+      icon: false,
+      position: "bottom-right",
+      autoClose: 2000,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: false,
+      theme: "dark",
+    },
+    error: "error",
+  });
+};