From 7914da19fd734a5db081f2b813909f187e199cf2 Mon Sep 17 00:00:00 2001 From: Jayesh Bhole <111138421+jayeshbhole-rp@users.noreply.github.com> Date: Thu, 9 Jan 2025 18:17:19 +0530 Subject: [PATCH] fix(react evm): only show injected when no wallets are discovered --- example/package.json | 3 +- example/src/components/Providers.tsx | 4 + packages/react/CHANGELOG.md | 6 ++ packages/react/package.json | 2 +- .../src/connectors/evm/walletConfigs.tsx | 1 + packages/react/src/hooks/useWallets.ts | 31 ++++--- pnpm-lock.yaml | 88 +++++++++++++++++++ 7 files changed, 119 insertions(+), 16 deletions(-) diff --git a/example/package.json b/example/package.json index 102c4e95..06a2ef6e 100644 --- a/example/package.json +++ b/example/package.json @@ -17,7 +17,8 @@ "crypto": "npm:crypto-browserify", "react": "^18.2.0", "react-dom": "^18.2.0", - "stream": "npm:stream-browserify" + "stream": "npm:stream-browserify", + "wagmi": "2.14.6" }, "devDependencies": { "@types/react": "^18.2.66", diff --git a/example/src/components/Providers.tsx b/example/src/components/Providers.tsx index 26da68ad..1734ce9e 100644 --- a/example/src/components/Providers.tsx +++ b/example/src/components/Providers.tsx @@ -3,6 +3,7 @@ import { TangledContextProvider, solana } from '@tangled3/react'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { ReactNode } from 'react'; +import { injected } from 'wagmi'; const queryClient = new QueryClient(); @@ -23,6 +24,9 @@ const Providers = ({ children }: { children: ReactNode }) => { }, }, + chainConnectors: { + evm: [injected()], + }, projectId: '41980758771052df3f01be0a46f172a5', bitcoinNetwork: 'mainnet', }} diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index f9ed9e33..24d21937 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -1,5 +1,11 @@ # @tangled3/react +## 1.16.21 + +### Patch Changes + +- fix only show injected if no other wallets are discovered + ## 1.16.20 ### Patch Changes diff --git a/packages/react/package.json b/packages/react/package.json index 0cc8e5bb..7e2af03b 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@tangled3/react", "private": false, - "version": "1.16.20", + "version": "1.16.21", "type": "module", "license": "MIT", "main": "./src/index.ts", diff --git a/packages/react/src/connectors/evm/walletConfigs.tsx b/packages/react/src/connectors/evm/walletConfigs.tsx index 5285193d..be53d0b9 100644 --- a/packages/react/src/connectors/evm/walletConfigs.tsx +++ b/packages/react/src/connectors/evm/walletConfigs.tsx @@ -86,6 +86,7 @@ export const walletConfigs: { name: typeof window !== 'undefined' && window?.ethereum?.isMetaMask ? 'MetaMask' : 'Browser Wallet', isInstalled: () => (typeof window !== 'undefined' ? Boolean(window?.ethereum) : false), icon: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='35' height='33' fill='none'%3e %3cg stroke-linecap='round' stroke-linejoin='round' stroke-width='.25'%3e %3cpath fill='%23e17726' stroke='%23e17726' d='m32.958 1-13.134 9.718 2.442-5.727z'/%3e %3cg fill='%23e27625' stroke='%23e27625'%3e %3cpath d='m2.663 1 13.017 9.809-2.325-5.818zM28.23 23.534l-3.495 5.338 7.483 2.06 2.143-7.282zm-26.957.116 2.13 7.282 7.47-2.06-3.481-5.339z'/%3e %3cpath d='M10.47 14.515 8.393 17.65l7.405.337-.247-7.97zm14.68 0-5.157-4.587-.169 8.06 7.405-.337zM10.873 28.872l4.482-2.164-3.858-3.006zm9.393-2.164 4.469 2.164-.61-5.17z'/%3e %3c/g%3e %3cpath fill='%23d5bfb2' stroke='%23d5bfb2' d='m24.735 28.872-4.47-2.164.365 2.903-.04 1.23zm-13.862 0 4.157 1.97-.026-1.231.351-2.903z'/%3e %3cpath fill='%23233447' stroke='%23233447' d='m15.108 21.784-3.715-1.088 2.624-1.205zm5.405 0 1.09-2.293 2.638 1.205z'/%3e %3cpath fill='%23cc6228' stroke='%23cc6228' d='m10.873 28.872.65-5.338-4.131.116zm13.225-5.338.637 5.338 3.494-5.222zm3.132-5.884-7.406.338.689 3.796 1.09-2.293 2.638 1.205zm-15.837 3.046 2.624-1.205 1.091 2.293.689-3.796-7.405-.337z'/%3e %3cpath fill='%23e27525' stroke='%23e27525' d='m8.392 17.65 3.105 6.052-.104-3.006zm15.849 3.046-.117 3.006 3.105-6.051zm-8.444-2.708-.689 3.796.87 4.484.196-5.91zm4.027 0-.364 2.358.182 5.922.87-4.484z'/%3e %3cpath fill='%23f5841f' stroke='%23f5841f' d='m20.513 21.784-.87 4.484.623.44 3.858-3.006.117-3.006zm-9.12-1.088.104 3.006 3.858 3.006.624-.44-.87-4.484z'/%3e %3cpath fill='%23c0ac9d' stroke='%23c0ac9d' d='m20.59 30.842.04-1.231-.338-.285h-4.963l-.325.285.026 1.23-4.157-1.969 1.455 1.192 2.95 2.035h5.053l2.962-2.035 1.442-1.192z'/%3e %3cpath fill='%23161616' stroke='%23161616' d='m20.266 26.708-.624-.44H15.98l-.624.44-.35 2.903.324-.285h4.963l.338.285z'/%3e %3cpath fill='%23763e1a' stroke='%23763e1a' d='M33.517 11.353 34.62 5.99 32.958 1l-12.692 9.394 4.885 4.12 6.898 2.01 1.52-1.776-.663-.48 1.053-.958-.806-.622 1.052-.804zM1 5.989l1.117 5.364-.714.532 1.065.803-.805.622 1.052.959-.663.48 1.52 1.774 6.899-2.008 4.884-4.12L2.663 1z'/%3e %3cpath fill='%23f5841f' stroke='%23f5841f' d='m32.049 16.523-6.898-2.008 2.078 3.136-3.105 6.051 4.106-.052h6.131zM10.47 14.515l-6.898 2.008-2.3 7.127h6.12l4.105.052-3.105-6.051zm9.354 3.473.442-7.594 2-5.403h-8.911l2 5.403.442 7.594.169 2.384.013 5.896h3.663l.013-5.896z'/%3e %3c/g%3e %3c/svg%3e", + url: 'https://metamask.io/download/', }, 'metaMask, metaMask-io, io.metamask, io.metamask.mobile, metaMaskSDK': { name: 'MetaMask', diff --git a/packages/react/src/hooks/useWallets.ts b/packages/react/src/hooks/useWallets.ts index 4cce7e2b..51deafd2 100644 --- a/packages/react/src/hooks/useWallets.ts +++ b/packages/react/src/hooks/useWallets.ts @@ -53,26 +53,29 @@ export const useWallets = (options?: UseWalletsOptions): { [key in ChainType]: W .indexOf(connector.id) !== -1, ); + const walletConfig = walletId ? walletConfigs[walletId] : undefined; + + // walletconnect, coinbase wallet are supported by default + if (evmConnectors.length > 3 && connector.id === 'injected') { + return undefined; + } + + const isInjected = connector.type === 'injected' && connector.id !== 'metaMask'; + let isInstalled = isInjected; + if (walletConfig?.isInstalled) { + isInstalled = + typeof walletConfig.isInstalled === 'function' ? walletConfig.isInstalled() : walletConfig.isInstalled; + } + const c: Wallet<'evm'> = { id: connector.id, - name: connector.name ?? connector.id ?? connector.type, - icon: connector.icon ?? '', + name: walletConfig?.name || connector.name || connector.id || connector.type, + icon: connector.icon ?? walletConfig?.icon ?? '', connector, - installed: connector.type === 'injected' && connector.id !== 'metaMask', + installed: isInstalled, type: 'evm', }; - if (walletId) { - const wallet = walletConfigs[walletId]; - if (wallet.hide) return undefined; - - return { - ...c, - ...wallet, - installed: typeof wallet.isInstalled === 'function' ? wallet.isInstalled() : wallet.isInstalled, - }; - } - return c; }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4be8a012..90e5ba2a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -86,6 +86,9 @@ importers: stream: specifier: npm:stream-browserify version: stream-browserify@3.0.0 + wagmi: + specifier: 2.14.6 + version: 2.14.6(@tanstack/query-core@5.44.0)(@tanstack/react-query@5.44.0(react@18.3.1))(@types/react@18.3.3)(bufferutil@4.0.8)(react@18.3.1)(typescript@5.4.5)(utf-8-validate@5.0.10)(viem@2.22.3(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8))(zod@3.23.8) devDependencies: '@types/react': specifier: ^18.2.66 @@ -1325,6 +1328,7 @@ packages: '@confio/ics23@0.6.8': resolution: {integrity: sha512-wB6uo+3A50m0sW/EWcU64xpV/8wShZ6bMTa7pF8eYsTrSkQA7oLUIJcs/wb8g4y2Oyq701BaGiO6n/ak5WXO1w==} + deprecated: Unmaintained. The codebase for this package was moved to https://github.com/cosmos/ics23 but then the JS implementation was removed in https://github.com/cosmos/ics23/pull/353. Please consult the maintainers of https://github.com/cosmos for further assistance. '@cosmjs/amino@0.27.1': resolution: {integrity: sha512-w56ar/nK9+qlvWDpBPRmD0Blk2wfkkLqRi1COs1x7Ll1LF0AtkIBUjbRKplENLbNovK0T3h+w8bHiFm+GBGQOA==} @@ -15006,6 +15010,41 @@ snapshots: - utf-8-validate - zod + '@wagmi/connectors@5.7.3(@types/react@18.3.3)(@wagmi/core@2.16.3(@tanstack/query-core@5.44.0)(@types/react@18.3.3)(react@18.3.1)(typescript@5.4.5)(use-sync-external-store@1.2.0(react@18.3.1))(viem@2.22.3(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8)))(bufferutil@4.0.8)(react@18.3.1)(typescript@5.4.5)(utf-8-validate@5.0.10)(viem@2.22.3(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8))(zod@3.23.8)': + dependencies: + '@coinbase/wallet-sdk': 4.2.3 + '@metamask/sdk': 0.31.4(bufferutil@4.0.8)(utf-8-validate@5.0.10) + '@safe-global/safe-apps-provider': 0.18.5(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8) + '@safe-global/safe-apps-sdk': 9.1.0(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8) + '@wagmi/core': 2.16.3(@tanstack/query-core@5.44.0)(@types/react@18.3.3)(react@18.3.1)(typescript@5.4.5)(use-sync-external-store@1.2.0(react@18.3.1))(viem@2.22.3(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8)) + '@walletconnect/ethereum-provider': 2.17.0(@react-native-async-storage/async-storage@1.23.1(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.3.3)(bufferutil@4.0.8)(react@18.3.1)(utf-8-validate@5.0.10)))(@types/react@18.3.3)(bufferutil@4.0.8)(react@18.3.1)(utf-8-validate@5.0.10) + cbw-sdk: '@coinbase/wallet-sdk@3.9.3' + viem: 2.22.3(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8) + optionalDependencies: + typescript: 5.4.5 + transitivePeerDependencies: + - '@azure/app-configuration' + - '@azure/cosmos' + - '@azure/data-tables' + - '@azure/identity' + - '@azure/keyvault-secrets' + - '@azure/storage-blob' + - '@capacitor/preferences' + - '@netlify/blobs' + - '@planetscale/database' + - '@react-native-async-storage/async-storage' + - '@types/react' + - '@upstash/redis' + - '@vercel/kv' + - bufferutil + - encoding + - ioredis + - react + - supports-color + - uWebSockets.js + - utf-8-validate + - zod + '@wagmi/core@1.4.13(@react-native-async-storage/async-storage@1.23.1(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.3.3)(bufferutil@4.0.8)(react@18.3.1)(utf-8-validate@5.0.10)))(@types/react@18.3.3)(bufferutil@4.0.8)(immer@10.1.1)(react@18.3.1)(typescript@5.4.5)(utf-8-validate@5.0.10)(viem@0.3.50(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8))(zod@3.23.8)': dependencies: '@wagmi/connectors': 3.1.11(@react-native-async-storage/async-storage@1.23.1(react-native@0.74.2(@babel/core@7.24.7)(@babel/preset-env@7.24.7(@babel/core@7.24.7))(@types/react@18.3.3)(bufferutil@4.0.8)(react@18.3.1)(utf-8-validate@5.0.10)))(@types/react@18.3.3)(bufferutil@4.0.8)(react@18.3.1)(typescript@5.4.5)(utf-8-validate@5.0.10)(viem@0.3.50(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8))(zod@3.23.8) @@ -15069,6 +15108,21 @@ snapshots: - react - use-sync-external-store + '@wagmi/core@2.16.3(@tanstack/query-core@5.44.0)(@types/react@18.3.3)(react@18.3.1)(typescript@5.4.5)(use-sync-external-store@1.2.0(react@18.3.1))(viem@2.22.3(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8))': + dependencies: + eventemitter3: 5.0.1 + mipd: 0.0.7(typescript@5.4.5) + viem: 2.22.3(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8) + zustand: 5.0.0(@types/react@18.3.3)(immer@10.1.1)(react@18.3.1)(use-sync-external-store@1.2.0(react@18.3.1)) + optionalDependencies: + '@tanstack/query-core': 5.44.0 + typescript: 5.4.5 + transitivePeerDependencies: + - '@types/react' + - immer + - react + - use-sync-external-store + '@wallet-standard/app@1.0.1': dependencies: '@wallet-standard/base': 1.0.1 @@ -22244,6 +22298,40 @@ snapshots: - utf-8-validate - zod + wagmi@2.14.6(@tanstack/query-core@5.44.0)(@tanstack/react-query@5.44.0(react@18.3.1))(@types/react@18.3.3)(bufferutil@4.0.8)(react@18.3.1)(typescript@5.4.5)(utf-8-validate@5.0.10)(viem@2.22.3(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8))(zod@3.23.8): + dependencies: + '@tanstack/react-query': 5.44.0(react@18.3.1) + '@wagmi/connectors': 5.7.3(@types/react@18.3.3)(@wagmi/core@2.16.3(@tanstack/query-core@5.44.0)(@types/react@18.3.3)(react@18.3.1)(typescript@5.4.5)(use-sync-external-store@1.2.0(react@18.3.1))(viem@2.22.3(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8)))(bufferutil@4.0.8)(react@18.3.1)(typescript@5.4.5)(utf-8-validate@5.0.10)(viem@2.22.3(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8))(zod@3.23.8) + '@wagmi/core': 2.16.3(@tanstack/query-core@5.44.0)(@types/react@18.3.3)(react@18.3.1)(typescript@5.4.5)(use-sync-external-store@1.2.0(react@18.3.1))(viem@2.22.3(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8)) + react: 18.3.1 + use-sync-external-store: 1.2.0(react@18.3.1) + viem: 2.22.3(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.23.8) + optionalDependencies: + typescript: 5.4.5 + transitivePeerDependencies: + - '@azure/app-configuration' + - '@azure/cosmos' + - '@azure/data-tables' + - '@azure/identity' + - '@azure/keyvault-secrets' + - '@azure/storage-blob' + - '@capacitor/preferences' + - '@netlify/blobs' + - '@planetscale/database' + - '@react-native-async-storage/async-storage' + - '@tanstack/query-core' + - '@types/react' + - '@upstash/redis' + - '@vercel/kv' + - bufferutil + - encoding + - immer + - ioredis + - supports-color + - uWebSockets.js + - utf-8-validate + - zod + walker@1.0.8: dependencies: makeerror: 1.0.12