feat(trading): adjust layout for funding payments (#5034)

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')}

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}
     />

libs/funding-payments/src/lib/FundingPayments.graphql

@@ -6,8 +6,12 @@ fragment FundingPaymentFields on FundingPayment {
   timestamp
 }
 
-query FundingPayments($partyId: ID!, $pagination: Pagination) {
+query FundingPayments($partyId: ID!, $pagination: Pagination, $marketId: ID) {
-  fundingPayments(partyId: $partyId, pagination: $pagination) {
+  fundingPayments(
+    partyId: $partyId
+    pagination: $pagination
+    marketId: $marketId
+  ) {
     edges {
       node {
         ...FundingPaymentFields

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) {
+    query FundingPayments($partyId: ID!, $pagination: Pagination, $marketId: ID) {
-  fundingPayments(partyId: $partyId, pagination: $pagination) {
+  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'
  *   },
  * });
  */

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 (