chore: filter assets by status (1108) (#1192)

* chore: filter assets by status (1108)

* chore: moved asset status

* chore: re-adding filterin after merge (changed upstream)

* chore: filter assets by status (1108)

* chore: moved asset status

* types

* fixed deposit cypress tests

apps/console-lite/src/app/components/deposits/__generated__/Deposits.ts

@@ -3,6 +3,8 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
+import { AssetStatus } from "@vegaprotocol/types";
+
 // ====================================================
 // GraphQL query operation: Deposits
 // ====================================================
@@ -39,6 +41,10 @@ export interface Deposits_assetsConnection_edges_node {
    * 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)
    */

apps/console-lite/src/app/components/deposits/deposits.tsx

@@ -1,11 +1,10 @@
 import { gql, useQuery } from '@apollo/client';
 import { DepositManager } from '@vegaprotocol/deposits';
-import { t } from '@vegaprotocol/react-helpers';
+import { getEnabledAssets, t } 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 { assetsConnectionToAssets } from '@vegaprotocol/react-helpers';
 import type { Deposits } from './__generated__/Deposits';
 
 const DEPOSITS_QUERY = gql`
@@ -17,6 +16,7 @@ const DEPOSITS_QUERY = gql`
           name
           symbol
           decimals
+          status
           source {
             ... on ERC20 {
               contractAddress
@@ -40,7 +40,7 @@ export const DepositContainer = () => {
     skip: !keypair?.pub,
   });
 
-  const assets = assetsConnectionToAssets(data?.assetsConnection);
+  const assets = getEnabledAssets(data);
 
   return (
     <AsyncRenderer<Deposits> data={data} loading={loading} error={error}>

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

@@ -1,5 +1,5 @@
 import { gql, useQuery } from '@apollo/client';
-import { assetsConnectionToAssets, t } from '@vegaprotocol/react-helpers';
+import { getAssets, t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import { RouteTitle } from '../../components/route-title';
 import { SubHeading } from '../../components/sub-heading';
@@ -39,7 +39,7 @@ export const ASSETS_QUERY = gql`
 const Assets = () => {
   const { data } = useQuery<AssetsQuery>(ASSETS_QUERY);
 
-  const assets = assetsConnectionToAssets(data?.assetsConnection);
+  const assets = getAssets(data);
 
   return (
     <section>

apps/trading-e2e/src/integration/deposit.cy.ts

@@ -9,14 +9,15 @@ describe('deposit form validation', () => {
     cy.mockWeb3Provider();
     cy.mockGQL((req) => {
       aliasQuery(req, 'NetworkParamsQuery', generateNetworkParameters());
-      aliasQuery(req, 'AssetsConnection', generateDepositPage());
+      aliasQuery(req, 'DepositPage', generateDepositPage());
     });
     cy.visit('/portfolio/deposit');
 
-    cy.wait('@AssetsConnection');
     // Deposit page requires connection Ethereum wallet first
     cy.getByTestId(connectEthWalletBtn).click();
     cy.getByTestId('web3-connector-MetaMask').click();
+
+    cy.wait('@DepositPage');
   });
 
   it('handles empty fields', () => {

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

@@ -1,3 +1,4 @@
+import { AssetStatus } from '@vegaprotocol/types';
 import merge from 'lodash/merge';
 import type { PartialDeep } from 'type-fest';
 
@@ -14,6 +15,7 @@ export const generateDepositPage = (
             symbol: 'AST0',
             name: 'Asset 0',
             decimals: 5,
+            status: AssetStatus.STATUS_ENABLED,
             source: {
               __typename: 'ERC20',
               contractAddress: '0x5E4b9aDA947130Fc320a144cd22bC1641e5c9d81',
@@ -28,6 +30,7 @@ export const generateDepositPage = (
             symbol: 'AST1',
             name: 'Asset 1',
             decimals: 5,
+            status: AssetStatus.STATUS_ENABLED,
             source: {
               __typename: 'ERC20',
               contractAddress: '0x444b9aDA947130Fc320a144cd22bC1641e5c9d81',

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

@@ -1,4 +1,4 @@
-import { AccountType } from '@vegaprotocol/types';
+import { AccountType, AssetStatus } from '@vegaprotocol/types';
 import type {
   WithdrawFormQuery,
   WithdrawFormQuery_assetsConnection_edges,
@@ -32,6 +32,7 @@ export const generateWithdrawFormQuery = (
       symbol: 'AST0',
       name: 'Asset 0',
       decimals: 5,
+      status: AssetStatus.STATUS_ENABLED,
       source: {
         __typename: 'ERC20',
         contractAddress: '0x5E4b9aDA947130Fc320a144cd22bC1641e5c9d81',
@@ -46,6 +47,7 @@ export const generateWithdrawFormQuery = (
       symbol: 'AST1',
       name: 'Asset 1',
       decimals: 5,
+      status: AssetStatus.STATUS_ENABLED,
       source: {
         __typename: 'ERC20',
         contractAddress: '0x444b9aDA947130Fc320a144cd22bC1641e5c9d81',

apps/trading-e2e/src/support/mocks/generate-withdrawals.ts

@@ -1,4 +1,4 @@
-import { WithdrawalStatus } from '@vegaprotocol/types';
+import { AssetStatus, WithdrawalStatus } from '@vegaprotocol/types';
 import type { Withdrawals } from '@vegaprotocol/withdraws';
 import merge from 'lodash/merge';
 import type { PartialDeep } from 'type-fest';
@@ -30,6 +30,7 @@ export const generateWithdrawals = (override?: PartialDeep<Withdrawals>) => {
                 name: 'asset-0 name',
                 symbol: 'AST0',
                 decimals: 5,
+                status: AssetStatus.STATUS_ENABLED,
                 source: {
                   __typename: 'ERC20',
                   contractAddress: '0x123',
@@ -59,6 +60,7 @@ export const generateWithdrawals = (override?: PartialDeep<Withdrawals>) => {
                 name: 'asset-0 name',
                 symbol: 'AST0',
                 decimals: 5,
+                status: AssetStatus.STATUS_ENABLED,
                 source: {
                   __typename: 'ERC20',
                   contractAddress: '0x123',

apps/trading/lib/__generated__/AssetFields.ts

@@ -3,6 +3,8 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
+import { AssetStatus } from "@vegaprotocol/types";
+
 // ====================================================
 // GraphQL fragment: AssetFields
 // ====================================================
@@ -39,6 +41,10 @@ export interface AssetFields {
    * 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)
    */

apps/trading/lib/query-fragments.ts

@@ -6,6 +6,7 @@ export const ASSET_FRAGMENT = gql`
     symbol
     name
     decimals
+    status
     source {
       ... on ERC20 {
         contractAddress

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

@@ -3,6 +3,8 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
+import { AssetStatus } from "@vegaprotocol/types";
+
 // ====================================================
 // GraphQL query operation: DepositPage
 // ====================================================
@@ -39,6 +41,10 @@ export interface DepositPage_assetsConnection_edges_node {
    * 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)
    */

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 { assetsConnectionToAssets, t } from '@vegaprotocol/react-helpers';
+import { getEnabledAssets, t } from '@vegaprotocol/react-helpers';
 import { useEnvironment } from '@vegaprotocol/environment';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { ASSET_FRAGMENT } from '../../../lib/query-fragments';
@@ -30,7 +30,7 @@ export const DepositContainer = () => {
     <PageQueryContainer<DepositPage>
       query={DEPOSIT_PAGE_QUERY}
       render={(data) => {
-        const assets = assetsConnectionToAssets(data.assetsConnection);
+        const assets = getEnabledAssets(data);
         if (!assets.length) {
           return (
             <Splash>

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

@@ -16,14 +16,15 @@ export interface Asset {
   source: ERC20AssetSource | BuiltinAssetSource;
 }
 
-interface AssetEdge {
-  __typename: 'AssetEdge';
-  node: Asset;
+export enum AssetStatus {
+  STATUS_ENABLED = 'STATUS_ENABLED',
+  STATUS_PENDING_LISTING = 'STATUS_PENDING_LISTING',
+  STATUS_PROPOSED = 'STATUS_PROPOSED',
+  STATUS_REJECTED = 'STATUS_REJECTED',
 }
 
-interface AssetsConnection {
-  __typename: 'AssetsConnection';
-  edges: (AssetEdge | null)[] | null;
+export interface AssetWithStatus extends Asset {
+  status: AssetStatus;
 }
 
 export type ERC20Asset = Omit<Asset, 'source'> & {
@@ -39,11 +40,26 @@ export const isAssetTypeERC20 = (asset?: Asset): asset is ERC20Asset => {
   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);
+type AssetEdge<T extends Asset> = {
+  __typename: 'AssetEdge';
+  node: T;
 };
+
+type AssetsConnection<T extends Asset> = {
+  assetsConnection: {
+    edges: (AssetEdge<T> | null)[] | 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) || [];

libs/types/src/__generated__/globalTypes.ts

@@ -29,6 +29,13 @@ export enum AccountType {
   ACCOUNT_TYPE_SETTLEMENT = "ACCOUNT_TYPE_SETTLEMENT",
 }
 
+export enum AssetStatus {
+  STATUS_ENABLED = "STATUS_ENABLED",
+  STATUS_PENDING_LISTING = "STATUS_PENDING_LISTING",
+  STATUS_PROPOSED = "STATUS_PROPOSED",
+  STATUS_REJECTED = "STATUS_REJECTED",
+}
+
 export enum AuctionTrigger {
   AUCTION_TRIGGER_BATCH = "AUCTION_TRIGGER_BATCH",
   AUCTION_TRIGGER_LIQUIDITY = "AUCTION_TRIGGER_LIQUIDITY",

libs/withdraws/src/lib/__generated__/AssetFields.ts

@@ -3,6 +3,8 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
+import { AssetStatus } from "@vegaprotocol/types";
+
 // ====================================================
 // GraphQL fragment: AssetFields
 // ====================================================
@@ -39,6 +41,10 @@ export interface AssetFields {
    * 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)
    */

libs/withdraws/src/lib/__generated__/WithdrawFormQuery.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { AccountType } from "@vegaprotocol/types";
+import { AccountType, AssetStatus } from "@vegaprotocol/types";
 
 // ====================================================
 // GraphQL query operation: WithdrawFormQuery
@@ -97,6 +97,10 @@ export interface WithdrawFormQuery_assetsConnection_edges_node {
    * 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)
    */

libs/withdraws/src/lib/__generated__/WithdrawalEvent.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { WithdrawalStatus } from "@vegaprotocol/types";
+import { WithdrawalStatus, AssetStatus } from "@vegaprotocol/types";
 
 // ====================================================
 // GraphQL subscription operation: WithdrawalEvent
@@ -45,6 +45,10 @@ export interface WithdrawalEvent_busEvents_event_Withdrawal_asset {
    * 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)
    */

libs/withdraws/src/lib/__generated__/WithdrawalFields.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { WithdrawalStatus } from "@vegaprotocol/types";
+import { WithdrawalStatus, AssetStatus } from "@vegaprotocol/types";
 
 // ====================================================
 // GraphQL fragment: WithdrawalFields
@@ -41,6 +41,10 @@ export interface WithdrawalFields_asset {
    * 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)
    */

libs/withdraws/src/lib/__generated__/Withdrawals.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { WithdrawalStatus } from "@vegaprotocol/types";
+import { WithdrawalStatus, AssetStatus } from "@vegaprotocol/types";
 
 // ====================================================
 // GraphQL query operation: Withdrawals
@@ -41,6 +41,10 @@ export interface Withdrawals_party_withdrawalsConnection_edges_node_asset {
    * 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)
    */

libs/withdraws/src/lib/test-helpers.ts

@@ -1,17 +1,22 @@
-import type { Asset } from '@vegaprotocol/react-helpers';
-import { AccountType, WithdrawalStatus } from '@vegaprotocol/types';
+import type { Asset, AssetWithStatus } from '@vegaprotocol/react-helpers';
+import {
+  AccountType,
+  AssetStatus,
+  WithdrawalStatus,
+} from '@vegaprotocol/types';
 import merge from 'lodash/merge';
 import type { PartialDeep } from 'type-fest';
 import type { Account } from './types';
 import type { Withdrawals_party_withdrawalsConnection_edges_node } from './__generated__/Withdrawals';
 
 export const generateAsset = (override?: PartialDeep<Asset>) => {
-  const defaultAsset: Asset = {
+  const defaultAsset: AssetWithStatus = {
     __typename: 'Asset',
     id: 'asset-id',
     symbol: 'asset-symbol',
     name: 'asset-name',
     decimals: 5,
+    status: AssetStatus.STATUS_ENABLED,
     source: {
       __typename: 'ERC20',
       contractAddress: 'contract-address',
@@ -47,6 +52,7 @@ export const generateWithdrawal = (
         id: 'asset-id',
         symbol: 'asset-symbol',
         decimals: 2,
+        status: AssetStatus.STATUS_ENABLED,
         source: {
           __typename: 'ERC20',
           contractAddress: '0x123',

libs/withdraws/src/lib/use-create-withdraw.spec.tsx

@@ -20,6 +20,7 @@ import type {
 } from './__generated__/WithdrawalEvent';
 import { WITHDRAWAL_BUS_EVENT_SUB } from './use-withdrawals';
 import { WithdrawalStatus } from '@vegaprotocol/types';
+import { AssetStatus } from '@vegaprotocol/types/types';
 
 function setup(
   vegaWalletContext: Partial<VegaWalletContextShape>,
@@ -73,6 +74,7 @@ beforeEach(() => {
       name: 'asset-name',
       symbol: 'asset-symbol',
       decimals: 2,
+      status: AssetStatus.STATUS_ENABLED,
       source: {
         __typename: 'ERC20',
         contractAddress: '0x123',

libs/withdraws/src/lib/use-withdrawals.ts

@@ -27,6 +27,7 @@ const WITHDRAWAL_FRAGMENT = gql`
       name
       symbol
       decimals
+      status
       source {
         ... on ERC20 {
           contractAddress

libs/withdraws/src/lib/withdraw-form-container.tsx

@@ -1,6 +1,5 @@
-import compact from 'lodash/compact';
 import { gql, useQuery } from '@apollo/client';
-import { t } from '@vegaprotocol/react-helpers';
+import { getEnabledAssets, t } from '@vegaprotocol/react-helpers';
 import { useMemo } from 'react';
 import type { WithdrawalArgs } from './use-create-withdraw';
 import { WithdrawManager } from './withdraw-manager';
@@ -12,6 +11,7 @@ export const ASSET_FRAGMENT = gql`
     symbol
     name
     decimals
+    status
     source {
       ... on ERC20 {
         contractAddress
@@ -69,7 +69,7 @@ export const WithdrawFormContainer = ({
       return [];
     }
 
-    return compact(data.assetsConnection.edges).map((e) => e.node);
+    return getEnabledAssets(data);
   }, [data]);
 
   if (loading || !data) {

libs/withdraws/src/lib/withdraw-manager.tsx

@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 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 { addDecimal } from '@vegaprotocol/react-helpers';
 import { AccountType } from '@vegaprotocol/types';
 import BigNumber from 'bignumber.js';
@@ -10,10 +11,9 @@ import { useGetWithdrawThreshold } from './use-get-withdraw-threshold';
 import { captureException } from '@sentry/react';
 import { useGetWithdrawDelay } from './use-get-withdraw-delay';
 import { useWithdrawStore } from './withdraw-store';
-import type { AssetFields } from './__generated__/AssetFields';
 
 export interface WithdrawManagerProps {
-  assets: AssetFields[];
+  assets: Asset[];
   accounts: Account[];
   submit: (args: WithdrawalArgs) => void;
 }