v6.0.8-alpha

v6.0.8-alpha

.env.local.example

@@ -2,4 +2,6 @@ NEXT_PUBLIC_PROVIDER_ID=INFURA
 NEXT_PUBLIC_INFURA_PROJECT_ID="INFURA_PROJECT_ID"
 NEXT_PUBLIC_BLASTAPI_PROJECT_ID="BLASTAPI_PROJECT_ID"
 NEXT_PUBLIC_COMPETITION_ACTIVE=false
-NEXT_PUBLIC_SOCKET_API_KEY="SOCKET_API_KEY"
+NEXT_PUBLIC_SOCKET_API_KEY="SOCKET_API_KEY"
+NEXT_PUBLIC_SATSUMA_API_KEY="API_KEY"
+NEXT_PUBLIC_THEGRAPH_API_KEY="API_KEY"

README.md

@@ -58,6 +58,8 @@ Required:
 - `NEXT_PUBLIC_INFURA_PROJECT_ID` - Infura project id (get it from [infura.io](https://infura.io/)) or
 - `NEXT_PUBLIC_BLASTAPI_PROJECT_ID` - Blast API project id (get it from [blastapi.io](https://blastapi.io/))
 - `NEXT_PUBLIC_SOCKET_API_KEY` - Socket API key (get it from [socket.tech](https://docs.socket.tech/socket-api/v2#api-key)
+- `NEXT_PUBLIC_SATSUMA_API_KEY` - API key for Satsuma subgraph queries
+- `NEXT_PUBLIC_THEGRAPH_API_KEY` - API key for The Graph's decentralized service
 
 ### Run
 

components/ChangePercent/ChangePercent.tsx

@@ -19,10 +19,9 @@ export const ChangePercent: FC<ChangePercentProps> = memo(
 		const isValid = !!value;
 		const isZero = value && wei(value).eq(0);
 		const isPositive = value && wei(value).gt(0);
-
 		return (
-			<CurrencyChange isValid={isValid} isPositive={isPositive} {...rest}>
-				{!isValid ? (
+			<CurrencyChange isValid={isValid} isPositive={isPositive} isZero={isZero} {...rest}>
+				{!isValid || isZero ? (
 					<>{NO_VALUE}</>
 				) : !showArrow ? (
 					<></>
@@ -31,17 +30,17 @@ export const ChangePercent: FC<ChangePercentProps> = memo(
 				) : (
 					<ChangeNegativeIcon />
 				)}
-				{value && formatPercent(wei(value).abs(), { minDecimals: decimals })}
+				{!isZero && value && formatPercent(wei(value).abs(), { minDecimals: decimals })}
 			</CurrencyChange>
 		);
 	}
 );
 
-const CurrencyChange = styled.span<{ isValid: boolean; isPositive: boolean }>`
+const CurrencyChange = styled.span<{ isValid: boolean; isPositive: boolean; isZero: boolean }>`
 	display: inline-flex;
 	align-items: center;
 	color: ${(props) =>
-		!props.isValid
+		!props.isValid || props.isZero
 			? props.theme.colors.selectedTheme.white
 			: props.isPositive
 			? props.theme.colors.selectedTheme.green

queries/futures/constants.ts

@@ -3,24 +3,25 @@ import { gql } from 'graphql-request';
 
 import { chain } from 'containers/Connector/config';
 
-export const FUTURES_ENDPOINT_OP_MAINNET =
-	'https://api.thegraph.com/subgraphs/name/tburm/optimism-perps';
+export const FUTURES_ENDPOINT_OP_MAINNET = `https://subgraph.satsuma-prod.com/${process.env.NEXT_PUBLIC_SATSUMA_API_KEY}/kwenta/optimism-perps/api`;
 
 export const FUTURES_ENDPOINT_OP_GOERLI =
-	'https://api.thegraph.com/subgraphs/name/tburm/optimism-goerli-perps';
+	'https://api.thegraph.com/subgraphs/name/kwenta/optimism-goerli-perps';
 
 export const FUTURES_ENDPOINTS = {
 	[chain.optimism.id]: FUTURES_ENDPOINT_OP_MAINNET,
 	[chain.optimismGoerli.id]: FUTURES_ENDPOINT_OP_GOERLI,
 };
 
-export const MAIN_ENDPOINT_OP_MAINNET =
-	'https://api.thegraph.com/subgraphs/name/tburm/optimism-main';
+export const MAIN_ENDPOINT_MAINNET = `https://gateway.thegraph.com/api/${process.env.NEXT_PUBLIC_THEGRAPH_API_KEY}/subgraphs/id/HLy7PdmPJuVGjjmPNz1vW5RCCRpqzRWony2fSn7UKpf9`;
+
+export const MAIN_ENDPOINT_OP_MAINNET = `https://subgraph.satsuma-prod.com/${process.env.NEXT_PUBLIC_SATSUMA_API_KEY}/kwenta/optimism-main/api`;
 
 export const MAIN_ENDPOINT_OP_GOERLI =
-	'https://api.thegraph.com/subgraphs/name/tburm/optimism-goerli-main';
+	'https://api.thegraph.com/subgraphs/name/kwenta/optimism-goerli-main';
 
 export const MAIN_ENDPOINTS = {
+	[chain.mainnet.id]: MAIN_ENDPOINT_MAINNET,
 	[chain.optimism.id]: MAIN_ENDPOINT_OP_MAINNET,
 	[chain.optimismGoerli.id]: MAIN_ENDPOINT_OP_GOERLI,
 };

queries/rates/constants.ts

@@ -1,9 +1,8 @@
 import { chain } from 'containers/Connector/config';
 
-export const RATES_ENDPOINT_MAIN = 'https://api.thegraph.com/subgraphs/name/kwenta/mainnet-main';
+export const RATES_ENDPOINT_MAIN = `https://gateway.thegraph.com/api/${process.env.NEXT_PUBLIC_THEGRAPH_API_KEY}/subgraphs/id/HLy7PdmPJuVGjjmPNz1vW5RCCRpqzRWony2fSn7UKpf9`;
 
-export const RATES_ENDPOINT_OP_MAINNET =
-	'https://api.thegraph.com/subgraphs/name/kwenta/optimism-latest-rates';
+export const RATES_ENDPOINT_OP_MAINNET = `https://subgraph.satsuma-prod.com/${process.env.NEXT_PUBLIC_SATSUMA_API_KEY}/kwenta/optimism-latest-rates/api`;
 
 export const RATES_ENDPOINT_OP_GOERLI =
 	'https://api.thegraph.com/subgraphs/name/kwenta/optimism-goerli-latest-rates';

sdk/constants/futures.ts

@@ -1,7 +1,6 @@
 import { FuturesMarketAsset, FuturesMarketConfig, FuturesMarketKey } from 'sdk/types/futures';
 
-export const FUTURES_ENDPOINT_OP_MAINNET =
-	'https://api.thegraph.com/subgraphs/name/kwenta/optimism-perps';
+export const FUTURES_ENDPOINT_OP_MAINNET = `https://subgraph.satsuma-prod.com/${process.env.NEXT_PUBLIC_SATSUMA_API_KEY}/kwenta/optimism-perps/api`;
 
 export const FUTURES_ENDPOINT_OP_GOERLI =
 	'https://api.thegraph.com/subgraphs/name/kwenta/optimism-goerli-perps';

sdk/constants/prices.ts

@@ -2,8 +2,7 @@ import { formatBytes32String } from 'ethers/lib/utils.js';
 
 import { V2_MARKETS_LIST } from './futures';
 
-export const MAIN_ENDPOINT_OP_MAINNET =
-	'https://api.thegraph.com/subgraphs/name/kwenta/optimism-latest-rates';
+export const MAIN_ENDPOINT_OP_MAINNET = `https://subgraph.satsuma-prod.com/${process.env.NEXT_PUBLIC_SATSUMA_API_KEY}/kwenta/optimism-latest-rates/api`;
 
 export const MAIN_ENDPOINT_OP_GOERLI =
 	'https://api.thegraph.com/subgraphs/name/kwenta/optimism-goerli-latest-rates';

sections/dashboard/Markets/Markets.tsx

@@ -7,7 +7,6 @@ import { DesktopOnlyView, MobileOrTabletView } from 'components/Media';
 import { TabPanel } from 'components/Tab';
 
 import FuturesMarketsTable from '../FuturesMarketsTable';
-import SpotMarketsTable from '../SpotMarketsTable';
 
 export enum MarketsTab {
 	FUTURES = 'futures',
@@ -29,14 +28,6 @@ const Markets: FC = () => {
 					setActiveMarketsTab(MarketsTab.FUTURES);
 				},
 			},
-			{
-				name: MarketsTab.SPOT,
-				label: t('dashboard.overview.markets-tabs.spot'),
-				active: activeMarketsTab === MarketsTab.SPOT,
-				onClick: () => {
-					setActiveMarketsTab(MarketsTab.SPOT);
-				},
-			},
 		],
 		[activeMarketsTab, t]
 	);
@@ -61,10 +52,6 @@ const Markets: FC = () => {
 			<TabPanel name={MarketsTab.FUTURES} activeTab={activeMarketsTab}>
 				<FuturesMarketsTable />
 			</TabPanel>
-
-			<TabPanel name={MarketsTab.SPOT} activeTab={activeMarketsTab}>
-				<SpotMarketsTable />
-			</TabPanel>
 		</>
 	);
 };

sections/dashboard/Overview/Overview.tsx

@@ -13,12 +13,13 @@ import { FuturesAccountTypes } from 'queries/futures/types';
 import { CompetitionBanner } from 'sections/shared/components/CompetitionBanner';
 import { selectBalances } from 'state/balances/selectors';
 import { sdk } from 'state/config';
+import { fetchTokenList } from 'state/exchange/actions';
 import {
 	// selectActiveCrossPositionsCount,
 	selectActiveIsolatedPositionsCount,
 	selectFuturesPortfolio,
 } from 'state/futures/selectors';
-import { useAppSelector } from 'state/hooks';
+import { useAppSelector, useFetchAction } from 'state/hooks';
 import { formatDollars, toWei, zeroBN } from 'utils/formatters/number';
 import logError from 'utils/logError';
 
@@ -27,7 +28,6 @@ import FuturesPositionsTable from '../FuturesPositionsTable';
 import { MarketsTab } from '../Markets/Markets';
 import MobileDashboard from '../MobileDashboard';
 import PortfolioChart from '../PortfolioChart';
-import SpotMarketsTable from '../SpotMarketsTable';
 import SynthBalancesTable from '../SynthBalancesTable';
 
 export enum PositionsTab {
@@ -57,6 +57,8 @@ const Overview: FC = () => {
 
 	const [exchangeTokens, setExchangeTokens] = useState<any>([]);
 
+	useFetchAction(fetchTokenList, { dependencies: [network] });
+
 	useEffect(() => {
 		const initExchangeTokens = async () => {
 			try {
@@ -164,12 +166,6 @@ const Overview: FC = () => {
 				active: activeMarketsTab === MarketsTab.FUTURES,
 				onClick: () => setActiveMarketsTab(MarketsTab.FUTURES),
 			},
-			{
-				name: MarketsTab.SPOT,
-				label: t('dashboard.overview.markets-tabs.spot'),
-				active: activeMarketsTab === MarketsTab.SPOT,
-				onClick: () => setActiveMarketsTab(MarketsTab.SPOT),
-			},
 		],
 		[activeMarketsTab, setActiveMarketsTab, t]
 	);
@@ -211,10 +207,6 @@ const Overview: FC = () => {
 				<TabPanel name={MarketsTab.FUTURES} activeTab={activeMarketsTab}>
 					<FuturesMarketsTable />
 				</TabPanel>
-
-				<TabPanel name={MarketsTab.SPOT} activeTab={activeMarketsTab}>
-					<SpotMarketsTable />
-				</TabPanel>
 			</DesktopOnlyView>
 			<MobileOrTabletView>
 				<MobileDashboard exchangeTokens={exchangeTokens} />