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