Update to shared lib

components/views/ConnectExtension.tsx

@@ -2,8 +2,9 @@ import { Button, Heading, Spinner, Stack, Text } from '@chakra-ui/react'
 import { Wallet } from '../../data/wallets'
 import { useEffect, useRef, useState } from 'react'
 import { Service } from '../../types'
-import { FCL_SERVICE_METHODS, FclRpcMethod } from '../../helpers/constants'
+import { FCL_SERVICE_METHODS } from '../../helpers/constants'
 import { useRpc } from '../../contexts/FclContext'
+import { FclRequest } from '../../helpers/rpc'
 import WalletIcon from '../Icons/WalletIcon'
 
 type ConnectExtensionProps = {
@@ -20,7 +21,7 @@ export default function ConnectExtension({ wallet }: ConnectExtensionProps) {
     wallet.services.forEach(service => {
       if (service.method === FCL_SERVICE_METHODS.EXT) {
         rpc
-          .request(FclRpcMethod.EXEC_SERVICE, { service })
+          .request(FclRequest.EXEC_SERVICE, { service })
           .catch(e => {
             console.error('Failed to connect to extension', e)
           })

components/views/ScanConnect.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Spinner, Stack, Text } from '@chakra-ui/react'
+import { Box, Button, Flex, Spinner, Stack, Text } from '@chakra-ui/react'
 import { Wallet } from '../../data/wallets'
 import QRCode from '../QRCode'
 import CopyButton from '../CopyButton'
@@ -52,12 +52,20 @@ export default function ScanConnect({ wallet, onGetWallet }: ScanConnectProps) {
           </Flex>
         )}
         {error && (
-          <Flex boxSize="20rem" justifyContent="center" alignItems="center">
+          <Stack
+            boxSize="20rem"
+            justifyContent="center"
+            alignItems="center"
+            spacing={2}
+          >
             <Text textStyle="body2" colorScheme="red">
-              An error has occurred while generating the QR code. Please try
-              again.
+              {`An error has occurred while generating the QR code. Please try again.`}
             </Text>
-          </Flex>
+
+            <Button variant="primary" size="sm" onClick={() => onGetWallet()}>
+              Try WalletConnect QR//TODO: fix it
+            </Button>
+          </Stack>
         )}
       </Box>
 

contexts/FclContext.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext } from 'react'
 import { FclConfig } from '../hooks/useFcl'
 import { RpcClient } from './rpc/rpc-client'
-import { DiscoveryRpcMethods, FclRpcMethods } from '../helpers/constants'
+import { FclRpcClient } from '../helpers/rpc'
 
 export type DiscoveryConfig = FclConfig & {
   network: string
@@ -10,15 +10,15 @@ export type DiscoveryConfig = FclConfig & {
 
 export type FclContextType = {
   config: DiscoveryConfig
-  rpc: RpcClient<FclRpcMethods, DiscoveryRpcMethods>
+  rpc: FclRpcClient
 }
 
 export const FclContext = createContext<FclContextType | null>(null)
 
 interface ConfigProviderProps {
   children: React.ReactNode
   config: DiscoveryConfig
-  rpc: RpcClient<FclRpcMethods, DiscoveryRpcMethods>
+  rpc: FclRpcClient
 }
 
 export function FclProvider({ children, config, rpc }: ConfigProviderProps) {

contexts/rpc/rpc-client.ts

@@ -59,6 +59,10 @@ type OnlyNotifications<T> = {
 
 export type IsRpcRequest<T> = T extends RpcRequest<any, any> ? true : false
 
+enum ReservedRpcMethods {
+  GET_METHODS = 'rpc_getMethods',
+}
+
 export class RpcClient<
   PeerRpcMethods extends RpcMethodMap,
   LocalRpcMethods extends RpcMethodMap
@@ -74,7 +78,11 @@ export class RpcClient<
   > = {} as any
   private messageListeners: ((msg: any) => void)[] = []
 
-  private constructor(private send: (msg: RpcMessage) => void) {}
+  private constructor(private send: (msg: RpcMessage) => void) {
+    this.on(ReservedRpcMethods.GET_METHODS, () => {
+      return Object.keys(this.handlers)
+    })
+  }
 
   static create<
     PeerRpcMethods extends RpcMethodMap,
@@ -183,6 +191,9 @@ export class RpcClient<
     method: R,
     handler: (params: OnlyRequests<LocalRpcMethods>[R]['params']) => void
   ) {
+    if (this.handlers[method]) {
+      throw new Error(`Handler for method ${method} already exists`)
+    }
     this.handlers[method] = handler
   }
 

helpers/constants.ts

@@ -116,28 +116,4 @@ export const BROWSERS = {
   },
 } as const
 
-export const CUSTOM_IPC = 'FCL:VIEW:CUSTOM_IPC'
-
-export enum DiscoveryRpcMethod {
-  NOTIFY_QR_EXPIRY = 'notify_qr_expiry',
-  NOTIFY_QR_ERROR = 'notify_qr_error',
-  GET_METHODS = 'get_methods',
-}
-
-export enum FclRpcMethod {
-  EXEC_SERVICE = 'exec_service',
-  REQUEST_URI = 'request_uri',
-  GET_METHODS = 'get_methods',
-}
-
-export type DiscoveryRpcMethods = {
-  [DiscoveryRpcMethod.NOTIFY_QR_EXPIRY]: RpcNotification<{ uri: string }>
-  [DiscoveryRpcMethod.NOTIFY_QR_ERROR]: RpcNotification<{ error: string }>
-  [DiscoveryRpcMethod.GET_METHODS]: RpcRequest<{}, { methods: string[] }>
-}
-
-export type FclRpcMethods = {
-  [FclRpcMethod.EXEC_SERVICE]: RpcRequest<{ service: Service }, {}>
-  [FclRpcMethod.REQUEST_URI]: RpcRequest<{ service: Service }, { uri: string }>
-  [FclRpcMethod.GET_METHODS]: RpcRequest<{}, { methods: string[] }>
-}
+export const CUSTOM_RPC = 'FCL:VIEW:CUSTOM_RPC'

helpers/rpc.ts

@@ -0,0 +1,19 @@
+import { RpcClient, RpcRequest } from "@onflow/util-rpc"
+import { Service } from "../types"
+
+export enum DiscoveryNotification {
+    NOTIFY_QRCODE_EXPIRY = 'notifyQRCodeExpiry',
+    NOTIFY_QRCODE_ERROR = 'notifyQRCodeError',
+}
+
+export enum FclRequest {
+REQUEST_WALLETCONNECT_QRCODE = 'requestWalletConnectQRCode',
+EXEC_SERVICE = 'execService',
+}
+
+export type FclRequests = {
+[FclRequest.REQUEST_WALLETCONNECT_QRCODE]: RpcRequest<{}, { uri: string }>
+[FclRequest.EXEC_SERVICE]: RpcRequest<{ service: Service }, {}>
+}
+
+export type FclRpcClient = RpcClient<FclRequests, {}>

hooks/useFcl.tsx

@@ -1,16 +1,13 @@
 import { useEffect, useRef, useState } from 'react'
 import { WalletUtils } from '@onflow/fcl'
+import { RpcClient } from '@onflow/util-rpc'
 import { Service, Strategy } from '../types'
+import { CUSTOM_RPC } from '../helpers/constants'
 import {
-  CUSTOM_IPC,
-  FclRpcMethods,
-  DiscoveryRpcMethods,
-  DiscoveryRpcMethod,
-  FclRpcMethod,
-} from '../helpers/constants'
-import { RpcClient } from '../contexts/rpc/rpc-client'
-import { mutate } from 'swr'
-import { genGetUriKey } from './useUri'
+  DiscoveryNotification,
+  FclRequests,
+  FclRpcClient,
+} from '../helpers/rpc'
 
 type WalletUtilsProps = {
   fclVersion: string
@@ -32,31 +29,40 @@ export function useFcl() {
   const [config, setConfig] = useState<FclConfig | null>(null)
   const [error, setError] = useState<string | null>(null)
   const timeout = useRef<NodeJS.Timeout | null>(null)
-  const rpcRef = useRef<RpcClient<FclRpcMethods, DiscoveryRpcMethods> | null>(
-    null
-  )
+  const rpcRef = useRef<FclRpcClient | null>(null)
   const rpc = rpcRef.current
 
-  function initFclRpc() {
-    const { rpc: rpcClient, receive: receiveRpc } = RpcClient.create<
-      FclRpcMethods,
-      DiscoveryRpcMethods
-    >((msg: any) => {
-      WalletUtils.sendMsgToFCL(CUSTOM_IPC, { payload: msg })
+  useEffect(() => {
+    if (!!rpc) return
+    const _rpc = new RpcClient<FclRequests, {}>({
+      notifications: Object.values(DiscoveryNotification),
     })
 
+    // Bind receiver for messages from FCL
     const unsubFcl = WalletUtils.onMessageFromFCL(
-      CUSTOM_IPC,
+      CUSTOM_RPC,
       ({ payload: msg }: { payload: any }) => {
-        receiveRpc(msg)
+        _rpc.receive(msg)
       }
     )
 
-    return {
-      rpc: rpcClient,
-      teardown: unsubFcl,
+    // Bind sender for messages to FCL
+    _rpc.connect({
+      send: msg => {
+        WalletUtils.sendMsgToFCL(CUSTOM_RPC, { payload: msg })
+      },
+    })
+
+    window.addEventListener('message', e => {
+      console.log('evt', e)
+    })
+
+    rpcRef.current = _rpc
+
+    return () => {
+      unsubFcl()
     }
-  }
+  }, [])
 
   useEffect(() => {
     try {
@@ -104,13 +110,8 @@ export function useFcl() {
       )
     }
 
-    // Initialize RPC
-    const { teardown: teardownRpcListener, rpc: rpcClient } = initFclRpc()
-    rpcRef.current = rpcClient
-
     return () => {
       clearTimeout(timeout.current)
-      teardownRpcListener()
     }
   }, [])
 

hooks/useUri.ts

@@ -1,7 +1,7 @@
 import useSWR from 'swr'
 import { useRpc } from '../contexts/FclContext'
 import { Service } from '../types'
-import { DiscoveryRpcMethod, FclRpcMethod } from '../helpers/constants'
+import { DiscoveryNotification, FclRequest } from '../helpers/rpc'
 
 export const genGetUriKey = (service: Service) => [
   'get-uri',
@@ -15,16 +15,27 @@ export function useUri(service: Service) {
     error,
     mutate,
   } = useSWR(genGetUriKey(service), async () => {
-    const { uri } = await rpc.request(FclRpcMethod.REQUEST_URI, { service })
+    const { uri } = await rpc.request(FclRequest.REQUEST_WALLETCONNECT_QRCODE, {
+      service,
+    })
 
     // Subscribe to QR expiry notifications
     const onExpire = ({ uri: _refUri }) => {
       if (_refUri === uri) {
         mutate()
-        rpc.unsubscribe(DiscoveryRpcMethod.NOTIFY_QR_EXPIRY, onExpire)
+        rpc.unsubscribe(DiscoveryNotification.NOTIFY_QRCODE_EXPIRY, onExpire)
       }
     }
-    rpc.subscribe(DiscoveryRpcMethod.NOTIFY_QR_EXPIRY, onExpire)
+    rpc.subscribe(DiscoveryNotification.NOTIFY_QRCODE_EXPIRY, onExpire)
+
+    // Subscribe to QR error notifications
+    const onError = ({ error: _error }) => {
+      if (_error === uri) {
+        mutate()
+        rpc.unsubscribe(DiscoveryNotification.NOTIFY_QRCODE_ERROR, onError)
+      }
+    }
+    rpc.subscribe(DiscoveryNotification.NOTIFY_QRCODE_ERROR, onError)
 
     return uri
   })

package.json

@@ -25,6 +25,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@onflow/fcl": "1.0.2",
+    "@onflow/util-rpc": "file:onflow-util-rpc-0.0.1.tgz",
     "@sentry/nextjs": "^8.20.0",
     "cors": "^2.8.5",
     "enum-xyz": "^0.3.1",