laconic-wallet/App.tsx

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Button, Snackbar } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

import { SignClientTypes } from '@walletconnect/types';
import { useNavigation } from '@react-navigation/native';
import {
  NativeStackNavigationProp,
  createNativeStackNavigator,
} from '@react-navigation/native-stack';

import SignMessage from './components/SignMessage';
import HomeScreen from './components/HomeScreen';
import SignRequest from './components/SignRequest';
import InvalidPath from './components/InvalidPath';
import PairingModal from './components/PairingModal';
import AddSession from './components/AddSession';
import WalletConnect from './components/WalletConnect';
import { StackParamsList } from './types';
import useInitialization, {
  web3wallet,
} from './utils/wallet-connect/WalletConnectUtils';
import { EIP155_SIGNING_METHODS } from './utils/wallet-connect/EIP155Lib';
import { useAccounts } from './context/AccountsContext';
import { getSignParamsMessage } from './utils/wallet-connect/Helpers';
import { useRequests } from './context/RequestContext';

const Stack = createNativeStackNavigator<StackParamsList>();

const App = (): React.JSX.Element => {
  useInitialization();

  const navigation =
    useNavigation<NativeStackNavigationProp<StackParamsList>>();

  const { accounts } = useAccounts();
  const { requestSession, setRequestSession } = useRequests();

  const [modalVisible, setModalVisible] = useState(false);
  const [toastVisible, setToastVisible] = useState(false);
  const [currentProposal, setCurrentProposal] = useState<
    SignClientTypes.EventArguments['session_proposal'] | undefined
  >();

  const currentEthAddresses = useMemo(() => {
    if (accounts.ethAccounts.length > 0) {
      return accounts.ethAccounts.map(account => account.address);
    }
    return [];
  }, [accounts]);

  const onSessionProposal = useCallback(
    (proposal: SignClientTypes.EventArguments['session_proposal']) => {
      setModalVisible(true);
      setCurrentProposal(proposal);
    },
    [],
  );

  const onSessionRequest = useCallback(
    async (requestEvent: SignClientTypes.EventArguments['session_request']) => {
      const { topic, params } = requestEvent;
      const { request } = params;
      const address = request.params[1];
      const message = getSignParamsMessage(request.params);
      const requestSessionData =
        web3wallet.engine.signClient.session.get(topic);

      switch (request.method) {
        case EIP155_SIGNING_METHODS.ETH_SIGN:
        case EIP155_SIGNING_METHODS.PERSONAL_SIGN:
          setRequestSession(requestSessionData);
          if (address && message) {
            navigation.navigate('SignRequest', {
              network: 'eth',
              address,
              message,
              requestEvent,
              requestSession,
            });
          }
          return;
      }
    },
    [requestSession, setRequestSession],
  );
  useEffect(() => {
    web3wallet?.on('session_proposal', onSessionProposal);
    web3wallet?.on('session_request', onSessionRequest);

    return () => {
      web3wallet?.off('session_proposal', onSessionProposal);
      web3wallet?.off('session_request', onSessionRequest);
    };
    //TODO: Investigate dependencies
  });

  return (
    <>
      <Stack.Navigator>
        <Stack.Screen
          name="Laconic"
          component={HomeScreen}
          options={{
            title: 'Laconic Wallet',
            headerBackVisible: false,
          }}
        />
        <Stack.Screen
          name="SignMessage"
          component={SignMessage}
          options={{
            title: 'Sign Message',
          }}
          initialParams={{ selectedNetwork: 'Ethereum' }}
        />
        <Stack.Screen
          name="SignRequest"
          component={SignRequest}
          options={{
            title: 'Sign this message?',
          }}
        />
        <Stack.Screen
          name="InvalidPath"
          component={InvalidPath}
          options={{
            title: 'Bad Request',
            headerBackVisible: false,
          }}
        />
        <Stack.Screen
          name="WalletConnect"
          component={WalletConnect}
          options={{
            title: 'WalletConnect Sessions',
            headerRight: () => (
              <Button
                onPress={() => {
                  navigation.navigate('AddSession');
                }}>
                {<Icon name={'qrcode-scan'} size={20} />}
              </Button>
            ),
          }}
        />

        <Stack.Screen
          name="AddSession"
          component={AddSession}
          options={{
            title: 'New session',
          }}
        />
      </Stack.Navigator>
      <PairingModal
        visible={modalVisible}
        setModalVisible={setModalVisible}
        currentProposal={currentProposal}
        setCurrentProposal={setCurrentProposal}
        currentEthAddresses={currentEthAddresses}
        setToastVisible={setToastVisible}
      />
      <Snackbar
        visible={toastVisible}
        onDismiss={() => setToastVisible(false)}
        action={{
          label: 'Ok',
          onPress: () => {
            setToastVisible(false);
          },
        }}>
        Session approved
      </Snackbar>
    </>
  );
};

export default App;