55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
|
|
import {
|
|
PendingWithdrawalsTable,
|
|
useWithdrawals,
|
|
useWithdrawalDialog,
|
|
WithdrawalsTable,
|
|
} from '@vegaprotocol/withdraws';
|
|
import { t } from '@vegaprotocol/react-helpers';
|
|
import { VegaWalletContainer } from '../../components/vega-wallet-container';
|
|
|
|
export const WithdrawalsContainer = () => {
|
|
const { pending, completed, loading, error } = useWithdrawals();
|
|
const openWithdrawDialog = useWithdrawalDialog((state) => state.open);
|
|
|
|
return (
|
|
<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={() => openWithdrawDialog()}
|
|
data-testid="withdraw-dialog-button"
|
|
>
|
|
{t('Make withdrawal')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</VegaWalletContainer>
|
|
);
|
|
};
|