fix: Click current network button to switch type. (#2926)

* fix: Click current network button to switch type. * fix: Better experience for switching network type
nervosnetwork · Nov 14, 2023 · b41c91e · b41c91e · github-actions · Nov 14, 2023
1 parent bc833eb
commit b41c91e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 24 deletions.
diff --git a/packages/neuron-ui/src/components/NetworkSetting/index.tsx b/packages/neuron-ui/src/components/NetworkSetting/index.tsx
@@ -99,35 +99,32 @@ 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={
-                    <button type="button" onClick={onSwitchNetworkType} className={styles.switchBtn}>
+                    <div>
                       {t('settings.network.switch-network-type', {
                         type: network.chain === LIGHT_CLIENT_MAINNET ? 'testnet' : 'mainnet',
                       })}
-                    </button>
+                    </div>
                   }
                   placement="top"
                   showTriangle
+                  className={styles.switch}
                 >
-                  <div className={styles.tag}>
-                    {t(getNetworkLabelI18nkey(network.chain))}
+                  <button type="button" onClick={onSwitchNetworkType}>
                     <Switch />
-                  </div>
+                  </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
@@ -32,12 +32,6 @@
       margin-left: 4px;
     }
   }
-  .switchBtn {
-    border: none;
-    background-color: transparent;
-    cursor: pointer;
-    color: var(--main-text-color);
-  }
 }
 
 .radioItem {
@@ -55,5 +49,13 @@
   button {
     @include icon-hover-button;
     visibility: hidden;
+
+    & > svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+  .switch {
+    margin-right: 32px;
   }
 }