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

chore: replace duplicated assets queries with assetsProvider (#1617)

Browse Source
This commit is contained in:
Bartłomiej Głownia 2022-10-05 12:42:22 +02:00 committed by GitHub
parent 2bf614afd2
commit 0821cafdf0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
64 changed files with 335 additions and 1218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/console-lite-e2e/src/support/mocks/generate-accounts.ts
View File

@ -1,5 +1,6 @@
import merge from 'lodash/merge'; import merge from 'lodash/merge';
import type { AccountsQuery, AssetsQuery } from '@vegaprotocol/accounts'; import type { AccountsQuery } from '@vegaprotocol/accounts';
import type { AssetsQuery } from '@vegaprotocol/assets';
import { AccountType, Schema as Types } from '@vegaprotocol/types'; import { AccountType, Schema as Types } from '@vegaprotocol/types';
import type { PartialDeep } from 'type-fest'; import type { PartialDeep } from 'type-fest';
@ -86,6 +87,7 @@ export const generateAssets = (override?: PartialDeep<AssetsQuery>) => {
symbol: 'tEURO', symbol: 'tEURO',
decimals: 5, decimals: 5,
name: 'Euro', name: 'Euro',
source: {},
quantum: '', quantum: '',
status: Types.AssetStatus.STATUS_ENABLED, status: Types.AssetStatus.STATUS_ENABLED,
}, },
@ -96,6 +98,7 @@ export const generateAssets = (override?: PartialDeep<AssetsQuery>) => {
symbol: 'tDAI', symbol: 'tDAI',
decimals: 5, decimals: 5,
name: 'DAI', name: 'DAI',
source: {},
quantum: '', quantum: '',
status: Types.AssetStatus.STATUS_ENABLED, status: Types.AssetStatus.STATUS_ENABLED,
}, },
@ -106,6 +109,7 @@ export const generateAssets = (override?: PartialDeep<AssetsQuery>) => {
symbol: 'AST0', symbol: 'AST0',
decimals: 5, decimals: 5,
name: 'Asto', name: 'Asto',
source: {},
quantum: '', quantum: '',
status: Types.AssetStatus.STATUS_ENABLED, status: Types.AssetStatus.STATUS_ENABLED,
}, },

43
apps/console-lite/src/app/components/deposits/deposits.tsx
View File

@ -1,32 +1,12 @@
import { gql, useQuery } from '@apollo/client'; import { useMemo } from 'react';
import { DepositManager } from '@vegaprotocol/deposits'; import { DepositManager } from '@vegaprotocol/deposits';
import { getEnabledAssets, t } from '@vegaprotocol/react-helpers'; import { t } from '@vegaprotocol/react-helpers';
import { enabledAssetsProvider } from '@vegaprotocol/assets';
import { useDataProvider } from '@vegaprotocol/react-helpers';
import { Networks, useEnvironment } from '@vegaprotocol/environment'; import { Networks, useEnvironment } from '@vegaprotocol/environment';
import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit'; import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
import { useVegaWallet } from '@vegaprotocol/wallet'; import { useVegaWallet } from '@vegaprotocol/wallet';
import { Web3Container } from '@vegaprotocol/web3'; import { Web3Container } from '@vegaprotocol/web3';
import type { DepositAssets } from './__generated__/DepositAssets';
const DEPOSITS_QUERY = gql`
query DepositAssets {
assetsConnection {
edges {
node {
id
name
symbol
decimals
status
source {
... on ERC20 {
contractAddress
}
}
}
}
}
}
`;
/** /**
* Fetches data required for the Deposit page * Fetches data required for the Deposit page
@ -34,20 +14,19 @@ const DEPOSITS_QUERY = gql`
export const DepositContainer = () => { export const DepositContainer = () => {
const { VEGA_ENV } = useEnvironment(); const { VEGA_ENV } = useEnvironment();
const { pubKey } = useVegaWallet(); const { pubKey } = useVegaWallet();
const variables = useMemo(() => ({ partyId: pubKey }), [pubKey]);
const { data, loading, error } = useQuery<DepositAssets>(DEPOSITS_QUERY, { const { data, loading, error } = useDataProvider({
variables: { partyId: pubKey }, dataProvider: enabledAssetsProvider,
variables,
skip: !pubKey, skip: !pubKey,
}); });
const assets = getEnabledAssets(data);
return ( return (
<AsyncRenderer<DepositAssets> data={data} loading={loading} error={error}> <AsyncRenderer data={data} loading={loading} error={error}>
{assets.length ? ( {data && data.length ? (
<Web3Container> <Web3Container>
<DepositManager <DepositManager
assets={assets} assets={data}
isFaucetable={VEGA_ENV !== Networks.MAINNET} isFaucetable={VEGA_ENV !== Networks.MAINNET}
/> />
</Web3Container> </Web3Container>

12
apps/explorer/src/app/routes/assets/index.tsx
View File

@ -1,10 +1,13 @@
import { gql, useQuery } from '@apollo/client'; import { gql, useQuery } from '@apollo/client';
import { getAssets, t } from '@vegaprotocol/react-helpers'; import { t } from '@vegaprotocol/react-helpers';
import React from 'react'; import React from 'react';
import { RouteTitle } from '../../components/route-title'; import { RouteTitle } from '../../components/route-title';
import { SubHeading } from '../../components/sub-heading'; import { SubHeading } from '../../components/sub-heading';
import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit'; import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
import type { AssetsQuery } from './__generated__/AssetsQuery'; import type {
AssetsQuery,
AssetsQuery_assetsConnection_edges_node,
} from './__generated__/AssetsQuery';
export const ASSETS_QUERY = gql` export const ASSETS_QUERY = gql`
query AssetsQuery { query AssetsQuery {
@ -39,7 +42,10 @@ export const ASSETS_QUERY = gql`
const Assets = () => { const Assets = () => {
const { data } = useQuery<AssetsQuery>(ASSETS_QUERY); const { data } = useQuery<AssetsQuery>(ASSETS_QUERY);
const assets = getAssets(data); const assets =
data?.assetsConnection?.edges
?.filter((e) => e && e?.node)
.map((e) => e?.node as AssetsQuery_assetsConnection_edges_node) || [];
return ( return (
<section> <section>

2
apps/token/src/components/vega-wallet/hooks.ts
View File

@ -17,7 +17,7 @@ import type {
} from './__generated__/Delegations'; } from './__generated__/Delegations';
import { useVegaWallet } from '@vegaprotocol/wallet'; import { useVegaWallet } from '@vegaprotocol/wallet';
import { useContracts } from '../../contexts/contracts/contracts-context'; import { useContracts } from '../../contexts/contracts/contracts-context';
import { isAssetTypeERC20 } from '@vegaprotocol/react-helpers'; import { isAssetTypeERC20 } from '@vegaprotocol/assets';
import { AccountType } from '@vegaprotocol/types'; import { AccountType } from '@vegaprotocol/types';
const DELEGATIONS_QUERY = gql` const DELEGATIONS_QUERY = gql`

8
apps/trading-e2e/src/integration/deposit.cy.ts
View File

@ -1,5 +1,5 @@
import { aliasQuery } from '@vegaprotocol/cypress'; import { aliasQuery } from '@vegaprotocol/cypress';
import { generateDepositPage } from '../support/mocks/generate-deposit-page'; import { generateAssets } from '../support/mocks/generate-accounts';
import { generateNetworkParameters } from '../support/mocks/generate-network-parameters'; import { generateNetworkParameters } from '../support/mocks/generate-network-parameters';
const connectEthWalletBtn = 'connect-eth-wallet-btn'; const connectEthWalletBtn = 'connect-eth-wallet-btn';
@ -14,7 +14,7 @@ describe('deposit form validation', { tags: '@smoke' }, () => {
cy.mockGQLSubscription(); cy.mockGQLSubscription();
cy.mockGQL((req) => { cy.mockGQL((req) => {
aliasQuery(req, 'NetworkParamsQuery', generateNetworkParameters()); aliasQuery(req, 'NetworkParamsQuery', generateNetworkParameters());
aliasQuery(req, 'DepositPage', generateDepositPage()); aliasQuery(req, 'Assets', generateAssets());
}); });
cy.visit('/portfolio/deposit'); cy.visit('/portfolio/deposit');
@ -22,7 +22,7 @@ describe('deposit form validation', { tags: '@smoke' }, () => {
cy.getByTestId(connectEthWalletBtn).click(); cy.getByTestId(connectEthWalletBtn).click();
cy.getByTestId('web3-connector-MetaMask').click(); cy.getByTestId('web3-connector-MetaMask').click();
cy.wait('@DepositPage'); cy.wait('@Assets');
}); });
it('handles empty fields', () => { it('handles empty fields', () => {
@ -41,7 +41,7 @@ describe('deposit form validation', { tags: '@smoke' }, () => {
// Deposit amount smaller than minimum viable for selected asset // Deposit amount smaller than minimum viable for selected asset
// Select an amount so that we have a known decimal places value to work with // Select an amount so that we have a known decimal places value to work with
cy.get(assetSelectField).select('Asset 0'); cy.get(assetSelectField).select('Euro');
cy.get(amountField) cy.get(amountField)
.clear() .clear()
.type('0.00000000000000000000000000000000001') .type('0.00000000000000000000000000000000001')

11
apps/trading-e2e/src/integration/withdraw.cy.ts
View File

@ -1,9 +1,11 @@
import { aliasQuery } from '@vegaprotocol/cypress'; import { aliasQuery } from '@vegaprotocol/cypress';
import { connectEthereumWallet } from '../support/ethereum-wallet'; import { connectEthereumWallet } from '../support/ethereum-wallet';
import { generateAccounts } from '../support/mocks/generate-accounts';
import { generateChainId } from '../support/mocks/generate-chain-id'; import { generateChainId } from '../support/mocks/generate-chain-id';
import {
generateAccounts,
generateAssets,
} from '../support/mocks/generate-accounts';
import { generateNetworkParameters } from '../support/mocks/generate-network-parameters'; import { generateNetworkParameters } from '../support/mocks/generate-network-parameters';
import { generateWithdrawFormQuery } from '../support/mocks/generate-withdraw-page-query';
import { generateWithdrawals } from '../support/mocks/generate-withdrawals'; import { generateWithdrawals } from '../support/mocks/generate-withdrawals';
import { connectVegaWallet } from '../support/vega-wallet'; import { connectVegaWallet } from '../support/vega-wallet';
@ -24,7 +26,7 @@ describe('withdraw', { tags: '@smoke' }, () => {
aliasQuery(req, 'ChainId', generateChainId()); aliasQuery(req, 'ChainId', generateChainId());
aliasQuery(req, 'Withdrawals', generateWithdrawals()); aliasQuery(req, 'Withdrawals', generateWithdrawals());
aliasQuery(req, 'NetworkParamsQuery', generateNetworkParameters()); aliasQuery(req, 'NetworkParamsQuery', generateNetworkParameters());
aliasQuery(req, 'WithdrawFormQuery', generateWithdrawFormQuery()); aliasQuery(req, 'Assets', generateAssets());
aliasQuery(req, 'Accounts', generateAccounts()); aliasQuery(req, 'Accounts', generateAccounts());
}); });
cy.mockGQLSubscription(); cy.mockGQLSubscription();
@ -39,7 +41,8 @@ describe('withdraw', { tags: '@smoke' }, () => {
connectEthereumWallet(); connectEthereumWallet();
cy.getByTestId('withdraw-dialog-button').click(); cy.getByTestId('withdraw-dialog-button').click();
cy.wait('@WithdrawFormQuery'); cy.wait('@Accounts');
cy.wait('@Assets');
}); });
it('form validation', () => { it('form validation', () => {

64
apps/trading-e2e/src/support/mocks/generate-accounts.ts
View File

@ -1,5 +1,6 @@
import merge from 'lodash/merge'; import merge from 'lodash/merge';
import type { AccountsQuery, AssetsQuery } from '@vegaprotocol/accounts'; import type { AccountsQuery } from '@vegaprotocol/accounts';
import type { AssetsQuery } from '@vegaprotocol/assets';
import { AccountType, Schema as Types } from '@vegaprotocol/types'; import { AccountType, Schema as Types } from '@vegaprotocol/types';
import type { PartialDeep } from 'type-fest'; import type { PartialDeep } from 'type-fest';
@ -70,6 +71,17 @@ export const generateAccounts = (
id: 'asset-0', id: 'asset-0',
}, },
}, },
// account to withdraw Sepolia tBTC
{
__typename: 'Account',
type: AccountType.ACCOUNT_TYPE_GENERAL,
balance: '100000000',
market: null,
asset: {
__typename: 'Asset',
id: 'cee709223217281d7893b650850ae8ee8a18b7539b5658f9b4cc24de95dd18ad',
},
},
], ],
}, },
}; };
@ -86,7 +98,11 @@ export const generateAssets = (override?: PartialDeep<AssetsQuery>) => {
symbol: 'tEURO', symbol: 'tEURO',
decimals: 5, decimals: 5,
name: 'Euro', name: 'Euro',
quantum: '', source: {
__typename: 'ERC20',
contractAddress: '0x0158031158Bb4dF2AD02eAA31e8963E84EA978a4',
},
quantum: '1',
status: Types.AssetStatus.STATUS_ENABLED, status: Types.AssetStatus.STATUS_ENABLED,
}, },
}, },
@ -96,7 +112,11 @@ export const generateAssets = (override?: PartialDeep<AssetsQuery>) => {
symbol: 'tDAI', symbol: 'tDAI',
decimals: 5, decimals: 5,
name: 'DAI', name: 'DAI',
quantum: '', source: {
__typename: 'ERC20',
contractAddress: '0x26223f9C67871CFcEa329975f7BC0C9cB8FBDb9b',
},
quantum: '1',
status: Types.AssetStatus.STATUS_ENABLED, status: Types.AssetStatus.STATUS_ENABLED,
}, },
}, },
@ -106,10 +126,46 @@ export const generateAssets = (override?: PartialDeep<AssetsQuery>) => {
symbol: 'AST0', symbol: 'AST0',
decimals: 5, decimals: 5,
name: 'Asto', name: 'Asto',
quantum: '', source: {},
quantum: '1',
status: Types.AssetStatus.STATUS_ENABLED, status: Types.AssetStatus.STATUS_ENABLED,
}, },
}, },
// NOTE: These assets ids and contract addresses are real assets on Sepolia, this is needed
// because we don't currently mock our seplia infura provider. If we change network these will
// need to be updated
{
node: {
id: 'cee709223217281d7893b650850ae8ee8a18b7539b5658f9b4cc24de95dd18ad',
symbol: 'tBTC',
name: 'Sepolia tBTC',
decimals: 5,
status: Types.AssetStatus.STATUS_ENABLED,
source: {
__typename: 'ERC20',
contractAddress: '0x1d525fB145Af5c51766a89706C09fE07E6058D1D',
},
quantum: '1',
__typename: 'Asset',
},
__typename: 'AssetEdge',
},
{
node: {
id: 'c9fe6fc24fce121b2cc72680543a886055abb560043fda394ba5376203b7527d',
symbol: 'tUSDC',
name: 'Sepolia tUSDC',
decimals: 5,
status: Types.AssetStatus.STATUS_ENABLED,
source: {
__typename: 'ERC20',
contractAddress: '0x444b9aDA947130Fc320a144cd22bC1641e5c9d81',
},
quantum: '1',
__typename: 'Asset',
},
__typename: 'AssetEdge',
},
], ],
}, },
}; };

93
apps/trading-e2e/src/support/mocks/generate-deposit-page.ts
View File

@ -1,93 +0,0 @@
import { AssetStatus } from '@vegaprotocol/types';
import merge from 'lodash/merge';
import type { PartialDeep } from 'type-fest';
export const generateDepositPage = (
// eslint-disable-next-line @typescript-eslint/no-explicit-any
override?: PartialDeep<any>
) => {
const defaultResult = {
assetsConnection: {
edges: [
{
node: {
id: 'asset-0',
symbol: 'AST0',
name: 'Asset 0',
decimals: 5,
status: AssetStatus.STATUS_ENABLED,
source: {
__typename: 'ERC20',
contractAddress: '0x5E4b9aDA947130Fc320a144cd22bC1641e5c9d81',
},
__typename: 'Asset',
},
__typename: 'AssetEdge',
},
{
node: {
id: 'asset-1',
symbol: 'AST1',
name: 'Asset 1',
decimals: 5,
status: AssetStatus.STATUS_ENABLED,
source: {
__typename: 'ERC20',
contractAddress: '0x444b9aDA947130Fc320a144cd22bC1641e5c9d81',
},
__typename: 'Asset',
},
__typename: 'AssetEdge',
},
{
node: {
id: 'asset-2',
symbol: 'AST2',
name: 'Asset 2',
decimals: 5,
status: AssetStatus.STATUS_PENDING_LISTING,
source: {
__typename: 'ERC20',
contractAddress: '0x444b9aDA947130Fc320a144cd22bC1641e5c9d82',
},
__typename: 'Asset',
},
__typename: 'AssetEdge',
},
{
node: {
id: 'asset-3',
symbol: 'AST3',
name: 'Asset 3',
decimals: 5,
status: AssetStatus.STATUS_PROPOSED,
source: {
__typename: 'ERC20',
contractAddress: '0x444b9aDA947130Fc320a144cd22bC1641e5c9d83',
},
__typename: 'Asset',
},
__typename: 'AssetEdge',
},
{
node: {
id: 'asset-4',
symbol: 'AST4',
name: 'Asset 4',
decimals: 5,
status: AssetStatus.STATUS_REJECTED,
source: {
__typename: 'ERC20',
contractAddress: '0x444b9aDA947130Fc320a144cd22bC1641e5c9d84',
},
__typename: 'Asset',
},
__typename: 'AssetEdge',
},
],
__typename: 'AssetsConnection',
},
};
return merge(defaultResult, override);
};

77
apps/trading-e2e/src/support/mocks/generate-withdraw-page-query.ts
View File

@ -1,77 +0,0 @@
import { AccountType, AssetStatus } from '@vegaprotocol/types';
import type {
WithdrawFormQuery,
WithdrawFormQuery_assetsConnection_edges,
WithdrawFormQuery_party_accounts,
WithdrawFormQuery_party_withdrawals,
} from '@vegaprotocol/withdraws';
import merge from 'lodash/merge';
import type { PartialDeep } from 'type-fest';
export const generateWithdrawFormQuery = (
override?: PartialDeep<WithdrawFormQuery>
): WithdrawFormQuery => {
const withdrawal: WithdrawFormQuery_party_withdrawals = {
id: 'withdrawal-0',
txHash: null,
__typename: 'Withdrawal',
};
// NOTE: These assets ids and contract addresses are real assets on Sepolia, this is needed
// because we don't currently mock our seplia infura provider. If we change network these will
// need to be updated
const assetEdge1: WithdrawFormQuery_assetsConnection_edges = {
node: {
id: 'cee709223217281d7893b650850ae8ee8a18b7539b5658f9b4cc24de95dd18ad',
symbol: 'tBTC',
name: 'Sepolia tBTC',
decimals: 5,
status: AssetStatus.STATUS_ENABLED,
source: {
__typename: 'ERC20',
contractAddress: '0x1d525fB145Af5c51766a89706C09fE07E6058D1D',
},
__typename: 'Asset',
},
__typename: 'AssetEdge',
};
const assetEdge2: WithdrawFormQuery_assetsConnection_edges = {
node: {
id: 'c9fe6fc24fce121b2cc72680543a886055abb560043fda394ba5376203b7527d',
symbol: 'tUSDC',
name: 'Sepolia tUSDC',
decimals: 5,
status: AssetStatus.STATUS_ENABLED,
source: {
__typename: 'ERC20',
contractAddress: '0x444b9aDA947130Fc320a144cd22bC1641e5c9d81',
},
__typename: 'Asset',
},
__typename: 'AssetEdge',
};
const account: WithdrawFormQuery_party_accounts = {
type: AccountType.ACCOUNT_TYPE_GENERAL,
balance: '100000000',
asset: {
__typename: 'Asset',
id: assetEdge1.node.id,
symbol: 'AST0',
},
__typename: 'Account',
};
const defaultResult = {
party: {
id: 'party-0',
withdrawals: [withdrawal],
accounts: [account],
__typename: 'Party',
},
assetsConnection: {
__typename: 'AssetsConnection',
edges: [assetEdge1, assetEdge2],
},
};
return merge(defaultResult, override);
};

16
apps/trading/lib/query-fragments.ts
View File

@ -1,16 +0,0 @@
import { gql } from '@apollo/client';
export const ASSET_FRAGMENT = gql`
fragment AssetFields on Asset {
id
symbol
name
decimals
status
source {
... on ERC20 {
contractAddress
}
}
}
`;

17
apps/trading/pages/portfolio/deposit/Deposit.graphql
View File

@ -1,17 +0,0 @@
query DepositPage {
assetsConnection {
edges {
node {
id
symbol
name
decimals
source {
... on ERC20 {
contractAddress
}
}
}
}
}
}

75
apps/trading/pages/portfolio/deposit/__generated__/DepositPage.ts generated
View File

@ -1,75 +0,0 @@
/* tslint:disable */
/* eslint-disable */
// @generated
// This file was automatically generated and should not be edited.
import { AssetStatus } from "@vegaprotocol/types";
// ====================================================
// GraphQL query operation: DepositPage
// ====================================================
export interface DepositPage_assetsConnection_edges_node_source_BuiltinAsset {
__typename: "BuiltinAsset";
}
export interface DepositPage_assetsConnection_edges_node_source_ERC20 {
__typename: "ERC20";
/**
* The address of the ERC20 contract
*/
contractAddress: string;
}
export type DepositPage_assetsConnection_edges_node_source = DepositPage_assetsConnection_edges_node_source_BuiltinAsset | DepositPage_assetsConnection_edges_node_source_ERC20;
export interface DepositPage_assetsConnection_edges_node {
__typename: "Asset";
/**
* The ID of the asset
*/
id: string;
/**
* The symbol of the asset (e.g: GBP)
*/
symbol: string;
/**
* The full name of the asset (e.g: Great British Pound)
*/
name: string;
/**
* The precision of the asset. Should match the decimal precision of the asset on its native chain, e.g: for ERC20 assets, it is often 18
*/
decimals: number;
/**
* The status of the asset in the Vega network
*/
status: AssetStatus;
/**
* The origin source of the asset (e.g: an ERC20 asset)
*/
source: DepositPage_assetsConnection_edges_node_source;
}
export interface DepositPage_assetsConnection_edges {
__typename: "AssetEdge";
/**
* The asset information
*/
node: DepositPage_assetsConnection_edges_node;
}
export interface DepositPage_assetsConnection {
__typename: "AssetsConnection";
/**
* The assets
*/
edges: (DepositPage_assetsConnection_edges | null)[] | null;
}
export interface DepositPage {
/**
* The list of all assets in use in the Vega network or the specified asset if ID is provided
*/
assetsConnection: DepositPage_assetsConnection | null;
}

57
apps/trading/pages/portfolio/deposit/__generated___/Deposit.ts
View File

@ -1,57 +0,0 @@
import { Schema as Types } from '@vegaprotocol/types';
import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client';
const defaultOptions = {} as const;
export type DepositPageQueryVariables = Types.Exact<{ [key: string]: never; }>;
export type DepositPageQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, symbol: string, name: string, decimals: number, source: { __typename?: 'BuiltinAsset' } | { __typename?: 'ERC20', contractAddress: string } } } | null> | null } | null };
export const DepositPageDocument = gql`
query DepositPage {
assetsConnection {
edges {
node {
id
symbol
name
decimals
source {
... on ERC20 {
contractAddress
}
}
}
}
}
}
`;
/**
* __useDepositPageQuery__
*
* To run a query within a React component, call `useDepositPageQuery` and pass it any options that fit your needs.
* When your component renders, `useDepositPageQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useDepositPageQuery({
* variables: {
* },
* });
*/
export function useDepositPageQuery(baseOptions?: Apollo.QueryHookOptions<DepositPageQuery, DepositPageQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<DepositPageQuery, DepositPageQueryVariables>(DepositPageDocument, options);
}
export function useDepositPageLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<DepositPageQuery, DepositPageQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<DepositPageQuery, DepositPageQueryVariables>(DepositPageDocument, options);
}
export type DepositPageQueryHookResult = ReturnType<typeof useDepositPageQuery>;
export type DepositPageLazyQueryHookResult = ReturnType<typeof useDepositPageLazyQuery>;
export type DepositPageQueryResult = Apollo.QueryResult<DepositPageQuery, DepositPageQueryVariables>;

37
apps/trading/pages/portfolio/deposit/deposit-container.tsx
View File

@ -1,37 +1,24 @@
import { gql } from '@apollo/client';
import { PageQueryContainer } from '../../../components/page-query-container';
import type { DepositPage } from './__generated__/DepositPage';
import { DepositManager } from '@vegaprotocol/deposits'; import { DepositManager } from '@vegaprotocol/deposits';
import { getEnabledAssets, t } from '@vegaprotocol/react-helpers'; import { useDataProvider, t } from '@vegaprotocol/react-helpers';
import { enabledAssetsProvider } from '@vegaprotocol/assets';
import { useEnvironment } from '@vegaprotocol/environment'; import { useEnvironment } from '@vegaprotocol/environment';
import { Splash } from '@vegaprotocol/ui-toolkit'; import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
import { ASSET_FRAGMENT } from '../../../lib/query-fragments';
const DEPOSIT_PAGE_QUERY = gql`
${ASSET_FRAGMENT}
query DepositPage {
assetsConnection {
edges {
node {
...AssetFields
}
}
}
}
`;
/** /**
* Fetches data required for the Deposit page * Fetches data required for the Deposit page
*/ */
export const DepositContainer = () => { export const DepositContainer = () => {
const { VEGA_ENV } = useEnvironment(); const { VEGA_ENV } = useEnvironment();
const { data, error, loading } = useDataProvider({
dataProvider: enabledAssetsProvider,
});
return ( return (
<PageQueryContainer<DepositPage> <AsyncRenderer
query={DEPOSIT_PAGE_QUERY} data={data}
render={(data) => { error={error}
const assets = getEnabledAssets(data); loading={loading}
if (!assets.length) { render={(assets) => {
if (!assets || !assets.length) {
return ( return (
<Splash> <Splash>
<p>{t('No assets on this network')}</p> <p>{t('No assets on this network')}</p>

19
libs/accounts/src/lib/Accounts.graphql
View File

@ -26,22 +26,3 @@ subscription AccountEvents($partyId: ID!) {
marketId marketId
} }
} }
fragment AssetsFields on Asset {
id
name
symbol
decimals
quantum
status
}
query Assets {
assetsConnection {
edges {
node {
...AssetsFields
}
}
}
}

57
libs/accounts/src/lib/__generated___/Accounts.ts
View File

@ -19,13 +19,6 @@ export type AccountEventsSubscriptionVariables = Types.Exact<{
export type AccountEventsSubscription = { __typename?: 'Subscription', accounts: Array<{ __typename?: 'AccountUpdate', type: Types.AccountType, balance: string, assetId: string, marketId?: string | null }> }; export type AccountEventsSubscription = { __typename?: 'Subscription', accounts: Array<{ __typename?: 'AccountUpdate', type: Types.AccountType, balance: string, assetId: string, marketId?: string | null }> };
export type AssetsFieldsFragment = { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, quantum: string, status: Types.AssetStatus };
export type AssetsQueryVariables = Types.Exact<{ [key: string]: never; }>;
export type AssetsQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, quantum: string, status: Types.AssetStatus } } | null> | null } | null };
export const AccountFieldsFragmentDoc = gql` export const AccountFieldsFragmentDoc = gql`
fragment AccountFields on Account { fragment AccountFields on Account {
type type
@ -38,16 +31,6 @@ export const AccountFieldsFragmentDoc = gql`
} }
} }
`; `;
export const AssetsFieldsFragmentDoc = gql`
fragment AssetsFields on Asset {
id
name
symbol
decimals
quantum
status
}
`;
export const AccountsDocument = gql` export const AccountsDocument = gql`
query Accounts($partyId: ID!) { query Accounts($partyId: ID!) {
party(id: $partyId) { party(id: $partyId) {
@ -118,42 +101,4 @@ export function useAccountEventsSubscription(baseOptions: Apollo.SubscriptionHoo
return Apollo.useSubscription<AccountEventsSubscription, AccountEventsSubscriptionVariables>(AccountEventsDocument, options); return Apollo.useSubscription<AccountEventsSubscription, AccountEventsSubscriptionVariables>(AccountEventsDocument, options);
} }
export type AccountEventsSubscriptionHookResult = ReturnType<typeof useAccountEventsSubscription>; export type AccountEventsSubscriptionHookResult = ReturnType<typeof useAccountEventsSubscription>;
export type AccountEventsSubscriptionResult = Apollo.SubscriptionResult<AccountEventsSubscription>; export type AccountEventsSubscriptionResult = Apollo.SubscriptionResult<AccountEventsSubscription>;
export const AssetsDocument = gql`
query Assets {
assetsConnection {
edges {
node {
...AssetsFields
}
}
}
}
${AssetsFieldsFragmentDoc}`;
/**
* __useAssetsQuery__
*
* To run a query within a React component, call `useAssetsQuery` and pass it any options that fit your needs.
* When your component renders, `useAssetsQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useAssetsQuery({
* variables: {
* },
* });
*/
export function useAssetsQuery(baseOptions?: Apollo.QueryHookOptions<AssetsQuery, AssetsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<AssetsQuery, AssetsQueryVariables>(AssetsDocument, options);
}
export function useAssetsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AssetsQuery, AssetsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<AssetsQuery, AssetsQueryVariables>(AssetsDocument, options);
}
export type AssetsQueryHookResult = ReturnType<typeof useAssetsQuery>;
export type AssetsLazyQueryHookResult = ReturnType<typeof useAssetsLazyQuery>;
export type AssetsQueryResult = Apollo.QueryResult<AssetsQuery, AssetsQueryVariables>;

8
libs/accounts/src/lib/accounts-data-provider.ts
View File

@ -8,7 +8,6 @@ import type {
AccountFieldsFragment, AccountFieldsFragment,
AccountsQuery, AccountsQuery,
AccountEventsSubscription, AccountEventsSubscription,
AssetsFieldsFragment,
} from './__generated___/Accounts'; } from './__generated___/Accounts';
import { import {
makeDataProvider, makeDataProvider,
@ -17,7 +16,8 @@ import {
import { AccountType } from '@vegaprotocol/types'; import { AccountType } from '@vegaprotocol/types';
import type { Market } from '@vegaprotocol/market-list'; import type { Market } from '@vegaprotocol/market-list';
import { marketsProvider } from '@vegaprotocol/market-list'; import { marketsProvider } from '@vegaprotocol/market-list';
import { assetProvider } from './asset-data-provider'; import type { AssetsFieldsFragment } from '@vegaprotocol/assets';
import { assetsProvider } from '@vegaprotocol/assets';
function isAccount( function isAccount(
account: account:
@ -77,7 +77,7 @@ const getDelta = (
subscriptionData: AccountEventsSubscription subscriptionData: AccountEventsSubscription
): AccountEventsSubscription['accounts'] => subscriptionData.accounts; ): AccountEventsSubscription['accounts'] => subscriptionData.accounts;
export const accountsBasedDataProvider = makeDataProvider< export const accountsOnlyDataProvider = makeDataProvider<
AccountsQuery, AccountsQuery,
AccountFieldsFragment[], AccountFieldsFragment[],
AccountEventsSubscription, AccountEventsSubscription,
@ -155,7 +155,7 @@ const getAssetAccountAggregation = (
}; };
export const accountsDataProvider = makeDerivedDataProvider<Account[], never>( export const accountsDataProvider = makeDerivedDataProvider<Account[], never>(
[accountsBasedDataProvider, marketsProvider, assetProvider], [accountsOnlyDataProvider, marketsProvider, assetsProvider],
([accounts, markets, assets]): Account[] | null => { ([accounts, markets, assets]): Account[] | null => {
return accounts return accounts
? accounts ? accounts

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

@ -1,4 +1,4 @@
import type { Asset } from '@vegaprotocol/react-helpers'; 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';

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

@ -1,6 +1,6 @@
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/react-helpers'; import type { Asset } from '@vegaprotocol/assets';
import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers'; import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers';
import type { import type {
ValueProps, ValueProps,

21
libs/accounts/src/lib/asset-data-provider.ts
View File

@ -1,21 +0,0 @@
import { makeDataProvider } from '@vegaprotocol/react-helpers';
import { AssetsDocument } from './__generated___/Accounts';
import type {
AssetsQuery,
AssetsFieldsFragment,
} from './__generated___/Accounts';
const getData = (responseData: AssetsQuery) =>
responseData.assetsConnection?.edges
?.filter((e) => Boolean(e?.node))
.map((e) => e?.node as AssetsFieldsFragment) ?? null;
export const assetProvider = makeDataProvider<
AssetsQuery,
AssetsFieldsFragment[] | null,
never,
never
>({
query: AssetsDocument,
getData,
});

16
libs/assets/src/lib/Asset.graphql
View File

@ -1,16 +0,0 @@
query Asset($assetId: ID!) {
asset(id: $assetId) {
id
name
symbol
decimals
quantum
source {
... on ERC20 {
contractAddress
lifetimeLimit
withdrawThreshold
}
}
}
}

29
libs/assets/src/lib/Assets.graphql
View File

@ -1,19 +1,22 @@
query AssetsConnection { fragment AssetsFields on Asset {
id
name
symbol
decimals
quantum
status
source {
... on ERC20 {
contractAddress
}
}
}
query Assets {
assetsConnection { assetsConnection {
edges { edges {
node { node {
id ...AssetsFields
name
symbol
decimals
quantum
source {
... on ERC20 {
contractAddress
lifetimeLimit
withdrawThreshold
}
}
} }
} }
} }

59
libs/assets/src/lib/__generated___/Asset.ts
View File

@ -1,59 +0,0 @@
import { Schema as Types } from '@vegaprotocol/types';
import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client';
const defaultOptions = {} as const;
export type AssetQueryVariables = Types.Exact<{
assetId: Types.Scalars['ID'];
}>;
export type AssetQuery = { __typename?: 'Query', asset?: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset' } | { __typename?: 'ERC20', contractAddress: string, lifetimeLimit: string, withdrawThreshold: string } } | null };
export const AssetDocument = gql`
query Asset($assetId: ID!) {
asset(id: $assetId) {
id
name
symbol
decimals
quantum
source {
... on ERC20 {
contractAddress
lifetimeLimit
withdrawThreshold
}
}
}
}
`;
/**
* __useAssetQuery__
*
* To run a query within a React component, call `useAssetQuery` and pass it any options that fit your needs.
* When your component renders, `useAssetQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useAssetQuery({
* variables: {
* assetId: // value for 'assetId'
* },
* });
*/
export function useAssetQuery(baseOptions: Apollo.QueryHookOptions<AssetQuery, AssetQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<AssetQuery, AssetQueryVariables>(AssetDocument, options);
}
export function useAssetLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AssetQuery, AssetQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<AssetQuery, AssetQueryVariables>(AssetDocument, options);
}
export type AssetQueryHookResult = ReturnType<typeof useAssetQuery>;
export type AssetLazyQueryHookResult = ReturnType<typeof useAssetLazyQuery>;
export type AssetQueryResult = Apollo.QueryResult<AssetQuery, AssetQueryVariables>;

69
libs/assets/src/lib/__generated___/Assets.ts
View File

@ -3,58 +3,63 @@ 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 AssetsConnectionQueryVariables = Types.Exact<{ [key: string]: never; }>; export type AssetsFieldsFragment = { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, quantum: string, status: Types.AssetStatus, source: { __typename?: 'BuiltinAsset' } | { __typename?: 'ERC20', contractAddress: string } };
export type AssetsQueryVariables = Types.Exact<{ [key: string]: never; }>;
export type AssetsConnectionQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset' } | { __typename?: 'ERC20', contractAddress: string, lifetimeLimit: string, withdrawThreshold: string } } } | null> | null } | null }; export type AssetsQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, quantum: string, status: Types.AssetStatus, source: { __typename?: 'BuiltinAsset' } | { __typename?: 'ERC20', contractAddress: string } } } | null> | null } | null };
export const AssetsFieldsFragmentDoc = gql`
export const AssetsConnectionDocument = gql` fragment AssetsFields on Asset {
query AssetsConnection { id
assetsConnection { name
edges { symbol
node { decimals
id quantum
name status
symbol source {
decimals ... on ERC20 {
quantum contractAddress
source {
... on ERC20 {
contractAddress
lifetimeLimit
withdrawThreshold
}
}
}
} }
} }
} }
`; `;
export const AssetsDocument = gql`
query Assets {
assetsConnection {
edges {
node {
...AssetsFields
}
}
}
}
${AssetsFieldsFragmentDoc}`;
/** /**
* __useAssetsConnectionQuery__ * __useAssetsQuery__
* *
* To run a query within a React component, call `useAssetsConnectionQuery` and pass it any options that fit your needs. * To run a query within a React component, call `useAssetsQuery` and pass it any options that fit your needs.
* When your component renders, `useAssetsConnectionQuery` returns an object from Apollo Client that contains loading, error, and data properties * When your component renders, `useAssetsQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI. * you can use to render your UI.
* *
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
* *
* @example * @example
* const { data, loading, error } = useAssetsConnectionQuery({ * const { data, loading, error } = useAssetsQuery({
* variables: { * variables: {
* }, * },
* }); * });
*/ */
export function useAssetsConnectionQuery(baseOptions?: Apollo.QueryHookOptions<AssetsConnectionQuery, AssetsConnectionQueryVariables>) { export function useAssetsQuery(baseOptions?: Apollo.QueryHookOptions<AssetsQuery, AssetsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions} const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<AssetsConnectionQuery, AssetsConnectionQueryVariables>(AssetsConnectionDocument, options); return Apollo.useQuery<AssetsQuery, AssetsQueryVariables>(AssetsDocument, options);
} }
export function useAssetsConnectionLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AssetsConnectionQuery, AssetsConnectionQueryVariables>) { export function useAssetsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AssetsQuery, AssetsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions} const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<AssetsConnectionQuery, AssetsConnectionQueryVariables>(AssetsConnectionDocument, options); return Apollo.useLazyQuery<AssetsQuery, AssetsQueryVariables>(AssetsDocument, options);
} }
export type AssetsConnectionQueryHookResult = ReturnType<typeof useAssetsConnectionQuery>; export type AssetsQueryHookResult = ReturnType<typeof useAssetsQuery>;
export type AssetsConnectionLazyQueryHookResult = ReturnType<typeof useAssetsConnectionLazyQuery>; export type AssetsLazyQueryHookResult = ReturnType<typeof useAssetsLazyQuery>;
export type AssetsConnectionQueryResult = Apollo.QueryResult<AssetsConnectionQuery, AssetsConnectionQueryVariables>; export type AssetsQueryResult = Apollo.QueryResult<AssetsQuery, AssetsQueryVariables>;

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

@ -1,7 +1,7 @@
import { MockedProvider } from '@apollo/react-testing'; import { MockedProvider } from '@apollo/react-testing';
import { render, screen } from '@testing-library/react'; import { render, screen } from '@testing-library/react';
import { AssetDetailsDialog } from './asset-details-dialog'; import { AssetDetailsDialog } from './asset-details-dialog';
import { AssetsConnectionDocument } from './__generated___/Assets'; import { AssetsDocument } from './__generated___/Assets';
const mockedData = { const mockedData = {
data: { data: {
@ -273,7 +273,7 @@ const mockedData = {
const mocks = [ const mocks = [
{ {
request: { request: {
query: AssetsConnectionDocument, query: AssetsDocument,
variables: {}, variables: {},
}, },
result: mockedData, result: mockedData,

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

@ -1,5 +1,9 @@
import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers'; import {
import type { Asset } from '@vegaprotocol/react-helpers'; addDecimalsFormatNumber,
t,
useDataProvider,
} from '@vegaprotocol/react-helpers';
import type { Asset } from './assets-data-provider';
import { import {
Button, Button,
Dialog, Dialog,
@ -9,7 +13,7 @@ import {
Splash, Splash,
Tooltip, Tooltip,
} from '@vegaprotocol/ui-toolkit'; } from '@vegaprotocol/ui-toolkit';
import { useAssetsConnectionQuery } from './__generated___/Assets'; import { assetsProvider } from './assets-data-provider';
import type { Schema } from '@vegaprotocol/types'; import type { Schema } from '@vegaprotocol/types';
import create from 'zustand'; import create from 'zustand';
@ -59,12 +63,10 @@ export const AssetDetailsDialog = ({
open, open,
onChange, onChange,
}: AssetDetailsDialogProps) => { }: AssetDetailsDialogProps) => {
const { data } = useAssetsConnectionQuery(); const { data } = useDataProvider({ dataProvider: assetsProvider });
const symbol = const symbol =
typeof assetSymbol === 'string' ? assetSymbol : assetSymbol.symbol; typeof assetSymbol === 'string' ? assetSymbol : assetSymbol.symbol;
const asset = data?.assetsConnection?.edges?.find( const asset = data?.find((a) => a?.symbol === symbol);
(e) => e?.node.symbol === symbol
);
let details: AssetDetails = []; let details: AssetDetails = [];
if (asset != null) { if (asset != null) {
@ -72,31 +74,31 @@ export const AssetDetailsDialog = ({
{ {
key: 'name', key: 'name',
label: t('Name'), label: t('Name'),
value: asset.node.name, value: asset.name,
tooltip: '', // t('Name of the asset (e.g: Great British Pound)') tooltip: '', // t('Name of the asset (e.g: Great British Pound)')
}, },
{ {
key: 'symbol', key: 'symbol',
label: t('Symbol'), label: t('Symbol'),
value: asset.node.symbol, value: asset.symbol,
tooltip: '', // t('Symbol of the asset (e.g: GBP)') tooltip: '', // t('Symbol of the asset (e.g: GBP)')
}, },
{ {
key: 'decimals', key: 'decimals',
label: t('Decimals'), label: t('Decimals'),
value: asset.node.decimals.toString(), value: asset.decimals.toString(),
tooltip: t('Number of decimal / precision handled by this asset'), tooltip: t('Number of decimal / precision handled by this asset'),
}, },
{ {
key: 'quantum', key: 'quantum',
label: t('Quantum'), label: t('Quantum'),
value: asset.node.quantum, value: asset.quantum,
tooltip: t('The minimum economically meaningful amount in the asset'), tooltip: t('The minimum economically meaningful amount in the asset'),
}, },
{ {
key: 'contractaddress', key: 'contractaddress',
label: t('Contract address'), label: t('Contract address'),
value: (asset.node.source as Schema.ERC20).contractAddress, value: (asset.source as Schema.ERC20).contractAddress,
tooltip: t( tooltip: t(
'The address of the contract for the token, on the ethereum network' 'The address of the contract for the token, on the ethereum network'
), ),
@ -105,8 +107,8 @@ export const AssetDetailsDialog = ({
key: 'withdrawalthreshold', key: 'withdrawalthreshold',
label: t('Withdrawal threshold'), label: t('Withdrawal threshold'),
value: addDecimalsFormatNumber( value: addDecimalsFormatNumber(
(asset.node.source as Schema.ERC20).withdrawThreshold, (asset.source as Schema.ERC20).withdrawThreshold,
asset.node.decimals asset.decimals
), ),
tooltip: t( tooltip: t(
'The maximum allowed per withdraw note: this is a temporary measure for restricted mainnet' 'The maximum allowed per withdraw note: this is a temporary measure for restricted mainnet'
@ -116,8 +118,8 @@ export const AssetDetailsDialog = ({
key: 'lifetimelimit', key: 'lifetimelimit',
label: t('Lifetime limit'), label: t('Lifetime limit'),
value: addDecimalsFormatNumber( value: addDecimalsFormatNumber(
(asset.node.source as Schema.ERC20).lifetimeLimit, (asset.source as Schema.ERC20).lifetimeLimit,
asset.node.decimals asset.decimals
), ),
tooltip: t( tooltip: t(
'The lifetime limits deposit per address note: this is a temporary measure for restricted mainnet' 'The lifetime limits deposit per address note: this is a temporary measure for restricted mainnet'

60
libs/assets/src/lib/assets-data-provider.ts Normal file
View File

@ -0,0 +1,60 @@
import {
makeDataProvider,
makeDerivedDataProvider,
} from '@vegaprotocol/react-helpers';
import { AssetsDocument } from './__generated___/Assets';
import { AssetStatus } from '@vegaprotocol/types';
import type {
AssetsQuery,
AssetsFieldsFragment,
} from './__generated___/Assets';
export type Asset = AssetsFieldsFragment;
export interface ERC20AssetSource {
__typename: 'ERC20';
contractAddress: string;
}
export interface BuiltinAssetSource {
__typename: 'BuiltinAsset';
}
export type ERC20Asset = Omit<Asset, 'source'> & {
source: ERC20AssetSource;
};
export type BuiltinAsset = Omit<Asset, 'source'> & {
source: BuiltinAssetSource;
};
export const isAssetTypeERC20 = (
asset?: Pick<Asset, 'source'>
): asset is ERC20Asset => {
if (!asset?.source) return false;
return asset.source.__typename === 'ERC20';
};
const getData = (responseData: AssetsQuery) =>
responseData.assetsConnection?.edges
?.filter((e) => Boolean(e?.node))
.map((e) => e?.node as Asset) ?? [];
export const assetsProvider = makeDataProvider<
AssetsQuery,
Asset[] | null,
never,
never
>({
query: AssetsDocument,
getData,
});
export const enabledAssetsProvider = makeDerivedDataProvider<
ReturnType<typeof getData>,
never
>([assetsProvider], ([assets]) =>
(assets as ReturnType<typeof getData>).filter(
(a) => a.status === AssetStatus.STATUS_ENABLED
)
);

1
libs/assets/src/lib/index.ts
View File

@ -1,2 +1,3 @@
export * from './__generated___/Assets'; export * from './__generated___/Assets';
export * from './assets-data-provider';
export * from './asset-details-dialog'; export * from './asset-details-dialog';

2
libs/assets/tsconfig.spec.json
View File

@ -3,7 +3,7 @@
"compilerOptions": { "compilerOptions": {
"outDir": "../../dist/out-tsc", "outDir": "../../dist/out-tsc",
"module": "commonjs", "module": "commonjs",
"types": ["jest", "node"] "types": ["jest", "node", "@testing-library/jest-dom"]
}, },
"include": [ "include": [
"**/*.test.ts", "**/*.test.ts",

112
libs/deposits/src/lib/__generated__/Deposit.ts generated
View File

@ -1,112 +0,0 @@
import { Schema as Types } from '@vegaprotocol/types';
import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client';
const defaultOptions = {} as const;
export type DepositFieldsFragment = { __typename?: 'Deposit', id: string, status: Types.DepositStatus, amount: string, createdTimestamp: string, creditedTimestamp?: string | null, txHash?: string | null, asset: { __typename?: 'Asset', id: string, symbol: string, decimals: number } };
export type DepositsQueryVariables = Types.Exact<{
partyId: Types.Scalars['ID'];
}>;
export type DepositsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, depositsConnection?: { __typename?: 'DepositsConnection', edges?: Array<{ __typename?: 'DepositEdge', node: { __typename?: 'Deposit', id: string, status: Types.DepositStatus, amount: string, createdTimestamp: string, creditedTimestamp?: string | null, txHash?: string | null, asset: { __typename?: 'Asset', id: string, symbol: string, decimals: number } } } | null> | null } | null } | null };
export type DepositEventSubscriptionVariables = Types.Exact<{
partyId: Types.Scalars['ID'];
}>;
export type DepositEventSubscription = { __typename?: 'Subscription', busEvents?: Array<{ __typename?: 'BusEvent', event: { __typename?: 'Account' } | { __typename?: 'Asset' } | { __typename?: 'AuctionEvent' } | { __typename?: 'Deposit', id: string, status: Types.DepositStatus, amount: string, createdTimestamp: string, creditedTimestamp?: string | null, txHash?: string | null, asset: { __typename?: 'Asset', id: string, symbol: string, decimals: number } } | { __typename?: 'LiquidityProvision' } | { __typename?: 'LossSocialization' } | { __typename?: 'MarginLevels' } | { __typename?: 'Market' } | { __typename?: 'MarketData' } | { __typename?: 'MarketEvent' } | { __typename?: 'MarketTick' } | { __typename?: 'NodeSignature' } | { __typename?: 'OracleSpec' } | { __typename?: 'Order' } | { __typename?: 'Party' } | { __typename?: 'PositionResolution' } | { __typename?: 'Proposal' } | { __typename?: 'RiskFactor' } | { __typename?: 'SettleDistressed' } | { __typename?: 'SettlePosition' } | { __typename?: 'TimeUpdate' } | { __typename?: 'Trade' } | { __typename?: 'TransferResponses' } | { __typename?: 'Vote' } | { __typename?: 'Withdrawal' } }> | null };
export const DepositFieldsFragmentDoc = gql`
fragment DepositFields on Deposit {
id
status
amount
asset {
id
symbol
decimals
}
createdTimestamp
creditedTimestamp
txHash
}
`;
export const DepositsDocument = gql`
query Deposits($partyId: ID!) {
party(id: $partyId) {
id
depositsConnection {
edges {
node {
...DepositFields
}
}
}
}
}
${DepositFieldsFragmentDoc}`;
/**
* __useDepositsQuery__
*
* To run a query within a React component, call `useDepositsQuery` and pass it any options that fit your needs.
* When your component renders, `useDepositsQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useDepositsQuery({
* variables: {
* partyId: // value for 'partyId'
* },
* });
*/
export function useDepositsQuery(baseOptions: Apollo.QueryHookOptions<DepositsQuery, DepositsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<DepositsQuery, DepositsQueryVariables>(DepositsDocument, options);
}
export function useDepositsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<DepositsQuery, DepositsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<DepositsQuery, DepositsQueryVariables>(DepositsDocument, options);
}
export type DepositsQueryHookResult = ReturnType<typeof useDepositsQuery>;
export type DepositsLazyQueryHookResult = ReturnType<typeof useDepositsLazyQuery>;
export type DepositsQueryResult = Apollo.QueryResult<DepositsQuery, DepositsQueryVariables>;
export const DepositEventDocument = gql`
subscription DepositEvent($partyId: ID!) {
busEvents(partyId: $partyId, batchSize: 0, types: [Deposit]) {
event {
... on Deposit {
...DepositFields
}
}
}
}
${DepositFieldsFragmentDoc}`;
/**
* __useDepositEventSubscription__
*
* To run a query within a React component, call `useDepositEventSubscription` and pass it any options that fit your needs.
* When your component renders, `useDepositEventSubscription` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the subscription, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useDepositEventSubscription({
* variables: {
* partyId: // value for 'partyId'
* },
* });
*/
export function useDepositEventSubscription(baseOptions: Apollo.SubscriptionHookOptions<DepositEventSubscription, DepositEventSubscriptionVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useSubscription<DepositEventSubscription, DepositEventSubscriptionVariables>(DepositEventDocument, options);
}
export type DepositEventSubscriptionHookResult = ReturnType<typeof useDepositEventSubscription>;
export type DepositEventSubscriptionResult = Apollo.SubscriptionResult<DepositEventSubscription>;

72
libs/deposits/src/lib/__generated__/DepositAsset.ts generated
View File

@ -1,72 +0,0 @@
/* tslint:disable */
/* eslint-disable */
// @generated
// This file was automatically generated and should not be edited.
import { AssetStatus } from "@vegaprotocol/types";
// ====================================================
// GraphQL query operation: DepositAsset
// ====================================================
export interface DepositAsset_assetsConnection_edges_node_source_BuiltinAsset {
__typename: "BuiltinAsset";
}
export interface DepositAsset_assetsConnection_edges_node_source_ERC20 {
__typename: "ERC20";
/**
* The address of the ERC20 contract
*/
contractAddress: string;
}
export type DepositAsset_assetsConnection_edges_node_source = DepositAsset_assetsConnection_edges_node_source_BuiltinAsset | DepositAsset_assetsConnection_edges_node_source_ERC20;
export interface DepositAsset_assetsConnection_edges_node {
__typename: "Asset";
/**
* The ID of the asset
*/
id: string;
/**
* The full name of the asset (e.g: Great British Pound)
*/
name: string;
/**
* The symbol of the asset (e.g: GBP)
*/
symbol: string;
/**
* The precision of the asset. Should match the decimal precision of the asset on its native chain, e.g: for ERC20 assets, it is often 18
*/
decimals: number;
/**
* The status of the asset in the Vega network
*/
status: AssetStatus;
/**
* The origin source of the asset (e.g: an ERC20 asset)
*/
source: DepositAsset_assetsConnection_edges_node_source;
}
export interface DepositAsset_assetsConnection_edges {
__typename: "AssetEdge";
node: DepositAsset_assetsConnection_edges_node;
}
export interface DepositAsset_assetsConnection {
__typename: "AssetsConnection";
/**
* The assets
*/
edges: (DepositAsset_assetsConnection_edges | null)[] | null;
}
export interface DepositAsset {
/**
* The list of all assets in use in the Vega network or the specified asset if ID is provided
*/
assetsConnection: DepositAsset_assetsConnection;
}

2
libs/deposits/src/lib/__generated__/index.ts generated
View File

@ -1,2 +0,0 @@
export * from './Deposit';
export * from './DepositAsset';

42
libs/deposits/src/lib/deposit-container.tsx
View File

@ -1,54 +1,26 @@
import { gql, useQuery } from '@apollo/client';
import { Networks, useEnvironment } from '@vegaprotocol/environment'; import { Networks, useEnvironment } from '@vegaprotocol/environment';
import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit'; import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
import { useVegaWallet } from '@vegaprotocol/wallet';
import { Web3Container } from '@vegaprotocol/web3'; import { Web3Container } from '@vegaprotocol/web3';
import { DepositManager } from './deposit-manager'; import { DepositManager } from './deposit-manager';
import { getEnabledAssets, t } from '@vegaprotocol/react-helpers'; import { t, useDataProvider } from '@vegaprotocol/react-helpers';
import type { DepositAsset } from './__generated__/DepositAsset'; import { enabledAssetsProvider } from '@vegaprotocol/assets';
const DEPOSITS_QUERY = gql`
query DepositAsset {
assetsConnection {
edges {
node {
id
name
symbol
decimals
status
source {
... on ERC20 {
contractAddress
}
}
}
}
}
}
`;
/** /**
* Fetches data required for the Deposit page * Fetches data required for the Deposit page
*/ */
export const DepositContainer = ({ assetId }: { assetId?: string }) => { export const DepositContainer = ({ assetId }: { assetId?: string }) => {
const { VEGA_ENV } = useEnvironment(); const { VEGA_ENV } = useEnvironment();
const { pubKey } = useVegaWallet(); const { data, loading, error } = useDataProvider({
dataProvider: enabledAssetsProvider,
const { data, loading, error } = useQuery<DepositAsset>(DEPOSITS_QUERY, {
variables: { partyId: pubKey },
skip: !pubKey,
}); });
const assets = getEnabledAssets(data);
return ( return (
<AsyncRenderer<DepositAsset> data={data} loading={loading} error={error}> <AsyncRenderer data={data} loading={loading} error={error}>
{assets.length ? ( {data && data.length ? (
<Web3Container> <Web3Container>
<DepositManager <DepositManager
assetId={assetId} assetId={assetId}
assets={assets} assets={data}
isFaucetable={VEGA_ENV !== Networks.MAINNET} isFaucetable={VEGA_ENV !== Networks.MAINNET}
/> />
</Web3Container> </Web3Container>

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

@ -1,4 +1,5 @@
import type { Asset } from '@vegaprotocol/react-helpers'; import type { Asset } from '@vegaprotocol/assets';
import { isAssetTypeERC20 } from '@vegaprotocol/assets';
import { import {
ethereumAddress, ethereumAddress,
t, t,
@ -7,7 +8,6 @@ import {
minSafe, minSafe,
maxSafe, maxSafe,
addDecimal, addDecimal,
isAssetTypeERC20,
} from '@vegaprotocol/react-helpers'; } from '@vegaprotocol/react-helpers';
import { import {
Button, Button,

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

@ -6,7 +6,7 @@ import { useSubmitFaucet } from './use-submit-faucet';
import { useDepositStore } from './deposit-store'; import { useDepositStore } from './deposit-store';
import { useCallback, useEffect } from 'react'; import { useCallback, useEffect } from 'react';
import { useDepositBalances } from './use-deposit-balances'; import { useDepositBalances } from './use-deposit-balances';
import type { Asset } from '@vegaprotocol/react-helpers'; import type { Asset } from '@vegaprotocol/assets';
interface DepositManagerProps { interface DepositManagerProps {
assetId?: string; assetId?: string;

2
libs/deposits/src/lib/deposit-store.ts
View File

@ -1,4 +1,4 @@
import type { Asset } from '@vegaprotocol/react-helpers'; import type { Asset } from '@vegaprotocol/assets';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import create from 'zustand'; import create from 'zustand';

2
libs/deposits/src/lib/deposits-table.tsx
View File

@ -10,7 +10,7 @@ import type {
VegaValueFormatterParams, VegaValueFormatterParams,
} from '@vegaprotocol/ui-toolkit'; } from '@vegaprotocol/ui-toolkit';
import { AgGridDynamic as AgGrid, Link } from '@vegaprotocol/ui-toolkit'; import { AgGridDynamic as AgGrid, Link } from '@vegaprotocol/ui-toolkit';
import type { DepositFieldsFragment } from './__generated__/Deposit'; import type { DepositFieldsFragment } from './__generated___/Deposit';
import { useEnvironment } from '@vegaprotocol/environment'; import { useEnvironment } from '@vegaprotocol/environment';
import { DepositStatusMapping } from '@vegaprotocol/types'; import { DepositStatusMapping } from '@vegaprotocol/types';

2
libs/deposits/src/lib/index.ts
View File

@ -1,4 +1,4 @@
export * from './__generated__'; export * from './__generated___/Deposit';
export * from './deposit-container'; export * from './deposit-container';
export * from './deposit-form'; export * from './deposit-form';
export * from './deposit-limits'; export * from './deposit-limits';

2
libs/deposits/src/lib/use-deposit-balances.ts
View File

@ -6,7 +6,7 @@ import { useGetAllowance } from './use-get-allowance';
import { useGetBalanceOfERC20Token } from './use-get-balance-of-erc20-token'; import { useGetBalanceOfERC20Token } from './use-get-balance-of-erc20-token';
import { useGetDepositMaximum } from './use-get-deposit-maximum'; import { useGetDepositMaximum } from './use-get-deposit-maximum';
import { useGetDepositedAmount } from './use-get-deposited-amount'; import { useGetDepositedAmount } from './use-get-deposited-amount';
import { isAssetTypeERC20 } from '@vegaprotocol/react-helpers'; import { isAssetTypeERC20 } from '@vegaprotocol/assets';
/** /**
* Hook which fetches all the balances required for depositing * Hook which fetches all the balances required for depositing

4
libs/deposits/src/lib/use-deposits.ts
View File

@ -8,13 +8,13 @@ import { Schema } from '@vegaprotocol/types';
import { import {
useDepositsQuery, useDepositsQuery,
DepositEventDocument, DepositEventDocument,
} from './__generated__/Deposit'; } from './__generated___/Deposit';
import type { import type {
DepositFieldsFragment, DepositFieldsFragment,
DepositsQuery, DepositsQuery,
DepositEventSubscription, DepositEventSubscription,
DepositEventSubscriptionVariables, DepositEventSubscriptionVariables,
} from './__generated__/Deposit'; } from './__generated___/Deposit';
export const useDeposits = () => { export const useDeposits = () => {
const { pubKey } = useVegaWallet(); const { pubKey } = useVegaWallet();

2
libs/deposits/src/lib/use-get-allowance.ts
View File

@ -4,7 +4,7 @@ import { useWeb3React } from '@web3-react/core';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { useEthereumConfig } from '@vegaprotocol/web3'; import { useEthereumConfig } from '@vegaprotocol/web3';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import type { Asset } from '@vegaprotocol/react-helpers'; import type { Asset } from '@vegaprotocol/assets';
import { addDecimal } from '@vegaprotocol/react-helpers'; import { addDecimal } from '@vegaprotocol/react-helpers';
export const useGetAllowance = ( export const useGetAllowance = (

2
libs/deposits/src/lib/use-get-balance-of-erc20-token.ts
View File

@ -3,7 +3,7 @@ import * as Sentry from '@sentry/react';
import { useWeb3React } from '@web3-react/core'; import { useWeb3React } from '@web3-react/core';
import { useCallback } from 'react'; import { useCallback } from 'react';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import type { Asset } from '@vegaprotocol/react-helpers'; import type { Asset } from '@vegaprotocol/assets';
import { addDecimal } from '@vegaprotocol/react-helpers'; import { addDecimal } from '@vegaprotocol/react-helpers';
export const useGetBalanceOfERC20Token = ( export const useGetBalanceOfERC20Token = (

2
libs/deposits/src/lib/use-get-deposit-maximum.ts
View File

@ -1,7 +1,7 @@
import { useCallback } from 'react'; import { useCallback } from 'react';
import * as Sentry from '@sentry/react'; import * as Sentry from '@sentry/react';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import type { Asset } from '@vegaprotocol/react-helpers'; import type { Asset } from '@vegaprotocol/assets';
import { addDecimal } from '@vegaprotocol/react-helpers'; import { addDecimal } from '@vegaprotocol/react-helpers';
import type { CollateralBridge } from '@vegaprotocol/smart-contracts'; import type { CollateralBridge } from '@vegaprotocol/smart-contracts';

2
libs/deposits/src/lib/use-get-deposited-amount.ts
View File

@ -3,7 +3,7 @@ import * as Sentry from '@sentry/react';
import { ethers } from 'ethers'; import { ethers } from 'ethers';
import { useEthereumConfig } from '@vegaprotocol/web3'; import { useEthereumConfig } from '@vegaprotocol/web3';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import type { Asset } from '@vegaprotocol/react-helpers'; import type { Asset } from '@vegaprotocol/assets';
import { addDecimal } from '@vegaprotocol/react-helpers'; import { addDecimal } from '@vegaprotocol/react-helpers';
import { useWeb3React } from '@web3-react/core'; import { useWeb3React } from '@web3-react/core';

3
libs/deposits/src/lib/use-submit-approval.ts
View File

@ -1,4 +1,5 @@
import { isAssetTypeERC20, removeDecimal } from '@vegaprotocol/react-helpers'; import { removeDecimal } from '@vegaprotocol/react-helpers';
import { isAssetTypeERC20 } from '@vegaprotocol/assets';
import * as Sentry from '@sentry/react'; import * as Sentry from '@sentry/react';
import type { Token } from '@vegaprotocol/smart-contracts'; import type { Token } from '@vegaprotocol/smart-contracts';
import { import {

11
libs/deposits/src/lib/use-submit-deposit.tsx
View File

@ -3,15 +3,12 @@ import * as Sentry from '@sentry/react';
import type { import type {
DepositEventSubscription, DepositEventSubscription,
DepositEventSubscriptionVariables, DepositEventSubscriptionVariables,
} from './__generated__/Deposit'; } from './__generated___/Deposit';
import { DepositEventDocument } from './__generated__/Deposit'; import { DepositEventDocument } from './__generated___/Deposit';
import { Schema } from '@vegaprotocol/types'; import { Schema } from '@vegaprotocol/types';
import { useState } from 'react'; import { useState } from 'react';
import { import { remove0x, removeDecimal } from '@vegaprotocol/react-helpers';
isAssetTypeERC20, import { isAssetTypeERC20 } from '@vegaprotocol/assets';
remove0x,
removeDecimal,
} from '@vegaprotocol/react-helpers';
import { import {
useBridgeContract, useBridgeContract,
useEthereumConfig, useEthereumConfig,

2
libs/deposits/src/lib/use-submit-faucet.ts
View File

@ -3,7 +3,7 @@ import * as Sentry from '@sentry/react';
import { useEthereumTransaction, useTokenContract } from '@vegaprotocol/web3'; import { useEthereumTransaction, useTokenContract } from '@vegaprotocol/web3';
import { useDepositStore } from './deposit-store'; import { useDepositStore } from './deposit-store';
import { useGetBalanceOfERC20Token } from './use-get-balance-of-erc20-token'; import { useGetBalanceOfERC20Token } from './use-get-balance-of-erc20-token';
import { isAssetTypeERC20 } from '@vegaprotocol/react-helpers'; import { isAssetTypeERC20 } from '@vegaprotocol/assets';
export const useSubmitFaucet = () => { export const useSubmitFaucet = () => {
const { asset, update } = useDepositStore(); const { asset, update } = useDepositStore();

12
libs/market-depth/src/lib/market-depth-provider.ts
View File

@ -60,19 +60,10 @@ const update: Update<
> = (data, deltas, reload) => { > = (data, deltas, reload) => {
for (const delta of deltas) { for (const delta of deltas) {
if (delta.marketId !== data.id) { if (delta.marketId !== data.id) {
//console.log('wrong-market');
continue; continue;
} }
const sequenceNumber = Number(delta.sequenceNumber); const sequenceNumber = Number(delta.sequenceNumber);
console.log(delta.previousSequenceNumber, delta.sequenceNumber);
if (sequenceNumber <= sequenceNumbers[delta.marketId]) { if (sequenceNumber <= sequenceNumbers[delta.marketId]) {
/*
console.log(
'smaller sequence number',
sequenceNumber,
sequenceNumbers[delta.marketId]
);
*/
return data; return data;
} }
/* /*
@ -82,8 +73,6 @@ const update: Update<
return; return;
} }
*/ */
// const { buy, sell } = delta;
// console.log({ buy, sell });
sequenceNumbers[delta.marketId] = sequenceNumber; sequenceNumbers[delta.marketId] = sequenceNumber;
const updatedData = { const updatedData = {
...data, ...data,
@ -95,7 +84,6 @@ const update: Update<
if (delta.sell) { if (delta.sell) {
updatedData.depth.sell = updateLevels(data.depth.sell ?? [], delta.sell); updatedData.depth.sell = updateLevels(data.depth.sell ?? [], delta.sell);
} }
// console.log({ updatedData });
return updatedData; return updatedData;
} }
return data; return data;

1
libs/react-helpers/src/index.ts
View File

@ -1,5 +1,4 @@
export * from './hooks'; export * from './hooks';
export * from './lib/assets';
export * from './lib/context'; export * from './lib/context';
export * from './lib/format'; export * from './lib/format';
export * from './lib/generic-data-provider'; export * from './lib/generic-data-provider';

65
libs/react-helpers/src/lib/assets.ts
View File

@ -1,65 +0,0 @@
export interface ERC20AssetSource {
__typename: 'ERC20';
contractAddress: string;
}
export interface BuiltinAssetSource {
__typename: 'BuiltinAsset';
}
export interface Asset {
__typename: 'Asset';
id: string;
symbol: string;
name: string;
decimals: number;
source: ERC20AssetSource | BuiltinAssetSource;
}
export enum AssetStatus {
STATUS_ENABLED = 'STATUS_ENABLED',
STATUS_PENDING_LISTING = 'STATUS_PENDING_LISTING',
STATUS_PROPOSED = 'STATUS_PROPOSED',
STATUS_REJECTED = 'STATUS_REJECTED',
}
export interface AssetWithStatus extends Asset {
status: AssetStatus;
}
export type ERC20Asset = Omit<Asset, 'source'> & {
source: ERC20AssetSource;
};
export type BuiltinAsset = Omit<Asset, 'source'> & {
source: BuiltinAssetSource;
};
export const isAssetTypeERC20 = (asset?: Asset): asset is ERC20Asset => {
if (!asset?.source) return false;
return asset.source.__typename === 'ERC20';
};
type AssetEdge<T extends Asset> = {
__typename: 'AssetEdge';
node: T;
};
type AssetEdges<T extends Asset> = { edges: (AssetEdge<T> | null)[] | null };
type AssetsConnection<T extends Asset> = {
assetsConnection: AssetEdges<T> | null;
};
export const getAssets = (data?: AssetsConnection<Asset>): Asset[] =>
data?.assetsConnection?.edges
?.filter((e) => e && e?.node)
.map((e) => (e as AssetEdge<Asset>).node as Asset) || [];
export const getEnabledAssets = (
data?: AssetsConnection<AssetWithStatus>
): Asset[] =>
data?.assetsConnection?.edges
?.filter((e) => e && e?.node)
.map((e) => (e as AssetEdge<AssetWithStatus>).node)
.filter((a) => a.status === AssetStatus.STATUS_ENABLED) || [];

2
libs/types/.env
View File

@ -1 +1 @@
GRAPHQL_SCHEMA_PATH=https://api.n11.testnet.vega.xyz/graphql GRAPHQL_SCHEMA_PATH=https://api.n07.testnet.vega.xyz/graphql

2
libs/web3/src/lib/use-token-contract.ts
View File

@ -1,4 +1,4 @@
import type { ERC20Asset } from '@vegaprotocol/react-helpers'; import type { ERC20Asset } from '@vegaprotocol/assets';
import { Token, TokenFaucetable } from '@vegaprotocol/smart-contracts'; import { Token, TokenFaucetable } from '@vegaprotocol/smart-contracts';
import { useWeb3React } from '@web3-react/core'; import { useWeb3React } from '@web3-react/core';
import { useMemo } from 'react'; import { useMemo } from 'react';

1
libs/withdraws/src/index.ts
View File

@ -10,4 +10,3 @@ export * from './lib/use-verify-withdrawal';
export * from './lib/use-withdrawals'; export * from './lib/use-withdrawals';
export * from './lib/__generated__/Withdrawals'; export * from './lib/__generated__/Withdrawals';
export * from './lib/__generated__/WithdrawalFields'; export * from './lib/__generated__/WithdrawalFields';
export * from './lib/__generated__/WithdrawFormQuery';

139
libs/withdraws/src/lib/__generated__/WithdrawFormQuery.ts generated
View File

@ -1,139 +0,0 @@
/* tslint:disable */
/* eslint-disable */
// @generated
// This file was automatically generated and should not be edited.
import { AccountType, AssetStatus } from "@vegaprotocol/types";
// ====================================================
// GraphQL query operation: WithdrawFormQuery
// ====================================================
export interface WithdrawFormQuery_party_withdrawals {
__typename: "Withdrawal";
/**
* The Vega internal ID of the withdrawal
*/
id: string;
/**
* Hash of the transaction on the foreign chain
*/
txHash: string | null;
}
export interface WithdrawFormQuery_party_accounts_asset {
__typename: "Asset";
/**
* The ID of the asset
*/
id: string;
/**
* The symbol of the asset (e.g: GBP)
*/
symbol: string;
}
export interface WithdrawFormQuery_party_accounts {
__typename: "Account";
/**
* Account type (General, Margin, etc)
*/
type: AccountType;
/**
* Balance as string - current account balance (approx. as balances can be updated several times per second)
*/
balance: string;
/**
* Asset, the 'currency'
*/
asset: WithdrawFormQuery_party_accounts_asset;
}
export interface WithdrawFormQuery_party {
__typename: "Party";
/**
* Party identifier
*/
id: string;
/**
* The list of all withdrawals initiated by the party
*/
withdrawals: WithdrawFormQuery_party_withdrawals[] | null;
/**
* Collateral accounts relating to a party
*/
accounts: WithdrawFormQuery_party_accounts[] | null;
}
export interface WithdrawFormQuery_assetsConnection_edges_node_source_BuiltinAsset {
__typename: "BuiltinAsset";
}
export interface WithdrawFormQuery_assetsConnection_edges_node_source_ERC20 {
__typename: "ERC20";
/**
* The address of the ERC20 contract
*/
contractAddress: string;
}
export type WithdrawFormQuery_assetsConnection_edges_node_source = WithdrawFormQuery_assetsConnection_edges_node_source_BuiltinAsset | WithdrawFormQuery_assetsConnection_edges_node_source_ERC20;
export interface WithdrawFormQuery_assetsConnection_edges_node {
__typename: "Asset";
/**
* The ID of the asset
*/
id: string;
/**
* The symbol of the asset (e.g: GBP)
*/
symbol: string;
/**
* The full name of the asset (e.g: Great British Pound)
*/
name: string;
/**
* The precision of the asset. Should match the decimal precision of the asset on its native chain, e.g: for ERC20 assets, it is often 18
*/
decimals: number;
/**
* The status of the asset in the Vega network
*/
status: AssetStatus;
/**
* The origin source of the asset (e.g: an ERC20 asset)
*/
source: WithdrawFormQuery_assetsConnection_edges_node_source;
}
export interface WithdrawFormQuery_assetsConnection_edges {
__typename: "AssetEdge";
/**
* The asset information
*/
node: WithdrawFormQuery_assetsConnection_edges_node;
}
export interface WithdrawFormQuery_assetsConnection {
__typename: "AssetsConnection";
/**
* The assets
*/
edges: (WithdrawFormQuery_assetsConnection_edges | null)[] | null;
}
export interface WithdrawFormQuery {
/**
* An entity that is trading on the Vega network
*/
party: WithdrawFormQuery_party | null;
/**
* The list of all assets in use in the Vega network or the specified asset if ID is provided
*/
assetsConnection: WithdrawFormQuery_assetsConnection | null;
}
export interface WithdrawFormQueryVariables {
partyId: string;
}

14
libs/withdraws/src/lib/test-helpers.ts
View File

@ -1,4 +1,4 @@
import type { Asset, AssetWithStatus } from '@vegaprotocol/react-helpers'; import type { Asset } from '@vegaprotocol/assets';
import { import {
AccountType, AccountType,
AssetStatus, AssetStatus,
@ -6,15 +6,16 @@ import {
} from '@vegaprotocol/types'; } from '@vegaprotocol/types';
import merge from 'lodash/merge'; import merge from 'lodash/merge';
import type { PartialDeep } from 'type-fest'; import type { PartialDeep } from 'type-fest';
import type { Account } from './types'; import type { AccountFieldsFragment } from '@vegaprotocol/accounts';
import type { Withdrawals_party_withdrawalsConnection_edges_node } from './__generated__/Withdrawals'; import type { Withdrawals_party_withdrawalsConnection_edges_node } from './__generated__/Withdrawals';
export const generateAsset = (override?: PartialDeep<Asset>) => { export const generateAsset = (override?: PartialDeep<Asset>) => {
const defaultAsset: AssetWithStatus = { const defaultAsset: Asset = {
__typename: 'Asset', __typename: 'Asset',
id: 'asset-id', id: 'asset-id',
symbol: 'asset-symbol', symbol: 'asset-symbol',
name: 'asset-name', name: 'asset-name',
quantum: '',
decimals: 5, decimals: 5,
status: AssetStatus.STATUS_ENABLED, status: AssetStatus.STATUS_ENABLED,
source: { source: {
@ -25,13 +26,14 @@ export const generateAsset = (override?: PartialDeep<Asset>) => {
return merge(defaultAsset, override); return merge(defaultAsset, override);
}; };
export const generateAccount = (override?: PartialDeep<Account>) => { export const generateAccount = (
const defaultAccount: Account = { override?: PartialDeep<AccountFieldsFragment>
) => {
const defaultAccount: AccountFieldsFragment = {
type: AccountType.ACCOUNT_TYPE_GENERAL, type: AccountType.ACCOUNT_TYPE_GENERAL,
balance: '100000', balance: '100000',
asset: { asset: {
id: 'asset-id', id: 'asset-id',
symbol: 'asset-symbol',
}, },
}; };
return merge(defaultAccount, override); return merge(defaultAccount, override);

10
libs/withdraws/src/lib/types.ts
View File

@ -1,10 +0,0 @@
import type { AccountType } from '@vegaprotocol/types';
export interface Account {
type: AccountType;
balance: string;
asset: {
id: string;
symbol: string;
};
}

4
libs/withdraws/src/lib/use-get-withdraw-threshold.tsx
View File

@ -1,7 +1,7 @@
import { useCallback } from 'react'; import { useCallback } from 'react';
import { useBridgeContract } from '@vegaprotocol/web3'; import { useBridgeContract } from '@vegaprotocol/web3';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import type { Asset } from '@vegaprotocol/react-helpers'; import type { Asset } from '@vegaprotocol/assets';
import { addDecimal } from '@vegaprotocol/react-helpers'; import { addDecimal } from '@vegaprotocol/react-helpers';
/** /**
@ -12,7 +12,7 @@ import { addDecimal } from '@vegaprotocol/react-helpers';
export const useGetWithdrawThreshold = () => { export const useGetWithdrawThreshold = () => {
const contract = useBridgeContract(); const contract = useBridgeContract();
const getThreshold = useCallback( const getThreshold = useCallback(
async (asset: Asset | undefined) => { async (asset: Pick<Asset, 'source' | 'decimals'> | undefined) => {
if (!contract || asset?.source.__typename !== 'ERC20') { if (!contract || asset?.source.__typename !== 'ERC20') {
return new BigNumber(Infinity); return new BigNumber(Infinity);
} }

6
libs/withdraws/src/lib/use-withdraw-asset.tsx
View File

@ -1,17 +1,17 @@
import { captureException } from '@sentry/react'; import { captureException } from '@sentry/react';
import type { Asset } from '@vegaprotocol/react-helpers'; import type { Asset } from '@vegaprotocol/assets';
import { addDecimal } from '@vegaprotocol/react-helpers'; import { addDecimal } from '@vegaprotocol/react-helpers';
import { AccountType } from '@vegaprotocol/types'; import { AccountType } from '@vegaprotocol/types';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import { useCallback, useEffect } from 'react'; import { useCallback, useEffect } from 'react';
import type { Account } from './types'; import type { AccountFieldsFragment } from '@vegaprotocol/accounts';
import { useGetWithdrawDelay } from './use-get-withdraw-delay'; import { useGetWithdrawDelay } from './use-get-withdraw-delay';
import { useGetWithdrawThreshold } from './use-get-withdraw-threshold'; import { useGetWithdrawThreshold } from './use-get-withdraw-threshold';
import { useWithdrawStore } from './withdraw-store'; import { useWithdrawStore } from './withdraw-store';
export const useWithdrawAsset = ( export const useWithdrawAsset = (
assets: Asset[], assets: Asset[],
accounts: Account[], accounts: AccountFieldsFragment[],
assetId?: string assetId?: string
) => { ) => {
const { asset, balance, min, threshold, delay, update } = useWithdrawStore(); const { asset, balance, min, threshold, delay, update } = useWithdrawStore();

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

@ -1,52 +1,10 @@
import { gql, useQuery } from '@apollo/client'; import { useDataProvider } from '@vegaprotocol/react-helpers';
import { getEnabledAssets, t } from '@vegaprotocol/react-helpers'; import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
import { useMemo } from 'react'; import { enabledAssetsProvider } from '@vegaprotocol/assets';
import { accountsOnlyDataProvider } from '@vegaprotocol/accounts';
import type { WithdrawalArgs } from './use-create-withdraw'; import type { WithdrawalArgs } from './use-create-withdraw';
import { WithdrawManager } from './withdraw-manager'; import { WithdrawManager } from './withdraw-manager';
import type { WithdrawFormQuery } from './__generated__/WithdrawFormQuery'; import { useMemo } from 'react';
export const ASSET_FRAGMENT = gql`
fragment AssetFields on Asset {
id
symbol
name
decimals
status
source {
... on ERC20 {
contractAddress
}
}
}
`;
const WITHDRAW_FORM_QUERY = gql`
${ASSET_FRAGMENT}
query WithdrawFormQuery($partyId: ID!) {
party(id: $partyId) {
id
withdrawals {
id
txHash
}
accounts {
type
balance
asset {
id
symbol
}
}
}
assetsConnection {
edges {
node {
...AssetFields
}
}
}
}
`;
interface WithdrawFormContainerProps { interface WithdrawFormContainerProps {
partyId?: string; partyId?: string;
@ -59,35 +17,35 @@ export const WithdrawFormContainer = ({
partyId, partyId,
submit, submit,
}: WithdrawFormContainerProps) => { }: WithdrawFormContainerProps) => {
const { data, loading, error } = useQuery<WithdrawFormQuery>( const variables = useMemo(() => ({ partyId }), [partyId]);
WITHDRAW_FORM_QUERY, const { data, loading, error } = useDataProvider({
{ dataProvider: accountsOnlyDataProvider,
variables: { partyId }, variables,
} noUpdate: true,
); });
const assets = useMemo(() => { const {
if (!data?.assetsConnection?.edges) { data: assets,
return []; loading: assetsLoading,
} error: assetsError,
} = useDataProvider({
return getEnabledAssets(data); dataProvider: enabledAssetsProvider,
}, [data]); });
if (loading || !data) {
return <div>{t('Loading...')}</div>;
}
if (error) {
return <div>{t('Something went wrong')}</div>;
}
return ( return (
<WithdrawManager <AsyncRenderer
assetId={assetId} loading={loading && assetsLoading}
assets={assets} error={error && assetsError}
accounts={data.party?.accounts || []} data={data}
submit={submit} >
/> {assets && data && (
<WithdrawManager
assetId={assetId}
assets={assets}
accounts={data}
submit={submit}
/>
)}
</AsyncRenderer>
); );
}; };

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

@ -4,7 +4,7 @@ import { useWeb3React } from '@web3-react/core';
import { WithdrawForm } from './withdraw-form'; import { WithdrawForm } from './withdraw-form';
import { generateAsset } from './test-helpers'; import { generateAsset } from './test-helpers';
import type { WithdrawFormProps } from './withdraw-form'; import type { WithdrawFormProps } from './withdraw-form';
import type { Asset } from '@vegaprotocol/react-helpers'; import type { Asset } from '@vegaprotocol/assets';
jest.mock('@web3-react/core'); jest.mock('@web3-react/core');

4
libs/withdraws/src/lib/withdraw-form.tsx
View File

@ -1,4 +1,4 @@
import type { Asset } from '@vegaprotocol/react-helpers'; import type { Asset } from '@vegaprotocol/assets';
import { formatNumber } from '@vegaprotocol/react-helpers'; import { formatNumber } from '@vegaprotocol/react-helpers';
import { import {
ethereumAddress, ethereumAddress,
@ -6,8 +6,8 @@ import {
t, t,
removeDecimal, removeDecimal,
required, required,
isAssetTypeERC20,
} from '@vegaprotocol/react-helpers'; } from '@vegaprotocol/react-helpers';
import { isAssetTypeERC20 } from '@vegaprotocol/assets';
import { import {
Button, Button,
FormGroup, FormGroup,

6
libs/withdraws/src/lib/withdraw-manager.spec.tsx
View File

@ -3,9 +3,9 @@ import userEvent from '@testing-library/user-event';
import { generateAccount, generateAsset } from './test-helpers'; import { generateAccount, generateAsset } from './test-helpers';
import type { WithdrawManagerProps } from './withdraw-manager'; import type { WithdrawManagerProps } from './withdraw-manager';
import { WithdrawManager } from './withdraw-manager'; import { WithdrawManager } from './withdraw-manager';
import type { Asset } from '@vegaprotocol/react-helpers'; import type { Asset } from '@vegaprotocol/assets';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import type { Account } from './types'; import type { AccountFieldsFragment } from '@vegaprotocol/accounts';
const asset = generateAsset(); const asset = generateAsset();
const ethereumAddress = '0x72c22822A19D20DE7e426fB84aa047399Ddd8853'; const ethereumAddress = '0x72c22822A19D20DE7e426fB84aa047399Ddd8853';
@ -17,7 +17,7 @@ jest.mock('@web3-react/core', () => ({
jest.mock('./use-withdraw-asset', () => ({ jest.mock('./use-withdraw-asset', () => ({
useWithdrawAsset: ( useWithdrawAsset: (
assets: Asset[], assets: Asset[],
accounts: Account[], accounts: AccountFieldsFragment[],
assetId?: string assetId?: string
) => ({ ) => ({
asset, asset,

6
libs/withdraws/src/lib/withdraw-manager.tsx
View File

@ -1,13 +1,13 @@
import sortBy from 'lodash/sortBy'; import sortBy from 'lodash/sortBy';
import { WithdrawForm } from './withdraw-form'; import { WithdrawForm } from './withdraw-form';
import type { WithdrawalArgs } from './use-create-withdraw'; import type { WithdrawalArgs } from './use-create-withdraw';
import type { Asset } from '@vegaprotocol/react-helpers'; import type { Asset } from '@vegaprotocol/assets';
import type { Account } from './types'; import type { AccountFieldsFragment } from '@vegaprotocol/accounts';
import { useWithdrawAsset } from './use-withdraw-asset'; import { useWithdrawAsset } from './use-withdraw-asset';
export interface WithdrawManagerProps { export interface WithdrawManagerProps {
assets: Asset[]; assets: Asset[];
accounts: Account[]; accounts: AccountFieldsFragment[];
submit: (args: WithdrawalArgs) => void; submit: (args: WithdrawalArgs) => void;
assetId?: string; assetId?: string;
} }

2
libs/withdraws/src/lib/withdraw-store.ts
View File

@ -1,4 +1,4 @@
import type { Asset } from '@vegaprotocol/react-helpers'; import type { Asset } from '@vegaprotocol/assets';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import create from 'zustand'; import create from 'zustand';