From 1791b3ca6af93a350b20911ea3a0cf98eb0edee0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= <bglownia@gmail.com>
Date: Mon, 16 Oct 2023 11:19:08 +0200
Subject: [PATCH] feat(trading): adjust layout for funding payments (#5034)

---
 apps/trading/client-pages/market/trade-grid.tsx    | 14 ++++++++++----
 .../funding-payments-container.tsx                 |  7 ++++++-
 .../src/lib/FundingPayments.graphql                |  8 ++++++--
 .../src/lib/__generated__/FundingPayments.ts       |  6 ++++--
 .../src/lib/funding-payments-manager.tsx           |  4 +++-
 5 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/apps/trading/client-pages/market/trade-grid.tsx b/apps/trading/client-pages/market/trade-grid.tsx
index 07ea23adf..ea180273a 100644
--- a/apps/trading/client-pages/market/trade-grid.tsx
+++ b/apps/trading/client-pages/market/trade-grid.tsx
@@ -73,10 +73,19 @@ const MainGrid = memo(
                   {market &&
                   market.tradableInstrument.instrument.product.__typename ===
                     'Perpetual' ? (
-                    <Tab id="funding" name={t('Funding')}>
+                    <Tab id="funding-history" name={t('Funding history')}>
                       <TradingViews.funding.component marketId={marketId} />
                     </Tab>
                   ) : null}
+                  {market &&
+                  market.tradableInstrument.instrument.product.__typename ===
+                    'Perpetual' ? (
+                    <Tab id="funding-payments" name={t('Funding payments')}>
+                      <TradingViews.fundingPayments.component
+                        marketId={marketId}
+                      />
+                    </Tab>
+                  ) : null}
                 </Tabs>
               </TradeGridChild>
             </ResizableGridPanel>
@@ -139,9 +148,6 @@ const MainGrid = memo(
               <Tab id="fills" name={t('Fills')}>
                 <TradingViews.fills.component />
               </Tab>
-              <Tab id="funding-payments" name={t('Funding payments')}>
-                <TradingViews.fundingPayments.component />
-              </Tab>
               <Tab
                 id="accounts"
                 name={t('Collateral')}
diff --git a/apps/trading/components/funding-payments-container/funding-payments-container.tsx b/apps/trading/components/funding-payments-container/funding-payments-container.tsx
index aca80c192..bd4a8ca68 100644
--- a/apps/trading/components/funding-payments-container/funding-payments-container.tsx
+++ b/apps/trading/components/funding-payments-container/funding-payments-container.tsx
@@ -9,7 +9,11 @@ import type { DataGridSlice } from '../../stores/datagrid-store-slice';
 import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 
-export const FundingPaymentsContainer = () => {
+export const FundingPaymentsContainer = ({
+  marketId,
+}: {
+  marketId?: string;
+}) => {
   const onMarketClick = useMarketClickHandler(true);
   const { pubKey } = useVegaWallet();
 
@@ -33,6 +37,7 @@ export const FundingPaymentsContainer = () => {
   return (
     <FundingPaymentsManager
       partyId={pubKey}
+      marketId={marketId}
       onMarketClick={onMarketClick}
       gridProps={gridStoreCallbacks}
     />
diff --git a/libs/funding-payments/src/lib/FundingPayments.graphql b/libs/funding-payments/src/lib/FundingPayments.graphql
index a2e91bbaf..a6a6dfb11 100644
--- a/libs/funding-payments/src/lib/FundingPayments.graphql
+++ b/libs/funding-payments/src/lib/FundingPayments.graphql
@@ -6,8 +6,12 @@ fragment FundingPaymentFields on FundingPayment {
   timestamp
 }
 
-query FundingPayments($partyId: ID!, $pagination: Pagination) {
-  fundingPayments(partyId: $partyId, pagination: $pagination) {
+query FundingPayments($partyId: ID!, $pagination: Pagination, $marketId: ID) {
+  fundingPayments(
+    partyId: $partyId
+    pagination: $pagination
+    marketId: $marketId
+  ) {
     edges {
       node {
         ...FundingPaymentFields
diff --git a/libs/funding-payments/src/lib/__generated__/FundingPayments.ts b/libs/funding-payments/src/lib/__generated__/FundingPayments.ts
index 3c31acf32..611608324 100644
--- a/libs/funding-payments/src/lib/__generated__/FundingPayments.ts
+++ b/libs/funding-payments/src/lib/__generated__/FundingPayments.ts
@@ -8,6 +8,7 @@ export type FundingPaymentFieldsFragment = { __typename?: 'FundingPayment', mark
 export type FundingPaymentsQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
   pagination?: Types.InputMaybe<Types.Pagination>;
+  marketId?: Types.InputMaybe<Types.Scalars['ID']>;
 }>;
 
 
@@ -23,8 +24,8 @@ export const FundingPaymentFieldsFragmentDoc = gql`
 }
     `;
 export const FundingPaymentsDocument = gql`
-    query FundingPayments($partyId: ID!, $pagination: Pagination) {
-  fundingPayments(partyId: $partyId, pagination: $pagination) {
+    query FundingPayments($partyId: ID!, $pagination: Pagination, $marketId: ID) {
+  fundingPayments(partyId: $partyId, pagination: $pagination, marketId: $marketId) {
     edges {
       node {
         ...FundingPaymentFields
@@ -55,6 +56,7 @@ export const FundingPaymentsDocument = gql`
  *   variables: {
  *      partyId: // value for 'partyId'
  *      pagination: // value for 'pagination'
+ *      marketId: // value for 'marketId'
  *   },
  * });
  */
diff --git a/libs/funding-payments/src/lib/funding-payments-manager.tsx b/libs/funding-payments/src/lib/funding-payments-manager.tsx
index a5f20e986..3dcfd396f 100644
--- a/libs/funding-payments/src/lib/funding-payments-manager.tsx
+++ b/libs/funding-payments/src/lib/funding-payments-manager.tsx
@@ -8,12 +8,14 @@ import { fundingPaymentsWithMarketProvider } from './funding-payments-data-provi
 
 interface FundingPaymentsManagerProps {
   partyId: string;
+  marketId?: string;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
   gridProps: ReturnType<typeof useDataGridEvents>;
 }
 
 export const FundingPaymentsManager = ({
   partyId,
+  marketId,
   onMarketClick,
   gridProps,
 }: FundingPaymentsManagerProps) => {
@@ -27,7 +29,7 @@ export const FundingPaymentsManager = ({
       }
       return false;
     },
-    variables: { partyId },
+    variables: { partyId, marketId },
   });
 
   return (