Add connecting animation for QR Code (#229)

components/views/ScanConnect.tsx

@@ -1,11 +1,12 @@
-import { Box, Flex, Spinner, Stack, Text } from '@chakra-ui/react'
+import { Box, Flex, Heading, Spinner, Stack, Text } from '@chakra-ui/react'
 import { Wallet } from '../../data/wallets'
 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'
+import WalletIcon from '../Icons/WalletIcon'
 
 interface ScanConnectProps {
   wallet: Wallet
@@ -14,11 +15,26 @@ interface ScanConnectProps {
 
 export default function ScanConnect({ wallet, onGetWallet }: ScanConnectProps) {
   const { setLastUsed } = useWalletHistory()
-  const { uri, error, isLoading } = useWcUri(() => {
+  const { uri, connecting, error, isLoading } = useWcUri(() => {
     setLastUsed(wallet)
     handleCancel()
   })
 
+  if (connecting) {
+    return (
+      <Stack
+        px={5}
+        pb={5}
+        alignItems="center"
+        justifyContent="center"
+        flexGrow={1}
+        textAlign="center"
+      >
+        <Spinner size="xl"></Spinner>
+      </Stack>
+    )
+  }
+
   return (
     <Stack
       flexGrow={1}

helpers/rpc.ts

@@ -2,12 +2,13 @@ import { RpcClient, RpcRequest } from '@onflow/util-rpc'
 import { Service } from '../types'
 
 export enum DiscoveryNotification {
-  NOTIFY_QRCODE_ERROR = 'notifyQRCodeError',
-  NOTIFY_QRCODE_CONNECTED = 'notifyQRCodeConnected',
+  NOTIFY_QRCODE_ERROR = 'notifyQrCodeError',
+  NOTIFY_QRCODE_CONNECTING = 'notifyQrCodeConnecting',
+  NOTIFY_QRCODE_CONNECTED = 'notifyQrCodeConnected',
 }
 
 export enum FclRequest {
-  REQUEST_WALLETCONNECT_QRCODE = 'requestWalletConnectQRCode',
+  REQUEST_WALLETCONNECT_QRCODE = 'requestWalletConnectQrCode',
   EXEC_SERVICE = 'execService',
 }
 

hooks/useWcUri.ts

@@ -1,10 +1,11 @@
 import useSWR from 'swr'
 import { useRpc } from '../contexts/FclContext'
 import { DiscoveryNotification, FclRequest } from '../helpers/rpc'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 export function useWcUri(onConnected?: () => void) {
   const rpc = useRpc()
+  const [connecting, setConnecting] = useState(false)
   const {
     data: uri,
     error,
@@ -23,6 +24,12 @@ export function useWcUri(onConnected?: () => void) {
       return
     }
 
+    const connectingHandler = ({ uri: _uri }: { uri: string }) => {
+      if (uri === _uri) {
+        setConnecting(true)
+      }
+    }
+
     const connectHandler = ({ uri: _uri }: { uri: string }) => {
       if (uri === _uri) {
         onConnected?.()
@@ -43,9 +50,17 @@ export function useWcUri(onConnected?: () => void) {
     }
 
     rpc.subscribe(DiscoveryNotification.NOTIFY_QRCODE_CONNECTED, connectHandler)
+    rpc.subscribe(
+      DiscoveryNotification.NOTIFY_QRCODE_CONNECTING,
+      connectingHandler,
+    )
     rpc.subscribe(DiscoveryNotification.NOTIFY_QRCODE_ERROR, errorHandler)
 
     return () => {
+      rpc.unsubscribe(
+        DiscoveryNotification.NOTIFY_QRCODE_CONNECTING,
+        connectingHandler,
+      )
       rpc.unsubscribe(
         DiscoveryNotification.NOTIFY_QRCODE_CONNECTED,
         connectHandler,
@@ -54,5 +69,5 @@ export function useWcUri(onConnected?: () => void) {
     }
   }, [uri, rpc])
 
-  return { uri, error, isLoading: !uri && !error }
+  return { uri, connecting, error, isLoading: !uri && !error }
 }