From 444c6dc1b7e61989039d093fbca9f445622b0878 Mon Sep 17 00:00:00 2001 From: Noah Saso Date: Thu, 3 Aug 2023 14:46:40 -0700 Subject: [PATCH 1/2] Support Keplr Mobile in-app browser. --- packages/state/recoil/atoms/misc.ts | 6 ++ .../stateful/components/WalletProvider.tsx | 92 +++++++++---------- .../components/wallet/WalletUiConnected.tsx | 2 +- packages/stateful/package.json | 2 +- yarn.lock | 16 ++-- 5 files changed, 61 insertions(+), 57 deletions(-) diff --git a/packages/state/recoil/atoms/misc.ts b/packages/state/recoil/atoms/misc.ts index 951d41532d..9fb99b7a0b 100644 --- a/packages/state/recoil/atoms/misc.ts +++ b/packages/state/recoil/atoms/misc.ts @@ -39,3 +39,9 @@ export const web3AuthPromptAtom = atom({ key: 'web3AuthPrompt', default: undefined, }) + +// Whether or not we are running in the Keplr Mobile in-app browser. +export const isKeplrMobileWebAtom = atom({ + key: 'isKeplrMobileWeb', + default: false, +}) diff --git a/packages/stateful/components/WalletProvider.tsx b/packages/stateful/components/WalletProvider.tsx index a90ce2190a..d13aadc54f 100644 --- a/packages/stateful/components/WalletProvider.tsx +++ b/packages/stateful/components/WalletProvider.tsx @@ -2,7 +2,6 @@ import { Chain } from '@chain-registry/types' import { GasPrice } from '@cosmjs/stargate' import { Endpoints, SignerOptions } from '@cosmos-kit/core' import { wallets as cosmostationWallets } from '@cosmos-kit/cosmostation' -import { wallets as keplrExtensionWallets } from '@cosmos-kit/keplr-extension' import { wallets as keplrMobileWallets } from '@cosmos-kit/keplr-mobile' import { wallets as leapWallets } from '@cosmos-kit/leap' import { ChainProvider, walletContext } from '@cosmos-kit/react-lite' @@ -10,6 +9,7 @@ import { wallets as stationWallets } from '@cosmos-kit/station' import { wallets as trustWallets } from '@cosmos-kit/trust' import { wallets as vectisWallets } from '@cosmos-kit/vectis' import { PromptSign, makeWeb3AuthWallets } from '@cosmos-kit/web3auth' +import { wallets as keplrExtensionWallets } from '@noahsaso/cosmos-kit-keplr-extension' import { assets, chains } from 'chain-registry' import { Dispatch, @@ -19,12 +19,14 @@ import { useContext, useEffect, useMemo, - useRef, } from 'react' import { useTranslation } from 'react-i18next' -import { useRecoilValue } from 'recoil' +import { useRecoilState, useRecoilValue } from 'recoil' -import { mountedInBrowserAtom } from '@dao-dao/state/recoil' +import { + isKeplrMobileWebAtom, + mountedInBrowserAtom, +} from '@dao-dao/state/recoil' import { Web3AuthPrompt } from '@dao-dao/types' import { CHAIN_ENDPOINTS, @@ -134,6 +136,23 @@ export const WalletProvider = ({ signingCosmwasm: getSignerOptions as SignerOptions['signingCosmwasm'], } + // Auto-connect to Keplr mobile web if in that context. + const mountedInBrowser = useRecoilValue(mountedInBrowserAtom) + const [isKeplrMobileWeb, setIsKeplrMobileWeb] = + useRecoilState(isKeplrMobileWebAtom) + useEffect(() => { + if (!mountedInBrowser) { + return + } + + ;(async () => { + setIsKeplrMobileWeb( + (await (await import('@keplr-wallet/stores')).getKeplrFromWindow()) + ?.mode === 'mobile-web' + ) + })() + }, [mountedInBrowser, setIsKeplrMobileWeb]) + return ( {children} @@ -208,41 +233,14 @@ const InnerWalletProvider = ({ children }: PropsWithChildren<{}>) => { }, [chain.chain_id, walletManager]) // Auto-connect to Keplr mobile web if in that context. - const mountedInBrowser = useRecoilValue(mountedInBrowserAtom) - const connectingKeplrMobileWebConnectionRef = useRef(false) + const isKeplrMobileWeb = useRecoilValue(isKeplrMobileWebAtom) useEffect(() => { - if ( - typeof window === 'undefined' || - !mountedInBrowser || - !isWalletDisconnected || - connectingKeplrMobileWebConnectionRef.current - ) { + if (!isKeplrMobileWeb || !isWalletDisconnected) { return } - // Only try once at a time. - connectingKeplrMobileWebConnectionRef.current = true - - // Connect. - ;(async () => { - try { - const keplr = await ( - await import('@keplr-wallet/stores') - ).getKeplrFromWindow() - const keplrWallet = walletRepo.wallets.find( - (wallet) => - wallet.walletInfo.name === keplrExtensionWallets[0].walletInfo.name - ) - if (keplr && keplrWallet && keplr.mode === 'mobile-web') { - await walletRepo.connect(keplrWallet.walletName) - } - } catch (err) { - console.error('Keplr mobile web connection failed', err) - } finally { - connectingKeplrMobileWebConnectionRef.current = false - } - })() - }, [isWalletDisconnected, mountedInBrowser, walletRepo]) + walletRepo.connect(keplrExtensionWallets[0].walletName) + }, [isKeplrMobileWeb, isWalletDisconnected, walletRepo]) return <>{children} } diff --git a/packages/stateful/components/wallet/WalletUiConnected.tsx b/packages/stateful/components/wallet/WalletUiConnected.tsx index 7f04c097fc..8ab67ebe69 100644 --- a/packages/stateful/components/wallet/WalletUiConnected.tsx +++ b/packages/stateful/components/wallet/WalletUiConnected.tsx @@ -2,7 +2,7 @@ import { WalletModalProps } from '@cosmos-kit/core' import { KeplrClient, wallets as keplrExtensionWallets, -} from '@cosmos-kit/keplr-extension' +} from '@noahsaso/cosmos-kit-keplr-extension' import { useTranslation } from 'react-i18next' import { useSetRecoilState } from 'recoil' diff --git a/packages/stateful/package.json b/packages/stateful/package.json index 0764692c4d..a84bc2353a 100644 --- a/packages/stateful/package.json +++ b/packages/stateful/package.json @@ -16,7 +16,7 @@ "@cosmjs/stargate": "^0.30.1", "@cosmos-kit/core": "^2.2.0", "@cosmos-kit/cosmostation": "^2.1.5", - "@cosmos-kit/keplr-extension": "^2.1.5", + "@noahsaso/cosmos-kit-keplr-extension": "^2.1.6-beta.0", "@cosmos-kit/keplr-mobile": "^2.1.5", "@cosmos-kit/leap": "^2.1.5", "@cosmos-kit/react-lite": "^2.1.6", diff --git a/yarn.lock b/yarn.lock index 65054acd03..7983c2a8f9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2596,14 +2596,6 @@ "@cosmos-kit/cosmostation-extension" "^2.1.5" "@cosmos-kit/cosmostation-mobile" "^2.1.5" -"@cosmos-kit/keplr-extension@^2.1.5": - version "2.1.5" - resolved "https://registry.yarnpkg.com/@cosmos-kit/keplr-extension/-/keplr-extension-2.1.5.tgz#510cb6c5e1a352959a0c72a037baa30371ffb04b" - integrity sha512-MPihFmcVZ7GjEmln3o5kcPFyU4/NG5qtH3Q/p5KkdpEmIeLFrHIGdKo63CPG9lLomvM1KnKqiwFvbWijyybEYw== - dependencies: - "@chain-registry/keplr" "1.8.0" - "@cosmos-kit/core" "^2.2.0" - "@cosmos-kit/keplr-mobile@^2.1.5": version "2.1.5" resolved "https://registry.yarnpkg.com/@cosmos-kit/keplr-mobile/-/keplr-mobile-2.1.5.tgz#c96e4d16297f4dde18f62460bed854343ebe5d87" @@ -5207,6 +5199,14 @@ jsbi "^3.1.5" sha.js "^2.4.11" +"@noahsaso/cosmos-kit-keplr-extension@^2.1.6-beta.0": + version "2.1.6-beta.0" + resolved "https://registry.yarnpkg.com/@noahsaso/cosmos-kit-keplr-extension/-/cosmos-kit-keplr-extension-2.1.6-beta.0.tgz#918cf8241a1c8dce38b66f5bf5948c700098d67d" + integrity sha512-pIn9zY8m+KD2PkXH19RDbn3AJFbcdVuw4bs1LfCgPZLQRqOG7YC8fE6Cy2rMzTuFkfZ66Ue7Om6ZC/Zw0VhKig== + dependencies: + "@chain-registry/keplr" "1.8.0" + "@cosmos-kit/core" "^2.2.0" + "@noble/curves@1.1.0", "@noble/curves@^1.0.0", "@noble/curves@~1.1.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.1.0.tgz#f13fc667c89184bc04cccb9b11e8e7bae27d8c3d" From bbc7b8667839b7e2bf8c0181f83284ac41539e65 Mon Sep 17 00:00:00 2001 From: Noah Saso Date: Thu, 3 Aug 2023 15:02:10 -0700 Subject: [PATCH 2/2] Hide Keplr Extension in mobile browser that's not Keplr Mobile. --- packages/stateful/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/stateful/package.json b/packages/stateful/package.json index a84bc2353a..bd1ad41fcd 100644 --- a/packages/stateful/package.json +++ b/packages/stateful/package.json @@ -16,7 +16,7 @@ "@cosmjs/stargate": "^0.30.1", "@cosmos-kit/core": "^2.2.0", "@cosmos-kit/cosmostation": "^2.1.5", - "@noahsaso/cosmos-kit-keplr-extension": "^2.1.6-beta.0", + "@noahsaso/cosmos-kit-keplr-extension": "^2.1.6-beta.1", "@cosmos-kit/keplr-mobile": "^2.1.5", "@cosmos-kit/leap": "^2.1.5", "@cosmos-kit/react-lite": "^2.1.6", diff --git a/yarn.lock b/yarn.lock index 7983c2a8f9..41851f63cd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5199,10 +5199,10 @@ jsbi "^3.1.5" sha.js "^2.4.11" -"@noahsaso/cosmos-kit-keplr-extension@^2.1.6-beta.0": - version "2.1.6-beta.0" - resolved "https://registry.yarnpkg.com/@noahsaso/cosmos-kit-keplr-extension/-/cosmos-kit-keplr-extension-2.1.6-beta.0.tgz#918cf8241a1c8dce38b66f5bf5948c700098d67d" - integrity sha512-pIn9zY8m+KD2PkXH19RDbn3AJFbcdVuw4bs1LfCgPZLQRqOG7YC8fE6Cy2rMzTuFkfZ66Ue7Om6ZC/Zw0VhKig== +"@noahsaso/cosmos-kit-keplr-extension@^2.1.6-beta.1": + version "2.1.6-beta.1" + resolved "https://registry.yarnpkg.com/@noahsaso/cosmos-kit-keplr-extension/-/cosmos-kit-keplr-extension-2.1.6-beta.1.tgz#4f3e9de39db59e5121bd83578b6fd72bfa4dead1" + integrity sha512-pwCg3Cbbx880vAT9c4a6q6GNI57xOAKunjl1+T+6g9jUZhoiHp1wniauN+qqo0Ax817xZOA56h50Bjqw/c6Mig== dependencies: "@chain-registry/keplr" "1.8.0" "@cosmos-kit/core" "^2.2.0"