From fee5f862a7bf8ee4f0b42ac1ad2d9453c2cff210 Mon Sep 17 00:00:00 2001 From: Maciek Date: Fri, 20 Oct 2023 15:08:19 +0200 Subject: [PATCH] chore(trading): remove account history tab (#5098) --- .../portfolio/AccountHistory.graphql | 39 -- .../portfolio/__generated__/AccountHistory.ts | 117 ------ .../portfolio/account-history-container.tsx | 349 ------------------ .../client-pages/portfolio/portfolio.tsx | 6 +- .../funding-container/funding-container.tsx | 34 +- 5 files changed, 31 insertions(+), 514 deletions(-) delete mode 100644 apps/trading/client-pages/portfolio/AccountHistory.graphql delete mode 100644 apps/trading/client-pages/portfolio/__generated__/AccountHistory.ts delete mode 100644 apps/trading/client-pages/portfolio/account-history-container.tsx diff --git a/apps/trading/client-pages/portfolio/AccountHistory.graphql b/apps/trading/client-pages/portfolio/AccountHistory.graphql deleted file mode 100644 index 1af923e50..000000000 --- a/apps/trading/client-pages/portfolio/AccountHistory.graphql +++ /dev/null @@ -1,39 +0,0 @@ -query AccountHistory( - $partyId: ID! - $assetId: ID! - $accountTypes: [AccountType!] - $dateRange: DateRange - $marketIds: [ID!] -) { - balanceChanges( - filter: { - partyIds: [$partyId] - accountTypes: $accountTypes - assetId: $assetId - marketIds: $marketIds - } - dateRange: $dateRange - ) { - edges { - node { - timestamp - partyId - balance - marketId - assetId - accountType - } - } - } -} - -query AccountsWithBalance($partyId: ID!, $dateRange: DateRange) { - balanceChanges(filter: { partyIds: [$partyId] }, dateRange: $dateRange) { - edges { - node { - assetId - accountType - } - } - } -} diff --git a/apps/trading/client-pages/portfolio/__generated__/AccountHistory.ts b/apps/trading/client-pages/portfolio/__generated__/AccountHistory.ts deleted file mode 100644 index 4c91baf59..000000000 --- a/apps/trading/client-pages/portfolio/__generated__/AccountHistory.ts +++ /dev/null @@ -1,117 +0,0 @@ -import * as Types from '@vegaprotocol/types'; - -import { gql } from '@apollo/client'; -import * as Apollo from '@apollo/client'; -const defaultOptions = {} as const; -export type AccountHistoryQueryVariables = Types.Exact<{ - partyId: Types.Scalars['ID']; - assetId: Types.Scalars['ID']; - accountTypes?: Types.InputMaybe | Types.AccountType>; - dateRange?: Types.InputMaybe; - marketIds?: Types.InputMaybe | Types.Scalars['ID']>; -}>; - - -export type AccountHistoryQuery = { __typename?: 'Query', balanceChanges: { __typename?: 'AggregatedBalanceConnection', edges: Array<{ __typename?: 'AggregatedBalanceEdge', node: { __typename?: 'AggregatedBalance', timestamp: any, partyId?: string | null, balance: string, marketId?: string | null, assetId?: string | null, accountType?: Types.AccountType | null } } | null> } }; - -export type AccountsWithBalanceQueryVariables = Types.Exact<{ - partyId: Types.Scalars['ID']; - dateRange?: Types.InputMaybe; -}>; - - -export type AccountsWithBalanceQuery = { __typename?: 'Query', balanceChanges: { __typename?: 'AggregatedBalanceConnection', edges: Array<{ __typename?: 'AggregatedBalanceEdge', node: { __typename?: 'AggregatedBalance', assetId?: string | null, accountType?: Types.AccountType | null } } | null> } }; - - -export const AccountHistoryDocument = gql` - query AccountHistory($partyId: ID!, $assetId: ID!, $accountTypes: [AccountType!], $dateRange: DateRange, $marketIds: [ID!]) { - balanceChanges( - filter: {partyIds: [$partyId], accountTypes: $accountTypes, assetId: $assetId, marketIds: $marketIds} - dateRange: $dateRange - ) { - edges { - node { - timestamp - partyId - balance - marketId - assetId - accountType - } - } - } -} - `; - -/** - * __useAccountHistoryQuery__ - * - * To run a query within a React component, call `useAccountHistoryQuery` and pass it any options that fit your needs. - * When your component renders, `useAccountHistoryQuery` 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 } = useAccountHistoryQuery({ - * variables: { - * partyId: // value for 'partyId' - * assetId: // value for 'assetId' - * accountTypes: // value for 'accountTypes' - * dateRange: // value for 'dateRange' - * marketIds: // value for 'marketIds' - * }, - * }); - */ -export function useAccountHistoryQuery(baseOptions: Apollo.QueryHookOptions) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useQuery(AccountHistoryDocument, options); - } -export function useAccountHistoryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useLazyQuery(AccountHistoryDocument, options); - } -export type AccountHistoryQueryHookResult = ReturnType; -export type AccountHistoryLazyQueryHookResult = ReturnType; -export type AccountHistoryQueryResult = Apollo.QueryResult; -export const AccountsWithBalanceDocument = gql` - query AccountsWithBalance($partyId: ID!, $dateRange: DateRange) { - balanceChanges(filter: {partyIds: [$partyId]}, dateRange: $dateRange) { - edges { - node { - assetId - accountType - } - } - } -} - `; - -/** - * __useAccountsWithBalanceQuery__ - * - * To run a query within a React component, call `useAccountsWithBalanceQuery` and pass it any options that fit your needs. - * When your component renders, `useAccountsWithBalanceQuery` 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 } = useAccountsWithBalanceQuery({ - * variables: { - * partyId: // value for 'partyId' - * dateRange: // value for 'dateRange' - * }, - * }); - */ -export function useAccountsWithBalanceQuery(baseOptions: Apollo.QueryHookOptions) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useQuery(AccountsWithBalanceDocument, options); - } -export function useAccountsWithBalanceLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { - const options = {...defaultOptions, ...baseOptions} - return Apollo.useLazyQuery(AccountsWithBalanceDocument, options); - } -export type AccountsWithBalanceQueryHookResult = ReturnType; -export type AccountsWithBalanceLazyQueryHookResult = ReturnType; -export type AccountsWithBalanceQueryResult = Apollo.QueryResult; \ No newline at end of file diff --git a/apps/trading/client-pages/portfolio/account-history-container.tsx b/apps/trading/client-pages/portfolio/account-history-container.tsx deleted file mode 100644 index a9df4b50a..000000000 --- a/apps/trading/client-pages/portfolio/account-history-container.tsx +++ /dev/null @@ -1,349 +0,0 @@ -import { addDecimal, fromNanoSeconds } from '@vegaprotocol/utils'; -import { t } from '@vegaprotocol/i18n'; -import { useVegaWallet } from '@vegaprotocol/wallet'; -import compact from 'lodash/compact'; -import uniqBy from 'lodash/uniqBy'; -import type { ChangeEvent } from 'react'; -import { useCallback, useMemo, useState } from 'react'; -import type { AccountHistoryQuery } from './__generated__/AccountHistory'; -import { useAccountHistoryQuery } from './__generated__/AccountHistory'; -import * as Schema from '@vegaprotocol/types'; -import type { AssetFieldsFragment } from '@vegaprotocol/assets'; -import { useAssetsDataProvider } from '@vegaprotocol/assets'; -import { - AsyncRenderer, - Splash, - Toggle, - TradingButton, - TradingDropdown, - TradingDropdownContent, - TradingDropdownItem, - TradingDropdownTrigger, -} from '@vegaprotocol/ui-toolkit'; -import { AccountTypeMapping } from '@vegaprotocol/types'; -import { PriceChart } from 'pennant'; -import 'pennant/dist/style.css'; -import type { Account } from '@vegaprotocol/accounts'; -import { accountsDataProvider } from '@vegaprotocol/accounts'; -import { - useLocalStorageSnapshot, - useThemeSwitcher, -} from '@vegaprotocol/react-helpers'; -import { useDataProvider } from '@vegaprotocol/data-provider'; -import { getAsset, type Market } from '@vegaprotocol/markets'; - -export const DateRange = { - RANGE_1D: '1D', - RANGE_7D: '7D', - RANGE_1M: '1M', - RANGE_3M: '3M', - RANGE_1Y: '1Y', - RANGE_YTD: 'YTD', - RANGE_ALL: 'All', -}; - -const dateRangeToggleItems = Object.entries(DateRange).map(([_, value]) => ({ - label: t(value), - value: value, -})); - -export const calculateStartDate = (range: string): string | undefined => { - const now = new Date(); - switch (range) { - case DateRange.RANGE_1D: - return new Date(now.setDate(now.getDate() - 1)).toISOString(); - case DateRange.RANGE_7D: - return new Date(now.setDate(now.getDate() - 7)).toISOString(); - case DateRange.RANGE_1M: - return new Date(now.setMonth(now.getMonth() - 1)).toISOString(); - case DateRange.RANGE_3M: - return new Date(now.setMonth(now.getMonth() - 3)).toISOString(); - case DateRange.RANGE_1Y: - return new Date(now.setFullYear(now.getFullYear() - 1)).toISOString(); - case DateRange.RANGE_YTD: - return new Date(now.setMonth(0)).toISOString(); - default: - return undefined; - } -}; - -export const AccountHistoryContainer = () => { - const { pubKey } = useVegaWallet(); - const { data: assets } = useAssetsDataProvider(); - - if (!pubKey) { - return {t('Please connect Vega wallet')}; - } - - return ( - - {assets && } - - ); -}; - -const AccountHistoryManager = ({ - pubKey, - assetData, -}: { - pubKey: string; - assetData: AssetFieldsFragment[]; -}) => { - const [accountType, setAccountType] = useState( - Schema.AccountType.ACCOUNT_TYPE_GENERAL - ); - - const variablesForOneTimeQuery = useMemo( - () => ({ - partyId: pubKey, - }), - [pubKey] - ); - - const { data: accounts } = useDataProvider({ - dataProvider: accountsDataProvider, - variables: variablesForOneTimeQuery, - skip: !pubKey, - }); - - const assetIds = useMemo( - () => accounts?.map((e) => e?.asset?.id) || [], - [accounts] - ); - - const assets = useMemo( - () => - assetData - .filter((a) => assetIds.includes(a.id)) - .sort((a, b) => a.name.localeCompare(b.name)), - [assetData, assetIds] - ); - const [assetId, setAssetId] = useLocalStorageSnapshot( - 'account-history-active-asset-id' - ); - - const asset = useMemo( - () => assets.find((a) => a.id === assetId) || assets[0], - [assetId, assets] - ); - - const [range, setRange] = useState( - DateRange.RANGE_1M - ); - const [market, setMarket] = useState(null); - - const marketFilterCb = useCallback( - (item: Market) => { - const itemAsset = getAsset(item); - return !asset?.id || itemAsset?.id === asset?.id; - }, - [asset?.id] - ); - const markets = useMemo(() => { - const arr = - accounts - ?.filter((item: Account) => Boolean(item && item.market)) - .map((item) => item.market as Market) ?? null; - return arr - ? uniqBy(arr.filter(marketFilterCb), 'id').sort((a, b) => - a.tradableInstrument.instrument.code.localeCompare( - b.tradableInstrument.instrument.code - ) - ) - : null; - }, [accounts, marketFilterCb]); - - const resolveMarket = useCallback( - (m: Market) => { - setMarket(m); - const itemAsset = getAsset(m); - const newAssetId = itemAsset?.id; - const newAsset = assets.find((item) => item.id === newAssetId); - if ((!asset || (assets && newAssetId !== asset.id)) && newAsset) { - setAssetId(newAsset.id); - } - }, - [asset, assets, setAssetId] - ); - - const variables = useMemo( - () => ({ - partyId: pubKey, - assetId: asset?.id || '', - accountTypes: accountType ? [accountType] : undefined, - dateRange: - range === 'All' ? undefined : { start: calculateStartDate(range) }, - marketIds: market?.id ? [market.id] : undefined, - }), - [pubKey, asset, accountType, range, market?.id] - ); - - const { data } = useAccountHistoryQuery({ - variables, - skip: !asset || !pubKey, - }); - - return ( -
-
-
- - - {accountType - ? `${ - AccountTypeMapping[ - accountType as keyof typeof Schema.AccountType - ] - } Account` - : t('Select account type')} - - - } - > - - {[ - Schema.AccountType.ACCOUNT_TYPE_GENERAL, - Schema.AccountType.ACCOUNT_TYPE_BOND, - Schema.AccountType.ACCOUNT_TYPE_MARGIN, - ].map((type) => ( - { - setAccountType(type as Schema.AccountType); - - // if not a margin account clear any market selection - if (type !== Schema.AccountType.ACCOUNT_TYPE_MARGIN) { - setMarket(null); - } - }} - > - {AccountTypeMapping[type as keyof typeof Schema.AccountType]} - - ))} - - - - - - {asset ? asset.symbol : t('Select asset')} - - - } - > - - {assets.map((a) => ( - { - setAssetId(a.id); - - // if the selected asset is different to the selected market clear the market - if (market && a.id !== getAsset(market).id) { - setMarket(null); - } - }} - > - {a.symbol} - - ))} - - - - - {market - ? market.tradableInstrument.instrument.code - : t('Select market')} - - - } - > - - {market && ( - setMarket(null)}> - {t('All markets')} - - )} - {markets?.map((m) => ( - resolveMarket(m)} - > - {m.tradableInstrument.instrument.code} - - ))} - - -
-
- ) => - setRange(e.target.value as keyof typeof DateRange) - } - size="sm" - /> -
-
-
- {asset && ( -
- -
- )} -
-
- ); -}; - -export const AccountHistoryChart = ({ - data, - accountType, - asset, -}: { - data: AccountHistoryQuery | undefined; - accountType: Schema.AccountType; - asset: AssetFieldsFragment; -}) => { - const { theme } = useThemeSwitcher(); - const values: { cols: [string, string]; rows: [Date, number][] } | null = - useMemo(() => { - if (!data?.balanceChanges.edges.length) { - return null; - } - - const valuesData = compact(data.balanceChanges.edges) - .reduce((acc, edge) => { - if (edge.node.accountType === accountType) { - acc?.push({ - datetime: fromNanoSeconds(edge.node.timestamp), - balance: Number(addDecimal(edge.node.balance, asset.decimals)), - }); - } - return acc; - }, [] as { datetime: Date; balance: number }[]) - .reverse(); - return { - cols: ['Date', `${asset.symbol} account balance`], - rows: compact(valuesData).map((d) => [d.datetime, d.balance]), - }; - }, [accountType, asset.decimals, asset.symbol, data?.balanceChanges.edges]); - - if (!data || !values?.rows.length) { - return {t('No account history data')}; - } - - return ; -}; diff --git a/apps/trading/client-pages/portfolio/portfolio.tsx b/apps/trading/client-pages/portfolio/portfolio.tsx index d7d9f883d..31bc80def 100644 --- a/apps/trading/client-pages/portfolio/portfolio.tsx +++ b/apps/trading/client-pages/portfolio/portfolio.tsx @@ -15,7 +15,6 @@ import { PositionsMenu } from '../../components/positions-menu'; import { WithdrawalsContainer } from '../../components/withdrawals-container'; import { OrdersContainer } from '../../components/orders-container'; import { LedgerContainer } from '../../components/ledger-container'; -import { AccountHistoryContainer } from './account-history-container'; import { ResizableGrid, ResizableGridPanel, @@ -66,10 +65,7 @@ export const Portfolio = () => { - - - - + { + const now = new Date(); + switch (range) { + case DateRange.RANGE_1D: + return new Date(now.setDate(now.getDate() - 1)).toISOString(); + case DateRange.RANGE_7D: + return new Date(now.setDate(now.getDate() - 7)).toISOString(); + case DateRange.RANGE_1M: + return new Date(now.setMonth(now.getMonth() - 1)).toISOString(); + case DateRange.RANGE_3M: + return new Date(now.setMonth(now.getMonth() - 3)).toISOString(); + case DateRange.RANGE_1Y: + return new Date(now.setFullYear(now.getFullYear() - 1)).toISOString(); + case DateRange.RANGE_YTD: + return new Date(now.setMonth(0)).toISOString(); + default: + return undefined; + } +}; + +const DateRange = { + RANGE_1D: '1D', + RANGE_7D: '7D', + RANGE_1M: '1M', + RANGE_3M: '3M', + RANGE_1Y: '1Y', + RANGE_YTD: 'YTD', + RANGE_ALL: 'All', +}; export const FundingContainer = ({ marketId }: { marketId: string }) => { const { theme } = useThemeSwitcher();