LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

fix(#2209): make asset dialog use asset id rather than symbol (#2217)

Browse Source 
* fix: make asset dialog use asset id rather than symbol

* fix: tests that relied on asset symbol rather than id

* chore: add missing asset id to mocks

* chore: add asset id to mocks for e2e tests

* chore: add missing asset id for orders mock

* chore: fix console-lite build

* chore: add missing asset ids to mocks
This commit is contained in:
Matthew Russell 2022-11-23 17:42:22 -06:00 committed by GitHub
parent ad7f263811
commit 9dfce9e723
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 111 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/console-lite-e2e/src/support/mocks/commons.ts
View File

@ -116,7 +116,12 @@ export const protoMarket: Market = {
product: { product: {
__typename: 'Future', __typename: 'Future',
quoteName: 'DAI', quoteName: 'DAI',
settlementAsset: { symbol: 'tDAI', __typename: 'Asset', decimals: 5 }, settlementAsset: {
__typename: 'Asset',
id: 'asset-id',
symbol: 'tDAI',
decimals: 5,
},
}, },
__typename: 'Instrument', __typename: 'Instrument',
}, },

51
apps/console-lite-e2e/src/support/mocks/generate-markets.ts
View File

@ -39,8 +39,9 @@ export const generateSimpleMarkets = (): MarketsQuery => {
__typename: 'Future', __typename: 'Future',
quoteName: 'USD', quoteName: 'USD',
settlementAsset: { settlementAsset: {
symbol: 'XYZalpha',
__typename: 'Asset', __typename: 'Asset',
id: 'asset-XYZalpha',
symbol: 'XYZalpha',
decimals: 5, decimals: 5,
}, },
}, },
@ -73,8 +74,9 @@ export const generateSimpleMarkets = (): MarketsQuery => {
__typename: 'Future', __typename: 'Future',
quoteName: 'USD', quoteName: 'USD',
settlementAsset: { settlementAsset: {
symbol: 'XYZbeta',
__typename: 'Asset', __typename: 'Asset',
id: 'asset-XYZbeta',
symbol: 'XYZbeta',
decimals: 5, decimals: 5,
}, },
}, },
@ -108,8 +110,9 @@ export const generateSimpleMarkets = (): MarketsQuery => {
__typename: 'Future', __typename: 'Future',
quoteName: 'DAI', quoteName: 'DAI',
settlementAsset: { settlementAsset: {
symbol: 'tDAI',
__typename: 'Asset', __typename: 'Asset',
id: 'asset-tDAI',
symbol: 'tDAI',
decimals: 5, decimals: 5,
}, },
}, },
@ -142,8 +145,9 @@ export const generateSimpleMarkets = (): MarketsQuery => {
__typename: 'Future', __typename: 'Future',
quoteName: 'USD', quoteName: 'USD',
settlementAsset: { settlementAsset: {
symbol: 'XYZbeta',
__typename: 'Asset', __typename: 'Asset',
id: 'asset-XYZbeta',
symbol: 'XYZbeta',
decimals: 5, decimals: 5,
}, },
}, },
@ -175,8 +179,9 @@ export const generateSimpleMarkets = (): MarketsQuery => {
__typename: 'Future', __typename: 'Future',
quoteName: 'USD', quoteName: 'USD',
settlementAsset: { settlementAsset: {
symbol: 'tUSDC',
__typename: 'Asset', __typename: 'Asset',
id: 'asset-tUSDC',
symbol: 'tUSDC',
decimals: 5, decimals: 5,
}, },
}, },
@ -210,8 +215,9 @@ export const generateSimpleMarkets = (): MarketsQuery => {
__typename: 'Future', __typename: 'Future',
quoteName: 'USD', quoteName: 'USD',
settlementAsset: { settlementAsset: {
symbol: 'tBTC',
__typename: 'Asset', __typename: 'Asset',
id: 'asset-tBTC',
symbol: 'tBTC',
decimals: 5, decimals: 5,
}, },
}, },
@ -244,8 +250,9 @@ export const generateSimpleMarkets = (): MarketsQuery => {
__typename: 'Future', __typename: 'Future',
quoteName: 'USD', quoteName: 'USD',
settlementAsset: { settlementAsset: {
symbol: 'XYZgamma',
__typename: 'Asset', __typename: 'Asset',
id: 'asset-XYZgamma',
symbol: 'XYZgamma',
decimals: 5, decimals: 5,
}, },
}, },
@ -279,8 +286,9 @@ export const generateSimpleMarkets = (): MarketsQuery => {
__typename: 'Future', __typename: 'Future',
quoteName: 'USD', quoteName: 'USD',
settlementAsset: { settlementAsset: {
symbol: 'tBTC',
__typename: 'Asset', __typename: 'Asset',
id: 'asset-tBTC',
symbol: 'tBTC',
decimals: 5, decimals: 5,
}, },
}, },
@ -314,8 +322,9 @@ export const generateSimpleMarkets = (): MarketsQuery => {
__typename: 'Future', __typename: 'Future',
quoteName: 'BTC', quoteName: 'BTC',
settlementAsset: { settlementAsset: {
symbol: 'tBTC',
__typename: 'Asset', __typename: 'Asset',
id: 'asset-tBTC',
symbol: 'tBTC',
decimals: 5, decimals: 5,
}, },
}, },
@ -350,8 +359,9 @@ export const generateSimpleMarkets = (): MarketsQuery => {
__typename: 'Future', __typename: 'Future',
quoteName: 'USD', quoteName: 'USD',
settlementAsset: { settlementAsset: {
symbol: 'tUSDC',
__typename: 'Asset', __typename: 'Asset',
id: 'asset-tUSDC',
symbol: 'tUSDC',
decimals: 5, decimals: 5,
}, },
}, },
@ -386,8 +396,9 @@ export const generateSimpleMarkets = (): MarketsQuery => {
__typename: 'Future', __typename: 'Future',
quoteName: 'EURO', quoteName: 'EURO',
settlementAsset: { settlementAsset: {
symbol: 'tEURO',
__typename: 'Asset', __typename: 'Asset',
id: 'asset-tEURO',
symbol: 'tEURO',
decimals: 5, decimals: 5,
}, },
}, },
@ -420,8 +431,9 @@ export const generateSimpleMarkets = (): MarketsQuery => {
__typename: 'Future', __typename: 'Future',
quoteName: 'USD', quoteName: 'USD',
settlementAsset: { settlementAsset: {
symbol: 'XYZgamma',
__typename: 'Asset', __typename: 'Asset',
id: 'asset-XYZgamma',
symbol: 'XYZgamma',
decimals: 5, decimals: 5,
}, },
}, },
@ -455,8 +467,9 @@ export const generateSimpleMarkets = (): MarketsQuery => {
__typename: 'Future', __typename: 'Future',
quoteName: 'USD', quoteName: 'USD',
settlementAsset: { settlementAsset: {
symbol: 'tBTC',
__typename: 'Asset', __typename: 'Asset',
id: 'asset-tBTC',
symbol: 'tBTC',
decimals: 5, decimals: 5,
}, },
}, },
@ -490,8 +503,9 @@ export const generateSimpleMarkets = (): MarketsQuery => {
__typename: 'Future', __typename: 'Future',
quoteName: 'USD', quoteName: 'USD',
settlementAsset: { settlementAsset: {
symbol: 'tBTC',
__typename: 'Asset', __typename: 'Asset',
id: 'asset-tBTC',
symbol: 'tBTC',
decimals: 5, decimals: 5,
}, },
}, },
@ -1240,9 +1254,10 @@ export const generatePositionsMarkets = () => {
}, },
product: { product: {
settlementAsset: { settlementAsset: {
__typename: 'Asset',
id: 'asset-tDAI',
symbol: 'tDAI', symbol: 'tDAI',
decimals: 5, decimals: 5,
__typename: 'Asset',
}, },
quoteName: 'DAI', quoteName: 'DAI',
__typename: 'Future', __typename: 'Future',
@ -1294,9 +1309,10 @@ export const generatePositionsMarkets = () => {
}, },
product: { product: {
settlementAsset: { settlementAsset: {
__typename: 'Asset',
id: 'asset-tDAI',
symbol: 'tDAI', symbol: 'tDAI',
decimals: 5, decimals: 5,
__typename: 'Asset',
}, },
quoteName: 'DAI', quoteName: 'DAI',
__typename: 'Future', __typename: 'Future',
@ -1349,9 +1365,10 @@ export const generatePositionsMarkets = () => {
}, },
product: { product: {
settlementAsset: { settlementAsset: {
__typename: 'Asset',
id: 'asset-tEURO',
symbol: 'tEURO', symbol: 'tEURO',
decimals: 5, decimals: 5,
__typename: 'Asset',
}, },
quoteName: 'EURO', quoteName: 'EURO',
__typename: 'Future', __typename: 'Future',

4
apps/console-lite/src/app/components/portfolio/accounts/accounts.tsx
View File

@ -16,7 +16,7 @@ import { useAccountColumnDefinitions } from '.';
const AccountsManager = () => { const AccountsManager = () => {
const { partyId = '' } = useOutletContext<{ partyId: string }>(); const { partyId = '' } = useOutletContext<{ partyId: string }>();
const { isOpen, symbol, setOpen } = useAssetDetailsDialogStore(); const { isOpen, id, setOpen } = useAssetDetailsDialogStore();
const gridRef = useRef<AgGridReact | null>(null); const gridRef = useRef<AgGridReact | null>(null);
const dataRef = useRef<AccountFields[] | null>(null); const dataRef = useRef<AccountFields[] | null>(null);
const variables = useMemo(() => ({ partyId }), [partyId]); const variables = useMemo(() => ({ partyId }), [partyId]);
@ -66,7 +66,7 @@ const AccountsManager = () => {
/> />
</AsyncRenderer> </AsyncRenderer>
<AssetDetailsDialog <AssetDetailsDialog
assetSymbol={symbol} assetId={id}
open={isOpen} open={isOpen}
onChange={(open) => setOpen(open)} onChange={(open) => setOpen(open)}
/> />

4
apps/console-lite/src/app/components/portfolio/accounts/use-column-definitions.tsx
View File

@ -15,14 +15,14 @@ const useAccountColumnDefinitions = () => {
field: 'asset.symbol', field: 'asset.symbol',
headerClass: 'uppercase justify-start', headerClass: 'uppercase justify-start',
cellClass: 'uppercase flex h-full items-center md:pl-4', cellClass: 'uppercase flex h-full items-center md:pl-4',
cellRenderer: ({ value }: GroupCellRendererParams) => cellRenderer: ({ value, data }: GroupCellRendererParams) =>
value && value.length > 0 ? ( value && value.length > 0 ? (
<div className="md:pl-4 grid h-full items-center" title={value}> <div className="md:pl-4 grid h-full items-center" title={value}>
<div className="truncate min-w-0"> <div className="truncate min-w-0">
<button <button
className="hover:underline" className="hover:underline"
onClick={() => { onClick={() => {
open(value); open(data.asset.id);
}} }}
> >
{value} {value}

4
apps/trading-e2e/src/support/mocks/generate-markets.ts
View File

@ -44,6 +44,7 @@ export const generateMarkets = (
}, },
product: { product: {
settlementAsset: { settlementAsset: {
id: 'asset-0',
symbol: 'tDAI', symbol: 'tDAI',
decimals: 5, decimals: 5,
__typename: 'Asset', __typename: 'Asset',
@ -88,6 +89,7 @@ export const generateMarkets = (
}, },
product: { product: {
settlementAsset: { settlementAsset: {
id: 'asset-1',
symbol: 'XYZalpha', symbol: 'XYZalpha',
decimals: 5, decimals: 5,
__typename: 'Asset', __typename: 'Asset',
@ -132,6 +134,7 @@ export const generateMarkets = (
}, },
product: { product: {
settlementAsset: { settlementAsset: {
id: 'asset-2',
symbol: 'tUSDC', symbol: 'tUSDC',
decimals: 5, decimals: 5,
__typename: 'Asset', __typename: 'Asset',
@ -176,6 +179,7 @@ export const generateMarkets = (
}, },
product: { product: {
settlementAsset: { settlementAsset: {
id: 'asset-3',
symbol: 'tBTC', symbol: 'tBTC',
decimals: 5, decimals: 5,
__typename: 'Asset', __typename: 'Asset',

9
apps/trading/client-pages/market/trade-grid.tsx
View File

@ -125,8 +125,7 @@ export const TradeMarketHeader = ({
const { VEGA_EXPLORER_URL } = useEnvironment(); const { VEGA_EXPLORER_URL } = useEnvironment();
const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore(); const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
const symbol = const asset = market?.tradableInstrument.instrument.product?.settlementAsset;
market?.tradableInstrument.instrument.product?.settlementAsset?.symbol;
const onCellClick: OnCellClickHandler = (e, kind, value) => { const onCellClick: OnCellClickHandler = (e, kind, value) => {
if (value && kind === ColumnKind.Asset) { if (value && kind === ColumnKind.Asset) {
@ -162,7 +161,7 @@ export const TradeMarketHeader = ({
<Last24hPriceChange marketId={market?.id} /> <Last24hPriceChange marketId={market?.id} />
<Last24hVolume marketId={market?.id} /> <Last24hVolume marketId={market?.id} />
<MarketTradingModeComponent marketId={market?.id} onSelect={onSelect} /> <MarketTradingModeComponent marketId={market?.id} onSelect={onSelect} />
{symbol ? ( {asset ? (
<HeaderStat <HeaderStat
heading={t('Settlement asset')} heading={t('Settlement asset')}
testId="market-settlement-asset" testId="market-settlement-asset"
@ -170,10 +169,10 @@ export const TradeMarketHeader = ({
<div> <div>
<ButtonLink <ButtonLink
onClick={(e) => { onClick={(e) => {
openAssetDetailsDialog(symbol, e.target as HTMLElement); openAssetDetailsDialog(asset.id, e.target as HTMLElement);
}} }}
> >
{symbol} {asset.symbol}
</ButtonLink> </ButtonLink>
</div> </div>
</HeaderStat> </HeaderStat>

5
apps/trading/components/accounts-container/accounts-container.tsx
View File

@ -2,7 +2,6 @@ import { useCallback } from 'react';
import { Button } from '@vegaprotocol/ui-toolkit'; import { Button } from '@vegaprotocol/ui-toolkit';
import { t } from '@vegaprotocol/react-helpers'; import { t } from '@vegaprotocol/react-helpers';
import { useWithdrawalDialog } from '@vegaprotocol/withdraws'; import { useWithdrawalDialog } from '@vegaprotocol/withdraws';
import type { AssetFieldsFragment } from '@vegaprotocol/assets';
import { useAssetDetailsDialogStore } from '@vegaprotocol/assets'; import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
import { Splash } from '@vegaprotocol/ui-toolkit'; import { Splash } from '@vegaprotocol/ui-toolkit';
import { useVegaWallet } from '@vegaprotocol/wallet'; import { useVegaWallet } from '@vegaprotocol/wallet';
@ -16,8 +15,8 @@ export const AccountsContainer = () => {
const openDepositDialog = useDepositDialog((store) => store.open); const openDepositDialog = useDepositDialog((store) => store.open);
const onClickAsset = useCallback( const onClickAsset = useCallback(
(value?: string | AssetFieldsFragment) => { (assetId?: string) => {
value && openAssetDetailsDialog(value); assetId && openAssetDetailsDialog(assetId);
}, },
[openAssetDetailsDialog] [openAssetDetailsDialog]
); );

6
apps/trading/components/select-market/select-market-columns.tsx
View File

@ -298,8 +298,7 @@ export const columns = (
onCellClick( onCellClick(
e, e,
ColumnKind.Asset, ColumnKind.Asset,
market.tradableInstrument.instrument.product.settlementAsset market.tradableInstrument.instrument.product.settlementAsset.id
.symbol
); );
}} }}
> >
@ -480,8 +479,7 @@ export const columnsPositionMarkets = (
onCellClick( onCellClick(
e, e,
ColumnKind.Asset, ColumnKind.Asset,
market.tradableInstrument.instrument.product.settlementAsset market.tradableInstrument.instrument.product.settlementAsset.id
.symbol
); );
}} }}
> >

2
apps/trading/components/select-market/select-market.spec.tsx
View File

@ -35,6 +35,7 @@ const MARKET_A: PartialMarket = {
quoteName: 'ABCDEF', quoteName: 'ABCDEF',
settlementAsset: { settlementAsset: {
__typename: 'Asset', __typename: 'Asset',
id: 'asset-ABC',
decimals: 2, decimals: 2,
symbol: 'ABC', symbol: 'ABC',
}, },
@ -103,6 +104,7 @@ const MARKET_B: PartialMarket = {
quoteName: 'XYZ', quoteName: 'XYZ',
settlementAsset: { settlementAsset: {
__typename: 'Asset', __typename: 'Asset',
id: 'asset-XYZ',
decimals: 2, decimals: 2,
symbol: 'XYZ', symbol: 'XYZ',
}, },

4
apps/trading/pages/dialogs-container.tsx
View File

@ -12,12 +12,12 @@ import { Web3ConnectUncontrolledDialog } from '@vegaprotocol/web3';
import { WelcomeNoticeDialog } from '../components/welcome-notice'; import { WelcomeNoticeDialog } from '../components/welcome-notice';
const DialogsContainer = () => { const DialogsContainer = () => {
const { isOpen, symbol, trigger, setOpen } = useAssetDetailsDialogStore(); const { isOpen, id, trigger, setOpen } = useAssetDetailsDialogStore();
return ( return (
<> <>
<VegaConnectDialog connectors={Connectors} /> <VegaConnectDialog connectors={Connectors} />
<AssetDetailsDialog <AssetDetailsDialog
assetSymbol={symbol} assetId={id}
trigger={trigger || null} trigger={trigger || null}
open={isOpen} open={isOpen}
onChange={setOpen} onChange={setOpen}

3
libs/accounts/src/lib/accounts-manager.tsx
View File

@ -1,4 +1,3 @@
import type { Asset } from '@vegaprotocol/assets';
import { useDataProvider } from '@vegaprotocol/react-helpers'; import { useDataProvider } from '@vegaprotocol/react-helpers';
import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
import type { AgGridReact } from 'ag-grid-react'; import type { AgGridReact } from 'ag-grid-react';
@ -10,7 +9,7 @@ import { AccountTable } from './accounts-table';
interface AccountManagerProps { interface AccountManagerProps {
partyId: string; partyId: string;
onClickAsset: (asset?: string | Asset) => void; onClickAsset: (assetId: string) => void;
onClickWithdraw?: (assetId?: string) => void; onClickWithdraw?: (assetId?: string) => void;
onClickDeposit?: (assetId?: string) => void; onClickDeposit?: (assetId?: string) => void;
} }

8
libs/accounts/src/lib/accounts-table.tsx
View File

@ -1,6 +1,5 @@
import { forwardRef, useState } from 'react'; import { forwardRef, useState } from 'react';
import type { ValueFormatterParams } from 'ag-grid-community'; import type { ValueFormatterParams } from 'ag-grid-community';
import type { Asset } from '@vegaprotocol/assets';
import { import {
addDecimalsFormatNumber, addDecimalsFormatNumber,
isNumeric, isNumeric,
@ -64,7 +63,7 @@ export interface Datasource extends IDatasource {
export interface AccountTableProps extends AgGridReactProps { export interface AccountTableProps extends AgGridReactProps {
rowData?: AccountFields[] | null; rowData?: AccountFields[] | null;
datasource?: Datasource; datasource?: Datasource;
onClickAsset: (asset: string | Asset) => void; onClickAsset: (assetId: string) => void;
onClickWithdraw?: (assetId: string) => void; onClickWithdraw?: (assetId: string) => void;
onClickDeposit?: (assetId: string) => void; onClickDeposit?: (assetId: string) => void;
} }
@ -98,12 +97,15 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
)} )}
cellRenderer={({ cellRenderer={({
value, value,
data,
}: VegaICellRendererParams<AccountFields, 'asset.symbol'>) => { }: VegaICellRendererParams<AccountFields, 'asset.symbol'>) => {
return value ? ( return value ? (
<ButtonLink <ButtonLink
data-testid="deposit" data-testid="deposit"
onClick={() => { onClick={() => {
onClickAsset(value); if (data) {
onClickAsset(data.asset.id);
}
}} }}
> >
{value} {value}

32
libs/assets/src/lib/asset-details-dialog.spec.tsx
View File

@ -49,14 +49,10 @@ const mocks = [
}, },
]; ];
const WrappedAssetDetailsDialog = ({ const WrappedAssetDetailsDialog = ({ assetId }: { assetId: string }) => (
assetSymbol,
}: {
assetSymbol: string;
}) => (
<MockedProvider mocks={mocks}> <MockedProvider mocks={mocks}>
<AssetDetailsDialog <AssetDetailsDialog
assetSymbol={assetSymbol} assetId={assetId}
open={true} open={true}
onChange={() => false} onChange={() => false}
></AssetDetailsDialog> ></AssetDetailsDialog>
@ -65,15 +61,18 @@ const WrappedAssetDetailsDialog = ({
describe('AssetDetailsDialog', () => { describe('AssetDetailsDialog', () => {
it('should show no data message given unknown asset symbol', async () => { it('should show no data message given unknown asset symbol', async () => {
render(<WrappedAssetDetailsDialog assetSymbol={'UNKNOWN_FOR_SURE'} />); render(<WrappedAssetDetailsDialog assetId={'UNKNOWN_FOR_SURE'} />);
expect((await screen.findByTestId('splash')).textContent).toContain( expect((await screen.findByTestId('splash')).textContent).toContain(
'No data' 'No data'
); );
}); });
const cases: [string, { key: AssetDetail; value: string }[]][] = [ const cases: [
string, // generated asset id
{ key: AssetDetail; value: string }[]
][] = [
[ [
'EA01', 'E-01',
[ [
{ key: AssetDetail.ID, value: 'E-01' }, { key: AssetDetail.ID, value: 'E-01' },
{ key: AssetDetail.TYPE, value: 'ERC20' }, { key: AssetDetail.TYPE, value: 'ERC20' },
@ -106,7 +105,7 @@ describe('AssetDetailsDialog', () => {
], ],
], ],
[ [
'BIA01', 'B-01',
[ [
{ key: AssetDetail.ID, value: 'B-01' }, { key: AssetDetail.ID, value: 'B-01' },
{ key: AssetDetail.TYPE, value: 'Builtin asset' }, { key: AssetDetail.TYPE, value: 'Builtin asset' },
@ -123,7 +122,7 @@ describe('AssetDetailsDialog', () => {
], ],
], ],
[ [
'BIA02', 'B-02',
[ [
{ key: AssetDetail.ID, value: 'B-02' }, { key: AssetDetail.ID, value: 'B-02' },
{ key: AssetDetail.TYPE, value: 'Builtin asset' }, { key: AssetDetail.TYPE, value: 'Builtin asset' },
@ -140,7 +139,7 @@ describe('AssetDetailsDialog', () => {
], ],
], ],
[ [
'BIA03', 'B-03',
[ [
{ key: AssetDetail.ID, value: 'B-03' }, { key: AssetDetail.ID, value: 'B-03' },
{ key: AssetDetail.TYPE, value: 'Builtin asset' }, { key: AssetDetail.TYPE, value: 'Builtin asset' },
@ -157,7 +156,7 @@ describe('AssetDetailsDialog', () => {
], ],
], ],
[ [
'BIA04', 'B-04',
[ [
{ key: AssetDetail.ID, value: 'B-04' }, { key: AssetDetail.ID, value: 'B-04' },
{ key: AssetDetail.TYPE, value: 'Builtin asset' }, { key: AssetDetail.TYPE, value: 'Builtin asset' },
@ -174,10 +173,11 @@ describe('AssetDetailsDialog', () => {
], ],
], ],
]; ];
it.each(cases)( it.each(cases)(
'should show correct data given %p symbol', 'should show correct data given %p id',
async (symbol, details) => { async (id, details) => {
render(<WrappedAssetDetailsDialog assetSymbol={symbol} />); render(<WrappedAssetDetailsDialog assetId={id} />);
for (const detail of details) { for (const detail of details) {
expect( expect(
(await screen.findByTestId(testId(detail.key, 'value'))).textContent (await screen.findByTestId(testId(detail.key, 'value'))).textContent

27
libs/assets/src/lib/asset-details-dialog.tsx
View File

@ -3,51 +3,49 @@ import { useAssetsDataProvider } from './assets-data-provider';
import { Button, Dialog, Icon, Splash } from '@vegaprotocol/ui-toolkit'; import { Button, Dialog, Icon, Splash } from '@vegaprotocol/ui-toolkit';
import create from 'zustand'; import create from 'zustand';
import { AssetDetailsTable } from './asset-details-table'; import { AssetDetailsTable } from './asset-details-table';
import type { Asset } from './asset-data-provider';
export type AssetDetailsDialogStore = { export type AssetDetailsDialogStore = {
isOpen: boolean; isOpen: boolean;
symbol: string | Asset; id: string;
trigger: HTMLElement | null | undefined; trigger: HTMLElement | null | undefined;
setOpen: (isOpen: boolean) => void; setOpen: (isOpen: boolean) => void;
open: (symbol: string | Asset, trigger?: HTMLElement | null) => void; open: (id: string, trigger?: HTMLElement | null) => void;
}; };
export const useAssetDetailsDialogStore = create<AssetDetailsDialogStore>( export const useAssetDetailsDialogStore = create<AssetDetailsDialogStore>(
(set) => ({ (set) => ({
isOpen: false, isOpen: false,
symbol: '', id: '',
trigger: null, trigger: null,
setOpen: (isOpen) => { setOpen: (isOpen) => {
set({ isOpen: isOpen }); set({ isOpen: isOpen });
}, },
open: (symbol, trigger?) => { open: (id, trigger?) => {
set({ set({
isOpen: true, isOpen: true,
symbol: symbol, id,
trigger: trigger, trigger,
}); });
}, },
}) })
); );
export interface AssetDetailsDialogProps { export interface AssetDetailsDialogProps {
assetSymbol: string | Asset; assetId: string;
trigger?: HTMLElement | null; trigger?: HTMLElement | null;
open: boolean; open: boolean;
onChange: (open: boolean) => void; onChange: (open: boolean) => void;
} }
export const AssetDetailsDialog = ({ export const AssetDetailsDialog = ({
assetSymbol, assetId,
trigger, trigger,
open, open,
onChange, onChange,
}: AssetDetailsDialogProps) => { }: AssetDetailsDialogProps) => {
const { data } = useAssetsDataProvider(); const { data } = useAssetsDataProvider();
const symbol = const asset = data?.find((a) => a.id === assetId);
typeof assetSymbol === 'string' ? assetSymbol : assetSymbol.symbol;
const asset = data?.find((a) => a?.symbol === symbol);
const content = asset ? ( const content = asset ? (
<div className="my-2"> <div className="my-2">
@ -58,10 +56,13 @@ export const AssetDetailsDialog = ({
<Splash>{t('No data')}</Splash> <Splash>{t('No data')}</Splash>
</div> </div>
); );
const title = asset
? t(`Asset details - ${asset.symbol}`)
: t('Asset not found');
return ( return (
<Dialog <Dialog
title={t(`Asset details - ${symbol}`)} title={title}
icon={<Icon name="info-sign"></Icon>} icon={<Icon name="info-sign"></Icon>}
open={open} open={open}
onChange={(isOpen) => onChange(isOpen)} onChange={(isOpen) => onChange(isOpen)}

2
libs/deposits/src/lib/deposit-form.tsx
View File

@ -191,7 +191,7 @@ export const DepositForm = ({
className="text-sm underline" className="text-sm underline"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
openAssetDetailsDialog(selectedAsset, e.target as HTMLElement); openAssetDetailsDialog(selectedAsset.id, e.target as HTMLElement);
}} }}
> >
{t('View asset details')} {t('View asset details')}

1
libs/fills/src/lib/test-helpers.ts
View File

@ -71,6 +71,7 @@ export const generateFill = (override?: PartialDeep<Trade>) => {
__typename: 'Future', __typename: 'Future',
settlementAsset: { settlementAsset: {
__typename: 'Asset', __typename: 'Asset',
id: 'assset-id',
symbol: 'SYM', symbol: 'SYM',
decimals: 18, decimals: 18,
}, },

4
libs/market-list/src/lib/__generated___/market.ts
View File

@ -3,14 +3,14 @@ import { Schema as Types } from '@vegaprotocol/types';
import { gql } from '@apollo/client'; import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client'; import * as Apollo from '@apollo/client';
const defaultOptions = {} as const; const defaultOptions = {} as const;
export type SingleMarketFieldsFragment = { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradingMode: Types.MarketTradingMode, fees: { __typename?: 'Fees', factors: { __typename?: 'FeeFactors', makerFee: string, infrastructureFee: string, liquidityFee: string } }, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename?: 'Future', quoteName: string, dataSourceSpecForTradingTermination: { __typename?: 'DataSourceSpec', id: string }, settlementAsset: { __typename?: 'Asset', id: string, symbol: string, name: string, decimals: number } } } }, marketTimestamps: { __typename?: 'MarketTimestamps', open?: string | null, close?: string | null }, depth: { __typename?: 'MarketDepth', lastTrade?: { __typename?: 'Trade', price: string } | null } }; export type SingleMarketFieldsFragment = { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradingMode: Types.MarketTradingMode, fees: { __typename?: 'Fees', factors: { __typename?: 'FeeFactors', makerFee: string, infrastructureFee: string, liquidityFee: string } }, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename?: 'Future', quoteName: string, dataSourceSpecForTradingTermination: { __typename?: 'DataSourceSpec', id: string }, settlementAsset: { __typename?: 'Asset', id: string, symbol: string, name: string, decimals: number } } } }, marketTimestamps: { __typename?: 'MarketTimestamps', open?: any | null, close?: any | null }, depth: { __typename?: 'MarketDepth', lastTrade?: { __typename?: 'Trade', price: string } | null } };
export type MarketQueryVariables = Types.Exact<{ export type MarketQueryVariables = Types.Exact<{
marketId: Types.Scalars['ID']; marketId: Types.Scalars['ID'];
}>; }>;
export type MarketQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradingMode: Types.MarketTradingMode, fees: { __typename?: 'Fees', factors: { __typename?: 'FeeFactors', makerFee: string, infrastructureFee: string, liquidityFee: string } }, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename?: 'Future', quoteName: string, dataSourceSpecForTradingTermination: { __typename?: 'DataSourceSpec', id: string }, settlementAsset: { __typename?: 'Asset', id: string, symbol: string, name: string, decimals: number } } } }, marketTimestamps: { __typename?: 'MarketTimestamps', open?: string | null, close?: string | null }, depth: { __typename?: 'MarketDepth', lastTrade?: { __typename?: 'Trade', price: string } | null } } | null }; export type MarketQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradingMode: Types.MarketTradingMode, fees: { __typename?: 'Fees', factors: { __typename?: 'FeeFactors', makerFee: string, infrastructureFee: string, liquidityFee: string } }, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename?: 'Future', quoteName: string, dataSourceSpecForTradingTermination: { __typename?: 'DataSourceSpec', id: string }, settlementAsset: { __typename?: 'Asset', id: string, symbol: string, name: string, decimals: number } } } }, marketTimestamps: { __typename?: 'MarketTimestamps', open?: any | null, close?: any | null }, depth: { __typename?: 'MarketDepth', lastTrade?: { __typename?: 'Trade', price: string } | null } } | null };
export const SingleMarketFieldsFragmentDoc = gql` export const SingleMarketFieldsFragmentDoc = gql`
fragment SingleMarketFields on Market { fragment SingleMarketFields on Market {

5
libs/market-list/src/lib/__generated___/markets.ts
View File

@ -3,12 +3,12 @@ import { Schema as Types } from '@vegaprotocol/types';
import { gql } from '@apollo/client'; import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client'; import * as Apollo from '@apollo/client';
const defaultOptions = {} as const; const defaultOptions = {} as const;
export type MarketFieldsFragment = { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradingMode: Types.MarketTradingMode, fees: { __typename?: 'Fees', factors: { __typename?: 'FeeFactors', makerFee: string, infrastructureFee: string, liquidityFee: string } }, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename?: 'Future', quoteName: string, settlementAsset: { __typename?: 'Asset', symbol: string, decimals: number } } } }, marketTimestamps: { __typename?: 'MarketTimestamps', open?: string | null, close?: string | null } }; export type MarketFieldsFragment = { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradingMode: Types.MarketTradingMode, fees: { __typename?: 'Fees', factors: { __typename?: 'FeeFactors', makerFee: string, infrastructureFee: string, liquidityFee: string } }, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename?: 'Future', quoteName: string, settlementAsset: { __typename?: 'Asset', id: string, symbol: string, decimals: number } } } }, marketTimestamps: { __typename?: 'MarketTimestamps', open?: any | null, close?: any | null } };
export type MarketsQueryVariables = Types.Exact<{ [key: string]: never; }>; export type MarketsQueryVariables = Types.Exact<{ [key: string]: never; }>;
export type MarketsQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradingMode: Types.MarketTradingMode, fees: { __typename?: 'Fees', factors: { __typename?: 'FeeFactors', makerFee: string, infrastructureFee: string, liquidityFee: string } }, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename?: 'Future', quoteName: string, settlementAsset: { __typename?: 'Asset', symbol: string, decimals: number } } } }, marketTimestamps: { __typename?: 'MarketTimestamps', open?: string | null, close?: string | null } } }> } | null }; export type MarketsQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradingMode: Types.MarketTradingMode, fees: { __typename?: 'Fees', factors: { __typename?: 'FeeFactors', makerFee: string, infrastructureFee: string, liquidityFee: string } }, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', id: string, name: string, code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename?: 'Future', quoteName: string, settlementAsset: { __typename?: 'Asset', id: string, symbol: string, decimals: number } } } }, marketTimestamps: { __typename?: 'MarketTimestamps', open?: any | null, close?: any | null } } }> } | null };
export const MarketFieldsFragmentDoc = gql` export const MarketFieldsFragmentDoc = gql`
fragment MarketFields on Market { fragment MarketFields on Market {
@ -35,6 +35,7 @@ export const MarketFieldsFragmentDoc = gql`
product { product {
... on Future { ... on Future {
settlementAsset { settlementAsset {
id
symbol symbol
decimals decimals
} }

10
libs/market-list/src/lib/components/markets-container/market-list-table.tsx
View File

@ -54,21 +54,21 @@ export const MarketListTable = forwardRef<
/> />
<AgGridColumn <AgGridColumn
headerName={t('Settlement asset')} headerName={t('Settlement asset')}
field="tradableInstrument.instrument.product.settlementAsset.symbol" field="tradableInstrument.instrument.product.settlementAsset"
cellRenderer={({ cellRenderer={({
value, value,
}: VegaICellRendererParams< }: VegaICellRendererParams<
MarketWithData, MarketWithData,
'tradableInstrument.instrument.product.settlementAsset.symbol' 'tradableInstrument.instrument.product.settlementAsset'
>) => >) =>
value && value.length > 0 ? ( value ? (
<button <button
className="hover:underline" className="hover:underline"
onClick={(e) => { onClick={(e) => {
openAssetDetailsDialog(value, e.target as HTMLElement); openAssetDetailsDialog(value.id, e.target as HTMLElement);
}} }}
> >
{value} {value.symbol}
</button> </button>
) : ( ) : (
'' ''

1
libs/market-list/src/lib/markets.graphql
View File

@ -22,6 +22,7 @@ fragment MarketFields on Market {
product { product {
... on Future { ... on Future {
settlementAsset { settlementAsset {
id
symbol symbol
decimals decimals
} }

1
libs/orders/src/lib/components/mocks/generate-orders.ts
View File

@ -43,6 +43,7 @@ export const generateOrder = (partialOrder?: PartialDeep<Order>) => {
quoteName: '', quoteName: '',
settlementAsset: { settlementAsset: {
__typename: 'Asset', __typename: 'Asset',
id: 'asset-id',
decimals: 1, decimals: 1,
symbol: 'XYZ', symbol: 'XYZ',
}, },

1
libs/withdraws/src/lib/withdraw-form-container.spec.tsx
View File

@ -142,6 +142,7 @@ describe('WithdrawFormContainer', () => {
__typename: 'Future', __typename: 'Future',
settlementAsset: { settlementAsset: {
__typename: 'Asset', __typename: 'Asset',
id: 'asset-id',
symbol: 'tUSDC', symbol: 'tUSDC',
decimals: 5, decimals: 5,
}, },