feat(wallet-dashboard): persist selected network

apps/core/src/utils/capitalizeFirstLetter.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export function capitalizeFirstLetter(str: string): string {
+    if (!str) return str;
+    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+}

apps/core/src/utils/index.ts

@@ -22,6 +22,7 @@ export * from './getExplorerPaths';
 export * from './getExplorerLink';
 export * from './truncateString';
 export * from './determineCountDownText';
+export * from './capitalizeFirstLetter';
 
 export * from './stake';
 export * from './transaction';

apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx

@@ -3,14 +3,15 @@
 
 import { SettingsDialog, useSettingsDialog } from '@/components';
 import { Badge, BadgeType, Button, ButtonType } from '@iota/apps-ui-kit';
-import { ConnectButton, useIotaClientContext } from '@iota/dapp-kit';
-import { getNetwork, Network } from '@iota/iota-sdk/client';
-import { ThemeSwitcher } from '@iota/core';
+import { ConnectButton } from '@iota/dapp-kit';
+import { Network } from '@iota/iota-sdk/client';
+import { capitalizeFirstLetter, ThemeSwitcher } from '@iota/core';
 import { Settings } from '@iota/ui-icons';
+import { usePersistedNetwork } from '@/hooks';
 
 export function TopNav() {
-    const { network } = useIotaClientContext();
-    const { name: networkName } = getNetwork(network);
+    const { persistedNetwork } = usePersistedNetwork();
+
     const {
         isSettingsDialogOpen,
         settingsDialogView,
@@ -22,8 +23,10 @@ export function TopNav() {
     return (
         <div className="flex w-full flex-row items-center justify-end gap-md py-xs--rs">
             <Badge
-                label={networkName}
-                type={network === Network.Mainnet ? BadgeType.PrimarySoft : BadgeType.Neutral}
+                label={capitalizeFirstLetter(persistedNetwork)}
+                type={
+                    persistedNetwork === Network.Mainnet ? BadgeType.PrimarySoft : BadgeType.Neutral
+                }
             />
             <ConnectButton size="md" />
             <SettingsDialog

apps/wallet-dashboard/components/Dialogs/settings/views/NetworkSelectorView.tsx

@@ -1,12 +1,11 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import React from 'react';
 import { Header, RadioButton } from '@iota/apps-ui-kit';
 import { DialogLayout, DialogLayoutBody } from '../../layout';
 import { NetworkConfiguration } from '@iota/iota-sdk/client';
 import { useIotaClientContext } from '@iota/dapp-kit';
-import toast from 'react-hot-toast';
+import { usePersistedNetwork } from '@/hooks';
 
 interface NetworkSelectorViewProps {
     handleClose: () => void;
@@ -18,17 +17,10 @@ export function NetworkSelectorView({
     onBack,
 }: NetworkSelectorViewProps): JSX.Element {
     const clientContext = useIotaClientContext();
-    const activeNetwork = clientContext.network;
     // Dashboard doesn't support RPCs yet
     const networks = clientContext.networks as Record<string, NetworkConfiguration>;
 
-    async function handleNetworkChange(network: NetworkConfiguration) {
-        if (activeNetwork === network.id) {
-            return;
-        }
-        clientContext.selectNetwork(network.id);
-        toast.success(`Switched to ${network.name}`);
-    }
+    const { persistedNetwork, handleNetworkChange } = usePersistedNetwork();
 
     return (
         <DialogLayout>
@@ -39,7 +31,7 @@ export function NetworkSelectorView({
                         <div className="px-md" key={network.id}>
                             <RadioButton
                                 label={network.name}
-                                isChecked={activeNetwork === network.id}
+                                isChecked={persistedNetwork === network.id}
                                 onChange={() => handleNetworkChange(network)}
                             />
                         </div>

apps/wallet-dashboard/components/Dialogs/settings/views/SettingsListView.tsx

@@ -14,23 +14,21 @@ import {
 } from '@iota/apps-ui-kit';
 import { DialogLayout, DialogLayoutBody } from '../../layout';
 import { SettingsDialogView } from '../enums';
-import { getNetwork } from '@iota/iota-sdk/client';
-import { useIotaClientContext } from '@iota/dapp-kit';
 import { Globe } from '@iota/ui-icons';
+import { usePersistedNetwork } from '@/hooks';
+import { capitalizeFirstLetter } from '@iota/core';
 
 interface SettingsListViewProps {
     handleClose: () => void;
     setView: (view: SettingsDialogView) => void;
 }
 
 export function SettingsListView({ handleClose, setView }: SettingsListViewProps): JSX.Element {
-    const { network } = useIotaClientContext();
-    const { name: networkName } = getNetwork(network);
-
+    const { persistedNetwork } = usePersistedNetwork();
     const MENU_ITEMS = [
         {
             title: 'Network',
-            subtitle: networkName,
+            subtitle: persistedNetwork,
             icon: <Globe />,
             onClick: () => setView(SettingsDialogView.NetworkSettings),
         },
@@ -49,7 +47,10 @@ export function SettingsListView({ handleClose, setView }: SettingsListViewProps
                                         <span className="text-2xl">{item.icon}</span>
                                     </div>
                                 </CardImage>
-                                <CardBody title={item.title} subtitle={item.subtitle} />
+                                <CardBody
+                                    title={item.title}
+                                    subtitle={capitalizeFirstLetter(item.subtitle)}
+                                />
                                 <CardAction type={CardActionType.Link} />
                             </Card>
                         ))}

apps/wallet-dashboard/hooks/index.ts

@@ -12,3 +12,4 @@ export * from './useGetStardustMigratableObjects';
 export * from './useGetSupplyIncreaseVestingObjects';
 export * from './useGroupedMigrationObjectsByExpirationDate';
 export * from './useTransferTransaction';
+export * from './usePersistedNetwork';

apps/wallet-dashboard/hooks/usePersistedNetwork.ts

@@ -0,0 +1,39 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useIotaClientContext } from '@iota/dapp-kit';
+import { NetworkConfiguration } from '@iota/iota-sdk/client';
+import { useLocalStorage } from '@iota/core';
+import toast from 'react-hot-toast';
+import { useEffect } from 'react';
+
+export function usePersistedNetwork() {
+    const clientContext = useIotaClientContext();
+    const activeNetwork = clientContext.network;
+
+    const [persistedNetwork, setPersistedNetwork] = useLocalStorage<string>(
+        'network_iota-dashboard',
+        activeNetwork,
+    );
+
+    async function handleNetworkChange(network: NetworkConfiguration) {
+        if (persistedNetwork === network.id) {
+            return;
+        }
+
+        clientContext.selectNetwork(network.id);
+        setPersistedNetwork(network.id);
+        toast.success(`Switched to ${network.name}`);
+    }
+
+    useEffect(() => {
+        if (activeNetwork !== persistedNetwork) {
+            setPersistedNetwork(activeNetwork);
+        }
+    }, [persistedNetwork, activeNetwork, setPersistedNetwork]);
+
+    return {
+        persistedNetwork,
+        handleNetworkChange,
+    };
+}

apps/wallet-dashboard/providers/AppProviders.tsx

@@ -9,7 +9,7 @@ import { IotaClientProvider, lightTheme, darkTheme, WalletProvider } from '@iota
 import { getAllNetworks, getDefaultNetwork } from '@iota/iota-sdk/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useState } from 'react';
-import { KioskClientProvider } from '@iota/core';
+import { KioskClientProvider, useLocalStorage } from '@iota/core';
 import { growthbook } from '@/lib/utils';
 import { ThemeProvider } from '@iota/core';
 
@@ -19,6 +19,8 @@ export function AppProviders({ children }: React.PropsWithChildren) {
     const [queryClient] = useState(() => new QueryClient());
     const allNetworks = getAllNetworks();
     const defaultNetwork = getDefaultNetwork();
+    const [persistedNetwork] = useLocalStorage<string>('network_iota-dashboard', defaultNetwork);
+
     function handleNetworkChange() {
         queryClient.resetQueries();
         queryClient.clear();
@@ -28,7 +30,7 @@ export function AppProviders({ children }: React.PropsWithChildren) {
             <QueryClientProvider client={queryClient}>
                 <IotaClientProvider
                     networks={allNetworks}
-                    defaultNetwork={defaultNetwork}
+                    defaultNetwork={persistedNetwork}
                     onNetworkChange={handleNetworkChange}
                 >
                     <KioskClientProvider>