Setup react native paper (#1)

* Basic setup for react native web

* Comment unsupported react-native code

* Add interface for keychain methods

* Fix storeNetworkData method

* Use mui dialog component

* Modify key store file name

* Fix add network and edit network screens

* Fix sign message screen

* Use light theme

---------

Co-authored-by: Nabarun <nabarun@deepstacksoft.com>

src/context/AccountsContext.tsx

@@ -0,0 +1,39 @@
+import React, { createContext, useContext, useState } from 'react';
+
+import { Account } from '../types';
+
+const AccountsContext = createContext<{
+  accounts: Account[];
+  setAccounts: (account: Account[]) => void;
+  currentIndex: number;
+  setCurrentIndex: (index: number) => void;
+}>({
+  accounts: [],
+  setAccounts: () => {},
+  currentIndex: 0,
+  setCurrentIndex: () => {},
+});
+
+const useAccounts = () => {
+  const accountsContext = useContext(AccountsContext);
+  return accountsContext;
+};
+
+const AccountsProvider = ({ children }: { children: any }) => {
+  const [accounts, setAccounts] = useState<Account[]>([]);
+  const [currentIndex, setCurrentIndex] = useState<number>(0);
+
+  return (
+    <AccountsContext.Provider
+      value={{
+        accounts,
+        setAccounts,
+        currentIndex,
+        setCurrentIndex,
+      }}>
+      {children}
+    </AccountsContext.Provider>
+  );
+};
+
+export { useAccounts, AccountsProvider };

src/context/NetworksContext.tsx

@@ -0,0 +1,76 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+import { NetworksDataState } from '../types';
+import { retrieveNetworksData, storeNetworkData } from '../utils/accounts';
+import { DEFAULT_NETWORKS, EIP155 } from '../utils/constants';
+
+const NetworksContext = createContext<{
+  networksData: NetworksDataState[];
+  setNetworksData: React.Dispatch<React.SetStateAction<NetworksDataState[]>>;
+  networkType: string;
+  setNetworkType: (networkType: string) => void;
+  selectedNetwork?: NetworksDataState;
+  setSelectedNetwork: React.Dispatch<
+    React.SetStateAction<NetworksDataState | undefined>
+  >;
+}>({
+  networksData: [],
+  setNetworksData: () => {},
+  networkType: '',
+  setNetworkType: () => {},
+  selectedNetwork: {} as NetworksDataState,
+  setSelectedNetwork: () => {},
+});
+
+const useNetworks = () => {
+  const networksContext = useContext(NetworksContext);
+  return networksContext;
+};
+
+const NetworksProvider = ({ children }: { children: any }) => {
+  const [networksData, setNetworksData] = useState<NetworksDataState[]>([]);
+  const [networkType, setNetworkType] = useState<string>(EIP155);
+  const [selectedNetwork, setSelectedNetwork] = useState<NetworksDataState>();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const retrievedNetworks = await retrieveNetworksData();
+      if (retrievedNetworks.length === 0) {
+        for (const defaultNetwork of DEFAULT_NETWORKS) {
+          await storeNetworkData(defaultNetwork);
+        }
+      }
+      const retrievedNewNetworks = await retrieveNetworksData();
+      setNetworksData(retrievedNewNetworks);
+      setSelectedNetwork(retrievedNewNetworks[0]);
+    };
+
+    if (networksData.length === 0) {
+      fetchData();
+    }
+  }, [networksData]);
+
+  useEffect(() => {
+    setSelectedNetwork(prevSelectedNetwork => {
+      return networksData.find(
+        networkData => networkData.networkId === prevSelectedNetwork?.networkId,
+      );
+    });
+  }, [networksData]);
+
+  return (
+    <NetworksContext.Provider
+      value={{
+        networksData,
+        setNetworksData,
+        networkType,
+        setNetworkType,
+        selectedNetwork,
+        setSelectedNetwork,
+      }}>
+      {children}
+    </NetworksContext.Provider>
+  );
+};
+
+export { useNetworks, NetworksProvider };

src/context/WalletConnectContext.tsx

@@ -0,0 +1,43 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+// import { SessionTypes } from '@walletconnect/types';
+
+import { WalletConnectContextProps } from '../types';
+import { web3wallet } from '../utils/wallet-connect/WalletConnectUtils';
+import useInitialization from '../hooks/useInitialization';
+
+const WalletConnectContext = createContext<WalletConnectContextProps>({
+  activeSessions: {},
+  setActiveSessions: () => {},
+});
+
+const useWalletConnect = () => {
+  const walletConnectContext = useContext(WalletConnectContext);
+  return walletConnectContext;
+};
+
+const WalletConnectProvider = ({ children }: { children: React.ReactNode }) => {
+  useInitialization();
+
+  useEffect(() => {
+    const sessions = (web3wallet && web3wallet.getActiveSessions()) || {};
+    setActiveSessions(sessions);
+  }, []);
+
+  const [activeSessions, setActiveSessions] = useState<
+    // Record<string, SessionTypes.Struct>
+    Record<string, any>
+  >({});
+
+  return (
+    <WalletConnectContext.Provider
+      value={{
+        activeSessions,
+        setActiveSessions,
+      }}>
+      {children}
+    </WalletConnectContext.Provider>
+  );
+};
+
+export { useWalletConnect, WalletConnectProvider };