feat: add funding tab

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

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import type { PinnedAsset } from '@vegaprotocol/accounts';
 import { t } from '@vegaprotocol/i18n';
-import { OracleBanner } from '@vegaprotocol/markets';
+import { OracleBanner, useMarket } from '@vegaprotocol/markets';
 import type { Market } from '@vegaprotocol/markets';
 import { Filter } from '@vegaprotocol/orders';
 import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
@@ -34,6 +34,7 @@ const MainGrid = memo(
     marketId: string;
     pinnedAsset?: PinnedAsset;
   }) => {
+    const { data: market } = useMarket(marketId);
     const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'top' });
     const [sizesMiddle, handleOnMiddleLayoutChange] = usePaneLayout({
       id: 'middle-1',
@@ -67,6 +68,13 @@ const MainGrid = memo(
                   <Tab id="liquidity" name={t('Liquidity')}>
                     <TradingViews.liquidity.component marketId={marketId} />
                   </Tab>
+                  {market &&
+                  market.tradableInstrument.instrument.product.__typename ===
+                    'Perpetual' ? (
+                    <Tab id="funding" name={t('Funding')}>
+                      <TradingViews.funding.component marketId={marketId} />
+                    </Tab>
+                  ) : null}
                 </Tabs>
               </TradeGridChild>
             </ResizableGridPanel>

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

@@ -13,6 +13,7 @@ import { FillsContainer } from '../../components/fills-container';
 import { PositionsContainer } from '../../components/positions-container';
 import { AccountsContainer } from '../../components/accounts-container';
 import { LiquidityContainer } from '../../components/liquidity-container';
+import { FundingContainer } from '../../components/funding-container';
 import type { OrderContainerProps } from '../../components/orders-container';
 import { OrdersContainer } from '../../components/orders-container';
 import { StopOrdersContainer } from '../../components/stop-orders-container';
@@ -50,6 +51,10 @@ export const TradingViews = {
     label: 'Liquidity',
     component: requiresMarket(LiquidityContainer),
   },
+  funding: {
+    label: 'Funding',
+    component: requiresMarket(FundingContainer),
+  },
   orderbook: {
     label: 'Orderbook',
     component: requiresMarket(OrderbookContainer),

apps/trading/components/funding-container/funding-container.tsx

@@ -0,0 +1,9 @@
+import { useFundingPeriodsQuery } from '@vegaprotocol/markets';
+
+export const FundingContainer = ({ marketId }: { marketId: string }) => {
+  const { data } = useFundingPeriodsQuery({
+    variables: { marketId: marketId || '' },
+    skip: !marketId,
+  });
+  return <pre>{JSON.stringify(data)}</pre>;
+};

apps/trading/components/funding-container/index.ts

@@ -0,0 +1 @@
+export * from './funding-container';

libs/markets/src/lib/__generated__/funding-periods.ts

@@ -0,0 +1,110 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type FundingPeriodsQueryVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+}>;
+
+
+export type FundingPeriodsQuery = { __typename?: 'Query', fundingPeriods: { __typename?: 'FundingPeriodConnection', edges: Array<{ __typename?: 'FundingPeriodEdge', node: { __typename?: 'FundingPeriod', marketId: string, seq: number, startTime: any, endTime?: any | null, fundingPayment?: string | null, fundingRate?: string | null, externalTwap?: string | null, internalTwap?: string | null } }> } };
+
+export type FundingPeriodDataPointsQueryVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+}>;
+
+
+export type FundingPeriodDataPointsQuery = { __typename?: 'Query', fundingPeriodDataPoints: { __typename?: 'FundingPeriodDataPointConnection', edges: Array<{ __typename?: 'FundingPeriodDataPointEdge', node: { __typename?: 'FundingPeriodDataPoint', marketId: string, seq: number, dataPointSource?: Types.FundingPeriodDataPointSource | null, price: string, twap?: string | null, timestamp: any } }> } };
+
+
+export const FundingPeriodsDocument = gql`
+    query FundingPeriods($marketId: ID!) {
+  fundingPeriods(marketId: $marketId) {
+    edges {
+      node {
+        marketId
+        seq
+        startTime
+        endTime
+        fundingPayment
+        fundingRate
+        externalTwap
+        internalTwap
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useFundingPeriodsQuery__
+ *
+ * To run a query within a React component, call `useFundingPeriodsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useFundingPeriodsQuery` 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 } = useFundingPeriodsQuery({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useFundingPeriodsQuery(baseOptions: Apollo.QueryHookOptions<FundingPeriodsQuery, FundingPeriodsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<FundingPeriodsQuery, FundingPeriodsQueryVariables>(FundingPeriodsDocument, options);
+      }
+export function useFundingPeriodsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<FundingPeriodsQuery, FundingPeriodsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<FundingPeriodsQuery, FundingPeriodsQueryVariables>(FundingPeriodsDocument, options);
+        }
+export type FundingPeriodsQueryHookResult = ReturnType<typeof useFundingPeriodsQuery>;
+export type FundingPeriodsLazyQueryHookResult = ReturnType<typeof useFundingPeriodsLazyQuery>;
+export type FundingPeriodsQueryResult = Apollo.QueryResult<FundingPeriodsQuery, FundingPeriodsQueryVariables>;
+export const FundingPeriodDataPointsDocument = gql`
+    query FundingPeriodDataPoints($marketId: ID!) {
+  fundingPeriodDataPoints(marketId: $marketId) {
+    edges {
+      node {
+        marketId
+        seq
+        dataPointSource
+        price
+        twap
+        timestamp
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useFundingPeriodDataPointsQuery__
+ *
+ * To run a query within a React component, call `useFundingPeriodDataPointsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useFundingPeriodDataPointsQuery` 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 } = useFundingPeriodDataPointsQuery({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useFundingPeriodDataPointsQuery(baseOptions: Apollo.QueryHookOptions<FundingPeriodDataPointsQuery, FundingPeriodDataPointsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<FundingPeriodDataPointsQuery, FundingPeriodDataPointsQueryVariables>(FundingPeriodDataPointsDocument, options);
+      }
+export function useFundingPeriodDataPointsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<FundingPeriodDataPointsQuery, FundingPeriodDataPointsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<FundingPeriodDataPointsQuery, FundingPeriodDataPointsQueryVariables>(FundingPeriodDataPointsDocument, options);
+        }
+export type FundingPeriodDataPointsQueryHookResult = ReturnType<typeof useFundingPeriodDataPointsQuery>;
+export type FundingPeriodDataPointsLazyQueryHookResult = ReturnType<typeof useFundingPeriodDataPointsLazyQuery>;
+export type FundingPeriodDataPointsQueryResult = Apollo.QueryResult<FundingPeriodDataPointsQuery, FundingPeriodDataPointsQueryVariables>;

libs/markets/src/lib/__generated__/index.ts

@@ -1,3 +1,4 @@
+export * from './funding-periods';
 export * from './market-candles';
 export * from './market-data';
 export * from './markets';

libs/markets/src/lib/funding-periods.graphql

@@ -0,0 +1,31 @@
+query FundingPeriods($marketId: ID!) {
+  fundingPeriods(marketId: $marketId) {
+    edges {
+      node {
+        marketId
+        seq
+        startTime
+        endTime
+        fundingPayment
+        fundingRate
+        externalTwap
+        internalTwap
+      }
+    }
+  }
+}
+
+query FundingPeriodDataPoints($marketId: ID!) {
+  fundingPeriodDataPoints(marketId: $marketId) {
+    edges {
+      node {
+        marketId
+        seq
+        dataPointSource
+        price
+        twap
+        timestamp
+      }
+    }
+  }
+}