1  import { ExternalLinkIcon } from '@heroicons/react/outline';
 2  import { CheckIcon } from '@heroicons/react/solid';
 3  import { Trans } from '@lingui/macro';
 4  import { Box, Button, Link, SvgIcon, Typography } from '@mui/material';
 5  import { ReactNode } from 'react';
 6  import { useModalContext } from 'src/hooks/useModal';
 7  import { useRootStore } from 'src/store/root';
 8  
 9  export type BaseSuccessTxViewProps = {
10    txHash?: string;
11    children: ReactNode;
12    hideTx?: boolean;
13  };
14  
15  const ExtLinkIcon = () => (
16    <SvgIcon sx={{ ml: '2px', fontSize: '11px' }}>
17      <ExternalLinkIcon />
18    </SvgIcon>
19  );
20  
21  export const BaseSuccessView = ({ txHash, children, hideTx }: BaseSuccessTxViewProps) => {
22    const { close, mainTxState } = useModalContext();
23    const currentNetworkConfig = useRootStore((store) => store.currentNetworkConfig);
24  
25    return (
26      <>
27        <Box
28          sx={{
29            display: 'flex',
30            flexDirection: 'column',
31            justifyContent: 'center',
32            alignItems: 'center',
33          }}
34        >
35          <Box
36            sx={{
37              width: '48px',
38              height: '48px',
39              bgcolor: 'success.200',
40              borderRadius: '50%',
41              mt: 14,
42              mx: 'auto',
43              display: 'flex',
44              alignItems: 'center',
45              justifyContent: 'center',
46            }}
47          >
48            <SvgIcon sx={{ color: 'success.main', fontSize: '32px' }}>
49              <CheckIcon />
50            </SvgIcon>
51          </Box>
52  
53          <Typography sx={{ mt: 4 }} variant="h2">
54            <Trans>All done</Trans>
55          </Typography>
56  
57          {children}
58        </Box>
59  
60        {!hideTx && (
61          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
62            <Link
63              variant="helperText"
64              href={currentNetworkConfig.explorerLinkBuilder({
65                tx: txHash ? txHash : mainTxState.txHash,
66              })}
67              sx={{
68                display: 'inline-flex',
69                alignItems: 'center',
70                justifyContent: 'right',
71                mt: 6,
72                mb: 3,
73              }}
74              underline="hover"
75              target="_blank"
76              rel="noreferrer noopener"
77            >
78              <Trans>Review tx details</Trans>
79              <ExtLinkIcon />
80            </Link>
81            <Button
82              onClick={close}
83              variant="contained"
84              size="large"
85              sx={{ minHeight: '44px' }}
86              data-cy="closeButton"
87            >
88              <Trans>Ok, Close</Trans>
89            </Button>
90          </Box>
91        )}
92      </>
93    );
94  };