-
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.
Merge pull request #392 from WatchItDev/app/refactor/finance
fix: some feedback
- Loading branch information
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; |
Oops, something went wrong.