Refactor walletconnect session proposal handling and log traces for s…

…everal events

app/src/components/walletconnect/PeerHeader.tsx

@@ -3,10 +3,10 @@ import { Image } from 'expo-image';
 import { ReactNode } from 'react';
 import { View } from 'react-native';
 import { Text } from 'react-native-paper';
-import { WalletConnectPeer } from '~/util/walletconnect';
+import { SignClientTypes } from '@walletconnect/types';
 
 export interface PeerHeaderProps {
- peer: WalletConnectPeer;
+ peer: SignClientTypes.Metadata;
  children: ReactNode;
 }
 

app/src/components/walletconnect/WalletConnectListeners.tsx

@@ -3,41 +3,59 @@ import { useSessionPropsalListener } from './useSessionPropsalListener';
 import { useUpdateWalletConnect, useWalletConnectWithoutWatching } from '~/util/walletconnect';
 import { useSessionRequestListener } from './useSessionRequestListener';
 import { withSuspense } from '../skeleton/withSuspense';
+import { SignClientTypes } from '@walletconnect/types';
+import { SignClient } from '@walletconnect/sign-client/dist/types/client';
+import { logTrace } from '~/util/analytics';
 
 export const WalletConnectListeners = withSuspense(
  () => {
  const client = useWalletConnectWithoutWatching();
  const update = useUpdateWalletConnect();
- const handleSessionProposal = useSessionPropsalListener();
- const handleSessionRequest = useSessionRequestListener();
+
+ useSessionPropsalListener();
+ useSessionRequestListener();
 
  useEffect(() => {
- const handlers = [
- [
+ // https://specs.walletconnect.com/2.0/specs/clients/sign/session-events
+ const handlers: Parameters<typeof client.on>[] = [
+ ['session_update', update],
+ ['session_extend', update],
+ ['session_delete', update],
+ ['session_expire', update],
+ ...traceEvents(client, [
  'session_proposal',
- (p) => {
- handleSessionProposal(client, p);
- },
- ] as Parameters<typeof client.on<'session_proposal'>>,
- [
- 'session_request',
- (event) => {
- handleSessionRequest(client, event);
- },
- ] as Parameters<typeof client.on<'session_request'>>,
- ['session_update', update] as Parameters<typeof client.on<'session_update'>>,
- ['session_expire', update] as Parameters<typeof client.on<'session_expire'>>,
- ['session_delete', update] as Parameters<typeof client.on<'session_delete'>>,
- ] as const;
+ 'session_update',
+ 'session_extend',
+ 'session_delete',
+ 'session_expire',
+ 'session_request_sent',
+ 'session_event',
+ 'proposal_expire',
+ ]),
+ ];
 
- handlers.forEach(([type, f]) => client.on(type, f as any)); // type error 🤷
+ handlers.forEach(([type, f]) => client.on(type, f));
 
  return () => {
- handlers.forEach(([type, f]) => client.off(type, f as any)); // type error 🤷
+ handlers.forEach(([type, f]) => client.off(type, f));
  };
- }, [client?.on, handleSessionProposal, handleSessionRequest]);
+ }, [client, update]);
 
  return null;
  },
  () => null,
 );
+
+function traceEvents(client: SignClient, events: SignClientTypes.Event[]) {
+ return events.map(
+ (event) =>
+ [
+ event,
+ (args) =>
+ logTrace(`WalletConnect`, {
+ event,
+ params: 'params' in args ? args.params : undefined,
+ }),
+ ] as Parameters<typeof client.on>,
+ );
+}

app/src/components/walletconnect/useSessionPropsalListener.ts

@@ -1,21 +1,24 @@
 import { getSdkError } from '@walletconnect/utils';
-import { useCallback } from 'react';
+import { useEffect } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import { showError } from '~/provider/SnackbarProvider';
 import { WC_METHODS } from '~/util/walletconnect/methods';
 import {
- WcClient,
- WalletConnectEventArgs,
  WC_NAMESPACE_KEY,
  WC_SUPPORTED_CHAINS,
+ useWalletConnectWithoutWatching,
 } from '~/util/walletconnect';
 import { isPresent } from 'lib';
+import { SignClientTypes } from '@walletconnect/types';
+
+type SessionProposalArgs = SignClientTypes.EventArguments['session_proposal'];
 
 export const useSessionPropsalListener = () => {
  const { navigate } = useNavigation();
+ const client = useWalletConnectWithoutWatching();
 
- return useCallback(
- (client: WcClient, proposal: WalletConnectEventArgs['session_proposal']) => {
+ useEffect(() => {
+ const handleProposal = async (proposal: SessionProposalArgs) => {
  const { requiredNamespaces, optionalNamespaces } = proposal.params;
  const proposer = proposal.params.proposer.metadata;
 
@@ -56,7 +59,12 @@ export const useSessionPropsalListener = () => {
  }
 
  navigate('ConnectSheet', proposal);
- },
- [navigate],
- );
+ };
+
+ client.on('session_proposal', handleProposal);
+
+ return () => {
+ client.off('session_proposal', handleProposal);
+ };
+ }, [client, navigate]);
 };

app/src/util/patches/index.ts

@@ -4,7 +4,7 @@ import 'node-libs-react-native/globals';
 
 // Buffer
 import { Buffer } from '@craftzdog/react-native-buffer';
-global.Buffer = Buffer as any;
+global.Buffer = Buffer as unknown as typeof global.Buffer;
 
 // Crypto
 import 'react-native-quick-crypto'; // crypto