Skip to content

Commit a1ad36c

Browse files
onyxcoindevonyxcoindev
authored
fix-unsupported-chains
refactor(wallet-connection): onyx chain not being supported on all injectors
2 parents 9751dbb + c7e7201 commit a1ad36c

7 files changed

Lines changed: 152 additions & 50 deletions

File tree

‎src/clients/web3/connectors.ts‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,32 @@ import { getRpcUrlsByChainId } from 'constants/wallet-chains';
1010
import { Connector } from './types';
1111
import { WalletConnectV2Connector } from './walletconnectV2';
1212

13-
export const injectedConnector = new InjectedConnector({
14-
supportedChainIds: WALLET_SUPPORTED_CHAIN_IDS,
15-
});
13+
export const FILTERED_OUT_WALLETS = ['Trust Wallet', 'Coinbase Wallet', 'WalletConnect'];
1614

1715
const rpcMap = getRpcUrlsByChainId();
1816
rpcMap[WalletChainIds.TESTNET] = 'https://goerli.infura.io/v3/54af4f71d6c44e0ea83badb0886458f9';
1917

20-
const walletConnectV2Connector = new WalletConnectV2Connector({
18+
export const injectedConnector = new InjectedConnector({
2119
supportedChainIds: WALLET_SUPPORTED_CHAIN_IDS,
20+
});
21+
22+
const infinityWalletConnector = new InfinityWalletConnector({
23+
supportedChainIds: WALLET_SUPPORTED_CHAIN_IDS,
24+
});
25+
26+
//
27+
// Below are the 3 connectors in which onyx chain is not supported,
28+
// above are all of the multi-chain supported injectors
29+
//
30+
31+
const trustWalletConnector = new InjectedConnector({
32+
supportedChainIds: [WalletChainIds.MAINNET],
33+
});
34+
35+
const walletConnectConnector = new WalletConnectV2Connector({
36+
supportedChainIds: [WalletChainIds.MAINNET],
2237
rpcMap,
23-
chains: WALLET_SUPPORTED_CHAIN_IDS as [number, ...number[]],
38+
chains: [WalletChainIds.MAINNET],
2439
qrcode: true,
2540
});
2641

@@ -31,19 +46,15 @@ const binanceChainWalletConnector = new BscConnector({
3146
const coinbaseWalletConnector = new WalletLinkConnector({
3247
url: config.rpcUrl,
3348
appName: 'Onyx',
34-
supportedChainIds: WALLET_SUPPORTED_CHAIN_IDS,
35-
});
36-
37-
const infinityWalletConnector = new InfinityWalletConnector({
38-
supportedChainIds: WALLET_SUPPORTED_CHAIN_IDS,
49+
supportedChainIds: [WalletChainIds.MAINNET],
3950
});
4051

4152
export const connectorsByName = {
4253
[Connector.MetaMask]: injectedConnector,
4354
[Connector.BraveWallet]: injectedConnector,
44-
[Connector.WalletConnect]: walletConnectV2Connector,
55+
[Connector.WalletConnect]: walletConnectConnector,
4556
[Connector.CoinbaseWallet]: coinbaseWalletConnector,
46-
[Connector.TrustWallet]: injectedConnector,
57+
[Connector.TrustWallet]: trustWalletConnector,
4758
[Connector.BinanceChainWallet]: binanceChainWalletConnector,
4859
[Connector.InfinityWallet]: infinityWalletConnector,
4960
[Connector.OperaWallet]: injectedConnector,

‎src/clients/web3/useWalletDetection.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
3+
import { Connector } from 'clients/web3';
4+
import { WALLETS } from 'components/AuthModal/constants';
5+
6+
import {
7+
detectInjectedWallet,
8+
getActualConnector,
9+
shouldHideChainSwitching,
10+
} from './walletDetectionUtils';
11+
12+
export const useWalletDetection = (accountConnector?: Connector) => {
13+
const actualConnector = React.useMemo(
14+
() => getActualConnector(accountConnector),
15+
[accountConnector],
16+
);
17+
18+
const walletInfo = React.useMemo(
19+
() => WALLETS.find(wallet => wallet.connector === actualConnector) || WALLETS[0],
20+
[actualConnector],
21+
);
22+
23+
const shouldHideChainSwitch = React.useMemo(
24+
() => shouldHideChainSwitching(walletInfo.name),
25+
[walletInfo.name],
26+
);
27+
28+
return {
29+
actualConnector,
30+
walletName: walletInfo.name,
31+
walletLogo: walletInfo.Logo,
32+
shouldHideChainSwitch,
33+
detectInjectedWallet,
34+
};
35+
};

‎src/clients/web3/walletDetectionUtils.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,50 @@
1+
import { FILTERED_OUT_WALLETS } from 'clients/web3/connectors';
2+
import { Connector } from 'clients/web3/types';
3+
14
export const isRunningInOperaBrowser = () => window.ethereum?.isOpera;
25

36
export const isRunningInBinanceChainWallet = () => !!window.BinanceChain;
7+
8+
export const detectInjectedWallet = (): Connector | null => {
9+
if (!window.ethereum) return null;
10+
11+
if (window.ethereum.isTrust) return Connector.TrustWallet;
12+
if (window.ethereum.isMetaMask && !window.ethereum.isBraveWallet) return Connector.MetaMask;
13+
if (window.ethereum.isBraveWallet) return Connector.BraveWallet;
14+
if (window.ethereum.isOpera) return Connector.OperaWallet;
15+
if (window.ethereum.isBitKeep) return Connector.BitKeep;
16+
if (window.ethereum.isOnyx) return Connector.Onyx;
17+
18+
return Connector.Browser;
19+
};
20+
21+
export const getActualConnector = (accountConnector?: Connector): Connector | null => {
22+
if (!accountConnector) return null;
23+
24+
const injectedConnectors = [
25+
Connector.MetaMask,
26+
Connector.BraveWallet,
27+
Connector.TrustWallet,
28+
Connector.OperaWallet,
29+
Connector.BitKeep,
30+
Connector.Browser,
31+
Connector.Onyx,
32+
];
33+
34+
const isInjectedConnector = injectedConnectors.includes(accountConnector);
35+
36+
if (isInjectedConnector) {
37+
return detectInjectedWallet() || accountConnector;
38+
}
39+
40+
return accountConnector;
41+
};
42+
43+
// Quick explanation: due to these wallets not supporting onyx chain, wallet connection gets broken
44+
// and they cannot actually change the change to onyx, so we use this util to hide the chain switching button
45+
46+
export const shouldHideChainSwitching = (walletName?: string): boolean => {
47+
if (!walletName) return false;
48+
49+
return FILTERED_OUT_WALLETS.includes(walletName);
50+
};

‎src/components/Layout/Header/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import AppBar from '@mui/material/AppBar';
33
import React from 'react';
44

5+
import { useWalletDetection } from 'clients/web3/useWalletDetection';
56
import { AuthContext } from 'context/AuthContext';
67

78
import ChainSwitchDropdown from '../../ChainSwitchDropdown';
@@ -14,14 +15,15 @@ import { useStyles } from './styles';
1415
const Header: React.FC = () => {
1516
const styles = useStyles();
1617
const { account } = React.useContext(AuthContext);
18+
const { shouldHideChainSwitch } = useWalletDetection(account?.connector);
1719

1820
return (
1921
<AppBar position="relative" css={styles.appBar}>
2022
<Toolbar css={styles.toolbar}>
2123
<Title />
2224
<div css={styles.ctaContainer}>
2325
<ClaimXcnRewardButton />
24-
{account && <ChainSwitchDropdown />}
26+
{account && !shouldHideChainSwitch && <ChainSwitchDropdown />}
2527
<ConnectButton />
2628
</div>
2729
</Toolbar>

‎src/components/Layout/Sidebar/index.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import { ReactComponent as LogoNoText } from 'assets/img/xcnLogoPure.svg';
1515
import { ReactComponent as LogoNoTextB } from 'assets/img/xcnLogoPureB.svg';
1616
import { ReactComponent as LogoDesktop } from 'assets/img/xcnLogoWithText.svg';
1717
import { ReactComponent as LogoDesktopB } from 'assets/img/xcnLogoWithTextB.svg';
18+
import { useWalletDetection } from 'clients/web3/useWalletDetection';
19+
import { AuthContext } from 'context/AuthContext';
1820
import { ThemeContext } from 'context/ThemeContext';
1921

2022
import ChainSwitchDropdown from '../../ChainSwitchDropdown';
@@ -30,6 +32,7 @@ import { useStyles } from './styles';
3032

3133
export const SidebarUi: React.FC = () => {
3234
const { mode } = React.useContext(ThemeContext);
35+
const { account } = React.useContext(AuthContext);
3336
const { chainId, active: isConnected } = useWeb3React();
3437

3538
const [anchorEl, setAnchorEl] = useState<Element | null>(null);
@@ -41,6 +44,8 @@ export const SidebarUi: React.FC = () => {
4144
const isOnOnyxChain = chainId === ONYX_CHAIN_ID;
4245
const shouldShowAddNetwork = isConnected && !isOnOnyxChain;
4346

47+
const { shouldHideChainSwitch } = useWalletDetection(account?.connector);
48+
4449
const openMenu = (event: React.MouseEvent) => {
4550
setAnchorEl(event.currentTarget);
4651
};
@@ -193,7 +198,9 @@ export const SidebarUi: React.FC = () => {
193198
<div css={styles.flexRow}>
194199
<Icon name="logoMobile" css={styles.mobileLogo} />
195200

196-
{isConnected && <ChainSwitchDropdown showOnlyImage css={styles.mobileChainDropdown} />}
201+
{isConnected && !shouldHideChainSwitch && (
202+
<ChainSwitchDropdown showOnlyImage css={styles.mobileChainDropdown} />
203+
)}
197204
<ConnectButton small fullWidth css={styles.mobileConnectButton} />
198205

199206
<button type="button" onClick={openMenu} css={styles.actionButton}>

‎src/config/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ const chainId: EthChainId = process.env.REACT_APP_CHAIN_ID
2727

2828
export const WALLET_SUPPORTED_CHAIN_IDS: number[] = [
2929
WalletChainIds.MAINNET,
30-
WalletChainIds.BSC,
31-
WalletChainIds.BASE,
30+
// WalletChainIds.BSC,
31+
// WalletChainIds.BASE,
3232
WalletChainIds.ONYX,
3333
];
3434

‎src/constants/wallet-chains.ts‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -28,40 +28,40 @@ export const SUPPORTED_CHAINS: SupportedChain[] = [
2828
blockExplorerUrls: ['https://etherscan.io'],
2929
},
3030
},
31-
{
32-
id: WalletChainIds.BSC,
33-
name: 'bsc',
34-
displayName: 'BSC',
35-
icon: 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/smartchain/info/logo.png',
36-
config: {
37-
chainId: '0x38',
38-
chainName: 'Binance Smart Chain',
39-
rpcUrls: ['https://binance.llamarpc.com'],
40-
nativeCurrency: {
41-
name: 'Binance Coin',
42-
symbol: 'BNB',
43-
decimals: 18,
44-
},
45-
blockExplorerUrls: ['https://bscscan.com'],
46-
},
47-
},
48-
{
49-
id: WalletChainIds.BASE,
50-
name: 'base',
51-
displayName: 'Base',
52-
icon: 'https://images.mirror-media.xyz/publication-images/cgqxxPdUFBDjgKna_dDir.png?height=1200&width=1200',
53-
config: {
54-
chainId: '0x2105',
55-
chainName: 'Base',
56-
rpcUrls: ['https://base.llamarpc.com'],
57-
nativeCurrency: {
58-
name: 'Ether',
59-
symbol: 'ETH',
60-
decimals: 18,
61-
},
62-
blockExplorerUrls: ['https://basescan.org'],
63-
},
64-
},
31+
// {
32+
// id: WalletChainIds.BSC,
33+
// name: 'bsc',
34+
// displayName: 'BSC',
35+
// icon: 'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/smartchain/info/logo.png',
36+
// config: {
37+
// chainId: '0x38',
38+
// chainName: 'Binance Smart Chain',
39+
// rpcUrls: ['https://binance.llamarpc.com'],
40+
// nativeCurrency: {
41+
// name: 'Binance Coin',
42+
// symbol: 'BNB',
43+
// decimals: 18,
44+
// },
45+
// blockExplorerUrls: ['https://bscscan.com'],
46+
// },
47+
// },
48+
// {
49+
// id: WalletChainIds.BASE,
50+
// name: 'base',
51+
// displayName: 'Base',
52+
// icon: 'https://images.mirror-media.xyz/publication-images/cgqxxPdUFBDjgKna_dDir.png?height=1200&width=1200',
53+
// config: {
54+
// chainId: '0x2105',
55+
// chainName: 'Base',
56+
// rpcUrls: ['https://base.llamarpc.com'],
57+
// nativeCurrency: {
58+
// name: 'Ether',
59+
// symbol: 'ETH',
60+
// decimals: 18,
61+
// },
62+
// blockExplorerUrls: ['https://basescan.org'],
63+
// },
64+
// },
6565
{
6666
id: WalletChainIds.ONYX,
6767
name: 'onyx',

0 commit comments

Comments
 (0)