From e9f5fd686d7dc43692526d8de929694cc4689258 Mon Sep 17 00:00:00 2001 From: mohandast52 Date: Fri, 8 Nov 2024 14:12:55 +0530 Subject: [PATCH 1/4] refactor: simplify AddFundsSection by removing styled component and unused Popover --- .../MainPage/sections/AddFundsSection.tsx | 23 +++---------------- 1 file changed, 3 insertions(+), 20 deletions(-) diff --git a/frontend/components/MainPage/sections/AddFundsSection.tsx b/frontend/components/MainPage/sections/AddFundsSection.tsx index ae524fab..e2a06fd4 100644 --- a/frontend/components/MainPage/sections/AddFundsSection.tsx +++ b/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(null); const [isAddFundsVisible, setIsAddFundsVisible] = useState(false); @@ -47,25 +39,16 @@ export const AddFundsSection = () => { return ( <> - + - - Ability to withdraw is coming soon} - > - - - + {isAddFundsVisible && } From fe9ef5b125f46ed151dbdad004a0a0381096bc78 Mon Sep 17 00:00:00 2001 From: mohandast52 Date: Fri, 8 Nov 2024 14:33:47 +0530 Subject: [PATCH 2/4] feat: add WithdrawFunds component and integrate it into YourAgentWallet --- .../YourWalletPage/WithdrawFunds.tsx | 72 +++++++++++++++++++ .../components/YourWalletPage/YourAgent.tsx | 10 ++- 2 files changed, 81 insertions(+), 1 deletion(-) create mode 100644 frontend/components/YourWalletPage/WithdrawFunds.tsx diff --git a/frontend/components/YourWalletPage/WithdrawFunds.tsx b/frontend/components/YourWalletPage/WithdrawFunds.tsx new file mode 100644 index 00000000..9c1dab09 --- /dev/null +++ b/frontend/components/YourWalletPage/WithdrawFunds.tsx @@ -0,0 +1,72 @@ +import { Button, Flex, Input, Modal, Typography } from 'antd'; +import React, { useState } from 'react'; + +import { CustomAlert } from '../Alert'; + +const { Text } = Typography; + +export const WithdrawFunds = () => { + const [isModalVisible, setIsModalVisible] = useState(false); + const [amount, setAmount] = useState(''); + + const showModal = () => { + setIsModalVisible(true); + }; + + const handleCancel = () => { + setIsModalVisible(false); + }; + + return ( + <> + + + + + + To proceed, enter the EVM-compatible wallet address where you’d like + to receive your funds. Funds will be sent on Gnosis Chain. + + + + Ensure you have access to this wallet to avoid losing assets. + + } + /> + + setAmount(e.target.value)} + placeholder="0x..." + /> + + + + + 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. + + + + + ); +}; diff --git a/frontend/components/YourWalletPage/YourAgent.tsx b/frontend/components/YourWalletPage/YourAgent.tsx index 228b862c..9f01c387 100644 --- a/frontend/components/YourWalletPage/YourAgent.tsx +++ b/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 = () => { ); }; + +export const YourAgentWallet = () => ( + <> + + + +); From e8919c941b747682bdcfa45a7463cc2a2eecf086 Mon Sep 17 00:00:00 2001 From: mohandast52 Date: Fri, 8 Nov 2024 14:42:01 +0530 Subject: [PATCH 3/4] feat: enhance WithdrawFunds component with address validation and loading state --- .../YourWalletPage/WithdrawFunds.tsx | 34 +++++++++++++++---- 1 file changed, 27 insertions(+), 7 deletions(-) diff --git a/frontend/components/YourWalletPage/WithdrawFunds.tsx b/frontend/components/YourWalletPage/WithdrawFunds.tsx index 9c1dab09..fc598935 100644 --- a/frontend/components/YourWalletPage/WithdrawFunds.tsx +++ b/frontend/components/YourWalletPage/WithdrawFunds.tsx @@ -1,5 +1,8 @@ -import { Button, Flex, Input, Modal, Typography } from 'antd'; -import React, { useState } from 'react'; +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'; @@ -8,14 +11,29 @@ const { Text } = Typography; export const WithdrawFunds = () => { const [isModalVisible, setIsModalVisible] = useState(false); const [amount, setAmount] = useState(''); + const [isWithdrawalLoading, setIsWithdrawalLoading] = useState(false); - const showModal = () => { + const showModal = useCallback(() => { setIsModalVisible(true); - }; + }, []); - const handleCancel = () => { + const handleCancel = useCallback(() => { setIsModalVisible(false); - }; + }, []); + + const handleProceed = useCallback(async () => { + if (!amount) return; + + const isValidAddress = isAddress(amount); + if (!isValidAddress) { + message.error('Please enter a valid address'); + return; + } + + setIsWithdrawalLoading(true); + await delayInSeconds(2); // TODO: integrate with the backend + setIsWithdrawalLoading(false); + }, [amount]); return ( <> @@ -52,7 +70,9 @@ export const WithdrawFunds = () => { />