ultimate-dominion · ECWireless · Jul 2, 2024 · Jul 2, 2024 · Jul 2, 2024 · Jul 2, 2024
diff --git a/packages/client/src/components/MapPanel.tsx b/packages/client/src/components/MapPanel.tsx
@@ -31,6 +31,7 @@ export const MapPanel = (): JSX.Element => {
   const { character } = useCharacter();
 
   const [isSpawning, setIsSpawning] = useState(false);
+  const [isMoving, setIsMoving] = useState(false);
 
   const position = useComponentValue(
     Position,
@@ -90,6 +91,8 @@ export const MapPanel = (): JSX.Element => {
   const onMove = useCallback(
     async (direction: 'up' | 'down' | 'left' | 'right') => {
       try {
+        setIsMoving(true);
+
         if (!delegatorAddress) {
           throw new Error('Burner not found');
         }
@@ -140,6 +143,8 @@ export const MapPanel = (): JSX.Element => {
         }
       } catch (e) {
         renderError(e, 'Failed to move.');
+      } finally {
+        setIsMoving(false);
       }
     },
     [character, delegatorAddress, move, position, renderError],
@@ -207,7 +212,7 @@ export const MapPanel = (): JSX.Element => {
         </Stack>
       </Box>
       {isSpawned ? (
-        <NavigationCompass onMove={onMove} />
+        <NavigationCompass isMoving={isMoving} onMove={onMove} />
       ) : (
         <Button
           isLoading={isSpawning}
@@ -235,8 +240,10 @@ const CharacterPiece = (): JSX.Element => (
 );
 
 const NavigationCompass = ({
+  isMoving,
   onMove,
 }: {
+  isMoving: boolean;
   onMove: (direction: 'up' | 'down' | 'left' | 'right') => void;
 }): JSX.Element => {
   return (
@@ -295,6 +302,7 @@ const NavigationCompass = ({
         <Button
           bg="white"
           borderRadius="50%"
+          isDisabled={isMoving}
           p={0}
           onClick={() => onMove('up')}
           variant="ghost"
@@ -310,6 +318,7 @@ const NavigationCompass = ({
           <Button
             bg="white"
             borderRadius="50%"
+            isDisabled={isMoving}
             p={0}
             onClick={() => onMove('left')}
             variant="ghost"
@@ -321,6 +330,7 @@ const NavigationCompass = ({
           <Button
             bg="white"
             borderRadius="50%"
+            isDisabled={isMoving}
             p={0}
             onClick={() => onMove('right')}
             variant="ghost"
@@ -336,6 +346,7 @@ const NavigationCompass = ({
         <Button
           bg="white"
           borderRadius="50%"
+          isDisabled={isMoving}
           p={0}
           onClick={() => onMove('down')}
           variant="ghost"

diff --git a/packages/client/src/components/StatsPanel.tsx b/packages/client/src/components/StatsPanel.tsx
@@ -28,7 +28,7 @@ export const StatsPanel = (): JSX.Element => {
   const {
     components: { Levels },
   } = useMUD();
-  const { character } = useCharacter();
+  const { character, characterStats } = useCharacter();
 
   const nextLevelXpRequirement = useComponentValue(
     Levels,
@@ -38,9 +38,9 @@ export const StatsPanel = (): JSX.Element => {
   const levelPercent = useMemo(() => {
     if (!nextLevelXpRequirement) return 0;
     return (
-      (100 * Number(character?.experience)) / Number(nextLevelXpRequirement)
+      (100 * Number(characterStats.experience)) / Number(nextLevelXpRequirement)
     );
-  }, [character?.experience, nextLevelXpRequirement]);
+  }, [characterStats.experience, nextLevelXpRequirement]);
 
   if (!character) {
     return (
@@ -50,16 +50,9 @@ export const StatsPanel = (): JSX.Element => {
     );
   }
 
-  const {
-    agility,
-    experience,
-    goldBalance,
-    hitPoints,
-    image,
-    intelligence,
-    name,
-    strength,
-  } = character;
+  const { goldBalance, image, name } = character;
+  const { agility, experience, hitPoints, intelligence, strength } =
+    characterStats;
 
   return (
     <VStack alignItems="start" h="100%" p={2} spacing={4}>

diff --git a/packages/client/src/components/WalletDetailsModal.tsx b/packages/client/src/components/WalletDetailsModal.tsx
@@ -36,46 +36,106 @@ export const WalletDetailsModal = ({
   const { renderSuccess, renderError } = useToast();
   const { data: externalWalletClient } = useWalletClient();
   const { isConnected, address } = useAccount();
-  const { burnerAddress, burnerBalance } = useMUD();
+  const {
+    burnerAddress,
+    burnerBalance,
+    network: { walletClient },
+  } = useMUD();
   const { data: externalWalletBalance } = useBalance({
     address: externalWalletClient?.account.address,
   });
 
-  const [amount, setAmount] = useState<string>('0');
+  const [depositAmount, setDepositAmount] = useState<string>('0');
   const [isDepositing, setIsDepositing] = useState(false);
-  const [showError, setShowError] = useState(false);
+  const [depositErrorMessage, setDepositErrorMessage] = useState<string | null>(
+    null,
+  );
+
+  const [withdrawAmount, setWithdrawAmount] = useState<string>('0');
+  const [isWithdrawing, setIsWithdrawing] = useState(false);
+  const [withdrawErrorMessage, setWithdrawErrorMessage] = useState<
+    string | null
+  >(null);
 
-  // Reset showError state when any of the form fields change
+  // Reset errorMessage state when any of the form fields change
   useEffect(() => {
-    setShowError(false);
-  }, [amount]);
+    setDepositErrorMessage(null);
+    setWithdrawErrorMessage(null);
+  }, [depositAmount, withdrawAmount]);
 
   const onDeposit = useCallback(async () => {
     try {
       setIsDepositing(true);
 
-      if (!externalWalletClient) {
+      if (!(externalWalletBalance && externalWalletClient)) {
         throw new Error('No external wallet client found');
       }
 
-      if (!amount || parseEther(amount) <= 0) {
-        setShowError(true);
+      if (!depositAmount || parseEther(depositAmount) <= 0) {
+        setDepositErrorMessage('Amount must be greater than 0');
+        return;
+      }
+
+      if (parseEther(depositAmount) > externalWalletBalance.value) {
+        setDepositErrorMessage('Insufficient funds in external wallet');
         return;
       }
 
       await externalWalletClient.sendTransaction({
         to: burnerAddress,
-        value: parseEther(amount),
+        value: parseEther(depositAmount),
       });
 
-      setAmount('0');
+      setDepositAmount('0');
       renderSuccess('Funds deposited successfully!');
     } catch (error) {
       renderError(error, 'Error depositing funds');
     } finally {
       setIsDepositing(false);
     }
-  }, [amount, burnerAddress, externalWalletClient, renderError, renderSuccess]);
+  }, [
+    burnerAddress,
+    depositAmount,
+    externalWalletBalance,
+    externalWalletClient,
+    renderError,
+    renderSuccess,
+  ]);
+
+  const onWithdraw = useCallback(async () => {
+    try {
+      setIsWithdrawing(true);
+
+      if (!withdrawAmount || parseEther(withdrawAmount) <= 0) {
+        setWithdrawErrorMessage('Amount must be greater than 0');
+        return;
+      }
+
+      if (parseEther(withdrawAmount) > parseEther(burnerBalance)) {
+        setWithdrawErrorMessage('Insufficient funds in session wallet');
+        return;
+      }
+
+      await walletClient.sendTransaction({
+        to: address,
+        value: parseEther(withdrawAmount),
+      });
+
+      setWithdrawAmount('0');
+      renderSuccess('Funds withdrawn successfully!');
+    } catch (error) {
+      renderError(error, 'Error withdrawing funds');
+    } finally {
+      setIsWithdrawing(false);
+    }
+  }, [
+    address,
+    burnerBalance,
+    renderError,
+    renderSuccess,
+    walletClient,
+    withdrawAmount,
+  ]);
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
@@ -120,21 +180,21 @@ export const WalletDetailsModal = ({
                   time.
                 </Text>
                 <HStack>
-                  <FormControl isInvalid={showError}>
+                  <FormControl isInvalid={!!depositErrorMessage}>
                     <FormLabel fontSize="xs">
                       Deposit to session wallet
                     </FormLabel>
-                    {showError && (
+                    {!!depositErrorMessage && (
                       <FormHelperText color="red" fontSize="xs" mb={2}>
-                        Amount must be greater than 0
+                        {depositErrorMessage}
                       </FormHelperText>
                     )}
                     <Input
                       isDisabled={isDepositing}
-                      onChange={e => setAmount(e.target.value)}
+                      onChange={e => setDepositAmount(e.target.value)}
                       placeholder="Amount"
                       type="number"
-                      value={amount}
+                      value={depositAmount}
                     />
                   </FormControl>
                   <Button
@@ -146,6 +206,33 @@ export const WalletDetailsModal = ({
                     Deposit
                   </Button>
                 </HStack>
+                <HStack>
+                  <FormControl isInvalid={!!withdrawErrorMessage}>
+                    <FormLabel fontSize="xs">
+                      Withdraw from session wallet
+                    </FormLabel>
+                    {!!withdrawErrorMessage && (
+                      <FormHelperText color="red" fontSize="xs" mb={2}>
+                        {withdrawErrorMessage}
+                      </FormHelperText>
+                    )}
+                    <Input
+                      isDisabled={isWithdrawing}
+                      onChange={e => setWithdrawAmount(e.target.value)}
+                      placeholder="Amount"
+                      type="number"
+                      value={withdrawAmount}
+                    />
+                  </FormControl>
+                  <Button
+                    alignSelf="end"
+                    isLoading={isWithdrawing}
+                    onClick={onWithdraw}
+                    size="sm"
+                  >
+                    Withdraw
+                  </Button>
+                </HStack>
               </VStack>
             </VStack>
           ) : (