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

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

View File

@ -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<AssetsQuery>) => {
symbol: 'tEURO',
decimals: 5,
name: 'Euro',
source: {},
quantum: '',
status: Types.AssetStatus.STATUS_ENABLED,
},
@ -96,6 +98,7 @@ export const generateAssets = (override?: PartialDeep<AssetsQuery>) => {
symbol: 'tDAI',
decimals: 5,
name: 'DAI',
source: {},
quantum: '',
status: Types.AssetStatus.STATUS_ENABLED,
},
@ -106,6 +109,7 @@ export const generateAssets = (override?: PartialDeep<AssetsQuery>) => {
symbol: 'AST0',
decimals: 5,
name: 'Asto',
source: {},
quantum: '',
status: Types.AssetStatus.STATUS_ENABLED,
},

View File

@ -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<DepositAssets>(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 (
<AsyncRenderer<DepositAssets> data={data} loading={loading} error={error}>
{assets.length ? (
<AsyncRenderer data={data} loading={loading} error={error}>
{data && data.length ? (
<Web3Container>
<DepositManager
assets={assets}
assets={data}
isFaucetable={VEGA_ENV !== Networks.MAINNET}
/>
</Web3Container>

View File

@ -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<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 (
<section>

View File

@ -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`

View File

@ -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')

View File

@ -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', () => {

View File

@ -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<AssetsQuery>) => {
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<AssetsQuery>) => {
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<AssetsQuery>) => {
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',
},
],
},
};

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);
};

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);
};

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
}
}
}
`;

View File

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

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;
}

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>;

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 { 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 (
<PageQueryContainer<DepositPage>
query={DEPOSIT_PAGE_QUERY}
render={(data) => {
const assets = getEnabledAssets(data);
if (!assets.length) {
<AsyncRenderer
data={data}
error={error}
loading={loading}
render={(assets) => {
if (!assets || !assets.length) {
return (
<Splash>
<p>{t('No assets on this network')}</p>

View File

@ -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
}
}
}
}

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 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<AccountEventsSubscription, AccountEventsSubscriptionVariables>(AccountEventsDocument, options);
}
export type AccountEventsSubscriptionHookResult = ReturnType<typeof useAccountEventsSubscription>;
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>;
export type AccountEventsSubscriptionResult = Apollo.SubscriptionResult<AccountEventsSubscription>;

View File

@ -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<Account[], never>(
[accountsBasedDataProvider, marketsProvider, assetProvider],
[accountsOnlyDataProvider, marketsProvider, assetsProvider],
([accounts, markets, assets]): Account[] | null => {
return accounts
? accounts

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 { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
import type { AgGridReact } from 'ag-grid-react';

View File

@ -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,

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,
});

View File

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

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 {
edges {
node {
id
name
symbol
decimals
quantum
source {
... on ERC20 {
contractAddress
lifetimeLimit
withdrawThreshold
}
}
...AssetsFields
}
}
}

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>;

View File

@ -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<AssetsConnectionQuery, AssetsConnectionQueryVariables>) {
export function useAssetsQuery(baseOptions?: Apollo.QueryHookOptions<AssetsQuery, AssetsQueryVariables>) {
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}
return Apollo.useLazyQuery<AssetsConnectionQuery, AssetsConnectionQueryVariables>(AssetsConnectionDocument, options);
return Apollo.useLazyQuery<AssetsQuery, AssetsQueryVariables>(AssetsDocument, options);
}
export type AssetsConnectionQueryHookResult = ReturnType<typeof useAssetsConnectionQuery>;
export type AssetsConnectionLazyQueryHookResult = ReturnType<typeof useAssetsConnectionLazyQuery>;
export type AssetsConnectionQueryResult = Apollo.QueryResult<AssetsConnectionQuery, AssetsConnectionQueryVariables>;
export type AssetsQueryHookResult = ReturnType<typeof useAssetsQuery>;
export type AssetsLazyQueryHookResult = ReturnType<typeof useAssetsLazyQuery>;
export type AssetsQueryResult = Apollo.QueryResult<AssetsQuery, AssetsQueryVariables>;

View File

@ -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,

View File

@ -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'

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
)
);

View File

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

View File

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

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>;

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;
}

View File

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

View File

@ -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<DepositAsset>(DEPOSITS_QUERY, {
variables: { partyId: pubKey },
skip: !pubKey,
const { data, loading, error } = useDataProvider({
dataProvider: enabledAssetsProvider,
});
const assets = getEnabledAssets(data);
return (
<AsyncRenderer<DepositAsset> data={data} loading={loading} error={error}>
{assets.length ? (
<AsyncRenderer data={data} loading={loading} error={error}>
{data && data.length ? (
<Web3Container>
<DepositManager
assetId={assetId}
assets={assets}
assets={data}
isFaucetable={VEGA_ENV !== Networks.MAINNET}
/>
</Web3Container>

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 {
ethereumAddress,
t,
@ -7,7 +8,6 @@ import {
minSafe,
maxSafe,
addDecimal,
isAssetTypeERC20,
} from '@vegaprotocol/react-helpers';
import {
Button,

View File

@ -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;

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 create from 'zustand';

View File

@ -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';

View File

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

View File

@ -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

View File

@ -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();

View File

@ -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 = (

View File

@ -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 = (

View File

@ -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';

View File

@ -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';

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 type { Token } from '@vegaprotocol/smart-contracts';
import {

View File

@ -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,

View File

@ -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();

View File

@ -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;

View File

@ -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';

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) || [];

View File

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

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 { useWeb3React } from '@web3-react/core';
import { useMemo } from 'react';

View File

@ -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';

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;
}

View File

@ -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<Asset>) => {
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<Asset>) => {
return merge(defaultAsset, override);
};
export const generateAccount = (override?: PartialDeep<Account>) => {
const defaultAccount: Account = {
export const generateAccount = (
override?: PartialDeep<AccountFieldsFragment>
) => {
const defaultAccount: AccountFieldsFragment = {
type: AccountType.ACCOUNT_TYPE_GENERAL,
balance: '100000',
asset: {
id: 'asset-id',
symbol: 'asset-symbol',
},
};
return merge(defaultAccount, override);

View File

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

View File

@ -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<Asset, 'source' | 'decimals'> | undefined) => {
if (!contract || asset?.source.__typename !== 'ERC20') {
return new BigNumber(Infinity);
}

View File

@ -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();

View File

@ -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<WithdrawFormQuery>(
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 <div>{t('Loading...')}</div>;
}
if (error) {
return <div>{t('Something went wrong')}</div>;
}
const {
data: assets,
loading: assetsLoading,
error: assetsError,
} = useDataProvider({
dataProvider: enabledAssetsProvider,
});
return (
<WithdrawManager
assetId={assetId}
assets={assets}
accounts={data.party?.accounts || []}
submit={submit}
/>
<AsyncRenderer
loading={loading && assetsLoading}
error={error && assetsError}
data={data}
>
{assets && data && (
<WithdrawManager
assetId={assetId}
assets={assets}
accounts={data}
submit={submit}
/>
)}
</AsyncRenderer>
);
};

View File

@ -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');

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 {
ethereumAddress,
@ -6,8 +6,8 @@ import {
t,
removeDecimal,
required,
isAssetTypeERC20,
} from '@vegaprotocol/react-helpers';
import { isAssetTypeERC20 } from '@vegaprotocol/assets';
import {
Button,
FormGroup,

View File

@ -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,

View File

@ -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;
}

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 create from 'zustand';