1  import { ExternalLinkIcon } from '@heroicons/react/outline';
 2  import { Trans } from '@lingui/macro';
 3  import { Box, Link, SvgIcon, Typography } from '@mui/material';
 4  import { useEffect } from 'react';
 5  import { ApprovalMethodToggleButton } from 'src/components/transactions/FlowCommons/ApprovalMethodToggleButton';
 6  import { MOCK_SIGNED_HASH } from 'src/helpers/useTransactionHandler';
 7  import { useIsContractAddress } from 'src/hooks/useIsContractAddress';
 8  import { useRootStore } from 'src/store/root';
 9  import { ApprovalMethod } from 'src/store/walletSlice';
10  import { useShallow } from 'zustand/shallow';
11  
12  export type RightHelperTextProps = {
13    approvalHash?: string;
14    tryPermit?: boolean;
15  };
16  
17  const ExtLinkIcon = () => (
18    <SvgIcon sx={{ ml: '2px', fontSize: '11px' }}>
19      <ExternalLinkIcon />
20    </SvgIcon>
21  );
22  
23  export const RightHelperText = ({ approvalHash, tryPermit }: RightHelperTextProps) => {
24    const [
25      account,
26      walletApprovalMethodPreference,
27      setWalletApprovalMethodPreference,
28      currentNetworkConfig,
29    ] = useRootStore(
30      useShallow((store) => [
31        store.account,
32        store.walletApprovalMethodPreference,
33        store.setWalletApprovalMethodPreference,
34        store.currentNetworkConfig,
35      ])
36    );
37    const { data: isContractAddress } = useIsContractAddress(account);
38    const usingPermit = tryPermit && walletApprovalMethodPreference;
39    const isSigned = approvalHash === MOCK_SIGNED_HASH;
40  
41    /**
42     * If these conditions are met, it updates the wallet approval method preference to APPROVE as default.
43     * This is done because smart contract accounts do not support the PERMIT method.
44     */
45    useEffect(() => {
46      if (isContractAddress && walletApprovalMethodPreference === ApprovalMethod.PERMIT) {
47        setWalletApprovalMethodPreference(ApprovalMethod.APPROVE);
48      }
49    }, [isContractAddress]);
50  
51    // a signature is not submitted on-chain so there is no link to review
52    if (!approvalHash && !isSigned && tryPermit)
53      return (
54        <Box sx={{ display: 'inline-flex', alignItems: 'center', mb: 2 }}>
55          <Typography variant="subheader2" color="text.secondary">
56            <Trans>Approve with</Trans>&nbsp;
57          </Typography>
58          <ApprovalMethodToggleButton
59            currentMethod={walletApprovalMethodPreference}
60            setMethod={(method: ApprovalMethod) => setWalletApprovalMethodPreference(method)}
61          />
62        </Box>
63      );
64    if (approvalHash && !usingPermit)
65      return (
66        <Box
67          sx={{
68            display: 'flex',
69            justifyContent: 'flex-start',
70            alignItems: 'center',
71            pb: 1,
72          }}
73        >
74          {approvalHash && (
75            <Link
76              variant="helperText"
77              href={currentNetworkConfig.explorerLinkBuilder({ tx: approvalHash })}
78              sx={{ display: 'inline-flex', alignItems: 'center' }}
79              underline="hover"
80              target="_blank"
81              rel="noreferrer noopener"
82            >
83              <Trans>Review approval tx details</Trans>
84              <ExtLinkIcon />
85            </Link>
86          )}
87        </Box>
88      );
89    return <></>;
90  };