vega-frontend-monorepo/apps/trading/client-pages/portfolio/deposits-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

35 lines
1.1 KiB
TypeScript

import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
import { DepositDialog, DepositsTable } from '@vegaprotocol/deposits';
import { useDeposits } from '@vegaprotocol/deposits';
import { t } from '@vegaprotocol/react-helpers';
import { useState } from 'react';
export const DepositsContainer = () => {
const { deposits, loading, error } = useDeposits();
const [depositDialog, setDepositDialog] = useState(false);
return (
<div className="h-full grid grid-rows-[1fr,min-content]">
<div>
<AsyncRenderer
data={deposits}
loading={loading}
error={error}
render={(data) => {
return <DepositsTable deposits={data} />;
}}
/>
</div>
<DepositDialog
depositDialog={depositDialog}
setDepositDialog={setDepositDialog}
/>
<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={() => setDepositDialog(true)}>
{t('Deposit')}
</Button>
</div>
</div>
);
};