gnosis / safe-react / 2110653577

import { ReactElement, useState } from 'react'

import { Loader, Title } from '@gnosis.pm/safe-react-components'

import ExpandMoreIcon from '@material-ui/icons/ExpandMore'

import ExpandLessIcon from '@material-ui/icons/ExpandLess'

import styled from 'styled-components'

import { usePagedHistoryTransactions } from './hooks/usePagedHistoryTransactions'

import { Centered, NoTransactions } from './styled'

import { HistoryTxList } from './HistoryTxList'

import { TxsInfiniteScroll } from './TxsInfiniteScroll'

import Img from 'src/components/layout/Img'

import NoTransactionsImage from './assets/no-transactions.svg'

import Button from 'src/components/layout/Button'

import Filter from './Filter'

import filterIcon from './assets/filter-icon.svg'

import { md, sm, primary300, primary200 } from 'src/theme/variables'

  }

      <Centered>

        <Loader size="md" />

      </Centered>

    )

  }

      <NoTransactions>

        <Img alt="No Transactions yet" src={NoTransactionsImage} />

        <Title size="xs">History transactions will appear here </Title>

      </NoTransactions>

    )

  }

    <>

      <StyledFilterButton onClick={onClickFilter} variant="contained" color="primary" disableElevation>

        <StyledFilterIconImage src={filterIcon} /> Filters{' '}

      </StyledFilterButton>

      <TxsInfiniteScroll next={next} hasMore={hasMore} isLoading={isLoading}>

        <HistoryTxList transactions={transactions} />

      </TxsInfiniteScroll>

    </>

  )

}

  &.MuiButton-root {

    align-items: center;

    background-color: ${primary200};

    border: 2px solid ${primary300};

    color: #162d45;

    align-self: flex-end;

    margin-right: ${md};

    margin-top: -51px;

    margin-bottom: ${md};

    &:hover {

      background-color: ${primary200};

    }

  }

`

  margin-right: ${sm};

`