Skip to content

Commit

Permalink
refactor: added extra comments a some fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@geolffreym
geolffreym committed Jan 1, 2025
1 parent c6872ea commit 96df93a
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 74 deletions.
11 changes: 9 additions & 2 deletions src/hooks/use-deposit.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ export const useDeposit = (): UseDepositHook => {
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<VaultError | null>(null);

const sessionData = useSelector((state: any) => state.auth.session);
const { web3Auth } = useWeb3Auth();
const sessionData = useSelector((state: any) => state.auth.session);

const approveMMC = (amount: number): string => {
// Convert to Wei (assuming 18 decimals)
Expand All @@ -50,7 +50,6 @@ export const useDeposit = (): UseDepositHook => {
const initializeDeposit = ({ recipient, amount }: DepositParams) => {
// Convert to Wei (assuming 18 decimals)
const weiAmount = parseUnits(amount.toString(), 18);

return encodeFunctionData({
abi: LedgerVaultAbi.abi,
functionName: 'deposit',
Expand All @@ -66,6 +65,11 @@ export const useDeposit = (): UseDepositHook => {
setError(null);

try {
// TODO can be abstracted this logic to get this data in a hook?
// i can see this code repeated on all te hooks
// const [bundler, smart, provider] = useWeb3Session()


const accountAbstractionProvider = web3Auth.options.accountAbstractionProvider;
// @ts-ignore
const bundlerClient = accountAbstractionProvider.bundlerClient;
Expand All @@ -79,6 +83,7 @@ export const useDeposit = (): UseDepositHook => {
}

if (!bundlerClient) {
// TODO improve the message to send back to user
setError({ message: 'Bundler client not available' });
setLoading(false);
return;
Expand Down Expand Up @@ -115,6 +120,8 @@ export const useDeposit = (): UseDepositHook => {
setData(receipt);
setLoading(false);
} catch (err: any) {
// TODO bad idea send internal error to user
console.log(err)
setError({ message: err.message || 'An error occurred', ...err });
setLoading(false);
}
Expand Down
45 changes: 21 additions & 24 deletions src/sections/finance/components/finance-deposit-from-metamask.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
import "viem/window";
import {FC, PropsWithChildren, useEffect, useState} from "react";
import { Address } from 'viem';
import { useSnackbar } from 'notistack';
import { FC, PropsWithChildren, useEffect, useState, useCallback } from "react";
import { useSelector } from 'react-redux';
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import { ConnectWalletClient } from "@src/clients/viem/walletClient";
import { Address } from 'viem';
import Iconify from "@src/components/iconify";
import Stack from "@mui/material/Stack";
import {formatBalanceNumber} from "@src/utils/format-number.ts";
import TextMaxLine from "@src/components/text-max-line";
import {InputAmount} from "@src/components/input-amount.tsx";
import Divider from "@mui/material/Divider";
import Iconify from "@src/components/iconify";

import { ConnectWalletClient } from "@src/clients/viem/walletClient";
import { formatBalanceNumber } from "@src/utils/format-number.ts";
import TextMaxLine from "@src/components/text-max-line";
import { InputAmount } from "@src/components/input-amount.tsx";
import { useGetMmcContractBalance } from '@src/hooks/use-get-mmc-contract-balance.ts';
import NeonPaper from '@src/sections/publication/NeonPaperContainer.tsx';
import { useSelector } from 'react-redux';
import { useSnackbar } from 'notistack';
import { useDepositMetamask } from "@src/hooks/use-deposit-metamask.ts";
import { truncateAddress } from '@src/utils/wallet.ts';
import FinanceDialogsActions from "@src/sections/finance/components/finance-dialogs-actions.tsx";
import {useResponsive} from "@src/hooks/use-responsive.ts";
import { useResponsive } from "@src/hooks/use-responsive.ts";

interface FinanceDepositFromMetamaskProps {
onClose: () => void;
Expand All @@ -40,7 +41,7 @@ const FinanceDepositFromMetamask: FC<FinanceDepositFromMetamaskProps> = ({ onClo
if (error) {
enqueueSnackbar(`An error occurred during transaction.`, { variant: "error" });
}
}, [enqueueSnackbar, error]);
}, [error]);

useEffect(() => {
handleConnectMetamask();
Expand All @@ -56,14 +57,11 @@ const FinanceDepositFromMetamask: FC<FinanceDepositFromMetamaskProps> = ({ onClo
}
}

const handleConfirmDeposit = async () => {
const handleConfirmDeposit = useCallback(async () => {
if (amount > 0 && amount <= (balance ?? 0)) {
try {
setLoading(true);
await depositWithMetamask({
recipient: sessionData?.address, // o la dirección que quieras
amount
});
await depositWithMetamask({ recipient: sessionData?.address, amount });
enqueueSnackbar(`The deposit was successful`, { variant: "success" });
onClose();
} catch (err: any) {
Expand All @@ -74,10 +72,9 @@ const FinanceDepositFromMetamask: FC<FinanceDepositFromMetamaskProps> = ({ onClo
} else {
enqueueSnackbar("Invalid deposit amount", { variant: "warning" });
}
};
}, [sessionData?.address]);

const RainbowEffect = loading || depositLoading ? NeonPaper : Box;

const mdUp = useResponsive('up', 'md');

return (
Expand All @@ -86,10 +83,10 @@ const FinanceDepositFromMetamask: FC<FinanceDepositFromMetamaskProps> = ({ onClo
alignItems: 'center',
justifyContent: 'center',
}}>
{ address ? (
{address ? (
<>
<Stack
sx={{mt:2, py: 2, px: 3, gap:1, width: '100%'}}
sx={{ mt: 2, py: 2, px: 3, gap: 1, width: '100%' }}
direction={'column'}
display={'flex'}
alignItems={'center'}
Expand All @@ -104,7 +101,7 @@ const FinanceDepositFromMetamask: FC<FinanceDepositFromMetamaskProps> = ({ onClo
</TextMaxLine>
</BoxRow>

<Divider sx={{width: '100%'}}/>
<Divider sx={{ width: '100%' }} />

<BoxRow>
<TextMaxLine line={1}>Balance</TextMaxLine>
Expand All @@ -116,7 +113,7 @@ const FinanceDepositFromMetamask: FC<FinanceDepositFromMetamaskProps> = ({ onClo
</TextMaxLine>
</BoxRow>

<Divider sx={{width: '100%'}}/>
<Divider sx={{ width: '100%' }} />

<BoxRow>
<TextMaxLine line={1}>Enter the amount to deposit</TextMaxLine>
Expand All @@ -126,7 +123,7 @@ const FinanceDepositFromMetamask: FC<FinanceDepositFromMetamaskProps> = ({ onClo
onChange={(e) => setAmount(Number(e.target.value))}
/>
</BoxRow>
<Divider sx={{width: '100%'}}/>
<Divider sx={{ width: '100%' }} />
</Stack>

<FinanceDialogsActions
Expand Down Expand Up @@ -154,7 +151,7 @@ const FinanceDepositFromMetamask: FC<FinanceDepositFromMetamaskProps> = ({ onClo
);
}

export const BoxRow: FC<PropsWithChildren> = ({children}) => (
export const BoxRow: FC<PropsWithChildren> = ({ children }) => (
<Box sx={{
width: '100%',
display: 'flex',
Expand Down
75 changes: 42 additions & 33 deletions src/sections/finance/components/finance-deposit-from-smart-account.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,67 @@
// TODO Please keep ordered the dependencies
import { useSnackbar } from "notistack";
import { useSelector } from "react-redux";
import { FC, useEffect, useState, useCallback } from 'react';

import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Divider from "@mui/material/Divider";
import TextMaxLine from "@src/components/text-max-line";
import NeonPaper from "@src/sections/publication/NeonPaperContainer.tsx";
import FinanceDialogsActions from "@src/sections/finance/components/finance-dialogs-actions.tsx";

import { formatBalanceNumber } from "@src/utils/format-number.ts";
import Divider from "@mui/material/Divider";
import { InputAmount } from "@src/components/input-amount.tsx";
import { BoxRow } from "@src/sections/finance/components/finance-deposit-from-metamask.tsx";
import { useSelector } from "react-redux";
import { useGetMmcContractBalance } from "@src/hooks/use-get-mmc-contract-balance.ts";
import NeonPaper from "@src/sections/publication/NeonPaperContainer.tsx";
import Box from "@mui/material/Box";
import { useSnackbar } from "notistack";
import { FC, useEffect, useState } from 'react';
import { useResponsive } from "@src/hooks/use-responsive.ts";
import { useDeposit } from "@src/hooks/use-deposit.ts";
import { truncateAddress } from '@src/utils/wallet.ts';
import {useResponsive} from "@src/hooks/use-responsive.ts";
import FinanceDialogsActions from "@src/sections/finance/components/finance-dialogs-actions.tsx";

interface FinanceDepositFromSmartAccountProps {
onClose: () => void;
}

const FinanceDepositFromSmartAccount: FC<FinanceDepositFromSmartAccountProps> = ({ onClose }) => {
// TODO Please keep declaration on top
const [amount, setAmount] = useState<number>(0);
const [loading, setLoading] = useState(false);
const sessionData = useSelector((state: any) => state.auth.session);
const { balance } = useGetMmcContractBalance(sessionData?.address);
const { enqueueSnackbar } = useSnackbar();

const sessionData = useSelector((state: any) => state.auth.session);
const { deposit, loading: depositLoading, error } = useDeposit();
const { balance } = useGetMmcContractBalance(sessionData?.address);

// TODO we can have a list of errors centralized in a library to throw, in favor of reutilization
const errorDueInvalidAmount = () => enqueueSnackbar("Invalid deposit amount.", { variant: "warning" });
const errorDuringDeposit = () => enqueueSnackbar(`Oops! Something went wrong with your deposit. Please try again.`, { variant: "error" });

const RainbowEffect = loading || depositLoading ? NeonPaper : Box;
const mdUp = useResponsive('up', 'md');

useEffect(() => {
if (error) {
enqueueSnackbar(`Deposit failed: ${error?.message}`, { variant: "error" });
}
}, [enqueueSnackbar, error]);

const handleConfirmDeposit = async () => {
if (amount > 0 && amount <= (balance ?? 0)) {
try {
setLoading(true);
await deposit({ recipient: sessionData?.address, amount });
enqueueSnackbar(`The deposit was successful`, { variant: "success" });
onClose();
} catch (err: any) {
enqueueSnackbar(`Deposit failed: ${err?.message}`, { variant: "error" });
} finally {
setLoading(false);
}
} else {
enqueueSnackbar("Invalid deposit amount", { variant: "warning" });
if (error) errorDuringDeposit()
}, [error]);

const handleConfirmDeposit = useCallback(async () => {
// fail fast
if (amount == 0 || amount >= (balance ?? 0))
return errorDueInvalidAmount();

try {
setLoading(true);
// TODO deposit can return a OK?
await deposit({ recipient: sessionData?.address, amount });
enqueueSnackbar(`The deposit was successful`, { variant: "success" });
onClose();
} catch (err: any) {
errorDuringDeposit();
} finally {
setLoading(false);
}
};

const RainbowEffect = loading || depositLoading ? NeonPaper : Box;
}, [sessionData?.address, amount]);

const mdUp = useResponsive('up', 'md');

return (
<>
Expand All @@ -73,7 +82,7 @@ const FinanceDepositFromSmartAccount: FC<FinanceDepositFromSmartAccountProps> =
</TextMaxLine>
</BoxRow>

<Divider sx={{width: '100%'}}/>
<Divider sx={{ width: '100%' }} />

<BoxRow>
<TextMaxLine line={1}>Balance</TextMaxLine>
Expand Down
25 changes: 10 additions & 15 deletions src/sections/finance/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@ import FinanceInviteFriends from '@src/sections/finance/components/finance-invit
import FinanceWidgetSummary from '@src/sections/finance/components/finance-widget-summary.tsx';
import FinanceBalanceStatistics from '@src/sections/finance/components/finance-balance-statistics.tsx';

import {useSelector} from "react-redux";
import {useProfileFollowing} from "@lens-protocol/react";
import { useTransactionData} from "@src/hooks/use-transaction-data";
import { useSelector } from "react-redux";
import { useProfileFollowing } from "@lens-protocol/react";
import { useTransactionData } from "@src/hooks/use-transaction-data";
import {
groupedTransactionData,
processDayData, ProcessedTransactionData,
processTransactionData
} from "@src/utils/finance-graphs/groupedTransactions.ts";
import Typography from "@mui/material/Typography";
import FinanceQuickActions from "@src/sections/finance/components/finance-quick-actions.tsx";
// import FinanceQuickActions from "@src/sections/finance/components/finance-quick-actions.tsx";
import useGetSmartWalletTransactions from "@src/hooks/use-get-smart-wallet-transactions.ts";
import FinanceTransactionsHistory from "@src/sections/finance/components/finance-transactions-history.tsx";

Expand All @@ -32,25 +32,20 @@ export default function OverviewBankingView() {
const { balance: balanceFromRedux } = useSelector((state: any) => state.auth);
const sessionData = useSelector((state: any) => state.auth.session);

const { data: transactionsData } = useTransactionData()
const { data: following } = useProfileFollowing({
// @ts-ignore
for: sessionData?.profile?.id,
});

const {data: transactionsData} = useTransactionData()

// remove the last element as it is the current day
const processedData = groupedTransactionData(transactionsData);
const daySeriesData = processDayData(processedData);
// Get the difference between daySeriesData[1] and daySeriesData[0] in y value to calculate the percent
const percent = (daySeriesData[1]?.y - daySeriesData[0]?.y) / daySeriesData[0]?.y * 100;

const { transactions }: UseGetSmartWalletTransactionsReturn = useGetSmartWalletTransactions();
const processedTransactions: ProcessedTransactionData[] = processTransactionData(transactions)

console.log('logs:', transactions);
console.log('processedTransactions:', processedTransactions);

return (
<Container
sx={{
Expand All @@ -59,7 +54,7 @@ export default function OverviewBankingView() {
maxWidth: '100% !important',
}}
>
<Grid container spacing={3}>
<Grid container spacing={3}>
<Grid xs={12} md={8}>
<Stack direction={{ lg: 'column', xlg: 'row' }} spacing={{
xs: 1,
Expand All @@ -85,10 +80,10 @@ export default function OverviewBankingView() {
</Stack>
</Grid>

<Typography variant="h6" sx={{ pt: 2 }}>
Recent Transactions
</Typography>
<FinanceTransactionsHistory transactionData={processedTransactions} />
<Typography variant="h6" sx={{ pt: 2 }}>
Recent Transactions
</Typography>
<FinanceTransactionsHistory transactionData={processedTransactions} />
</Grid>


Expand Down

0 comments on commit 96df93a

Please sign in to comment.