🧞‍♂️ Fix disconnect wallet connect (#1018)

TrueFiEng · Nov 4, 2022 · a8e4a94 · a8e4a94 · github-actions · Nov 4, 2022
1 parent 94fe84f
commit a8e4a94
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 deletions.
diff --git a/.changeset/tricky-cherries-study.md b/.changeset/tricky-cherries-study.md
@@ -0,0 +1,6 @@
+---
+'@usedapp/wallet-connect-connector': patch
+'@usedapp/core': patch
+---
+
+Fix issue with not being able to open WalletConnect modal again after closing it
diff --git a/packages/connectors/wallet-connect/src/index.ts b/packages/connectors/wallet-connect/src/index.ts
@@ -10,14 +10,14 @@ export class WalletConnectConnector implements Connector {
   public readonly name = 'WalletConnect'
 
   readonly update = new ConnectorEvent<ConnectorUpdateData>()
+  private walletConnectProvider: WalletConnectProvider | undefined
 
   constructor(private opts: IWalletConnectProviderOptions) {}
 
   private async init() {
-    if (this.provider) return
-    const walletConnectProvider = new WalletConnectProvider(this.opts)
-    this.provider = new providers.Web3Provider(walletConnectProvider)
-    await (this.provider?.provider as WalletConnectProvider).enable()
+    this.walletConnectProvider = new WalletConnectProvider(this.opts)
+    this.provider = new providers.Web3Provider(this.walletConnectProvider)
+    await this.walletConnectProvider.enable()
   }
 
   async connectEagerly(): Promise<void> {
@@ -44,6 +44,7 @@ export class WalletConnectConnector implements Connector {
   }
 
   async deactivate(): Promise<void> {
+    this.walletConnectProvider?.disconnect()
     this.provider = undefined
   }
 }

diff --git a/packages/core/src/providers/network/connectors/context.tsx b/packages/core/src/providers/network/connectors/context.tsx
@@ -38,6 +38,11 @@ export interface ConnectorContextProviderProps {
   children?: ReactNode
 }
 
+export interface ActivateOptions {
+  silently?: boolean
+  onSuccess?: () => void
+}
+
 export function ConnectorContextProvider({ children }: ConnectorContextProviderProps) {
   const [controller, setController] = useState<ConnectorController>()
   const [isLoading, setLoading] = useState(false)
@@ -46,7 +51,10 @@ export function ConnectorContextProvider({ children }: ConnectorContextProviderP
   const [autoConnectTag, setAutoConnectTag] = useLocalStorage('usedapp:autoConnectTag')
 
   const activate = useCallback(
-    async (providerOrConnector: JsonRpcProvider | ExternalProvider | Connector, silently = false) => {
+    async (
+      providerOrConnector: JsonRpcProvider | ExternalProvider | Connector,
+      { silently, onSuccess }: ActivateOptions = { silently: false }
+    ) => {
       let controller: ConnectorController
       if ('activate' in providerOrConnector) {
         controller = new ConnectorController(providerOrConnector, config as any)
@@ -66,6 +74,7 @@ export function ConnectorContextProvider({ children }: ConnectorContextProviderP
 
         setController(controller)
         setLoading(false)
+        onSuccess?.()
       } catch (error) {
         controller.reportError(error as any)
       } finally {
@@ -87,15 +96,20 @@ export function ConnectorContextProvider({ children }: ConnectorContextProviderP
       if (!connectors[type]) {
         throw new Error(`Connector ${type} is not configured`)
       }
-      await activate(connectors[type])
-      setAutoConnectTag(type)
+      await activate(connectors[type], {
+        onSuccess: () => {
+          setAutoConnectTag(type)
+        },
+      })
     },
     [activate, setAutoConnectTag, connectors]
   )
 
   useEffect(() => {
     if (autoConnect && autoConnectTag && connectors[autoConnectTag]) {
-      void activate(connectors[autoConnectTag], true)
+      void activate(connectors[autoConnectTag], {
+        silently: true,
+      })
     }
   }, [])