diff --git a/apps/trading/client-pages/market/market.tsx b/apps/trading/client-pages/market/market.tsx index 5b87a5a25..671b3e96e 100644 --- a/apps/trading/client-pages/market/market.tsx +++ b/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]); diff --git a/apps/trading/components/accounts-container/accounts-container.tsx b/apps/trading/components/accounts-container/accounts-container.tsx index 2241ae99a..0e5886d63 100644 --- a/apps/trading/components/accounts-container/accounts-container.tsx +++ b/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); diff --git a/libs/deposits/src/lib/deposit-manager.tsx b/libs/deposits/src/lib/deposit-manager.tsx index 05869eb05..9aeb70031 100644 --- a/libs/deposits/src/lib/deposit-manager.tsx +++ b/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 ( { - 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} diff --git a/libs/deposits/src/lib/index.ts b/libs/deposits/src/lib/index.ts index 0473f7bc5..c9c1b867a 100644 --- a/libs/deposits/src/lib/index.ts +++ b/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'; diff --git a/libs/deposits/src/lib/use-persistent-deposit.ts b/libs/deposits/src/lib/use-persistent-deposit.ts index db58bb662..d99abc34b 100644 --- a/libs/deposits/src/lib/use-persistent-deposit.ts +++ b/libs/deposits/src/lib/use-persistent-deposit.ts @@ -10,7 +10,7 @@ interface PersistedDeposit { } type PersistedDepositData = Record; -const usePersistentDepositStore = create<{ +export const usePersistentDepositStore = create<{ deposits: PersistedDepositData; saveValue: (entry: PersistedDeposit) => void; lastVisited?: PersistedDeposit; diff --git a/libs/withdraws/src/lib/use-withdraw-asset.tsx b/libs/withdraws/src/lib/use-withdraw-asset.tsx index 4a635d661..26c5f26dd 100644 --- a/libs/withdraws/src/lib/use-withdraw-asset.tsx +++ b/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, diff --git a/libs/withdraws/src/lib/withdraw-form.tsx b/libs/withdraws/src/lib/withdraw-form.tsx index e225dbd1f..126ec6d6e 100644 --- a/libs/withdraws/src/lib/withdraw-form.tsx +++ b/libs/withdraws/src/lib/withdraw-form.tsx @@ -239,7 +239,7 @@ export const WithdrawForm = ({ )} - {selectedAsset && threshold && ( + {selectedAsset && (
{ 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: , - }); - } - limits.push({ - key: 'DELAY_TIME', - label: t('Delay time'), - value: delayTime, - }); + value: threshold ? ( + + ) : ( + '-' + ), + }, + { + key: 'DELAY_TIME', + label: t('Delay time'), + value: threshold && delay ? delayTime : '-', + }, + ]; return (