Merge branch 'dev'

package.json

@@ -39,6 +39,7 @@
     "typegen:watch": "tsc --emitDeclarationOnly --watch"
   },
   "dependencies": {
+    "react-device-detect": "^2.2.3",
     "react-modal": "^3.16.1"
   },
   "devDependencies": {

src/components/connectModal/WalletItem.tsx

@@ -1,3 +1,4 @@
+import { getDownloadUrlByKey } from '../../utils/index';
 import styles from './index.module.scss';
 
 type Iprops = {
@@ -21,12 +22,12 @@ const WalletItem = ({ walletIcon, walletName, installed }: Iprops) => {
         <div>{walletName}</div>
       </div>
       <div className={styles.right}>
-        {/* {
+        {
           !installed && <div className={styles.install} onClick={() => {
             const url = getDownloadUrlByKey(walletName)
             url && window.open(url)
           }}>Install</div>
-        } */}
+        }
       </div>
     </div>
   )

src/components/connectModal/index.module.scss

@@ -3,10 +3,12 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: white;
+  background-color: #ffffff;
   min-width: 508px;
+  width: 680px;
   @media only screen and (max-width: 600px) {
     min-width: 100%;
+    width: 100%;
   }
   height: 600px;
   min-height: 200px;
@@ -50,7 +52,7 @@
       align-items: center;
       justify-content: space-between;
       margin-bottom: 16px;
-      padding: 12px 24px;
+      padding: 10px 24px;
       cursor: pointer;
       border: 1px solid #000;
       border-radius: 4px;
@@ -62,6 +64,8 @@
         gap: 16px;
         align-items: center;
         white-space: nowrap;
+        font-weight: bold;
+        font-size: 1rem;
         @media only screen and (max-width: 600px) {
           gap: 10px;
         }

src/components/connectModal/index.tsx

@@ -12,7 +12,7 @@ import ModalHeader from "./ModalHeader";
 import { useConnectModal, useConnector as useBtcConnector } from '@particle-network/btc-connectkit';
 import styles from './index.module.scss';
 import { useB2Disconnect } from "../../hooks/useB2Disconnect";
-import { WalletIconConf, btcWalletNameTransformer, checkWalletInstall, defaultInstalledMap, evmWalletNameTransformer, getBtcWalletName } from "../../utils/wallet";
+import { btcWalletNameTransformer, checkWalletInstall, defaultInstalledMap, evmWalletNameTransformer, getBtcWalletName, getWalletIconByName } from "../../utils/wallet";
 
 
 const SubTitle = ({ title }: { title: string }) => {
@@ -42,9 +42,7 @@ const ConnectModal = ({ collection }: { collection: WalletCollection }) => {
     return collection === WalletCollection.ALL || collection === WalletCollection.BTC
   }, [collection])
 
-  const getImageUrl = (wallet: string) => {
-    return WalletIconConf.find(v => wallet?.toLocaleLowerCase().includes(v.name))?.icon || ''
-  }
+
 
   const getInstalled = useCallback((wallet: string, walletType: 'evm' | 'btc') => {
     if (walletType === 'evm') {
@@ -126,7 +124,7 @@ const ConnectModal = ({ collection }: { collection: WalletCollection }) => {
                           handleClickEthWallet(c)
                         }
                       }} key={c.name}>
-                      <WalletItem installed={installed} walletIcon={getImageUrl(c.name) || c.icon} walletName={c.name} />
+                      <WalletItem installed={installed} walletIcon={getWalletIconByName(c.name) || c.icon} walletName={c.name} />
                     </div>
                   )
                 })
@@ -150,7 +148,7 @@ const ConnectModal = ({ collection }: { collection: WalletCollection }) => {
                           connectBtcWallet(c.metadata.id)
                         }
                       }}>
-                      <WalletItem installed={installed} walletIcon={getImageUrl(c.metadata.id)} walletName={name} />
+                      <WalletItem installed={installed} walletIcon={getWalletIconByName(c.metadata.id)} walletName={name} />
                     </div>
                   )
                 })

src/context/index.tsx

@@ -57,14 +57,7 @@ export const B2ModalProvider: FC<{ children: ReactNode, isAutoConnect?: boolean,
 
   const autoConnect = async () => {
     const w = getWalletFromLocal()
-    if (
-      w === WalletTypes.WALLET_METAMASK ||
-      w === WalletTypes.WALLET_OKX_EVM ||
-      w === WalletTypes.WALLET_GATE ||
-      w === WalletTypes.WALLET_BYBIT_EVM ||
-      w === WalletTypes.WALLET_COIN98_EVM ||
-      w === WalletTypes.WALLET_FOX_EVM
-    ) {
+    if (w && EvmWalletArr.includes(w)) {
       setCurrentWallet(w)
       return
     }
@@ -89,6 +82,18 @@ export const B2ModalProvider: FC<{ children: ReactNode, isAutoConnect?: boolean,
       await connect("fox")
       setCurrentWallet(w)
       return
+    } if (w === WalletTypes.WALLET_XVERSE && !isBtcConnected) {
+      await connect("xverse")
+      setCurrentWallet(w)
+      return
+    } if (w === WalletTypes.WALLET_BINANCE_BTC && !isBtcConnected) {
+      await connect("binance")
+      setCurrentWallet(w)
+      return
+    } if (w === WalletTypes.WALLET_BITGET_BTC && !isBtcConnected) {
+      await connect("bitget")
+      setCurrentWallet(w)
+      return
     }
   }
 

src/types/index.d.ts

@@ -21,6 +21,10 @@ interface Window {
   tomo_btc: any,
   coin98: any,
   foxwallet: any,
+  tokenpocket: any,
+  bitkeep: any,
+  XverseProviders: any,
+  binancew3w: any,
   unisat: {
     requestAccounts: () => Promise<string[]>;
     getPublicKey: () => Promise<string>;

src/utils/index.ts

@@ -1,13 +1,30 @@
 const UnisatDownload = 'https://unisat.io/download'
-const MetamaskDownload = 'https://support.metamask.io/hc/en-us/articles/360015489531-Getting-started-with-MetaMask'
+const MetamaskDownload = 'https://metamask.io/download/'
 const OkxDownLoad = 'https://chromewebstore.google.com/detail/%E6%AC%A7%E6%98%93-web3-%E9%92%B1%E5%8C%85/mcohilncbfahbmgdjkbpemcciiolgcge'
 const GateDownLoad = 'https://chromewebstore.google.com/detail/gate-wallet/cpmkedoipcpimgecpmgpldfpohjplkpp'
+const FoxDownload = 'https://foxwallet.com/download'
+const TokenpocketDownload = 'https://www.tokenpocket.pro/en/download/app'
+const XverseDownload = 'https://www.xverse.app/download'
+const Coin98Download = 'https://coin98.com/wallet'
+const BinanceDownload = 'https://www.binance.com/en/download'
+const TomoDownload = 'https://tomo.inc/'
+const BybitDownload = 'https://www.bybit.com/en/download/'
+const BitgetDownload = 'https://www.bitget.com/zh-CN/download'
+
+
 export const getDownloadUrlByKey = (wallet: string) => {
   if (wallet?.toLocaleLowerCase().includes('okx')) return OkxDownLoad
   if (wallet?.toLocaleLowerCase().includes('unisat')) return UnisatDownload
   if (wallet?.toLocaleLowerCase().includes('metamask')) return MetamaskDownload
   if (wallet?.toLocaleLowerCase().includes('gate')) return GateDownLoad
-  return ''
+  if (wallet?.toLocaleLowerCase().includes('fox')) return FoxDownload
+  if (wallet?.toLocaleLowerCase().includes('tokenpocket')) return TokenpocketDownload
+  if (wallet?.toLocaleLowerCase().includes('xverse')) return XverseDownload
+  if (wallet?.toLocaleLowerCase().includes('coin98')) return Coin98Download
+  if (wallet?.toLocaleLowerCase().includes('binance')) return BinanceDownload
+  if (wallet?.toLocaleLowerCase().includes('tomo')) return TomoDownload
+  if (wallet?.toLocaleLowerCase().includes('bybit')) return BybitDownload
+  if (wallet?.toLocaleLowerCase().includes('bitget')) return BitgetDownload
 }
 
 export * from './localStorage'

src/utils/localStorage.ts

@@ -11,7 +11,7 @@ export const saveWalletToLocal = (w: WalletTypes) => {
 }
 
 export const getWalletFromLocal = () => {
-  return localStorage.getItem(KEY_WALLET) || undefined
+  return localStorage.getItem(KEY_WALLET) as WalletTypes || undefined
 }
 export const clearWalletFromLocal = () => {
   localStorage.removeItem(KEY_WALLET)

src/utils/wallet/index.ts

@@ -1,22 +1,19 @@
 import { WalletTypes } from "./types";
-import iconMetamask from '../../imgs/icon_metamask.png'
-import iconOkx from '../../imgs/icon_okx.svg'
-import iconGate from '../../imgs/icon_gate.svg'
-import iconTomo from '../../imgs/tomo.png'
-import iconUnisat from '../../imgs/icon_unisat.svg'
-import iconBybit from '../../imgs/bybit.png'
-import iconCoin98 from '../../imgs/icon_coin98.svg'
-import iconFox from '../../imgs/icon_fox.png'
+import { isMobile } from 'react-device-detect'
+
 export type InstalledObj = Record<WalletTypes, boolean>
-export type EvmConnectorName = 'gate' | 'metamask' | 'bybit' | 'okx' | 'fox'
+export type EvmConnectorName = 'gate' | 'metamask' | 'bybit' | 'okx' | 'fox' | 'tokenpocket' | 'bitget' | 'binance' | 'tomo' | 'coin98'
 
 export const BtcWalletArr = [
   WalletTypes.WALLET_OKX_BTC,
   WalletTypes.WALLET_TOMO_BTC,
   WalletTypes.WALLET_UNISAT,
   WalletTypes.WALLET_BYBIT_BTC,
   WalletTypes.WALLET_COIN98_BTC,
-  WalletTypes.WALLET_FOX_BTC
+  WalletTypes.WALLET_FOX_BTC,
+  WalletTypes.WALLET_BITGET_BTC,
+  WalletTypes.WALLET_BINANCE_BTC,
+  WalletTypes.WALLET_XVERSE
 ]
 export const EvmWalletArr = [
   WalletTypes.WALLET_GATE,
@@ -25,7 +22,10 @@ export const EvmWalletArr = [
   WalletTypes.WALLET_OKX_EVM,
   WalletTypes.WALLET_TOMO_EVM,
   WalletTypes.WALLET_COIN98_EVM,
-  WalletTypes.WALLET_FOX_EVM
+  WalletTypes.WALLET_FOX_EVM,
+  WalletTypes.WALLET_BITGET_EVM,
+  WalletTypes.WALLET_TOKENPOCKET,
+  WalletTypes.WALLET_BINANCE_EVM
 ]
 export const defaultInstalledMap: InstalledObj = {
   metamask: false,
@@ -40,7 +40,13 @@ export const defaultInstalledMap: InstalledObj = {
   coin98_btc: false,
   coin98_evm: false,
   fox_btc: false,
-  fox_evm: false
+  fox_evm: false,
+  tokenpocket: false,
+  bitget_evm: false,
+  bitget_btc: false,
+  binance_evm: false,
+  binance_btc: false,
+  xverse: false
 }
 
 export const evmWalletNameTransformer = (wallet: string): WalletTypes | undefined => {
@@ -66,6 +72,15 @@ export const evmWalletNameTransformer = (wallet: string): WalletTypes | undefine
   if (wallet?.toLocaleLowerCase().includes('fox')) {
     name = WalletTypes.WALLET_FOX_EVM
   }
+  if (wallet?.toLocaleLowerCase().includes('bitget')) {
+    name = WalletTypes.WALLET_BITGET_EVM
+  }
+  if (wallet?.toLocaleLowerCase().includes('tokenpocket')) {
+    name = WalletTypes.WALLET_TOKENPOCKET
+  }
+  if (wallet?.toLocaleLowerCase().includes('binance')) {
+    name = WalletTypes.WALLET_BINANCE_EVM
+  }
   return name
 }
 
@@ -89,6 +104,13 @@ export const btcWalletNameTransformer = (wallet: string): WalletTypes | undefine
   if (wallet?.toLocaleLowerCase().includes('fox')) {
     name = WalletTypes.WALLET_FOX_BTC
   }
+  if (wallet?.toLocaleLowerCase().includes('xverse')) {
+    name = WalletTypes.WALLET_XVERSE
+  } if (wallet?.toLocaleLowerCase().includes('bitget')) {
+    name = WalletTypes.WALLET_BITGET_BTC
+  } if (wallet?.toLocaleLowerCase().includes('binance')) {
+    name = WalletTypes.WALLET_BINANCE_BTC
+  }
   return name
 }
 
@@ -119,6 +141,19 @@ export const checkWalletInstall = (i: InstalledObj): InstalledObj => {
     installed.fox_btc = true
     installed.fox_evm = true
   }
+  if (!isMobile) {
+    installed.binance_evm = true
+  }
+  if (window?.binancew3w?.bitcoin) {
+    installed.binance_btc = true
+  }
+  if (window.bitkeep) {
+    installed.bitget_btc = true;
+    installed.bitget_evm = true;
+  }
+  if (window.tokenpocket) {
+    installed.tokenpocket = true;
+  }
   return installed
 }
 export const getBtcWalletName = (wallet: string) => {
@@ -128,27 +163,24 @@ export const getBtcWalletName = (wallet: string) => {
   if (wallet.toLocaleLowerCase().includes('bybit')) return 'Bybit Wallet'
   if (wallet.toLocaleLowerCase().includes('coin98')) return 'Coin98 Wallet'
   if (wallet.toLocaleLowerCase().includes('fox')) return 'Fox Wallet'
+  if (wallet.toLocaleLowerCase().includes('bitget')) return 'Bitget Wallet'
+  if (wallet.toLocaleLowerCase().includes('xverse')) return 'Xverse Wallet'
+  if (wallet.toLocaleLowerCase().includes('binance')) return 'Binance Wallet'
   return ''
 }
-export const WalletIconConf = [
-  {
-    name: 'metamask', icon: iconMetamask,
-  }, {
-    name: 'okx', icon: iconOkx,
-  }, {
-    name: 'unisat', icon: iconUnisat,
-  }, {
-    name: 'tomo', icon: iconTomo,
-  },
-  {
-    name: 'bybit', icon: iconBybit
-  },
-  {
-    name: 'gate', icon: iconGate
-  },
-  {
-    name: 'coin98', icon: iconCoin98
-  }, {
-    name: 'fox', icon: iconFox
-  }
-]
+
+export const getWalletIconByName = (name: string) => {
+  if (name.toLowerCase().includes('metamask')) return 'https://b2-static.bsquared.network/wallet/metamask.png';
+  if (name.toLowerCase().includes('okx')) return 'https://b2-static.bsquared.network/wallet/okx.png'
+  if (name.toLowerCase().includes('unisat')) return 'https://b2-static.bsquared.network/wallet/unisat.png'
+  if (name.toLowerCase().includes('tomo')) return 'https://b2-static.bsquared.network/wallet/tomo.png'
+  if (name.toLowerCase().includes('bybit')) return 'https://b2-static.bsquared.network/wallet/bybit.png'
+  if (name.toLowerCase().includes('coin98')) return 'https://b2-static.bsquared.network/wallet/icon_coin98.svg'
+  if (name.toLowerCase().includes('fox')) return 'https://b2-static.bsquared.network/wallet/icon_fox.png'
+  if (name.toLowerCase().includes('binance')) return 'https://b2-static.bsquared.network/wallet/icon_binance.svg'
+  if (name.toLowerCase().includes('tokenpocket')) return 'https://b2-static.bsquared.network/wallet/tokenpocket.svg'
+  if (name.toLowerCase().includes('gate')) return 'https://b2-static.bsquared.network/wallet/icon_gate.svg'
+  if (name.toLowerCase().includes('bitget')) return 'https://b2-static.bsquared.network/wallet/bitget_wallet.png'
+  if (name.toLowerCase().includes('xverse')) return 'https://b2-static.bsquared.network/wallet/xverse.png'
+  return ''
+}

src/utils/wallet/types.ts

@@ -20,7 +20,13 @@ export enum WalletTypes {
   WALLET_COIN98_BTC = 'coin98_btc',
   WALLET_COIN98_EVM = 'coin98_evm',
   WALLET_FOX_BTC = 'fox_btc',
-  WALLET_FOX_EVM = 'fox_evm'
+  WALLET_FOX_EVM = 'fox_evm',
+  WALLET_BITGET_EVM = 'bitget_evm',
+  WALLET_BITGET_BTC = 'bitget_btc',
+  WALLET_XVERSE = 'xverse',
+  WALLET_TOKENPOCKET = 'tokenpocket',
+  WALLET_BINANCE_EVM = 'binance_evm',
+  WALLET_BINANCE_BTC = 'binance_btc'
 }
 
 export enum ChainType {

yarn.lock

@@ -3674,6 +3674,13 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
+react-device-detect@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.npmmirror.com/react-device-detect/-/react-device-detect-2.2.3.tgz#97a7ae767cdd004e7c3578260f48cf70c036e7ca"
+  integrity sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==
+  dependencies:
+    ua-parser-js "^1.0.33"
+
 react-dom@^18:
   version "18.2.0"
   resolved "https://registry.npmmirror.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -4147,6 +4154,11 @@ tslib@^2.1.0:
   resolved "https://registry.npmmirror.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
   integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
 
+ua-parser-js@^1.0.33:
+  version "1.0.39"
+  resolved "https://registry.npmmirror.com/ua-parser-js/-/ua-parser-js-1.0.39.tgz#bfc07f361549bf249bd8f4589a4cccec18fd2018"
+  integrity sha512-k24RCVWlEcjkdOxYmVJgeD/0a1TiSpqLg+ZalVGV9lsnr4yqu0w7tX/x2xX6G4zpkgQnRf89lxuZ1wsbjXM8lw==
+
 ufo@^1.3.0, ufo@^1.3.1, ufo@^1.3.2:
   version "1.4.0"
   resolved "https://registry.npmjs.org/ufo/-/ufo-1.4.0.tgz#39845b31be81b4f319ab1d99fd20c56cac528d32"