1  import { CheckIcon } from '@heroicons/react/solid';
  2  import { Trans } from '@lingui/macro';
  3  import { Box, BoxProps, Button, CircularProgress, SvgIcon, Typography } from '@mui/material';
  4  import { ReactNode } from 'react';
  5  import { TxStateType, useModalContext } from 'src/hooks/useModal';
  6  import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
  7  import { TxAction } from 'src/ui-config/errorMapping';
  8  
  9  interface TxActionsWrapperProps extends BoxProps {
 10    approvalTxState?: TxStateType;
 11    handleSignatures: () => Promise<void>;
 12    handleAction: () => Promise<void>;
 13    isWrongNetwork: boolean;
 14    mainTxState: TxStateType;
 15    preparingTransactions: boolean;
 16    requiresAmount?: boolean;
 17    requiresSignature: boolean;
 18    blocked?: boolean;
 19    errorParams?: {
 20      loading: boolean;
 21      disabled: boolean;
 22      content: ReactNode;
 23      handleClick: () => Promise<void>;
 24    };
 25    isRevoke: boolean;
 26  }
 27  
 28  export const DelegationTxsWrapper = ({
 29    isRevoke,
 30    approvalTxState,
 31    handleSignatures,
 32    handleAction,
 33    isWrongNetwork,
 34    mainTxState,
 35    preparingTransactions,
 36    requiresSignature,
 37    sx,
 38    blocked,
 39  }: TxActionsWrapperProps) => {
 40    const { txError } = useModalContext();
 41    const { readOnlyModeAddress } = useWeb3Context();
 42  
 43    function getMainParams() {
 44      if (blocked)
 45        return { disabled: true, content: <Trans>{isRevoke ? 'Revoke' : 'Delegate'}</Trans> };
 46      if (
 47        (txError?.txAction === TxAction.GAS_ESTIMATION ||
 48          txError?.txAction === TxAction.MAIN_ACTION) &&
 49        txError?.actionBlocked
 50      ) {
 51        return {
 52          loading: false,
 53          disabled: true,
 54          content: <Trans>{isRevoke ? 'Revoke' : 'Delegate'}</Trans>,
 55        };
 56      }
 57      if (isWrongNetwork) return { disabled: true, content: <Trans>Wrong Network</Trans> };
 58      if (preparingTransactions) return { disabled: true, loading: true };
 59      if (mainTxState?.loading)
 60        return {
 61          loading: true,
 62          disabled: true,
 63          content: <Trans>{isRevoke ? 'Revoking' : 'Delegating'}</Trans>,
 64        };
 65      if (requiresSignature && !approvalTxState?.success)
 66        return { disabled: true, content: <Trans>{isRevoke ? 'Revoke' : 'Delegate'}</Trans> };
 67      return {
 68        content: <Trans>{isRevoke ? 'Revoke' : 'Delegate'}</Trans>,
 69        handleClick: handleAction,
 70      };
 71    }
 72  
 73    function getSignatureParams() {
 74      if (!requiresSignature || isWrongNetwork || preparingTransactions || blocked) return null;
 75      if (approvalTxState?.loading)
 76        return { loading: true, disabled: true, content: <Trans>Signing</Trans> };
 77      if (approvalTxState?.success)
 78        return {
 79          disabled: true,
 80          content: (
 81            <>
 82              <Trans>Signatures ready</Trans>
 83              <SvgIcon sx={{ fontSize: 20, ml: 2 }}>
 84                <CheckIcon />
 85              </SvgIcon>
 86            </>
 87          ),
 88        };
 89  
 90      return {
 91        content: <Trans>Sign to continue</Trans>,
 92        handleClick: handleSignatures,
 93      };
 94    }
 95  
 96    const { content, disabled, loading, handleClick } = getMainParams();
 97    const approvalParams = getSignatureParams();
 98    return (
 99      <Box sx={{ display: 'flex', flexDirection: 'column', mt: 12, ...sx }}>
100        {approvalParams && !readOnlyModeAddress && (
101          <Button
102            variant="contained"
103            disabled={approvalParams.disabled || blocked}
104            onClick={() => approvalParams.handleClick && approvalParams.handleClick()}
105            size="large"
106            sx={{ minHeight: '44px' }}
107            data-cy="approvalButton"
108          >
109            {approvalParams.loading && (
110              <CircularProgress color="inherit" size="16px" sx={{ mr: 2 }} />
111            )}
112            {approvalParams.content}
113          </Button>
114        )}
115  
116        <Button
117          variant="contained"
118          disabled={disabled || blocked || readOnlyModeAddress !== undefined}
119          onClick={handleClick}
120          size="large"
121          sx={{ minHeight: '44px', ...(approvalParams ? { mt: 2 } : {}) }}
122          data-cy="actionButton"
123        >
124          {loading && <CircularProgress color="inherit" size="16px" sx={{ mr: 2 }} />}
125          {content}
126        </Button>
127        {readOnlyModeAddress && (
128          <Typography variant="helperText" color="warning.main" sx={{ textAlign: 'center', mt: 2 }}>
129            <Trans>Read-only mode. Connect to a wallet to perform transactions.</Trans>
130          </Typography>
131        )}
132      </Box>
133    );
134  };