From 7a078dd96915e13821a5ca9363b80dc6abf2eb0b Mon Sep 17 00:00:00 2001
From: yanguoyu <841185308@qq.com>
Date: Wed, 8 Nov 2023 11:22:08 +0800
Subject: [PATCH 1/2] fix: Click current network button to switch type.

---
 .../src/components/NetworkSetting/index.tsx    |  8 ++++----
 .../NetworkSetting/networkSetting.module.scss  | 18 +++++++++++++++---
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/neuron-ui/src/components/NetworkSetting/index.tsx b/packages/neuron-ui/src/components/NetworkSetting/index.tsx
index d50225539c..58c4ba0289 100644
--- a/packages/neuron-ui/src/components/NetworkSetting/index.tsx
+++ b/packages/neuron-ui/src/components/NetworkSetting/index.tsx
@@ -105,19 +105,19 @@ const NetworkSetting = ({ chain = chainState, settings: { networks = [] } }: Sta
                 <p>{`${network.name} (${network.remote})`}</p>
                 <Tooltip
                   tip={
-                    <button type="button" onClick={onSwitchNetworkType} className={styles.switchBtn}>
+                    <div className={styles.tooltip}>
                       {t('settings.network.switch-network-type', {
                         type: network.chain === LIGHT_CLIENT_MAINNET ? 'testnet' : 'mainnet',
                       })}
-                    </button>
+                    </div>
                   }
                   placement="top"
                   showTriangle
                 >
-                  <div className={styles.tag}>
+                  <button type="button" className={styles.tag} onClick={onSwitchNetworkType}>
                     {t(getNetworkLabelI18nkey(network.chain))}
                     <Switch />
-                  </div>
+                  </button>
                 </Tooltip>
               </div>
             ) : (
diff --git a/packages/neuron-ui/src/components/NetworkSetting/networkSetting.module.scss b/packages/neuron-ui/src/components/NetworkSetting/networkSetting.module.scss
index 25024fd5ec..443525f14a 100644
--- a/packages/neuron-ui/src/components/NetworkSetting/networkSetting.module.scss
+++ b/packages/neuron-ui/src/components/NetworkSetting/networkSetting.module.scss
@@ -27,15 +27,27 @@
     border-radius: 40px;
     display: flex;
     align-items: center;
+    cursor: default;
 
     & > svg {
       margin-left: 4px;
     }
   }
-  .switchBtn {
-    border: none;
-    background-color: transparent;
+  button.tag {
     cursor: pointer;
+    &:hover {
+      color: var(--primary-color);
+      border-color: var(--primary-color);
+
+      & > svg {
+        path {
+          fill: var(--primary-color);
+        }
+      }
+    }
+  }
+  .tooltip {
+    background-color: transparent;
     color: var(--main-text-color);
   }
 }

From 244d05fb364314ae5b650c8d5709b2ee935bcf2b Mon Sep 17 00:00:00 2001
From: yanguoyu <841185308@qq.com>
Date: Fri, 10 Nov 2023 16:17:36 +0800
Subject: [PATCH 2/2] fix: Better experience for switching network type

---
 .../src/components/NetworkSetting/index.tsx   | 29 +++++++++----------
 .../NetworkSetting/networkSetting.module.scss | 26 +++++------------
 2 files changed, 21 insertions(+), 34 deletions(-)

diff --git a/packages/neuron-ui/src/components/NetworkSetting/index.tsx b/packages/neuron-ui/src/components/NetworkSetting/index.tsx
index 58c4ba0289..e82447e235 100644
--- a/packages/neuron-ui/src/components/NetworkSetting/index.tsx
+++ b/packages/neuron-ui/src/components/NetworkSetting/index.tsx
@@ -99,13 +99,18 @@ const NetworkSetting = ({ chain = chainState, settings: { networks = [] } }: Sta
         itemClassName={styles.radioItem}
         options={showNetworks.map(network => ({
           value: network.id,
-          label:
-            currentId === network.id && network.type === NetworkType.Light ? (
-              <div className={styles.networkLabel}>
-                <p>{`${network.name} (${network.remote})`}</p>
+          label: (
+            <div className={styles.networkLabel}>
+              <p>{`${network.name} (${network.remote})`}</p>
+              <div className={styles.tag}>{t(getNetworkLabelI18nkey(network.chain))}</div>
+            </div>
+          ),
+          suffix: (
+            <div className={styles.suffix}>
+              {currentId === network.id && network.type === NetworkType.Light ? (
                 <Tooltip
                   tip={
-                    <div className={styles.tooltip}>
+                    <div>
                       {t('settings.network.switch-network-type', {
                         type: network.chain === LIGHT_CLIENT_MAINNET ? 'testnet' : 'mainnet',
                       })}
@@ -113,21 +118,13 @@ const NetworkSetting = ({ chain = chainState, settings: { networks = [] } }: Sta
                   }
                   placement="top"
                   showTriangle
+                  className={styles.switch}
                 >
-                  <button type="button" className={styles.tag} onClick={onSwitchNetworkType}>
-                    {t(getNetworkLabelI18nkey(network.chain))}
+                  <button type="button" onClick={onSwitchNetworkType}>
                     <Switch />
                   </button>
                 </Tooltip>
-              </div>
-            ) : (
-              <div className={styles.networkLabel}>
-                <p>{`${network.name} (${network.remote})`}</p>
-                <div className={styles.tag}>{t(getNetworkLabelI18nkey(network.chain))}</div>
-              </div>
-            ),
-          suffix: (
-            <div className={styles.suffix}>
+              ) : null}
               {network.readonly ? null : (
                 <button type="button" aria-label={t('common.edit')} onClick={onHandleNetwork}>
                   <EditNetwork data-action="edit" data-id={network.id} />
diff --git a/packages/neuron-ui/src/components/NetworkSetting/networkSetting.module.scss b/packages/neuron-ui/src/components/NetworkSetting/networkSetting.module.scss
index 443525f14a..0b1b9c3b73 100644
--- a/packages/neuron-ui/src/components/NetworkSetting/networkSetting.module.scss
+++ b/packages/neuron-ui/src/components/NetworkSetting/networkSetting.module.scss
@@ -27,29 +27,11 @@
     border-radius: 40px;
     display: flex;
     align-items: center;
-    cursor: default;
 
     & > svg {
       margin-left: 4px;
     }
   }
-  button.tag {
-    cursor: pointer;
-    &:hover {
-      color: var(--primary-color);
-      border-color: var(--primary-color);
-
-      & > svg {
-        path {
-          fill: var(--primary-color);
-        }
-      }
-    }
-  }
-  .tooltip {
-    background-color: transparent;
-    color: var(--main-text-color);
-  }
 }
 
 .radioItem {
@@ -67,5 +49,13 @@
   button {
     @include icon-hover-button;
     visibility: hidden;
+
+    & > svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  .switch {
+    margin-right: 32px;
   }
 }