-
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 branch information
Showing
3 changed files
with
130 additions
and
136 deletions.
There are no files selected for viewing
101 changes: 33 additions & 68 deletions
101
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,84 +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('smartAccount'); | ||
|
|
||
| const handleChangeTab = (_event: any, newValue: any) => { | ||
| setCurrentTab(newValue); | ||
| const FinanceDepositModal: FC<FinanceDepositModalProps> = ({ open, onClose }) => { | ||
| 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 sx={{ pb: 1 }}>Deposit</DialogTitle> | ||
|
|
||
| <Tabs | ||
| key={`tabs-deposit`} | ||
| value={currentTab} | ||
| variant="scrollable" | ||
| scrollButtons="auto" | ||
| onChange={handleChangeTab} | ||
| allowScrollButtonsMobile={true} | ||
| 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> | ||
|
|
||
| {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
| 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; |
100 changes: 32 additions & 68 deletions
100
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,82 +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; | ||
| } | ||
|
|
||
| // ---------------------------------------------------------------------- | ||
|
|
||
| export const FinanceWithdrawModal: FC<FinanceWithdrawModalProps> = ({ open, onClose }) => { | ||
| const [currentTab, setCurrentTab] = useState('smartAccount'); | ||
| 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'} /> }, | ||
| ]; | ||
|
|
||
| const handleChangeTab = (_event: any, newValue: any) => { | ||
| setCurrentTab(newValue); | ||
| const FinanceWithdrawModal: FC<FinanceWithdrawModalProps> = ({ open, onClose }) => { | ||
| 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 sx={{ pb: 1 }}>Withdraw</DialogTitle> | ||
|
|
||
| <Tabs | ||
| key={`tabs-deposit`} | ||
| value={currentTab} | ||
| onChange={handleChangeTab} | ||
| variant="scrollable" | ||
| scrollButtons="auto" | ||
| allowScrollButtonsMobile={true} | ||
| 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> | ||
|
|
||
| {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; |