From 4f1585110348d76a1e652b699cbcc1430ff95901 Mon Sep 17 00:00:00 2001 From: Matthew Russell Date: Tue, 29 Mar 2022 17:19:41 -0700 Subject: [PATCH] update order-list lib so it behaves the same as positions and requires a partyId --- libs/order-list/src/order-list-container.tsx | 19 +++--- ...r.spec.tsx => order-list-manager.spec.tsx} | 8 +-- libs/order-list/src/order-list-manager.tsx | 18 ++++++ libs/order-list/src/use-orders.spec.tsx | 59 +++++-------------- libs/order-list/src/use-orders.ts | 16 +++-- 5 files changed, 54 insertions(+), 66 deletions(-) rename libs/order-list/src/{order-list-container.spec.tsx => order-list-manager.spec.tsx} (84%) create mode 100644 libs/order-list/src/order-list-manager.tsx diff --git a/libs/order-list/src/order-list-container.tsx b/libs/order-list/src/order-list-container.tsx index 676008b2e..f4c608530 100644 --- a/libs/order-list/src/order-list-container.tsx +++ b/libs/order-list/src/order-list-container.tsx @@ -1,14 +1,13 @@ -import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; -import { useOrders } from './use-orders'; -import { OrderList } from './order-list'; -import { OrderFields } from './__generated__/OrderFields'; +import { Splash } from '@vegaprotocol/ui-toolkit'; +import { useVegaWallet } from '@vegaprotocol/wallet'; +import { OrderListManager } from './order-list-manager'; export const OrderListContainer = () => { - const { orders, loading, error } = useOrders(); + const { keypair } = useVegaWallet(); - return ( - loading={loading} error={error} data={orders}> - {(data) => } - - ); + if (!keypair) { + return Please connect Vega wallet; + } + + return ; }; diff --git a/libs/order-list/src/order-list-container.spec.tsx b/libs/order-list/src/order-list-manager.spec.tsx similarity index 84% rename from libs/order-list/src/order-list-container.spec.tsx rename to libs/order-list/src/order-list-manager.spec.tsx index 08ff862ae..2be69170e 100644 --- a/libs/order-list/src/order-list-container.spec.tsx +++ b/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(); + render(); expect(screen.getByText('Loading...')).toBeInTheDocument(); }); @@ -24,7 +24,7 @@ test('Renders an error state', () => { loading: false, error: new Error(errorMsg), }); - render(); + render(); 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(); + render(); expect(await screen.findByText('OrderList')).toBeInTheDocument(); }); diff --git a/libs/order-list/src/order-list-manager.tsx b/libs/order-list/src/order-list-manager.tsx new file mode 100644 index 000000000..ceb262614 --- /dev/null +++ b/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 ( + loading={loading} error={error} data={orders}> + {(data) => } + + ); +}; diff --git a/libs/order-list/src/use-orders.spec.tsx b/libs/order-list/src/use-orders.spec.tsx index bb7659ae8..50b9cccbe 100644 --- a/libs/order-list/src/use-orders.spec.tsx +++ b/libs/order-list/src/use-orders.spec.tsx @@ -9,24 +9,11 @@ import { OrderType, OrderTimeInForce, } from '@vegaprotocol/types'; -import { - VegaKeyExtended, - VegaWalletContext, - VegaWalletContextShape, -} from '@vegaprotocol/wallet'; +import {} from '@vegaprotocol/wallet'; import { ReactNode } from 'react'; import { ORDERS_QUERY, ORDERS_SUB, useOrders } from './use-orders'; -const keypair = { pub: '0x123' } as VegaKeyExtended; -const defaultWalletContext = { - keypair, - keypairs: [keypair], - sendTx: jest.fn().mockReturnValue(Promise.resolve(null)), - connect: jest.fn(), - disconnect: jest.fn(), - selectPublicKey: jest.fn(), - connector: null, -}; +const partyId = '0x123'; function generateOrder(order?: Partial): OrderFields { return { @@ -60,20 +47,11 @@ function generateOrder(order?: Partial): OrderFields { }; } -function setup( - context?: Partial, - mocks: MockedResponse[] = [] -) { +function setup(mocks: MockedResponse[] = [], id: string | null) { const wrapper = ({ children }: { children: ReactNode }) => ( - - - {children} - - + {children} ); - 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 = { 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 = { 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, [ - mockOrderQuery, - mockOrderSub, - ]); + const { result, waitForNextUpdate } = setup( + [mockOrderQuery, 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 = { request: { query: ORDERS_QUERY, - variables: { partyId: keypair.pub }, + variables: { partyId }, }, error, }; - const { result, waitForNextUpdate } = setup(defaultWalletContext, [ - mockFailedOrderQuery, - ]); + const { result, waitForNextUpdate } = setup([mockFailedOrderQuery], partyId); 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 = { request: { query: ORDERS_QUERY, - variables: { partyId: keypair.pub }, + variables: { partyId }, }, newData: jest.fn(), }; - const { result } = setup( - { ...defaultWalletContext, keypair: null, keypairs: [] }, - [mockQuery] - ); + const { result } = setup([mockQuery], null); expect(mockQuery.newData).not.toBeCalled(); expect(result.current.loading).toBe(false); expect(result.current.error).toBe(null); diff --git a/libs/order-list/src/use-orders.ts b/libs/order-list/src/use-orders.ts index 4190e3395..8954b02d4 100644 --- a/libs/order-list/src/use-orders.ts +++ b/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([]); const [error, setError] = useState(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({ 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({ 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 }; };