chore(#961): assets to assetsconnection (#1000)

* chore: assets to assetsconnection

Changed queries in explorer app

* chore: assets to assetsConnection (961)

* chore: assets to assetsConnection (961)

* chore: assets to assetsConnection (961)

* fix: after merge issues fixed

apps/explorer/src/app/routes/assets/__generated__/AssetsQuery.ts

@@ -9,7 +9,7 @@ import { AccountType } from "@vegaprotocol/types";
 // GraphQL query operation: AssetsQuery
 // ====================================================
 
-export interface AssetsQuery_assets_source_ERC20 {
+export interface AssetsQuery_assetsConnection_edges_node_source_ERC20 {
   __typename: "ERC20";
   /**
    * The address of the ERC20 contract
@@ -17,7 +17,7 @@ export interface AssetsQuery_assets_source_ERC20 {
   contractAddress: string;
 }
 
-export interface AssetsQuery_assets_source_BuiltinAsset {
+export interface AssetsQuery_assetsConnection_edges_node_source_BuiltinAsset {
   __typename: "BuiltinAsset";
   /**
    * Maximum amount that can be requested by a party through the built-in asset faucet at a time
@@ -25,9 +25,9 @@ export interface AssetsQuery_assets_source_BuiltinAsset {
   maxFaucetAmountMint: string;
 }
 
-export type AssetsQuery_assets_source = AssetsQuery_assets_source_ERC20 | AssetsQuery_assets_source_BuiltinAsset;
+export type AssetsQuery_assetsConnection_edges_node_source = AssetsQuery_assetsConnection_edges_node_source_ERC20 | AssetsQuery_assetsConnection_edges_node_source_BuiltinAsset;
 
-export interface AssetsQuery_assets_infrastructureFeeAccount_market {
+export interface AssetsQuery_assetsConnection_edges_node_infrastructureFeeAccount_market {
   __typename: "Market";
   /**
    * Market ID
@@ -35,7 +35,7 @@ export interface AssetsQuery_assets_infrastructureFeeAccount_market {
   id: string;
 }
 
-export interface AssetsQuery_assets_infrastructureFeeAccount {
+export interface AssetsQuery_assetsConnection_edges_node_infrastructureFeeAccount {
   __typename: "Account";
   /**
    * Account type (General, Margin, etc)
@@ -48,10 +48,10 @@ export interface AssetsQuery_assets_infrastructureFeeAccount {
   /**
    * Market (only relevant to margin accounts)
    */
-  market: AssetsQuery_assets_infrastructureFeeAccount_market | null;
+  market: AssetsQuery_assetsConnection_edges_node_infrastructureFeeAccount_market | null;
 }
 
-export interface AssetsQuery_assets {
+export interface AssetsQuery_assetsConnection_edges_node {
   __typename: "Asset";
   /**
    * The ID of the asset
@@ -72,16 +72,29 @@ export interface AssetsQuery_assets {
   /**
    * The origin source of the asset (e.g: an ERC20 asset)
    */
-  source: AssetsQuery_assets_source;
+  source: AssetsQuery_assetsConnection_edges_node_source;
   /**
    * The infrastructure fee account for this asset
    */
-  infrastructureFeeAccount: AssetsQuery_assets_infrastructureFeeAccount;
+  infrastructureFeeAccount: AssetsQuery_assetsConnection_edges_node_infrastructureFeeAccount;
+}
+
+export interface AssetsQuery_assetsConnection_edges {
+  __typename: "AssetEdge";
+  node: AssetsQuery_assetsConnection_edges_node;
+}
+
+export interface AssetsQuery_assetsConnection {
+  __typename: "AssetsConnection";
+  /**
+   * The assets
+   */
+  edges: (AssetsQuery_assetsConnection_edges | null)[] | null;
 }
 
 export interface AssetsQuery {
   /**
-   * The list of all assets in use in the Vega network
+   * The list of all assets in use in the vega network or the specified asset if id is provided
    */
-  assets: AssetsQuery_assets[] | null;
+  assetsConnection: AssetsQuery_assetsConnection;
 }

apps/explorer/src/app/routes/assets/index.tsx

@@ -1,5 +1,5 @@
 import { gql, useQuery } from '@apollo/client';
-import { t } from '@vegaprotocol/react-helpers';
+import { assetsConnectionToAssets, t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import { RouteTitle } from '../../components/route-title';
 import { SubHeading } from '../../components/sub-heading';
@@ -8,24 +8,28 @@ import type { AssetsQuery } from './__generated__/AssetsQuery';
 
 export const ASSETS_QUERY = gql`
   query AssetsQuery {
-    assets {
-      id
-      name
-      symbol
-      decimals
-      source {
-        ... on ERC20 {
-          contractAddress
-        }
-        ... on BuiltinAsset {
-          maxFaucetAmountMint
-        }
-      }
-      infrastructureFeeAccount {
-        type
-        balance
-        market {
+    assetsConnection {
+      edges {
+        node {
           id
+          name
+          symbol
+          decimals
+          source {
+            ... on ERC20 {
+              contractAddress
+            }
+            ... on BuiltinAsset {
+              maxFaucetAmountMint
+            }
+          }
+          infrastructureFeeAccount {
+            type
+            balance
+            market {
+              id
+            }
+          }
         }
       }
     }
@@ -34,11 +38,13 @@ export const ASSETS_QUERY = gql`
 
 const Assets = () => {
   const { data } = useQuery<AssetsQuery>(ASSETS_QUERY);
-  if (!data || !data.assets) return null;
+
+  const assets = assetsConnectionToAssets(data?.assetsConnection);
+
   return (
     <section>
       <RouteTitle data-testid="assets-header">{t('Assets')}</RouteTitle>
-      {data?.assets.map((a) => (
+      {assets.map((a) => (
         <React.Fragment key={a.id}>
           <SubHeading data-testid="asset-header">
             {a.name} ({a.symbol})

apps/token/src/routes/withdraw/__generated__/WithdrawPage.ts

@@ -140,11 +140,11 @@ export interface WithdrawPage_party {
   withdrawals: WithdrawPage_party_withdrawals[] | null;
 }
 
-export interface WithdrawPage_assets_source_BuiltinAsset {
+export interface WithdrawPage_assetsConnection_edges_node_source_BuiltinAsset {
   __typename: "BuiltinAsset";
 }
 
-export interface WithdrawPage_assets_source_ERC20 {
+export interface WithdrawPage_assetsConnection_edges_node_source_ERC20 {
   __typename: "ERC20";
   /**
    * The address of the ERC20 contract
@@ -152,9 +152,9 @@ export interface WithdrawPage_assets_source_ERC20 {
   contractAddress: string;
 }
 
-export type WithdrawPage_assets_source = WithdrawPage_assets_source_BuiltinAsset | WithdrawPage_assets_source_ERC20;
+export type WithdrawPage_assetsConnection_edges_node_source = WithdrawPage_assetsConnection_edges_node_source_BuiltinAsset | WithdrawPage_assetsConnection_edges_node_source_ERC20;
 
-export interface WithdrawPage_assets {
+export interface WithdrawPage_assetsConnection_edges_node {
   __typename: "Asset";
   /**
    * The ID of the asset
@@ -175,7 +175,20 @@ export interface WithdrawPage_assets {
   /**
    * The origin source of the asset (e.g: an ERC20 asset)
    */
-  source: WithdrawPage_assets_source;
+  source: WithdrawPage_assetsConnection_edges_node_source;
+}
+
+export interface WithdrawPage_assetsConnection_edges {
+  __typename: "AssetEdge";
+  node: WithdrawPage_assetsConnection_edges_node;
+}
+
+export interface WithdrawPage_assetsConnection {
+  __typename: "AssetsConnection";
+  /**
+   * The assets
+   */
+  edges: (WithdrawPage_assetsConnection_edges | null)[] | null;
 }
 
 export interface WithdrawPage {
@@ -184,9 +197,9 @@ export interface WithdrawPage {
    */
   party: WithdrawPage_party | null;
   /**
-   * The list of all assets in use in the Vega network
+   * The list of all assets in use in the vega network or the specified asset if id is provided
    */
-  assets: WithdrawPage_assets[] | null;
+  assetsConnection: WithdrawPage_assetsConnection;
 }
 
 export interface WithdrawPageVariables {

apps/token/src/routes/withdraw/index.tsx

@@ -15,6 +15,7 @@ import type {
 } from './__generated__/WithdrawPage';
 import { WithdrawManager } from '@vegaprotocol/withdraws';
 import { AccountType } from '@vegaprotocol/types';
+import { assetsConnectionToAssets } from '@vegaprotocol/react-helpers';
 
 const Withdraw = () => {
   const { t } = useTranslation();
@@ -75,14 +76,18 @@ const WITHDRAW_PAGE_QUERY = gql`
         }
       }
     }
-    assets {
-      id
-      symbol
-      name
-      decimals
-      source {
-        ... on ERC20 {
-          contractAddress
+    assetsConnection {
+      edges {
+        node {
+          id
+          symbol
+          name
+          decimals
+          source {
+            ... on ERC20 {
+              contractAddress
+            }
+          }
         }
       }
     }
@@ -134,6 +139,8 @@ export const WithdrawContainer = ({ currVegaKey }: WithdrawContainerProps) => {
     );
   }
 
+  const assets = assetsConnectionToAssets(data.assetsConnection);
+
   return (
     <>
       {hasPendingWithdrawals && (
@@ -151,7 +158,7 @@ export const WithdrawContainer = ({ currVegaKey }: WithdrawContainerProps) => {
           </Callout>
         </div>
       )}
-      <WithdrawManager assets={data.assets || []} accounts={accounts} />
+      <WithdrawManager assets={assets || []} accounts={accounts} />
     </>
   );
 };

apps/trading/pages/portfolio/deposit/__generated__/DepositPage.ts

@@ -7,11 +7,11 @@
 // GraphQL query operation: DepositPage
 // ====================================================
 
-export interface DepositPage_assets_source_BuiltinAsset {
+export interface DepositPage_assetsConnection_edges_node_source_BuiltinAsset {
   __typename: "BuiltinAsset";
 }
 
-export interface DepositPage_assets_source_ERC20 {
+export interface DepositPage_assetsConnection_edges_node_source_ERC20 {
   __typename: "ERC20";
   /**
    * The address of the ERC20 contract
@@ -19,9 +19,9 @@ export interface DepositPage_assets_source_ERC20 {
   contractAddress: string;
 }
 
-export type DepositPage_assets_source = DepositPage_assets_source_BuiltinAsset | DepositPage_assets_source_ERC20;
+export type DepositPage_assetsConnection_edges_node_source = DepositPage_assetsConnection_edges_node_source_BuiltinAsset | DepositPage_assetsConnection_edges_node_source_ERC20;
 
-export interface DepositPage_assets {
+export interface DepositPage_assetsConnection_edges_node {
   __typename: "Asset";
   /**
    * The ID of the asset
@@ -42,12 +42,25 @@ export interface DepositPage_assets {
   /**
    * The origin source of the asset (e.g: an ERC20 asset)
    */
-  source: DepositPage_assets_source;
+  source: DepositPage_assetsConnection_edges_node_source;
+}
+
+export interface DepositPage_assetsConnection_edges {
+  __typename: "AssetEdge";
+  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
+   * The list of all assets in use in the vega network or the specified asset if id is provided
    */
-  assets: DepositPage_assets[] | null;
+  assetsConnection: DepositPage_assetsConnection;
 }

apps/trading/pages/portfolio/deposit/deposit-container.tsx

@@ -2,7 +2,7 @@ import { gql } from '@apollo/client';
 import { PageQueryContainer } from '../../../components/page-query-container';
 import type { DepositPage } from './__generated__/DepositPage';
 import { DepositManager } from '@vegaprotocol/deposits';
-import { t } from '@vegaprotocol/react-helpers';
+import { assetsConnectionToAssets, t } from '@vegaprotocol/react-helpers';
 import { useEnvironment } from '@vegaprotocol/environment';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { ASSET_FRAGMENT } from '../../../lib/query-fragments';
@@ -10,8 +10,12 @@ import { ASSET_FRAGMENT } from '../../../lib/query-fragments';
 const DEPOSIT_PAGE_QUERY = gql`
   ${ASSET_FRAGMENT}
   query DepositPage {
-    assets {
-      ...AssetFields
+    assetsConnection {
+      edges {
+        node {
+          ...AssetFields
+        }
+      }
     }
   }
 `;
@@ -26,7 +30,8 @@ export const DepositContainer = () => {
     <PageQueryContainer<DepositPage>
       query={DEPOSIT_PAGE_QUERY}
       render={(data) => {
-        if (!data.assets?.length) {
+        const assets = assetsConnectionToAssets(data.assetsConnection);
+        if (!assets.length) {
           return (
             <Splash>
               <p>{t('No assets on this network')}</p>
@@ -36,7 +41,7 @@ export const DepositContainer = () => {
 
         return (
           <DepositManager
-            assets={data.assets}
+            assets={assets}
             isFaucetable={VEGA_ENV !== 'MAINNET'}
           />
         );

apps/trading/pages/portfolio/withdraw/__generated__/WithdrawPageQuery.ts

@@ -65,11 +65,11 @@ export interface WithdrawPageQuery_party {
   accounts: WithdrawPageQuery_party_accounts[] | null;
 }
 
-export interface WithdrawPageQuery_assets_source_BuiltinAsset {
+export interface WithdrawPageQuery_assetsConnection_edges_node_source_BuiltinAsset {
   __typename: "BuiltinAsset";
 }
 
-export interface WithdrawPageQuery_assets_source_ERC20 {
+export interface WithdrawPageQuery_assetsConnection_edges_node_source_ERC20 {
   __typename: "ERC20";
   /**
    * The address of the ERC20 contract
@@ -77,9 +77,9 @@ export interface WithdrawPageQuery_assets_source_ERC20 {
   contractAddress: string;
 }
 
-export type WithdrawPageQuery_assets_source = WithdrawPageQuery_assets_source_BuiltinAsset | WithdrawPageQuery_assets_source_ERC20;
+export type WithdrawPageQuery_assetsConnection_edges_node_source = WithdrawPageQuery_assetsConnection_edges_node_source_BuiltinAsset | WithdrawPageQuery_assetsConnection_edges_node_source_ERC20;
 
-export interface WithdrawPageQuery_assets {
+export interface WithdrawPageQuery_assetsConnection_edges_node {
   __typename: "Asset";
   /**
    * The ID of the asset
@@ -100,7 +100,20 @@ export interface WithdrawPageQuery_assets {
   /**
    * The origin source of the asset (e.g: an ERC20 asset)
    */
-  source: WithdrawPageQuery_assets_source;
+  source: WithdrawPageQuery_assetsConnection_edges_node_source;
+}
+
+export interface WithdrawPageQuery_assetsConnection_edges {
+  __typename: "AssetEdge";
+  node: WithdrawPageQuery_assetsConnection_edges_node;
+}
+
+export interface WithdrawPageQuery_assetsConnection {
+  __typename: "AssetsConnection";
+  /**
+   * The assets
+   */
+  edges: (WithdrawPageQuery_assetsConnection_edges | null)[] | null;
 }
 
 export interface WithdrawPageQuery {
@@ -109,9 +122,9 @@ export interface WithdrawPageQuery {
    */
   party: WithdrawPageQuery_party | null;
   /**
-   * The list of all assets in use in the Vega network
+   * The list of all assets in use in the vega network or the specified asset if id is provided
    */
-  assets: WithdrawPageQuery_assets[] | null;
+  assetsConnection: WithdrawPageQuery_assetsConnection;
 }
 
 export interface WithdrawPageQueryVariables {

apps/trading/pages/portfolio/withdraw/withdraw-page-container.tsx

@@ -1,5 +1,5 @@
 import { gql } from '@apollo/client';
-import { t } from '@vegaprotocol/react-helpers';
+import { assetsConnectionToAssets, t } from '@vegaprotocol/react-helpers';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { WithdrawManager } from '@vegaprotocol/withdraws';
@@ -29,8 +29,12 @@ const WITHDRAW_PAGE_QUERY = gql`
         }
       }
     }
-    assets {
-      ...AssetFields
+    assetsConnection {
+      edges {
+        node {
+          ...AssetFields
+        }
+      }
     }
   }
 `;
@@ -55,7 +59,8 @@ export const WithdrawPageContainer = ({
         skip: !keypair?.pub,
       }}
       render={(data) => {
-        if (!data.assets?.length) {
+        const assets = assetsConnectionToAssets(data.assetsConnection);
+        if (!assets.length) {
           return (
             <Splash>
               <p>{t('No assets on this network')}</p>
@@ -84,7 +89,7 @@ export const WithdrawPageContainer = ({
               </p>
             ) : null}
             <WithdrawManager
-              assets={data.assets}
+              assets={assets}
               accounts={data.party?.accounts || []}
               initialAssetId={assetId}
             />

libs/react-helpers/src/lib/assets.ts

@@ -16,6 +16,16 @@ export interface Asset {
   source: ERC20AssetSource | BuiltinAssetSource;
 }
 
+interface AssetEdge {
+  __typename: 'AssetEdge';
+  node: Asset;
+}
+
+interface AssetsConnection {
+  __typename: 'AssetsConnection';
+  edges: (AssetEdge | null)[] | null;
+}
+
 export type ERC20Asset = Omit<Asset, 'source'> & {
   source: ERC20AssetSource;
 };
@@ -28,3 +38,12 @@ export const isAssetTypeERC20 = (asset?: Asset): asset is ERC20Asset => {
   if (!asset?.source) return false;
   return asset.source.__typename === 'ERC20';
 };
+
+export const assetsConnectionToAssets = (
+  assetsConnection: AssetsConnection | undefined | null
+): Asset[] => {
+  const edges = assetsConnection?.edges?.filter((e) => e && e?.node);
+  if (!edges) return [];
+
+  return (edges as AssetEdge[]).map((e) => e.node);
+};