feat(wallet): rebrand network settings (#1992)

* feat: update arrow * feat: update network view * feat: fix build * feat: remove padding --------- Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>
iotaledger · Aug 29, 2024 · f489ac1 · f489ac1
1 parent 10aaa47
commit f489ac1
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 147 deletions.
diff --git a/apps/ui-kit/src/lib/components/atoms/header/Header.tsx b/apps/ui-kit/src/lib/components/atoms/header/Header.tsx
@@ -3,7 +3,7 @@
 
 import cx from 'classnames';
 import { Button, ButtonSize, ButtonType } from '../button';
-import { ArrowLeft, Close } from '@iota/ui-icons';
+import { ArrowBack, Close } from '@iota/ui-icons';
 
 interface HeaderProps {
     /**
@@ -35,7 +35,7 @@ export function Header({ title, titleCentered, onBack, onClose }: HeaderProps):
                     size={ButtonSize.Small}
                     type={ButtonType.Ghost}
                     onClick={onBack}
-                    icon={<ArrowLeft />}
+                    icon={<ArrowBack />}
                 />
             ) : (
                 keepSpaceForIcon && <div className="w-9" />

diff --git a/apps/wallet/src/ui/app/components/menu/content/NetworkSettings.tsx b/apps/wallet/src/ui/app/components/menu/content/NetworkSettings.tsx
@@ -2,14 +2,13 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useNextMenuUrl, NetworkSelector, Overlay } from '_components';
+import { NetworkSelector, Overlay } from '_components';
 import { useNavigate } from 'react-router-dom';
 
 export function NetworkSettings() {
     const navigate = useNavigate();
-    const mainMenuUrl = useNextMenuUrl(true, '/');
     return (
-        <Overlay showModal title="Network" closeOverlay={() => navigate(mainMenuUrl)}>
+        <Overlay showModal title="Network" closeOverlay={() => navigate('/')} showBackButton>
             <NetworkSelector />
         </Overlay>
     );

diff --git a/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx b/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx
@@ -109,7 +109,7 @@ function MenuList() {
 
     return (
         <Overlay showModal title="Settings" closeOverlay={() => navigate('/')}>
-            <div className="flex h-full flex-col justify-between">
+            <div className="flex h-full w-full flex-col justify-between">
                 <div className="flex flex-col">
                     {MENU_ITEMS.map((item, index) => (
                         <Card

diff --git a/apps/wallet/src/ui/app/components/network-selector/NetworkSelector.module.scss b/apps/wallet/src/ui/app/components/network-selector/NetworkSelector.module.scss
diff --git a/apps/wallet/src/ui/app/components/network-selector/index.tsx b/apps/wallet/src/ui/app/components/network-selector/index.tsx
@@ -6,82 +6,70 @@ import { useAppDispatch, useAppSelector } from '_hooks';
 import { changeActiveNetwork } from '_redux/slices/app';
 import { ampli } from '_src/shared/analytics/ampli';
 import { getCustomNetwork } from '_src/shared/api-env';
-import { Check24 } from '@iota/icons';
 import { getAllNetworks, Network, type NetworkConfiguration } from '@iota/iota-sdk/client';
-import cl from 'clsx';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'react-hot-toast';
-
 import { CustomRPCInput } from './custom-rpc-input';
-import st from './NetworkSelector.module.scss';
+import { RadioButton } from '@iota/apps-ui-kit';
 
 export function NetworkSelector() {
     const activeNetwork = useAppSelector(({ app }) => app.network);
     const activeCustomRpc = useAppSelector(({ app }) => app.customRpc);
     const [isCustomRpcInputVisible, setCustomRpcInputVisible] = useState<boolean>(
         activeNetwork === Network.Custom,
     );
+
     // change the selected network name whenever the activeNetwork or activeCustomRpc changes
     useEffect(() => {
         setCustomRpcInputVisible(activeNetwork === Network.Custom && !!activeCustomRpc);
     }, [activeNetwork, activeCustomRpc]);
+
     const dispatch = useAppDispatch();
     const networks = useMemo(() => {
         const supportedNetworks = Object.entries(getAllNetworks());
         const customNetwork: [Network, NetworkConfiguration] = [Network.Custom, getCustomNetwork()];
         return [...supportedNetworks, customNetwork];
     }, []);
 
+    async function handleNetworkChange(network: NetworkConfiguration) {
+        if (activeNetwork === network.id) {
+            return;
+        }
+        setCustomRpcInputVisible(network.id === Network.Custom);
+        if (network.id !== Network.Custom) {
+            try {
+                await dispatch(
+                    changeActiveNetwork({
+                        network: {
+                            network: network.id,
+                            customRpcUrl: null,
+                        },
+                        store: true,
+                    }),
+                ).unwrap();
+                ampli.switchedNetwork({
+                    toNetwork: network.name,
+                });
+            } catch (e) {
+                toast.error((e as Error).message);
+            }
+        }
+    }
+
     return (
-        <div className={st.networkOptions}>
-            <ul className={st.networkLists}>
+        <div className="flex w-full flex-col">
+            <div>
                 {networks.map(([id, network]) => (
-                    <li className={st.networkItem} key={id}>
-                        <button
-                            type="button"
-                            onClick={async () => {
-                                if (activeNetwork === network.id) {
-                                    return;
-                                }
-                                setCustomRpcInputVisible(network.id === Network.Custom);
-                                if (network.id !== Network.Custom) {
-                                    try {
-                                        await dispatch(
-                                            changeActiveNetwork({
-                                                network: {
-                                                    network: network.id,
-                                                    customRpcUrl: null,
-                                                },
-                                                store: true,
-                                            }),
-                                        ).unwrap();
-                                        ampli.switchedNetwork({
-                                            toNetwork: network.name,
-                                        });
-                                    } catch (e) {
-                                        toast.error((e as Error).message);
-                                    }
-                                }
-                            }}
-                            className={st.networkSelector}
-                        >
-                            <Check24
-                                className={cl(
-                                    st.networkIcon,
-                                    st.selectedNetwork,
-                                    activeNetwork === network.id && st.networkActive,
-                                    network.id === Network.Custom &&
-                                        isCustomRpcInputVisible &&
-                                        st.customRpcActive,
-                                )}
-                            />
-
-                            {network.name}
-                        </button>
-                    </li>
+                    <div className="px-md">
+                        <RadioButton
+                            label={network.name}
+                            isChecked={activeNetwork === id}
+                            onChange={() => handleNetworkChange(network)}
+                        />
+                    </div>
                 ))}
-            </ul>
+            </div>
             <AnimatePresence>
                 {isCustomRpcInputVisible && (
                     <motion.div
@@ -94,7 +82,6 @@ export function NetworkSelector() {
                             duration: 0.5,
                             ease: 'easeInOut',
                         }}
-                        className={st.customRpc}
                     >
                         <CustomRPCInput />
                     </motion.div>