V2 Beta Release #12

components/Tooltip/StyledTooltip.tsx

@@ -7,6 +7,7 @@ interface ToolTipProps {
 	content?: any;
 	children?: React.ReactNode;
 	width?: string;
+	height?: string;
 	preset?: string;
 	top?: string;
 	bottom?: string;

components/Tooltip/TooltipStyles.tsx

@@ -5,15 +5,17 @@ import styled from 'styled-components';
 interface ToolTipStyleProps {
 	preset?: string;
 	width?: string;
+	height?: string;
 	top?: string;
 	bottom?: string;
 	left?: string;
 	right?: string;
 }
 
 export const Tooltip = styled.div<ToolTipStyleProps>`
-		height: 56px;
-		width: ${(props) => props.width || '189px'};
+		height: ${(props) => props.height || '56px'};
+		width: max-content;
+		max-width: ${(props) => props.width || '472.5px'};
 		background: linear-gradient(180deg, #1E1D1D 0%, #161515 100%);
 		border: 1px solid rgba(255, 255, 255, 0.1);
 		box-sizing: border-box;
@@ -56,6 +58,7 @@ export const Tooltip = styled.div<ToolTipStyleProps>`
 				transform: translate(-25%, 125%);
 			`}
 
+
 		${(props) =>
 			props.preset === 'left' &&
 			`

queries/synths/useBaseFeeRateQuery.ts

@@ -6,7 +6,6 @@ import { ethers } from 'ethers';
 import { CurrencyKey } from 'constants/currency';
 import { appReadyState } from 'store/app';
 import QUERY_KEYS from 'constants/queryKeys';
-import Wei from '@synthetixio/wei';
 
 const useBaseFeeRateQuery = (
 	sourceCurrencyKey: CurrencyKey | null,
@@ -20,18 +19,14 @@ const useBaseFeeRateQuery = (
 		async () => {
 			const { SystemSettings } = synthetixjs!.contracts;
 
-			const [sourceCurrencyFeeRate, destinationCurrencyFeeRate] = (await Promise.all([
-				new Wei(
-					SystemSettings.exchangeFeeRate(
-						ethers.utils.formatBytes32String(sourceCurrencyKey as string)
-					)
+			const [sourceCurrencyFeeRate, destinationCurrencyFeeRate] = await Promise.all([
+				SystemSettings.exchangeFeeRate(
+					ethers.utils.formatBytes32String(sourceCurrencyKey as string)
 				),
-				new Wei(
-					SystemSettings.exchangeFeeRate(
-						ethers.utils.formatBytes32String(destinationCurrencyKey as string)
-					)
+				SystemSettings.exchangeFeeRate(
+					ethers.utils.formatBytes32String(destinationCurrencyKey as string)
 				),
-			])) as [Wei, Wei];
+			]);
 
 			return sourceCurrencyFeeRate && destinationCurrencyFeeRate
 				? sourceCurrencyFeeRate.add(destinationCurrencyFeeRate)

sections/dashboard/Overview/Overview.tsx

@@ -8,7 +8,16 @@ import useGetFuturesMarkets from 'queries/futures/useGetFuturesMarkets';
 import useGetFuturesPositionForAccount from 'queries/futures/useGetFuturesPositionForAccount';
 import FuturesPositionsTable from '../FuturesPositionsTable';
 import FuturesMarketsTable from '../FuturesMarketsTable';
-import useExchangeRatesQuery from 'queries/rates/useExchangeRatesQuery';
+import { useRecoilValue } from 'recoil';
+import { walletAddressState } from 'store/wallet';
+import useSynthetixQueries from '@synthetixio/queries';
+import SynthBalancesTable from '../SynthBalancesTable';
+import { wei } from '@synthetixio/wei';
+import { formatCurrency, zeroBN } from 'utils/formatters/number';
+import { Synths } from '@synthetixio/contracts-interface';
+import { getMarketKey } from 'utils/futures';
+import useGetCurrentPortfolioValue from 'queries/futures/useGetCurrentPortfolioValue';
+import Connector from 'containers/Connector';
 import SpotMarketsTable from '../SpotMarketsTable';
 
 enum PositionsTab {
@@ -25,51 +34,82 @@ enum MarketsTab {
 const Overview: FC = () => {
 	const { t } = useTranslation();
 
+	const { useExchangeRatesQuery, useSynthsBalancesQuery } = useSynthetixQueries();
+
 	const futuresMarketsQuery = useGetFuturesMarkets();
 	const futuresMarkets = futuresMarketsQuery?.data ?? [];
 
+	const { network } = Connector.useContainer();
+	const markets = futuresMarkets.map(({ asset }) => getMarketKey(asset, network.id));
+	const portfolioValueQuery = useGetCurrentPortfolioValue(markets);
+	const portfolioValue = portfolioValueQuery?.data ?? null;
+
 	const futuresPositionQuery = useGetFuturesPositionForAccount();
 	const futuresPositionHistory = futuresPositionQuery?.data ?? [];
 
 	const exchangeRatesQuery = useExchangeRatesQuery();
 	const exchangeRates = exchangeRatesQuery.isSuccess ? exchangeRatesQuery.data ?? null : null;
 
+	const walletAddress = useRecoilValue(walletAddressState);
+	const synthsBalancesQuery = useSynthsBalancesQuery(walletAddress);
+	const synthBalances =
+		synthsBalancesQuery.isSuccess && synthsBalancesQuery.data != null
+			? synthsBalancesQuery.data
+			: null;
+
 	const [activePositionsTab, setActivePositionsTab] = useState<PositionsTab>(PositionsTab.FUTURES);
 	const [activeMarketsTab, setActiveMarketsTab] = useState<MarketsTab>(MarketsTab.FUTURES);
 
+	const totalSpotBalancesValue = formatCurrency(
+		Synths.sUSD,
+		wei(synthBalances?.totalUSDBalance ?? zeroBN),
+		{
+			sign: '$',
+		}
+	);
+
+	const totalFuturesPortfolioValue = formatCurrency(Synths.sUSD, wei(portfolioValue ?? zeroBN), {
+		sign: '$',
+	});
+
 	const POSITIONS_TABS = useMemo(
 		() => [
 			{
 				name: PositionsTab.FUTURES,
 				label: t('dashboard.overview.positions-tabs.futures'),
 				badge: futuresPositionQuery?.data?.length,
 				active: activePositionsTab === PositionsTab.FUTURES,
+				detail: totalFuturesPortfolioValue,
 				onClick: () => {
 					setActivePositionsTab(PositionsTab.FUTURES);
 				},
 			},
 			{
-				name: PositionsTab.SHORTS,
-				label: t('dashboard.overview.positions-tabs.shorts'),
-				badge: 3,
-				disabled: true,
-				active: activePositionsTab === PositionsTab.SHORTS,
+				name: PositionsTab.SPOT,
+				label: t('dashboard.overview.positions-tabs.spot'),
+				active: activePositionsTab === PositionsTab.SPOT,
+				detail: totalSpotBalancesValue,
 				onClick: () => {
-					setActivePositionsTab(PositionsTab.SHORTS);
+					setActivePositionsTab(PositionsTab.SPOT);
 				},
 			},
 			{
-				name: PositionsTab.SPOT,
-				label: t('dashboard.overview.positions-tabs.spot'),
-				badge: 3,
+				name: PositionsTab.SHORTS,
+				label: t('dashboard.overview.positions-tabs.shorts'),
 				disabled: true,
-				active: activePositionsTab === PositionsTab.SPOT,
+				active: activePositionsTab === PositionsTab.SHORTS,
 				onClick: () => {
-					setActivePositionsTab(PositionsTab.SPOT);
+					setActivePositionsTab(PositionsTab.SHORTS);
 				},
 			},
 		],
-		[activePositionsTab, futuresPositionQuery?.data, t]
+		[
+			activePositionsTab,
+			futuresPositionQuery?.data?.length,
+			t,
+			totalFuturesPortfolioValue,
+			totalSpotBalancesValue,
+		]
 	);
 
 	const MARKETS_TABS = useMemo(
@@ -96,16 +136,21 @@ const Overview: FC = () => {
 
 	return (
 		<>
-			<PortfolioChart futuresMarkets={futuresMarkets} />
-
-			<TabButtonsContainer>
-				{POSITIONS_TABS.map(({ name, label, badge, active, disabled, onClick }) => (
+			<PortfolioChart
+				totalFuturesPortfolioValue={portfolioValue ?? zeroBN}
+				totalSpotBalanceValue={synthBalances?.totalUSDBalance ?? zeroBN}
+				totalShortsValue={zeroBN}
+			/>
+
+			<TabButtonsContainer hasDetail={true}>
+				{POSITIONS_TABS.map(({ name, label, badge, active, disabled, detail, onClick }) => (
 					<TabButton
 						key={name}
 						title={label}
 						badge={badge}
 						active={active}
 						disabled={disabled}
+						detail={detail}
 						onClick={onClick}
 					/>
 				))}
@@ -117,9 +162,14 @@ const Overview: FC = () => {
 				/>
 			</TabPanel>
 
-			<TabPanel name={PositionsTab.SHORTS} activeTab={activePositionsTab}></TabPanel>
+			<TabPanel name={PositionsTab.SPOT} activeTab={activePositionsTab}>
+				<SynthBalancesTable
+					synthBalances={synthBalances?.balances ?? []}
+					exchangeRates={exchangeRates}
+				/>
+			</TabPanel>
 
-			<TabPanel name={PositionsTab.SPOT} activeTab={activePositionsTab}></TabPanel>
+			<TabPanel name={PositionsTab.SHORTS} activeTab={activePositionsTab}></TabPanel>
 
 			<TabButtonsContainer>
 				{MARKETS_TABS.map(({ name, label, active, onClick }) => (
@@ -137,13 +187,13 @@ const Overview: FC = () => {
 	);
 };
 
-const TabButtonsContainer = styled.div`
+const TabButtonsContainer = styled.div<{ hasDetail?: boolean }>`
 	display: flex;
 	margin-top: 16px;
 	margin-bottom: 16px;
 
 	& > button {
-		height: 38px;
+		height: ${(props) => (props.hasDetail ? '48px' : '38px')};
 		font-size: 13px;
 
 		&:not(:last-of-type) {

sections/dashboard/PortfolioChart/PortfolioChart.tsx

@@ -1,30 +1,25 @@
 import { FC } from 'react';
 import styled from 'styled-components';
-import useGetCurrentPortfolioValue from 'queries/futures/useGetCurrentPortfolioValue';
-import { FuturesMarket } from 'queries/futures/types';
 import { Synths } from 'constants/currency';
 import Currency from 'components/Currency';
 import { zeroBN } from 'utils/formatters/number';
-import { getMarketKey } from 'utils/futures';
-import Connector from 'containers/Connector';
+import Wei from '@synthetixio/wei';
 
 type PortfolioChartProps = {
-	futuresMarkets: FuturesMarket[];
+	totalFuturesPortfolioValue: Wei;
+	totalSpotBalanceValue: Wei;
+	totalShortsValue: Wei;
 };
 
-const PortfolioChart: FC<PortfolioChartProps> = ({ futuresMarkets }: PortfolioChartProps) => {
-	const { network } = Connector.useContainer();
-
-	const markets = futuresMarkets.map(({ asset }) => getMarketKey(asset, network.id));
-	const portfolioValueQuery = useGetCurrentPortfolioValue(markets);
-	const portfolioValue = portfolioValueQuery?.data ?? null;
-
+const PortfolioChart: FC<PortfolioChartProps> = (props: PortfolioChartProps) => {
+	const { totalFuturesPortfolioValue, totalSpotBalanceValue, totalShortsValue } = props;
+	const total = totalFuturesPortfolioValue.add(totalSpotBalanceValue).add(totalShortsValue);
 	return (
 		<Chart>
-			<PortfolioTitle>Futures Portfolio Value</PortfolioTitle>
+			<PortfolioTitle>Portfolio Value</PortfolioTitle>
 			<PortfolioText
 				currencyKey={Synths.sUSD}
-				price={portfolioValue ?? zeroBN}
+				price={total ?? zeroBN}
 				sign={'$'}
 				conversionRate={1}
 			/>