diff --git a/apps/console-lite-e2e/src/support/mocks/generate-accounts.ts b/apps/console-lite-e2e/src/support/mocks/generate-accounts.ts index 2c9d457c8..bd5cdaf2f 100644 --- a/apps/console-lite-e2e/src/support/mocks/generate-accounts.ts +++ b/apps/console-lite-e2e/src/support/mocks/generate-accounts.ts @@ -1,5 +1,6 @@ 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 type { PartialDeep } from 'type-fest'; @@ -86,6 +87,7 @@ export const generateAssets = (override?: PartialDeep) => { symbol: 'tEURO', decimals: 5, name: 'Euro', + source: {}, quantum: '', status: Types.AssetStatus.STATUS_ENABLED, }, @@ -96,6 +98,7 @@ export const generateAssets = (override?: PartialDeep) => { symbol: 'tDAI', decimals: 5, name: 'DAI', + source: {}, quantum: '', status: Types.AssetStatus.STATUS_ENABLED, }, @@ -106,6 +109,7 @@ export const generateAssets = (override?: PartialDeep) => { symbol: 'AST0', decimals: 5, name: 'Asto', + source: {}, quantum: '', status: Types.AssetStatus.STATUS_ENABLED, }, diff --git a/apps/console-lite/src/app/components/deposits/deposits.tsx b/apps/console-lite/src/app/components/deposits/deposits.tsx index 3bc4b3cd2..b2ecfa4af 100644 --- a/apps/console-lite/src/app/components/deposits/deposits.tsx +++ b/apps/console-lite/src/app/components/deposits/deposits.tsx @@ -1,32 +1,12 @@ -import { gql, useQuery } from '@apollo/client'; +import { useMemo } from 'react'; 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 { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit'; import { useVegaWallet } from '@vegaprotocol/wallet'; 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 @@ -34,20 +14,19 @@ const DEPOSITS_QUERY = gql` export const DepositContainer = () => { const { VEGA_ENV } = useEnvironment(); const { pubKey } = useVegaWallet(); - - const { data, loading, error } = useQuery(DEPOSITS_QUERY, { - variables: { partyId: pubKey }, + const variables = useMemo(() => ({ partyId: pubKey }), [pubKey]); + const { data, loading, error } = useDataProvider({ + dataProvider: enabledAssetsProvider, + variables, skip: !pubKey, }); - const assets = getEnabledAssets(data); - return ( - data={data} loading={loading} error={error}> - {assets.length ? ( + + {data && data.length ? ( diff --git a/apps/explorer/src/app/routes/assets/index.tsx b/apps/explorer/src/app/routes/assets/index.tsx index 4243644fe..d2cb18891 100644 --- a/apps/explorer/src/app/routes/assets/index.tsx +++ b/apps/explorer/src/app/routes/assets/index.tsx @@ -1,10 +1,13 @@ import { gql, useQuery } from '@apollo/client'; -import { getAssets, t } from '@vegaprotocol/react-helpers'; +import { t } from '@vegaprotocol/react-helpers'; import React from 'react'; import { RouteTitle } from '../../components/route-title'; import { SubHeading } from '../../components/sub-heading'; 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` query AssetsQuery { @@ -39,7 +42,10 @@ export const ASSETS_QUERY = gql` const Assets = () => { const { data } = useQuery(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 (
diff --git a/apps/token/src/components/vega-wallet/hooks.ts b/apps/token/src/components/vega-wallet/hooks.ts index 3d62cd694..84f52a2bf 100644 --- a/apps/token/src/components/vega-wallet/hooks.ts +++ b/apps/token/src/components/vega-wallet/hooks.ts @@ -17,7 +17,7 @@ import type { } from './__generated__/Delegations'; import { useVegaWallet } from '@vegaprotocol/wallet'; import { useContracts } from '../../contexts/contracts/contracts-context'; -import { isAssetTypeERC20 } from '@vegaprotocol/react-helpers'; +import { isAssetTypeERC20 } from '@vegaprotocol/assets'; import { AccountType } from '@vegaprotocol/types'; const DELEGATIONS_QUERY = gql` diff --git a/apps/trading-e2e/src/integration/deposit.cy.ts b/apps/trading-e2e/src/integration/deposit.cy.ts index 5dcb027d4..3d2e1a823 100644 --- a/apps/trading-e2e/src/integration/deposit.cy.ts +++ b/apps/trading-e2e/src/integration/deposit.cy.ts @@ -1,5 +1,5 @@ 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'; const connectEthWalletBtn = 'connect-eth-wallet-btn'; @@ -14,7 +14,7 @@ describe('deposit form validation', { tags: '@smoke' }, () => { cy.mockGQLSubscription(); cy.mockGQL((req) => { aliasQuery(req, 'NetworkParamsQuery', generateNetworkParameters()); - aliasQuery(req, 'DepositPage', generateDepositPage()); + aliasQuery(req, 'Assets', generateAssets()); }); cy.visit('/portfolio/deposit'); @@ -22,7 +22,7 @@ describe('deposit form validation', { tags: '@smoke' }, () => { cy.getByTestId(connectEthWalletBtn).click(); cy.getByTestId('web3-connector-MetaMask').click(); - cy.wait('@DepositPage'); + cy.wait('@Assets'); }); it('handles empty fields', () => { @@ -41,7 +41,7 @@ describe('deposit form validation', { tags: '@smoke' }, () => { // Deposit amount smaller than minimum viable for selected asset // 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) .clear() .type('0.00000000000000000000000000000000001') diff --git a/apps/trading-e2e/src/integration/withdraw.cy.ts b/apps/trading-e2e/src/integration/withdraw.cy.ts index 2002be06e..30c77ce01 100644 --- a/apps/trading-e2e/src/integration/withdraw.cy.ts +++ b/apps/trading-e2e/src/integration/withdraw.cy.ts @@ -1,9 +1,11 @@ import { aliasQuery } from '@vegaprotocol/cypress'; import { connectEthereumWallet } from '../support/ethereum-wallet'; -import { generateAccounts } from '../support/mocks/generate-accounts'; 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 { generateWithdrawFormQuery } from '../support/mocks/generate-withdraw-page-query'; import { generateWithdrawals } from '../support/mocks/generate-withdrawals'; import { connectVegaWallet } from '../support/vega-wallet'; @@ -24,7 +26,7 @@ describe('withdraw', { tags: '@smoke' }, () => { aliasQuery(req, 'ChainId', generateChainId()); aliasQuery(req, 'Withdrawals', generateWithdrawals()); aliasQuery(req, 'NetworkParamsQuery', generateNetworkParameters()); - aliasQuery(req, 'WithdrawFormQuery', generateWithdrawFormQuery()); + aliasQuery(req, 'Assets', generateAssets()); aliasQuery(req, 'Accounts', generateAccounts()); }); cy.mockGQLSubscription(); @@ -39,7 +41,8 @@ describe('withdraw', { tags: '@smoke' }, () => { connectEthereumWallet(); cy.getByTestId('withdraw-dialog-button').click(); - cy.wait('@WithdrawFormQuery'); + cy.wait('@Accounts'); + cy.wait('@Assets'); }); it('form validation', () => { diff --git a/apps/trading-e2e/src/support/mocks/generate-accounts.ts b/apps/trading-e2e/src/support/mocks/generate-accounts.ts index 13c9011a3..d1b86c9ca 100644 --- a/apps/trading-e2e/src/support/mocks/generate-accounts.ts +++ b/apps/trading-e2e/src/support/mocks/generate-accounts.ts @@ -1,5 +1,6 @@ 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 type { PartialDeep } from 'type-fest'; @@ -70,6 +71,17 @@ export const generateAccounts = ( 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) => { symbol: 'tEURO', decimals: 5, name: 'Euro', - quantum: '', + source: { + __typename: 'ERC20', + contractAddress: '0x0158031158Bb4dF2AD02eAA31e8963E84EA978a4', + }, + quantum: '1', status: Types.AssetStatus.STATUS_ENABLED, }, }, @@ -96,7 +112,11 @@ export const generateAssets = (override?: PartialDeep) => { symbol: 'tDAI', decimals: 5, name: 'DAI', - quantum: '', + source: { + __typename: 'ERC20', + contractAddress: '0x26223f9C67871CFcEa329975f7BC0C9cB8FBDb9b', + }, + quantum: '1', status: Types.AssetStatus.STATUS_ENABLED, }, }, @@ -106,10 +126,46 @@ export const generateAssets = (override?: PartialDeep) => { symbol: 'AST0', decimals: 5, name: 'Asto', - quantum: '', + source: {}, + quantum: '1', 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', + }, ], }, }; diff --git a/apps/trading-e2e/src/support/mocks/generate-deposit-page.ts b/apps/trading-e2e/src/support/mocks/generate-deposit-page.ts deleted file mode 100644 index 105e41d07..000000000 --- a/apps/trading-e2e/src/support/mocks/generate-deposit-page.ts +++ /dev/null @@ -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 -) => { - 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); -}; diff --git a/apps/trading-e2e/src/support/mocks/generate-withdraw-page-query.ts b/apps/trading-e2e/src/support/mocks/generate-withdraw-page-query.ts deleted file mode 100644 index 610f6f2ca..000000000 --- a/apps/trading-e2e/src/support/mocks/generate-withdraw-page-query.ts +++ /dev/null @@ -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 => { - 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); -}; diff --git a/apps/trading/lib/query-fragments.ts b/apps/trading/lib/query-fragments.ts deleted file mode 100644 index b1dd2ed11..000000000 --- a/apps/trading/lib/query-fragments.ts +++ /dev/null @@ -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 - } - } - } -`; diff --git a/apps/trading/pages/portfolio/deposit/Deposit.graphql b/apps/trading/pages/portfolio/deposit/Deposit.graphql deleted file mode 100644 index e004bf2f6..000000000 --- a/apps/trading/pages/portfolio/deposit/Deposit.graphql +++ /dev/null @@ -1,17 +0,0 @@ -query DepositPage { - assetsConnection { - edges { - node { - id - symbol - name - decimals - source { - ... on ERC20 { - contractAddress - } - } - } - } - } -} diff --git a/apps/trading/pages/portfolio/deposit/__generated__/DepositPage.ts b/apps/trading/pages/portfolio/deposit/__generated__/DepositPage.ts deleted file mode 100644 index 858b6236b..000000000 --- a/apps/trading/pages/portfolio/deposit/__generated__/DepositPage.ts +++ /dev/null @@ -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; -} diff --git a/apps/trading/pages/portfolio/deposit/__generated___/Deposit.ts b/apps/trading/pages/portfolio/deposit/__generated___/Deposit.ts deleted file mode 100644 index a695f0dc0..000000000 --- a/apps/trading/pages/portfolio/deposit/__generated___/Deposit.ts +++ /dev/null @@ -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) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useQuery(DepositPageDocument, options); - } -export function useDepositPageLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useLazyQuery(DepositPageDocument, options); - } -export type DepositPageQueryHookResult = ReturnType; -export type DepositPageLazyQueryHookResult = ReturnType; -export type DepositPageQueryResult = Apollo.QueryResult; \ No newline at end of file diff --git a/apps/trading/pages/portfolio/deposit/deposit-container.tsx b/apps/trading/pages/portfolio/deposit/deposit-container.tsx index cf609c592..0a1821361 100644 --- a/apps/trading/pages/portfolio/deposit/deposit-container.tsx +++ b/apps/trading/pages/portfolio/deposit/deposit-container.tsx @@ -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 { getEnabledAssets, t } from '@vegaprotocol/react-helpers'; +import { useDataProvider, t } from '@vegaprotocol/react-helpers'; +import { enabledAssetsProvider } from '@vegaprotocol/assets'; import { useEnvironment } from '@vegaprotocol/environment'; -import { 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 - } - } - } - } -`; +import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit'; /** * Fetches data required for the Deposit page */ export const DepositContainer = () => { const { VEGA_ENV } = useEnvironment(); - + const { data, error, loading } = useDataProvider({ + dataProvider: enabledAssetsProvider, + }); return ( - - query={DEPOSIT_PAGE_QUERY} - render={(data) => { - const assets = getEnabledAssets(data); - if (!assets.length) { + { + if (!assets || !assets.length) { return (

{t('No assets on this network')}

diff --git a/libs/accounts/src/lib/Accounts.graphql b/libs/accounts/src/lib/Accounts.graphql index 661080629..1d91d95d2 100644 --- a/libs/accounts/src/lib/Accounts.graphql +++ b/libs/accounts/src/lib/Accounts.graphql @@ -26,22 +26,3 @@ subscription AccountEvents($partyId: ID!) { marketId } } - -fragment AssetsFields on Asset { - id - name - symbol - decimals - quantum - status -} - -query Assets { - assetsConnection { - edges { - node { - ...AssetsFields - } - } - } -} diff --git a/libs/accounts/src/lib/__generated___/Accounts.ts b/libs/accounts/src/lib/__generated___/Accounts.ts index b45f04ac9..5a80482fd 100644 --- a/libs/accounts/src/lib/__generated___/Accounts.ts +++ b/libs/accounts/src/lib/__generated___/Accounts.ts @@ -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 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` fragment AccountFields on Account { 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` query Accounts($partyId: ID!) { party(id: $partyId) { @@ -118,42 +101,4 @@ export function useAccountEventsSubscription(baseOptions: Apollo.SubscriptionHoo return Apollo.useSubscription(AccountEventsDocument, options); } export type AccountEventsSubscriptionHookResult = ReturnType; -export type AccountEventsSubscriptionResult = Apollo.SubscriptionResult; -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) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useQuery(AssetsDocument, options); - } -export function useAssetsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useLazyQuery(AssetsDocument, options); - } -export type AssetsQueryHookResult = ReturnType; -export type AssetsLazyQueryHookResult = ReturnType; -export type AssetsQueryResult = Apollo.QueryResult; \ No newline at end of file +export type AccountEventsSubscriptionResult = Apollo.SubscriptionResult; \ No newline at end of file diff --git a/libs/accounts/src/lib/accounts-data-provider.ts b/libs/accounts/src/lib/accounts-data-provider.ts index 299b8e789..97c61475e 100644 --- a/libs/accounts/src/lib/accounts-data-provider.ts +++ b/libs/accounts/src/lib/accounts-data-provider.ts @@ -8,7 +8,6 @@ import type { AccountFieldsFragment, AccountsQuery, AccountEventsSubscription, - AssetsFieldsFragment, } from './__generated___/Accounts'; import { makeDataProvider, @@ -17,7 +16,8 @@ import { import { AccountType } from '@vegaprotocol/types'; import type { Market } 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( account: @@ -77,7 +77,7 @@ const getDelta = ( subscriptionData: AccountEventsSubscription ): AccountEventsSubscription['accounts'] => subscriptionData.accounts; -export const accountsBasedDataProvider = makeDataProvider< +export const accountsOnlyDataProvider = makeDataProvider< AccountsQuery, AccountFieldsFragment[], AccountEventsSubscription, @@ -155,7 +155,7 @@ const getAssetAccountAggregation = ( }; export const accountsDataProvider = makeDerivedDataProvider( - [accountsBasedDataProvider, marketsProvider, assetProvider], + [accountsOnlyDataProvider, marketsProvider, assetsProvider], ([accounts, markets, assets]): Account[] | null => { return accounts ? accounts diff --git a/libs/accounts/src/lib/accounts-manager.tsx b/libs/accounts/src/lib/accounts-manager.tsx index 231a37795..9ed00c085 100644 --- a/libs/accounts/src/lib/accounts-manager.tsx +++ b/libs/accounts/src/lib/accounts-manager.tsx @@ -1,4 +1,4 @@ -import type { Asset } from '@vegaprotocol/react-helpers'; +import type { Asset } from '@vegaprotocol/assets'; import { useDataProvider } from '@vegaprotocol/react-helpers'; import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; import type { AgGridReact } from 'ag-grid-react'; diff --git a/libs/accounts/src/lib/accounts-table.tsx b/libs/accounts/src/lib/accounts-table.tsx index 5c52f00db..48a7e41ed 100644 --- a/libs/accounts/src/lib/accounts-table.tsx +++ b/libs/accounts/src/lib/accounts-table.tsx @@ -1,6 +1,6 @@ import { forwardRef, useState } from 'react'; 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 type { ValueProps, diff --git a/libs/accounts/src/lib/asset-data-provider.ts b/libs/accounts/src/lib/asset-data-provider.ts deleted file mode 100644 index 7509b61d4..000000000 --- a/libs/accounts/src/lib/asset-data-provider.ts +++ /dev/null @@ -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, -}); diff --git a/libs/assets/src/lib/Asset.graphql b/libs/assets/src/lib/Asset.graphql deleted file mode 100644 index d3187e1a0..000000000 --- a/libs/assets/src/lib/Asset.graphql +++ /dev/null @@ -1,16 +0,0 @@ -query Asset($assetId: ID!) { - asset(id: $assetId) { - id - name - symbol - decimals - quantum - source { - ... on ERC20 { - contractAddress - lifetimeLimit - withdrawThreshold - } - } - } -} diff --git a/libs/assets/src/lib/Assets.graphql b/libs/assets/src/lib/Assets.graphql index 996835bfd..4eb0477e6 100644 --- a/libs/assets/src/lib/Assets.graphql +++ b/libs/assets/src/lib/Assets.graphql @@ -1,19 +1,22 @@ -query AssetsConnection { +fragment AssetsFields on Asset { + id + name + symbol + decimals + quantum + status + source { + ... on ERC20 { + contractAddress + } + } +} + +query Assets { assetsConnection { edges { node { - id - name - symbol - decimals - quantum - source { - ... on ERC20 { - contractAddress - lifetimeLimit - withdrawThreshold - } - } + ...AssetsFields } } } diff --git a/libs/assets/src/lib/__generated___/Asset.ts b/libs/assets/src/lib/__generated___/Asset.ts deleted file mode 100644 index af5f4739a..000000000 --- a/libs/assets/src/lib/__generated___/Asset.ts +++ /dev/null @@ -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) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useQuery(AssetDocument, options); - } -export function useAssetLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useLazyQuery(AssetDocument, options); - } -export type AssetQueryHookResult = ReturnType; -export type AssetLazyQueryHookResult = ReturnType; -export type AssetQueryResult = Apollo.QueryResult; \ No newline at end of file diff --git a/libs/assets/src/lib/__generated___/Assets.ts b/libs/assets/src/lib/__generated___/Assets.ts index a4d53232e..07c585f43 100644 --- a/libs/assets/src/lib/__generated___/Assets.ts +++ b/libs/assets/src/lib/__generated___/Assets.ts @@ -3,58 +3,63 @@ import { Schema as Types } from '@vegaprotocol/types'; import { gql } from '@apollo/client'; import * as Apollo from '@apollo/client'; 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 AssetsConnectionDocument = gql` - query AssetsConnection { - assetsConnection { - edges { - node { - id - name - symbol - decimals - quantum - source { - ... on ERC20 { - contractAddress - lifetimeLimit - withdrawThreshold - } - } - } +export const AssetsFieldsFragmentDoc = gql` + fragment AssetsFields on Asset { + id + name + symbol + decimals + quantum + status + source { + ... on ERC20 { + contractAddress } } } `; +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. - * When your component renders, `useAssetsConnectionQuery` returns an object from Apollo Client that contains loading, error, and data properties + * 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 } = useAssetsConnectionQuery({ + * const { data, loading, error } = useAssetsQuery({ * variables: { * }, * }); */ -export function useAssetsConnectionQuery(baseOptions?: Apollo.QueryHookOptions) { +export function useAssetsQuery(baseOptions?: Apollo.QueryHookOptions) { const options = {...defaultOptions, ...baseOptions} - return Apollo.useQuery(AssetsConnectionDocument, options); + return Apollo.useQuery(AssetsDocument, options); } -export function useAssetsConnectionLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { +export function useAssetsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { const options = {...defaultOptions, ...baseOptions} - return Apollo.useLazyQuery(AssetsConnectionDocument, options); + return Apollo.useLazyQuery(AssetsDocument, options); } -export type AssetsConnectionQueryHookResult = ReturnType; -export type AssetsConnectionLazyQueryHookResult = ReturnType; -export type AssetsConnectionQueryResult = Apollo.QueryResult; \ No newline at end of file +export type AssetsQueryHookResult = ReturnType; +export type AssetsLazyQueryHookResult = ReturnType; +export type AssetsQueryResult = Apollo.QueryResult; \ No newline at end of file diff --git a/libs/assets/src/lib/asset-details-dialog.spec.tsx b/libs/assets/src/lib/asset-details-dialog.spec.tsx index 509322051..29715a999 100644 --- a/libs/assets/src/lib/asset-details-dialog.spec.tsx +++ b/libs/assets/src/lib/asset-details-dialog.spec.tsx @@ -1,7 +1,7 @@ import { MockedProvider } from '@apollo/react-testing'; import { render, screen } from '@testing-library/react'; import { AssetDetailsDialog } from './asset-details-dialog'; -import { AssetsConnectionDocument } from './__generated___/Assets'; +import { AssetsDocument } from './__generated___/Assets'; const mockedData = { data: { @@ -273,7 +273,7 @@ const mockedData = { const mocks = [ { request: { - query: AssetsConnectionDocument, + query: AssetsDocument, variables: {}, }, result: mockedData, diff --git a/libs/assets/src/lib/asset-details-dialog.tsx b/libs/assets/src/lib/asset-details-dialog.tsx index badcb096d..e5cc37d27 100644 --- a/libs/assets/src/lib/asset-details-dialog.tsx +++ b/libs/assets/src/lib/asset-details-dialog.tsx @@ -1,5 +1,9 @@ -import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers'; -import type { Asset } from '@vegaprotocol/react-helpers'; +import { + addDecimalsFormatNumber, + t, + useDataProvider, +} from '@vegaprotocol/react-helpers'; +import type { Asset } from './assets-data-provider'; import { Button, Dialog, @@ -9,7 +13,7 @@ import { Splash, Tooltip, } from '@vegaprotocol/ui-toolkit'; -import { useAssetsConnectionQuery } from './__generated___/Assets'; +import { assetsProvider } from './assets-data-provider'; import type { Schema } from '@vegaprotocol/types'; import create from 'zustand'; @@ -59,12 +63,10 @@ export const AssetDetailsDialog = ({ open, onChange, }: AssetDetailsDialogProps) => { - const { data } = useAssetsConnectionQuery(); + const { data } = useDataProvider({ dataProvider: assetsProvider }); const symbol = typeof assetSymbol === 'string' ? assetSymbol : assetSymbol.symbol; - const asset = data?.assetsConnection?.edges?.find( - (e) => e?.node.symbol === symbol - ); + const asset = data?.find((a) => a?.symbol === symbol); let details: AssetDetails = []; if (asset != null) { @@ -72,31 +74,31 @@ export const AssetDetailsDialog = ({ { key: 'name', label: t('Name'), - value: asset.node.name, + value: asset.name, tooltip: '', // t('Name of the asset (e.g: Great British Pound)') }, { key: 'symbol', label: t('Symbol'), - value: asset.node.symbol, + value: asset.symbol, tooltip: '', // t('Symbol of the asset (e.g: GBP)') }, { key: 'decimals', label: t('Decimals'), - value: asset.node.decimals.toString(), + value: asset.decimals.toString(), tooltip: t('Number of decimal / precision handled by this asset'), }, { key: 'quantum', label: t('Quantum'), - value: asset.node.quantum, + value: asset.quantum, tooltip: t('The minimum economically meaningful amount in the asset'), }, { key: 'contractaddress', label: t('Contract address'), - value: (asset.node.source as Schema.ERC20).contractAddress, + value: (asset.source as Schema.ERC20).contractAddress, tooltip: t( 'The address of the contract for the token, on the ethereum network' ), @@ -105,8 +107,8 @@ export const AssetDetailsDialog = ({ key: 'withdrawalthreshold', label: t('Withdrawal threshold'), value: addDecimalsFormatNumber( - (asset.node.source as Schema.ERC20).withdrawThreshold, - asset.node.decimals + (asset.source as Schema.ERC20).withdrawThreshold, + asset.decimals ), tooltip: t( 'The maximum allowed per withdraw note: this is a temporary measure for restricted mainnet' @@ -116,8 +118,8 @@ export const AssetDetailsDialog = ({ key: 'lifetimelimit', label: t('Lifetime limit'), value: addDecimalsFormatNumber( - (asset.node.source as Schema.ERC20).lifetimeLimit, - asset.node.decimals + (asset.source as Schema.ERC20).lifetimeLimit, + asset.decimals ), tooltip: t( 'The lifetime limits deposit per address note: this is a temporary measure for restricted mainnet' diff --git a/libs/assets/src/lib/assets-data-provider.ts b/libs/assets/src/lib/assets-data-provider.ts new file mode 100644 index 000000000..c811357c4 --- /dev/null +++ b/libs/assets/src/lib/assets-data-provider.ts @@ -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 & { + source: ERC20AssetSource; +}; + +export type BuiltinAsset = Omit & { + source: BuiltinAssetSource; +}; + +export const isAssetTypeERC20 = ( + asset?: Pick +): 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, + never +>([assetsProvider], ([assets]) => + (assets as ReturnType).filter( + (a) => a.status === AssetStatus.STATUS_ENABLED + ) +); diff --git a/libs/assets/src/lib/index.ts b/libs/assets/src/lib/index.ts index c07a13583..b8041e7cb 100644 --- a/libs/assets/src/lib/index.ts +++ b/libs/assets/src/lib/index.ts @@ -1,2 +1,3 @@ export * from './__generated___/Assets'; +export * from './assets-data-provider'; export * from './asset-details-dialog'; diff --git a/libs/assets/tsconfig.spec.json b/libs/assets/tsconfig.spec.json index a85d573fc..3da863401 100644 --- a/libs/assets/tsconfig.spec.json +++ b/libs/assets/tsconfig.spec.json @@ -3,7 +3,7 @@ "compilerOptions": { "outDir": "../../dist/out-tsc", "module": "commonjs", - "types": ["jest", "node"] + "types": ["jest", "node", "@testing-library/jest-dom"] }, "include": [ "**/*.test.ts", diff --git a/libs/deposits/src/lib/__generated__/Deposit.ts b/libs/deposits/src/lib/__generated__/Deposit.ts deleted file mode 100644 index 2d06ea49a..000000000 --- a/libs/deposits/src/lib/__generated__/Deposit.ts +++ /dev/null @@ -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) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useQuery(DepositsDocument, options); - } -export function useDepositsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useLazyQuery(DepositsDocument, options); - } -export type DepositsQueryHookResult = ReturnType; -export type DepositsLazyQueryHookResult = ReturnType; -export type DepositsQueryResult = Apollo.QueryResult; -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) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useSubscription(DepositEventDocument, options); - } -export type DepositEventSubscriptionHookResult = ReturnType; -export type DepositEventSubscriptionResult = Apollo.SubscriptionResult; \ No newline at end of file diff --git a/libs/deposits/src/lib/__generated__/DepositAsset.ts b/libs/deposits/src/lib/__generated__/DepositAsset.ts deleted file mode 100644 index 5113e5c4e..000000000 --- a/libs/deposits/src/lib/__generated__/DepositAsset.ts +++ /dev/null @@ -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; -} diff --git a/libs/deposits/src/lib/__generated__/index.ts b/libs/deposits/src/lib/__generated__/index.ts deleted file mode 100644 index 28bd955ea..000000000 --- a/libs/deposits/src/lib/__generated__/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Deposit'; -export * from './DepositAsset'; diff --git a/libs/deposits/src/lib/deposit-container.tsx b/libs/deposits/src/lib/deposit-container.tsx index 05611bcac..fa680011d 100644 --- a/libs/deposits/src/lib/deposit-container.tsx +++ b/libs/deposits/src/lib/deposit-container.tsx @@ -1,54 +1,26 @@ -import { gql, useQuery } from '@apollo/client'; import { Networks, useEnvironment } from '@vegaprotocol/environment'; import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit'; -import { useVegaWallet } from '@vegaprotocol/wallet'; import { Web3Container } from '@vegaprotocol/web3'; import { DepositManager } from './deposit-manager'; -import { getEnabledAssets, t } from '@vegaprotocol/react-helpers'; -import type { DepositAsset } from './__generated__/DepositAsset'; - -const DEPOSITS_QUERY = gql` - query DepositAsset { - assetsConnection { - edges { - node { - id - name - symbol - decimals - status - source { - ... on ERC20 { - contractAddress - } - } - } - } - } - } -`; +import { t, useDataProvider } from '@vegaprotocol/react-helpers'; +import { enabledAssetsProvider } from '@vegaprotocol/assets'; /** * Fetches data required for the Deposit page */ export const DepositContainer = ({ assetId }: { assetId?: string }) => { const { VEGA_ENV } = useEnvironment(); - const { pubKey } = useVegaWallet(); - - const { data, loading, error } = useQuery(DEPOSITS_QUERY, { - variables: { partyId: pubKey }, - skip: !pubKey, + const { data, loading, error } = useDataProvider({ + dataProvider: enabledAssetsProvider, }); - const assets = getEnabledAssets(data); - return ( - data={data} loading={loading} error={error}> - {assets.length ? ( + + {data && data.length ? ( diff --git a/libs/deposits/src/lib/deposit-form.tsx b/libs/deposits/src/lib/deposit-form.tsx index d5d6d1d91..54143ee32 100644 --- a/libs/deposits/src/lib/deposit-form.tsx +++ b/libs/deposits/src/lib/deposit-form.tsx @@ -1,4 +1,5 @@ -import type { Asset } from '@vegaprotocol/react-helpers'; +import type { Asset } from '@vegaprotocol/assets'; +import { isAssetTypeERC20 } from '@vegaprotocol/assets'; import { ethereumAddress, t, @@ -7,7 +8,6 @@ import { minSafe, maxSafe, addDecimal, - isAssetTypeERC20, } from '@vegaprotocol/react-helpers'; import { Button, diff --git a/libs/deposits/src/lib/deposit-manager.tsx b/libs/deposits/src/lib/deposit-manager.tsx index 2813c2ecb..c8ae442fc 100644 --- a/libs/deposits/src/lib/deposit-manager.tsx +++ b/libs/deposits/src/lib/deposit-manager.tsx @@ -6,7 +6,7 @@ import { useSubmitFaucet } from './use-submit-faucet'; import { useDepositStore } from './deposit-store'; import { useCallback, useEffect } from 'react'; import { useDepositBalances } from './use-deposit-balances'; -import type { Asset } from '@vegaprotocol/react-helpers'; +import type { Asset } from '@vegaprotocol/assets'; interface DepositManagerProps { assetId?: string; diff --git a/libs/deposits/src/lib/deposit-store.ts b/libs/deposits/src/lib/deposit-store.ts index 4adb4440a..b9e0d13f3 100644 --- a/libs/deposits/src/lib/deposit-store.ts +++ b/libs/deposits/src/lib/deposit-store.ts @@ -1,4 +1,4 @@ -import type { Asset } from '@vegaprotocol/react-helpers'; +import type { Asset } from '@vegaprotocol/assets'; import BigNumber from 'bignumber.js'; import create from 'zustand'; diff --git a/libs/deposits/src/lib/deposits-table.tsx b/libs/deposits/src/lib/deposits-table.tsx index e04bb32a8..eddcf32ce 100644 --- a/libs/deposits/src/lib/deposits-table.tsx +++ b/libs/deposits/src/lib/deposits-table.tsx @@ -10,7 +10,7 @@ import type { VegaValueFormatterParams, } 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 { DepositStatusMapping } from '@vegaprotocol/types'; diff --git a/libs/deposits/src/lib/index.ts b/libs/deposits/src/lib/index.ts index c9f1840db..75cfcfb10 100644 --- a/libs/deposits/src/lib/index.ts +++ b/libs/deposits/src/lib/index.ts @@ -1,4 +1,4 @@ -export * from './__generated__'; +export * from './__generated___/Deposit'; export * from './deposit-container'; export * from './deposit-form'; export * from './deposit-limits'; diff --git a/libs/deposits/src/lib/use-deposit-balances.ts b/libs/deposits/src/lib/use-deposit-balances.ts index 3de32d65e..1864a8754 100644 --- a/libs/deposits/src/lib/use-deposit-balances.ts +++ b/libs/deposits/src/lib/use-deposit-balances.ts @@ -6,7 +6,7 @@ import { useGetAllowance } from './use-get-allowance'; import { useGetBalanceOfERC20Token } from './use-get-balance-of-erc20-token'; import { useGetDepositMaximum } from './use-get-deposit-maximum'; 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 diff --git a/libs/deposits/src/lib/use-deposits.ts b/libs/deposits/src/lib/use-deposits.ts index 3fdf138b8..348791b76 100644 --- a/libs/deposits/src/lib/use-deposits.ts +++ b/libs/deposits/src/lib/use-deposits.ts @@ -8,13 +8,13 @@ import { Schema } from '@vegaprotocol/types'; import { useDepositsQuery, DepositEventDocument, -} from './__generated__/Deposit'; +} from './__generated___/Deposit'; import type { DepositFieldsFragment, DepositsQuery, DepositEventSubscription, DepositEventSubscriptionVariables, -} from './__generated__/Deposit'; +} from './__generated___/Deposit'; export const useDeposits = () => { const { pubKey } = useVegaWallet(); diff --git a/libs/deposits/src/lib/use-get-allowance.ts b/libs/deposits/src/lib/use-get-allowance.ts index 42468e69e..5e2be32f5 100644 --- a/libs/deposits/src/lib/use-get-allowance.ts +++ b/libs/deposits/src/lib/use-get-allowance.ts @@ -4,7 +4,7 @@ import { useWeb3React } from '@web3-react/core'; import { useCallback } from 'react'; import { useEthereumConfig } from '@vegaprotocol/web3'; import BigNumber from 'bignumber.js'; -import type { Asset } from '@vegaprotocol/react-helpers'; +import type { Asset } from '@vegaprotocol/assets'; import { addDecimal } from '@vegaprotocol/react-helpers'; export const useGetAllowance = ( diff --git a/libs/deposits/src/lib/use-get-balance-of-erc20-token.ts b/libs/deposits/src/lib/use-get-balance-of-erc20-token.ts index 7ffb0b311..3e87d40ea 100644 --- a/libs/deposits/src/lib/use-get-balance-of-erc20-token.ts +++ b/libs/deposits/src/lib/use-get-balance-of-erc20-token.ts @@ -3,7 +3,7 @@ import * as Sentry from '@sentry/react'; import { useWeb3React } from '@web3-react/core'; import { useCallback } from 'react'; import BigNumber from 'bignumber.js'; -import type { Asset } from '@vegaprotocol/react-helpers'; +import type { Asset } from '@vegaprotocol/assets'; import { addDecimal } from '@vegaprotocol/react-helpers'; export const useGetBalanceOfERC20Token = ( diff --git a/libs/deposits/src/lib/use-get-deposit-maximum.ts b/libs/deposits/src/lib/use-get-deposit-maximum.ts index 267588d77..8c3182e9f 100644 --- a/libs/deposits/src/lib/use-get-deposit-maximum.ts +++ b/libs/deposits/src/lib/use-get-deposit-maximum.ts @@ -1,7 +1,7 @@ import { useCallback } from 'react'; import * as Sentry from '@sentry/react'; 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 type { CollateralBridge } from '@vegaprotocol/smart-contracts'; diff --git a/libs/deposits/src/lib/use-get-deposited-amount.ts b/libs/deposits/src/lib/use-get-deposited-amount.ts index ad85f4050..a268e2b96 100644 --- a/libs/deposits/src/lib/use-get-deposited-amount.ts +++ b/libs/deposits/src/lib/use-get-deposited-amount.ts @@ -3,7 +3,7 @@ import * as Sentry from '@sentry/react'; import { ethers } from 'ethers'; import { useEthereumConfig } from '@vegaprotocol/web3'; 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 { useWeb3React } from '@web3-react/core'; diff --git a/libs/deposits/src/lib/use-submit-approval.ts b/libs/deposits/src/lib/use-submit-approval.ts index 55255be38..c4b1c591d 100644 --- a/libs/deposits/src/lib/use-submit-approval.ts +++ b/libs/deposits/src/lib/use-submit-approval.ts @@ -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 type { Token } from '@vegaprotocol/smart-contracts'; import { diff --git a/libs/deposits/src/lib/use-submit-deposit.tsx b/libs/deposits/src/lib/use-submit-deposit.tsx index d71ce9546..a9816bea8 100644 --- a/libs/deposits/src/lib/use-submit-deposit.tsx +++ b/libs/deposits/src/lib/use-submit-deposit.tsx @@ -3,15 +3,12 @@ import * as Sentry from '@sentry/react'; import type { DepositEventSubscription, DepositEventSubscriptionVariables, -} from './__generated__/Deposit'; -import { DepositEventDocument } from './__generated__/Deposit'; +} from './__generated___/Deposit'; +import { DepositEventDocument } from './__generated___/Deposit'; import { Schema } from '@vegaprotocol/types'; import { useState } from 'react'; -import { - isAssetTypeERC20, - remove0x, - removeDecimal, -} from '@vegaprotocol/react-helpers'; +import { remove0x, removeDecimal } from '@vegaprotocol/react-helpers'; +import { isAssetTypeERC20 } from '@vegaprotocol/assets'; import { useBridgeContract, useEthereumConfig, diff --git a/libs/deposits/src/lib/use-submit-faucet.ts b/libs/deposits/src/lib/use-submit-faucet.ts index 4bc28e7e8..4a9e67002 100644 --- a/libs/deposits/src/lib/use-submit-faucet.ts +++ b/libs/deposits/src/lib/use-submit-faucet.ts @@ -3,7 +3,7 @@ import * as Sentry from '@sentry/react'; import { useEthereumTransaction, useTokenContract } from '@vegaprotocol/web3'; import { useDepositStore } from './deposit-store'; import { useGetBalanceOfERC20Token } from './use-get-balance-of-erc20-token'; -import { isAssetTypeERC20 } from '@vegaprotocol/react-helpers'; +import { isAssetTypeERC20 } from '@vegaprotocol/assets'; export const useSubmitFaucet = () => { const { asset, update } = useDepositStore(); diff --git a/libs/market-depth/src/lib/market-depth-provider.ts b/libs/market-depth/src/lib/market-depth-provider.ts index ae6c04710..91f2a2e02 100644 --- a/libs/market-depth/src/lib/market-depth-provider.ts +++ b/libs/market-depth/src/lib/market-depth-provider.ts @@ -60,19 +60,10 @@ const update: Update< > = (data, deltas, reload) => { for (const delta of deltas) { if (delta.marketId !== data.id) { - //console.log('wrong-market'); continue; } const sequenceNumber = Number(delta.sequenceNumber); - console.log(delta.previousSequenceNumber, delta.sequenceNumber); if (sequenceNumber <= sequenceNumbers[delta.marketId]) { - /* - console.log( - 'smaller sequence number', - sequenceNumber, - sequenceNumbers[delta.marketId] - ); - */ return data; } /* @@ -82,8 +73,6 @@ const update: Update< return; } */ - // const { buy, sell } = delta; - // console.log({ buy, sell }); sequenceNumbers[delta.marketId] = sequenceNumber; const updatedData = { ...data, @@ -95,7 +84,6 @@ const update: Update< if (delta.sell) { updatedData.depth.sell = updateLevels(data.depth.sell ?? [], delta.sell); } - // console.log({ updatedData }); return updatedData; } return data; diff --git a/libs/react-helpers/src/index.ts b/libs/react-helpers/src/index.ts index 3e5b1ddec..5464d1c13 100644 --- a/libs/react-helpers/src/index.ts +++ b/libs/react-helpers/src/index.ts @@ -1,5 +1,4 @@ export * from './hooks'; -export * from './lib/assets'; export * from './lib/context'; export * from './lib/format'; export * from './lib/generic-data-provider'; diff --git a/libs/react-helpers/src/lib/assets.ts b/libs/react-helpers/src/lib/assets.ts deleted file mode 100644 index 7c00c0b00..000000000 --- a/libs/react-helpers/src/lib/assets.ts +++ /dev/null @@ -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 & { - source: ERC20AssetSource; -}; - -export type BuiltinAsset = Omit & { - source: BuiltinAssetSource; -}; - -export const isAssetTypeERC20 = (asset?: Asset): asset is ERC20Asset => { - if (!asset?.source) return false; - return asset.source.__typename === 'ERC20'; -}; - -type AssetEdge = { - __typename: 'AssetEdge'; - node: T; -}; - -type AssetEdges = { edges: (AssetEdge | null)[] | null }; - -type AssetsConnection = { - assetsConnection: AssetEdges | null; -}; - -export const getAssets = (data?: AssetsConnection): Asset[] => - data?.assetsConnection?.edges - ?.filter((e) => e && e?.node) - .map((e) => (e as AssetEdge).node as Asset) || []; - -export const getEnabledAssets = ( - data?: AssetsConnection -): Asset[] => - data?.assetsConnection?.edges - ?.filter((e) => e && e?.node) - .map((e) => (e as AssetEdge).node) - .filter((a) => a.status === AssetStatus.STATUS_ENABLED) || []; diff --git a/libs/types/.env b/libs/types/.env index d7698de3b..0c3680567 100644 --- a/libs/types/.env +++ b/libs/types/.env @@ -1 +1 @@ -GRAPHQL_SCHEMA_PATH=https://api.n11.testnet.vega.xyz/graphql +GRAPHQL_SCHEMA_PATH=https://api.n07.testnet.vega.xyz/graphql diff --git a/libs/web3/src/lib/use-token-contract.ts b/libs/web3/src/lib/use-token-contract.ts index 1cefd7030..e4ab3bd8f 100644 --- a/libs/web3/src/lib/use-token-contract.ts +++ b/libs/web3/src/lib/use-token-contract.ts @@ -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 { useWeb3React } from '@web3-react/core'; import { useMemo } from 'react'; diff --git a/libs/withdraws/src/index.ts b/libs/withdraws/src/index.ts index 75697296d..329c09dd4 100644 --- a/libs/withdraws/src/index.ts +++ b/libs/withdraws/src/index.ts @@ -10,4 +10,3 @@ export * from './lib/use-verify-withdrawal'; export * from './lib/use-withdrawals'; export * from './lib/__generated__/Withdrawals'; export * from './lib/__generated__/WithdrawalFields'; -export * from './lib/__generated__/WithdrawFormQuery'; diff --git a/libs/withdraws/src/lib/__generated__/WithdrawFormQuery.ts b/libs/withdraws/src/lib/__generated__/WithdrawFormQuery.ts deleted file mode 100644 index bb0b90ecf..000000000 --- a/libs/withdraws/src/lib/__generated__/WithdrawFormQuery.ts +++ /dev/null @@ -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; -} diff --git a/libs/withdraws/src/lib/test-helpers.ts b/libs/withdraws/src/lib/test-helpers.ts index 218d0a8ca..a5fc19964 100644 --- a/libs/withdraws/src/lib/test-helpers.ts +++ b/libs/withdraws/src/lib/test-helpers.ts @@ -1,4 +1,4 @@ -import type { Asset, AssetWithStatus } from '@vegaprotocol/react-helpers'; +import type { Asset } from '@vegaprotocol/assets'; import { AccountType, AssetStatus, @@ -6,15 +6,16 @@ import { } from '@vegaprotocol/types'; import merge from 'lodash/merge'; 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'; export const generateAsset = (override?: PartialDeep) => { - const defaultAsset: AssetWithStatus = { + const defaultAsset: Asset = { __typename: 'Asset', id: 'asset-id', symbol: 'asset-symbol', name: 'asset-name', + quantum: '', decimals: 5, status: AssetStatus.STATUS_ENABLED, source: { @@ -25,13 +26,14 @@ export const generateAsset = (override?: PartialDeep) => { return merge(defaultAsset, override); }; -export const generateAccount = (override?: PartialDeep) => { - const defaultAccount: Account = { +export const generateAccount = ( + override?: PartialDeep +) => { + const defaultAccount: AccountFieldsFragment = { type: AccountType.ACCOUNT_TYPE_GENERAL, balance: '100000', asset: { id: 'asset-id', - symbol: 'asset-symbol', }, }; return merge(defaultAccount, override); diff --git a/libs/withdraws/src/lib/types.ts b/libs/withdraws/src/lib/types.ts deleted file mode 100644 index 16b6cab16..000000000 --- a/libs/withdraws/src/lib/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -import type { AccountType } from '@vegaprotocol/types'; - -export interface Account { - type: AccountType; - balance: string; - asset: { - id: string; - symbol: string; - }; -} diff --git a/libs/withdraws/src/lib/use-get-withdraw-threshold.tsx b/libs/withdraws/src/lib/use-get-withdraw-threshold.tsx index fff3a856d..3c9bf5748 100644 --- a/libs/withdraws/src/lib/use-get-withdraw-threshold.tsx +++ b/libs/withdraws/src/lib/use-get-withdraw-threshold.tsx @@ -1,7 +1,7 @@ import { useCallback } from 'react'; import { useBridgeContract } from '@vegaprotocol/web3'; import BigNumber from 'bignumber.js'; -import type { Asset } from '@vegaprotocol/react-helpers'; +import type { Asset } from '@vegaprotocol/assets'; import { addDecimal } from '@vegaprotocol/react-helpers'; /** @@ -12,7 +12,7 @@ import { addDecimal } from '@vegaprotocol/react-helpers'; export const useGetWithdrawThreshold = () => { const contract = useBridgeContract(); const getThreshold = useCallback( - async (asset: Asset | undefined) => { + async (asset: Pick | undefined) => { if (!contract || asset?.source.__typename !== 'ERC20') { return new BigNumber(Infinity); } diff --git a/libs/withdraws/src/lib/use-withdraw-asset.tsx b/libs/withdraws/src/lib/use-withdraw-asset.tsx index f3e2e4763..7cf550c3f 100644 --- a/libs/withdraws/src/lib/use-withdraw-asset.tsx +++ b/libs/withdraws/src/lib/use-withdraw-asset.tsx @@ -1,17 +1,17 @@ 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 { AccountType } from '@vegaprotocol/types'; import BigNumber from 'bignumber.js'; import { useCallback, useEffect } from 'react'; -import type { Account } from './types'; +import type { AccountFieldsFragment } from '@vegaprotocol/accounts'; import { useGetWithdrawDelay } from './use-get-withdraw-delay'; import { useGetWithdrawThreshold } from './use-get-withdraw-threshold'; import { useWithdrawStore } from './withdraw-store'; export const useWithdrawAsset = ( assets: Asset[], - accounts: Account[], + accounts: AccountFieldsFragment[], assetId?: string ) => { const { asset, balance, min, threshold, delay, update } = useWithdrawStore(); diff --git a/libs/withdraws/src/lib/withdraw-form-container.tsx b/libs/withdraws/src/lib/withdraw-form-container.tsx index 043e92b09..1838f853f 100644 --- a/libs/withdraws/src/lib/withdraw-form-container.tsx +++ b/libs/withdraws/src/lib/withdraw-form-container.tsx @@ -1,52 +1,10 @@ -import { gql, useQuery } from '@apollo/client'; -import { getEnabledAssets, t } from '@vegaprotocol/react-helpers'; -import { useMemo } from 'react'; +import { useDataProvider } from '@vegaprotocol/react-helpers'; +import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; +import { enabledAssetsProvider } from '@vegaprotocol/assets'; +import { accountsOnlyDataProvider } from '@vegaprotocol/accounts'; import type { WithdrawalArgs } from './use-create-withdraw'; import { WithdrawManager } from './withdraw-manager'; -import type { WithdrawFormQuery } from './__generated__/WithdrawFormQuery'; - -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 - } - } - } - } -`; +import { useMemo } from 'react'; interface WithdrawFormContainerProps { partyId?: string; @@ -59,35 +17,35 @@ export const WithdrawFormContainer = ({ partyId, submit, }: WithdrawFormContainerProps) => { - const { data, loading, error } = useQuery( - WITHDRAW_FORM_QUERY, - { - variables: { partyId }, - } - ); + const variables = useMemo(() => ({ partyId }), [partyId]); + const { data, loading, error } = useDataProvider({ + dataProvider: accountsOnlyDataProvider, + variables, + noUpdate: true, + }); - const assets = useMemo(() => { - if (!data?.assetsConnection?.edges) { - return []; - } - - return getEnabledAssets(data); - }, [data]); - - if (loading || !data) { - return
{t('Loading...')}
; - } - - if (error) { - return
{t('Something went wrong')}
; - } + const { + data: assets, + loading: assetsLoading, + error: assetsError, + } = useDataProvider({ + dataProvider: enabledAssetsProvider, + }); return ( - + + {assets && data && ( + + )} + ); }; diff --git a/libs/withdraws/src/lib/withdraw-form.spec.tsx b/libs/withdraws/src/lib/withdraw-form.spec.tsx index 92bdc589b..a0e895cbd 100644 --- a/libs/withdraws/src/lib/withdraw-form.spec.tsx +++ b/libs/withdraws/src/lib/withdraw-form.spec.tsx @@ -4,7 +4,7 @@ import { useWeb3React } from '@web3-react/core'; import { WithdrawForm } from './withdraw-form'; import { generateAsset } from './test-helpers'; import type { WithdrawFormProps } from './withdraw-form'; -import type { Asset } from '@vegaprotocol/react-helpers'; +import type { Asset } from '@vegaprotocol/assets'; jest.mock('@web3-react/core'); diff --git a/libs/withdraws/src/lib/withdraw-form.tsx b/libs/withdraws/src/lib/withdraw-form.tsx index c8846568a..ccf90a0fd 100644 --- a/libs/withdraws/src/lib/withdraw-form.tsx +++ b/libs/withdraws/src/lib/withdraw-form.tsx @@ -1,4 +1,4 @@ -import type { Asset } from '@vegaprotocol/react-helpers'; +import type { Asset } from '@vegaprotocol/assets'; import { formatNumber } from '@vegaprotocol/react-helpers'; import { ethereumAddress, @@ -6,8 +6,8 @@ import { t, removeDecimal, required, - isAssetTypeERC20, } from '@vegaprotocol/react-helpers'; +import { isAssetTypeERC20 } from '@vegaprotocol/assets'; import { Button, FormGroup, diff --git a/libs/withdraws/src/lib/withdraw-manager.spec.tsx b/libs/withdraws/src/lib/withdraw-manager.spec.tsx index 2ad994d2c..d179fc4bc 100644 --- a/libs/withdraws/src/lib/withdraw-manager.spec.tsx +++ b/libs/withdraws/src/lib/withdraw-manager.spec.tsx @@ -3,9 +3,9 @@ import userEvent from '@testing-library/user-event'; import { generateAccount, generateAsset } from './test-helpers'; import type { WithdrawManagerProps } 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 type { Account } from './types'; +import type { AccountFieldsFragment } from '@vegaprotocol/accounts'; const asset = generateAsset(); const ethereumAddress = '0x72c22822A19D20DE7e426fB84aa047399Ddd8853'; @@ -17,7 +17,7 @@ jest.mock('@web3-react/core', () => ({ jest.mock('./use-withdraw-asset', () => ({ useWithdrawAsset: ( assets: Asset[], - accounts: Account[], + accounts: AccountFieldsFragment[], assetId?: string ) => ({ asset, diff --git a/libs/withdraws/src/lib/withdraw-manager.tsx b/libs/withdraws/src/lib/withdraw-manager.tsx index 137d7de62..f20f7153d 100644 --- a/libs/withdraws/src/lib/withdraw-manager.tsx +++ b/libs/withdraws/src/lib/withdraw-manager.tsx @@ -1,13 +1,13 @@ import sortBy from 'lodash/sortBy'; import { WithdrawForm } from './withdraw-form'; import type { WithdrawalArgs } from './use-create-withdraw'; -import type { Asset } from '@vegaprotocol/react-helpers'; -import type { Account } from './types'; +import type { Asset } from '@vegaprotocol/assets'; +import type { AccountFieldsFragment } from '@vegaprotocol/accounts'; import { useWithdrawAsset } from './use-withdraw-asset'; export interface WithdrawManagerProps { assets: Asset[]; - accounts: Account[]; + accounts: AccountFieldsFragment[]; submit: (args: WithdrawalArgs) => void; assetId?: string; } diff --git a/libs/withdraws/src/lib/withdraw-store.ts b/libs/withdraws/src/lib/withdraw-store.ts index 176421fad..a8ce49275 100644 --- a/libs/withdraws/src/lib/withdraw-store.ts +++ b/libs/withdraws/src/lib/withdraw-store.ts @@ -1,4 +1,4 @@ -import type { Asset } from '@vegaprotocol/react-helpers'; +import type { Asset } from '@vegaprotocol/assets'; import BigNumber from 'bignumber.js'; import create from 'zustand';