v4.2.0

v4.2.0

components/Currency/CurrencyIcon/CurrencyIcon.tsx

@@ -28,14 +28,14 @@ const CurrencyIconContainer: FC<CurrencyIconProps> = React.memo(({ className, ..
 	</Container>
 ));
 
-const CurrencyIcon: FC<CurrencyIconProps> = React.memo(({ currencyKey, ...rest }) => {
+const CurrencyIcon: FC<CurrencyIconProps> = React.memo(({ currencyKey, isDeprecated, ...rest }) => {
 	const props = { width: '30px', height: '30px', alt: currencyKey, ...rest };
 	const src = SYNTH_ICONS[currencyKey];
 
 	if (src) {
 		return <Image src={src} {...props} />;
 	} else {
-		return <TokenIcon currencyKey={currencyKey} {...props} />;
+		return <TokenIcon currencyKey={currencyKey} isDeprecated={isDeprecated} {...props} />;
 	}
 });
 

components/Currency/CurrencyIcon/TokenIcon.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react';
+import { useAppSelector } from 'state/hooks';
 import styled from 'styled-components';
 
-import useOneInchTokenList from 'queries/tokenLists/useOneInchTokenList';
 import { FlexDivCentered } from 'styles/common';
 
 export type TokenIconProps = {
@@ -15,34 +15,37 @@ export type TokenIconProps = {
 	url?: string;
 };
 
-const TokenIcon: FC<TokenIconProps> = ({ currencyKey, ...props }) => {
-	const OneInchTokenListQuery = useOneInchTokenList();
-	const OneInchTokenListMap = OneInchTokenListQuery.data?.tokensMap ?? null;
+const TokenIcon: FC<TokenIconProps> = ({ currencyKey, isDeprecated, ...props }) => {
+	const tokensMap = useAppSelector(({ exchange }) => exchange.tokensMap);
 
-	if (!!OneInchTokenListMap && OneInchTokenListMap[currencyKey] != null) {
-		return <TokenImage src={OneInchTokenListMap[currencyKey].logoURI} {...props} />;
+	if (!!tokensMap[currencyKey]) {
+		return (
+			<TokenImage src={tokensMap[currencyKey].logoURI} $isDeprecated={isDeprecated} {...props} />
+		);
 	} else {
 		return (
-			<Placeholder {...props}>{currencyKey === 'sDebtRatio' ? 'DEBT' : currencyKey}</Placeholder>
+			<Placeholder $isDeprecated={isDeprecated} {...props}>
+				{currencyKey === 'sDebtRatio' ? 'DEBT' : currencyKey}
+			</Placeholder>
 		);
 	}
 };
 
-const TokenImage = styled.img<{ isDeprecated?: boolean }>`
+const TokenImage = styled.img<{ $isDeprecated?: boolean }>`
 	border-radius: 100%;
-	border: 2px solid ${(props) => (props.isDeprecated ? props.theme.colors.red : 'transparent')};
+	border: 2px solid ${(props) => (props.$isDeprecated ? props.theme.colors.red : 'transparent')};
 `;
 
 const Placeholder = styled(FlexDivCentered)<{
-	isDeprecated?: boolean;
+	$isDeprecated?: boolean;
 	height?: string;
 	width?: string;
 }>`
 	border-radius: 100%;
 	color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
 	border: 2px solid
 		${(props) =>
-			props.isDeprecated
+			props.$isDeprecated
 				? props.theme.colors.red
 				: props.theme.colors.selectedTheme.button.text.primary};
 	font-size: 7px;

components/Input/NumericInput.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, memo } from 'react';
+import { ChangeEvent, FC, memo, useCallback } from 'react';
 import styled from 'styled-components';
 
 import Input from './Input';
@@ -17,11 +17,14 @@ const INVALID_CHARS = ['-', '+', 'e'];
 
 const NumericInput: FC<NumericInputProps> = memo(
 	({ value, onChange, placeholder, className, defaultValue, disabled, id, ...rest }) => {
-		const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
-			const { value } = e.target;
+		const handleOnChange = useCallback(
+			(e: ChangeEvent<HTMLInputElement>) => {
+				const { value } = e.target;
 
-			onChange(e, value.replace(/,/g, '.').replace(/[e+-]/gi, ''));
-		};
+				onChange(e, value.replace(/,/g, '.').replace(/[e+-]/gi, ''));
+			},
+			[onChange]
+		);
 
 		return (
 			<StyledInput

constants/NotificationContainer.tsx

@@ -1,10 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, memo } from 'react';
 import { createPortal } from 'react-dom';
 import { ToastContainer } from 'react-toastify';
 import styled from 'styled-components';
 import 'react-toastify/dist/ReactToastify.css';
 
-const NotificationContainer = () => {
+const NotificationContainer = memo(() => {
 	const [mounted, setMounted] = useState(false);
 
 	useEffect(() => {
@@ -18,7 +18,7 @@ const NotificationContainer = () => {
 				document.body
 		  )
 		: null;
-};
+});
 
 const StyledToastContainer = styled(ToastContainer)`
 	.Toastify__toast-container {

containers/Connector/Connector.tsx

@@ -1,17 +1,26 @@
 import { NetworkId, synthetix } from '@synthetixio/contracts-interface';
+import { TransactionNotifier as BaseTN } from '@synthetixio/transaction-notifier';
 import { ethers } from 'ethers';
 import { keyBy } from 'lodash';
-import { useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
+import { sdk } from 'state/config';
+import { useAppDispatch } from 'state/hooks';
+import { resetNetwork, setSigner } from 'state/wallet/actions';
 import { createContainer } from 'unstated-next';
 import { chain, useAccount, useNetwork, useProvider, useSigner } from 'wagmi';
 
+import { generateExplorerFunctions, getBaseUrl } from './blockExplorer';
+import { wagmiClient } from './config';
+
+export let transactionNotifier = new BaseTN(wagmiClient.provider);
+export let blockExplorer = generateExplorerFunctions(getBaseUrl(10));
+
 const useConnector = () => {
 	const { chain: activeChain } = useNetwork();
 	const { address, isConnected: isWalletConnected } = useAccount();
-	const unsupportedNetwork = useMemo(
-		() => (isWalletConnected ? activeChain?.unsupported ?? false : false),
-		[activeChain, isWalletConnected]
-	);
+
+	const unsupportedNetwork = useMemo(() => activeChain?.unsupported ?? false, [activeChain]);
+
 	const network = useMemo(
 		() => (activeChain?.unsupported ? chain.optimism : activeChain ?? chain.optimism),
 		[activeChain]
@@ -22,6 +31,7 @@ const useConnector = () => {
 	const provider = useProvider({ chainId: network.id });
 	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();
 
@@ -35,6 +45,29 @@ const useConnector = () => {
 		[l2Provider]
 	);
 
+	const dispatch = useAppDispatch();
+
+	const handleNetworkChange = useCallback(
+		(networkId: NetworkId) => {
+			dispatch(resetNetwork(networkId));
+			blockExplorer = generateExplorerFunctions(getBaseUrl(networkId));
+		},
+		[dispatch]
+	);
+
+	useEffect(() => {
+		sdk.setProvider(provider).then(handleNetworkChange);
+		transactionNotifier = new BaseTN(provider);
+	}, [provider, dispatch, handleNetworkChange]);
+
+	useEffect(() => {
+		handleNetworkChange(network.id as NetworkId);
+	}, [network.id, handleNetworkChange]);
+
+	useEffect(() => {
+		dispatch(setSigner(signer));
+	}, [signer, dispatch]);
+
 	const [synthsMap, tokensMap] = useMemo(() => {
 		if (defaultSynthetixjs == null) return [{}, {}];
 

containers/Connector/blockExplorer.ts

@@ -0,0 +1,19 @@
+import { NetworkId, NetworkNameById, NetworkIdByName } from '@synthetixio/contracts-interface';
+import { OPTIMISM_NETWORKS } from '@synthetixio/optimism-networks';
+
+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) {
+		return 'https://etherscan.io';
+	}
+	return `https://${NetworkNameById[networkId]}.etherscan.io`;
+};
+
+export const generateExplorerFunctions = (baseUrl: string) => ({
+	baseLink: baseUrl,
+	txLink: (txId: string) => `${baseUrl}/tx/${txId}`,
+	addressLink: (address: string) => `${baseUrl}/address/${address}`,
+	tokenLink: (address: string) => `${baseUrl}/token/${address}`,
+	blockLink: (blockNumber: string) => `${baseUrl}/block/${blockNumber}`,
+});