-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Loading status checks…
Merge pull request #392 from WatchItDev/app/refactor/finance
fix: some feedback
Showing
16 changed files
with
424 additions
and
399 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import { useEffect, useState } from 'react'; | ||
import { Address } from 'viem'; | ||
import { connectToMetaMask } from '@src/utils/metamask'; | ||
import { notifyError } from '@notifications/internal-notifications.ts'; | ||
import { ERRORS } from '@notifications/errors.ts'; | ||
|
||
export const useMetaMask = () => { | ||
const [address, setAddress] = useState<Address | undefined>(); | ||
const [connecting, setConnecting] = useState(false); | ||
|
||
useEffect(() => { | ||
const walletConnected = localStorage.getItem('walletConnected'); | ||
if (walletConnected === 'true') { | ||
connect(); | ||
} | ||
}, []); | ||
|
||
const connect = async () => { | ||
setConnecting(true); | ||
try { | ||
const walletAddress = await connectToMetaMask(); | ||
setAddress(walletAddress); | ||
localStorage.setItem('walletConnected', 'true'); | ||
} catch (err) { | ||
notifyError(ERRORS.METAMASK_CONNECTING_ERROR); | ||
} finally { | ||
setConnecting(false); | ||
} | ||
}; | ||
|
||
return { address, connecting, connect }; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
83 changes: 13 additions & 70 deletions
83
src/sections/finance/components/finance-deposit-from-metamask.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,86 +1,29 @@ | ||
// React and libraries imports | ||
import { FC, useEffect, useState } from 'react'; | ||
import { useSelector } from 'react-redux'; | ||
import { Address } from 'viem'; | ||
// REACT IMPORTS | ||
import { FC } from 'react'; | ||
|
||
// @MUI Imports | ||
import Button from '@mui/material/Button'; | ||
// REDUX IMPORTS | ||
import { useSelector } from 'react-redux'; | ||
|
||
// Project Imports | ||
import Iconify from '@src/components/iconify'; | ||
import { connectToMetaMask } from '@src/utils/metamask'; | ||
// LOCAL IMPORTS | ||
import { useMetaMask } from '@src/hooks/use-metamask'; | ||
import { useDepositMetamask } from '@src/hooks/use-deposit-metamask'; | ||
import { LoadingScreen } from '@src/components/loading-screen'; | ||
import FinanceDeposit from './finance-deposit'; | ||
import { ERRORS } from '@notifications/errors.ts'; | ||
import { notifyError } from '@notifications/internal-notifications.ts'; | ||
import { Box } from '@mui/system'; | ||
import FinanceDeposit from '@src/sections/finance/components/finance-deposit'; | ||
import FinanceMetamaskLoader from '@src/sections/finance/components/finance-metamask-loader.tsx'; | ||
import FinanceMetamaskButton from '@src/sections/finance/components/finance-metamask-button.tsx'; | ||
|
||
interface FinanceDepositFromMetamaskProps { | ||
onClose: () => void; | ||
} | ||
|
||
const FinanceDepositFromMetamask: FC<FinanceDepositFromMetamaskProps> = ({ onClose }) => { | ||
const sessionData = useSelector((state: any) => state.auth.session); | ||
|
||
const [address, setAddress] = useState<Address | undefined>(); | ||
const [connecting, setConnecting] = useState(false); | ||
|
||
// Specific hook for Metamask | ||
const depositHook = useDepositMetamask(); | ||
const { address, connecting, connect } = useMetaMask(); | ||
|
||
// Try reconnecting if the user connected MetaMask before | ||
useEffect(() => { | ||
const walletConnected = localStorage.getItem('walletConnected'); | ||
if (walletConnected === 'true') { | ||
handleConnectMetaMask(); | ||
} | ||
}, []); | ||
|
||
const handleConnectMetaMask = async () => { | ||
setConnecting(true); | ||
try { | ||
const walletAddress = await connectToMetaMask(); | ||
setAddress(walletAddress); | ||
localStorage.setItem('walletConnected', 'true'); | ||
} catch (err) { | ||
notifyError(ERRORS.METAMASK_CONNECTING_ERROR); | ||
} finally { | ||
setConnecting(false); | ||
} | ||
}; | ||
|
||
if (connecting) { | ||
return ( | ||
<Box sx={{ m: 2 }}> | ||
<LoadingScreen /> | ||
</Box> | ||
); | ||
} | ||
|
||
// If the wallet is NOT connected, show a button | ||
if (!address) { | ||
return ( | ||
<Button | ||
sx={{ m: 4, p: 1.5 }} | ||
startIcon={<Iconify icon="logos:metamask-icon" />} | ||
variant="outlined" | ||
onClick={handleConnectMetaMask} | ||
> | ||
Connect MetaMask | ||
</Button> | ||
); | ||
} | ||
if (connecting) return <FinanceMetamaskLoader />; | ||
if (!address) return <FinanceMetamaskButton connect={connect} />; | ||
|
||
// If the wallet IS connected, render the deposit component | ||
return ( | ||
<FinanceDeposit | ||
address={address} | ||
recipient={sessionData?.address} | ||
depositHook={depositHook} | ||
onClose={onClose} | ||
/> | ||
); | ||
return <FinanceDeposit address={address} recipient={sessionData?.address} depositHook={depositHook} onClose={onClose} />; | ||
}; | ||
|
||
export default FinanceDepositFromMetamask; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
95 changes: 32 additions & 63 deletions
95
src/sections/finance/components/finance-deposit-modal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,80 +1,49 @@ | ||
// REACT IMPORTS | ||
import { FC, useState } from 'react'; | ||
|
||
// MUI IMPORTS | ||
import Tab from '@mui/material/Tab'; | ||
import DialogTitle from '@mui/material/DialogTitle'; | ||
import Tabs, { tabsClasses } from '@mui/material/Tabs'; | ||
import Dialog, { DialogProps } from '@mui/material/Dialog'; | ||
import { FC } from 'react'; | ||
|
||
// LOCAL IMPORTS | ||
import Iconify from '@src/components/iconify'; | ||
import FinanceDepositFromStripe from '@src/sections/finance/components/finance-deposit-from-stripe.tsx'; | ||
import FinanceDepositFromMetamask from '@src/sections/finance/components/finance-deposit-from-metamask.tsx'; | ||
import FinanceDepositFromSmartAccount from '@src/sections/finance/components/finance-deposit-from-smart-account.tsx'; | ||
|
||
// ---------------------------------------------------------------------- | ||
import FinanceModal from '@src/sections/finance/components/finance-modal'; | ||
import FinanceDepositFromStripe from '@src/sections/finance/components/finance-deposit-from-stripe'; | ||
import FinanceDepositFromMetamask from '@src/sections/finance/components/finance-deposit-from-metamask'; | ||
import FinanceDepositFromSmartAccount from '@src/sections/finance/components/finance-deposit-from-smart-account'; | ||
|
||
interface FinanceDepositModalProps extends DialogProps { | ||
interface FinanceDepositModalProps { | ||
open: boolean; | ||
onClose: VoidFunction; | ||
} | ||
|
||
// ---------------------------------------------------------------------- | ||
|
||
const TABS = [ | ||
const depositTabs = [ | ||
{ value: 'fiat', label: 'Stripe', disabled: false, icon: <Iconify icon={'logos:stripe'} /> }, | ||
{ | ||
value: 'metamask', | ||
label: 'Metamask', | ||
disabled: false, | ||
icon: <Iconify icon={'logos:metamask-icon'} />, | ||
}, | ||
{ | ||
value: 'smartAccount', | ||
label: 'Smart Account', | ||
disabled: false, | ||
icon: <Iconify icon={'logos:ethereum-color'} />, | ||
}, | ||
{ value: 'metamask', label: 'Metamask', disabled: false, icon: <Iconify icon={'logos:metamask-icon'} /> }, | ||
{ value: 'smartAccount', label: 'Smart Account', disabled: false, icon: <Iconify icon={'logos:ethereum-color'} /> }, | ||
]; | ||
|
||
// ---------------------------------------------------------------------- | ||
|
||
export const FinanceDepositModal: FC<FinanceDepositModalProps> = ({ open, onClose }) => { | ||
const [currentTab, setCurrentTab] = useState('metamask'); | ||
|
||
const handleChangeTab = (_event: any, newValue: any) => { | ||
setCurrentTab(newValue); | ||
const renderContent = (currentTab: string) => { | ||
switch (currentTab) { | ||
case 'fiat': | ||
return <FinanceDepositFromStripe />; | ||
case 'metamask': | ||
return <FinanceDepositFromMetamask onClose={onClose} />; | ||
case 'smartAccount': | ||
return <FinanceDepositFromSmartAccount onClose={onClose} />; | ||
default: | ||
return null; | ||
} | ||
}; | ||
|
||
return ( | ||
<Dialog open={open} fullWidth maxWidth="xs" onClose={onClose}> | ||
<DialogTitle>Deposit</DialogTitle> | ||
|
||
<Tabs | ||
key={`tabs-deposit`} | ||
value={currentTab} | ||
onChange={handleChangeTab} | ||
sx={{ | ||
width: 1, | ||
zIndex: 9, | ||
borderBottom: '1px solid rgba(255, 255, 255, 0.08)', | ||
[`& .${tabsClasses.flexContainer}`]: { justifyContent: { xs: 'left', md: 'center' } }, | ||
}} | ||
> | ||
{TABS.map((tab) => ( | ||
<Tab | ||
icon={tab.icon} | ||
disabled={tab.disabled} | ||
key={tab.value} | ||
value={tab.value} | ||
label={tab.label} | ||
/> | ||
))} | ||
</Tabs> | ||
|
||
{currentTab === 'fiat' && <FinanceDepositFromStripe />} | ||
{currentTab === 'metamask' && <FinanceDepositFromMetamask onClose={onClose} />} | ||
{currentTab === 'smartAccount' && <FinanceDepositFromSmartAccount onClose={onClose} />} | ||
</Dialog> | ||
<FinanceModal | ||
open={open} | ||
onClose={onClose} | ||
title="Deposit" | ||
tabs={depositTabs} | ||
renderContent={renderContent} | ||
maxWidth="xs" | ||
fullWidth | ||
/> | ||
); | ||
}; | ||
|
||
export default FinanceDepositModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
src/sections/finance/components/finance-metamask-button.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
// REACT IMPORTS | ||
import { FC } from 'react'; | ||
|
||
// MUI IMPORTS | ||
import Button from '@mui/material/Button'; | ||
|
||
// LOCAL IMPORTS | ||
import Iconify from '@src/components/iconify'; | ||
|
||
const FinanceMetamaskButton: FC<{ connect: () => void }> = ({ connect }) => { | ||
return <Button | ||
sx={{ m: 4, p: 1.5 }} | ||
startIcon={<Iconify icon="logos:metamask-icon" />} | ||
variant="outlined" | ||
onClick={connect} | ||
> | ||
Connect MetaMask | ||
</Button>; | ||
}; | ||
|
||
export default FinanceMetamaskButton; |
16 changes: 16 additions & 0 deletions
16
src/sections/finance/components/finance-metamask-loader.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
// REACT IMPORTS | ||
import { FC } from 'react'; | ||
|
||
// MUI IMPORTS | ||
import { Box } from '@mui/system'; | ||
|
||
// LOCAL IMPORTS | ||
import { LoadingScreen } from '@src/components/loading-screen'; | ||
|
||
const FinanceMetamaskLoader: FC = () => { | ||
return <Box sx={{ mx: 4, my: 8 }}> | ||
<LoadingScreen /> | ||
</Box>; | ||
}; | ||
|
||
export default FinanceMetamaskLoader; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
import { FC, useState, ReactNode } from 'react'; | ||
|
||
// MUI IMPORTS | ||
import Tab from '@mui/material/Tab'; | ||
import DialogTitle from '@mui/material/DialogTitle'; | ||
import Tabs, { tabsClasses } from '@mui/material/Tabs'; | ||
import Dialog, { DialogProps } from '@mui/material/Dialog'; | ||
|
||
interface TabConfig { | ||
value: string; | ||
label: string; | ||
disabled?: boolean; | ||
icon: any; | ||
} | ||
|
||
interface FinanceModalProps extends DialogProps { | ||
onClose: VoidFunction; | ||
title: string; | ||
tabs: TabConfig[]; | ||
renderContent: (currentTab: string) => ReactNode; | ||
} | ||
|
||
const FinanceModal: FC<FinanceModalProps> = ({ open, onClose, title, tabs, renderContent, ...dialogProps }) => { | ||
const [currentTab, setCurrentTab] = useState('smartAccount'); | ||
|
||
const handleChangeTab = (_event: React.SyntheticEvent, newValue: string) => { | ||
setCurrentTab(newValue); | ||
}; | ||
|
||
return ( | ||
<Dialog open={open} fullWidth maxWidth="xs" onClose={onClose} {...dialogProps}> | ||
<DialogTitle sx={{ pb: 1 }}>{title}</DialogTitle> | ||
|
||
<Tabs | ||
key={`tabs-${title.toLowerCase()}`} | ||
value={currentTab} | ||
variant="scrollable" | ||
scrollButtons="auto" | ||
onChange={handleChangeTab} | ||
allowScrollButtonsMobile | ||
sx={{ | ||
width: 1, | ||
zIndex: 9, | ||
borderBottom: '1px solid rgba(255, 255, 255, 0.08)', | ||
[`& .${tabsClasses.flexContainer}`]: { justifyContent: 'center', px: 1 }, | ||
[`& .${tabsClasses.scroller}`]: { display: 'flex', justifyContent: 'center' }, | ||
}} | ||
> | ||
{tabs.map((tab) => ( | ||
<Tab | ||
icon={tab.icon} | ||
disabled={tab.disabled} | ||
key={tab.value} | ||
value={tab.value} | ||
label={tab.label} | ||
/> | ||
))} | ||
</Tabs> | ||
|
||
{renderContent(currentTab)} | ||
</Dialog> | ||
); | ||
}; | ||
|
||
export default FinanceModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 12 additions & 68 deletions
80
src/sections/finance/components/finance-withdraw-from-metamask.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,83 +1,27 @@ | ||
// React and libraries imports | ||
import { FC, useEffect, useState } from 'react'; | ||
import { Address } from 'viem'; | ||
// REACT IMPORTS | ||
import { FC } from 'react'; | ||
|
||
// @MUI Imports | ||
import Button from '@mui/material/Button'; | ||
|
||
// Import Components | ||
import Iconify from '@src/components/iconify'; | ||
import FinanceWithdraw from './finance-withdraw.tsx'; | ||
// LOCAL IMPORTS | ||
import { useMetaMask } from '@src/hooks/use-metamask'; | ||
import { useWithdrawMetamask } from '@src/hooks/use-withdraw-metamask'; | ||
import { useGetVaultBalance } from '@src/hooks/use-get-vault-balance'; | ||
import { connectToMetaMask } from '@src/utils/metamask'; | ||
import { LoadingScreen } from '@src/components/loading-screen'; | ||
|
||
// Notifications | ||
import { notifyError } from '@src/utils/notifications/internal-notifications'; | ||
import { ERRORS } from '@src/utils/notifications/errors'; | ||
import { Box } from '@mui/system'; | ||
import FinanceWithdraw from '@src/sections/finance/components/finance-withdraw'; | ||
import FinanceMetamaskLoader from '@src/sections/finance/components/finance-metamask-loader.tsx'; | ||
import FinanceMetamaskButton from '@src/sections/finance/components/finance-metamask-button.tsx'; | ||
|
||
interface FinanceWithdrawFromMetamaskProps { | ||
onClose: () => void; | ||
} | ||
|
||
const FinanceWithdrawFromMetamask: FC<FinanceWithdrawFromMetamaskProps> = ({ onClose }) => { | ||
const [address, setAddress] = useState<Address | undefined>(); | ||
const [connecting, setConnecting] = useState(false); | ||
const { balance } = useGetVaultBalance(address); | ||
const withdrawHook = useWithdrawMetamask(); | ||
const { address, connecting, connect } = useMetaMask(); | ||
const { balance } = useGetVaultBalance(address); | ||
|
||
// Auto-reconnect if MetaMask was previously connected | ||
useEffect(() => { | ||
const walletConnected = localStorage.getItem('walletConnected'); | ||
if (walletConnected === 'true') { | ||
handleConnectMetaMask(); | ||
} | ||
}, []); | ||
|
||
const handleConnectMetaMask = async () => { | ||
setConnecting(true); | ||
try { | ||
const walletAddress = await connectToMetaMask(); | ||
setAddress(walletAddress); | ||
localStorage.setItem('walletConnected', 'true'); | ||
} catch (err) { | ||
notifyError(ERRORS.METAMASK_CONNECTING_ERROR); | ||
} finally { | ||
setConnecting(false); | ||
} | ||
}; | ||
|
||
if (connecting) { | ||
return ( | ||
<Box sx={{ m: 2 }}> | ||
<LoadingScreen /> | ||
</Box> | ||
); | ||
} | ||
|
||
if (!address) { | ||
return ( | ||
<Button | ||
sx={{ m: 4, p: 1.5 }} | ||
startIcon={<Iconify icon="logos:metamask-icon" />} | ||
variant="outlined" | ||
onClick={handleConnectMetaMask} | ||
> | ||
Connect MetaMask | ||
</Button> | ||
); | ||
} | ||
if (connecting) return <FinanceMetamaskLoader />; | ||
if (!address) return <FinanceMetamaskButton connect={connect} />; | ||
|
||
return ( | ||
<FinanceWithdraw | ||
address={address} | ||
withdrawHook={withdrawHook} | ||
balance={balance} | ||
onClose={onClose} | ||
/> | ||
); | ||
return <FinanceWithdraw address={address} withdrawHook={withdrawHook} balance={balance} onClose={onClose} />; | ||
}; | ||
|
||
export default FinanceWithdrawFromMetamask; |
94 changes: 31 additions & 63 deletions
94
src/sections/finance/components/finance-withdraw-modal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,78 +1,46 @@ | ||
// REACT IMPORTS | ||
import { FC, useState } from 'react'; | ||
// src/sections/finance/components/FinanceWithdrawModal.tsx | ||
|
||
// MUI IMPORTS | ||
|
||
import DialogTitle from '@mui/material/DialogTitle'; | ||
|
||
import Dialog, { DialogProps } from '@mui/material/Dialog'; | ||
import { FC } from 'react'; | ||
|
||
// LOCAL IMPORTS | ||
|
||
import FinanceWithdrawFromSmartAccount from '@src/sections/finance/components/finance-withdraw-from-smart-account'; | ||
import Iconify from '@src/components/iconify'; | ||
import Tabs, { tabsClasses } from '@mui/material/Tabs'; | ||
import Tab from '@mui/material/Tab'; | ||
import FinanceWithdrawFromMetamask from '@src/sections/finance/components/finance-withdraw-from-metamask.tsx'; | ||
|
||
const TABS = [ | ||
{ | ||
value: 'metamask', | ||
label: 'Metamask', | ||
disabled: false, | ||
icon: <Iconify icon={'logos:metamask-icon'} />, | ||
}, | ||
{ | ||
value: 'smartAccount', | ||
label: 'Smart Account', | ||
disabled: false, | ||
icon: <Iconify icon={'logos:ethereum-color'} />, | ||
}, | ||
]; | ||
|
||
// ---------------------------------------------------------------------- | ||
import FinanceModal from '@src/sections/finance/components/finance-modal'; | ||
import FinanceWithdrawFromMetamask from '@src/sections/finance/components/finance-withdraw-from-metamask'; | ||
import FinanceWithdrawFromSmartAccount from '@src/sections/finance/components/finance-withdraw-from-smart-account'; | ||
|
||
interface FinanceWithdrawModalProps extends DialogProps { | ||
interface FinanceWithdrawModalProps { | ||
open: boolean; | ||
onClose: VoidFunction; | ||
} | ||
|
||
// ---------------------------------------------------------------------- | ||
const withdrawTabs = [ | ||
{ value: 'metamask', label: 'Metamask', disabled: false, icon: <Iconify icon={'logos:metamask-icon'} /> }, | ||
{ value: 'smartAccount', label: 'Smart Account', disabled: false, icon: <Iconify icon={'logos:ethereum-color'} /> }, | ||
]; | ||
|
||
export const FinanceWithdrawModal: FC<FinanceWithdrawModalProps> = ({ open, onClose }) => { | ||
const [currentTab, setCurrentTab] = useState('metamask'); | ||
|
||
const handleChangeTab = (_event: any, newValue: any) => { | ||
setCurrentTab(newValue); | ||
const renderContent = (currentTab: string) => { | ||
switch (currentTab) { | ||
case 'metamask': | ||
return <FinanceWithdrawFromMetamask onClose={onClose} />; | ||
case 'smartAccount': | ||
return <FinanceWithdrawFromSmartAccount onClose={onClose} />; | ||
default: | ||
return null; | ||
} | ||
}; | ||
|
||
return ( | ||
<Dialog open={open} fullWidth maxWidth="xs" onClose={onClose}> | ||
<DialogTitle>Withdraw</DialogTitle> | ||
|
||
<Tabs | ||
key={`tabs-deposit`} | ||
value={currentTab} | ||
onChange={handleChangeTab} | ||
sx={{ | ||
width: 1, | ||
zIndex: 9, | ||
borderBottom: '1px solid rgba(255, 255, 255, 0.08)', | ||
[`& .${tabsClasses.flexContainer}`]: { justifyContent: { xs: 'left', md: 'center' } }, | ||
}} | ||
> | ||
{TABS.map((tab) => ( | ||
<Tab | ||
icon={tab.icon} | ||
disabled={tab.disabled} | ||
key={tab.value} | ||
value={tab.value} | ||
label={tab.label} | ||
/> | ||
))} | ||
</Tabs> | ||
|
||
{currentTab === 'metamask' && <FinanceWithdrawFromMetamask onClose={onClose} />} | ||
{currentTab === 'smartAccount' && <FinanceWithdrawFromSmartAccount onClose={onClose} />} | ||
</Dialog> | ||
<FinanceModal | ||
open={open} | ||
onClose={onClose} | ||
title="Withdraw" | ||
tabs={withdrawTabs} | ||
renderContent={renderContent} | ||
maxWidth="xs" | ||
fullWidth | ||
/> | ||
); | ||
}; | ||
|
||
export default FinanceWithdrawModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters