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}`,
+});