feat: #847 added useDepositAsset and useWithdrawAsset

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<Asset | null>(null);
+  const [assetId, setAssetId] = useState<string>();
   return (
     <>
       <AccountsTable
@@ -63,15 +62,22 @@ export const AssetAccountTable = ({ partyId }: { partyId: string }) => {
             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);
+        }}
       />
       <WithdrawalDialogs
-        asset={asset || undefined}
+        assetId={assetId}
         withdrawDialog={withdrawDialog}
         setWithdrawDialog={setWithdrawDialog}
       />
       <DepositDialog
+        assetId={assetId}
         depositDialog={depositDialog}
         setDepositDialog={setDepositDialog}
       />

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(),

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 (
-              <Button size="xs" data-testid="deposit" onClick={() => {
-                onClickDeposit && onClickDeposit(data.asset)
-              }}>
+              <Button
+                size="xs"
+                data-testid="deposit"
+                onClick={() => {
+                  onClickDeposit && onClickDeposit(data.asset.id);
+                }}
+              >
                 {t('Deposit')}
               </Button>
             );
@@ -211,7 +215,9 @@ export const AccountsTable = ({
               <Button
                 size="xs"
                 data-testid="withdraw"
-                onClick={() => onClickWithdraw && onClickWithdraw(data.asset)}
+                onClick={() =>
+                  onClickWithdraw && onClickWithdraw(data.asset.id)
+                }
               >
                 {t('Withdraw')}
               </Button>

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 || '',
     },
   });
 

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 (
     <>
       <DepositForm

libs/deposits/src/lib/deposit-store.ts

@@ -1,6 +1,5 @@
 import type { Asset } from '@vegaprotocol/react-helpers';
 import BigNumber from 'bignumber.js';
-import type { SetState } from 'zustand';
 import create from 'zustand';
 
 interface DepositStore {
@@ -12,7 +11,7 @@ interface DepositStore {
   update: (state: Partial<DepositStore>) => void;
 }
 
-export const useDepositStore = create((set: SetState<DepositStore>) => ({
+export const useDepositStore = create<DepositStore>((set) => ({
   balance: new BigNumber(0),
   allowance: new BigNumber(0),
   deposited: new BigNumber(0),

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) => {

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<FormFields>({
     defaultValues: {
-      asset: assetId,
+      asset: selectedAsset?.id || '',
       to: address,
     },
   });

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 (
     <WithdrawForm
-      assetId={assetId}
       selectedAsset={asset}
       onSelectAsset={handleSelectAsset}
       assets={sortBy(assets, 'name')}

libs/withdraws/src/lib/withdraw-store.ts

@@ -1,9 +1,8 @@
 import type { Asset } from '@vegaprotocol/react-helpers';
 import BigNumber from 'bignumber.js';
-import type { SetState } from 'zustand';
 import create from 'zustand';
 
-interface WithdrawStore {
+export interface WithdrawStore {
   asset: Asset | undefined;
   balance: BigNumber;
   min: BigNumber;
@@ -12,7 +11,7 @@ interface WithdrawStore {
   update: (state: Partial<WithdrawStore>) => void;
 }
 
-export const useWithdrawStore = create((set: SetState<WithdrawStore>) => ({
+export const useWithdrawStore = create<WithdrawStore>((set) => ({
   asset: undefined,
   balance: new BigNumber(0),
   min: new BigNumber(0),