1  import { ArrowNarrowRightIcon, ExternalLinkIcon } from '@heroicons/react/outline';
  2  import { Trans } from '@lingui/macro';
  3  import { Button, Paper, Stack, SvgIcon, Typography, useMediaQuery, useTheme } from '@mui/material';
  4  import { ConnectWalletPaper } from 'src/components/ConnectWalletPaper';
  5  import { ListColumn } from 'src/components/lists/ListColumn';
  6  import { ListHeaderTitle } from 'src/components/lists/ListHeaderTitle';
  7  import { ListHeaderWrapper } from 'src/components/lists/ListHeaderWrapper';
  8  import { ListWrapper } from 'src/components/lists/ListWrapper';
  9  import { Link } from 'src/components/primitives/Link';
 10  import { useBridgeTransactionHistory } from 'src/hooks/useBridgeTransactionHistory';
 11  import { useModalContext } from 'src/hooks/useModal';
 12  import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 13  
 14  import LandingGhost from '/public/resting-gho-hat-purple.svg';
 15  
 16  import { BridgeTransactionListItemWrapper } from './BridgeTransactionListItem';
 17  import {
 18    TransactionListItemLoader,
 19    TransactionMobileListItemLoader,
 20  } from './TransactionListItemLoader';
 21  
 22  export function BridgeWrapper() {
 23    const { currentAccount } = useWeb3Context();
 24    const { openBridge } = useModalContext();
 25  
 26    const theme = useTheme();
 27    const downToSm = useMediaQuery(theme.breakpoints.down('sm'));
 28  
 29    const { data: bridgeTransactions, isLoading: loadingBridgeTransactions } =
 30      useBridgeTransactionHistory(currentAccount);
 31  
 32    if (!currentAccount) {
 33      return (
 34        <ConnectWalletPaper
 35          description={<Trans> Please connect your wallet to view transaction history.</Trans>}
 36        />
 37      );
 38    }
 39  
 40    if (!loadingBridgeTransactions && bridgeTransactions?.length === 0) {
 41      return (
 42        <Paper
 43          sx={{
 44            display: 'flex',
 45            flexDirection: 'column',
 46            alignItems: 'center',
 47            justifyContent: 'center',
 48            textAlign: 'center',
 49            p: 4,
 50            flex: 1,
 51          }}
 52        >
 53          <LandingGhost style={{ marginBottom: '16px' }} />
 54          <Typography variant={'h3'}>
 55            <Trans>You don&apos;t have any bridge transactions</Trans>
 56          </Typography>{' '}
 57          <Button sx={{ mt: 4 }} onClick={openBridge} variant="gradient">
 58            <Typography typography="subheader1">Bridge GHO</Typography>
 59          </Button>
 60        </Paper>
 61      );
 62    }
 63  
 64    return (
 65      <ListWrapper
 66        titleComponent={
 67          <Stack
 68            sx={{ width: '100%' }}
 69            direction="row"
 70            alignItems="center"
 71            justifyContent="space-between"
 72          >
 73            <Typography component="div" variant="h2" sx={{ mr: 4 }}>
 74              <Trans>Recent Transactions</Trans>
 75            </Typography>
 76            <Link underline="none" href={`https://ccip.chain.link/address/${currentAccount}`}>
 77              <Stack direction="row" alignItems="center" gap={2}>
 78                <Typography variant="caption">
 79                  <Trans>View all</Trans>
 80                </Typography>
 81                <SvgIcon sx={{ fontSize: '16px' }}>
 82                  <ExternalLinkIcon />
 83                </SvgIcon>
 84              </Stack>
 85            </Link>
 86          </Stack>
 87        }
 88      >
 89        {!downToSm && (
 90          <ListHeaderWrapper>
 91            <ListColumn align="left">
 92              <ListHeaderTitle>
 93                <Trans>Asset</Trans>
 94              </ListHeaderTitle>
 95            </ListColumn>
 96  
 97            <ListColumn align="left">
 98              <ListHeaderTitle>
 99                <Trans>Source</Trans>
100                <SvgIcon sx={{ fontSize: '13px', mx: 1 }}>
101                  <ArrowNarrowRightIcon />
102                </SvgIcon>
103                <Trans>Destination</Trans>
104              </ListHeaderTitle>
105            </ListColumn>
106  
107            <ListColumn align="left">
108              <ListHeaderTitle>
109                <Trans>Age</Trans>
110              </ListHeaderTitle>
111            </ListColumn>
112  
113            <ListColumn align="left">
114              <ListHeaderTitle>
115                <Trans>Status</Trans>
116              </ListHeaderTitle>
117            </ListColumn>
118  
119            <ListColumn maxWidth={95} minWidth={95} />
120          </ListHeaderWrapper>
121        )}
122  
123        {loadingBridgeTransactions &&
124          (downToSm
125            ? Array.from({ length: 5 }).map((_, i) => <TransactionMobileListItemLoader key={i} />)
126            : Array.from({ length: 5 }).map((_, i) => <TransactionListItemLoader key={i} />))}
127  
128        {bridgeTransactions &&
129          bridgeTransactions.length > 0 &&
130          bridgeTransactions?.map((tx) => (
131            <BridgeTransactionListItemWrapper key={tx.id} transaction={tx} />
132          ))}
133      </ListWrapper>
134    );
135  }