Fix last used

components/views/ConnectExtension.tsx

@@ -5,6 +5,8 @@ import { FCL_SERVICE_METHODS } from '../../helpers/constants'
 import { useRpc } from '../../contexts/FclContext'
 import { FclRequest } from '../../helpers/rpc'
 import WalletIcon from '../Icons/WalletIcon'
+import { useWalletHistory } from '../../hooks/useWalletHistory'
+import { handleCancel } from '../../helpers/window'
 
 type ConnectExtensionProps = {
   wallet: Wallet
@@ -15,13 +17,19 @@ export default function ConnectExtension({ wallet }: ConnectExtensionProps) {
   const [isConnecting, setIsConnecting] = useState(false)
   const hasAttemptedConnection = useRef(true)
   const showSpinner = !rpc || isConnecting
+  const { setLastUsed } = useWalletHistory()
 
   function connect() {
     setIsConnecting(true)
     wallet.services.forEach(service => {
       if (service.method === FCL_SERVICE_METHODS.EXT) {
         rpc
           .request(FclRequest.EXEC_SERVICE, { service })
+          .then(() => {
+            console.log('Connected to extension')
+            setLastUsed(wallet)
+            handleCancel()
+          })
           .catch(e => {
             console.error('Failed to connect to extension', e)
           })

components/views/ScanConnect.tsx

@@ -4,14 +4,20 @@ import QRCode from '../QRCode'
 import CopyButton from '../CopyButton'
 import HybridButton from '../HybridButton'
 import { useWcUri } from '../../hooks/useWcUri'
+import { useWalletHistory } from '../../hooks/useWalletHistory'
+import { handleCancel } from '../../helpers/window'
 
 interface ScanConnectProps {
   wallet: Wallet
   onGetWallet: () => void
 }
 
 export default function ScanConnect({ wallet, onGetWallet }: ScanConnectProps) {
-  const { uri, error, isLoading } = useWcUri()
+  const { setLastUsed } = useWalletHistory()
+  const { uri, error, isLoading } = useWcUri(() => {
+    setLastUsed(wallet)
+    handleCancel()
+  })
 
   return (
     <Stack

helpers/rpc.ts

@@ -3,6 +3,7 @@ import { Service } from '../types'
 
 export enum DiscoveryNotification {
   NOTIFY_QRCODE_ERROR = 'notifyQRCodeError',
+  NOTIFY_QRCODE_CONNECTED = 'notifyQRCodeConnected',
 }
 
 export enum FclRequest {

hooks/useWalletHistory.ts

@@ -6,20 +6,20 @@ import { useLocalStorage } from './useLocalStorage'
 export function useWalletHistory() {
   const [, setLastUsedState] = useLocalStorage(
     LOCAL_STORAGE_KEYS.LAST_USED,
-    null
+    null,
   )
   const [lastUsedUid] = useLocalStorage(LOCAL_STORAGE_KEYS.LAST_USED, null)
 
   const setLastUsed = useCallback(
     (wallet: Wallet) => {
       setLastUsedState(wallet.uid)
     },
-    [setLastUsedState]
+    [setLastUsedState],
   )
 
   const isLastUsed = useCallback(
     (wallet: Wallet) => wallet.uid === lastUsedUid,
-    [lastUsedUid]
+    [lastUsedUid],
   )
 
   return { isLastUsed, setLastUsed, lastUsedUid }

hooks/useWallets.ts

@@ -42,7 +42,7 @@ export function useWallets() {
   }
 
   const { data: wallets, error } = useSWR(genKey(requestUrl, body), url =>
-    fetcher<Wallet[]>(url, body)
+    fetcher<Wallet[]>(url, body),
   )
 
   return { wallets, error, isLoading: !wallets && !error }

hooks/useWcUri.ts

@@ -1,8 +1,9 @@
 import useSWR from 'swr'
 import { useRpc } from '../contexts/FclContext'
 import { DiscoveryNotification, FclRequest } from '../helpers/rpc'
+import { useEffect } from 'react'
 
-export function useWcUri() {
+export function useWcUri(onConnected?: () => void) {
   const rpc = useRpc()
   const {
     data: uri,
@@ -14,17 +15,44 @@ export function useWcUri() {
       {},
     )
 
-    // Subscribe to QR error notifications (e.g. user declined, QR expired)
-    const onError = ({ error: _error, uri: _uri }) => {
-      if (_uri === uri) {
-        // QR code is no longer valid, reset the URI and unsubscribe
+    return uri
+  })
+
+  useEffect(() => {
+    if (!rpc || !uri) {
+      return
+    }
+
+    const connectHandler = ({ uri: _uri }: { uri: string }) => {
+      if (uri === _uri) {
+        onConnected?.()
+      }
+    }
+
+    const errorHandler = ({
+      uri: errorUri,
+      error,
+    }: {
+      uri: string
+      error: string
+    }) => {
+      if (uri === errorUri) {
+        console.error('URI connection error:', error)
         mutate()
-        rpc.unsubscribe(DiscoveryNotification.NOTIFY_QRCODE_ERROR, onError)
       }
     }
-    rpc.subscribe(DiscoveryNotification.NOTIFY_QRCODE_ERROR, onError)
 
-    return uri
-  })
+    rpc.subscribe(DiscoveryNotification.NOTIFY_QRCODE_CONNECTED, connectHandler)
+    rpc.subscribe(DiscoveryNotification.NOTIFY_QRCODE_ERROR, errorHandler)
+
+    return () => {
+      rpc.unsubscribe(
+        DiscoveryNotification.NOTIFY_QRCODE_CONNECTED,
+        connectHandler,
+      )
+      rpc.unsubscribe(DiscoveryNotification.NOTIFY_QRCODE_ERROR, errorHandler)
+    }
+  }, [uri, rpc])
+
   return { uri, error, isLoading: !uri && !error }
 }