diff --git a/apps/trading/pages/portfolio/accounts-container.tsx b/apps/trading/pages/portfolio/accounts-container.tsx index 109eece77..2d1fe2f33 100644 --- a/apps/trading/pages/portfolio/accounts-container.tsx +++ b/apps/trading/pages/portfolio/accounts-container.tsx @@ -1,6 +1,5 @@ import { useState } from 'react'; import { Button, Dialog } from '@vegaprotocol/ui-toolkit'; -import type { Asset } from '@vegaprotocol/react-helpers'; import { t } from '@vegaprotocol/react-helpers'; import { WithdrawalDialogs } from '@vegaprotocol/withdraws'; import { Web3Container } from '@vegaprotocol/web3'; @@ -52,7 +51,7 @@ export const AssetAccountTable = ({ partyId }: { partyId: string }) => { const [depositDialog, setDepositDialog] = useState(false); const { setAssetDetailsDialogOpen, setAssetDetailsDialogSymbol } = useAssetDetailsDialogStore(); - const [asset, setAsset] = useState(null); + const [assetId, setAssetId] = useState(); return ( <> { setAssetDetailsDialogSymbol(value); } }} - onClickWithdraw={(value) => { setWithdrawDialog(true); setAsset(value || null); }} - onClickDeposit={(value) => { setDepositDialog(true); setAsset(value || null); }} + onClickWithdraw={(assetId) => { + setWithdrawDialog(true); + setAssetId(assetId); + }} + onClickDeposit={(assetId) => { + setDepositDialog(true); + setAssetId(assetId); + }} /> diff --git a/libs/accounts/src/lib/accounts-data-provider.ts b/libs/accounts/src/lib/accounts-data-provider.ts index ee6d3a000..f6dd3acc8 100644 --- a/libs/accounts/src/lib/accounts-data-provider.ts +++ b/libs/accounts/src/lib/accounts-data-provider.ts @@ -37,7 +37,7 @@ export const getId = ( ? `${account.type}-${account.asset.id}-${account.market?.id ?? 'null'}` : `${account.type}-${account.assetId}-${account.marketId}`; -const INCOMING_ACCOUNT_TYPES = [ +const IN_ACCOUNT_TYPES = [ AccountType.ACCOUNT_TYPE_GENERAL, AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES, AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES, @@ -45,7 +45,7 @@ const INCOMING_ACCOUNT_TYPES = [ AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS, ]; -const OUTCOMING_ACCOUNT_TYPES = [ +const OUT_ACCOUNT_TYPES = [ AccountType.ACCOUNT_TYPE_MARGIN, AccountType.ACCOUNT_TYPE_BOND, AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE, @@ -110,11 +110,11 @@ export const getAccountData = ( .reduce((acc, a) => acc + BigInt(a.balance), BigInt(0)); const incoming = assetData - .filter((a) => INCOMING_ACCOUNT_TYPES.includes(a.type)) + .filter((a) => IN_ACCOUNT_TYPES.includes(a.type)) .reduce((acc, a) => acc + BigInt(a.balance), BigInt(0)); const used = assetData - .filter((a) => OUTCOMING_ACCOUNT_TYPES.includes(a.type)) + .filter((a) => OUT_ACCOUNT_TYPES.includes(a.type)) .reduce((acc, a) => acc + BigInt(a.balance), BigInt(0)); const depositRow: AccountFields = { @@ -125,7 +125,7 @@ export const getAccountData = ( }; const accountRows = assetData - .filter((a) => !INCOMING_ACCOUNT_TYPES.includes(a.type)) + .filter((a) => !IN_ACCOUNT_TYPES.includes(a.type)) .map((a) => ({ ...a, available: (incoming - BigInt(a.balance)).toString(), diff --git a/libs/accounts/src/lib/accounts-table.tsx b/libs/accounts/src/lib/accounts-table.tsx index 215153edc..32490487b 100644 --- a/libs/accounts/src/lib/accounts-table.tsx +++ b/libs/accounts/src/lib/accounts-table.tsx @@ -31,9 +31,9 @@ import BreakdownTable from './breakdown-table'; interface AccountsTableProps extends AgGridReactProps { partyId: string; - onClickAsset: (value?: string | Asset) => void; - onClickWithdraw?: (value?: Asset) => void; - onClickDeposit?: (value?: Asset) => void; + onClickAsset: (asset?: string | Asset) => void; + onClickWithdraw?: (assetId?: string) => void; + onClickDeposit?: (assetId?: string) => void; } export const progressBarValueFormatter = ({ @@ -194,9 +194,13 @@ export const AccountsTable = ({ maxWidth={200} cellRenderer={({ data }: GroupCellRendererParams) => { return ( - ); @@ -211,7 +215,9 @@ export const AccountsTable = ({ diff --git a/libs/deposits/src/lib/deposit-form.tsx b/libs/deposits/src/lib/deposit-form.tsx index 5cb459bc7..fcc0bd7bb 100644 --- a/libs/deposits/src/lib/deposit-form.tsx +++ b/libs/deposits/src/lib/deposit-form.tsx @@ -50,7 +50,6 @@ export interface DepositFormProps { deposited: BigNumber | undefined; allowance: BigNumber | undefined; isFaucetable?: boolean; - assetId?: string; } export const DepositForm = ({ @@ -65,7 +64,6 @@ export const DepositForm = ({ requestFaucet, allowance, isFaucetable, - assetId, }: DepositFormProps) => { const { setAssetDetailsDialogOpen, setAssetDetailsDialogSymbol } = useAssetDetailsDialogStore(); @@ -82,7 +80,7 @@ export const DepositForm = ({ defaultValues: { from: account, to: keypair?.pub, - asset: assetId, + asset: selectedAsset?.id || '', }, }); diff --git a/libs/deposits/src/lib/deposit-manager.tsx b/libs/deposits/src/lib/deposit-manager.tsx index 92ddd6a57..2813c2ecb 100644 --- a/libs/deposits/src/lib/deposit-manager.tsx +++ b/libs/deposits/src/lib/deposit-manager.tsx @@ -4,7 +4,7 @@ import sortBy from 'lodash/sortBy'; import { useSubmitApproval } from './use-submit-approval'; import { useSubmitFaucet } from './use-submit-faucet'; import { useDepositStore } from './deposit-store'; -import { useCallback } from 'react'; +import { useCallback, useEffect } from 'react'; import { useDepositBalances } from './use-deposit-balances'; import type { Asset } from '@vegaprotocol/react-helpers'; @@ -14,13 +14,33 @@ interface DepositManagerProps { isFaucetable: boolean; } +const useDepositAsset = (assets: Asset[], assetId?: string) => { + const { asset, balance, allowance, deposited, max, update } = + useDepositStore(); + + const handleSelectAsset = useCallback( + (id: string) => { + const asset = assets.find((a) => a.id === id); + update({ asset }); + }, + [assets, update] + ); + + useEffect(() => { + handleSelectAsset(assetId || ''); + }, [assetId, handleSelectAsset]); + + return { asset, balance, allowance, deposited, max, handleSelectAsset }; +}; + export const DepositManager = ({ assetId, assets, isFaucetable, }: DepositManagerProps) => { - const { asset, balance, allowance, deposited, max, update } = - useDepositStore(); + const { asset, balance, allowance, deposited, max, handleSelectAsset } = + useDepositAsset(assets, assetId); + useDepositBalances(isFaucetable); // Set up approve transaction @@ -32,14 +52,6 @@ export const DepositManager = ({ // Set up faucet transaction const faucet = useSubmitFaucet(); - const handleSelectAsset = useCallback( - (id: string) => { - const asset = assets.find((a) => a.id === id); - update({ asset }); - }, - [assets, update] - ); - return ( <> ) => void; } -export const useDepositStore = create((set: SetState) => ({ +export const useDepositStore = create((set) => ({ balance: new BigNumber(0), allowance: new BigNumber(0), deposited: new BigNumber(0), diff --git a/libs/deposits/src/lib/use-deposit-balances.ts b/libs/deposits/src/lib/use-deposit-balances.ts index d50defcc8..3de32d65e 100644 --- a/libs/deposits/src/lib/use-deposit-balances.ts +++ b/libs/deposits/src/lib/use-deposit-balances.ts @@ -9,7 +9,7 @@ import { useGetDepositedAmount } from './use-get-deposited-amount'; import { isAssetTypeERC20 } from '@vegaprotocol/react-helpers'; /** - * Hook which fetches all the balances required for despoiting + * Hook which fetches all the balances required for depositing * whenever the asset changes in the form */ export const useDepositBalances = (isFaucetable: boolean) => { diff --git a/libs/withdraws/src/lib/withdraw-form.tsx b/libs/withdraws/src/lib/withdraw-form.tsx index 5d2518b59..64a27d4fd 100644 --- a/libs/withdraws/src/lib/withdraw-form.tsx +++ b/libs/withdraws/src/lib/withdraw-form.tsx @@ -36,11 +36,9 @@ export interface WithdrawFormProps { delay: number | undefined; onSelectAsset: (assetId: string) => void; submitWithdraw: (withdrawal: WithdrawalArgs) => void; - assetId?: string; } export const WithdrawForm = ({ - assetId, assets, balance, min, @@ -60,7 +58,7 @@ export const WithdrawForm = ({ formState: { errors }, } = useForm({ defaultValues: { - asset: assetId, + asset: selectedAsset?.id || '', to: address, }, }); diff --git a/libs/withdraws/src/lib/withdraw-manager.tsx b/libs/withdraws/src/lib/withdraw-manager.tsx index 876bf25ea..0ad3d0ebb 100644 --- a/libs/withdraws/src/lib/withdraw-manager.tsx +++ b/libs/withdraws/src/lib/withdraw-manager.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import { useCallback, useEffect } from 'react'; import sortBy from 'lodash/sortBy'; import { WithdrawForm } from './withdraw-form'; import type { WithdrawalArgs } from './use-create-withdraw'; @@ -12,19 +12,11 @@ import { captureException } from '@sentry/react'; import { useGetWithdrawDelay } from './use-get-withdraw-delay'; import { useWithdrawStore } from './withdraw-store'; -export interface WithdrawManagerProps { - assets: Asset[]; - accounts: Account[]; - submit: (args: WithdrawalArgs) => void; - assetId?: string; -} - -export const WithdrawManager = ({ - assets, - accounts, - submit, - assetId, -}: WithdrawManagerProps) => { +const useWithdrawAsset = ( + assets: Asset[], + accounts: Account[], + assetId?: string +) => { const { asset, balance, min, threshold, delay, update } = useWithdrawStore(); const getThreshold = useGetWithdrawThreshold(); const getDelay = useGetWithdrawDelay(); @@ -65,9 +57,30 @@ export const WithdrawManager = ({ [accounts, assets, update, getThreshold, getDelay] ); + useEffect(() => { + handleSelectAsset(assetId || ''); + }, [assetId, handleSelectAsset]); + + return { asset, balance, min, threshold, delay, handleSelectAsset }; +}; + +export interface WithdrawManagerProps { + assets: Asset[]; + accounts: Account[]; + submit: (args: WithdrawalArgs) => void; + assetId?: string; +} + +export const WithdrawManager = ({ + assets, + accounts, + submit, + assetId, +}: WithdrawManagerProps) => { + const { asset, balance, min, threshold, delay, handleSelectAsset } = + useWithdrawAsset(assets, accounts, assetId); return ( ) => void; } -export const useWithdrawStore = create((set: SetState) => ({ +export const useWithdrawStore = create((set) => ({ asset: undefined, balance: new BigNumber(0), min: new BigNumber(0),