update order-list lib so it behaves the same as positions and requires a partyId

libs/order-list/src/order-list-container.tsx

@@ -1,14 +1,13 @@
-import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { Splash } from '@vegaprotocol/ui-toolkit';
-import { useOrders } from './use-orders';
+import { useVegaWallet } from '@vegaprotocol/wallet';
-import { OrderList } from './order-list';
+import { OrderListManager } from './order-list-manager';
-import { OrderFields } from './__generated__/OrderFields';
 
 export const OrderListContainer = () => {
-  const { orders, loading, error } = useOrders();
+  const { keypair } = useVegaWallet();
 
-  return (
+  if (!keypair) {
-    <AsyncRenderer<OrderFields[]> loading={loading} error={error} data={orders}>
+    return <Splash>Please connect Vega wallet</Splash>;
-      {(data) => <OrderList orders={data} />}
+  }
-    </AsyncRenderer>
+
-  );
+  return <OrderListManager partyId={keypair.pub} />;
 };

libs/order-list/src/order-list-manager.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import { OrderListContainer } from './order-list-container';
+import { OrderListManager } from './order-list-manager';
 import * as useOrdersHook from './use-orders';
 import { Orders_party_orders } from './__generated__/Orders';
 
@@ -13,7 +13,7 @@ test('Renders a loading state while awaiting orders', () => {
     loading: true,
     error: null,
   });
-  render(<OrderListContainer />);
+  render(<OrderListManager partyId="0x123" />);
   expect(screen.getByText('Loading...')).toBeInTheDocument();
 });
 
@@ -24,7 +24,7 @@ test('Renders an error state', () => {
     loading: false,
     error: new Error(errorMsg),
   });
-  render(<OrderListContainer />);
+  render(<OrderListManager partyId="0x123" />);
   expect(
     screen.getByText(`Something went wrong: ${errorMsg}`)
   ).toBeInTheDocument();
@@ -36,6 +36,6 @@ test('Renders the order list if orders provided', async () => {
     loading: false,
     error: null,
   });
-  render(<OrderListContainer />);
+  render(<OrderListManager partyId="0x123" />);
   expect(await screen.findByText('OrderList')).toBeInTheDocument();
 });

libs/order-list/src/order-list-manager.tsx

@@ -0,0 +1,18 @@
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { useOrders } from './use-orders';
+import { OrderList } from './order-list';
+import { OrderFields } from './__generated__/OrderFields';
+
+interface OrderListManagerProps {
+  partyId: string;
+}
+
+export const OrderListManager = ({ partyId }: OrderListManagerProps) => {
+  const { orders, loading, error } = useOrders(partyId);
+
+  return (
+    <AsyncRenderer<OrderFields[]> loading={loading} error={error} data={orders}>
+      {(data) => <OrderList orders={data} />}
+    </AsyncRenderer>
+  );
+};

libs/order-list/src/use-orders.spec.tsx

@@ -9,24 +9,11 @@ import {
   OrderType,
   OrderTimeInForce,
 } from '@vegaprotocol/types';
-import {
+import {} from '@vegaprotocol/wallet';
-  VegaKeyExtended,
-  VegaWalletContext,
-  VegaWalletContextShape,
-} from '@vegaprotocol/wallet';
 import { ReactNode } from 'react';
 import { ORDERS_QUERY, ORDERS_SUB, useOrders } from './use-orders';
 
-const keypair = { pub: '0x123' } as VegaKeyExtended;
+const partyId = '0x123';
-const defaultWalletContext = {
-  keypair,
-  keypairs: [keypair],
-  sendTx: jest.fn().mockReturnValue(Promise.resolve(null)),
-  connect: jest.fn(),
-  disconnect: jest.fn(),
-  selectPublicKey: jest.fn(),
-  connector: null,
-};
 
 function generateOrder(order?: Partial<OrderFields>): OrderFields {
   return {
@@ -60,20 +47,11 @@ function generateOrder(order?: Partial<OrderFields>): OrderFields {
   };
 }
 
-function setup(
+function setup(mocks: MockedResponse[] = [], id: string | null) {
-  context?: Partial<VegaWalletContextShape>,
-  mocks: MockedResponse[] = []
-) {
   const wrapper = ({ children }: { children: ReactNode }) => (
-    <MockedProvider mocks={mocks}>
+    <MockedProvider mocks={mocks}>{children}</MockedProvider>
-      <VegaWalletContext.Provider
-        value={{ ...defaultWalletContext, ...context }}
-      >
-        {children}
-      </VegaWalletContext.Provider>
-    </MockedProvider>
   );
-  return renderHook(() => useOrders(), { wrapper });
+  return renderHook(() => useOrders(id as string), { wrapper });
 }
 
 test('Fetches and subscribes to orders and merges appropriately', async () => {
@@ -81,13 +59,13 @@ test('Fetches and subscribes to orders and merges appropriately', async () => {
   const mockOrderQuery: MockedResponse<Orders> = {
     request: {
       query: ORDERS_QUERY,
-      variables: { partyId: keypair.pub },
+      variables: { partyId },
     },
     result: {
       data: {
         party: {
           __typename: 'Party',
-          id: keypair.pub,
+          id: partyId,
           orders: [order],
         },
       },
@@ -106,7 +84,7 @@ test('Fetches and subscribes to orders and merges appropriately', async () => {
   const mockOrderSub: MockedResponse<OrderSub> = {
     request: {
       query: ORDERS_SUB,
-      variables: { partyId: keypair.pub },
+      variables: { partyId },
     },
     result: {
       data: {
@@ -115,10 +93,10 @@ test('Fetches and subscribes to orders and merges appropriately', async () => {
     },
     delay: 100,
   };
-  const { result, waitForNextUpdate } = setup(defaultWalletContext, [
+  const { result, waitForNextUpdate } = setup(
-    mockOrderQuery,
+    [mockOrderQuery, mockOrderSub],
-    mockOrderSub,
+    partyId
-  ]);
+  );
   expect(result.current.loading).toBe(true);
   expect(result.current.error).toBe(null);
   await waitForNextUpdate();
@@ -133,13 +111,11 @@ test('Returns an error if fetch fails', async () => {
   const mockFailedOrderQuery: MockedResponse<Orders> = {
     request: {
       query: ORDERS_QUERY,
-      variables: { partyId: keypair.pub },
+      variables: { partyId },
     },
     error,
   };
-  const { result, waitForNextUpdate } = setup(defaultWalletContext, [
+  const { result, waitForNextUpdate } = setup([mockFailedOrderQuery], partyId);
-    mockFailedOrderQuery,
-  ]);
   expect(result.current.loading).toBe(true);
   expect(result.current.error).toBe(null);
   await waitForNextUpdate();
@@ -151,14 +127,11 @@ test('No queries are made if no pubkey provided', () => {
   const mockQuery: MockedResponse<Orders> = {
     request: {
       query: ORDERS_QUERY,
-      variables: { partyId: keypair.pub },
+      variables: { partyId },
     },
     newData: jest.fn(),
   };
-  const { result } = setup(
+  const { result } = setup([mockQuery], null);
-    { ...defaultWalletContext, keypair: null, keypairs: [] },
-    [mockQuery]
-  );
   expect(mockQuery.newData).not.toBeCalled();
   expect(result.current.loading).toBe(false);
   expect(result.current.error).toBe(null);

libs/order-list/src/use-orders.ts

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useState } from 'react';
 import { gql, useApolloClient } from '@apollo/client';
 import uniqBy from 'lodash/uniqBy';
 import orderBy from 'lodash/orderBy';
-import { useVegaWallet } from '@vegaprotocol/wallet';
 import { Orders, OrdersVariables } from './__generated__/Orders';
 import { OrderSub, OrderSubVariables } from './__generated__/OrderSub';
 import { OrderFields } from './__generated__/OrderFields';
@@ -61,9 +60,8 @@ interface UseOrders {
   loading: boolean;
 }
 
-export const useOrders = (): UseOrders => {
+export const useOrders = (partyId: string): UseOrders => {
   const client = useApolloClient();
-  const { keypair } = useVegaWallet();
   const [orders, setOrders] = useState<OrderFields[]>([]);
   const [error, setError] = useState<Error | null>(null);
   const [loading, setLoading] = useState(false);
@@ -89,14 +87,14 @@ export const useOrders = (): UseOrders => {
   // Make initial fetch
   useEffect(() => {
     const fetchOrders = async () => {
-      if (!keypair?.pub) return;
+      if (!partyId) return;
 
       setLoading(true);
 
       try {
         const res = await client.query<Orders, OrdersVariables>({
           query: ORDERS_QUERY,
-          variables: { partyId: keypair.pub },
+          variables: { partyId },
         });
 
         if (!res.data.party?.orders?.length) return;
@@ -112,16 +110,16 @@ export const useOrders = (): UseOrders => {
     };
 
     fetchOrders();
-  }, [mergeOrders, keypair, client]);
+  }, [mergeOrders, partyId, client]);
 
   // Start subscription
   useEffect(() => {
-    if (!keypair?.pub) return;
+    if (!partyId) return;
 
     const sub = client
       .subscribe<OrderSub, OrderSubVariables>({
         query: ORDERS_SUB,
-        variables: { partyId: keypair.pub },
+        variables: { partyId },
       })
       .subscribe(({ data }) => {
         if (!data?.orders) {
@@ -135,7 +133,7 @@ export const useOrders = (): UseOrders => {
         sub.unsubscribe();
       }
     };
-  }, [client, keypair, mergeOrders]);
+  }, [client, partyId, mergeOrders]);
 
   return { orders, error, loading };
 };