feat: add voi testnet block explorer

src/extension/config/networks.ts

@@ -149,7 +149,19 @@ const networks: INetwork[] = [
     ],
     canonicalName: 'Voi',
     chakraTheme: 'voi',
-    explorers: [],
+    explorers: [
+      {
+        accountPath: '/account',
+        applicationPath: '/application',
+        assetPath: '/asset',
+        baseUrl: 'https://voi.observer/explorer',
+        blockPath: '/block',
+        canonicalName: 'Voi Observer',
+        groupPath: '/group',
+        id: 'voi-observer',
+        transactionPath: '/transaction',
+      },
+    ],
     genesisId: 'voitest-v1',
     genesisHash: 'IXnoWtviVVJW5LGivNFc0Dq14V3kqaXuK2u5OQrdVZo=',
     indexers: [

src/extension/features/settings/thunks/setSettings.ts

@@ -22,6 +22,7 @@ import {
 
 // utils
 import {
+  convertGenesisHashToHex,
   selectDefaultNetwork,
   selectNetworkFromSettings,
 } from '@extension/utils';
@@ -48,8 +49,9 @@ const setSettings: AsyncThunk<
     ) {
       selectedNetwork = selectDefaultNetwork(networks);
 
-      settings.general.preferredBlockExplorerId =
-        selectedNetwork.explorers[0]?.id || null;
+      settings.general.preferredBlockExplorerIds[
+        convertGenesisHashToHex(selectedNetwork.genesisHash).toUpperCase()
+      ] = selectedNetwork.explorers[0]?.id || null;
       settings.general.selectedNetworkGenesisHash = selectedNetwork.genesisHash;
     }
 

src/extension/features/settings/utils/createDefaultSettings.ts

@@ -22,7 +22,7 @@ export default function createDefaultSettings(networks: INetwork[]): ISettings {
       theme: 'light',
     },
     general: {
-      preferredBlockExplorerId: defaultNetwork.explorers[0]?.id || null,
+      preferredBlockExplorerIds: {},
       selectedNetworkGenesisHash: defaultNetwork.genesisHash,
     },
   };

src/extension/features/settings/utils/getInitialState.ts

@@ -13,7 +13,7 @@ export default function getInitialState(): ISettingsState {
     },
     fetching: false,
     general: {
-      preferredBlockExplorerId: null,
+      preferredBlockExplorerIds: {},
       selectedNetworkGenesisHash: null,
     },
     saving: false,

src/extension/pages/GeneralSettingsPage/GeneralSettingsPage.tsx

@@ -27,6 +27,7 @@ import {
   INetwork,
   ISettings,
 } from '@extension/types';
+import { convertGenesisHashToHex } from '@extension/utils';
 
 const GeneralSettingsPage: FC = () => {
   const { t } = useTranslation();
@@ -45,21 +46,30 @@ const GeneralSettingsPage: FC = () => {
   const handlePreferredBlockExplorerChange = (
     event: ChangeEvent<HTMLSelectElement>
   ) => {
-    const explorer: IExplorer | null =
-      selectedNetwork?.explorers.find(
-        (value) => value.id === event.target.value
-      ) || null;
+    let explorer: IExplorer | null;
 
-    if (explorer) {
-      dispatch(
-        setSettings({
-          ...settings,
-          general: {
-            ...settings.general,
-            preferredBlockExplorerId: explorer.id,
-          },
-        })
-      );
+    if (selectedNetwork) {
+      explorer =
+        selectedNetwork?.explorers.find(
+          (value) => value.id === event.target.value
+        ) || null;
+
+      if (explorer) {
+        dispatch(
+          setSettings({
+            ...settings,
+            general: {
+              ...settings.general,
+              preferredBlockExplorerIds: {
+                ...settings.general.preferredBlockExplorerIds,
+                [convertGenesisHashToHex(
+                  selectedNetwork.genesisHash
+                ).toUpperCase()]: explorer.id,
+              },
+            },
+          })
+        );
+      }
     }
   };
 
@@ -82,8 +92,11 @@ const GeneralSettingsPage: FC = () => {
                 value: value.id,
               }))}
               value={
-                settings.general.preferredBlockExplorerId ||
-                selectedNetwork.explorers[0].id
+                settings.general.preferredBlockExplorerIds[
+                  convertGenesisHashToHex(
+                    selectedNetwork.genesisHash
+                  ).toUpperCase()
+                ] || selectedNetwork.explorers[0].id
               }
             />
           )}

src/extension/selectors/useSelectPreferredBlockExplorer.ts

@@ -2,6 +2,7 @@ import { useSelector } from 'react-redux';
 
 // types
 import { IExplorer, IMainRootState, INetwork } from '@extension/types';
+import { convertGenesisHashToHex } from '@extension/utils';
 
 /**
  * Gets the currently preferred block explorer from the settings.
@@ -22,8 +23,14 @@ export default function useSelectPreferredBlockExplorer(): IExplorer | null {
 
     return (
       selectedNetwork.explorers.find(
-        (value) => value.id === state.settings.general.preferredBlockExplorerId
-      ) || null
+        (value) =>
+          value.id ===
+          state.settings.general.preferredBlockExplorerIds[
+            convertGenesisHashToHex(selectedNetwork.genesisHash).toUpperCase()
+          ]
+      ) ||
+      selectedNetwork.explorers[0] ||
+      null
     );
   });
 }

src/extension/types/IGeneralSettings.ts

@@ -1,5 +1,5 @@
 interface IGeneralSettings {
-  preferredBlockExplorerId: string | null;
+  preferredBlockExplorerIds: Record<string, string | null>;
   selectedNetworkGenesisHash: string | null;
 }