text: import React, { useEffect, useState } from "react";
  import styled from "styled-components";
  
  import ResponsivePagination from "../../components/ResponsivePagination";
  import TransfersTable from "./TransfersTable";
  import { useDispatch, useSelector } from "react-redux";
  import { useChainRoute, useQuery } from "../../utils/hooks";
  import { useHistory } from "react-router";
  
  import {
    fetchTransferList,
    transferListSelector,
    loadingTransferListSelector,
  } from "../../store/reducers/transferSlice";
  import { chainSelector } from "../../store/reducers/chainSlice";
  import Text from "../../components/Text";
  
  const HeaderWrapper = styled.div`
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  `;
  
  const Title = styled(Text)`
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
  `;
  
  const DEFAULT_PAGE_SIZE = 20;
  const DEFAULT_QUERY_PAGE = 1;
  
  const Transfers = () => {
    useChainRoute();
  
    const searchPage = parseInt(useQuery().get("page"));
    const queryPage =
      searchPage && !isNaN(searchPage) && searchPage > 0
        ? searchPage
        : DEFAULT_QUERY_PAGE;
    const [tablePage, setTablePage] = useState(queryPage);
    const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE);
  
    const dispatch = useDispatch();
    const history = useHistory();
    const { items: transferList, total } = useSelector(transferListSelector);
    const loading = useSelector(loadingTransferListSelector);
    const chain = useSelector(chainSelector);
  
    useEffect(() => {
      dispatch(fetchTransferList(chain, tablePage - 1, pageSize));
    }, [dispatch, chain, tablePage, pageSize]);
  
    const totalPages = Math.ceil(total / pageSize);
  
    return (
      <>
        <TransfersTable
          data={transferList}
          loading={loading}
          header={
            <HeaderWrapper>
              <Title>Transfers</Title>
            </HeaderWrapper>
          }
          footer={
            <ResponsivePagination
              activePage={tablePage}
              totalPages={totalPages}
              pageSize={pageSize}
              setPageSize={(pageSize) => {
                setTablePage(DEFAULT_QUERY_PAGE);
                setPageSize(pageSize);
                history.push({
                  search: null,
                });
              }}
              onPageChange={(_, { activePage }) => {
                history.push({
                  search:
                    activePage === DEFAULT_QUERY_PAGE
                      ? null
                      : `?page=${activePage}`,
                });
                setTablePage(activePage);
              }}
            />
          }
        />
      </>
    );
  };
  
  export default Transfers;
  