Implement FE of withdrawals

frontend/components/MainPage/sections/AddFundsSection.tsx

@@ -6,14 +6,12 @@ import {
   Button,
   Flex,
   message,
-  Popover,
   // QRCode,
   Tooltip,
   Typography,
 } from 'antd';
 import Link from 'next/link';
 import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
-import styled from 'styled-components';
 
 import { UNICODE_SYMBOLS } from '@/constants/symbols';
 import { COW_SWAP_GNOSIS_XDAI_OLAS_URL } from '@/constants/urls';
@@ -27,12 +25,6 @@ import { CardSection } from '../../styled/CardSection';
 
 const { Text } = Typography;
 
-const CustomizedCardSection = styled(CardSection)<{ border?: boolean }>`
-  > .ant-btn {
-    width: 50%;
-  }
-`;
-
 export const AddFundsSection = () => {
   const fundSectionRef = useRef<HTMLDivElement>(null);
   const [isAddFundsVisible, setIsAddFundsVisible] = useState(false);
@@ -47,25 +39,16 @@ export const AddFundsSection = () => {
 
   return (
     <>
-      <CustomizedCardSection gap={12} padding="24px">
+      <CardSection gap={12} padding="24px">
         <Button
           type="default"
           size="large"
+          block
           onClick={isAddFundsVisible ? closeAddFunds : addFunds}
         >
           {isAddFundsVisible ? 'Close instructions' : 'Add funds'}
         </Button>
-
-        <Popover
-          placement="topRight"
-          trigger={['hover', 'click']}
-          content={<Text>Ability to withdraw is coming soon</Text>}
-        >
-          <Button type="default" size="large" disabled>
-            Withdraw
-          </Button>
-        </Popover>
-      </CustomizedCardSection>
+      </CardSection>
 
       {isAddFundsVisible && <OpenAddFundsSection ref={fundSectionRef} />}
     </>

frontend/components/YourWalletPage/WithdrawFunds.tsx

@@ -0,0 +1,102 @@
+import { Button, Flex, Input, message, Modal, Typography } from 'antd';
+import { isAddress } from 'ethers/lib/utils';
+import React, { useCallback, useState } from 'react';
+
+import { delayInSeconds } from '@/utils/delay';
+
+import { CustomAlert } from '../Alert';
+
+const { Text } = Typography;
+
+export const WithdrawFunds = () => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [amount, setAmount] = useState('');
+  const [isWithdrawalLoading, setIsWithdrawalLoading] = useState(false);
+
+  const showModal = useCallback(() => {
+    setIsModalVisible(true);
+  }, []);
+
+  const handleCancel = useCallback(() => {
+    setIsModalVisible(false);
+    setAmount('');
+  }, []);
+
+  const handleProceed = useCallback(async () => {
+    if (!amount) return;
+
+    const isValidAddress = isAddress(amount);
+    if (!isValidAddress) {
+      message.error('Please enter a valid address');
+      return;
+    }
+
+    message.loading('Withdrawal pending. It may take a few minutes.');
+
+    setIsWithdrawalLoading(true);
+    await delayInSeconds(2); // TODO: integrate with the backend
+    setIsWithdrawalLoading(false);
+
+    message.success('Transaction complete.');
+  }, [amount]);
+
+  return (
+    <>
+      <Button onClick={showModal} block style={{ fontSize: 14 }}>
+        Withdraw all funds
+      </Button>
+
+      <Modal
+        title="Withdraw Funds"
+        open={isModalVisible}
+        footer={null}
+        onCancel={handleCancel}
+        width={400}
+        destroyOnClose
+      >
+        <Flex vertical gap={16} style={{ marginTop: 12 }}>
+          <Text>
+            To proceed, enter the EVM-compatible wallet address where you’d like
+            to receive your funds. Funds will be sent on Gnosis Chain.
+          </Text>
+
+          <CustomAlert
+            type="warning"
+            showIcon
+            message={
+              <Text className="text-sm">
+                Ensure you have access to this wallet to avoid losing assets.
+              </Text>
+            }
+          />
+
+          <Input
+            value={amount}
+            onChange={(e) => setAmount(e.target.value)}
+            placeholder="0x..."
+            size="small"
+            className="text-base"
+            style={{ padding: '6px 12px' }}
+          />
+
+          <Button
+            disabled={!amount}
+            loading={isWithdrawalLoading}
+            onClick={handleProceed}
+            block
+            type="primary"
+            className="text-base"
+          >
+            Proceed
+          </Button>
+
+          <Text className="text-sm text-light">
+            After withdrawal, you won’t be able to run your agent until you fund
+            it with the required amounts again. Some funds may be locked in
+            prediction markets and cannot be withdrawn at this time.
+          </Text>
+        </Flex>
+      </Modal>
+    </>
+  );
+};

frontend/components/YourWalletPage/YourAgent.tsx

@@ -24,6 +24,7 @@ import {
   SignerTitle,
   XdaiTitle,
 } from './Titles';
+import { WithdrawFunds } from './WithdrawFunds';
 
 const { Text, Paragraph } = Typography;
 
@@ -147,7 +148,7 @@ const ServiceAndNftDetails = () => {
   );
 };
 
-export const YourAgentWallet = () => {
+const YourAgentWalletBreakdown = () => {
   const { isBalanceLoaded, agentSafeBalance, agentEoaBalance } = useBalance();
   const {
     availableRewardsForEpochEth,
@@ -232,3 +233,10 @@ export const YourAgentWallet = () => {
     </Card>
   );
 };
+
+export const YourAgentWallet = () => (
+  <>
+    <YourAgentWalletBreakdown />
+    <WithdrawFunds />
+  </>
+);