fix: some feedback

src/hooks/use-metamask.ts

@@ -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 };
+};

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

@@ -9,6 +9,7 @@ export const BoxRow: FC<PropsWithChildren> = ({ children }) => (
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'space-between',
+      my: 0.5
     }}
   >
     {children}

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

@@ -102,10 +102,11 @@ export default function FinanceContactsCarousel({
         title={title}
         subheader={subheader}
         action={<NavigationArrows next={carousel.onNext} prev={carousel.onPrev} />}
+        sx={{ px: 0 }}
       />
 
       {/* Main carousel container */}
-      <Box sx={{ p: 3 }}>
+      <Box sx={{ py: 3 }}>
         <Carousel ref={carousel.carouselRef} {...carousel.carouselSettings}>
           {slidesData.map((chunk, index) => (
             <SlideContacts

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

@@ -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;

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

@@ -1,7 +1,7 @@
-// @mui
+// MUI IMPORTS
 import Box from '@mui/material/Box';
 
-// Project components
+// LOCAL IMPORTS
 import TextMaxLine from '@src/components/text-max-line';
 import { ComingSoonIllustration } from '@src/assets/illustrations';
 
@@ -17,25 +17,26 @@ const FinanceDepositFromStripe = () => {
         p: 2,
       }}
     >
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          gap: 2,
-          textAlign: 'center',
-        }}
-      >
+      <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
         <ComingSoonIllustration sx={{ mt: 0, mb: 1, height: 120 }} />
-        <TextMaxLine variant={'h5'} line={1}>
-          This feature is coming soon.
-        </TextMaxLine>
-        <TextMaxLine color={'text.secondary'} variant={'body2'} line={2} sx={{ mb: 2 }}>
-          We’re working hard to bring this feature to life.
-          <br /> Check back soon!
-        </TextMaxLine>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: 1,
+            textAlign: 'center',
+          }}
+        >
+          <TextMaxLine variant={'h5'} line={1}>
+            This feature is coming soon.
+          </TextMaxLine>
+          <TextMaxLine color={'text.secondary'} variant={'body2'} line={2} sx={{ mb: 2 }}>
+            We’re working hard to bring this feature to life.
+            <br /> Check back soon!
+          </TextMaxLine>
+        </Box>
       </Box>
-      <Box></Box>
     </Box>
   );
 };

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

@@ -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;