1  import { Trans } from '@lingui/macro';
  2  import ArrowOutward from '@mui/icons-material/ArrowOutward';
  3  import { Box, Button, SvgIcon, Typography, useTheme } from '@mui/material';
  4  import React, { useEffect, useState } from 'react';
  5  import { ListItem } from 'src/components/lists/ListItem';
  6  import { useRootStore } from 'src/store/root';
  7  import { GENERAL } from 'src/utils/mixPanelEvents';
  8  import { useShallow } from 'zustand/shallow';
  9  
 10  import { ActionDetails, ActionTextMap } from './actions/ActionDetails';
 11  import { unixTimestampToFormattedTime } from './helpers';
 12  import { ActionFields, TransactionHistoryItem } from './types';
 13  
 14  function ActionTitle({ action }: { action: string }) {
 15    return (
 16      <Typography variant="subheader2" color="text.muted">
 17        <ActionTextMap action={action} />
 18      </Typography>
 19    );
 20  }
 21  
 22  interface TransactionHistoryItemProps {
 23    transaction: TransactionHistoryItem & ActionFields[keyof ActionFields];
 24  }
 25  
 26  function TransactionMobileRowItem({ transaction }: TransactionHistoryItemProps) {
 27    const [copyStatus, setCopyStatus] = useState(false);
 28    const [currentNetworkConfig, trackEvent] = useRootStore(
 29      useShallow((state) => [state.currentNetworkConfig, state.trackEvent])
 30    );
 31    const theme = useTheme();
 32  
 33    useEffect(() => {
 34      if (copyStatus) {
 35        const timer = setTimeout(() => {
 36          setCopyStatus(false);
 37        }, 1000);
 38  
 39        return () => {
 40          clearTimeout(timer);
 41        };
 42      }
 43    }, [copyStatus]);
 44  
 45    const explorerLink = currentNetworkConfig.explorerLinkBuilder({ tx: transaction.txHash });
 46  
 47    return (
 48      <Box>
 49        <ListItem
 50          px={4}
 51          sx={{
 52            borderWidth: `1px 0 0 0`,
 53            borderStyle: `solid`,
 54            borderColor: `${theme.palette.divider}`,
 55          }}
 56        >
 57          <Box
 58            sx={{
 59              display: 'flex',
 60              flexDirection: 'column',
 61              justifyContent: 'center',
 62              alignItems: 'left',
 63              width: '100%',
 64            }}
 65          >
 66            <Box
 67              sx={{
 68                display: 'flex',
 69                flexDirection: 'row',
 70                justifyContent: 'space-between',
 71                alignItems: 'center',
 72                width: '100%',
 73                pt: '14px',
 74              }}
 75            >
 76              <Box sx={{ display: 'flex', gap: 2 }}>
 77                <ActionTitle action={transaction.action} />
 78              </Box>
 79  
 80              <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
 81                {' '}
 82                <Typography variant="caption" color="text.muted">
 83                  {unixTimestampToFormattedTime({ unixTimestamp: transaction.timestamp })}
 84                </Typography>
 85                <Button
 86                  sx={{
 87                    display: 'flex',
 88                    ml: 3,
 89                    mr: 1,
 90                    width: '69px',
 91                    height: '20px',
 92                    fontSize: '0.6rem',
 93                    alignItems: 'center',
 94                    justifyContent: 'center',
 95                    pl: 1,
 96                    pr: 1,
 97                  }}
 98                  variant="outlined"
 99                  href={explorerLink}
100                  target="_blank"
101                  onClick={() =>
102                    trackEvent(GENERAL.EXTERNAL_LINK, { funnel: 'TxHistoy', Link: 'Etherscan' })
103                  }
104                >
105                  <Trans>VIEW TX</Trans>{' '}
106                  <SvgIcon
107                    sx={{
108                      fontSize: '15px',
109                      pl: 1,
110                      pb: 0.5,
111                    }}
112                  >
113                    <ArrowOutward />
114                  </SvgIcon>
115                </Button>
116              </Box>
117            </Box>
118            <Box sx={{ py: '28px' }}>
119              <ActionDetails transaction={transaction} iconSize="24px" />
120            </Box>
121          </Box>
122        </ListItem>
123      </Box>
124    );
125  }
126  
127  export default TransactionMobileRowItem;