feat: add status indicator

* test: add test for positions in portfolio

* test: update position validation to include updates

* chore: add wait for marketlist

.github/workflows/capsule-cypress-manual-trigger.yml

@@ -47,6 +47,14 @@ jobs:
       ## Checkout capsule
       #######
 
+      # Checkout front ends
+      - name: Checkout frontend mono repo
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
+          fetch-depth: 0
+          path: './frontend-monorepo'
+
       # Checkout capsule to build local network
       - name: Checkout capsule
         uses: actions/checkout@v2
@@ -120,13 +128,6 @@ jobs:
       ## Run some tests
       ######
 
-      # Checkout front ends
-      - name: Checkout frontend mono repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.ref }}
-          fetch-depth: 0
-
       - name: Install root dependencies
         run: yarn install
 

.github/workflows/capsule-cypress-night-run.yml

@@ -31,6 +31,14 @@ jobs:
       ## Checkout capsule
       #######
 
+      # Checkout front ends
+      - name: Checkout frontend mono repo
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
+          fetch-depth: 0
+          path: './frontend-monorepo'
+
       # Checkout capsule to build local network
       - name: Checkout capsule
         uses: actions/checkout@v2
@@ -104,13 +112,6 @@ jobs:
       ## Run some tests
       ######
 
-      # Checkout front ends
-      - name: Checkout frontend mono repo
-        uses: actions/checkout@v2
-        with:
-          ref: master
-          fetch-depth: 0
-
       - name: Install root dependencies
         run: yarn install
 

.prettierignore

@@ -3,6 +3,7 @@
 /dist
 /coverage
 __generated__
+__generated___
 
 apps/static/src/assets/devnet-tranches.json
 apps/static/src/assets/mainnet-tranches.json

README.md

@@ -69,7 +69,7 @@ Run `nx serve my-app` for a dev server. Navigate to the port specified in `app/<
 
 ### Using Apollo GraphQL and Generate Types
 
-In order to generate the schemas for your GraphQL queries, you can run `NX_VEGA_URL=[YOUR URL HERE] nx run types:generate`.
+In order to generate the schemas for your GraphQL queries, you can run `GRAPHQL_SCHEMA_PATH=[YOUR SCHEMA FILE / API URL HERE] nx run types:generate`.
 
 ```bash
 export  NX_VEGA_URL=https://api.n11.testnet.vega.xyz/graphql

apps/console-lite-e2e/src/integration/market-selector.test.ts

@@ -69,9 +69,7 @@ describe('market selector', () => {
       cy.get('input[placeholder="Search"]').clear();
       cy.get('input[placeholder="Search"]').type('aa');
       const filtered = markets.filter(
-        (market) =>
-          market.data.market.state === 'STATE_ACTIVE' &&
-          market.name.match(/aa/i)
+        (market) => market.state === 'STATE_ACTIVE' && market.name.match(/aa/i)
       );
       cy.getByTestId('market-pane')
         .children()

apps/console-lite-e2e/src/support/mocks/commons.ts

@@ -76,14 +76,7 @@ const protoCandles = [
 export const protoMarket = {
   id: 'first-btcusd-id',
   name: 'AAVEDAI Monthly (30 Jun 2022)',
-  data: {
-    market: {
-      id: 'first-btcusd-id',
-      state: 'STATE_ACTIVE',
-      __typename: 'Market',
-    },
-    __typename: 'MarketData',
-  },
+  state: 'STATE_ACTIVE',
   tradableInstrument: {
     instrument: {
       code: 'AAVEDAI.MF21',

apps/console-lite-e2e/src/support/mocks/generate-markets.ts

@@ -8,14 +8,6 @@ export const generateSimpleMarkets = () => {
         id: '57fbaa322e97cfc8bb5f1de048c37e033c41b1ac1906d3aed9960912a067ef5a',
         name: 'CELUSD (June 2022)',
         state: 'Active',
-        data: {
-          market: {
-            id: '57fbaa322e97cfc8bb5f1de048c37e033c41b1ac1906d3aed9960912a067ef5a',
-            state: 'STATE_PENDING',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'CELUSD',
@@ -45,14 +37,6 @@ export const generateSimpleMarkets = () => {
         id: 'ccf2f04865e5951ac3405da6e16b7cbdb535a0ad32df4df2dbed4262cf473255',
         name: 'XMRUSD market',
         state: 'Suspended',
-        data: {
-          market: {
-            id: 'ccf2f04865e5951ac3405da6e16b7cbdb535a0ad32df4df2dbed4262cf473255',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'XMRUSD',
@@ -82,14 +66,6 @@ export const generateSimpleMarkets = () => {
         id: '6030e5b4e0ca3297a26081e5af4d453f97f96baab2d74bf56f84efcffc4c382f',
         name: 'UNIDAI Monthly (30 Jun 2022)',
         state: 'Active',
-        data: {
-          market: {
-            id: '6030e5b4e0ca3297a26081e5af4d453f97f96baab2d74bf56f84efcffc4c382f',
-            state: 'STATE_SUSPENDED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'UNIDAI.MF21',
@@ -193,14 +169,6 @@ export const generateSimpleMarkets = () => {
         id: 'de74a5572045b300e8ec50d136896912ec76e7d7ec135bc305dfd4854d9363a4',
         name: 'XMRUSD market',
         state: 'Pending',
-        data: {
-          market: {
-            id: 'de74a5572045b300e8ec50d136896912ec76e7d7ec135bc305dfd4854d9363a4',
-            state: 'STATE_ACTIVE',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'XMRUSD',
@@ -303,14 +271,6 @@ export const generateSimpleMarkets = () => {
         id: '31ea96284611771e486c820acb26a325a99664f9854b5a7e7ad99023efa8f9e6',
         name: 'ApeCoin (18 Jul 2022)',
         state: 'Closed',
-        data: {
-          market: {
-            id: '31ea96284611771e486c820acb26a325a99664f9854b5a7e7ad99023efa8f9e6',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'APE/USD',
@@ -339,14 +299,6 @@ export const generateSimpleMarkets = () => {
         id: '34cff959cdc2ffdb0f167820d701fe8b51cc6b8588e650d93369aaa22d6f8b74',
         name: 'BTCUSD Monthly (18 Jul 2022)',
         state: 'Settled',
-        data: {
-          market: {
-            id: '34cff959cdc2ffdb0f167820d701fe8b51cc6b8588e650d93369aaa22d6f8b74',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'BTCUSD.MF21',
@@ -377,14 +329,6 @@ export const generateSimpleMarkets = () => {
         id: '87b0bbb3c171baa5d97dfc3852332829c91e5c5dc9f7c8fb584c6d8ac75aaaf2',
         name: 'Builders Club x ETHcc',
         state: 'Settled',
-        data: {
-          market: {
-            id: '87b0bbb3c171baa5d97dfc3852332829c91e5c5dc9f7c8fb584c6d8ac75aaaf2',
-            state: 'STATE_ACTIVE',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'LTCUSD',
@@ -475,14 +419,6 @@ export const generateSimpleMarkets = () => {
         id: '45266143c6e9b58f4cff9b8906e971c531bb29ea7af01066973f9b77e8134823',
         name: 'BTCUSD Monthly (18 Jul 2022)',
         state: 'Pending',
-        data: {
-          market: {
-            id: '45266143c6e9b58f4cff9b8906e971c531bb29ea7af01066973f9b77e8134823',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'BTCUSD.MF21',
@@ -513,14 +449,6 @@ export const generateSimpleMarkets = () => {
         id: '65663ebdc96161162769c4d5c5508137416748178d7cb28e2cb0d07a151a2bc6',
         name: 'ETHBTC Quarterly (30 Jun 2022)',
         state: 'Active',
-        data: {
-          market: {
-            id: '65663ebdc96161162769c4d5c5508137416748178d7cb28e2cb0d07a151a2bc6',
-            state: 'STATE_ACTIVE',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'ETHBTC.QM21',
@@ -624,14 +552,6 @@ export const generateSimpleMarkets = () => {
         id: '234afabd27e3bce1a879039c041f9f00f915d98459935ddafd0169d38dd13850',
         name: 'Apple Monthly (30 Jun 2022)',
         state: 'Active',
-        data: {
-          market: {
-            id: '234afabd27e3bce1a879039c041f9f00f915d98459935ddafd0169d38dd13850',
-            state: 'STATE_ACTIVE',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'AAPL.MF21',
@@ -736,14 +656,6 @@ export const generateSimpleMarkets = () => {
         id: '9f2a3c1caa67bb0773ec18d908d32b55b129b9ec2d106a8e9a87f6aa5c0375a6',
         name: 'Tesla Quarterly (30 Jun 2022)',
         state: 'Active',
-        data: {
-          market: {
-            id: '9f2a3c1caa67bb0773ec18d908d32b55b129b9ec2d106a8e9a87f6aa5c0375a6',
-            state: 'STATE_ACTIVE',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'TSLA.QM21',
@@ -848,14 +760,6 @@ export const generateSimpleMarkets = () => {
         id: '8a45ee934d3ddac4b036f9884df1064a5353c620a56f775ba36597d0edef9a7a',
         name: 'Go big or Go home',
         state: 'Active',
-        data: {
-          market: {
-            id: '8a45ee934d3ddac4b036f9884df1064a5353c620a56f775ba36597d0edef9a7a',
-            state: 'STATE_SUSPENDED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'LTCUSD',
@@ -899,14 +803,6 @@ export const generateSimpleMarkets = () => {
         id: 'aede7b9ac0c3b225004929c5455160a00f59864aad32ec366e8a2bff1b30fd0f',
         name: 'BTCUSD Monthly (08 Jul 2022)',
         state: 'Active',
-        data: {
-          market: {
-            id: 'aede7b9ac0c3b225004929c5455160a00f59864aad32ec366e8a2bff1b30fd0f',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'BTCUSD.MF21',
@@ -937,14 +833,6 @@ export const generateSimpleMarkets = () => {
         id: '9398707e01daa1a1f1ca6ff87cf8d6c03fe7373ce31121ce81b99a129e6bda47',
         name: 'BTCUSD Monthly (18 Jul 2022)',
         state: 'Active',
-        data: {
-          market: {
-            id: '9398707e01daa1a1f1ca6ff87cf8d6c03fe7373ce31121ce81b99a129e6bda47',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
         tradableInstrument: {
           instrument: {
             code: 'BTCUSD.MF21',
@@ -983,10 +871,6 @@ export const generateLongListMarkets = (count: number) => {
       ...protoMarket,
       id: id + i,
       name: name + i,
-      data: {
-        ...protoMarket.data,
-        id: id + i,
-      },
     });
   }
   return { markets };

apps/console-lite/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*", "__generated__"],
+  "ignorePatterns": ["!**/*", "__generated__", "__generated___"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/console-lite/src/app/components/deal-ticket/MarketTags.graphql

@@ -0,0 +1,11 @@
+query MarketTags($marketId: ID!) {
+  market(id: $marketId) {
+    tradableInstrument {
+      instrument {
+        metadata {
+          tags
+        }
+      }
+    }
+  }
+}

apps/console-lite/src/app/components/deal-ticket/PartyBalance.graphql

@@ -0,0 +1,14 @@
+query PartyBalanceQuery($partyId: ID!) {
+  party(id: $partyId) {
+    accounts {
+      type
+      balance
+      asset {
+        id
+        symbol
+        name
+        decimals
+      }
+    }
+  }
+}

apps/console-lite/src/app/components/deal-ticket/__generated___/MarketTags.ts

@@ -0,0 +1,54 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type MarketTagsQueryVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+}>;
+
+
+export type MarketTagsQuery = { __typename?: 'Query', market?: { __typename?: 'Market', tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null } } } } | null };
+
+
+export const MarketTagsDocument = gql`
+    query MarketTags($marketId: ID!) {
+  market(id: $marketId) {
+    tradableInstrument {
+      instrument {
+        metadata {
+          tags
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useMarketTagsQuery__
+ *
+ * To run a query within a React component, call `useMarketTagsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMarketTagsQuery` 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 } = useMarketTagsQuery({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useMarketTagsQuery(baseOptions: Apollo.QueryHookOptions<MarketTagsQuery, MarketTagsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarketTagsQuery, MarketTagsQueryVariables>(MarketTagsDocument, options);
+      }
+export function useMarketTagsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketTagsQuery, MarketTagsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarketTagsQuery, MarketTagsQueryVariables>(MarketTagsDocument, options);
+        }
+export type MarketTagsQueryHookResult = ReturnType<typeof useMarketTagsQuery>;
+export type MarketTagsLazyQueryHookResult = ReturnType<typeof useMarketTagsLazyQuery>;
+export type MarketTagsQueryResult = Apollo.QueryResult<MarketTagsQuery, MarketTagsQueryVariables>;

apps/console-lite/src/app/components/deal-ticket/__generated___/PartyBalance.ts

@@ -0,0 +1,57 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type PartyBalanceQueryQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type PartyBalanceQueryQuery = { __typename?: 'Query', party?: { __typename?: 'Party', accounts?: Array<{ __typename?: 'Account', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', id: string, symbol: string, name: string, decimals: number } }> | null } | null };
+
+
+export const PartyBalanceQueryDocument = gql`
+    query PartyBalanceQuery($partyId: ID!) {
+  party(id: $partyId) {
+    accounts {
+      type
+      balance
+      asset {
+        id
+        symbol
+        name
+        decimals
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __usePartyBalanceQueryQuery__
+ *
+ * To run a query within a React component, call `usePartyBalanceQueryQuery` and pass it any options that fit your needs.
+ * When your component renders, `usePartyBalanceQueryQuery` 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 } = usePartyBalanceQueryQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function usePartyBalanceQueryQuery(baseOptions: Apollo.QueryHookOptions<PartyBalanceQueryQuery, PartyBalanceQueryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<PartyBalanceQueryQuery, PartyBalanceQueryQueryVariables>(PartyBalanceQueryDocument, options);
+      }
+export function usePartyBalanceQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PartyBalanceQueryQuery, PartyBalanceQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<PartyBalanceQueryQuery, PartyBalanceQueryQueryVariables>(PartyBalanceQueryDocument, options);
+        }
+export type PartyBalanceQueryQueryHookResult = ReturnType<typeof usePartyBalanceQueryQuery>;
+export type PartyBalanceQueryLazyQueryHookResult = ReturnType<typeof usePartyBalanceQueryLazyQuery>;
+export type PartyBalanceQueryQueryResult = Apollo.QueryResult<PartyBalanceQueryQuery, PartyBalanceQueryQueryVariables>;

apps/console-lite/src/app/components/deal-ticket/deal-ticket-steps.tsx

@@ -110,8 +110,7 @@ export const DealTicketSteps = ({
     fieldErrors: errors,
   });
 
-  const { submit, transaction, finalizedOrder, TransactionDialog } =
-    useOrderSubmit();
+  const { submit, transaction, finalizedOrder, Dialog } = useOrderSubmit();
 
   const onSizeChange = (value: number[]) => {
     const newVal = new BigNumber(value[0])
@@ -249,13 +248,13 @@ export const DealTicketSteps = ({
             notionalSize={notionalSize || emptyString}
             fees={fees || emptyString}
           />
-          <TransactionDialog
+          <Dialog
             title={getOrderDialogTitle(finalizedOrder?.status)}
             intent={getOrderDialogIntent(finalizedOrder?.status)}
             icon={getOrderDialogIcon(finalizedOrder?.status)}
           >
             <OrderFeedback transaction={transaction} order={finalizedOrder} />
-          </TransactionDialog>
+          </Dialog>
         </div>
       ),
       disabled: true,

apps/console-lite/src/app/components/deposits/Deposits.graphql

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

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

@@ -0,0 +1,57 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type DepositsQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type DepositsQuery = { __typename?: 'Query', assetsConnection: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, source: { __typename?: 'BuiltinAsset' } | { __typename?: 'ERC20', contractAddress: string } } } | null> | null } };
+
+
+export const DepositsDocument = gql`
+    query Deposits {
+  assetsConnection {
+    edges {
+      node {
+        id
+        name
+        symbol
+        decimals
+        source {
+          ... on ERC20 {
+            contractAddress
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __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: {
+ *   },
+ * });
+ */
+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>;

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

@@ -22,9 +22,8 @@ export const NavigationDrawer = ({
   const width = 'w-full md:w-auto md:min-w-[15%] shrink-0';
   const position = 'absolute inset-0 h-full z-10 md:static';
   const background = 'bg-black/50 dark:bg-white/50';
-  const border = 'border-r border-neutral-300 dark:border-neutral-700';
   const flex = 'flex justify-end overflow-hidden';
-  const joinedClasses = [flex, width, position, background, border].join(' ');
+  const joinedClasses = [flex, width, position, background].join(' ');
 
   const outerStyles = classNames(joinedClasses, {
     visible: isMenuOpen,

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

@@ -12,7 +12,7 @@ const Header = () => {
   } = useContext(LocalContext);
   return (
     <div
-      className="flex items-stretch pr-6 py-6 bg-black text-neutral-400 border-b border-neutral-300 dark:border-neutral-700"
+      className="flex items-stretch pr-6 py-6 bg-black text-neutral-400"
       data-testid="header"
     >
       <Logo />

apps/console-lite/src/app/components/simple-market-list/Candles.graphql

@@ -0,0 +1,5 @@
+subscription CandleLive($marketId: ID!) {
+  candles(marketId: $marketId, interval: INTERVAL_I1H) {
+    close
+  }
+}

apps/console-lite/src/app/components/simple-market-list/SimpleMarkets.graphql

@@ -0,0 +1,44 @@
+fragment SimpleMarketDataFields on MarketData {
+  market {
+    id
+    state
+  }
+}
+
+query SimpleMarkets($CandleSince: String!) {
+  markets {
+    id
+    name
+    state
+    data {
+      ...SimpleMarketDataFields
+    }
+    tradableInstrument {
+      instrument {
+        code
+        metadata {
+          tags
+        }
+        product {
+          __typename
+          ... on Future {
+            quoteName
+            settlementAsset {
+              symbol
+            }
+          }
+        }
+      }
+    }
+    candles(interval: INTERVAL_I1H, since: $CandleSince) {
+      open
+      close
+    }
+  }
+}
+
+subscription SimpleMarketDataSub {
+  marketData {
+    ...SimpleMarketDataFields
+  }
+}

apps/console-lite/src/app/components/simple-market-list/__generated__/SimpleMarkets.ts

@@ -9,26 +9,6 @@ import { MarketState } from "@vegaprotocol/types";
 // GraphQL query operation: SimpleMarkets
 // ====================================================
 
-export interface SimpleMarkets_markets_data_market {
-  __typename: "Market";
-  /**
-   * Market ID
-   */
-  id: string;
-  /**
-   * Current state of the market
-   */
-  state: MarketState;
-}
-
-export interface SimpleMarkets_markets_data {
-  __typename: "MarketData";
-  /**
-   * market ID of the associated mark price
-   */
-  market: SimpleMarkets_markets_data_market;
-}
-
 export interface SimpleMarkets_markets_tradableInstrument_instrument_metadata {
   __typename: "InstrumentMetadata";
   /**
@@ -107,10 +87,6 @@ export interface SimpleMarkets_markets {
    * Current state of the market
    */
   state: MarketState;
-  /**
-   * marketData for the given market
-   */
-  data: SimpleMarkets_markets_data | null;
   /**
    * An instance of, or reference to, a tradable instrument.
    */

apps/console-lite/src/app/components/simple-market-list/__generated___/Candles.ts

@@ -0,0 +1,43 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type CandleLiveSubscriptionVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+}>;
+
+
+export type CandleLiveSubscription = { __typename?: 'Subscription', candles: { __typename?: 'Candle', close: string } };
+
+
+export const CandleLiveDocument = gql`
+    subscription CandleLive($marketId: ID!) {
+  candles(marketId: $marketId, interval: INTERVAL_I1H) {
+    close
+  }
+}
+    `;
+
+/**
+ * __useCandleLiveSubscription__
+ *
+ * To run a query within a React component, call `useCandleLiveSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useCandleLiveSubscription` 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 } = useCandleLiveSubscription({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useCandleLiveSubscription(baseOptions: Apollo.SubscriptionHookOptions<CandleLiveSubscription, CandleLiveSubscriptionVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useSubscription<CandleLiveSubscription, CandleLiveSubscriptionVariables>(CandleLiveDocument, options);
+      }
+export type CandleLiveSubscriptionHookResult = ReturnType<typeof useCandleLiveSubscription>;
+export type CandleLiveSubscriptionResult = Apollo.SubscriptionResult<CandleLiveSubscription>;

apps/console-lite/src/app/components/simple-market-list/__generated___/SimpleMarkets.ts

@@ -0,0 +1,117 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type SimpleMarketDataFieldsFragment = { __typename?: 'MarketData', market: { __typename?: 'Market', id: string, state: Types.MarketState } };
+
+export type SimpleMarketsQueryVariables = Types.Exact<{
+  CandleSince: Types.Scalars['String'];
+}>;
+
+
+export type SimpleMarketsQuery = { __typename?: 'Query', markets?: Array<{ __typename?: 'Market', id: string, name: string, state: Types.MarketState, data?: { __typename?: 'MarketData', market: { __typename?: 'Market', id: string, state: Types.MarketState } } | null, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename: 'Future', quoteName: string, settlementAsset: { __typename?: 'Asset', symbol: string } } } }, candles?: Array<{ __typename?: 'Candle', open: string, close: string } | null> | null }> | null };
+
+export type SimpleMarketDataSubSubscriptionVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type SimpleMarketDataSubSubscription = { __typename?: 'Subscription', marketData: { __typename?: 'MarketData', market: { __typename?: 'Market', id: string, state: Types.MarketState } } };
+
+export const SimpleMarketDataFieldsFragmentDoc = gql`
+    fragment SimpleMarketDataFields on MarketData {
+  market {
+    id
+    state
+  }
+}
+    `;
+export const SimpleMarketsDocument = gql`
+    query SimpleMarkets($CandleSince: String!) {
+  markets {
+    id
+    name
+    state
+    data {
+      ...SimpleMarketDataFields
+    }
+    tradableInstrument {
+      instrument {
+        code
+        metadata {
+          tags
+        }
+        product {
+          __typename
+          ... on Future {
+            quoteName
+            settlementAsset {
+              symbol
+            }
+          }
+        }
+      }
+    }
+    candles(interval: INTERVAL_I1H, since: $CandleSince) {
+      open
+      close
+    }
+  }
+}
+    ${SimpleMarketDataFieldsFragmentDoc}`;
+
+/**
+ * __useSimpleMarketsQuery__
+ *
+ * To run a query within a React component, call `useSimpleMarketsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useSimpleMarketsQuery` 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 } = useSimpleMarketsQuery({
+ *   variables: {
+ *      CandleSince: // value for 'CandleSince'
+ *   },
+ * });
+ */
+export function useSimpleMarketsQuery(baseOptions: Apollo.QueryHookOptions<SimpleMarketsQuery, SimpleMarketsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<SimpleMarketsQuery, SimpleMarketsQueryVariables>(SimpleMarketsDocument, options);
+      }
+export function useSimpleMarketsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<SimpleMarketsQuery, SimpleMarketsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<SimpleMarketsQuery, SimpleMarketsQueryVariables>(SimpleMarketsDocument, options);
+        }
+export type SimpleMarketsQueryHookResult = ReturnType<typeof useSimpleMarketsQuery>;
+export type SimpleMarketsLazyQueryHookResult = ReturnType<typeof useSimpleMarketsLazyQuery>;
+export type SimpleMarketsQueryResult = Apollo.QueryResult<SimpleMarketsQuery, SimpleMarketsQueryVariables>;
+export const SimpleMarketDataSubDocument = gql`
+    subscription SimpleMarketDataSub {
+  marketData {
+    ...SimpleMarketDataFields
+  }
+}
+    ${SimpleMarketDataFieldsFragmentDoc}`;
+
+/**
+ * __useSimpleMarketDataSubSubscription__
+ *
+ * To run a query within a React component, call `useSimpleMarketDataSubSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useSimpleMarketDataSubSubscription` 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 } = useSimpleMarketDataSubSubscription({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useSimpleMarketDataSubSubscription(baseOptions?: Apollo.SubscriptionHookOptions<SimpleMarketDataSubSubscription, SimpleMarketDataSubSubscriptionVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useSubscription<SimpleMarketDataSubSubscription, SimpleMarketDataSubSubscriptionVariables>(SimpleMarketDataSubDocument, options);
+      }
+export type SimpleMarketDataSubSubscriptionHookResult = ReturnType<typeof useSimpleMarketDataSubSubscription>;
+export type SimpleMarketDataSubSubscriptionResult = Apollo.SubscriptionResult<SimpleMarketDataSubSubscription>;

apps/console-lite/src/app/components/simple-market-list/constants.ts

@@ -195,3 +195,5 @@ export const ROW_CLASS_RULES = {
   'cursor-pointer': ({ data }: { data: SimpleMarkets_markets }) =>
     IS_MARKET_TRADABLE(data || {}),
 };
+
+export const LARGE_SCREENS = ['xl', 'xxl'];

apps/console-lite/src/app/components/simple-market-list/data-provider.ts

@@ -10,25 +10,12 @@ import type {
   SimpleMarketDataSub_marketData,
 } from './__generated__/SimpleMarketDataSub';
 
-const MARKET_DATA_FRAGMENT = gql`
-  fragment SimpleMarketDataFields on MarketData {
-    market {
-      id
-      state
-    }
-  }
-`;
-
 export const MARKETS_QUERY = gql`
-  ${MARKET_DATA_FRAGMENT}
   query SimpleMarkets($CandleSince: String!) {
     markets {
       id
       name
       state
-      data {
-        ...SimpleMarketDataFields
-      }
       tradableInstrument {
         instrument {
           code
@@ -55,10 +42,12 @@ export const MARKETS_QUERY = gql`
 `;
 
 const MARKET_DATA_SUB = gql`
-  ${MARKET_DATA_FRAGMENT}
   subscription SimpleMarketDataSub {
     marketData {
-      ...SimpleMarketDataFields
+      market {
+        id
+        state
+      }
     }
   }
 `;
@@ -78,7 +67,7 @@ const update = (
   return produce(data, (draft) => {
     const index = draft.findIndex((m) => m.id === delta.market.id);
     if (index !== -1) {
-      draft[index].data = delta;
+      draft[index].state = delta.market.state;
     }
     // @TODO - else push new market to draft
   });

apps/console-lite/src/app/components/simple-market-list/simple-market-list.spec.tsx

@@ -66,11 +66,7 @@ describe('SimpleMarketList', () => {
     const data = [
       {
         id: '1',
-        data: {
-          market: {
-            state: MarketState.STATE_ACTIVE,
-          },
-        },
+        state: MarketState.STATE_ACTIVE,
         tradableInstrument: {
           instrument: {
             product: {
@@ -86,11 +82,7 @@ describe('SimpleMarketList', () => {
       },
       {
         id: '2',
-        data: {
-          market: {
-            state: MarketState.STATE_ACTIVE,
-          },
-        },
+        state: MarketState.STATE_ACTIVE,
         tradableInstrument: {
           instrument: {
             product: {

apps/console-lite/src/app/components/simple-market-list/simple-market-list.tsx

@@ -45,7 +45,7 @@ export type RouterParams = Partial<{
 }>;
 
 const SimpleMarketList = () => {
-  const { isMobile } = useScreenDimensions();
+  const { isMobile, screenSize } = useScreenDimensions();
   const navigate = useNavigate();
   const params = useParams<RouterParams>();
   const theme = useContext(ThemeContext);
@@ -80,7 +80,7 @@ const SimpleMarketList = () => {
   useEffect(() => {
     const statuses: Record<string, MarketState | ''> = {};
     data?.forEach((market) => {
-      statuses[market.id] = market.data?.market.state || '';
+      statuses[market.id] = market.state || '';
     });
     statusesRef.current = statuses;
   }, [data, statusesRef]);
@@ -129,6 +129,10 @@ const SimpleMarketList = () => {
     [handleRowClicked]
   );
 
+  const shouldSuppressHorizontalScroll = useMemo(() => {
+    return !isMobile && constants.LARGE_SCREENS.includes(screenSize);
+  }, [isMobile, screenSize]);
+
   return (
     <div className="h-full p-4 md:p-6 grid grid-rows-[min-content,1fr]">
       <SimpleMarketToolbar data={data || []} />
@@ -156,6 +160,7 @@ const SimpleMarketList = () => {
           suppressRowTransform
           onCellKeyDown={onCellKeyDown}
           tabToNextCell={onTabToNextCell}
+          suppressHorizontalScroll={shouldSuppressHorizontalScroll}
         />
       </AsyncRenderer>
     </div>

apps/console-lite/src/app/components/simple-market-list/simple-market-toolbar.tsx

@@ -75,7 +75,7 @@ const SimpleMarketToolbar = ({ data }: Props) => {
   );
 
   return (
-    <div className="w-full max-w-full mb-4 font-alpha">
+    <div className="w-full max-w-full mb-2 md:mb-8 font-alpha">
       <ul
         ref={slideContRef}
         className="grid grid-flow-col auto-cols-min gap-4 relative pb-2 mb-2"
@@ -121,8 +121,8 @@ const SimpleMarketToolbar = ({ data }: Props) => {
           style={sliderStyles}
         />
       </ul>
-      <div className="grid gap-8 pb-4 mt-6 md:grid-cols-[min-content,min-content,1fr]">
-        <div className="pb-8">
+      <div className="grid gap-4 pb-2 mt-2 md:mt-6 md:grid-cols-[min-content,min-content,1fr]">
+        <div className="pb-2">
           <DropdownMenu onOpenChange={(open) => setOpen(open)}>
             <DropdownMenuTrigger
               className="mr-2 w-auto text-capMenu text-black dark:text-white"
@@ -148,7 +148,7 @@ const SimpleMarketToolbar = ({ data }: Props) => {
             <DropdownMenuContent>
               {STATES_FILTER.map(({ value, text }) => (
                 <DropdownMenuCheckboxItem
-                  className="uppercase text-ui dark:text-white"
+                  className="uppercase text-ui"
                   key={value}
                   checked={
                     value === params.state ||
@@ -170,7 +170,7 @@ const SimpleMarketToolbar = ({ data }: Props) => {
         </div>
         {activeNumber > 0 && (
           <ul
-            className="md:gap-6 gap-4 pb-4 md:ml-2 flex flex-wrap"
+            className="md:gap-x-6 gap-x-4 gap-y-1 pb-2 md:ml-2 flex flex-wrap"
             data-testid="market-assets-menu"
             aria-label={t('Asset on the market')}
           >

apps/console-lite/src/app/constants/index.ts

@@ -10,7 +10,7 @@ export const TRADABLE_STATES = {
 };
 
 export const IS_MARKET_TRADABLE = (market: SimpleMarkets_markets) =>
-  Boolean((market.data?.market.state ?? '') in TRADABLE_STATES && market?.id);
+  Boolean((market.state ?? '') in TRADABLE_STATES && market?.id);
 
 export const MARKET_STATES_MAP: Record<MarketState | '', string> = {
   [MarketState.STATE_ACTIVE]: t('Active'),

apps/console-lite/src/app/hooks/EstimateOrder.graphql

@@ -0,0 +1,30 @@
+query EstimateOrder(
+  $marketId: ID!
+  $partyId: ID!
+  $price: String
+  $size: String!
+  $side: Side!
+  $timeInForce: OrderTimeInForce!
+  $expiration: String
+  $type: OrderType!
+) {
+  estimateOrder(
+    marketId: $marketId
+    partyId: $partyId
+    price: $price
+    size: $size
+    side: $side
+    timeInForce: $timeInForce
+    expiration: $expiration
+    type: $type
+  ) {
+    fee {
+      makerFee
+      infrastructureFee
+      liquidityFee
+    }
+    marginLevels {
+      initialLevel
+    }
+  }
+}

apps/console-lite/src/app/hooks/MarketMarkPrice.graphql

@@ -0,0 +1,8 @@
+query MarketMarkPrice($marketId: ID!) {
+  market(id: $marketId) {
+    decimalPlaces
+    data {
+      markPrice
+    }
+  }
+}

apps/console-lite/src/app/hooks/MarketPositions.graphql

@@ -0,0 +1,25 @@
+query MarketPositions($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    accounts {
+      type
+      balance
+      asset {
+        decimals
+      }
+      market {
+        id
+      }
+    }
+    positionsConnection {
+      edges {
+        node {
+          openVolume
+          market {
+            id
+          }
+        }
+      }
+    }
+  }
+}

apps/console-lite/src/app/hooks/PartyMarketData.graphql

@@ -0,0 +1,28 @@
+query PartyMarketData($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    accounts {
+      type
+      balance
+      asset {
+        id
+        decimals
+      }
+      market {
+        id
+      }
+    }
+    marginsConnection {
+      edges {
+        node {
+          market {
+            id
+          }
+          initialLevel
+          maintenanceLevel
+          searchLevel
+        }
+      }
+    }
+  }
+}

apps/console-lite/src/app/hooks/__generated___/EstimateOrder.ts

@@ -0,0 +1,78 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type EstimateOrderQueryVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+  partyId: Types.Scalars['ID'];
+  price?: Types.InputMaybe<Types.Scalars['String']>;
+  size: Types.Scalars['String'];
+  side: Types.Side;
+  timeInForce: Types.OrderTimeInForce;
+  expiration?: Types.InputMaybe<Types.Scalars['String']>;
+  type: Types.OrderType;
+}>;
+
+
+export type EstimateOrderQuery = { __typename?: 'Query', estimateOrder: { __typename?: 'OrderEstimate', fee: { __typename?: 'TradeFee', makerFee: string, infrastructureFee: string, liquidityFee: string }, marginLevels: { __typename?: 'MarginLevels', initialLevel: string } } };
+
+
+export const EstimateOrderDocument = gql`
+    query EstimateOrder($marketId: ID!, $partyId: ID!, $price: String, $size: String!, $side: Side!, $timeInForce: OrderTimeInForce!, $expiration: String, $type: OrderType!) {
+  estimateOrder(
+    marketId: $marketId
+    partyId: $partyId
+    price: $price
+    size: $size
+    side: $side
+    timeInForce: $timeInForce
+    expiration: $expiration
+    type: $type
+  ) {
+    fee {
+      makerFee
+      infrastructureFee
+      liquidityFee
+    }
+    marginLevels {
+      initialLevel
+    }
+  }
+}
+    `;
+
+/**
+ * __useEstimateOrderQuery__
+ *
+ * To run a query within a React component, call `useEstimateOrderQuery` and pass it any options that fit your needs.
+ * When your component renders, `useEstimateOrderQuery` 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 } = useEstimateOrderQuery({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *      partyId: // value for 'partyId'
+ *      price: // value for 'price'
+ *      size: // value for 'size'
+ *      side: // value for 'side'
+ *      timeInForce: // value for 'timeInForce'
+ *      expiration: // value for 'expiration'
+ *      type: // value for 'type'
+ *   },
+ * });
+ */
+export function useEstimateOrderQuery(baseOptions: Apollo.QueryHookOptions<EstimateOrderQuery, EstimateOrderQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<EstimateOrderQuery, EstimateOrderQueryVariables>(EstimateOrderDocument, options);
+      }
+export function useEstimateOrderLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<EstimateOrderQuery, EstimateOrderQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<EstimateOrderQuery, EstimateOrderQueryVariables>(EstimateOrderDocument, options);
+        }
+export type EstimateOrderQueryHookResult = ReturnType<typeof useEstimateOrderQuery>;
+export type EstimateOrderLazyQueryHookResult = ReturnType<typeof useEstimateOrderLazyQuery>;
+export type EstimateOrderQueryResult = Apollo.QueryResult<EstimateOrderQuery, EstimateOrderQueryVariables>;

apps/console-lite/src/app/hooks/__generated___/MarketMarkPrice.ts

@@ -0,0 +1,51 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type MarketMarkPriceQueryVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+}>;
+
+
+export type MarketMarkPriceQuery = { __typename?: 'Query', market?: { __typename?: 'Market', decimalPlaces: number, data?: { __typename?: 'MarketData', markPrice: string } | null } | null };
+
+
+export const MarketMarkPriceDocument = gql`
+    query MarketMarkPrice($marketId: ID!) {
+  market(id: $marketId) {
+    decimalPlaces
+    data {
+      markPrice
+    }
+  }
+}
+    `;
+
+/**
+ * __useMarketMarkPriceQuery__
+ *
+ * To run a query within a React component, call `useMarketMarkPriceQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMarketMarkPriceQuery` 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 } = useMarketMarkPriceQuery({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useMarketMarkPriceQuery(baseOptions: Apollo.QueryHookOptions<MarketMarkPriceQuery, MarketMarkPriceQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarketMarkPriceQuery, MarketMarkPriceQueryVariables>(MarketMarkPriceDocument, options);
+      }
+export function useMarketMarkPriceLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketMarkPriceQuery, MarketMarkPriceQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarketMarkPriceQuery, MarketMarkPriceQueryVariables>(MarketMarkPriceDocument, options);
+        }
+export type MarketMarkPriceQueryHookResult = ReturnType<typeof useMarketMarkPriceQuery>;
+export type MarketMarkPriceLazyQueryHookResult = ReturnType<typeof useMarketMarkPriceLazyQuery>;
+export type MarketMarkPriceQueryResult = Apollo.QueryResult<MarketMarkPriceQuery, MarketMarkPriceQueryVariables>;

apps/console-lite/src/app/hooks/__generated___/MarketPositions.ts

@@ -0,0 +1,68 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type MarketPositionsQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type MarketPositionsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, accounts?: Array<{ __typename?: 'Account', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', decimals: number }, market?: { __typename?: 'Market', id: string } | null }> | null, positionsConnection: { __typename?: 'PositionConnection', edges?: Array<{ __typename?: 'PositionEdge', node: { __typename?: 'Position', openVolume: string, market: { __typename?: 'Market', id: string } } }> | null } } | null };
+
+
+export const MarketPositionsDocument = gql`
+    query MarketPositions($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    accounts {
+      type
+      balance
+      asset {
+        decimals
+      }
+      market {
+        id
+      }
+    }
+    positionsConnection {
+      edges {
+        node {
+          openVolume
+          market {
+            id
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useMarketPositionsQuery__
+ *
+ * To run a query within a React component, call `useMarketPositionsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMarketPositionsQuery` 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 } = useMarketPositionsQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function useMarketPositionsQuery(baseOptions: Apollo.QueryHookOptions<MarketPositionsQuery, MarketPositionsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarketPositionsQuery, MarketPositionsQueryVariables>(MarketPositionsDocument, options);
+      }
+export function useMarketPositionsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketPositionsQuery, MarketPositionsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarketPositionsQuery, MarketPositionsQueryVariables>(MarketPositionsDocument, options);
+        }
+export type MarketPositionsQueryHookResult = ReturnType<typeof useMarketPositionsQuery>;
+export type MarketPositionsLazyQueryHookResult = ReturnType<typeof useMarketPositionsLazyQuery>;
+export type MarketPositionsQueryResult = Apollo.QueryResult<MarketPositionsQuery, MarketPositionsQueryVariables>;

apps/console-lite/src/app/hooks/__generated___/PartyMarketData.ts

@@ -0,0 +1,71 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type PartyMarketDataQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type PartyMarketDataQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, accounts?: Array<{ __typename?: 'Account', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', id: string, decimals: number }, market?: { __typename?: 'Market', id: string } | null }> | null, marginsConnection: { __typename?: 'MarginConnection', edges?: Array<{ __typename?: 'MarginEdge', node: { __typename?: 'MarginLevels', initialLevel: string, maintenanceLevel: string, searchLevel: string, market: { __typename?: 'Market', id: string } } }> | null } } | null };
+
+
+export const PartyMarketDataDocument = gql`
+    query PartyMarketData($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    accounts {
+      type
+      balance
+      asset {
+        id
+        decimals
+      }
+      market {
+        id
+      }
+    }
+    marginsConnection {
+      edges {
+        node {
+          market {
+            id
+          }
+          initialLevel
+          maintenanceLevel
+          searchLevel
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __usePartyMarketDataQuery__
+ *
+ * To run a query within a React component, call `usePartyMarketDataQuery` and pass it any options that fit your needs.
+ * When your component renders, `usePartyMarketDataQuery` 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 } = usePartyMarketDataQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function usePartyMarketDataQuery(baseOptions: Apollo.QueryHookOptions<PartyMarketDataQuery, PartyMarketDataQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<PartyMarketDataQuery, PartyMarketDataQueryVariables>(PartyMarketDataDocument, options);
+      }
+export function usePartyMarketDataLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PartyMarketDataQuery, PartyMarketDataQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<PartyMarketDataQuery, PartyMarketDataQueryVariables>(PartyMarketDataDocument, options);
+        }
+export type PartyMarketDataQueryHookResult = ReturnType<typeof usePartyMarketDataQuery>;
+export type PartyMarketDataLazyQueryHookResult = ReturnType<typeof usePartyMarketDataLazyQuery>;
+export type PartyMarketDataQueryResult = Apollo.QueryResult<PartyMarketDataQuery, PartyMarketDataQueryVariables>;

apps/console-lite/src/app/hooks/use-column-definitions.tsx

@@ -93,13 +93,13 @@ const useColumnDefinitions = ({ isMobile }: Props) => {
       {
         colId: 'status',
         headerName: t('Status'),
-        field: 'data.market.state',
+        field: 'state',
         headerClass: 'uppercase',
         minWidth: 100,
         cellRenderer: ({ data }: { data: SimpleMarkets_markets }) => (
           <div className="uppercase flex h-full items-center justify-center">
-            <div className="border text-center px-2 md:px-8 leading-4 md:leading-6">
-              {MARKET_STATES_MAP[data.data?.market.state || '']}
+            <div className="border text-center px-2 md:px-6 leading-4 md:leading-6">
+              {MARKET_STATES_MAP[data.state || '']}
             </div>
           </div>
         ),

apps/console-lite/src/app/hooks/use-markets-filter-data.ts

@@ -27,7 +27,7 @@ const useMarketsFilterData = (
         : params.state
         ? params.state
         : MarketState.STATE_ACTIVE;
-    if (state && state !== item.data?.market.state) {
+    if (state && state !== item.state) {
       return false;
     }
     return true;

apps/explorer/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*", "__generated__"],
+  "ignorePatterns": ["!**/*", "__generated__", "__generated___"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/explorer/src/app/components/header/header.spec.tsx

@@ -2,6 +2,12 @@ import { render, screen } from '@testing-library/react';
 import { Header } from './header';
 import { MemoryRouter } from 'react-router-dom';
 
+jest.mock('@vegaprotocol/environment', () => ({
+  NetworkSwitcher: () => (
+    <div data-testid="network-switcher">NetworkSwitcher</div>
+  ),
+}));
+
 jest.mock('../search', () => ({
   Search: () => <div data-testid="search">OrderList</div>,
 }));
@@ -25,4 +31,10 @@ describe('Header', () => {
 
     expect(screen.getByTestId('search')).toBeInTheDocument();
   });
+
+  it('should render network switcher', () => {
+    render(renderComponent());
+
+    expect(screen.getByTestId('network-switcher')).toBeInTheDocument();
+  });
 });

apps/explorer/src/app/components/header/header.tsx

@@ -5,6 +5,7 @@ import { t } from '@vegaprotocol/react-helpers';
 import { Search } from '../search';
 import { Routes } from '../../routes/route-names';
 import type { Dispatch, SetStateAction } from 'react';
+import { NetworkSwitcher } from '@vegaprotocol/environment';
 
 interface ThemeToggleProps {
   theme: 'light' | 'dark';
@@ -27,14 +28,17 @@ export const Header = ({
   );
   return (
     <header className={headerClasses}>
-      <Link to={Routes.HOME}>
-        <h1
-          className="text-3xl font-alpha uppercase calt mb-0"
-          data-testid="explorer-header"
-        >
-          {t('Vega Explorer')}
-        </h1>
-      </Link>
+      <div className="flex h-full items-center sm:items-stretch gap-4">
+        <Link to={Routes.HOME}>
+          <h1
+            className="text-3xl font-alpha uppercase calt mb-0"
+            data-testid="explorer-header"
+          >
+            {t('Vega Explorer')}
+          </h1>
+        </Link>
+        <NetworkSwitcher />
+      </div>
       <button
         data-testid="open-menu"
         className="md:hidden"

apps/explorer/src/app/routes/assets/Assets.graphql

@@ -0,0 +1,27 @@
+query AssetsQuery {
+  assetsConnection {
+    edges {
+      node {
+        id
+        name
+        symbol
+        decimals
+        source {
+          ... on ERC20 {
+            contractAddress
+          }
+          ... on BuiltinAsset {
+            maxFaucetAmountMint
+          }
+        }
+        infrastructureFeeAccount {
+          type
+          balance
+          market {
+            id
+          }
+        }
+      }
+    }
+  }
+}

apps/explorer/src/app/routes/assets/__generated___/Assets.ts

@@ -0,0 +1,67 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type AssetsQueryQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type AssetsQueryQuery = { __typename?: 'Query', assetsConnection: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string }, infrastructureFeeAccount: { __typename?: 'Account', type: Types.AccountType, balance: string, market?: { __typename?: 'Market', id: string } | null } } } | null> | null } };
+
+
+export const AssetsQueryDocument = gql`
+    query AssetsQuery {
+  assetsConnection {
+    edges {
+      node {
+        id
+        name
+        symbol
+        decimals
+        source {
+          ... on ERC20 {
+            contractAddress
+          }
+          ... on BuiltinAsset {
+            maxFaucetAmountMint
+          }
+        }
+        infrastructureFeeAccount {
+          type
+          balance
+          market {
+            id
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useAssetsQueryQuery__
+ *
+ * To run a query within a React component, call `useAssetsQueryQuery` and pass it any options that fit your needs.
+ * When your component renders, `useAssetsQueryQuery` 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 } = useAssetsQueryQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useAssetsQueryQuery(baseOptions?: Apollo.QueryHookOptions<AssetsQueryQuery, AssetsQueryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<AssetsQueryQuery, AssetsQueryQueryVariables>(AssetsQueryDocument, options);
+      }
+export function useAssetsQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AssetsQueryQuery, AssetsQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<AssetsQueryQuery, AssetsQueryQueryVariables>(AssetsQueryDocument, options);
+        }
+export type AssetsQueryQueryHookResult = ReturnType<typeof useAssetsQueryQuery>;
+export type AssetsQueryLazyQueryHookResult = ReturnType<typeof useAssetsQueryLazyQuery>;
+export type AssetsQueryQueryResult = Apollo.QueryResult<AssetsQueryQuery, AssetsQueryQueryVariables>;

apps/explorer/src/app/routes/governance/Proposals.graphql

@@ -0,0 +1,74 @@
+query ProposalsQuery {
+  proposals {
+    id
+    reference
+    state
+    datetime
+    rejectionReason
+    party {
+      id
+    }
+    terms {
+      closingDatetime
+      enactmentDatetime
+      change {
+        ... on NewMarket {
+          instrument {
+            name
+          }
+        }
+        ... on UpdateMarket {
+          marketId
+        }
+        ... on NewAsset {
+          __typename
+          symbol
+          source {
+            ... on BuiltinAsset {
+              maxFaucetAmountMint
+            }
+            ... on ERC20 {
+              contractAddress
+            }
+          }
+        }
+        ... on UpdateNetworkParameter {
+          networkParameter {
+            key
+            value
+          }
+        }
+      }
+    }
+    votes {
+      yes {
+        totalTokens
+        totalNumber
+        votes {
+          value
+          party {
+            id
+            stake {
+              currentStakeAvailable
+            }
+          }
+          datetime
+        }
+      }
+      no {
+        totalTokens
+        totalNumber
+        votes {
+          value
+          party {
+            id
+            stake {
+              currentStakeAvailable
+            }
+          }
+          datetime
+        }
+      }
+    }
+  }
+}

apps/explorer/src/app/routes/governance/__generated___/Proposals.ts

@@ -0,0 +1,114 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ProposalsQueryQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type ProposalsQueryQuery = { __typename?: 'Query', proposals?: Array<{ __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: string, rejectionReason?: Types.ProposalRejectionReason | null, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: string, enactmentDatetime?: string | null, change: { __typename: 'NewAsset', symbol: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string } } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, votes?: Array<{ __typename?: 'Vote', value: Types.VoteValue, datetime: string, party: { __typename?: 'Party', id: string, stake: { __typename?: 'PartyStake', currentStakeAvailable: string } } }> | null }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, votes?: Array<{ __typename?: 'Vote', value: Types.VoteValue, datetime: string, party: { __typename?: 'Party', id: string, stake: { __typename?: 'PartyStake', currentStakeAvailable: string } } }> | null } } }> | null };
+
+
+export const ProposalsQueryDocument = gql`
+    query ProposalsQuery {
+  proposals {
+    id
+    reference
+    state
+    datetime
+    rejectionReason
+    party {
+      id
+    }
+    terms {
+      closingDatetime
+      enactmentDatetime
+      change {
+        ... on NewMarket {
+          instrument {
+            name
+          }
+        }
+        ... on UpdateMarket {
+          marketId
+        }
+        ... on NewAsset {
+          __typename
+          symbol
+          source {
+            ... on BuiltinAsset {
+              maxFaucetAmountMint
+            }
+            ... on ERC20 {
+              contractAddress
+            }
+          }
+        }
+        ... on UpdateNetworkParameter {
+          networkParameter {
+            key
+            value
+          }
+        }
+      }
+    }
+    votes {
+      yes {
+        totalTokens
+        totalNumber
+        votes {
+          value
+          party {
+            id
+            stake {
+              currentStakeAvailable
+            }
+          }
+          datetime
+        }
+      }
+      no {
+        totalTokens
+        totalNumber
+        votes {
+          value
+          party {
+            id
+            stake {
+              currentStakeAvailable
+            }
+          }
+          datetime
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useProposalsQueryQuery__
+ *
+ * To run a query within a React component, call `useProposalsQueryQuery` and pass it any options that fit your needs.
+ * When your component renders, `useProposalsQueryQuery` 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 } = useProposalsQueryQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useProposalsQueryQuery(baseOptions?: Apollo.QueryHookOptions<ProposalsQueryQuery, ProposalsQueryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ProposalsQueryQuery, ProposalsQueryQueryVariables>(ProposalsQueryDocument, options);
+      }
+export function useProposalsQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProposalsQueryQuery, ProposalsQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ProposalsQueryQuery, ProposalsQueryQueryVariables>(ProposalsQueryDocument, options);
+        }
+export type ProposalsQueryQueryHookResult = ReturnType<typeof useProposalsQueryQuery>;
+export type ProposalsQueryLazyQueryHookResult = ReturnType<typeof useProposalsQueryLazyQuery>;
+export type ProposalsQueryQueryResult = Apollo.QueryResult<ProposalsQueryQuery, ProposalsQueryQueryVariables>;

apps/explorer/src/app/routes/markets/Markets.graphql

@@ -0,0 +1,134 @@
+query MarketsQuery {
+  markets {
+    id
+    name
+    fees {
+      factors {
+        makerFee
+        infrastructureFee
+        liquidityFee
+      }
+    }
+    tradableInstrument {
+      instrument {
+        name
+        metadata {
+          tags
+        }
+        id
+        code
+        product {
+          ... on Future {
+            settlementAsset {
+              id
+              name
+              decimals
+              globalRewardPoolAccount {
+                balance
+              }
+            }
+          }
+        }
+      }
+      riskModel {
+        ... on LogNormalRiskModel {
+          tau
+          riskAversionParameter
+          params {
+            r
+            sigma
+            mu
+          }
+        }
+        ... on SimpleRiskModel {
+          params {
+            factorLong
+            factorShort
+          }
+        }
+      }
+      marginCalculator {
+        scalingFactors {
+          searchLevel
+          initialMargin
+          collateralRelease
+        }
+      }
+    }
+    decimalPlaces
+    openingAuction {
+      durationSecs
+      volume
+    }
+    priceMonitoringSettings {
+      parameters {
+        triggers {
+          horizonSecs
+          probability
+          auctionExtensionSecs
+        }
+      }
+    }
+    liquidityMonitoringParameters {
+      triggeringRatio
+      targetStakeParameters {
+        timeWindow
+        scalingFactor
+      }
+    }
+    tradingMode
+    state
+    proposal {
+      id
+    }
+    state
+    accounts {
+      asset {
+        id
+        name
+      }
+      balance
+      type
+    }
+    data {
+      markPrice
+      bestBidPrice
+      bestBidVolume
+      bestOfferPrice
+      bestOfferVolume
+      bestStaticBidPrice
+      bestStaticBidVolume
+      bestStaticOfferPrice
+      bestStaticOfferVolume
+      midPrice
+      staticMidPrice
+      timestamp
+      openInterest
+      auctionEnd
+      auctionStart
+      indicativePrice
+      indicativeVolume
+      trigger
+      extensionTrigger
+      targetStake
+      suppliedStake
+      priceMonitoringBounds {
+        minValidPrice
+        maxValidPrice
+        trigger {
+          auctionExtensionSecs
+          probability
+        }
+        referencePrice
+      }
+      marketValueProxy
+      liquidityProviderFeeShare {
+        party {
+          id
+        }
+        equityLikeShare
+        averageEntryValuation
+      }
+    }
+  }
+}

apps/explorer/src/app/routes/markets/__generated___/Markets.ts

@@ -0,0 +1,174 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type MarketsQueryQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type MarketsQueryQuery = { __typename?: 'Query', markets?: Array<{ __typename?: 'Market', id: string, name: string, decimalPlaces: number, tradingMode: Types.MarketTradingMode, state: Types.MarketState, fees: { __typename?: 'Fees', factors: { __typename?: 'FeeFactors', makerFee: string, infrastructureFee: string, liquidityFee: string } }, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, id: string, code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename?: 'Future', settlementAsset: { __typename?: 'Asset', id: string, name: string, decimals: number, globalRewardPoolAccount?: { __typename?: 'Account', balance: string } | null } } }, riskModel: { __typename?: 'LogNormalRiskModel', tau: number, riskAversionParameter: number, params: { __typename?: 'LogNormalModelParams', r: number, sigma: number, mu: number } } | { __typename?: 'SimpleRiskModel', params: { __typename?: 'SimpleRiskModelParams', factorLong: number, factorShort: number } }, marginCalculator?: { __typename?: 'MarginCalculator', scalingFactors: { __typename?: 'ScalingFactors', searchLevel: number, initialMargin: number, collateralRelease: number } } | null }, openingAuction: { __typename?: 'AuctionDuration', durationSecs: number, volume: number }, priceMonitoringSettings: { __typename?: 'PriceMonitoringSettings', parameters?: { __typename?: 'PriceMonitoringParameters', triggers?: Array<{ __typename?: 'PriceMonitoringTrigger', horizonSecs: number, probability: number, auctionExtensionSecs: number }> | null } | null }, liquidityMonitoringParameters: { __typename?: 'LiquidityMonitoringParameters', triggeringRatio: number, targetStakeParameters: { __typename?: 'TargetStakeParameters', timeWindow: number, scalingFactor: number } }, proposal?: { __typename?: 'Proposal', id?: string | null } | null, accounts?: Array<{ __typename?: 'Account', balance: string, type: Types.AccountType, asset: { __typename?: 'Asset', id: string, name: string } }> | null, data?: { __typename?: 'MarketData', markPrice: string, bestBidPrice: string, bestBidVolume: string, bestOfferPrice: string, bestOfferVolume: string, bestStaticBidPrice: string, bestStaticBidVolume: string, bestStaticOfferPrice: string, bestStaticOfferVolume: string, midPrice: string, staticMidPrice: string, timestamp: string, openInterest: string, auctionEnd?: string | null, auctionStart?: string | null, indicativePrice: string, indicativeVolume: string, trigger: Types.AuctionTrigger, extensionTrigger: Types.AuctionTrigger, targetStake?: string | null, suppliedStake?: string | null, marketValueProxy: string, priceMonitoringBounds?: Array<{ __typename?: 'PriceMonitoringBounds', minValidPrice: string, maxValidPrice: string, referencePrice: string, trigger: { __typename?: 'PriceMonitoringTrigger', auctionExtensionSecs: number, probability: number } }> | null, liquidityProviderFeeShare?: Array<{ __typename?: 'LiquidityProviderFeeShare', equityLikeShare: string, averageEntryValuation: string, party: { __typename?: 'Party', id: string } }> | null } | null }> | null };
+
+
+export const MarketsQueryDocument = gql`
+    query MarketsQuery {
+  markets {
+    id
+    name
+    fees {
+      factors {
+        makerFee
+        infrastructureFee
+        liquidityFee
+      }
+    }
+    tradableInstrument {
+      instrument {
+        name
+        metadata {
+          tags
+        }
+        id
+        code
+        product {
+          ... on Future {
+            settlementAsset {
+              id
+              name
+              decimals
+              globalRewardPoolAccount {
+                balance
+              }
+            }
+          }
+        }
+      }
+      riskModel {
+        ... on LogNormalRiskModel {
+          tau
+          riskAversionParameter
+          params {
+            r
+            sigma
+            mu
+          }
+        }
+        ... on SimpleRiskModel {
+          params {
+            factorLong
+            factorShort
+          }
+        }
+      }
+      marginCalculator {
+        scalingFactors {
+          searchLevel
+          initialMargin
+          collateralRelease
+        }
+      }
+    }
+    decimalPlaces
+    openingAuction {
+      durationSecs
+      volume
+    }
+    priceMonitoringSettings {
+      parameters {
+        triggers {
+          horizonSecs
+          probability
+          auctionExtensionSecs
+        }
+      }
+    }
+    liquidityMonitoringParameters {
+      triggeringRatio
+      targetStakeParameters {
+        timeWindow
+        scalingFactor
+      }
+    }
+    tradingMode
+    state
+    proposal {
+      id
+    }
+    state
+    accounts {
+      asset {
+        id
+        name
+      }
+      balance
+      type
+    }
+    data {
+      markPrice
+      bestBidPrice
+      bestBidVolume
+      bestOfferPrice
+      bestOfferVolume
+      bestStaticBidPrice
+      bestStaticBidVolume
+      bestStaticOfferPrice
+      bestStaticOfferVolume
+      midPrice
+      staticMidPrice
+      timestamp
+      openInterest
+      auctionEnd
+      auctionStart
+      indicativePrice
+      indicativeVolume
+      trigger
+      extensionTrigger
+      targetStake
+      suppliedStake
+      priceMonitoringBounds {
+        minValidPrice
+        maxValidPrice
+        trigger {
+          auctionExtensionSecs
+          probability
+        }
+        referencePrice
+      }
+      marketValueProxy
+      liquidityProviderFeeShare {
+        party {
+          id
+        }
+        equityLikeShare
+        averageEntryValuation
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useMarketsQueryQuery__
+ *
+ * To run a query within a React component, call `useMarketsQueryQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMarketsQueryQuery` 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 } = useMarketsQueryQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useMarketsQueryQuery(baseOptions?: Apollo.QueryHookOptions<MarketsQueryQuery, MarketsQueryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarketsQueryQuery, MarketsQueryQueryVariables>(MarketsQueryDocument, options);
+      }
+export function useMarketsQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketsQueryQuery, MarketsQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarketsQueryQuery, MarketsQueryQueryVariables>(MarketsQueryDocument, options);
+        }
+export type MarketsQueryQueryHookResult = ReturnType<typeof useMarketsQueryQuery>;
+export type MarketsQueryLazyQueryHookResult = ReturnType<typeof useMarketsQueryLazyQuery>;
+export type MarketsQueryQueryResult = Apollo.QueryResult<MarketsQueryQuery, MarketsQueryQueryVariables>;

apps/explorer/src/app/routes/network-parameters/NetworkParameters.graphql

@@ -0,0 +1,6 @@
+query NetworkParametersQuery {
+  networkParameters {
+    key
+    value
+  }
+}

apps/explorer/src/app/routes/network-parameters/__generated___/NetworkParameters.ts

@@ -0,0 +1,46 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type NetworkParametersQueryQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type NetworkParametersQueryQuery = { __typename?: 'Query', networkParameters?: Array<{ __typename?: 'NetworkParameter', key: string, value: string }> | null };
+
+
+export const NetworkParametersQueryDocument = gql`
+    query NetworkParametersQuery {
+  networkParameters {
+    key
+    value
+  }
+}
+    `;
+
+/**
+ * __useNetworkParametersQueryQuery__
+ *
+ * To run a query within a React component, call `useNetworkParametersQueryQuery` and pass it any options that fit your needs.
+ * When your component renders, `useNetworkParametersQueryQuery` 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 } = useNetworkParametersQueryQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useNetworkParametersQueryQuery(baseOptions?: Apollo.QueryHookOptions<NetworkParametersQueryQuery, NetworkParametersQueryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<NetworkParametersQueryQuery, NetworkParametersQueryQueryVariables>(NetworkParametersQueryDocument, options);
+      }
+export function useNetworkParametersQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NetworkParametersQueryQuery, NetworkParametersQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<NetworkParametersQueryQuery, NetworkParametersQueryQueryVariables>(NetworkParametersQueryDocument, options);
+        }
+export type NetworkParametersQueryQueryHookResult = ReturnType<typeof useNetworkParametersQueryQuery>;
+export type NetworkParametersQueryLazyQueryHookResult = ReturnType<typeof useNetworkParametersQueryLazyQuery>;
+export type NetworkParametersQueryQueryResult = Apollo.QueryResult<NetworkParametersQueryQuery, NetworkParametersQueryQueryVariables>;

apps/explorer/src/app/routes/oracles/OracleSpecs.graphql

@@ -0,0 +1,22 @@
+query OracleSpecs {
+  oracleSpecs {
+    status
+    id
+    createdAt
+    updatedAt
+    pubKeys
+    filters {
+      key {
+        name
+        type
+      }
+      conditions {
+        value
+        operator
+      }
+    }
+    data {
+      pubKeys
+    }
+  }
+}

apps/explorer/src/app/routes/oracles/__generated___/OracleSpecs.ts

@@ -0,0 +1,62 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type OracleSpecsQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type OracleSpecsQuery = { __typename?: 'Query', oracleSpecs?: Array<{ __typename?: 'OracleSpec', status: Types.OracleSpecStatus, id: string, createdAt: string, updatedAt?: string | null, pubKeys?: Array<string> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null, data: Array<{ __typename?: 'OracleData', pubKeys?: Array<string> | null }> }> | null };
+
+
+export const OracleSpecsDocument = gql`
+    query OracleSpecs {
+  oracleSpecs {
+    status
+    id
+    createdAt
+    updatedAt
+    pubKeys
+    filters {
+      key {
+        name
+        type
+      }
+      conditions {
+        value
+        operator
+      }
+    }
+    data {
+      pubKeys
+    }
+  }
+}
+    `;
+
+/**
+ * __useOracleSpecsQuery__
+ *
+ * To run a query within a React component, call `useOracleSpecsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useOracleSpecsQuery` 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 } = useOracleSpecsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useOracleSpecsQuery(baseOptions?: Apollo.QueryHookOptions<OracleSpecsQuery, OracleSpecsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<OracleSpecsQuery, OracleSpecsQueryVariables>(OracleSpecsDocument, options);
+      }
+export function useOracleSpecsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<OracleSpecsQuery, OracleSpecsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<OracleSpecsQuery, OracleSpecsQueryVariables>(OracleSpecsDocument, options);
+        }
+export type OracleSpecsQueryHookResult = ReturnType<typeof useOracleSpecsQuery>;
+export type OracleSpecsLazyQueryHookResult = ReturnType<typeof useOracleSpecsLazyQuery>;
+export type OracleSpecsQueryResult = Apollo.QueryResult<OracleSpecsQuery, OracleSpecsQueryVariables>;

apps/explorer/src/app/routes/parties/PartyAssets.graphql

@@ -0,0 +1,32 @@
+query PartyAssetsQuery($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    delegations {
+      amount
+      node {
+        id
+        name
+      }
+      epoch
+    }
+    stake {
+      currentStakeAvailable
+    }
+    accounts {
+      asset {
+        name
+        id
+        decimals
+        symbol
+        source {
+          __typename
+          ... on ERC20 {
+            contractAddress
+          }
+        }
+      }
+      type
+      balance
+    }
+  }
+}

apps/explorer/src/app/routes/parties/__generated___/PartyAssets.ts

@@ -0,0 +1,75 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type PartyAssetsQueryQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type PartyAssetsQueryQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, delegations?: Array<{ __typename?: 'Delegation', amount: string, epoch: number, node: { __typename?: 'Node', id: string, name: string } }> | null, stake: { __typename?: 'PartyStake', currentStakeAvailable: string }, accounts?: Array<{ __typename?: 'Account', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', name: string, id: string, decimals: number, symbol: string, source: { __typename: 'BuiltinAsset' } | { __typename: 'ERC20', contractAddress: string } } }> | null } | null };
+
+
+export const PartyAssetsQueryDocument = gql`
+    query PartyAssetsQuery($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    delegations {
+      amount
+      node {
+        id
+        name
+      }
+      epoch
+    }
+    stake {
+      currentStakeAvailable
+    }
+    accounts {
+      asset {
+        name
+        id
+        decimals
+        symbol
+        source {
+          __typename
+          ... on ERC20 {
+            contractAddress
+          }
+        }
+      }
+      type
+      balance
+    }
+  }
+}
+    `;
+
+/**
+ * __usePartyAssetsQueryQuery__
+ *
+ * To run a query within a React component, call `usePartyAssetsQueryQuery` and pass it any options that fit your needs.
+ * When your component renders, `usePartyAssetsQueryQuery` 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 } = usePartyAssetsQueryQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function usePartyAssetsQueryQuery(baseOptions: Apollo.QueryHookOptions<PartyAssetsQueryQuery, PartyAssetsQueryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<PartyAssetsQueryQuery, PartyAssetsQueryQueryVariables>(PartyAssetsQueryDocument, options);
+      }
+export function usePartyAssetsQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PartyAssetsQueryQuery, PartyAssetsQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<PartyAssetsQueryQuery, PartyAssetsQueryQueryVariables>(PartyAssetsQueryDocument, options);
+        }
+export type PartyAssetsQueryQueryHookResult = ReturnType<typeof usePartyAssetsQueryQuery>;
+export type PartyAssetsQueryLazyQueryHookResult = ReturnType<typeof usePartyAssetsQueryLazyQuery>;
+export type PartyAssetsQueryQueryResult = Apollo.QueryResult<PartyAssetsQueryQuery, PartyAssetsQueryQueryVariables>;

apps/explorer/src/app/routes/validators/Nodes.graphql

@@ -0,0 +1,23 @@
+query NodesQuery {
+  nodes {
+    id
+    name
+    infoUrl
+    avatarUrl
+    pubkey
+    tmPubkey
+    ethereumAddress
+    location
+    stakedByOperator
+    stakedByDelegates
+    stakedTotal
+    pendingStake
+    epochData {
+      total
+      offline
+      online
+    }
+    status
+    name
+  }
+}

apps/explorer/src/app/routes/validators/__generated___/Nodes.ts

@@ -0,0 +1,63 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type NodesQueryQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type NodesQueryQuery = { __typename?: 'Query', nodes?: Array<{ __typename?: 'Node', id: string, name: string, infoUrl: string, avatarUrl?: string | null, pubkey: string, tmPubkey: string, ethereumAddress: string, location: string, stakedByOperator: string, stakedByDelegates: string, stakedTotal: string, pendingStake: string, status: Types.NodeStatus, epochData?: { __typename?: 'EpochData', total: number, offline: number, online: number } | null }> | null };
+
+
+export const NodesQueryDocument = gql`
+    query NodesQuery {
+  nodes {
+    id
+    name
+    infoUrl
+    avatarUrl
+    pubkey
+    tmPubkey
+    ethereumAddress
+    location
+    stakedByOperator
+    stakedByDelegates
+    stakedTotal
+    pendingStake
+    epochData {
+      total
+      offline
+      online
+    }
+    status
+    name
+  }
+}
+    `;
+
+/**
+ * __useNodesQueryQuery__
+ *
+ * To run a query within a React component, call `useNodesQueryQuery` and pass it any options that fit your needs.
+ * When your component renders, `useNodesQueryQuery` 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 } = useNodesQueryQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useNodesQueryQuery(baseOptions?: Apollo.QueryHookOptions<NodesQueryQuery, NodesQueryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<NodesQueryQuery, NodesQueryQueryVariables>(NodesQueryDocument, options);
+      }
+export function useNodesQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NodesQueryQuery, NodesQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<NodesQueryQuery, NodesQueryQueryVariables>(NodesQueryDocument, options);
+        }
+export type NodesQueryQueryHookResult = ReturnType<typeof useNodesQueryQuery>;
+export type NodesQueryLazyQueryHookResult = ReturnType<typeof useNodesQueryLazyQuery>;
+export type NodesQueryQueryResult = Apollo.QueryResult<NodesQueryQuery, NodesQueryQueryVariables>;

apps/static/src/assets/testnet-tranches.json

@@ -89,7 +89,7 @@
     "tranche_end": "2022-10-12T00:53:20.000Z",
     "total_added": "1010.000000000000000001",
     "total_removed": "668.4622323651",
-    "locked_amount": "101.09377473363779510010009284627092851",
+    "locked_amount": "98.32505010147130990009735153475393199",
     "deposits": [
       {
         "amount": "1000",

apps/token-e2e/src/integration/view/home.cy.js

@@ -3,7 +3,7 @@ const navHome = '[href="/"]';
 const navVesting = '[href="/vesting"]';
 const navStaking = '[href="/staking"]';
 const navRewards = '[href="/rewards"]';
-const navWithdraw = '[href="/withdraw"]';
+const navWithdraw = '[href="/withdrawals"]';
 const navGovernance = '[href="/governance"]';
 
 const tokenDetailsTable = '.token-details';

apps/token-e2e/src/integration/view/withdraw.cy.js

@@ -1,18 +1,17 @@
 const connectToVegaBtn = '[data-testid="connect-to-vega-wallet-btn"]';
-const warning = '[data-testid="callout"]';
 
 context('Withdraw Page - verify elements on page', function () {
-  before('navigate to withdraw page', function () {
-    cy.visit('/').navigate_to('withdraw');
+  before('navigate to withdrawals page', function () {
+    cy.visit('/').navigate_to('withdrawals');
   });
 
   describe('with wallets disconnected', function () {
     it('should have withdraw tab highlighted', function () {
-      cy.verify_tab_highlighted('withdraw');
+      cy.verify_tab_highlighted('withdrawals');
     });
 
     it('should have WITHDRAW header visible', function () {
-      cy.verify_page_header('Withdraw');
+      cy.verify_page_header('Withdrawals');
     });
 
     it('should have connect Vega wallet button', function () {
@@ -20,9 +19,5 @@ context('Withdraw Page - verify elements on page', function () {
         .should('be.visible')
         .and('have.text', 'Connect Vega wallet');
     });
-
-    it('should have withdraw information box', function () {
-      cy.get(warning).should('be.visible');
-    });
   });
 });

apps/token-e2e/src/support/common.functions.js

@@ -12,7 +12,7 @@ const navigation = {
   vesting: '[href="/vesting"]',
   staking: '[href="/staking"]',
   rewards: '[href="/rewards"]',
-  withdraw: '[href="/withdraw"]',
+  withdrawals: '[href="/withdrawals"]',
   governance: '[href="/governance"]',
   pageSpinner: '[data-testid="splash-loader"]',
 };

apps/token/.env

@@ -1,10 +1,10 @@
 # App configuration variables
 NX_VEGA_ENV=TESTNET
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/testnet-network.json
-NX_VEGA_URL=https://api.n11.testnet.vega.xyz/graphql
+NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
 NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://ropsten.etherscan.io
-NX_VEGA_REST=https://api.n11.testnet.vega.xyz
+NX_VEGA_REST=https://api.n07.testnet.vega.xyz
 NX_FAIRGROUND=false
 NX_VEGA_NETWORKS='{"DEVNET":"https://dev.token.vega.xyz","STAGNET3":"https://stagnet3.token.vega.xyz","TESTNET":"https://token.fairground.wtf","MAINNET":"https://token.vega.xyz"}'
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions

apps/token/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*", "__generated__"],
+  "ignorePatterns": ["!**/*", "__generated__", "__generated___"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/token/client.graphql

@@ -0,0 +1,43 @@
+extend type Delegation {
+  "The amount field formatted by the client"
+  amountFormatted: String!
+}
+
+extend type PartyStake {
+  "The currently available stake formatted by the client"
+  currentStakeAvailableFormatted: String!
+}
+
+extend type NodeData {
+  "The total staked field formatted by the client"
+  stakedTotalFormatted: String!
+}
+
+extend type Node {
+  "The total staked field formatted by the client"
+  stakedTotalFormatted: String!
+
+  "The pending staked field formatted by the client"
+  pendingStakeFormatted: String!
+
+  "The stakes by operator field formatted by the client"
+  stakedByOperatorFormatted: String!
+
+  "The stakes by delegates field formatted by the client"
+  stakedByDelegatesFormatted: String!
+}
+
+extend type Reward {
+  "The amount field formatted by the client"
+  amountFormatted: String!
+}
+
+extend type RewardPerAssetDetail {
+  "The total amount field formatted by the client"
+  totalAmountFormatted: String!
+}
+
+extend type Account {
+  "The balance field formatted by the client"
+  balanceFormatted: String!
+}

apps/token/src/components/nav/nav.tsx

@@ -224,7 +224,7 @@ const NavLinks = ({
     { route: Routes.VESTING, text: t('Vesting') },
     { route: Routes.STAKING, text: t('Staking') },
     { route: Routes.REWARDS, text: t('Rewards') },
-    { route: Routes.WITHDRAW, text: t('Withdraw') },
+    { route: Routes.WITHDRAWALS, text: t('Withdraw') },
     { route: Routes.GOVERNANCE, text: t('Governance') },
   ];
   const navClasses = classNames('flex', {

apps/token/src/components/token-input/token-input.tsx

@@ -37,7 +37,7 @@ export const AmountInput = ({
 }) => {
   const { t } = useTranslation();
   return (
-    <div className="flex">
+    <div className="flex gap-4">
       <div className="flex-1">
         <Input
           data-testid="token-amount-input"
@@ -61,14 +61,12 @@ export const AmountInput = ({
         />
       </div>
       {maximum && (
-        <div className="flex flex-col justify-center p-8 h-28 my-0 mx-8">
-          <ButtonLink
-            onClick={() => setAmount(maximum.toString())}
-            data-testid="token-amount-use-maximum"
-          >
-            {t('Use maximum')}
-          </ButtonLink>
-        </div>
+        <ButtonLink
+          onClick={() => setAmount(maximum.toString())}
+          data-testid="token-amount-use-maximum"
+        >
+          {t('Use maximum')}
+        </ButtonLink>
       )}
     </div>
   );
@@ -169,7 +167,7 @@ export const TokenInput = ({
   } else if (requireApproval) {
     approveContent = (
       <Callout iconName="tick" intent={Intent.Success}>
-        <p>{`${currency} are approved for staking`}</p>
+        <p className="mb-0">{`${currency} are approved for staking`}</p>
       </Callout>
     );
   }
@@ -188,7 +186,7 @@ export const TokenInput = ({
           currency={currency}
         />
       </FormGroup>
-      {approveContent ? <div className="mb-24">{approveContent}</div> : null}
+      {approveContent ? <div className="mb-4">{approveContent}</div> : null}
       <Button
         data-testid="token-input-submit-button"
         fill={true}

apps/token/src/components/vega-wallet/Delegations.graphql

@@ -0,0 +1,37 @@
+query Delegations($partyId: ID!) {
+  epoch {
+    id
+  }
+  party(id: $partyId) {
+    id
+    delegations {
+      amountFormatted @client
+      amount
+      node {
+        id
+        name
+      }
+      epoch
+    }
+    stake {
+      currentStakeAvailable
+      currentStakeAvailableFormatted @client
+    }
+    accounts {
+      asset {
+        name
+        id
+        decimals
+        symbol
+        source {
+          __typename
+          ... on ERC20 {
+            contractAddress
+          }
+        }
+      }
+      type
+      balance
+    }
+  }
+}

apps/token/src/components/vega-wallet/__generated__/Delegations.ts

@@ -28,6 +28,9 @@ export interface Delegations_party_delegations_node {
 
 export interface Delegations_party_delegations {
   __typename: "Delegation";
+  /**
+   * The amount field formatted by the client
+   */
   amountFormatted: string;
   /**
    * Amount delegated
@@ -49,6 +52,9 @@ export interface Delegations_party_stake {
    * The stake currently available for the party
    */
   currentStakeAvailable: string;
+  /**
+   * The currently available stake formatted by the client
+   */
   currentStakeAvailableFormatted: string;
 }
 

apps/token/src/components/vega-wallet/__generated__/PartyDelegations.ts

@@ -1,52 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-// ====================================================
-// GraphQL query operation: PartyDelegations
-// ====================================================
-
-export interface PartyDelegations_epoch {
-  __typename: "Epoch";
-  /**
-   * Presumably this is an integer or something. If there's no such thing, disregard
-   */
-  id: string;
-}
-
-export interface PartyDelegations_party_delegations {
-  __typename: "Delegation";
-  /**
-   * Amount delegated
-   */
-  amount: string;
-  /**
-   * URL of node you are delegating to
-   */
-  node: string;
-  /**
-   * Epoch of delegation
-   */
-  epoch: number;
-}
-
-export interface PartyDelegations_party {
-  __typename: "Party";
-  delegations: PartyDelegations_party_delegations[] | null;
-}
-
-export interface PartyDelegations {
-  /**
-   * get data for a specific epoch, if id omitted it gets the current epoch
-   */
-  epoch: PartyDelegations_epoch;
-  /**
-   * An entity that is trading on the VEGA network
-   */
-  party: PartyDelegations_party | null;
-}
-
-export interface PartyDelegationsVariables {
-  partyId: string;
-}

apps/token/src/components/vega-wallet/__generated___/Delegations.ts

@@ -0,0 +1,80 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type DelegationsQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type DelegationsQuery = { __typename?: 'Query', epoch: { __typename?: 'Epoch', id: string }, party?: { __typename?: 'Party', id: string, delegations?: Array<{ __typename?: 'Delegation', amountFormatted: string, amount: string, epoch: number, node: { __typename?: 'Node', id: string, name: string } }> | null, stake: { __typename?: 'PartyStake', currentStakeAvailable: string, currentStakeAvailableFormatted: string }, accounts?: Array<{ __typename?: 'Account', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', name: string, id: string, decimals: number, symbol: string, source: { __typename: 'BuiltinAsset' } | { __typename: 'ERC20', contractAddress: string } } }> | null } | null };
+
+
+export const DelegationsDocument = gql`
+    query Delegations($partyId: ID!) {
+  epoch {
+    id
+  }
+  party(id: $partyId) {
+    id
+    delegations {
+      amountFormatted @client
+      amount
+      node {
+        id
+        name
+      }
+      epoch
+    }
+    stake {
+      currentStakeAvailable
+      currentStakeAvailableFormatted @client
+    }
+    accounts {
+      asset {
+        name
+        id
+        decimals
+        symbol
+        source {
+          __typename
+          ... on ERC20 {
+            contractAddress
+          }
+        }
+      }
+      type
+      balance
+    }
+  }
+}
+    `;
+
+/**
+ * __useDelegationsQuery__
+ *
+ * To run a query within a React component, call `useDelegationsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useDelegationsQuery` 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 } = useDelegationsQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function useDelegationsQuery(baseOptions: Apollo.QueryHookOptions<DelegationsQuery, DelegationsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<DelegationsQuery, DelegationsQueryVariables>(DelegationsDocument, options);
+      }
+export function useDelegationsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<DelegationsQuery, DelegationsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<DelegationsQuery, DelegationsQueryVariables>(DelegationsDocument, options);
+        }
+export type DelegationsQueryHookResult = ReturnType<typeof useDelegationsQuery>;
+export type DelegationsLazyQueryHookResult = ReturnType<typeof useDelegationsLazyQuery>;
+export type DelegationsQueryResult = Apollo.QueryResult<DelegationsQuery, DelegationsQueryVariables>;

apps/token/src/hooks/NetworkParams.graphql

@@ -0,0 +1,6 @@
+query NetworkParams {
+  networkParameters {
+    key
+    value
+  }
+}

apps/token/src/hooks/__generated__/Erc20ApprovalPoll.ts

@@ -1,48 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-// ====================================================
-// GraphQL query operation: Erc20ApprovalPoll
-// ====================================================
-
-export interface Erc20ApprovalPoll_erc20WithdrawalApproval {
-  __typename: "Erc20WithdrawalApproval";
-  /**
-   * The source asset in the ethereum network
-   */
-  assetSource: string;
-  /**
-   * The amount to be withdrawn
-   */
-  amount: string;
-  /**
-   * The nonce to be used in the request
-   */
-  nonce: string;
-  /**
-   * Signature aggregate from the nodes, in the following format:
-   * 0x + sig1 + sig2 + ... + sigN
-   */
-  signatures: string;
-  /**
-   * The target address which will receive the funds
-   */
-  targetAddress: string;
-  /**
-   * Timestamp in seconds for expiry of the approval
-   */
-  expiry: string;
-}
-
-export interface Erc20ApprovalPoll {
-  /**
-   * find an erc20 withdrawal approval using its withdrawal id
-   */
-  erc20WithdrawalApproval: Erc20ApprovalPoll_erc20WithdrawalApproval | null;
-}
-
-export interface Erc20ApprovalPollVariables {
-  withdrawalId: string;
-}

apps/token/src/hooks/__generated__/WithdrawalPoll.ts

@@ -1,93 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-import { WithdrawalStatus } from "@vegaprotocol/types";
-
-// ====================================================
-// GraphQL query operation: WithdrawalPoll
-// ====================================================
-
-export interface WithdrawalPoll_party_withdrawals_asset {
-  __typename: "Asset";
-  /**
-   * The id of the asset
-   */
-  id: string;
-  /**
-   * The symbol of the asset (e.g: GBP)
-   */
-  symbol: string;
-  /**
-   * The precision of the asset
-   */
-  decimals: number;
-}
-
-export interface WithdrawalPoll_party_withdrawals_details {
-  __typename: "Erc20WithdrawalDetails";
-  /**
-   * The ethereum address of the receiver of the asset funds
-   */
-  receiverAddress: string;
-}
-
-export interface WithdrawalPoll_party_withdrawals {
-  __typename: "Withdrawal";
-  /**
-   * The Vega internal id of the withdrawal
-   */
-  id: string;
-  /**
-   * The amount to be withdrawn
-   */
-  amount: string;
-  /**
-   * The current status of the withdrawal
-   */
-  status: WithdrawalStatus;
-  /**
-   * The asset to be withdrawn
-   */
-  asset: WithdrawalPoll_party_withdrawals_asset;
-  /**
-   * RFC3339Nano time at which the withdrawal was created
-   */
-  createdTimestamp: string;
-  /**
-   * RFC3339Nano time at which the withdrawal was finalized
-   */
-  withdrawnTimestamp: string | null;
-  /**
-   * Hash of the transaction on the foreign chain
-   */
-  txHash: string | null;
-  /**
-   * Foreign chain specific details about the withdrawal
-   */
-  details: WithdrawalPoll_party_withdrawals_details | null;
-}
-
-export interface WithdrawalPoll_party {
-  __typename: "Party";
-  /**
-   * Party identifier
-   */
-  id: string;
-  /**
-   * The list of all withdrawals initiated by the party
-   */
-  withdrawals: WithdrawalPoll_party_withdrawals[] | null;
-}
-
-export interface WithdrawalPoll {
-  /**
-   * An entity that is trading on the VEGA network
-   */
-  party: WithdrawalPoll_party | null;
-}
-
-export interface WithdrawalPollVariables {
-  partyId: string;
-}

apps/token/src/hooks/__generated___/NetworkParams.ts

@@ -0,0 +1,46 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type NetworkParamsQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type NetworkParamsQuery = { __typename?: 'Query', networkParameters?: Array<{ __typename?: 'NetworkParameter', key: string, value: string }> | null };
+
+
+export const NetworkParamsDocument = gql`
+    query NetworkParams {
+  networkParameters {
+    key
+    value
+  }
+}
+    `;
+
+/**
+ * __useNetworkParamsQuery__
+ *
+ * To run a query within a React component, call `useNetworkParamsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useNetworkParamsQuery` 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 } = useNetworkParamsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useNetworkParamsQuery(baseOptions?: Apollo.QueryHookOptions<NetworkParamsQuery, NetworkParamsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<NetworkParamsQuery, NetworkParamsQueryVariables>(NetworkParamsDocument, options);
+      }
+export function useNetworkParamsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NetworkParamsQuery, NetworkParamsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<NetworkParamsQuery, NetworkParamsQueryVariables>(NetworkParamsDocument, options);
+        }
+export type NetworkParamsQueryHookResult = ReturnType<typeof useNetworkParamsQuery>;
+export type NetworkParamsLazyQueryHookResult = ReturnType<typeof useNetworkParamsLazyQuery>;
+export type NetworkParamsQueryResult = Apollo.QueryResult<NetworkParamsQuery, NetworkParamsQueryVariables>;

apps/token/src/i18n/translations/dev.json

@@ -452,7 +452,7 @@
   "withdrawFormAmountLabel": "How much would you like to withdraw?",
   "withdrawFormSubmitButtonIdle": "Withdraw {{amount}} {{symbol}} tokens",
   "withdrawFormSubmitButtonPending": "Preparing",
-  "withdrawalsTitle": "Incomplete withdrawals",
+  "withdrawalsTitle": "Withdrawals",
   "withdrawalsText": "These withdrawals need to be completed with an Ethereum transaction.",
   "withdrawalsNone": "You don't have any pending withdrawals.",
   "withdrawalsCompleteButton": "Finish withdrawal",

apps/token/src/routes/governance/Proposal.graphql

@@ -0,0 +1,96 @@
+fragment ProposalFields on Proposal {
+  id
+  reference
+  state
+  datetime
+  rejectionReason
+  errorDetails
+  party {
+    id
+  }
+  terms {
+    closingDatetime
+    enactmentDatetime
+    change {
+      ... on NewMarket {
+        decimalPlaces
+        metadata
+        instrument {
+          name
+          code
+          futureProduct {
+            settlementAsset {
+              symbol
+            }
+          }
+        }
+      }
+      ... on UpdateMarket {
+        marketId
+      }
+      ... on NewAsset {
+        __typename
+        name
+        symbol
+        source {
+          ... on BuiltinAsset {
+            __typename
+            maxFaucetAmountMint
+          }
+          ... on ERC20 {
+            __typename
+            contractAddress
+          }
+        }
+      }
+      ... on UpdateNetworkParameter {
+        networkParameter {
+          key
+          value
+        }
+      }
+    }
+  }
+  votes {
+    yes {
+      totalTokens
+      totalNumber
+      votes {
+        value
+        party {
+          id
+          stake {
+            currentStakeAvailable
+          }
+        }
+        datetime
+      }
+    }
+    no {
+      totalTokens
+      totalNumber
+      votes {
+        value
+        party {
+          id
+          stake {
+            currentStakeAvailable
+          }
+        }
+        datetime
+      }
+    }
+  }
+}
+
+query Proposal($proposalId: ID!) {
+  proposal(id: $proposalId) {
+    ...ProposalFields
+  }
+}
+
+query Proposals {
+  proposals {
+    ...ProposalFields
+  }
+}

apps/token/src/routes/governance/__generated___/Proposal.ts

@@ -0,0 +1,174 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ProposalFieldsFragment = { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: string, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: string, enactmentDatetime?: string | null, change: { __typename: 'NewAsset', name: string, symbol: string, source: { __typename: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename: 'ERC20', contractAddress: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', decimalPlaces: number, metadata?: Array<string> | null, instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null } } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, votes?: Array<{ __typename?: 'Vote', value: Types.VoteValue, datetime: string, party: { __typename?: 'Party', id: string, stake: { __typename?: 'PartyStake', currentStakeAvailable: string } } }> | null }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, votes?: Array<{ __typename?: 'Vote', value: Types.VoteValue, datetime: string, party: { __typename?: 'Party', id: string, stake: { __typename?: 'PartyStake', currentStakeAvailable: string } } }> | null } } };
+
+export type ProposalQueryVariables = Types.Exact<{
+  proposalId: Types.Scalars['ID'];
+}>;
+
+
+export type ProposalQuery = { __typename?: 'Query', proposal: { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: string, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: string, enactmentDatetime?: string | null, change: { __typename: 'NewAsset', name: string, symbol: string, source: { __typename: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename: 'ERC20', contractAddress: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', decimalPlaces: number, metadata?: Array<string> | null, instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null } } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, votes?: Array<{ __typename?: 'Vote', value: Types.VoteValue, datetime: string, party: { __typename?: 'Party', id: string, stake: { __typename?: 'PartyStake', currentStakeAvailable: string } } }> | null }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, votes?: Array<{ __typename?: 'Vote', value: Types.VoteValue, datetime: string, party: { __typename?: 'Party', id: string, stake: { __typename?: 'PartyStake', currentStakeAvailable: string } } }> | null } } } };
+
+export type ProposalsQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type ProposalsQuery = { __typename?: 'Query', proposals?: Array<{ __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: string, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: string, enactmentDatetime?: string | null, change: { __typename: 'NewAsset', name: string, symbol: string, source: { __typename: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename: 'ERC20', contractAddress: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', decimalPlaces: number, metadata?: Array<string> | null, instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null } } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, votes?: Array<{ __typename?: 'Vote', value: Types.VoteValue, datetime: string, party: { __typename?: 'Party', id: string, stake: { __typename?: 'PartyStake', currentStakeAvailable: string } } }> | null }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, votes?: Array<{ __typename?: 'Vote', value: Types.VoteValue, datetime: string, party: { __typename?: 'Party', id: string, stake: { __typename?: 'PartyStake', currentStakeAvailable: string } } }> | null } } }> | null };
+
+export const ProposalFieldsFragmentDoc = gql`
+    fragment ProposalFields on Proposal {
+  id
+  reference
+  state
+  datetime
+  rejectionReason
+  errorDetails
+  party {
+    id
+  }
+  terms {
+    closingDatetime
+    enactmentDatetime
+    change {
+      ... on NewMarket {
+        decimalPlaces
+        metadata
+        instrument {
+          name
+          code
+          futureProduct {
+            settlementAsset {
+              symbol
+            }
+          }
+        }
+      }
+      ... on UpdateMarket {
+        marketId
+      }
+      ... on NewAsset {
+        __typename
+        name
+        symbol
+        source {
+          ... on BuiltinAsset {
+            __typename
+            maxFaucetAmountMint
+          }
+          ... on ERC20 {
+            __typename
+            contractAddress
+          }
+        }
+      }
+      ... on UpdateNetworkParameter {
+        networkParameter {
+          key
+          value
+        }
+      }
+    }
+  }
+  votes {
+    yes {
+      totalTokens
+      totalNumber
+      votes {
+        value
+        party {
+          id
+          stake {
+            currentStakeAvailable
+          }
+        }
+        datetime
+      }
+    }
+    no {
+      totalTokens
+      totalNumber
+      votes {
+        value
+        party {
+          id
+          stake {
+            currentStakeAvailable
+          }
+        }
+        datetime
+      }
+    }
+  }
+}
+    `;
+export const ProposalDocument = gql`
+    query Proposal($proposalId: ID!) {
+  proposal(id: $proposalId) {
+    ...ProposalFields
+  }
+}
+    ${ProposalFieldsFragmentDoc}`;
+
+/**
+ * __useProposalQuery__
+ *
+ * To run a query within a React component, call `useProposalQuery` and pass it any options that fit your needs.
+ * When your component renders, `useProposalQuery` 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 } = useProposalQuery({
+ *   variables: {
+ *      proposalId: // value for 'proposalId'
+ *   },
+ * });
+ */
+export function useProposalQuery(baseOptions: Apollo.QueryHookOptions<ProposalQuery, ProposalQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ProposalQuery, ProposalQueryVariables>(ProposalDocument, options);
+      }
+export function useProposalLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProposalQuery, ProposalQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ProposalQuery, ProposalQueryVariables>(ProposalDocument, options);
+        }
+export type ProposalQueryHookResult = ReturnType<typeof useProposalQuery>;
+export type ProposalLazyQueryHookResult = ReturnType<typeof useProposalLazyQuery>;
+export type ProposalQueryResult = Apollo.QueryResult<ProposalQuery, ProposalQueryVariables>;
+export const ProposalsDocument = gql`
+    query Proposals {
+  proposals {
+    ...ProposalFields
+  }
+}
+    ${ProposalFieldsFragmentDoc}`;
+
+/**
+ * __useProposalsQuery__
+ *
+ * To run a query within a React component, call `useProposalsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useProposalsQuery` 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 } = useProposalsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useProposalsQuery(baseOptions?: Apollo.QueryHookOptions<ProposalsQuery, ProposalsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ProposalsQuery, ProposalsQueryVariables>(ProposalsDocument, options);
+      }
+export function useProposalsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProposalsQuery, ProposalsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ProposalsQuery, ProposalsQueryVariables>(ProposalsDocument, options);
+        }
+export type ProposalsQueryHookResult = ReturnType<typeof useProposalsQuery>;
+export type ProposalsLazyQueryHookResult = ReturnType<typeof useProposalsLazyQuery>;
+export type ProposalsQueryResult = Apollo.QueryResult<ProposalsQuery, ProposalsQueryVariables>;

apps/token/src/routes/governance/components/proposal/proposal.spec.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import { generateProposal } from '../../test-helpers/generate-proposals';
+import { Proposal } from './proposal';
+
+jest.mock('../proposal-detail-header/proposal-header', () => ({
+  ProposalHeader: () => <div data-testid="proposal-header"></div>,
+}));
+jest.mock('../proposal-change-table', () => ({
+  ProposalChangeTable: () => <div data-testid="proposal-change-table"></div>,
+}));
+jest.mock('../proposal-terms-json', () => ({
+  ProposalTermsJson: () => <div data-testid="proposal-terms-json"></div>,
+}));
+jest.mock('../proposal-votes-table', () => ({
+  ProposalVotesTable: () => <div data-testid="proposal-votes-table"></div>,
+}));
+jest.mock('../vote-details', () => ({
+  VoteDetails: () => <div data-testid="proposal-vote-details"></div>,
+}));
+
+it('Renders with data-testid', () => {
+  const proposal = generateProposal();
+  render(<Proposal proposal={proposal} />);
+  expect(screen.getByTestId('proposal')).toBeInTheDocument();
+});
+
+it('renders each section', () => {
+  const proposal = generateProposal();
+  render(<Proposal proposal={proposal} />);
+  expect(screen.getByTestId('proposal-header')).toBeInTheDocument();
+  expect(screen.getByTestId('proposal-change-table')).toBeInTheDocument();
+  expect(screen.getByTestId('proposal-terms-json')).toBeInTheDocument();
+  expect(screen.getByTestId('proposal-votes-table')).toBeInTheDocument();
+  expect(screen.getByTestId('proposal-vote-details')).toBeInTheDocument();
+});

apps/token/src/routes/governance/components/proposal/proposal.tsx

@@ -1,8 +1,5 @@
 import { ProposalHeader } from '../proposal-detail-header/proposal-header';
-import type {
-  Proposal_proposal,
-  Proposal_proposal_terms,
-} from '../../proposal/__generated__/Proposal';
+import type { Proposal_proposal } from '../../proposal/__generated__/Proposal';
 import { ProposalChangeTable } from '../proposal-change-table';
 import { ProposalTermsJson } from '../proposal-terms-json';
 import { ProposalVotesTable } from '../proposal-votes-table';
@@ -10,16 +7,15 @@ import { VoteDetails } from '../vote-details';
 
 interface ProposalProps {
   proposal: Proposal_proposal;
-  terms: Proposal_proposal_terms;
 }
 
-export const Proposal = ({ proposal, terms }: ProposalProps) => {
+export const Proposal = ({ proposal }: ProposalProps) => {
   if (!proposal) {
     return null;
   }
 
   return (
-    <>
+    <section data-testid="proposal">
       <ProposalHeader proposal={proposal} />
       <div className="mb-8">
         <ProposalChangeTable proposal={proposal} />
@@ -30,7 +26,7 @@ export const Proposal = ({ proposal, terms }: ProposalProps) => {
       <div className="mb-8">
         <ProposalVotesTable proposal={proposal} />
       </div>
-      <ProposalTermsJson terms={terms} />
-    </>
+      <ProposalTermsJson terms={proposal.terms} />
+    </section>
   );
 };

apps/token/src/routes/governance/components/vote-details/Stake.graphql

@@ -0,0 +1,9 @@
+query VoteButtons($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    stake {
+      currentStakeAvailable
+      currentStakeAvailableFormatted @client
+    }
+  }
+}

apps/token/src/routes/governance/components/vote-details/__generated__/VoteButtons.ts

@@ -13,6 +13,9 @@ export interface VoteButtons_party_stake {
    * The stake currently available for the party
    */
   currentStakeAvailable: string;
+  /**
+   * The currently available stake formatted by the client
+   */
   currentStakeAvailableFormatted: string;
 }
 

apps/token/src/routes/governance/components/vote-details/__generated___/Stake.ts

@@ -0,0 +1,52 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type VoteButtonsQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type VoteButtonsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, stake: { __typename?: 'PartyStake', currentStakeAvailable: string, currentStakeAvailableFormatted: string } } | null };
+
+
+export const VoteButtonsDocument = gql`
+    query VoteButtons($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    stake {
+      currentStakeAvailable
+      currentStakeAvailableFormatted @client
+    }
+  }
+}
+    `;
+
+/**
+ * __useVoteButtonsQuery__
+ *
+ * To run a query within a React component, call `useVoteButtonsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useVoteButtonsQuery` 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 } = useVoteButtonsQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function useVoteButtonsQuery(baseOptions: Apollo.QueryHookOptions<VoteButtonsQuery, VoteButtonsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<VoteButtonsQuery, VoteButtonsQueryVariables>(VoteButtonsDocument, options);
+      }
+export function useVoteButtonsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<VoteButtonsQuery, VoteButtonsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<VoteButtonsQuery, VoteButtonsQueryVariables>(VoteButtonsDocument, options);
+        }
+export type VoteButtonsQueryHookResult = ReturnType<typeof useVoteButtonsQuery>;
+export type VoteButtonsLazyQueryHookResult = ReturnType<typeof useVoteButtonsLazyQuery>;
+export type VoteButtonsQueryResult = Apollo.QueryResult<VoteButtonsQuery, VoteButtonsQueryVariables>;

apps/token/src/routes/governance/proposal/proposal-container.tsx

@@ -1,5 +1,6 @@
 import { gql, useQuery } from '@apollo/client';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { Proposal } from '../components/proposal';
@@ -20,22 +21,23 @@ export const PROPOSAL_QUERY = gql`
 
 export const ProposalContainer = () => {
   const params = useParams<{ proposalId: string }>();
-
-  const { data, loading, error } = useQuery<
+  const { data, loading, error, refetch } = useQuery<
     ProposalQueryResult,
     ProposalVariables
   >(PROPOSAL_QUERY, {
-    fetchPolicy: 'no-cache',
+    fetchPolicy: 'network-only',
     variables: { proposalId: params.proposalId || '' },
     skip: !params.proposalId,
-    pollInterval: 5000,
   });
 
+  useEffect(() => {
+    const interval = setInterval(refetch, 1000);
+    return () => clearInterval(interval);
+  }, [refetch]);
+
   return (
     <AsyncRenderer loading={loading} error={error} data={data}>
-      {data && (
-        <Proposal proposal={data.proposal} terms={data.proposal.terms} />
-      )}
+      {data && <Proposal proposal={data.proposal} />}
     </AsyncRenderer>
   );
 };

apps/token/src/routes/home/NodeData.graphql

@@ -0,0 +1,6 @@
+query NodeData {
+  nodeData {
+    stakedTotal
+    stakedTotalFormatted @client
+  }
+}

apps/token/src/routes/home/__generated__/NodeData.ts

@@ -13,6 +13,9 @@ export interface NodeData_nodeData {
    * Total staked amount across all nodes
    */
   stakedTotal: string;
+  /**
+   * The total staked field formatted by the client
+   */
   stakedTotalFormatted: string;
 }
 

apps/token/src/routes/home/__generated___/NodeData.ts

@@ -0,0 +1,46 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type NodeDataQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type NodeDataQuery = { __typename?: 'Query', nodeData?: { __typename?: 'NodeData', stakedTotal: string, stakedTotalFormatted: string } | null };
+
+
+export const NodeDataDocument = gql`
+    query NodeData {
+  nodeData {
+    stakedTotal
+    stakedTotalFormatted @client
+  }
+}
+    `;
+
+/**
+ * __useNodeDataQuery__
+ *
+ * To run a query within a React component, call `useNodeDataQuery` and pass it any options that fit your needs.
+ * When your component renders, `useNodeDataQuery` 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 } = useNodeDataQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useNodeDataQuery(baseOptions?: Apollo.QueryHookOptions<NodeDataQuery, NodeDataQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<NodeDataQuery, NodeDataQueryVariables>(NodeDataDocument, options);
+      }
+export function useNodeDataLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NodeDataQuery, NodeDataQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<NodeDataQuery, NodeDataQueryVariables>(NodeDataDocument, options);
+        }
+export type NodeDataQueryHookResult = ReturnType<typeof useNodeDataQuery>;
+export type NodeDataLazyQueryHookResult = ReturnType<typeof useNodeDataLazyQuery>;
+export type NodeDataQueryResult = Apollo.QueryResult<NodeDataQuery, NodeDataQueryVariables>;

apps/token/src/routes/rewards/home/Rewards.graphql

@@ -0,0 +1,42 @@
+query Rewards($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    rewardDetails {
+      asset {
+        id
+        symbol
+      }
+      rewards {
+        rewardType
+        asset {
+          id
+        }
+        party {
+          id
+        }
+        epoch {
+          id
+        }
+        amount
+        amountFormatted @client
+        percentageOfTotal
+        receivedAt
+      }
+      totalAmount
+      totalAmountFormatted @client
+    }
+    delegations {
+      amount
+      amountFormatted @client
+      epoch
+    }
+  }
+  epoch {
+    id
+    timestamps {
+      start
+      end
+      expiry
+    }
+  }
+}

apps/token/src/routes/rewards/home/__generated__/Epoch.ts

@@ -1,43 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-// ====================================================
-// GraphQL query operation: Epoch
-// ====================================================
-
-export interface Epoch_epoch_timestamps {
-  __typename: "EpochTimestamps";
-  /**
-   * RFC3339 timestamp - Vega time of epoch start, null if not started
-   */
-  start: string | null;
-  /**
-   * RFC3339 timestamp - Vega time of epoch end, null if not ended
-   */
-  end: string | null;
-  /**
-   * RFC3339 timestamp - Vega time of epoch expiry
-   */
-  expiry: string | null;
-}
-
-export interface Epoch_epoch {
-  __typename: "Epoch";
-  /**
-   * Presumably this is an integer or something. If there's no such thing, disregard
-   */
-  id: string;
-  /**
-   * Timestamps for start/end etc
-   */
-  timestamps: Epoch_epoch_timestamps;
-}
-
-export interface Epoch {
-  /**
-   * get data for a specific epoch, if id omitted it gets the current epoch
-   */
-  epoch: Epoch_epoch;
-}

apps/token/src/routes/rewards/home/__generated__/Rewards.ts

@@ -67,6 +67,9 @@ export interface Rewards_party_rewardDetails_rewards {
    * Amount received for this reward
    */
   amount: string;
+  /**
+   * The amount field formatted by the client
+   */
   amountFormatted: string;
   /**
    * Percentage out of the total distributed reward
@@ -92,6 +95,9 @@ export interface Rewards_party_rewardDetails {
    * The total amount of rewards received for this asset.
    */
   totalAmount: string;
+  /**
+   * The total amount field formatted by the client
+   */
   totalAmountFormatted: string;
 }
 
@@ -101,6 +107,9 @@ export interface Rewards_party_delegations {
    * Amount delegated
    */
   amount: string;
+  /**
+   * The amount field formatted by the client
+   */
   amountFormatted: string;
   /**
    * Epoch of delegation

apps/token/src/routes/rewards/home/__generated___/Rewards.ts

@@ -0,0 +1,85 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type RewardsQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type RewardsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, rewardDetails?: Array<{ __typename?: 'RewardPerAssetDetail', totalAmount: string, totalAmountFormatted: string, asset: { __typename?: 'Asset', id: string, symbol: string }, rewards?: Array<{ __typename?: 'Reward', rewardType: Types.AccountType, amount: string, amountFormatted: string, percentageOfTotal: string, receivedAt: string, asset: { __typename?: 'Asset', id: string }, party: { __typename?: 'Party', id: string }, epoch: { __typename?: 'Epoch', id: string } } | null> | null } | null> | null, delegations?: Array<{ __typename?: 'Delegation', amount: string, amountFormatted: string, epoch: number }> | null } | null, epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: string | null, end?: string | null, expiry?: string | null } } };
+
+
+export const RewardsDocument = gql`
+    query Rewards($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    rewardDetails {
+      asset {
+        id
+        symbol
+      }
+      rewards {
+        rewardType
+        asset {
+          id
+        }
+        party {
+          id
+        }
+        epoch {
+          id
+        }
+        amount
+        amountFormatted @client
+        percentageOfTotal
+        receivedAt
+      }
+      totalAmount
+      totalAmountFormatted @client
+    }
+    delegations {
+      amount
+      amountFormatted @client
+      epoch
+    }
+  }
+  epoch {
+    id
+    timestamps {
+      start
+      end
+      expiry
+    }
+  }
+}
+    `;
+
+/**
+ * __useRewardsQuery__
+ *
+ * To run a query within a React component, call `useRewardsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useRewardsQuery` 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 } = useRewardsQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function useRewardsQuery(baseOptions: Apollo.QueryHookOptions<RewardsQuery, RewardsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<RewardsQuery, RewardsQueryVariables>(RewardsDocument, options);
+      }
+export function useRewardsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<RewardsQuery, RewardsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<RewardsQuery, RewardsQueryVariables>(RewardsDocument, options);
+        }
+export type RewardsQueryHookResult = ReturnType<typeof useRewardsQuery>;
+export type RewardsLazyQueryHookResult = ReturnType<typeof useRewardsLazyQuery>;
+export type RewardsQueryResult = Apollo.QueryResult<RewardsQuery, RewardsQueryVariables>;

apps/token/src/routes/router-config.tsx

@@ -143,13 +143,6 @@ const LazyContracts = React.lazy(
     )
 );
 
-const LazyWithdraw = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "route-withdraw", webpackPrefetch: true */ './withdraw'
-    )
-);
-
 const LazyWithdrawals = React.lazy(
   () =>
     import(
@@ -201,11 +194,6 @@ const routerConfig = [
     name: 'Rewards',
     component: LazyRewards,
   },
-  {
-    path: Routes.WITHDRAW,
-    name: 'Withdraw',
-    component: LazyWithdraw,
-  },
   {
     path: Routes.WITHDRAWALS,
     name: 'Withdrawals',

apps/token/src/routes/routes.ts

@@ -4,7 +4,6 @@ export default {
   CLAIM: '/claim',
   STAKING: '/staking',
   REWARDS: '/rewards',
-  WITHDRAW: '/withdraw',
   WITHDRAWALS: '/withdrawals',
   GOVERNANCE: '/governance',
   VESTING: '/vesting',

apps/token/src/routes/staking/Nodes.graphql

@@ -0,0 +1,23 @@
+query Nodes {
+  nodes {
+    avatarUrl
+    id
+    name
+    pubkey
+    stakedTotal
+    stakedTotalFormatted @client
+    pendingStake
+    pendingStakeFormatted @client
+    rankingScore {
+      rankingScore
+      stakeScore
+      performanceScore
+      votingPower
+      status
+    }
+  }
+  nodeData {
+    stakedTotal
+    stakedTotalFormatted @client
+  }
+}

apps/token/src/routes/staking/PartyDelegations.graphql

@@ -0,0 +1,16 @@
+query PartyDelegations($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    delegations {
+      amount
+      amountFormatted @client
+      node {
+        id
+      }
+      epoch
+    }
+  }
+  epoch {
+    id
+  }
+}

apps/token/src/routes/staking/Staking.graphql

@@ -0,0 +1,62 @@
+query Staking($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    stake {
+      currentStakeAvailable
+      currentStakeAvailableFormatted @client
+    }
+    delegations {
+      amount
+      amountFormatted @client
+      epoch
+      node {
+        id
+      }
+    }
+  }
+  epoch {
+    id
+    timestamps {
+      start
+      end
+      expiry
+    }
+  }
+  nodes {
+    id
+    name
+    pubkey
+    infoUrl
+    location
+    ethereumAddress
+    stakedByOperator
+    stakedByDelegates
+    stakedTotal
+    pendingStake
+    stakedByOperatorFormatted @client
+    stakedByDelegatesFormatted @client
+    stakedTotalFormatted @client
+    pendingStakeFormatted @client
+    epochData {
+      total
+      offline
+      online
+    }
+    status
+    rankingScore {
+      rankingScore
+      stakeScore
+      performanceScore
+      votingPower
+      stakeScore
+    }
+  }
+  nodeData {
+    stakedTotal
+    stakedTotalFormatted @client
+    totalNodes
+    inactiveNodes
+    validatingNodes
+    uptime
+  }
+}

apps/token/src/routes/staking/__generated__/Nodes.ts

@@ -49,11 +49,17 @@ export interface Nodes_nodes {
    * Total amount staked on node
    */
   stakedTotal: string;
+  /**
+   * The total staked field formatted by the client
+   */
   stakedTotalFormatted: string;
   /**
    * Amount of stake on the next epoch
    */
   pendingStake: string;
+  /**
+   * The pending staked field formatted by the client
+   */
   pendingStakeFormatted: string;
   /**
    * Ranking scores and status for the validator for the current epoch
@@ -67,6 +73,9 @@ export interface Nodes_nodeData {
    * Total staked amount across all nodes
    */
   stakedTotal: string;
+  /**
+   * The total staked field formatted by the client
+   */
   stakedTotalFormatted: string;
 }
 

apps/token/src/routes/staking/__generated__/PartyDelegations.ts

@@ -21,6 +21,9 @@ export interface PartyDelegations_party_delegations {
    * Amount delegated
    */
   amount: string;
+  /**
+   * The amount field formatted by the client
+   */
   amountFormatted: string;
   /**
    * URL of node you are delegating to

apps/token/src/routes/staking/__generated__/Staking.ts

@@ -15,6 +15,9 @@ export interface Staking_party_stake {
    * The stake currently available for the party
    */
   currentStakeAvailable: string;
+  /**
+   * The currently available stake formatted by the client
+   */
   currentStakeAvailableFormatted: string;
 }
 
@@ -32,6 +35,9 @@ export interface Staking_party_delegations {
    * Amount delegated
    */
   amount: string;
+  /**
+   * The amount field formatted by the client
+   */
   amountFormatted: string;
   /**
    * Epoch of delegation
@@ -159,9 +165,21 @@ export interface Staking_nodes {
    * Amount of stake on the next epoch
    */
   pendingStake: string;
+  /**
+   * The stakes by operator field formatted by the client
+   */
   stakedByOperatorFormatted: string;
+  /**
+   * The stakes by delegates field formatted by the client
+   */
   stakedByDelegatesFormatted: string;
+  /**
+   * The total staked field formatted by the client
+   */
   stakedTotalFormatted: string;
+  /**
+   * The pending staked field formatted by the client
+   */
   pendingStakeFormatted: string;
   epochData: Staking_nodes_epochData | null;
   status: NodeStatus;
@@ -177,6 +195,9 @@ export interface Staking_nodeData {
    * Total staked amount across all nodes
    */
   stakedTotal: string;
+  /**
+   * The total staked field formatted by the client
+   */
   stakedTotalFormatted: string;
   /**
    * Total number of nodes

apps/token/src/routes/staking/__generated___/Nodes.ts

@@ -0,0 +1,63 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type NodesQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type NodesQuery = { __typename?: 'Query', nodes?: Array<{ __typename?: 'Node', avatarUrl?: string | null, id: string, name: string, pubkey: string, stakedTotal: string, stakedTotalFormatted: string, pendingStake: string, pendingStakeFormatted: string, rankingScore: { __typename?: 'RankingScore', rankingScore: string, stakeScore: string, performanceScore: string, votingPower: string, status: Types.ValidatorStatus } }> | null, nodeData?: { __typename?: 'NodeData', stakedTotal: string, stakedTotalFormatted: string } | null };
+
+
+export const NodesDocument = gql`
+    query Nodes {
+  nodes {
+    avatarUrl
+    id
+    name
+    pubkey
+    stakedTotal
+    stakedTotalFormatted @client
+    pendingStake
+    pendingStakeFormatted @client
+    rankingScore {
+      rankingScore
+      stakeScore
+      performanceScore
+      votingPower
+      status
+    }
+  }
+  nodeData {
+    stakedTotal
+    stakedTotalFormatted @client
+  }
+}
+    `;
+
+/**
+ * __useNodesQuery__
+ *
+ * To run a query within a React component, call `useNodesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useNodesQuery` 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 } = useNodesQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useNodesQuery(baseOptions?: Apollo.QueryHookOptions<NodesQuery, NodesQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<NodesQuery, NodesQueryVariables>(NodesDocument, options);
+      }
+export function useNodesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NodesQuery, NodesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<NodesQuery, NodesQueryVariables>(NodesDocument, options);
+        }
+export type NodesQueryHookResult = ReturnType<typeof useNodesQuery>;
+export type NodesLazyQueryHookResult = ReturnType<typeof useNodesLazyQuery>;
+export type NodesQueryResult = Apollo.QueryResult<NodesQuery, NodesQueryVariables>;

apps/token/src/routes/staking/__generated___/PartyDelegations.ts

@@ -0,0 +1,59 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type PartyDelegationsQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type PartyDelegationsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, delegations?: Array<{ __typename?: 'Delegation', amount: string, amountFormatted: string, epoch: number, node: { __typename?: 'Node', id: string } }> | null } | null, epoch: { __typename?: 'Epoch', id: string } };
+
+
+export const PartyDelegationsDocument = gql`
+    query PartyDelegations($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    delegations {
+      amount
+      amountFormatted @client
+      node {
+        id
+      }
+      epoch
+    }
+  }
+  epoch {
+    id
+  }
+}
+    `;
+
+/**
+ * __usePartyDelegationsQuery__
+ *
+ * To run a query within a React component, call `usePartyDelegationsQuery` and pass it any options that fit your needs.
+ * When your component renders, `usePartyDelegationsQuery` 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 } = usePartyDelegationsQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function usePartyDelegationsQuery(baseOptions: Apollo.QueryHookOptions<PartyDelegationsQuery, PartyDelegationsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<PartyDelegationsQuery, PartyDelegationsQueryVariables>(PartyDelegationsDocument, options);
+      }
+export function usePartyDelegationsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PartyDelegationsQuery, PartyDelegationsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<PartyDelegationsQuery, PartyDelegationsQueryVariables>(PartyDelegationsDocument, options);
+        }
+export type PartyDelegationsQueryHookResult = ReturnType<typeof usePartyDelegationsQuery>;
+export type PartyDelegationsLazyQueryHookResult = ReturnType<typeof usePartyDelegationsLazyQuery>;
+export type PartyDelegationsQueryResult = Apollo.QueryResult<PartyDelegationsQuery, PartyDelegationsQueryVariables>;

apps/token/src/routes/staking/__generated___/Staking.ts

@@ -0,0 +1,105 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type StakingQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type StakingQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, stake: { __typename?: 'PartyStake', currentStakeAvailable: string, currentStakeAvailableFormatted: string }, delegations?: Array<{ __typename?: 'Delegation', amount: string, amountFormatted: string, epoch: number, node: { __typename?: 'Node', id: string } }> | null } | null, epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: string | null, end?: string | null, expiry?: string | null } }, nodes?: Array<{ __typename?: 'Node', id: string, name: string, pubkey: string, infoUrl: string, location: string, ethereumAddress: string, stakedByOperator: string, stakedByDelegates: string, stakedTotal: string, pendingStake: string, stakedByOperatorFormatted: string, stakedByDelegatesFormatted: string, stakedTotalFormatted: string, pendingStakeFormatted: string, status: Types.NodeStatus, epochData?: { __typename?: 'EpochData', total: number, offline: number, online: number } | null, rankingScore: { __typename?: 'RankingScore', rankingScore: string, stakeScore: string, performanceScore: string, votingPower: string } }> | null, nodeData?: { __typename?: 'NodeData', stakedTotal: string, stakedTotalFormatted: string, totalNodes: number, inactiveNodes: number, validatingNodes: number, uptime: number } | null };
+
+
+export const StakingDocument = gql`
+    query Staking($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    stake {
+      currentStakeAvailable
+      currentStakeAvailableFormatted @client
+    }
+    delegations {
+      amount
+      amountFormatted @client
+      epoch
+      node {
+        id
+      }
+    }
+  }
+  epoch {
+    id
+    timestamps {
+      start
+      end
+      expiry
+    }
+  }
+  nodes {
+    id
+    name
+    pubkey
+    infoUrl
+    location
+    ethereumAddress
+    stakedByOperator
+    stakedByDelegates
+    stakedTotal
+    pendingStake
+    stakedByOperatorFormatted @client
+    stakedByDelegatesFormatted @client
+    stakedTotalFormatted @client
+    pendingStakeFormatted @client
+    epochData {
+      total
+      offline
+      online
+    }
+    status
+    rankingScore {
+      rankingScore
+      stakeScore
+      performanceScore
+      votingPower
+      stakeScore
+    }
+  }
+  nodeData {
+    stakedTotal
+    stakedTotalFormatted @client
+    totalNodes
+    inactiveNodes
+    validatingNodes
+    uptime
+  }
+}
+    `;
+
+/**
+ * __useStakingQuery__
+ *
+ * To run a query within a React component, call `useStakingQuery` and pass it any options that fit your needs.
+ * When your component renders, `useStakingQuery` 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 } = useStakingQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function useStakingQuery(baseOptions: Apollo.QueryHookOptions<StakingQuery, StakingQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<StakingQuery, StakingQueryVariables>(StakingDocument, options);
+      }
+export function useStakingLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<StakingQuery, StakingQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<StakingQuery, StakingQueryVariables>(StakingDocument, options);
+        }
+export type StakingQueryHookResult = ReturnType<typeof useStakingQuery>;
+export type StakingLazyQueryHookResult = ReturnType<typeof useStakingLazyQuery>;
+export type StakingQueryResult = Apollo.QueryResult<StakingQuery, StakingQueryVariables>;