refactor: disable refresh when buying is not confirmed

Knivelty · Oct 16, 2024 · 2788cf0 · 2788cf0
1 parent 97ad967
commit 2788cf0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git a/packages/client/src/ui/features/shop/HeroCard.tsx b/packages/client/src/ui/features/shop/HeroCard.tsx
@@ -24,9 +24,10 @@ const rarityBgColor: Record<number, string> = {
 interface IHeroCard {
     creatureKey: CreatureKey;
     altarSlot: number;
+    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-export const HeroCard = ({ creatureKey, altarSlot }: IHeroCard) => {
+export const HeroCard = ({ creatureKey, altarSlot, setLoading }: IHeroCard) => {
     const {
         clientComponents: { GameStatus, Player },
         systemCalls: { buyHero, buyAndMerge },
@@ -50,6 +51,7 @@ export const HeroCard = ({ creatureKey, altarSlot }: IHeroCard) => {
             alert("can only buy piece during prepare");
             return;
         }
+        setLoading(true);
         playClick();
 
         if (mergeAble.canMerge) {
@@ -64,11 +66,17 @@ export const HeroCard = ({ creatureKey, altarSlot }: IHeroCard) => {
                 y: mergeAble.onBoardCoord.y,
                 invSlot: mergeAble.invSlot,
                 onBoardIdx: mergeAble.boardIdx,
-            }).then(() => {
-                playUpgrade();
-            });
+            })
+                .then(() => {
+                    playUpgrade();
+                })
+                .finally(() => {
+                    setLoading(false);
+                });
         } else {
-            buyHero(account, altarSlot, firstEmptyInv);
+            buyHero(account, altarSlot, firstEmptyInv).finally(() => {
+                setLoading(false);
+            });
         }
     }, [
         account,

diff --git a/packages/client/src/ui/features/shop/Shop.tsx b/packages/client/src/ui/features/shop/Shop.tsx
@@ -85,34 +85,39 @@ const Shop = () => {
                             level: 1,
                         }}
                         altarSlot={1}
+                        setLoading={setLoading}
                     />
                     <HeroCard
                         creatureKey={{
                             id: heroAltar?.slot2,
                             level: 1,
                         }}
                         altarSlot={2}
+                        setLoading={setLoading}
                     />
                     <HeroCard
                         creatureKey={{
                             id: heroAltar?.slot3,
                             level: 1,
                         }}
                         altarSlot={3}
+                        setLoading={setLoading}
                     />
                     <HeroCard
                         creatureKey={{
                             id: heroAltar?.slot4,
                             level: 1,
                         }}
                         altarSlot={4}
+                        setLoading={setLoading}
                     />
                     <HeroCard
                         creatureKey={{
                             id: heroAltar?.slot5,
                             level: 1,
                         }}
                         altarSlot={5}
+                        setLoading={setLoading}
                     />
                 </div>