feat(trading): improve desposit and withraw asset selection (#5493)

apps/trading/client-pages/market/market.tsx

@@ -72,17 +72,14 @@ export const MarketPage = () => {
   const { data, loading } = useMarket(marketId);
 
   useEffect(() => {
-    if (data?.id && data.id !== lastMarketId && !closed) {
+    if (data?.id && data.id !== lastMarketId) {
       update({ marketId: data.id });
     }
   }, [update, lastMarketId, data?.id]);
 
   useEffect(() => {
     if (largeScreen && view === undefined) {
-      setViews(
-        { type: closed ? ViewType.Info : ViewType.Order },
-        currentRouteId
-      );
+      setViews({ type: ViewType.Order }, currentRouteId);
     }
   }, [setViews, view, currentRouteId, largeScreen]);
 

apps/trading/components/accounts-container/accounts-container.tsx

@@ -13,6 +13,7 @@ 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';
+import { usePersistentDepositStore } from '@vegaprotocol/deposits';
 
 export const AccountsContainer = ({
   pinnedAsset,
@@ -25,6 +26,7 @@ export const AccountsContainer = ({
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
   const currentRouteId = useGetCurrentRouteId();
   const setViews = useSidebar((store) => store.setViews);
+  const setDepositAsset = usePersistentDepositStore((store) => store.saveValue);
 
   const gridStore = useAccountStore((store) => store.gridStore);
   const updateGridStore = useAccountStore((store) => store.updateGridStore);
@@ -55,7 +57,10 @@ export const AccountsContainer = ({
         setViews({ type: ViewType.Withdraw, assetId }, currentRouteId);
       }}
       onClickDeposit={(assetId) => {
-        setViews({ type: ViewType.Deposit, assetId }, currentRouteId);
+        setViews({ type: ViewType.Deposit }, currentRouteId);
+        if (assetId) {
+          setDepositAsset({ assetId });
+        }
       }}
       onClickTransfer={(assetId) => {
         setViews({ type: ViewType.Transfer, assetId }, currentRouteId);

libs/deposits/src/lib/deposit-manager.tsx

@@ -5,7 +5,7 @@ import { prepend0x } from '@vegaprotocol/smart-contracts';
 import sortBy from 'lodash/sortBy';
 import { useSubmitApproval } from './use-submit-approval';
 import { useSubmitFaucet } from './use-submit-faucet';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useDepositBalances } from './use-deposit-balances';
 import type { Asset } from '@vegaprotocol/assets';
 import {
@@ -30,7 +30,7 @@ export const DepositManager = ({
   const { config } = useEthereumConfig();
   const [persistentDeposit, savePersistentDeposit] =
     usePersistentDeposit(initialAssetId);
-  const [assetId, setAssetId] = useState(persistentDeposit?.assetId);
+  const assetId = persistentDeposit?.assetId;
   const asset = assets.find((a) => a.id === assetId);
   const bridgeContract = useBridgeContract();
 
@@ -70,18 +70,19 @@ export const DepositManager = ({
     [savePersistentDeposit, persistentDeposit]
   );
 
+  useEffect(() => {
+    // When we change asset, also clear the tracked faucet/approve transactions so
+    // we dont render stale UI
+    approve.reset();
+    faucet.reset();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [assetId]);
+
   return (
     <DepositForm
       selectedAsset={asset}
       onDisconnect={reset}
-      onSelectAsset={(id) => {
-        setAssetId(id);
-        savePersistentDeposit({ assetId: id });
-        // When we change asset, also clear the tracked faucet/approve transactions so
-        // we dont render stale UI
-        approve.reset();
-        faucet.reset();
-      }}
+      onSelectAsset={(assetId) => savePersistentDeposit({ assetId })}
       handleAmountChange={onAmountChange}
       assets={sortBy(assets, 'name')}
       submitApprove={approve.perform}

libs/deposits/src/lib/index.ts

@@ -13,3 +13,4 @@ export * from './use-get-deposit-maximum';
 export * from './use-get-deposited-amount';
 export * from './use-submit-approval';
 export * from './use-submit-faucet';
+export * from './use-persistent-deposit';

libs/deposits/src/lib/use-persistent-deposit.ts

@@ -10,7 +10,7 @@ interface PersistedDeposit {
 }
 type PersistedDepositData = Record<string, PersistedDeposit>;
 
-const usePersistentDepositStore = create<{
+export const usePersistentDepositStore = create<{
   deposits: PersistedDepositData;
   saveValue: (entry: PersistedDeposit) => void;
   lastVisited?: PersistedDeposit;

libs/withdraws/src/lib/use-withdraw-asset.tsx

@@ -3,7 +3,7 @@ import { addDecimal } from '@vegaprotocol/utils';
 import { localLoggerFactory } from '@vegaprotocol/logger';
 import * as Schema from '@vegaprotocol/types';
 import BigNumber from 'bignumber.js';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import type { AccountFieldsFragment } from '@vegaprotocol/accounts';
 import {
   useGetWithdrawDelay,
@@ -18,6 +18,7 @@ export const useWithdrawAsset = (
   assetId?: string
 ) => {
   const { asset, balance, min, threshold, delay, update } = useWithdrawStore();
+  const currentAssetId = useRef(asset?.id);
   const getThreshold = useGetWithdrawThreshold();
   const getDelay = useGetWithdrawDelay();
   const { param } = useNetworkParam(
@@ -54,6 +55,8 @@ export const useWithdrawAsset = (
             )
           )
         : new BigNumber(0);
+      currentAssetId.current = asset?.id;
+      update({ asset, balance, min, threshold: undefined, delay: undefined });
       // Query collateral bridge for threshold for selected asset
       // and subsequent delay if withdrawal amount is larger than it
       let threshold = new BigNumber(0);
@@ -66,9 +69,14 @@ export const useWithdrawAsset = (
         if (result[1] != null) delay = result[1];
       } catch (err) {
         logger.error('get withdraw asset data', err);
+      } finally {
+        if (currentAssetId.current === asset?.id) {
+          update({
+            threshold,
+            delay,
+          });
+        }
       }
-
-      update({ asset, balance, min, threshold, delay });
     },
     [
       assets,

libs/withdraws/src/lib/withdraw-form.tsx

@@ -239,7 +239,7 @@ export const WithdrawForm = ({
             </TradingInputError>
           )}
         </TradingFormGroup>
-        {selectedAsset && threshold && (
+        {selectedAsset && (
           <div className="mb-4">
             <WithdrawLimits
               amount={amount}

libs/withdraws/src/lib/withdraw-limits.tsx

@@ -12,7 +12,7 @@ import { useT } from './use-t';
 
 interface WithdrawLimitsProps {
   amount: string;
-  threshold: BigNumber;
+  threshold: BigNumber | undefined;
   balance: BigNumber;
   delay: number | undefined;
   asset: Asset;
@@ -27,7 +27,7 @@ export const WithdrawLimits = ({
 }: WithdrawLimitsProps) => {
   const t = useT();
   const delayTime =
-    new BigNumber(amount).isGreaterThan(threshold) && delay
+    threshold && delay && new BigNumber(amount).isGreaterThan(threshold)
       ? formatDistanceToNow(Date.now() + delay * 1000)
       : t('None');
 
@@ -48,21 +48,23 @@ export const WithdrawLimits = ({
         '-'
       ),
     },
-  ];
-  if (threshold.isFinite()) {
-    limits.push({
+    {
       key: 'WITHDRAWAL_THRESHOLD',
       label: t('Delayed withdrawal threshold'),
       tooltip: WITHDRAW_THRESHOLD_TOOLTIP_TEXT,
       rawValue: threshold,
-      value: <CompactNumber number={threshold} decimals={asset.decimals} />,
-    });
-  }
-  limits.push({
-    key: 'DELAY_TIME',
-    label: t('Delay time'),
-    value: delayTime,
-  });
+      value: threshold ? (
+        <CompactNumber number={threshold} decimals={asset.decimals} />
+      ) : (
+        '-'
+      ),
+    },
+    {
+      key: 'DELAY_TIME',
+      label: t('Delay time'),
+      value: threshold && delay ? delayTime : '-',
+    },
+  ];
 
   return (
     <KeyValueTable>