Wallet connect update

src/clients/web3/connectors.ts

@@ -2,33 +2,40 @@ import { BscConnector } from '@binance-chain/bsc-connector';
 import { InfinityWalletConnector } from '@infinitywallet/infinity-connector';
 import { InjectedConnector } from '@web3-react/injected-connector';
 import { WalletLinkConnector } from '@web3-react/walletlink-connector';
-import config, { ONYX_CHAIN_ID } from 'config';
-import { EthChainId } from 'types';
+import config, { WALLET_SUPPORTED_CHAIN_IDS } from 'config';
+import { WalletChainIds } from 'types';
+
+import { getRpcUrlsByChainId } from 'constants/wallet-chains';
 
 import { Connector } from './types';
 import { WalletConnectV2Connector } from './walletconnectV2';
 
 export const injectedConnector = new InjectedConnector({
-  supportedChainIds: [config.chainId, ONYX_CHAIN_ID],
+  supportedChainIds: WALLET_SUPPORTED_CHAIN_IDS,
 });
 
+const rpcMap = getRpcUrlsByChainId();
+rpcMap[WalletChainIds.TESTNET] = 'https://goerli.infura.io/v3/54af4f71d6c44e0ea83badb0886458f9';
+
 const walletConnectV2Connector = new WalletConnectV2Connector({
-  supportedChainIds: [EthChainId.MAINNET],
-  rpcMap: { [EthChainId.MAINNET]: config.rpcUrl },
-  chains: [EthChainId.MAINNET],
+  supportedChainIds: WALLET_SUPPORTED_CHAIN_IDS,
+  rpcMap,
+  chains: WALLET_SUPPORTED_CHAIN_IDS as [number, ...number[]],
   qrcode: true,
 });
 
-const binanceChainWalletConnector = new BscConnector({ supportedChainIds: [config.chainId] });
+const binanceChainWalletConnector = new BscConnector({
+  supportedChainIds: [WalletChainIds.BSC],
+});
 
 const coinbaseWalletConnector = new WalletLinkConnector({
   url: config.rpcUrl,
   appName: 'Onyx',
-  supportedChainIds: [config.chainId],
+  supportedChainIds: WALLET_SUPPORTED_CHAIN_IDS,
 });
 
 const infinityWalletConnector = new InfinityWalletConnector({
-  supportedChainIds: [EthChainId.MAINNET],
+  supportedChainIds: WALLET_SUPPORTED_CHAIN_IDS,
 });
 
 export const connectorsByName = {

src/clients/web3/useAuth/index.ts

@@ -6,8 +6,9 @@ import {
 } from '@web3-react/injected-connector';
 import { VError, formatVErrorToReadableString } from 'errors';
 import { useCallback, useState } from 'react';
+import { EthChainId } from 'types';
 
-import { switchToOnyx } from 'components/Layout/AddNetworkButton/addOnyx2Network';
+import { switchToEth } from 'components/Layout/AddNetworkButton/onyxChainUtils';
 import { toast } from 'components/Toast';
 import { LS_KEY_CONNECTED_CONNECTOR } from 'constants/localStorageKeys';
 
@@ -19,8 +20,6 @@ import {
 } from '../walletconnectV2';
 import setupNetwork from './setUpNetwork';
 
-const ONYX_CHAIN_ID = 80888;
-
 const getConnectedConnector = (): Connector | undefined => {
   const lsConnectedConnector = window.localStorage.getItem(LS_KEY_CONNECTED_CONNECTOR);
 
@@ -57,8 +56,9 @@ const useAuth = () => {
 
             const currentChainId = parseInt(currentChainIdHex, 16);
 
-            if (currentChainId !== ONYX_CHAIN_ID) {
-              const switched = await switchToOnyx();
+            if (currentChainId !== EthChainId.MAINNET) {
+              const switched = await switchToEth();
+
               if (!switched) {
                 toast.warning({
                   message: 'Please switch to Onyx network in your wallet',

src/components/ChainSwitchDropdown/index.tsx

@@ -0,0 +1,116 @@
+/** @jsxImportSource @emotion/react */
+import { SelectChangeEvent } from '@mui/material/Select';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'translation';
+
+import { switchToChain } from 'components/Layout/AddNetworkButton/onyxChainUtils';
+import { Select } from 'components/Select';
+import { toast } from 'components/Toast';
+import { SUPPORTED_CHAINS, getChainByHexId } from 'constants/wallet-chains';
+
+interface Props {
+  className?: string;
+  showOnlyImage?: boolean;
+}
+
+export const ChainSwitchDropdown = ({ className, showOnlyImage = false }: Props) => {
+  const { t } = useTranslation();
+  const [currentChainId, setCurrentChainId] = useState<string>('');
+  const [isSwitching, setIsSwitching] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!window.ethereum) return;
+
+    window.ethereum.request({ method: 'eth_chainId' }).then(setCurrentChainId);
+
+    const handleChainChanged = (chainId: string) => {
+      setCurrentChainId(chainId);
+      setIsSwitching(false);
+    };
+
+    window.ethereum.on('chainChanged', handleChainChanged);
+
+    return () => {
+      window.ethereum.removeListener('chainChanged', handleChainChanged);
+    };
+  }, []);
+
+  const handleChainChange = useCallback(
+    async (event: SelectChangeEvent) => {
+      if (isSwitching) return;
+
+      const selectedChain = getChainByHexId(event.target.value);
+      if (!selectedChain) return;
+
+      setIsSwitching(true);
+
+      try {
+        await switchToChain(selectedChain.config);
+      } catch (error) {
+        setIsSwitching(false);
+        toast.error({
+          message: 'Failed to change chain.',
+        });
+      }
+    },
+    [isSwitching],
+  );
+
+  const options = SUPPORTED_CHAINS.map(chain => ({
+    value: chain.config.chainId,
+    label: chain.displayName,
+    image: chain.icon,
+  }));
+
+  return (
+    <div css={{ position: 'relative' }}>
+      <Select
+        className={className}
+        css={{
+          opacity: isSwitching ? 0.3 : 1,
+          transition: 'opacity 0.2s ease',
+          pointerEvents: isSwitching ? 'none' : 'auto',
+        }}
+        options={options}
+        value={currentChainId}
+        onChange={handleChainChange}
+        ariaLabel={t('chainSwitchDropdown.ariaLabel', 'Select blockchain network')}
+        buttonVariant
+        showOnlyImage={showOnlyImage}
+        title={t('chainSwitchDropdown.title', 'Select Network')}
+      />
+      {isSwitching && (
+        <div
+          css={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+            zIndex: 1,
+          }}
+        >
+          <div
+            css={{
+              width: 16,
+              height: 16,
+              border: '2px solid #ccc',
+              borderTopColor: '#007bff',
+              borderRadius: '50%',
+              animation: 'spin 1s linear infinite',
+              '@keyframes spin': {
+                '0%': { transform: 'rotate(0deg)' },
+                '100%': { transform: 'rotate(360deg)' },
+              },
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ChainSwitchDropdown;

src/components/Layout/AddNetworkButton/index.tsx

@@ -4,15 +4,15 @@ import React from 'react';
 import { useTranslation } from 'translation';
 
 import xcn from 'assets/img/xcnLogoPureB.svg';
-import { addOnyx2Network } from 'components/Layout/AddNetworkButton/addOnyx2Network';
+import { addOnyxNetwork } from 'components/Layout/AddNetworkButton/onyxChainUtils';
 
 import { ButtonProps, SecondaryButton } from '../../Button';
 
 export const AddNetworkButton: React.FC<ButtonProps> = ({ css, ...props }) => {
   const { t } = useTranslation();
 
   return (
-    <SecondaryButton onClick={addOnyx2Network} variant="secondaryConnectWallet" {...props}>
+    <SecondaryButton onClick={addOnyxNetwork} variant="secondaryConnectWallet" {...props}>
       <Box css={css}>
         <img src={xcn} alt="XCN" style={{ width: 20, height: 20, marginRight: 8 }} />
         {t('addNetworkButton.title')}