Files
0c5a297834 "Add chain" button in the header (#3084)
* redesign "add chain" button

* fix wallet detection

* [skip ci] update default value for ENV

* fix tests

* return button to the footer and add source to mixpanel event

* regcred from helmfile for review

* [skip ci] remove wallets env from values for demo stand

* use react-query to cache detection result

* add cookie to hide button in the topbar

* add prefix to svg ids to fix rabby icon

* update screenshot

* remove unnecessary comment

---------

Co-authored-by: Nick Zenchik <[email protected]>
2025-11-17 18:15:21 +01:00

79 lines
2.3 KiB
TypeScript

import type { WalletType } from 'types/client/wallets';
import type { WalletProvider } from 'types/web3';
const isWalletProvider = (wallet: WalletType) => (provider: WalletProvider): boolean | undefined => {
switch (wallet) {
case 'rabby': {
return provider.isRabby;
}
case 'coinbase': {
return provider.isCoinbaseWallet;
}
case 'token_pocket': {
return provider.isTokenPocket;
}
case 'okx': {
return provider.isOkxWallet;
}
case 'trust': {
return provider.isTrustWallet;
}
case 'metamask': {
// some wallets (e.g TokenPocket, Liquality, etc) try to look like MetaMask but they are not (not even close)
// found this hack in wagmi repo
// https://github.com/wevm/wagmi/blob/8c35b7adccb4f92c4e0e36a76b970e9126053772/packages/core/src/connectors/injected.ts#L553
if (!provider.isMetaMask) {
return false;
}
if (!provider._events || !provider._state) {
return false;
}
// Other wallets that try to look like MetaMask
const flags = [
'isApexWallet',
'isAvalanche',
'isBitKeep',
'isBlockWallet',
'isKuCoinWallet',
'isMathWallet',
'isOkxWallet',
'isOKExWallet',
'isOneInchIOSWallet',
'isOneInchAndroidWallet',
'isOpera',
'isPhantom',
'isPortal',
'isRabby',
'isRainbow',
'isTokenPocket',
'isTokenary',
'isUniswapWallet',
'isZerion',
] ;
for (const flag of flags) {
if (provider[flag as keyof WalletProvider]) {
return false;
}
}
return true;
}
default:
return false;
}
};
export default function detectWallet(wallet: WalletType): { wallet: WalletType; provider: WalletProvider } | undefined {
if (!('ethereum' in window && window.ethereum)) {
return;
}
// if user has multiple wallets installed, they all are injected in the window.ethereum.providers array
// if user has only one wallet, the provider is injected in the window.ethereum directly
const providers = Array.isArray(window.ethereum.providers) ? window.ethereum.providers : [ window.ethereum ];
const provider = providers.find(isWalletProvider(wallet));
if (provider) {
return { wallet, provider };
}
}