v1.9.3: updated walletConnect logic

dist/components/WalletConnectHandler.d.ts

@@ -0,0 +1,10 @@
+import { WalletConnection } from "@delphi-labs/shuttle-react";
+import { ChainInfoID } from "src/enums";
+interface Props {
+    setConnected: () => void;
+    setConnectedWallet: (recentWallet: WalletConnection) => void;
+    chainId: ChainInfoID;
+}
+declare const WalletConnectHandler: ({ setConnected, setConnectedWallet, chainId, }: Props) => null;
+export default WalletConnectHandler;
+//# sourceMappingURL=WalletConnectHandler.d.ts.map

example/components/ConnectButton.tsx

@@ -1,15 +1,10 @@
 import {
-  ChainInfoID,
   WalletConnectionStatus,
   useWalletManager,
 } from "@marsprotocol/wallet-connector"
 import { useEffect, useState } from "react"
 
-interface Props {
-  chainId: ChainInfoID
-}
-
-export default function ConnectButton(props: Props) {
+export default function ConnectButton() {
   const { connect, status, connectedWallet, disconnect } = useWalletManager()
   const [isConnected, setIsConnected] = useState(false)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marsprotocol/wallet-connector",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mars-protocol/wallet-connector.git"

src/components/WalletConnectHandler.tsx

@@ -0,0 +1,47 @@
+import { useShuttle, WalletConnection } from "@delphi-labs/shuttle-react"
+import { useEffect } from "react"
+import { ChainInfoID } from "src/enums"
+
+interface Props {
+  setConnected: () => void
+  setConnectedWallet: (recentWallet: WalletConnection) => void
+  chainId: ChainInfoID
+}
+
+const WalletConnectHandler = ({
+  setConnected,
+  setConnectedWallet,
+  chainId,
+}: Props) => {
+  const { connect, extensionProviders, wallets } = useShuttle()
+
+  useEffect(() => {
+    if (wallets === null) return
+    const recentWallet = wallets.find((w) => w.network.chainId === chainId)
+
+    if (!recentWallet) return
+    if (!recentWallet.providerId.includes("mobile")) return
+    const recentProvider = extensionProviders.find(
+      (p) => p.id === recentWallet.providerId,
+    )
+
+    if (!recentProvider) return
+    recentProvider
+      .connect({ chainId: recentWallet.network.chainId })
+      .then(() => {
+        setConnected()
+        setConnectedWallet(recentWallet)
+      })
+  }, [
+    connect,
+    wallets,
+    extensionProviders,
+    setConnected,
+    setConnectedWallet,
+    chainId,
+  ])
+
+  return null
+}
+
+export default WalletConnectHandler

src/components/WalletManagerProvider.tsx

@@ -28,6 +28,7 @@ import DisconnectHandler from "./DisconnectHandler"
 import { SelectWalletModal } from "./ui"
 import { EnablingWalletModal } from "./ui/EnablingWalletModal"
 import { StationWalletErrorModal } from "./ui/StationWalletErrorModal"
+import WalletConnectHandler from "./WalletConnectHandler"
 import { WalletManagerContext } from "./WalletManagerContext"
 
 export const WalletManagerProvider: FunctionComponent<
@@ -123,10 +124,6 @@ export const WalletManagerProvider: FunctionComponent<
   )
 
   const closePickerModal = () => {
-    if (status === WalletConnectionStatus.WalletConnect) {
-      setStatus(WalletConnectionStatus.Unconnected)
-    }
-
     setPickerModalOpen(false)
   }
 
@@ -206,6 +203,13 @@ export const WalletManagerProvider: FunctionComponent<
             setConnectedWallet={setConnectedWallet}
           />
         )}
+        {status === WalletConnectionStatus.WalletConnect && (
+          <WalletConnectHandler
+            chainId={defaultChainId}
+            setConnected={() => setStatus(WalletConnectionStatus.Connected)}
+            setConnectedWallet={setConnectedWallet}
+          />
+        )}
         {status === WalletConnectionStatus.Disconnecting && (
           <DisconnectHandler
             chainId={defaultChainId}