vega-frontend-monorepo/apps/trading/components/accounts-container/accounts-container.tsx

76 lines
2.5 KiB
TypeScript
Raw Normal View History

import { useCallback } from 'react';
feat(#847): collateral table, add breakdown (#1442) * feat: #847 show progress bar, margin accounts, no used/deposited * feat: #847 add collateral tables * fix: #847 add deposit asset type and fix tests * feat: #847 show deposited value, avaliable and percentage used * fix: #847 add styling fixes * fix: #847 add deposit new asset button * fix: #847 remove disabledSelect to fix withdraw and deposit dialogs * fix: #847 remove global reward from incoming - needs to be party specific * fix: #847 integration tests * fix: #847 default select deposit & withdraw * fix: #847 default select deposit & withdraw * fix: #847 pass asset id as default value * fix: #847 use only bigint no bignumber, remove NaN check * fix: #847 update deposit-form.spec.tsx * fix: revert update on account fields * feat: add storybook set up * chore: ignore apollo errors - to be reverted after API will be fixed * fix: container moved, progress bar in helpers * fix: #847 UI tweaks around accounts container * feat: #847 added useDepositAsset and useWithdrawAsset * fix: #847 fix progress bar in accounts and positions * feat: #847 add storybook * fix: #847 added tooltip and updated filtering * chore: #847 add get account data test * fix: #847 fix lint and type in account story * fix: #847 update data provider * fix: #847 fix get account data dry & lp link * fix: #847 fix breakdown table test * fix: #847 account data provider test * fix: #847 remove deposit new asset button - subscription does not display a sset data * fix: #847 add defaultValue in select otherwise default is not set up * feat: #847 update data provider update method and tables * fix: #847 fix accounts tests * fix: #847 remove unused getRows * fix: add decimals * fix: #847 fix imports * fix: update ids * Update apps/trading/pages/liquidity/[marketId].page.tsx * fix: #847 accounts update method check delta * fix: #847 use vega value formatters and cell renderers * fix: #847 fix imports * fix: #847 handle new account else block comment * fix: accounts and breakdown tables * fix(#847): account data provider improvments * fix: #847 fix formatters null check and add param * fix: #847 fix withdraw test and mock the hook * fix: #847 fix console lite grid select market test * fix: console lite build * fix: revert withdraw limits * fix: remove redundant waitFor use vega cell renderer * fix: breakdown display only use accounts * fix: breakdown display only use accounts * fix: updated accounts table * fix: move update inside try useWithdrawAsset * fix: update trading-accounts test * fix: portfolio-page.test.ts Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>
2022-09-30 00:40:44 +00:00
import { Splash } from '@vegaprotocol/ui-toolkit';
import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
feat(#847): collateral table, add breakdown (#1442) * feat: #847 show progress bar, margin accounts, no used/deposited * feat: #847 add collateral tables * fix: #847 add deposit asset type and fix tests * feat: #847 show deposited value, avaliable and percentage used * fix: #847 add styling fixes * fix: #847 add deposit new asset button * fix: #847 remove disabledSelect to fix withdraw and deposit dialogs * fix: #847 remove global reward from incoming - needs to be party specific * fix: #847 integration tests * fix: #847 default select deposit & withdraw * fix: #847 default select deposit & withdraw * fix: #847 pass asset id as default value * fix: #847 use only bigint no bignumber, remove NaN check * fix: #847 update deposit-form.spec.tsx * fix: revert update on account fields * feat: add storybook set up * chore: ignore apollo errors - to be reverted after API will be fixed * fix: container moved, progress bar in helpers * fix: #847 UI tweaks around accounts container * feat: #847 added useDepositAsset and useWithdrawAsset * fix: #847 fix progress bar in accounts and positions * feat: #847 add storybook * fix: #847 added tooltip and updated filtering * chore: #847 add get account data test * fix: #847 fix lint and type in account story * fix: #847 update data provider * fix: #847 fix get account data dry & lp link * fix: #847 fix breakdown table test * fix: #847 account data provider test * fix: #847 remove deposit new asset button - subscription does not display a sset data * fix: #847 add defaultValue in select otherwise default is not set up * feat: #847 update data provider update method and tables * fix: #847 fix accounts tests * fix: #847 remove unused getRows * fix: add decimals * fix: #847 fix imports * fix: update ids * Update apps/trading/pages/liquidity/[marketId].page.tsx * fix: #847 accounts update method check delta * fix: #847 use vega value formatters and cell renderers * fix: #847 fix imports * fix: #847 handle new account else block comment * fix: accounts and breakdown tables * fix(#847): account data provider improvments * fix: #847 fix formatters null check and add param * fix: #847 fix withdraw test and mock the hook * fix: #847 fix console lite grid select market test * fix: console lite build * fix: revert withdraw limits * fix: remove redundant waitFor use vega cell renderer * fix: breakdown display only use accounts * fix: breakdown display only use accounts * fix: updated accounts table * fix: move update inside try useWithdrawAsset * fix: update trading-accounts test * fix: portfolio-page.test.ts Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>
2022-09-30 00:40:44 +00:00
import { useVegaWallet } from '@vegaprotocol/wallet';
import type { PinnedAsset } from '@vegaprotocol/accounts';
import { AccountManager } from '@vegaprotocol/accounts';
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { useDataGridEvents } from '@vegaprotocol/datagrid';
import type { DataGridSlice } from '../../stores/datagrid-store-slice';
import { createDataGridSlice } from '../../stores/datagrid-store-slice';
import { ViewType, useSidebar } from '../sidebar';
import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
import { useT } from '../../lib/use-t';
feat(#847): collateral table, add breakdown (#1442) * feat: #847 show progress bar, margin accounts, no used/deposited * feat: #847 add collateral tables * fix: #847 add deposit asset type and fix tests * feat: #847 show deposited value, avaliable and percentage used * fix: #847 add styling fixes * fix: #847 add deposit new asset button * fix: #847 remove disabledSelect to fix withdraw and deposit dialogs * fix: #847 remove global reward from incoming - needs to be party specific * fix: #847 integration tests * fix: #847 default select deposit & withdraw * fix: #847 default select deposit & withdraw * fix: #847 pass asset id as default value * fix: #847 use only bigint no bignumber, remove NaN check * fix: #847 update deposit-form.spec.tsx * fix: revert update on account fields * feat: add storybook set up * chore: ignore apollo errors - to be reverted after API will be fixed * fix: container moved, progress bar in helpers * fix: #847 UI tweaks around accounts container * feat: #847 added useDepositAsset and useWithdrawAsset * fix: #847 fix progress bar in accounts and positions * feat: #847 add storybook * fix: #847 added tooltip and updated filtering * chore: #847 add get account data test * fix: #847 fix lint and type in account story * fix: #847 update data provider * fix: #847 fix get account data dry & lp link * fix: #847 fix breakdown table test * fix: #847 account data provider test * fix: #847 remove deposit new asset button - subscription does not display a sset data * fix: #847 add defaultValue in select otherwise default is not set up * feat: #847 update data provider update method and tables * fix: #847 fix accounts tests * fix: #847 remove unused getRows * fix: add decimals * fix: #847 fix imports * fix: update ids * Update apps/trading/pages/liquidity/[marketId].page.tsx * fix: #847 accounts update method check delta * fix: #847 use vega value formatters and cell renderers * fix: #847 fix imports * fix: #847 handle new account else block comment * fix: accounts and breakdown tables * fix(#847): account data provider improvments * fix: #847 fix formatters null check and add param * fix: #847 fix withdraw test and mock the hook * fix: #847 fix console lite grid select market test * fix: console lite build * fix: revert withdraw limits * fix: remove redundant waitFor use vega cell renderer * fix: breakdown display only use accounts * fix: breakdown display only use accounts * fix: updated accounts table * fix: move update inside try useWithdrawAsset * fix: update trading-accounts test * fix: portfolio-page.test.ts Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>
2022-09-30 00:40:44 +00:00
export const AccountsContainer = ({
pinnedAsset,
}: {
pinnedAsset?: PinnedAsset;
}) => {
const t = useT();
const onMarketClick = useMarketClickHandler(true);
const { pubKey, isReadOnly } = useVegaWallet();
const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
const currentRouteId = useGetCurrentRouteId();
const setViews = useSidebar((store) => store.setViews);
feat(#847): collateral table, add breakdown (#1442) * feat: #847 show progress bar, margin accounts, no used/deposited * feat: #847 add collateral tables * fix: #847 add deposit asset type and fix tests * feat: #847 show deposited value, avaliable and percentage used * fix: #847 add styling fixes * fix: #847 add deposit new asset button * fix: #847 remove disabledSelect to fix withdraw and deposit dialogs * fix: #847 remove global reward from incoming - needs to be party specific * fix: #847 integration tests * fix: #847 default select deposit & withdraw * fix: #847 default select deposit & withdraw * fix: #847 pass asset id as default value * fix: #847 use only bigint no bignumber, remove NaN check * fix: #847 update deposit-form.spec.tsx * fix: revert update on account fields * feat: add storybook set up * chore: ignore apollo errors - to be reverted after API will be fixed * fix: container moved, progress bar in helpers * fix: #847 UI tweaks around accounts container * feat: #847 added useDepositAsset and useWithdrawAsset * fix: #847 fix progress bar in accounts and positions * feat: #847 add storybook * fix: #847 added tooltip and updated filtering * chore: #847 add get account data test * fix: #847 fix lint and type in account story * fix: #847 update data provider * fix: #847 fix get account data dry & lp link * fix: #847 fix breakdown table test * fix: #847 account data provider test * fix: #847 remove deposit new asset button - subscription does not display a sset data * fix: #847 add defaultValue in select otherwise default is not set up * feat: #847 update data provider update method and tables * fix: #847 fix accounts tests * fix: #847 remove unused getRows * fix: add decimals * fix: #847 fix imports * fix: update ids * Update apps/trading/pages/liquidity/[marketId].page.tsx * fix: #847 accounts update method check delta * fix: #847 use vega value formatters and cell renderers * fix: #847 fix imports * fix: #847 handle new account else block comment * fix: accounts and breakdown tables * fix(#847): account data provider improvments * fix: #847 fix formatters null check and add param * fix: #847 fix withdraw test and mock the hook * fix: #847 fix console lite grid select market test * fix: console lite build * fix: revert withdraw limits * fix: remove redundant waitFor use vega cell renderer * fix: breakdown display only use accounts * fix: breakdown display only use accounts * fix: updated accounts table * fix: move update inside try useWithdrawAsset * fix: update trading-accounts test * fix: portfolio-page.test.ts Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>
2022-09-30 00:40:44 +00:00
const gridStore = useAccountStore((store) => store.gridStore);
const updateGridStore = useAccountStore((store) => store.updateGridStore);
const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
updateGridStore(colState);
});
const onClickAsset = useCallback(
(assetId?: string) => {
assetId && openAssetDetailsDialog(assetId);
},
[openAssetDetailsDialog]
);
feat#873): wallet service v2 (#1349) * feat: update connect dialog to handle api v2 * feat: better error handling * feat: update to only use strings for pubkey, add json rpc connector * feat: make json connector follow same patterns as rest connector * feat: add ability to change wallet location * feat: add chain id fetch * feat: improve types * feat: adjust send tx types * chore: remove dialog title and chain check temporarily * feat: additional UI and error handling * feat: rename keypair and keypairs to pubKey and pubKeys * feat: make rest and json rpc connectors return consistent data * feat: rename derived ids more clearly * feat: update send_transaction response type * chore: fix tests after context name change * feat: add utils for wallet, add encode tx func * feat: return null if tx is rejected * feat: fix up styles for connect buttons * feat: handle wallet version check * feat: add chain id check * chore: rename select pub key function to match, fix tests * fix: tests for rest connector form * feat: add tests for json rpc flow * feat: connect dialog changes * chore: change status to enum to avoid magic strings * feat: add custom icons and handle provided key name * chore: update global wallet connection e2d tests * chore: change zod validation to only expected required values * chore: ignore new generated code files * chore: fix typos and add translations * chore: set hosted wallet via env var and only show if not mainnet * feat: add functionality for try again button * test: fix failing tests * chore: fix lint and test * chore: remove double import * chore: make console-lite-e2e strict so json connector compiles correctly * chore: make token e2e tsconfig strict * chore: make stats-e2e tsconfig strict * feat: update json rpc request namespace * feat: simplify connector setup, support try again * chore: remove comment * fix: build errors * chore: make chainId check optional based on presence of appChainId, mock request for tests * chore: mock chain id request for all apps on all pages * fix: footer border on small screens * fix: use beforeEach for chainId query mock * chore: remove optional chain check, prevent rendering until fetch is complete * chore: update NX_VEGA_WALLET_URLs as the application now appends the base path, adjust token tests * fix: token e2e test that checks for pubkey name * chore: remove duplicated test, update wallet title assertion * fix: token tests * fix: token e2e assertions * fix: withdraw test * feat: enable json RPC for token * fix: sendTx command now accpets pubkey as separate arg * fix: test to use gui option temporarily Co-authored-by: Dexter <dexter.edwards93@gmail.com>
2022-10-03 18:12:34 +00:00
if (!pubKey) {
feat(#847): collateral table, add breakdown (#1442) * feat: #847 show progress bar, margin accounts, no used/deposited * feat: #847 add collateral tables * fix: #847 add deposit asset type and fix tests * feat: #847 show deposited value, avaliable and percentage used * fix: #847 add styling fixes * fix: #847 add deposit new asset button * fix: #847 remove disabledSelect to fix withdraw and deposit dialogs * fix: #847 remove global reward from incoming - needs to be party specific * fix: #847 integration tests * fix: #847 default select deposit & withdraw * fix: #847 default select deposit & withdraw * fix: #847 pass asset id as default value * fix: #847 use only bigint no bignumber, remove NaN check * fix: #847 update deposit-form.spec.tsx * fix: revert update on account fields * feat: add storybook set up * chore: ignore apollo errors - to be reverted after API will be fixed * fix: container moved, progress bar in helpers * fix: #847 UI tweaks around accounts container * feat: #847 added useDepositAsset and useWithdrawAsset * fix: #847 fix progress bar in accounts and positions * feat: #847 add storybook * fix: #847 added tooltip and updated filtering * chore: #847 add get account data test * fix: #847 fix lint and type in account story * fix: #847 update data provider * fix: #847 fix get account data dry & lp link * fix: #847 fix breakdown table test * fix: #847 account data provider test * fix: #847 remove deposit new asset button - subscription does not display a sset data * fix: #847 add defaultValue in select otherwise default is not set up * feat: #847 update data provider update method and tables * fix: #847 fix accounts tests * fix: #847 remove unused getRows * fix: add decimals * fix: #847 fix imports * fix: update ids * Update apps/trading/pages/liquidity/[marketId].page.tsx * fix: #847 accounts update method check delta * fix: #847 use vega value formatters and cell renderers * fix: #847 fix imports * fix: #847 handle new account else block comment * fix: accounts and breakdown tables * fix(#847): account data provider improvments * fix: #847 fix formatters null check and add param * fix: #847 fix withdraw test and mock the hook * fix: #847 fix console lite grid select market test * fix: console lite build * fix: revert withdraw limits * fix: remove redundant waitFor use vega cell renderer * fix: breakdown display only use accounts * fix: breakdown display only use accounts * fix: updated accounts table * fix: move update inside try useWithdrawAsset * fix: update trading-accounts test * fix: portfolio-page.test.ts Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>
2022-09-30 00:40:44 +00:00
return (
<Splash>
<p>{t('Please connect Vega wallet')}</p>
</Splash>
);
}
return (
<AccountManager
partyId={pubKey}
onClickAsset={onClickAsset}
onClickWithdraw={(assetId) => {
setViews({ type: ViewType.Withdraw, assetId }, currentRouteId);
}}
onClickDeposit={(assetId) => {
setViews({ type: ViewType.Deposit, assetId }, currentRouteId);
}}
onClickTransfer={(assetId) => {
setViews({ type: ViewType.Transfer, assetId }, currentRouteId);
}}
onMarketClick={onMarketClick}
isReadOnly={isReadOnly}
pinnedAsset={pinnedAsset}
gridProps={gridStoreCallbacks}
/>
feat(#847): collateral table, add breakdown (#1442) * feat: #847 show progress bar, margin accounts, no used/deposited * feat: #847 add collateral tables * fix: #847 add deposit asset type and fix tests * feat: #847 show deposited value, avaliable and percentage used * fix: #847 add styling fixes * fix: #847 add deposit new asset button * fix: #847 remove disabledSelect to fix withdraw and deposit dialogs * fix: #847 remove global reward from incoming - needs to be party specific * fix: #847 integration tests * fix: #847 default select deposit & withdraw * fix: #847 default select deposit & withdraw * fix: #847 pass asset id as default value * fix: #847 use only bigint no bignumber, remove NaN check * fix: #847 update deposit-form.spec.tsx * fix: revert update on account fields * feat: add storybook set up * chore: ignore apollo errors - to be reverted after API will be fixed * fix: container moved, progress bar in helpers * fix: #847 UI tweaks around accounts container * feat: #847 added useDepositAsset and useWithdrawAsset * fix: #847 fix progress bar in accounts and positions * feat: #847 add storybook * fix: #847 added tooltip and updated filtering * chore: #847 add get account data test * fix: #847 fix lint and type in account story * fix: #847 update data provider * fix: #847 fix get account data dry & lp link * fix: #847 fix breakdown table test * fix: #847 account data provider test * fix: #847 remove deposit new asset button - subscription does not display a sset data * fix: #847 add defaultValue in select otherwise default is not set up * feat: #847 update data provider update method and tables * fix: #847 fix accounts tests * fix: #847 remove unused getRows * fix: add decimals * fix: #847 fix imports * fix: update ids * Update apps/trading/pages/liquidity/[marketId].page.tsx * fix: #847 accounts update method check delta * fix: #847 use vega value formatters and cell renderers * fix: #847 fix imports * fix: #847 handle new account else block comment * fix: accounts and breakdown tables * fix(#847): account data provider improvments * fix: #847 fix formatters null check and add param * fix: #847 fix withdraw test and mock the hook * fix: #847 fix console lite grid select market test * fix: console lite build * fix: revert withdraw limits * fix: remove redundant waitFor use vega cell renderer * fix: breakdown display only use accounts * fix: breakdown display only use accounts * fix: updated accounts table * fix: move update inside try useWithdrawAsset * fix: update trading-accounts test * fix: portfolio-page.test.ts Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>
2022-09-30 00:40:44 +00:00
);
};
const useAccountStore = create<DataGridSlice>()(
persist(createDataGridSlice, {
name: 'vega_accounts_store',
})
);