switch networks POC (#176)

* Adds ability to switch networks to node app

- Adds network selector to onboarding flow and main layout
- Updates styling of selectors
- Changes user setting to store network and remove storing data dir
- Bug fix in SendAsset when no accounts exist

* comment explaining usequery

Author: patnir

main/api/ironfish/Ironfish.ts

@@ -2,20 +2,23 @@ import fsAsync from "fs/promises";
 
 import {
   ALL_API_NAMESPACES,
+  DEFAULT_DATA_DIR,
+  DatabaseIsLockedError,
   FullNode,
-  PEER_STORE_FILE_NAME,
   IronfishSdk,
+  NodeFileProvider,
+  PEER_STORE_FILE_NAME,
   RpcClient,
   RpcMemoryClient,
   getPackageFrom,
-  DatabaseIsLockedError,
 } from "@ironfish/sdk";
 import log from "electron-log";
 import { v4 as uuid } from "uuid";
 
 import { logger } from "./logger";
 import packageJson from "../../../package.json";
 import { SnapshotManager } from "../snapshot/snapshotManager";
+import { getUserSettings } from "../user-settings/userSettings";
 import { SplitPromise, splitPromise } from "../utils";
 
 export class Ironfish {
@@ -26,27 +29,40 @@ export class Ironfish {
   private _started: boolean = false;
   private _fullNode: FullNode | null = null;
   private _initialized: boolean = false;
-  private _dataDir: string;
+  private _networkId: number;
 
-  constructor(dataDir: string) {
-    this._dataDir = dataDir;
+  constructor({ networkId }: { networkId: number }) {
+    this._networkId = networkId;
   }
 
-  private constructSdk() {
-    return IronfishSdk.init({
-      dataDir: this._dataDir,
+  private async constructSdk() {
+    const dataDir = await this.getDataDir();
+    return await IronfishSdk.init({
+      dataDir,
       logger: logger,
       pkg: getPackageFrom(packageJson),
       configOverrides: {
         databaseMigrate: true,
       },
+      internalOverrides: {
+        networkId: this._networkId,
+      },
     });
   }
 
+  private async getDataDir() {
+    const fileSystem = new NodeFileProvider();
+    await fileSystem.init();
+    const path = fileSystem.resolve(DEFAULT_DATA_DIR);
+
+    return this._networkId === 0 ? path + "-testnet" : path;
+  }
+
   private constructNode(sdk: IronfishSdk) {
     return sdk.node({
       privateIdentity: sdk.getPrivateIdentity(),
       autoSeed: true,
+      networkId: this._networkId,
     });
   }
 
@@ -160,6 +176,23 @@ export class Ironfish {
     this.sdkPromise = splitPromise();
   }
 
+  async changeNetwork(networkId: number) {
+    if (this._networkId === networkId) {
+      return;
+    }
+
+    await this.stop();
+
+    this._networkId = networkId;
+
+    const settingsStore = await getUserSettings();
+    settingsStore.set({
+      networkId,
+    });
+
+    await this.init();
+  }
+
   async restart() {
     await this.stop();
     await this.init();

main/api/ironfish/index.ts

@@ -77,9 +77,21 @@ export const ironfishRouter = t.router({
     const response = await rpcClient.node.getStatus();
     return response.content;
   }),
-  getInitialState: t.procedure.query(async () => {
-    return manager.getInitialState();
-  }),
+  getInitialState: t.procedure
+    .input(
+      z
+        .object({
+          seed: z.string().optional(),
+        })
+        .optional(),
+    )
+    .query(
+      async ({
+        input: _, // Hack to skip the cache. Trpc doesn't support queryKey yet.
+      }) => {
+        return await manager.getInitialState();
+      },
+    ),
   shouldDownloadSnapshot: t.procedure.query(async () => {
     return manager.shouldDownloadSnapshot();
   }),
@@ -113,4 +125,14 @@ export const ironfishRouter = t.router({
     const ironfish = await manager.getIronfish();
     await ironfish.start();
   }),
+  changeNetwork: t.procedure
+    .input(
+      z.object({
+        network: z.enum(["MAINNET", "TESTNET"]),
+      }),
+    )
+    .mutation(async (opts) => {
+      const ironfish = await manager.getIronfish();
+      await ironfish.changeNetwork(opts.input.network === "MAINNET" ? 1 : 0);
+    }),
 });

main/api/manager.ts

@@ -10,14 +10,15 @@ export type InitialState =
 
 export class Manager {
   private _ironfish: Ironfish | null = null;
-  private _initialState: InitialState | null = null;
 
   async getIronfish(): Promise<Ironfish> {
     if (this._ironfish) return this._ironfish;
 
     const userSettings = await getUserSettings();
-    const dataDir = userSettings.get("dataDir");
-    this._ironfish = new Ironfish(dataDir);
+    const networkId = userSettings.get("networkId");
+    this._ironfish = new Ironfish({
+      networkId,
+    });
     return this._ironfish;
   }
 
@@ -36,8 +37,6 @@ export class Manager {
   };
 
   async getInitialState(): Promise<InitialState> {
-    if (this._initialState) return this._initialState;
-
     const ironfish = await this.getIronfish();
 
     if (!ironfish.isStarted()) {

main/api/snapshot/index.ts

@@ -36,6 +36,10 @@ export const snapshotRouter = t.router({
     }),
   downloadSnapshot: t.procedure.mutation(async () => {
     const ironfish = await manager.getIronfish();
+    if (ironfish.isStarted()) {
+      await ironfish.stop();
+      await ironfish.init();
+    }
     ironfish.downloadSnapshot();
   }),
 });

main/api/user-settings/userSettings.ts

@@ -1,20 +1,20 @@
-import { DEFAULT_DATA_DIR, NodeFileProvider } from "@ironfish/sdk";
+import { DEFAULT_NETWORK_ID, NodeFileProvider } from "@ironfish/sdk";
 import Store, { Schema } from "electron-store";
 import { z } from "zod";
 
 const STORE_NAME = "user-settings";
 
 export const settingsZodSchema = z.object({
-  dataDir: z.string(),
+  networkId: z.number(),
   theme: z.enum(["light", "dark", "system"]),
   locale: z.string().nullable(),
 });
 
 export type SchemaDefinition = z.infer<typeof settingsZodSchema>;
 
 export const settingsSchema: Schema<SchemaDefinition> = {
-  dataDir: {
-    type: "string",
+  networkId: {
+    type: "number",
   },
   theme: {
     enum: ["light", "dark", "system"],
@@ -36,7 +36,7 @@ export async function getUserSettings() {
     schema: settingsSchema,
     name: STORE_NAME,
     defaults: {
-      dataDir: fileSystem.resolve(DEFAULT_DATA_DIR),
+      networkId: DEFAULT_NETWORK_ID,
       theme: "system",
       locale: null,
     },

renderer/components/LanguageSelector/LanguageSelector.tsx

@@ -1,23 +1,23 @@
 import {
-  Text,
+  Box,
+  Flex,
+  FlexProps,
+  Heading,
   Modal,
-  ModalOverlay,
-  ModalContent,
   ModalBody,
-  Heading,
+  ModalContent,
   ModalFooter,
+  ModalOverlay,
+  Text,
   useDisclosure,
-  Flex,
-  Box,
-  FlexProps,
 } from "@chakra-ui/react";
 import { useForm } from "react-hook-form";
-import { FaChevronDown } from "react-icons/fa";
+import { FaChevronRight } from "react-icons/fa";
 import { MdOutlineLanguage } from "react-icons/md";
 import { defineMessages, useIntl } from "react-intl";
 import { z } from "zod";
 
-import { useSelectedLocaleContext, Locales } from "@/intl/IntlProvider";
+import { Locales, useSelectedLocaleContext } from "@/intl/IntlProvider";
 import { COLORS } from "@/ui/colors";
 import { Select } from "@/ui/Forms/Select/Select";
 import { PillButton } from "@/ui/PillButton/PillButton";
@@ -111,9 +111,16 @@ export function LanguageSelector({ buttonContainerProps }: Props) {
         borderRadius="5px"
         bg={COLORS.GRAY_LIGHT}
         color={COLORS.GRAY_MEDIUM}
-        justifyContent="center"
+        justifyContent={{
+          base: "center",
+          md: "space-between",
+        }}
         alignItems="center"
         py="6px"
+        px={{
+          base: 0,
+          md: "18px",
+        }}
         _dark={{
           bg: COLORS.DARK_MODE.GRAY_MEDIUM,
           color: COLORS.DARK_MODE.GRAY_LIGHT,
@@ -129,25 +136,28 @@ export function LanguageSelector({ buttonContainerProps }: Props) {
         onClick={onOpen}
         {...buttonContainerProps}
       >
-        <MdOutlineLanguage />
-        <Text
-          ml={2}
-          mr={3}
-          as="span"
-          display={{
-            base: "none",
-            md: "block",
-          }}
-        >
-          {formatMessage(selectedLanguage.message)}
-        </Text>
+        <Flex alignItems="center" justifyContent="center">
+          <MdOutlineLanguage />
+          <Text
+            ml={18}
+            mr={3}
+            as="span"
+            display={{
+              base: "none",
+              md: "block",
+            }}
+          >
+            {formatMessage(selectedLanguage.message)}
+          </Text>
+        </Flex>
+
         <Box
           display={{
             base: "none",
             md: "block",
           }}
         >
-          <FaChevronDown fontSize="0.6em" />
+          <FaChevronRight fontSize="0.6em" />
         </Box>
       </Flex>
       <LanguageSelectorModal isOpen={isOpen} onClose={onClose} />