Send networks data to dapp (#87)

* Send networks data to dapp

* Reflect switching tabs in dapp dropdown

* Fix current network name not showing in Dapp

* Modify variable names

* Modify method and variable names

* Modify networks type

* Use selectedNetwork state and networkId

* Fix networks context states

* Add separate file for network methods

src/App.tsx

@@ -11,6 +11,7 @@ import {
 } from '@react-navigation/native-stack';
 import { getSdkError } from '@walletconnect/utils';
 import { Web3WalletTypes } from '@walletconnect/web3wallet';
+import { formatJsonRpcResult } from '@json-rpc-tools/utils';
 
 import PairingModal from './components/PairingModal';
 import { useWalletConnect } from './context/WalletConnectContext';
@@ -28,6 +29,9 @@ import { getSignParamsMessage } from './utils/wallet-connect/Helpers';
 import ApproveTransaction from './screens/ApproveTransaction';
 import AddNetwork from './screens/AddNetwork';
 import { COSMOS, EIP155 } from './utils/constants';
+import { retrieveNetworksData } from './utils/accounts';
+import { useNetworks } from './context/NetworksContext';
+import { NETWORK_METHODS } from './utils/wallet-connect/common-data';
 
 const Stack = createNativeStackNavigator<StackParamsList>();
 
@@ -36,7 +40,8 @@ const App = (): React.JSX.Element => {
     useNavigation<NativeStackNavigationProp<StackParamsList>>();
 
   const { setActiveSessions } = useWalletConnect();
-  const { accounts } = useAccounts();
+  const { accounts, setCurrentIndex } = useAccounts();
+  const { networksData, selectedNetwork, setSelectedNetwork } = useNetworks();
   const [modalVisible, setModalVisible] = useState(false);
   const [toastVisible, setToastVisible] = useState(false);
   const [currentProposal, setCurrentProposal] = useState<
@@ -61,12 +66,44 @@ const App = (): React.JSX.Element => {
 
   const onSessionRequest = useCallback(
     async (requestEvent: Web3WalletTypes.SessionRequest) => {
-      const { topic, params } = requestEvent;
+      const { topic, params, id } = requestEvent;
       const { request } = params;
 
       const requestSessionData =
         web3wallet!.engine.signClient.session.get(topic);
       switch (request.method) {
+        case NETWORK_METHODS.GET_NETWORKS:
+          const retrievedNetworks = await retrieveNetworksData();
+          const currentNetworkId = networksData.find(
+            networkData => networkData.networkId === selectedNetwork.networkId,
+          )?.networkId;
+
+          const formattedResponse = formatJsonRpcResult(id, {
+            retrievedNetworks,
+            currentNetworkId,
+          });
+
+          await web3wallet!.respondSessionRequest({
+            topic,
+            response: formattedResponse,
+          });
+          break;
+
+        case NETWORK_METHODS.CHANGE_NETWORK:
+          const network = request.params[0];
+          setCurrentIndex(0);
+          setSelectedNetwork(network);
+
+          const response = formatJsonRpcResult(id, {
+            response: 'true',
+          });
+
+          await web3wallet!.respondSessionRequest({
+            topic,
+            response: response,
+          });
+          break;
+
         case EIP155_SIGNING_METHODS.ETH_SEND_TRANSACTION:
           navigation.navigate('ApproveTransaction', {
             transaction: request.params[0],
@@ -83,8 +120,8 @@ const App = (): React.JSX.Element => {
             requestEvent,
             requestSessionData,
           });
-
           break;
+
         case 'cosmos_signDirect':
           const message = {
             txbody: TxBody.toJSON(
@@ -109,8 +146,8 @@ const App = (): React.JSX.Element => {
             requestEvent,
             requestSessionData,
           });
-
           break;
+
         case 'cosmos_signAmino':
           navigation.navigate('SignRequest', {
             namespace: COSMOS,
@@ -119,7 +156,6 @@ const App = (): React.JSX.Element => {
             requestEvent,
             requestSessionData,
           });
-
           break;
 
         case 'cosmos_sendTokens':
@@ -128,14 +164,19 @@ const App = (): React.JSX.Element => {
             requestEvent,
             requestSessionData,
           });
-
           break;
 
         default:
           throw new Error('Invalid method');
       }
     },
-    [navigation],
+    [
+      navigation,
+      networksData,
+      setSelectedNetwork,
+      setCurrentIndex,
+      selectedNetwork,
+    ],
   );
 
   const onSessionDelete = useCallback(() => {

src/components/Accounts.tsx

@@ -17,6 +17,7 @@ import { EIP155_SIGNING_METHODS } from '../utils/wallet-connect/EIP155Data';
 import { COSMOS_METHODS } from '../utils/wallet-connect/COSMOSData';
 import { useNetworks } from '../context/NetworksContext';
 import { COSMOS, EIP155 } from '../utils/constants';
+import { NETWORK_METHODS } from '../utils/wallet-connect/common-data';
 
 const Accounts = ({ currentIndex, updateIndex }: AccountsProps) => {
   const navigation =
@@ -63,6 +64,7 @@ const Accounts = ({ currentIndex, updateIndex }: AccountsProps) => {
                 // TODO: Debug optional namespace methods and events being required for approval
                 methods: [
                   ...Object.values(EIP155_SIGNING_METHODS),
+                  ...Object.values(NETWORK_METHODS),
                   ...(combinedNamespaces.eip155?.methods ?? []),
                 ],
                 events: [...(combinedNamespaces.eip155?.events ?? [])],
@@ -84,6 +86,7 @@ const Accounts = ({ currentIndex, updateIndex }: AccountsProps) => {
                 chains: [namespaceChainId],
                 methods: [
                   ...Object.values(COSMOS_METHODS),
+                  ...Object.values(NETWORK_METHODS),
                   ...(combinedNamespaces.cosmos?.methods ?? []),
                 ],
                 events: [...(combinedNamespaces.cosmos?.events ?? [])],

src/components/NetworkDropdown.tsx

@@ -7,23 +7,20 @@ import styles from '../styles/stylesheet';
 import { useNetworks } from '../context/NetworksContext';
 
 const NetworkDropdown = ({ updateNetwork }: NetworkDropdownProps) => {
-  const { networksData } = useNetworks();
+  const { networksData, selectedNetwork, setSelectedNetwork } = useNetworks();
 
   const [expanded, setExpanded] = useState<boolean>(false);
-  const [selectedNetwork, setSelectedNetwork] = useState<string>(
-    networksData[0].networkName,
-  );
 
   const handleNetworkPress = (networksData: NetworksDataState) => {
     updateNetwork(networksData);
-    setSelectedNetwork(networksData.networkName);
+    setSelectedNetwork(networksData);
     setExpanded(false);
   };
 
   return (
     <View style={styles.networkDropdown}>
       <List.Accordion
-        title={selectedNetwork}
+        title={selectedNetwork.networkName}
         expanded={expanded}
         onPress={() => setExpanded(!expanded)}>
         {networksData.map(networkData => (

src/components/PairingModal.tsx

@@ -15,6 +15,7 @@ import { EIP155_SIGNING_METHODS } from '../utils/wallet-connect/EIP155Data';
 import { COSMOS_METHODS } from '../utils/wallet-connect/COSMOSData';
 import { useNetworks } from '../context/NetworksContext';
 import { COSMOS, EIP155 } from '../utils/constants';
+import { NETWORK_METHODS } from '../utils/wallet-connect/common-data';
 
 const PairingModal = ({
   visible,
@@ -102,6 +103,7 @@ const PairingModal = ({
             // TODO: Debug optional namespace methods and events being required for approval
             methods: [
               ...Object.values(EIP155_SIGNING_METHODS),
+              ...Object.values(NETWORK_METHODS),
               ...(optionalNamespaces.eip155?.methods ?? []),
               ...(requiredNamespaces.eip155?.methods ?? []),
             ],
@@ -126,6 +128,7 @@ const PairingModal = ({
             chains: [namespaceChainId],
             methods: [
               ...Object.values(COSMOS_METHODS),
+              ...Object.values(NETWORK_METHODS),
               ...(optionalNamespaces.cosmos?.methods ?? []),
               ...(requiredNamespaces.cosmos?.methods ?? []),
             ],

src/context/NetworksContext.tsx

@@ -11,10 +11,8 @@ const NetworksContext = createContext<{
   setNetworksData: React.Dispatch<React.SetStateAction<NetworksDataState[]>>;
   networkType: string;
   setNetworkType: (networkType: string) => void;
-  selectedNetwork?: NetworksDataState;
-  setSelectedNetwork: React.Dispatch<
-    React.SetStateAction<NetworksDataState | undefined>
-  >;
+  selectedNetwork: NetworksDataState;
+  setSelectedNetwork: React.Dispatch<React.SetStateAction<NetworksDataState>>;
 }>({
   currentIndex: 0,
   setCurrentIndex: () => {},
@@ -35,7 +33,9 @@ const NetworksProvider = ({ children }: { children: any }) => {
   const [networksData, setNetworksData] = useState<NetworksDataState[]>([]);
   const [currentIndex, setCurrentIndex] = useState<number>(0);
   const [networkType, setNetworkType] = useState<string>(EIP155);
-  const [selectedNetwork, setSelectedNetwork] = useState<NetworksDataState>();
+  const [selectedNetwork, setSelectedNetwork] = useState<NetworksDataState>(
+    {} as NetworksDataState,
+  );
 
   useEffect(() => {
     const fetchData = async () => {
@@ -47,7 +47,7 @@ const NetworksProvider = ({ children }: { children: any }) => {
       }
       const retrievedNewNetworks = await retrieveNetworksData();
       setNetworksData(retrievedNewNetworks);
-      setSelectedNetwork(retrievedNetworks[0]);
+      setSelectedNetwork(retrievedNewNetworks[0]);
     };
 
     fetchData();

src/utils/accounts.ts

@@ -138,14 +138,13 @@ const storeNetworkData = async (
 
   const updatedNetworks: NetworksDataState[] = [
     ...retrievedNetworks,
-    { networkId: networkId, ...networkData },
+    { ...networkData, networkId: String(networkId) },
   ];
   await setInternetCredentials(
     'networks',
     '_',
     JSON.stringify(updatedNetworks),
   );
-
   return updatedNetworks;
 };
 

src/utils/wallet-connect/common-data.ts

@@ -0,0 +1,4 @@
+export const NETWORK_METHODS = {
+  GET_NETWORKS: 'getNetworks',
+  CHANGE_NETWORK: 'changeNetwork',
+};