added TransactionStatus to send fleet

ametel01 · Jan 2, 2024 · b8a06b9 · b8a06b9
1 parent c9ee099
commit b8a06b9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/packages/testnet/frontend/src/components/buttons/ButtonAttackPlanet.tsx b/packages/testnet/frontend/src/components/buttons/ButtonAttackPlanet.tsx
@@ -26,6 +26,7 @@ import {
   getFuelConsumption,
 } from '../../shared/utils/FleetUtils';
 import { convertSecondsToTime } from '../../shared/utils';
+import { TransactionStatus } from '../ui/TransactionStatus';
 
 type ShipName = 'carrier' | 'scraper' | 'sparrow' | 'frigate' | 'armade';
 
@@ -165,6 +166,8 @@ function ButtonAttackPlanet({
   const [travelTime, setTravelTime] = useState(0);
   const [fuelConsumption, setFuelConsumption] = useState(0);
   const [cargoCapacity, setCargoCapacity] = useState(0);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isButtotClicked, setisButtotClicked] = useState(false);
 
   const missions = useGetActiveMissions(planetId);
   const isMissionLimitReached =
@@ -179,8 +182,6 @@ function ButtonAttackPlanet({
     0
   );
 
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
   const handleButtonClick = () => {
     setIsModalOpen(true);
   };
@@ -216,7 +217,7 @@ function ButtonAttackPlanet({
     setCargoCapacity(calculateTotalCargoCapacity(fleet));
   }, [distance, fleet, ownPosition, techs]);
 
-  const { writeAsync } = useSendFleet(fleet, position, false);
+  const { writeAsync, data } = useSendFleet(fleet, position, false);
 
   const ships = ['carrier', 'scraper', 'sparrow', 'frigate', 'armade'];
 
@@ -234,6 +235,10 @@ function ButtonAttackPlanet({
     }
   }, [travelTime]);
 
+  const handleSendClick = () => {
+    writeAsync(), setIsModalOpen(false), setisButtotClicked(true);
+  };
+
   return (
     <div>
       {!disabled && !noRequirements && !isNoobProtected && (
@@ -359,7 +364,7 @@ function ButtonAttackPlanet({
                 </Text>
               </WarningContainer>
               <StyledButton
-                onClick={() => writeAsync()}
+                onClick={handleSendClick}
                 fullWidth
                 style={{
                   background: isAnyShipOverLimit ? '#3B3F53' : '#4A63AA',
@@ -370,6 +375,9 @@ function ButtonAttackPlanet({
               </StyledButton>
             </StyledBox>
           </Modal>
+          {isButtotClicked && (
+            <TransactionStatus name="Sent Fleet" tx={data?.transaction_hash} />
+          )}
         </>
       )}
       {!disabled && noRequirements && (

diff --git a/packages/testnet/frontend/src/components/ui/MissionRow.tsx b/packages/testnet/frontend/src/components/ui/MissionRow.tsx
@@ -116,6 +116,7 @@ export const MissionRow = memo(
             }}
             size="small"
             sx={{ background: '#4A63AA' }}
+            fullWidth
           >
             {mission.is_debris ? 'Collect' : 'Attack'}
           </StyledButton>

diff --git a/packages/testnet/frontend/src/hooks/writeHooks/useSendFleet.ts b/packages/testnet/frontend/src/hooks/writeHooks/useSendFleet.ts
@@ -12,11 +12,11 @@ export default function useSendFleet(
     abi: game.abi,
     address: GAMEADDRESS,
   });
-  const { writeAsync, isPending } = useContractWrite({
+  const { writeAsync, data } = useContractWrite({
     calls: [
       contract?.populateTransaction.send_fleet!(fleet, position, isDebris),
     ],
   });
 
-  return { writeAsync, isPending };
+  return { writeAsync, data };
 }