diff --git a/apps/trading/client-pages/deposit/deposit.tsx b/apps/trading/client-pages/deposit/deposit.tsx index 2e60b8b08..9a826a002 100644 --- a/apps/trading/client-pages/deposit/deposit.tsx +++ b/apps/trading/client-pages/deposit/deposit.tsx @@ -1,4 +1,4 @@ -import type { ReactNode} from 'react'; +import type { ReactNode } from 'react'; import { useCallback, useEffect } from 'react'; import { useState } from 'react'; import { useSearchParams } from 'react-router-dom'; @@ -29,6 +29,9 @@ import { import BigNumber from 'bignumber.js'; import { Token } from '@vegaprotocol/smart-contracts'; import { MaxUint256 } from '@ethersproject/constants'; +import { useTopTradedMarkets } from '../../lib/hooks/use-top-traded-markets'; +import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/markets'; +import { getAsset } from '@vegaprotocol/markets'; export const Deposit = () => { return ( @@ -48,6 +51,7 @@ const DepositFlowContainer = () => { const assetId = searchParams.get('assetId') || undefined; const { data } = useAssetsDataProvider(); const { config } = useEthereumConfig(); + const { data: markets } = useTopTradedMarkets(); if (!data) return null; if (!config) return null; @@ -57,6 +61,7 @@ const DepositFlowContainer = () => { assets={data} assetId={assetId} bridgeAddress={config.collateral_bridge_contract.address} + markets={markets || []} /> ); }; @@ -79,10 +84,12 @@ const DepositFlow = ({ assets, assetId, bridgeAddress, + markets, }: { assets: AssetFieldsFragment[]; assetId?: string; bridgeAddress: string; + markets: MarketMaybeWithDataAndCandles[]; }) => { const { provider, account } = useWeb3React(); const [state, setState] = useState(() => { @@ -156,6 +163,7 @@ const DepositFlow = ({ asset={state.asset} assets={assets} onSelect={handleAssetChanged} + markets={markets} /> @@ -196,33 +204,46 @@ const AssetSelector = ({ asset, assets, onSelect, + markets, }: { asset?: AssetFieldsFragment; assets: AssetFieldsFragment[]; onSelect: (asset?: AssetFieldsFragment) => void; + markets: MarketMaybeWithDataAndCandles[]; }) => { const [search, setSearch] = useState(''); + const getTopMarkets = (a: AssetFieldsFragment) => { + return markets + .filter((m) => { + const marketAsset = getAsset(m); + return marketAsset.id === a.id; + }) + .slice(0, 4); + }; if (asset && isAssetTypeERC20(asset)) { return ( -
- -

- {asset.symbol}{' '} - ({truncateByChars(asset.source.contractAddress)}) -

- onSelect(undefined)} - size="small" - className="ml-auto" - > - Change asset - +
+
+ +
+
+

+ {asset.symbol}{' '} + ({truncateByChars(asset.source.contractAddress)}) +

+ +
+ onSelect(undefined)} size="small"> + Change asset + +
+
); } @@ -259,7 +280,7 @@ const AssetSelector = ({ if (!isAssetTypeERC20(asset)) return null; return (
-
+
- +
+ + +
); @@ -467,3 +491,24 @@ const SendDeposit = ({
); }; + +const Markets = ({ markets }: { markets: MarketMaybeWithDataAndCandles[] }) => { + return ( +
+ {markets.length ? ( + markets.map((m) => { + return ( +
+ {m.tradableInstrument.instrument.code} {m.data?.markPrice} +
+ ); + }) + ) : ( +

No markets

+ )} +
+ ); +};