Merge pull request #1324 from DA0-DA0/development

Support Keplr Mobile in-app browser

packages/state/recoil/atoms/misc.ts

@@ -39,3 +39,9 @@ export const web3AuthPromptAtom = atom<Web3AuthPrompt | undefined>({
   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,
+})

packages/stateful/components/WalletProvider.tsx

@@ -2,14 +2,14 @@ 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'
 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 (
     <ChainProvider
       assetLists={assets}
@@ -175,18 +194,24 @@ export const WalletProvider = ({
         },
       }}
       walletModal={WalletUi}
-      wallets={[
-        ...keplrExtensionWallets,
-        // Only allow Keplr Mobile on mainnet since it can't use testnet.
-        ...(MAINNET ? keplrMobileWallets : []),
-        ...leapWallets,
-        ...stationWallets,
-        ...vectisWallets,
-        ...trustWallets,
-        ...cosmostationWallets,
-        // Google, Apple, Discord, Twitter
-        ...web3AuthWallets,
-      ]}
+      wallets={
+        // If Keplr Mobile in-app browser, only allow Keplr Extension. Keplr
+        // Mobile wallet works via WalletConnect from a desktop, but not in-app.
+        isKeplrMobileWeb
+          ? keplrExtensionWallets
+          : [
+              ...keplrExtensionWallets,
+              // Only allow Keplr Mobile on mainnet since it can't use testnet.
+              ...(MAINNET ? keplrMobileWallets : []),
+              ...leapWallets,
+              ...stationWallets,
+              ...vectisWallets,
+              ...trustWallets,
+              ...cosmostationWallets,
+              // Google, Apple, Discord, Twitter
+              ...web3AuthWallets,
+            ]
+      }
     >
       <InnerWalletProvider>{children}</InnerWalletProvider>
     </ChainProvider>
@@ -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}</>
 }

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'
 

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.1",
     "@cosmos-kit/keplr-mobile": "^2.1.5",
     "@cosmos-kit/leap": "^2.1.5",
     "@cosmos-kit/react-lite": "^2.1.6",

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.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"
+
 "@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"