v6.2.3

v6.2.3

README.md

@@ -28,8 +28,6 @@ Kwenta welcomes contributors. Regardless of the time you have available, everyon
 
 - [ethers.js v5](https://github.com/ethers-io/ethers.js) - Ethereum wallet implementation.
 - [Rainbowkit](https://github.com/rainbow-me/rainbowkit) - for ethereum wallet onboarding.
-- [@synthetixio/contracts-interface](https://github.com/Synthetixio/js-monorepo/tree/master/packages/contracts-interface) - for interactions with the Synthetix protocol.
-- [@synthetixio/queries](https://github.com/Synthetixio/js-monorepo/tree/master/packages/queries) - for historical data (powered by [TheGraph](https://thegraph.com/))
 
 ## Development
 

components/Badge/MarketBadge.tsx

@@ -2,26 +2,24 @@ import React, { FC, memo, ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
-import { CurrencyKey } from 'constants/currency';
-import { FuturesClosureReason } from 'hooks/useFuturesMarketClosed';
 import useIsMarketTransitioning from 'hooks/useIsMarketTransitioning';
-import { FuturesMarketAsset } from 'sdk/types/futures';
+import { FuturesMarketAsset, SynthSuspensionReason } from 'sdk/types/futures';
 import { marketIsOpen, marketNextOpen, marketNextTransition } from 'utils/marketHours';
 
 import Badge from './Badge';
 
 type MarketBadgeProps = {
-	currencyKey: FuturesMarketAsset | null;
-	isFuturesMarketClosed: boolean;
-	futuresClosureReason?: FuturesClosureReason;
+	currencyKey: FuturesMarketAsset;
+	isFuturesMarketClosed?: boolean;
+	futuresClosureReason?: SynthSuspensionReason;
 	fallbackComponent?: ReactElement;
 };
 
 type TransitionBadgeProps = {
 	isOpen: boolean;
 };
 
-export const TransitionBadge: FC<TransitionBadgeProps> = memo(({ isOpen }) => {
+const TransitionBadge: FC<TransitionBadgeProps> = memo(({ isOpen }) => {
 	const { t } = useTranslation();
 
 	return (
@@ -34,10 +32,9 @@ export const TransitionBadge: FC<TransitionBadgeProps> = memo(({ isOpen }) => {
 export const MarketBadge: FC<MarketBadgeProps> = memo(
 	({ currencyKey, isFuturesMarketClosed, futuresClosureReason, fallbackComponent }) => {
 		const { t } = useTranslation();
-		const isOpen = marketIsOpen((currencyKey as CurrencyKey) ?? null);
-
-		const nextOpen = marketNextOpen((currencyKey as CurrencyKey) ?? '');
-		const nextTransition = marketNextTransition((currencyKey as CurrencyKey) ?? '');
+		const isOpen = marketIsOpen(currencyKey);
+		const nextOpen = marketNextOpen(currencyKey);
+		const nextTransition = marketNextTransition(currencyKey);
 
 		const timerSetting = isOpen === null ? null : isOpen ? nextTransition : nextOpen;
 		const isMarketTransitioning = useIsMarketTransitioning(timerSetting ?? null);

components/Currency/CurrencyName/CurrencyName.tsx

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 
 import { ContainerRowMixin } from 'components/layout/grid';
 import MarketClosureIcon from 'components/MarketClosureIcon';
-import { MarketClosureReason } from 'hooks/useMarketClosed';
+import { MarketClosureReason } from 'sdk/types/futures';
 
 import CurrencyIcon from '../CurrencyIcon';
 import { CurrencyIconProps } from '../CurrencyIcon/CurrencyIcon';

components/MarketClosureIcon/MarketClosureIcon.tsx

@@ -4,10 +4,10 @@ import CircuitBreakerIcon from 'assets/svg/app/market-closure/circuit-breaker.sv
 import EmergencyShutdownIcon from 'assets/svg/app/market-closure/emergency-shutdown.svg';
 import FrozenIcon from 'assets/svg/app/market-closure/frozen.svg';
 import MarketPauseIcon from 'assets/svg/app/market-closure/market-pause.svg';
-import { MarketClosureReason } from 'hooks/useMarketClosed';
+import { MarketClosureReason } from 'sdk/types/futures';
 
 type MarketClosureIconProps = {
-	marketClosureReason: MarketClosureReason;
+	marketClosureReason: MarketClosureReason | 'frozen';
 	size?: 'sm' | 'lg';
 };
 

components/TVChart/TVChart.tsx

@@ -1,10 +1,10 @@
-import { NetworkId } from '@synthetixio/contracts-interface';
 import { useRouter } from 'next/router';
 import { useRef, useContext, useEffect, useCallback, useMemo } from 'react';
 import { ThemeContext } from 'styled-components';
 
 import Connector from 'containers/Connector';
 import { chain } from 'containers/Connector/config';
+import { NetworkId } from 'sdk/types/common';
 import { FuturesOrder } from 'sdk/types/futures';
 import { PricesListener } from 'sdk/types/prices';
 import { ChartBody } from 'sections/exchange/TradeCard/Charts/common/styles';

constants/currency.ts

@@ -1,9 +1,7 @@
-import { CurrencyKey } from '@synthetixio/contracts-interface';
 import Wei from '@synthetixio/wei';
 import keyBy from 'lodash/keyBy';
 
-export type { CurrencyKey } from '@synthetixio/contracts-interface';
-export { Synths } from '@synthetixio/contracts-interface';
+export type CurrencyKey = string;
 
 // TODO: standardize this
 export type Category = 'crypto' | 'forex' | 'equities' | 'index' | 'commodity' | 'inverse';

constants/defaults.ts

@@ -1,12 +1,10 @@
-import { NetworkIdByName } from '@synthetixio/contracts-interface';
-
 import { Language } from 'translations/constants';
 
 // app defaults
 export const DEFAULT_LANGUAGE: Language = Language.EN;
 
 // network defaults
-export const DEFAULT_NETWORK_ID = NetworkIdByName['mainnet-ovm'];
+export const DEFAULT_NETWORK_ID = 10;
 
 export const DEFAULT_GAS_BUFFER = 5000;
 export const DEFAULT_GAS_LIMIT = 500000;

constants/queryKeys.ts

@@ -1,8 +1,6 @@
-import { NetworkId } from '@synthetixio/contracts-interface';
-
-import { FuturesAccountType } from 'queries/futures/types';
 import { Period } from 'sdk/constants/period';
-import { FuturesMarketAsset } from 'sdk/types/futures';
+import { NetworkId } from 'sdk/types/common';
+import { FuturesAccountType, FuturesMarketAsset } from 'sdk/types/futures';
 
 import { CurrencyKey } from './currency';
 

constants/routes.ts

@@ -1,5 +1,4 @@
-import { FuturesAccountType } from 'queries/futures/types';
-import { FuturesMarketAsset } from 'sdk/types/futures';
+import { FuturesAccountType, FuturesMarketAsset } from 'sdk/types/futures';
 
 import { EXTERNAL_LINKS } from './links';
 

containers/Connector/Connector.tsx

@@ -1,14 +1,13 @@
-import { NetworkId, synthetix } from '@synthetixio/contracts-interface';
 import { TransactionNotifier as BaseTN } from '@synthetixio/transaction-notifier';
-import { ethers } from 'ethers';
-import { keyBy } from 'lodash';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { createContainer } from 'unstated-next';
 import { useAccount, useNetwork, useSigner, useProvider } from 'wagmi';
 
+import { NetworkId } from 'sdk/types/common';
 import { sdk } from 'state/config';
 import { useAppDispatch } from 'state/hooks';
-import { resetNetwork, setSigner } from 'state/wallet/actions';
+import { setSigner } from 'state/wallet/actions';
+import { setNetwork } from 'state/wallet/reducer';
 
 import { generateExplorerFunctions, getBaseUrl } from './blockExplorer';
 import { activeChainIds, chain, wagmiClient } from './config';
@@ -36,22 +35,9 @@ const useConnector = () => {
 	const l2Provider = useProvider({ chainId: chain.optimism.id });
 	const { data: signer } = useSigner();
 
-	// Provides a default mainnet provider, irrespective of the current network
-	const staticMainnetProvider = new ethers.providers.InfuraProvider();
-
-	const defaultSynthetixjs = useMemo(
-		() => synthetix({ provider, networkId: network.id as NetworkId }),
-		[provider, network.id]
-	);
-
-	const l2Synthetixjs = useMemo(
-		() => synthetix({ provider: l2Provider, networkId: chain.optimism.id as NetworkId }),
-		[l2Provider]
-	);
-
 	const handleNetworkChange = useCallback(
 		(networkId: NetworkId) => {
-			dispatch(resetNetwork(networkId));
+			dispatch(setNetwork(networkId));
 			blockExplorer = generateExplorerFunctions(getBaseUrl(networkId));
 		},
 		[dispatch]
@@ -67,26 +53,10 @@ const useConnector = () => {
 		}
 	}, [provider, handleNetworkChange]);
 
-	useEffect(() => {
-		handleNetworkChange(network.id as NetworkId);
-	}, [network.id, handleNetworkChange]);
-
 	useEffect(() => {
 		dispatch(setSigner(signer));
 	}, [signer, dispatch]);
 
-	const [synthsMap, tokensMap] = useMemo(() => {
-		if (defaultSynthetixjs == null) return [{}, {}];
-
-		return [keyBy(defaultSynthetixjs.synths, 'name'), keyBy(defaultSynthetixjs.tokens, 'symbol')];
-	}, [defaultSynthetixjs]);
-
-	const l2SynthsMap = useMemo(() => {
-		if (l2Synthetixjs == null) return {};
-
-		return keyBy(l2Synthetixjs.synths, 'name');
-	}, [l2Synthetixjs]);
-
 	return {
 		activeChain,
 		isWalletConnected,
@@ -95,11 +65,6 @@ const useConnector = () => {
 		l2Provider,
 		signer,
 		network,
-		synthsMap,
-		tokensMap,
-		staticMainnetProvider,
-		defaultSynthetixjs,
-		l2SynthsMap,
 		providerReady,
 	};
 };

containers/Connector/blockExplorer.ts

@@ -1,10 +1,11 @@
-import { NetworkId, NetworkNameById, NetworkIdByName } from '@synthetixio/contracts-interface';
 import { OPTIMISM_NETWORKS } from '@synthetixio/optimism-networks';
 
+import { NetworkId, NetworkNameById, NetworkIdByName } from 'sdk/types/common';
+
 export const getBaseUrl = (networkId: NetworkId) => {
 	if (networkId === 10 || networkId === 420) {
 		return OPTIMISM_NETWORKS[networkId as NetworkId]?.blockExplorerUrls[0];
-	} else if ((networkId as NetworkId) === NetworkIdByName.mainnet) {
+	} else if (networkId === NetworkIdByName.mainnet) {
 		return 'https://etherscan.io';
 	}
 	return `https://${NetworkNameById[networkId]}.etherscan.io`;

hooks/useAverageEntryPrice.ts

@@ -23,7 +23,7 @@ const useAverageEntryPrice = (positionHistory?: FuturesPositionHistory) => {
 			const existingValue = avgEntryPrice.mul(size);
 			const newValue = previewTrade.price.mul(previewTrade.sizeDelta.abs());
 			const totalValue = existingValue.add(newValue);
-			return totalValue.div(previewTrade.size.abs());
+			return totalValue.div(previewTrade.size.eq(0) ? 1 : previewTrade.size.abs());
 		}
 		return null;
 	}, [positionHistory, previewTrade]);

hooks/useENS.ts

@@ -1,15 +1,14 @@
 import { isAddress } from 'ethers/lib/utils';
 import { useEffect, useState } from 'react';
 
-import Connector from 'containers/Connector';
+import { staticMainnetProvider } from 'utils/network';
 
 type ENSAccount = { ensAddress: string | null; ensName: string | null; ensAvatar: string | null };
 
 const useENS = (addressOrName: string): ENSAccount => {
 	const [ensAddress, setENSAddress] = useState<string | null>(null);
 	const [ensName, setENSName] = useState<string | null>(null);
 	const [ensAvatar, setENSAvatar] = useState<string | null>(null);
-	const { staticMainnetProvider } = Connector.useContainer();
 
 	useEffect(() => {
 		let mounted = true;
@@ -37,7 +36,7 @@ const useENS = (addressOrName: string): ENSAccount => {
 			setENSAvatar(null);
 			setENSName(null);
 		};
-	}, [addressOrName, staticMainnetProvider]);
+	}, [addressOrName]);
 
 	return { ensAddress, ensName, ensAvatar };
 };

hooks/useENSs.ts

@@ -3,8 +3,8 @@ import { useQuery, UseQueryOptions } from 'react-query';
 
 import { ENS_REVERSE_LOOKUP } from 'constants/address';
 import QUERY_KEYS from 'constants/queryKeys';
-import Connector from 'containers/Connector';
 import reverseRecordsAbi from 'sdk/contracts/abis/ReverseRecords.json';
+import { staticMainnetProvider } from 'utils/network';
 
 const ADDRESSES_PER_LOOKUP = 1500;
 
@@ -13,15 +13,12 @@ type EnsInfo = {
 };
 
 const useENSs = (addresses: string[], options?: UseQueryOptions<any | null>) => {
-	const { staticMainnetProvider } = Connector.useContainer();
-
 	return useQuery<EnsInfo>(
 		QUERY_KEYS.Network.ENSNames(addresses),
 		async () => {
 			const ReverseLookup = new Contract(
 				ENS_REVERSE_LOOKUP,
 				reverseRecordsAbi,
-				// @ts-ignore provider type
 				staticMainnetProvider
 			);