From 699ddbcee56ce0d440c448421981dbbbe0471eab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= Date: Fri, 1 Sep 2023 13:53:10 +0200 Subject: [PATCH] feat: add funding tab --- .../client-pages/market/trade-grid.tsx | 10 +- .../client-pages/market/trade-views.tsx | 5 + .../funding-container/funding-container.tsx | 9 ++ .../components/funding-container/index.ts | 1 + .../src/lib/__generated__/funding-periods.ts | 110 ++++++++++++++++++ libs/markets/src/lib/__generated__/index.ts | 1 + libs/markets/src/lib/funding-periods.graphql | 31 +++++ 7 files changed, 166 insertions(+), 1 deletion(-) create mode 100644 apps/trading/components/funding-container/funding-container.tsx create mode 100644 apps/trading/components/funding-container/index.ts create mode 100644 libs/markets/src/lib/__generated__/funding-periods.ts create mode 100644 libs/markets/src/lib/funding-periods.graphql diff --git a/apps/trading/client-pages/market/trade-grid.tsx b/apps/trading/client-pages/market/trade-grid.tsx index ab64f77b1..1294947a3 100644 --- a/apps/trading/client-pages/market/trade-grid.tsx +++ b/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( + {market && + market.tradableInstrument.instrument.product.__typename === + 'Perpetual' ? ( + + + + ) : null} diff --git a/apps/trading/client-pages/market/trade-views.tsx b/apps/trading/client-pages/market/trade-views.tsx index a9dff5eb2..0fbe8faf8 100644 --- a/apps/trading/client-pages/market/trade-views.tsx +++ b/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), diff --git a/apps/trading/components/funding-container/funding-container.tsx b/apps/trading/components/funding-container/funding-container.tsx new file mode 100644 index 000000000..c2d540578 --- /dev/null +++ b/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 
{JSON.stringify(data)}
; +}; diff --git a/apps/trading/components/funding-container/index.ts b/apps/trading/components/funding-container/index.ts new file mode 100644 index 000000000..4d5836408 --- /dev/null +++ b/apps/trading/components/funding-container/index.ts @@ -0,0 +1 @@ +export * from './funding-container'; diff --git a/libs/markets/src/lib/__generated__/funding-periods.ts b/libs/markets/src/lib/__generated__/funding-periods.ts new file mode 100644 index 000000000..79ff962a4 --- /dev/null +++ b/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) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(FundingPeriodsDocument, options); + } +export function useFundingPeriodsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(FundingPeriodsDocument, options); + } +export type FundingPeriodsQueryHookResult = ReturnType; +export type FundingPeriodsLazyQueryHookResult = ReturnType; +export type FundingPeriodsQueryResult = Apollo.QueryResult; +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) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(FundingPeriodDataPointsDocument, options); + } +export function useFundingPeriodDataPointsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(FundingPeriodDataPointsDocument, options); + } +export type FundingPeriodDataPointsQueryHookResult = ReturnType; +export type FundingPeriodDataPointsLazyQueryHookResult = ReturnType; +export type FundingPeriodDataPointsQueryResult = Apollo.QueryResult; \ No newline at end of file diff --git a/libs/markets/src/lib/__generated__/index.ts b/libs/markets/src/lib/__generated__/index.ts index 64afea3f8..b31cc4c84 100644 --- a/libs/markets/src/lib/__generated__/index.ts +++ b/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'; diff --git a/libs/markets/src/lib/funding-periods.graphql b/libs/markets/src/lib/funding-periods.graphql new file mode 100644 index 000000000..52f37cfa7 --- /dev/null +++ b/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 + } + } + } +}