vega-frontend-monorepo/apps/trading/client-pages/portfolio/withdrawals-container.tsx
Matthew Russell c576037b58
chore(#1873): trading hash router (#1921)
* chore: make liquidity page client side only

* chore: switch to hash based router

* chore: add index files for each page

* chore: tidy up _app

* chore: convert to use useRoutes

* fix: active state with react-router NavLink

* feat: add routes enum

* chore: restrict link and router imports from next

* chore: update testing navigation to use hash routes

* fix: typoe in eslint rule message

* chore: remove unnecessary getInitialProps function definition

* chore: wrap tests with memory router

* chore: delete unused index.page file

* chore: update suspense fallback state

* chore: add comment for link component span usage, update link to use toolkit styles

* chore: fix lint issues

* chore: delete client deposit page

* chore: revert title in _app so title gets set correctly without rerender

* revert: removal of deposit page so deposit e2e tests still pass

* chore: move client router to index page so valid status codes are still sent

* fix: wrong route path for markets page, cypress tests
2022-11-08 08:23:38 +01:00

63 lines
2.1 KiB
TypeScript

import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
import {
PendingWithdrawalsTable,
useWithdrawals,
WithdrawalDialogs,
WithdrawalsTable,
} from '@vegaprotocol/withdraws';
import { t } from '@vegaprotocol/react-helpers';
import { useState } from 'react';
import { VegaWalletContainer } from '../../components/vega-wallet-container';
import { Web3Container } from '@vegaprotocol/web3';
export const WithdrawalsContainer = () => {
const { pending, completed, loading, error } = useWithdrawals();
const [withdrawDialog, setWithdrawDialog] = useState(false);
return (
<Web3Container>
<VegaWalletContainer>
<div className="h-full relative grid grid-rows-[1fr,min-content]">
<div className="h-full">
<AsyncRenderer
data={{ pending, completed }}
loading={loading}
error={error}
render={({ pending, completed }) => (
<>
{pending && pending.length > 0 && (
<>
<h4 className="pt-3 pb-1">{t('Pending withdrawals')}</h4>
<PendingWithdrawalsTable rowData={pending} />
</>
)}
{completed && completed.length > 0 && (
<h4 className="pt-3 pb-1">{t('Withdrawal history')}</h4>
)}
<WithdrawalsTable
data-testid="withdrawals-history"
rowData={completed}
/>
</>
)}
/>
</div>
<div className="w-full dark:bg-black bg-white absolute bottom-0 h-auto flex justify-end px-[11px] py-2">
<Button
size="sm"
onClick={() => setWithdrawDialog(true)}
data-testid="withdraw-dialog-button"
>
{t('Make withdrawal')}
</Button>
</div>
</div>
<WithdrawalDialogs
withdrawDialog={withdrawDialog}
setWithdrawDialog={setWithdrawDialog}
/>
</VegaWalletContainer>
</Web3Container>
);
};