diff --git a/components/views/ScanConnect.tsx b/components/views/ScanConnect.tsx index 35d0593e..069adf44 100644 --- a/components/views/ScanConnect.tsx +++ b/components/views/ScanConnect.tsx @@ -1,4 +1,4 @@ -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' @@ -6,6 +6,7 @@ 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 ( + + + + ) + } + return ( 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 } }