Select network on electron app

src/app/App.tsx

@@ -16,6 +16,7 @@ import Aside from "./sections/Aside"
 /* header */
 import Refresh from "./sections/Refresh"
 import Preferences from "./sections/Preferences"
+import SelectNetwork from "./sections/SelectNetwork"
 import SelectTheme from "./sections/SelectTheme"
 import ConnectWallet from "./sections/ConnectWallet"
 
@@ -46,6 +47,7 @@ const App = () => {
         <section>
           <Refresh />
           <Preferences />
+          <SelectNetwork />
           <SelectTheme />
         </section>
         <ValidatorButton />

src/app/InitWallet.tsx

@@ -1,17 +1,19 @@
 import { FC, useMemo } from "react"
 import { QueryClient, QueryClientProvider } from "react-query"
 import { useWallet, WalletStatus } from "@terra-money/wallet-provider"
+import { useNetworkName } from "data/wallet"
 import Splash from "auth/modules/Splash"
 import Online from "./containers/Online"
 
 const InitWallet: FC = ({ children }) => {
-  const { status, network } = useWallet()
+  const { status } = useWallet()
   const queryClient = useQueryClient()
+  const networkName = useNetworkName()
 
   return status === WalletStatus.INITIALIZING ? (
     <Splash />
   ) : (
-    <QueryClientProvider client={queryClient} key={network.name}>
+    <QueryClientProvider client={queryClient} key={networkName}>
       {children}
       <Online />
     </QueryClientProvider>
@@ -22,8 +24,7 @@ export default InitWallet
 
 /* hooks */
 const useQueryClient = () => {
-  const { network } = useWallet()
-  const { name } = network
+  const name = useNetworkName()
 
   return useMemo(() => {
     if (!name) throw new Error()

src/app/NetworksProvider.tsx

@@ -0,0 +1,11 @@
+import { fromPairs } from "ramda"
+import { WalletControllerChainOptions } from "@terra-money/wallet-provider"
+import createContext from "utils/createContext"
+
+export const [useNetworks, NetworksProvider] =
+  createContext<TerraNetworks>("useNetworks")
+
+export const convert = (options: WalletControllerChainOptions) => {
+  const { walletConnectChainIds: ids } = options
+  return fromPairs(Object.values(ids).map((item) => [item.name, item]))
+}

src/app/sections/SelectNetwork.tsx

@@ -0,0 +1,31 @@
+import SettingsIcon from "@mui/icons-material/Settings"
+import { RadioGroup } from "components/form"
+import { Popover } from "components/display"
+import HeaderIconButton from "../components/HeaderIconButton"
+import { useNetworkOptions, useNetworkState } from "data/wallet"
+
+const SelectNetwork = () => {
+  const [network, setNetwork] = useNetworkState()
+  const networkOptions = useNetworkOptions()
+
+  if (!networkOptions) return null
+
+  return (
+    <Popover
+      content={
+        <RadioGroup
+          options={networkOptions}
+          value={network}
+          onChange={setNetwork}
+        />
+      }
+      placement="bottom"
+    >
+      <HeaderIconButton>
+        <SettingsIcon style={{ fontSize: 18 }} />
+      </HeaderIconButton>
+    </Popover>
+  )
+}
+
+export default SelectNetwork

src/auth/hooks/useNetwork.ts

@@ -0,0 +1,49 @@
+import { atom, useRecoilState, useRecoilValue } from "recoil"
+import { useWallet } from "@terra-money/wallet-provider"
+import { useNetworks } from "app/NetworksProvider"
+import { electron } from "../scripts/env"
+import { getStoredNetwork, storeNetwork } from "../scripts/network"
+
+const networkState = atom({
+  key: "network",
+  default: getStoredNetwork(),
+})
+
+export const useNetworkState = () => {
+  const [network, setNetwork] = useRecoilState(networkState)
+
+  const changeNetwork = (network: NetworkName) => {
+    setNetwork(network)
+    storeNetwork(network)
+  }
+
+  return [network, changeNetwork] as const
+}
+
+/* helpers */
+export const useNetworkOptions = () => {
+  const networks = useNetworks()
+
+  if (!electron) return
+
+  return Object.values(networks).map(({ name }) => {
+    return { value: name, label: name }
+  })
+}
+
+export const useNetwork = () => {
+  const networks = useNetworks()
+  const network = useRecoilValue(networkState)
+  const wallet = useWallet()
+  return electron ? networks[network] : wallet.network
+}
+
+export const useNetworkName = () => {
+  const { name } = useNetwork()
+  return name
+}
+
+export const useChainID = () => {
+  const { chainID } = useNetwork()
+  return chainID
+}

src/auth/index.ts

@@ -1,3 +1 @@
 export { default as useAuth } from "./hooks/useAuth"
-export { default as useAddress } from "./hooks/useAddress"
-export * from "./hooks/useAddress"

src/auth/scripts/network.ts

@@ -0,0 +1,7 @@
+export const getStoredNetwork = () => {
+  return localStorage.getItem("network") ?? "mainnet"
+}
+
+export const storeNetwork = (network: NetworkName) => {
+  localStorage.setItem("network", network)
+}

src/components/form/RadioGroup.module.scss

@@ -3,7 +3,6 @@
 .list {
   max-height: 360px;
   overflow-y: auto;
-  padding-top: 12px;
 }
 
 .item {

src/components/layout/Tabs.module.scss

@@ -62,6 +62,7 @@
 
 .line .tab {
   border-bottom: 1px solid var(--card-bg);
+  margin-bottom: 12px;
   font-size: var(--font-size-small);
   font-weight: var(--bold);
   padding: 0 14px;

src/data/Terra/lcdClient.ts

@@ -1,9 +1,9 @@
 import { useMemo } from "react"
 import { LCDClient } from "@terra-money/terra.js"
-import { useWallet } from "@terra-money/wallet-provider"
+import { useNetwork } from "data/wallet"
 
 export const useLCDClient = () => {
-  const { network } = useWallet()
+  const network = useNetwork()
   const lcdClient = useMemo(
     () => new LCDClient({ ...network, URL: network.lcd }),
     [network]

src/data/wallet.ts

@@ -1,17 +1,2 @@
-import { useWallet } from "@terra-money/wallet-provider"
-export { useAddress } from "auth"
-
-export const useNetwork = () => {
-  const { network } = useWallet()
-  return network
-}
-
-export const useNetworkName = () => {
-  const { network } = useWallet()
-  return network.name
-}
-
-export const useChainID = () => {
-  const { network } = useWallet()
-  return network.chainID
-}
+export * from "auth/hooks/useNetwork"
+export { default as useAddress } from "auth/hooks/useAddress"

src/index.tsx

@@ -11,6 +11,7 @@ import { BRIDGE } from "config/constants"
 import { debug } from "utils/env"
 
 import "index.scss"
+import { convert, NetworksProvider } from "app/NetworksProvider"
 import ScrollToTop from "app/ScrollToTop"
 import InitWallet from "app/InitWallet"
 import InitTheme from "app/InitTheme"
@@ -24,12 +25,14 @@ getChainOptions().then((chainOptions) =>
       <RecoilRoot>
         <BrowserRouter>
           <ScrollToTop />
-          <WalletProvider {...chainOptions} connectorOpts={connectorOpts}>
-            <InitWallet>
-              <InitTheme />
-              <App />
-            </InitWallet>
-          </WalletProvider>
+          <NetworksProvider value={convert(chainOptions)}>
+            <WalletProvider {...chainOptions} connectorOpts={connectorOpts}>
+              <InitWallet>
+                <InitTheme />
+                <App />
+              </InitWallet>
+            </WalletProvider>
+          </NetworksProvider>
           {debug.query && <ReactQueryDevtools position="bottom-right" />}
         </BrowserRouter>
       </RecoilRoot>

src/types/network.d.ts

@@ -0,0 +1,8 @@
+type NetworkName = string
+type TerraNetworks = Record<NetworkName, TerraNetwork>
+
+interface TerraNetwork {
+  name: NetworkName
+  chainID: string
+  lcd: string
+}

src/types/settings.d.ts

@@ -6,7 +6,6 @@ interface AddressBook {
 }
 
 /* Tokens */
-type NetworkName = string
 type CustomTokens = Record<NetworkName, CustomTokensByNetwork>
 
 interface CustomTokensByNetwork {