feat(finance): add helper component for MetaMask guidance

- Introduced `FinanceMetamaskHelper` to guide users without MetaMask.
- Updated `finance-withdraw-from-metamask.tsx` to render helper alongside the button.
- Updated `finance-deposit-from-metamask.tsx` similarly to include the helper.
- Adjusted margin styling in `FinanceMetamaskButton` for consistency.

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

@@ -10,6 +10,7 @@ import { useDepositMetamask } from '@src/hooks/use-deposit-metamask';
 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';
+import FinanceMetamaskHelper from "@src/sections/finance/components/finance-metamask-helper.tsx";
 
 interface FinanceDepositFromMetamaskProps {
   onClose: () => void;
@@ -21,7 +22,7 @@ const FinanceDepositFromMetamask: FC<FinanceDepositFromMetamaskProps> = ({ onClo
   const { account: address, loading, connect } = useMetaMask();
 
   if (loading) return <FinanceMetamaskLoader />;
-  if (!address) return <FinanceMetamaskButton connect={connect} />;
+  if (!address) return <><FinanceMetamaskButton connect={connect} /><FinanceMetamaskHelper /></>;
 
   return <FinanceDeposit address={address} recipient={sessionData?.address} depositHook={depositHook} onClose={onClose} />;
 };

src/sections/finance/components/finance-metamask-button.tsx

@@ -9,7 +9,7 @@ import Iconify from '@src/components/iconify';
 
 const FinanceMetamaskButton: FC<{ connect: () => void }> = ({ connect }) => {
   return <Button
-    sx={{ m: 4, p: 1.5 }}
+    sx={{ m: 2, p: 1.5 }}
     startIcon={<Iconify icon="logos:metamask-icon" />}
     variant="outlined"
     onClick={connect}

src/sections/finance/components/finance-metamask-helper.tsx

@@ -0,0 +1,39 @@
+import Stack from "@mui/material/Stack";
+import {Box} from "@mui/system";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+
+const FinanceMetamaskHelper = () => {
+
+  const handleDownloadMetaMask = () => {
+    window.location.href = 'https://metamask.app.link';
+  }
+
+  return (
+    <Stack sx={{
+      borderRadius: 1,
+      border: '1px solid rgba(145, 158, 171, 0.32)',
+      margin: '0 1em 1em 1em',
+    }}>
+      <Box justifyContent={'space-between'} sx={{
+        justifyContent: 'space-between',
+        flexDirection: 'column',
+        textAlign: 'center',
+        display:'flex',
+        p: 2,
+        borderRadius: 1 }}>
+        <Typography variant={'h4'} color={'text.secondary'}>MetaMask Wallet Required</Typography>
+        <Typography sx={{mt:1}} variant={'body2'} color={'text.secondary'}>
+          To use this feature, you need to have the MetaMask wallet installed.
+          If you don't have it, you can download it from the official website.
+        </Typography>
+
+        <Button onClick={handleDownloadMetaMask} sx={{marginTop: 2, width:'auto',}} variant={'contained'} color={'primary'}>
+          Download MetaMask
+        </Button>
+      </Box>
+    </Stack>
+  )
+}
+
+export default FinanceMetamaskHelper;

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

@@ -7,6 +7,7 @@ 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';
 import { useWithdraw } from '@src/hooks/use-withdraw.ts';
+import FinanceMetamaskHelper from "@src/sections/finance/components/finance-metamask-helper.tsx";
 
 interface FinanceWithdrawFromMetamaskProps {
   onClose: () => void;
@@ -17,7 +18,7 @@ const FinanceWithdrawFromMetamask: FC<FinanceWithdrawFromMetamaskProps> = ({ onC
   const { account: address, loading, connect } = useMetaMask();
 
   if (loading) return <FinanceMetamaskLoader />;
-  if (!address) return <FinanceMetamaskButton connect={connect} />;
+  if (!address) return <><FinanceMetamaskButton connect={connect} /><FinanceMetamaskHelper/></>;
 
   return <FinanceWithdraw address={address} withdrawHook={withdrawHook} onClose={onClose} />;
 };