chore: remove fetch policy

apps/trading/client-pages/market/trade-grid.tsx

@@ -32,6 +32,7 @@ import {
 import { TradingViews } from './trade-views';
 import { MarketSelector } from './market-selector';
 import { HeaderStats } from './header-stats';
+import { PositionsMultiKey } from '@vegaprotocol/positions';
 
 interface TradeGridProps {
   market: Market | null;
@@ -130,6 +131,11 @@ const MarketBottomPanel = memo(
         >
           <TradeGridChild>
             <Tabs storageKey="console-trade-grid-bottom-right">
+              <Tab id="positions-multi" name={t('Positions v2')}>
+                <VegaWalletContainer>
+                  <PositionsMultiKey />
+                </VegaWalletContainer>
+              </Tab>
               <Tab id="positions" name={t('Positions')}>
                 <VegaWalletContainer>
                   <TradingViews.positions.component

apps/trading/client-pages/markets/settlement-date-cell.tsx

@@ -20,6 +20,7 @@ export const SettlementDateCell = ({
 }: SettlementDataCellProps) => {
   const linkCreator = useLinks(DApp.Explorer);
   const date = closeTimestamp ? new Date(closeTimestamp) : metaDate;
+  console.log(metaDate);
 
   let text = '';
   if (!date) {

apps/trading/components/app-loader/app-loader.tsx

@@ -92,5 +92,8 @@ const cacheConfig: InMemoryCacheConfig = {
     Fees: {
       keyFields: false,
     },
+    Position: {
+      keyFields: ['market', ['id'], 'party', ['id']],
+    },
   },
 };

apps/trading/components/navbar/navbar.tsx

@@ -46,7 +46,7 @@ export const Navbar = ({
   return (
     <Navigation
       appName="Console"
-      theme={theme}
+      theme={'dark'}
       actions={
         <>
           <ProtocolUpgradeCountdown

libs/positions/src/index.ts

@@ -1,6 +1,7 @@
 export * from './lib/__generated__/Positions';
 export * from './lib/positions-container';
 export * from './lib/positions-data-providers';
+export * from './lib/positions-multi-key';
 export * from './lib/margin-data-provider';
 export * from './lib/positions-table';
 export * from './lib/use-market-margin';

libs/positions/src/lib/Positions.graphql

@@ -9,6 +9,9 @@ fragment PositionFields on Position {
   market {
     id
   }
+  party {
+    id
+  }
 }
 
 query Positions($partyId: ID!) {
@@ -34,6 +37,8 @@ subscription PositionsSubscription($partyId: ID!) {
     marketId
     lossSocializationAmount
     positionStatus
+    partyId
+    marketId
   }
 }
 

libs/positions/src/lib/PositionsMulti.graphql

@@ -0,0 +1,43 @@
+fragment PositionMultiFields on Position {
+  realisedPNL
+  openVolume
+  unrealisedPNL
+  averageEntryPrice
+  updatedAt
+  positionStatus
+  lossSocializationAmount
+  market {
+    id
+  }
+  party {
+    id
+  }
+}
+
+query PositionsMulti($partyIds: [ID!]!) {
+  positions(filter: { partyIds: $partyIds }) {
+    edges {
+      node {
+        ...PositionMultiFields
+      }
+    }
+  }
+}
+
+query MarketName($marketId: ID!) {
+  market(id: $marketId) {
+    id
+    tradableInstrument {
+      instrument {
+        code
+      }
+    }
+  }
+}
+
+query MarketDecimals($marketId: ID!) {
+  market(id: $marketId) {
+    id
+    decimalPlaces
+  }
+}

libs/positions/src/lib/__generated__/Positions.ts

@@ -3,21 +3,21 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type PositionFieldsFragment = { __typename?: 'Position', realisedPNL: string, openVolume: string, unrealisedPNL: string, averageEntryPrice: string, updatedAt?: any | null, positionStatus: Types.PositionStatus, lossSocializationAmount: string, market: { __typename?: 'Market', id: string } };
+export type PositionFieldsFragment = { __typename?: 'Position', realisedPNL: string, openVolume: string, unrealisedPNL: string, averageEntryPrice: string, updatedAt?: any | null, positionStatus: Types.PositionStatus, lossSocializationAmount: string, market: { __typename?: 'Market', id: string }, party: { __typename?: 'Party', id: string } };
 
 export type PositionsQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
 }>;
 
 
-export type PositionsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, positionsConnection?: { __typename?: 'PositionConnection', edges?: Array<{ __typename?: 'PositionEdge', node: { __typename?: 'Position', realisedPNL: string, openVolume: string, unrealisedPNL: string, averageEntryPrice: string, updatedAt?: any | null, positionStatus: Types.PositionStatus, lossSocializationAmount: string, market: { __typename?: 'Market', id: string } } }> | null } | null } | null };
+export type PositionsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, positionsConnection?: { __typename?: 'PositionConnection', edges?: Array<{ __typename?: 'PositionEdge', node: { __typename?: 'Position', realisedPNL: string, openVolume: string, unrealisedPNL: string, averageEntryPrice: string, updatedAt?: any | null, positionStatus: Types.PositionStatus, lossSocializationAmount: string, market: { __typename?: 'Market', id: string }, party: { __typename?: 'Party', id: string } } }> | null } | null } | null };
 
 export type PositionsSubscriptionSubscriptionVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
 }>;
 
 
-export type PositionsSubscriptionSubscription = { __typename?: 'Subscription', positions: Array<{ __typename?: 'PositionUpdate', realisedPNL: string, openVolume: string, unrealisedPNL: string, averageEntryPrice: string, updatedAt?: any | null, marketId: string, lossSocializationAmount: string, positionStatus: Types.PositionStatus }> };
+export type PositionsSubscriptionSubscription = { __typename?: 'Subscription', positions: Array<{ __typename?: 'PositionUpdate', realisedPNL: string, openVolume: string, unrealisedPNL: string, averageEntryPrice: string, updatedAt?: any | null, marketId: string, lossSocializationAmount: string, positionStatus: Types.PositionStatus, partyId: string }> };
 
 export type MarginFieldsFragment = { __typename?: 'MarginLevels', maintenanceLevel: string, searchLevel: string, initialLevel: string, collateralReleaseLevel: string, asset: { __typename?: 'Asset', id: string }, market: { __typename?: 'Market', id: string } };
 
@@ -57,6 +57,9 @@ export const PositionFieldsFragmentDoc = gql`
   market {
     id
   }
+  party {
+    id
+  }
 }
     `;
 export const MarginFieldsFragmentDoc = gql`
@@ -126,6 +129,8 @@ export const PositionsSubscriptionDocument = gql`
     marketId
     lossSocializationAmount
     positionStatus
+    partyId
+    marketId
   }
 }
     `;

libs/positions/src/lib/__generated__/PositionsMulti.ts

@@ -0,0 +1,160 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type PositionMultiFieldsFragment = { __typename?: 'Position', realisedPNL: string, openVolume: string, unrealisedPNL: string, averageEntryPrice: string, updatedAt?: any | null, positionStatus: Types.PositionStatus, lossSocializationAmount: string, market: { __typename?: 'Market', id: string }, party: { __typename?: 'Party', id: string } };
+
+export type PositionsMultiQueryVariables = Types.Exact<{
+  partyIds: Array<Types.Scalars['ID']> | Types.Scalars['ID'];
+}>;
+
+
+export type PositionsMultiQuery = { __typename?: 'Query', positions?: { __typename?: 'PositionConnection', edges?: Array<{ __typename?: 'PositionEdge', node: { __typename?: 'Position', realisedPNL: string, openVolume: string, unrealisedPNL: string, averageEntryPrice: string, updatedAt?: any | null, positionStatus: Types.PositionStatus, lossSocializationAmount: string, market: { __typename?: 'Market', id: string }, party: { __typename?: 'Party', id: string } } }> | null } | null };
+
+export type MarketNameQueryVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+}>;
+
+
+export type MarketNameQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', code: string } } } | null };
+
+export type MarketDecimalsQueryVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+}>;
+
+
+export type MarketDecimalsQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, decimalPlaces: number } | null };
+
+export const PositionMultiFieldsFragmentDoc = gql`
+    fragment PositionMultiFields on Position {
+  realisedPNL
+  openVolume
+  unrealisedPNL
+  averageEntryPrice
+  updatedAt
+  positionStatus
+  lossSocializationAmount
+  market {
+    id
+  }
+  party {
+    id
+  }
+}
+    `;
+export const PositionsMultiDocument = gql`
+    query PositionsMulti($partyIds: [ID!]!) {
+  positions(filter: {partyIds: $partyIds}) {
+    edges {
+      node {
+        ...PositionMultiFields
+      }
+    }
+  }
+}
+    ${PositionMultiFieldsFragmentDoc}`;
+
+/**
+ * __usePositionsMultiQuery__
+ *
+ * To run a query within a React component, call `usePositionsMultiQuery` and pass it any options that fit your needs.
+ * When your component renders, `usePositionsMultiQuery` 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 } = usePositionsMultiQuery({
+ *   variables: {
+ *      partyIds: // value for 'partyIds'
+ *   },
+ * });
+ */
+export function usePositionsMultiQuery(baseOptions: Apollo.QueryHookOptions<PositionsMultiQuery, PositionsMultiQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<PositionsMultiQuery, PositionsMultiQueryVariables>(PositionsMultiDocument, options);
+      }
+export function usePositionsMultiLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PositionsMultiQuery, PositionsMultiQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<PositionsMultiQuery, PositionsMultiQueryVariables>(PositionsMultiDocument, options);
+        }
+export type PositionsMultiQueryHookResult = ReturnType<typeof usePositionsMultiQuery>;
+export type PositionsMultiLazyQueryHookResult = ReturnType<typeof usePositionsMultiLazyQuery>;
+export type PositionsMultiQueryResult = Apollo.QueryResult<PositionsMultiQuery, PositionsMultiQueryVariables>;
+export const MarketNameDocument = gql`
+    query MarketName($marketId: ID!) {
+  market(id: $marketId) {
+    id
+    tradableInstrument {
+      instrument {
+        code
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useMarketNameQuery__
+ *
+ * To run a query within a React component, call `useMarketNameQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMarketNameQuery` 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 } = useMarketNameQuery({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useMarketNameQuery(baseOptions: Apollo.QueryHookOptions<MarketNameQuery, MarketNameQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarketNameQuery, MarketNameQueryVariables>(MarketNameDocument, options);
+      }
+export function useMarketNameLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketNameQuery, MarketNameQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarketNameQuery, MarketNameQueryVariables>(MarketNameDocument, options);
+        }
+export type MarketNameQueryHookResult = ReturnType<typeof useMarketNameQuery>;
+export type MarketNameLazyQueryHookResult = ReturnType<typeof useMarketNameLazyQuery>;
+export type MarketNameQueryResult = Apollo.QueryResult<MarketNameQuery, MarketNameQueryVariables>;
+export const MarketDecimalsDocument = gql`
+    query MarketDecimals($marketId: ID!) {
+  market(id: $marketId) {
+    id
+    decimalPlaces
+  }
+}
+    `;
+
+/**
+ * __useMarketDecimalsQuery__
+ *
+ * To run a query within a React component, call `useMarketDecimalsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMarketDecimalsQuery` 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 } = useMarketDecimalsQuery({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useMarketDecimalsQuery(baseOptions: Apollo.QueryHookOptions<MarketDecimalsQuery, MarketDecimalsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarketDecimalsQuery, MarketDecimalsQueryVariables>(MarketDecimalsDocument, options);
+      }
+export function useMarketDecimalsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketDecimalsQuery, MarketDecimalsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarketDecimalsQuery, MarketDecimalsQueryVariables>(MarketDecimalsDocument, options);
+        }
+export type MarketDecimalsQueryHookResult = ReturnType<typeof useMarketDecimalsQuery>;
+export type MarketDecimalsLazyQueryHookResult = ReturnType<typeof useMarketDecimalsLazyQuery>;
+export type MarketDecimalsQueryResult = Apollo.QueryResult<MarketDecimalsQuery, MarketDecimalsQueryVariables>;

libs/positions/src/lib/positions-multi-key.tsx

@@ -0,0 +1,159 @@
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import {
+  useMarketDecimalsQuery,
+  useMarketNameQuery,
+  usePositionsMultiQuery,
+} from './__generated__/PositionsMulti';
+import { AgGridLazy } from '@vegaprotocol/datagrid';
+import { useEffect, useMemo } from 'react';
+import type {
+  PositionsSubscriptionSubscription,
+  PositionsSubscriptionSubscriptionVariables,
+} from './__generated__/Positions';
+import { PositionsSubscriptionDocument } from './__generated__/Positions';
+import { addDecimalsFormatNumber, truncateByChars } from '@vegaprotocol/utils';
+import { useApolloClient } from '@apollo/client';
+
+export const PositionsMultiKey = () => {
+  const { pubKeys } = useVegaWallet();
+  const { data } = usePositions();
+  const colDefs = useMemo(() => {
+    return [
+      {
+        field: 'party.id',
+        valueFormatter: ({ value }) => {
+          const truncated = truncateByChars(value);
+          const pk = pubKeys?.find((pk) => pk.publicKey === value);
+          return pk ? pk.name + ' ' + truncated : truncated;
+        },
+      },
+      {
+        headerName: 'Market',
+        field: 'market.id',
+        cellRenderer: ({ value }) => {
+          return <MarketCell id={value} />;
+        },
+      },
+      {
+        field: 'openVolume',
+      },
+      {
+        field: 'unrealisedPNL',
+        cellRenderer: ({ data }) => {
+          return (
+            <PNLCell marketId={data.market.id} value={data.unrealisedPNL} />
+          );
+        },
+      },
+      {
+        field: 'realisedPNL',
+        cellRenderer: ({ data }) => {
+          return <PNLCell marketId={data.market.id} value={data.realisedPNL} />;
+        },
+      },
+      {
+        field: 'updatedAt',
+      },
+    ];
+  }, [pubKeys]);
+
+  const rowData = data?.positions?.edges?.length
+    ? data.positions.edges.map((e) => e.node)
+    : [];
+
+  return (
+    <AgGridLazy
+      getRowId={({ data }) => `${data.party.id}:${data.market.id}`}
+      style={{ width: '100%', height: '100%' }}
+      columnDefs={colDefs}
+      rowData={rowData}
+    />
+  );
+};
+
+const usePositions = () => {
+  const { pubKeys } = useVegaWallet();
+  const client = useApolloClient();
+  const { data, loading, error } = usePositionsMultiQuery({
+    variables: {
+      partyIds: pubKeys ? pubKeys.map((pk) => pk.publicKey) : [],
+    },
+    skip: !pubKeys || pubKeys.length === 0,
+  });
+
+  useEffect(() => {
+    if (!pubKeys?.length) return;
+    const subs = pubKeys.map((p) => {
+      return client
+        .subscribe<
+          PositionsSubscriptionSubscription,
+          PositionsSubscriptionSubscriptionVariables
+        >({
+          query: PositionsSubscriptionDocument,
+          variables: {
+            partyId: p.publicKey,
+          },
+          // no cache as we only want to store data in the root Position query,
+          // we modify this cache entry directly below
+          fetchPolicy: 'no-cache',
+        })
+        .subscribe(({ data }) => {
+          data?.positions.forEach((position) => {
+            const id = client.cache.identify({
+              __typename: 'Position',
+              party: { id: position.partyId },
+              market: { id: position.marketId },
+            });
+            client.cache.modify({
+              id,
+              fields: {
+                realisedPNL: () => position.realisedPNL,
+                unrealisedPNL: () => position.unrealisedPNL,
+                openVolume: () => position.openVolume,
+                averageEntryPrice: () => position.averageEntryPrice,
+                positionStatus: () => position.positionStatus,
+                lossSocializationAmount: () => position.lossSocializationAmount,
+                updatedAt: () => position.updatedAt,
+              },
+            });
+          });
+        });
+    });
+
+    return () => {
+      subs.forEach((sub) => {
+        sub.unsubscribe();
+      });
+    };
+  }, [pubKeys, client]);
+
+  return { data, loading, error };
+};
+
+const MarketCell = ({ id }: { id: string }) => {
+  const { data } = useMarketNameQuery({
+    variables: {
+      marketId: id,
+    },
+    // We should cache all static market data higher up the render tree so this
+    // can be cache only
+    // fetchPolicy: 'cache-only',
+  });
+  if (!data?.market) return <span>-</span>;
+  return <span>{data.market.tradableInstrument.instrument.code}</span>;
+};
+
+const PNLCell = ({ marketId, value }: { marketId: string; value: string }) => {
+  const { data } = useMarketDecimalsQuery({
+    variables: {
+      marketId,
+    },
+    // We should cache all static market data higher up the render tree so this
+    // can be cache only
+    // fetchPolicy: 'cache-only'
+  });
+  if (!data?.market) return <span>-</span>;
+  return (
+    <span>{addDecimalsFormatNumber(value, data.market.decimalPlaces)}</span>
+  );
+};