feat(crypto wallets setting): improve UI

src/components/settings-modal/account-settings/account-settings.module.css

@@ -36,8 +36,8 @@
 
 .deleteAccount {
   color: red;
-  float: right;
+  display: block;
-  margin-right: 10px;
+  margin-top: 10px;
 }
 
 .setting .createAccount {

src/components/settings-modal/account-settings/account-settings.tsx

@@ -168,7 +168,7 @@ const AccountSettings = () => {
         <button onClick={saveAccount}>{t('save')}</button> <button onClick={() => setText(accountJson)}>{t('reset')}</button>{' '}
         <button onClick={_importAccount}>{t('import')}</button> <button onClick={_exportAccount}>{t('export')}</button>{' '}
         <button className={styles.deleteAccount} onClick={() => _deleteAccount(account?.name)}>
-          delete account
+          {t('delete_account')}
         </button>
       </div>
     </div>

src/components/settings-modal/crypto-address-setting/crypto-address-setting.tsx

@@ -11,7 +11,7 @@ const CryptoAddressSetting = () => {
     cryptoAddress: '',
     checkingCryptoAddress: false,
     showResolvingMessage: false,
-    resolveString: t('crypto_address_verification'),
+    resolveString: '',
     resolveClass: '',
   });
 

src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.module.css

@@ -1,5 +1,6 @@
 .setting {
   margin-left: 10px;
+  margin-bottom: 10px;
 }
 
 .addWallet select {
@@ -7,10 +8,6 @@
   margin-bottom: 5px;
 }
 
-.save {
-  margin-left: 5px;
-}
-
 .walletTitle {
   text-transform: lowercase;
   font-style: italic;
@@ -18,13 +15,16 @@
 
 .removeWallet {
   color: red;
-  margin-top: 15px;
 }
 
-.walletFieldTitle {
+.save {
+  margin-top: 10px;
+  margin-right: 5px;
+}
+
+.walletField {
   margin-top: 5px;
-  font-style: italic;
+  margin-left: 5px;
-  text-transform: lowercase;
 }
 
 .walletField input {

src/components/settings-modal/crypto-wallets-setting/crypto-wallets-setting.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 import { Account, setAccount, useAccount } from '@plebbit/plebbit-react-hooks';
 import styles from './crypto-wallets-setting.module.css';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
+import _ from 'lodash';
 
 interface Wallet {
   chainTicker: string;
@@ -103,7 +104,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
     walletsArray.length > 0 ? (
       <div key={selectedWallet} className={styles.walletBox}>
         <div className={styles.walletField}>
-          <div className={styles.walletFieldTitle}>{t('chain_ticker')}</div>
+          <span className={styles.walletFieldTitle}>{_.capitalize(t('chain_ticker'))}: </span>
           <input
             type='text'
             onChange={(e) => setWalletsArrayProperty(selectedWallet, 'chainTicker', e.target.value)}
@@ -112,7 +113,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
           />
         </div>
         <div className={styles.walletField}>
-          <div className={styles.walletFieldTitle}>{t('wallet_address')}</div>
+          <span className={styles.walletFieldTitle}>{_.capitalize(t('wallet_address'))}: </span>
           <input
             type='text'
             onChange={(e) => setWalletsArrayProperty(selectedWallet, 'address', e.target.value)}
@@ -120,19 +121,18 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
             placeholder='0x...'
           />
         </div>
-        <div className={`${styles.walletField} ${styles.copyMessage}`}>
+        <div className={styles.walletField}>
-          <Trans
+          <span className={styles.walletFieldTitle}>
-            i18nKey='copy_message_etherscan'
+            Copy message to sign on{' '}
-            values={{ copy: hasCopied ? t('copied') : t('copy') }}
+            <a href='https://etherscan.io/verifiedSignatures' target='_blank' rel='noopener noreferrer'>
-            components={{
+              etherscan
-              1: <button onClick={() => copyMessageToSign(walletsArray[selectedWallet], selectedWallet)} />,
+            </a>
-              // eslint-disable-next-line
+            :{' '}
-              2: <a href='https://etherscan.io/verifiedSignatures' target='_blank' rel='noopener noreferrer' />,
+          </span>
-            }}
+          <button onClick={() => copyMessageToSign(walletsArray[selectedWallet], selectedWallet)}>{hasCopied ? t('copied') : t('copy')}</button>
-          />
         </div>
         <div className={styles.walletField}>
-          <div className={styles.walletFieldTitle}>{t('paste_signature')}</div>
+          <span className={styles.walletFieldTitle}>{_.capitalize(t('paste_signature'))}: </span>
           <input
             type='text'
             onChange={(e) => setWalletsArrayProperty(selectedWallet, 'signature', e.target.value)}
@@ -142,10 +142,10 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
           <button className={styles.save} onClick={save}>
             {t('save')}
           </button>
+          <button className={styles.removeWallet} onClick={() => _removeWallet(selectedWallet)}>
+            {t('remove')}
+          </button>
         </div>
-        <button className={styles.removeWallet} onClick={() => _removeWallet(selectedWallet)}>
-          {t('remove')}
-        </button>
       </div>
     ) : null;