Skip to content

Commit 8856cf1

Browse files
geolffreymgeolffreym
authored
Merge pull request #392 from WatchItDev/app/refactor/finance
fix: some feedback
2 parents db84332 + 2886c38 commit 8856cf1

16 files changed

+424
-399
lines changed

‎src/hooks/use-metamask.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { useEffect, useState } from 'react';
2+
import { Address } from 'viem';
3+
import { connectToMetaMask } from '@src/utils/metamask';
4+
import { notifyError } from '@notifications/internal-notifications.ts';
5+
import { ERRORS } from '@notifications/errors.ts';
6+
7+
export const useMetaMask = () => {
8+
const [address, setAddress] = useState<Address | undefined>();
9+
const [connecting, setConnecting] = useState(false);
10+
11+
useEffect(() => {
12+
const walletConnected = localStorage.getItem('walletConnected');
13+
if (walletConnected === 'true') {
14+
connect();
15+
}
16+
}, []);
17+
18+
const connect = async () => {
19+
setConnecting(true);
20+
try {
21+
const walletAddress = await connectToMetaMask();
22+
setAddress(walletAddress);
23+
localStorage.setItem('walletConnected', 'true');
24+
} catch (err) {
25+
notifyError(ERRORS.METAMASK_CONNECTING_ERROR);
26+
} finally {
27+
setConnecting(false);
28+
}
29+
};
30+
31+
return { address, connecting, connect };
32+
};

‎src/sections/finance/components/box-row.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export const BoxRow: FC<PropsWithChildren> = ({ children }) => (
99
display: 'flex',
1010
alignItems: 'center',
1111
justifyContent: 'space-between',
12+
my: 0.5
1213
}}
1314
>
1415
{children}

‎src/sections/finance/components/finance-contacts.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,10 +102,11 @@ export default function FinanceContactsCarousel({
102102
title={title}
103103
subheader={subheader}
104104
action={<NavigationArrows next={carousel.onNext} prev={carousel.onPrev} />}
105+
sx={{ px: 0 }}
105106
/>
106107

107108
{/* Main carousel container */}
108-
<Box sx={{ p: 3 }}>
109+
<Box sx={{ py: 3 }}>
109110
<Carousel ref={carousel.carouselRef} {...carousel.carouselSettings}>
110111
{slidesData.map((chunk, index) => (
111112
<SlideContacts

‎src/sections/finance/components/finance-deposit-from-metamask.tsx

Lines changed: 13 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,29 @@
1-
// React and libraries imports
2-
import { FC, useEffect, useState } from 'react';
3-
import { useSelector } from 'react-redux';
4-
import { Address } from 'viem';
1+
// REACT IMPORTS
2+
import { FC } from 'react';
53

6-
// @MUI Imports
7-
import Button from '@mui/material/Button';
4+
// REDUX IMPORTS
5+
import { useSelector } from 'react-redux';
86

9-
// Project Imports
10-
import Iconify from '@src/components/iconify';
11-
import { connectToMetaMask } from '@src/utils/metamask';
7+
// LOCAL IMPORTS
8+
import { useMetaMask } from '@src/hooks/use-metamask';
129
import { useDepositMetamask } from '@src/hooks/use-deposit-metamask';
13-
import { LoadingScreen } from '@src/components/loading-screen';
14-
import FinanceDeposit from './finance-deposit';
15-
import { ERRORS } from '@notifications/errors.ts';
16-
import { notifyError } from '@notifications/internal-notifications.ts';
17-
import { Box } from '@mui/system';
10+
import FinanceDeposit from '@src/sections/finance/components/finance-deposit';
11+
import FinanceMetamaskLoader from '@src/sections/finance/components/finance-metamask-loader.tsx';
12+
import FinanceMetamaskButton from '@src/sections/finance/components/finance-metamask-button.tsx';
1813

1914
interface FinanceDepositFromMetamaskProps {
2015
onClose: () => void;
2116
}
2217

2318
const FinanceDepositFromMetamask: FC<FinanceDepositFromMetamaskProps> = ({ onClose }) => {
2419
const sessionData = useSelector((state: any) => state.auth.session);
25-
26-
const [address, setAddress] = useState<Address | undefined>();
27-
const [connecting, setConnecting] = useState(false);
28-
29-
// Specific hook for Metamask
3020
const depositHook = useDepositMetamask();
21+
const { address, connecting, connect } = useMetaMask();
3122

32-
// Try reconnecting if the user connected MetaMask before
33-
useEffect(() => {
34-
const walletConnected = localStorage.getItem('walletConnected');
35-
if (walletConnected === 'true') {
36-
handleConnectMetaMask();
37-
}
38-
}, []);
39-
40-
const handleConnectMetaMask = async () => {
41-
setConnecting(true);
42-
try {
43-
const walletAddress = await connectToMetaMask();
44-
setAddress(walletAddress);
45-
localStorage.setItem('walletConnected', 'true');
46-
} catch (err) {
47-
notifyError(ERRORS.METAMASK_CONNECTING_ERROR);
48-
} finally {
49-
setConnecting(false);
50-
}
51-
};
52-
53-
if (connecting) {
54-
return (
55-
<Box sx={{ m: 2 }}>
56-
<LoadingScreen />
57-
</Box>
58-
);
59-
}
60-
61-
// If the wallet is NOT connected, show a button
62-
if (!address) {
63-
return (
64-
<Button
65-
sx={{ m: 4, p: 1.5 }}
66-
startIcon={<Iconify icon="logos:metamask-icon" />}
67-
variant="outlined"
68-
onClick={handleConnectMetaMask}
69-
>
70-
Connect MetaMask
71-
</Button>
72-
);
73-
}
23+
if (connecting) return <FinanceMetamaskLoader />;
24+
if (!address) return <FinanceMetamaskButton connect={connect} />;
7425

75-
// If the wallet IS connected, render the deposit component
76-
return (
77-
<FinanceDeposit
78-
address={address}
79-
recipient={sessionData?.address}
80-
depositHook={depositHook}
81-
onClose={onClose}
82-
/>
83-
);
26+
return <FinanceDeposit address={address} recipient={sessionData?.address} depositHook={depositHook} onClose={onClose} />;
8427
};
8528

8629
export default FinanceDepositFromMetamask;

‎src/sections/finance/components/finance-deposit-from-stripe.tsx

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
// @mui
1+
// MUI IMPORTS
22
import Box from '@mui/material/Box';
33

4-
// Project components
4+
// LOCAL IMPORTS
55
import TextMaxLine from '@src/components/text-max-line';
66
import { ComingSoonIllustration } from '@src/assets/illustrations';
77

@@ -17,25 +17,26 @@ const FinanceDepositFromStripe = () => {
1717
p: 2,
1818
}}
1919
>
20-
<Box
21-
sx={{
22-
display: 'flex',
23-
flexDirection: 'column',
24-
alignItems: 'center',
25-
gap: 2,
26-
textAlign: 'center',
27-
}}
28-
>
20+
<Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
2921
<ComingSoonIllustration sx={{ mt: 0, mb: 1, height: 120 }} />
30-
<TextMaxLine variant={'h5'} line={1}>
31-
This feature is coming soon.
32-
</TextMaxLine>
33-
<TextMaxLine color={'text.secondary'} variant={'body2'} line={2} sx={{ mb: 2 }}>
34-
We’re working hard to bring this feature to life.
35-
<br /> Check back soon!
36-
</TextMaxLine>
22+
<Box
23+
sx={{
24+
display: 'flex',
25+
flexDirection: 'column',
26+
alignItems: 'center',
27+
gap: 1,
28+
textAlign: 'center',
29+
}}
30+
>
31+
<TextMaxLine variant={'h5'} line={1}>
32+
This feature is coming soon.
33+
</TextMaxLine>
34+
<TextMaxLine color={'text.secondary'} variant={'body2'} line={2} sx={{ mb: 2 }}>
35+
We’re working hard to bring this feature to life.
36+
<br /> Check back soon!
37+
</TextMaxLine>
38+
</Box>
3739
</Box>
38-
<Box></Box>
3940
</Box>
4041
);
4142
};

‎src/sections/finance/components/finance-deposit-modal.tsx

Lines changed: 32 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,49 @@
11
// REACT IMPORTS
2-
import { FC, useState } from 'react';
3-
4-
// MUI IMPORTS
5-
import Tab from '@mui/material/Tab';
6-
import DialogTitle from '@mui/material/DialogTitle';
7-
import Tabs, { tabsClasses } from '@mui/material/Tabs';
8-
import Dialog, { DialogProps } from '@mui/material/Dialog';
2+
import { FC } from 'react';
93

104
// LOCAL IMPORTS
115
import Iconify from '@src/components/iconify';
12-
import FinanceDepositFromStripe from '@src/sections/finance/components/finance-deposit-from-stripe.tsx';
13-
import FinanceDepositFromMetamask from '@src/sections/finance/components/finance-deposit-from-metamask.tsx';
14-
import FinanceDepositFromSmartAccount from '@src/sections/finance/components/finance-deposit-from-smart-account.tsx';
15-
16-
// ----------------------------------------------------------------------
6+
import FinanceModal from '@src/sections/finance/components/finance-modal';
7+
import FinanceDepositFromStripe from '@src/sections/finance/components/finance-deposit-from-stripe';
8+
import FinanceDepositFromMetamask from '@src/sections/finance/components/finance-deposit-from-metamask';
9+
import FinanceDepositFromSmartAccount from '@src/sections/finance/components/finance-deposit-from-smart-account';
1710

18-
interface FinanceDepositModalProps extends DialogProps {
11+
interface FinanceDepositModalProps {
12+
open: boolean;
1913
onClose: VoidFunction;
2014
}
2115

22-
// ----------------------------------------------------------------------
23-
24-
const TABS = [
16+
const depositTabs = [
2517
{ value: 'fiat', label: 'Stripe', disabled: false, icon: <Iconify icon={'logos:stripe'} /> },
26-
{
27-
value: 'metamask',
28-
label: 'Metamask',
29-
disabled: false,
30-
icon: <Iconify icon={'logos:metamask-icon'} />,
31-
},
32-
{
33-
value: 'smartAccount',
34-
label: 'Smart Account',
35-
disabled: false,
36-
icon: <Iconify icon={'logos:ethereum-color'} />,
37-
},
18+
{ value: 'metamask', label: 'Metamask', disabled: false, icon: <Iconify icon={'logos:metamask-icon'} /> },
19+
{ value: 'smartAccount', label: 'Smart Account', disabled: false, icon: <Iconify icon={'logos:ethereum-color'} /> },
3820
];
3921

40-
// ----------------------------------------------------------------------
41-
4222
export const FinanceDepositModal: FC<FinanceDepositModalProps> = ({ open, onClose }) => {
43-
const [currentTab, setCurrentTab] = useState('metamask');
44-
45-
const handleChangeTab = (_event: any, newValue: any) => {
46-
setCurrentTab(newValue);
23+
const renderContent = (currentTab: string) => {
24+
switch (currentTab) {
25+
case 'fiat':
26+
return <FinanceDepositFromStripe />;
27+
case 'metamask':
28+
return <FinanceDepositFromMetamask onClose={onClose} />;
29+
case 'smartAccount':
30+
return <FinanceDepositFromSmartAccount onClose={onClose} />;
31+
default:
32+
return null;
33+
}
4734
};
4835

4936
return (
50-
<Dialog open={open} fullWidth maxWidth="xs" onClose={onClose}>
51-
<DialogTitle>Deposit</DialogTitle>
52-
53-
<Tabs
54-
key={`tabs-deposit`}
55-
value={currentTab}
56-
onChange={handleChangeTab}
57-
sx={{
58-
width: 1,
59-
zIndex: 9,
60-
borderBottom: '1px solid rgba(255, 255, 255, 0.08)',
61-
[`& .${tabsClasses.flexContainer}`]: { justifyContent: { xs: 'left', md: 'center' } },
62-
}}
63-
>
64-
{TABS.map((tab) => (
65-
<Tab
66-
icon={tab.icon}
67-
disabled={tab.disabled}
68-
key={tab.value}
69-
value={tab.value}
70-
label={tab.label}
71-
/>
72-
))}
73-
</Tabs>
74-
75-
{currentTab === 'fiat' && <FinanceDepositFromStripe />}
76-
{currentTab === 'metamask' && <FinanceDepositFromMetamask onClose={onClose} />}
77-
{currentTab === 'smartAccount' && <FinanceDepositFromSmartAccount onClose={onClose} />}
78-
</Dialog>
37+
<FinanceModal
38+
open={open}
39+
onClose={onClose}
40+
title="Deposit"
41+
tabs={depositTabs}
42+
renderContent={renderContent}
43+
maxWidth="xs"
44+
fullWidth
45+
/>
7946
);
8047
};
48+
49+
export default FinanceDepositModal;

0 commit comments

Comments
 (0)