feat(settings): add crypto wallets

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

@@ -10,9 +10,6 @@
 .cryptoAddressInput input[type="text"] {
   padding: 2px 0;
   margin-bottom: 5px;
-  outline: none;
-  border: 1px solid #aaa;
-  padding: 2px 4px 3px;
 }
 
 .infoButton {

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

@@ -1,5 +1,10 @@
-.addWallet {
+.setting {
-  margin-bottom: 7px;
+  margin-left: 10px;
+}
+
+.addWallet select {
+  margin-right: 5px;
+  margin-bottom: 5px;
 }
 
 .save {
@@ -9,20 +14,15 @@
 .walletTitle {
   text-transform: lowercase;
   font-style: italic;
-  margin-left: 7px;
 }
 
-.walletBox {
+.removeWallet {
-  border: 1px solid var(--border-contrast);
+  color: red;
-  border-radius: 7px;
+  margin-top: 15px;
-  margin-bottom: 0.5em;
-  padding: 7px;
-  position: relative;
-  display: inline-block;
 }
 
 .walletFieldTitle {
-  margin-top: 10px;
+  margin-top: 5px;
   font-style: italic;
   text-transform: lowercase;
 }

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

@@ -40,6 +40,7 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
   const defaultWalletsArray: Wallet[] = walletsFromAccount.length ? walletsFromAccount : [];
 
   const [walletsArray, setWalletsArray] = useState<Wallet[]>(defaultWalletsArray);
+  const [selectedWallet, setSelectedWallet] = useState(0);
   const setWalletsArrayProperty = (index: number, property: keyof Wallet, value: string | number) => {
     const newArray = [...walletsArray];
     newArray[index] = { ...newArray[index], [property]: value };
@@ -67,13 +68,6 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
     }, 2000);
   };
 
-  const [showWallet, setShowWallet] = useState<boolean[]>(walletsArray.map(() => false));
-  const toggleShowWallet = (index: number) => {
-    const newShowWallet = [...showWallet];
-    newShowWallet[index] = !newShowWallet[index];
-    setShowWallet(newShowWallet);
-  };
-
   const save = () => {
     const wallets: { [key: string]: { address: string; timestamp: number; signature: { signature: string; type: string } } } = {};
     walletsArray.forEach((wallet) => {
@@ -92,31 +86,46 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
     alert(t('saved'));
   };
 
-  const walletsInputs = walletsArray.map((wallet, index) => (
+  const _removeWallet = (index: number) => {
-    <>
+    const wallet = walletsArray[index];
-      <div className={styles.walletTitle}>
+    if (window.confirm(t('delete_confirm', { value: wallet.chainTicker, interpolation: { escapeValue: false } }))) {
-        {t('wallet')} #{index + 1}
+      if (window.confirm(t('double_confirm'))) {
-      </div>
+        const newArray = [...walletsArray.slice(0, index), ...walletsArray.slice(index + 1)];
-      <div key={index} className={styles.walletBox}>
+        setWalletsArray(newArray);
-        <button className={styles.toggleWallet} onClick={() => toggleShowWallet(index)}>
+        setSelectedWallet(0);
-          {showWallet[index] ? t('hide') : t('show')}
+      }
-        </button>
+    } else {
-        <button onClick={() => setWalletsArray([...walletsArray.slice(0, index), ...walletsArray.slice(index + 1)])}>{t('remove')}</button>
+      return;
-        <div className={`${showWallet[index] ? styles.show : styles.hide}`}>
+    }
+  };
+
+  const walletsInputs =
+    walletsArray.length > 0 ? (
+      <div key={selectedWallet} className={styles.walletBox}>
         <div className={styles.walletField}>
           <div className={styles.walletFieldTitle}>{t('chain_ticker')}</div>
-            <input onChange={(e) => setWalletsArrayProperty(index, 'chainTicker', e.target.value)} value={wallet.chainTicker} placeholder='eth/sol/avax' />
+          <input
+            type='text'
+            onChange={(e) => setWalletsArrayProperty(selectedWallet, 'chainTicker', e.target.value)}
+            value={walletsArray[selectedWallet].chainTicker}
+            placeholder='eth/sol/avax'
+          />
         </div>
         <div className={styles.walletField}>
           <div className={styles.walletFieldTitle}>{t('wallet_address')}</div>
-            <input onChange={(e) => setWalletsArrayProperty(index, 'address', e.target.value)} value={wallet.address} placeholder='0x...' />
+          <input
+            type='text'
+            onChange={(e) => setWalletsArrayProperty(selectedWallet, 'address', e.target.value)}
+            value={walletsArray[selectedWallet].address}
+            placeholder='0x...'
+          />
         </div>
         <div className={`${styles.walletField} ${styles.copyMessage}`}>
           <Trans
             i18nKey='copy_message_etherscan'
             values={{ copy: hasCopied ? t('copied') : t('copy') }}
             components={{
-                1: <button onClick={() => copyMessageToSign(wallet, index)} />,
+              1: <button onClick={() => copyMessageToSign(walletsArray[selectedWallet], selectedWallet)} />,
               // eslint-disable-next-line
               2: <a href='https://etherscan.io/verifiedSignatures' target='_blank' rel='noopener noreferrer' />,
             }}
@@ -124,20 +133,42 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
         </div>
         <div className={styles.walletField}>
           <div className={styles.walletFieldTitle}>{t('paste_signature')}</div>
-            <input onChange={(e) => setWalletsArrayProperty(index, 'signature', e.target.value)} value={wallet.signature} placeholder='0x...' />
+          <input
+            type='text'
+            onChange={(e) => setWalletsArrayProperty(selectedWallet, 'signature', e.target.value)}
+            value={walletsArray[selectedWallet].signature}
+            placeholder='0x...'
+          />
           <button className={styles.save} onClick={save}>
             {t('save')}
           </button>
         </div>
+        <button className={styles.removeWallet} onClick={() => _removeWallet(selectedWallet)}>
+          {t('remove')}
+        </button>
       </div>
-      </div>
+    ) : null;
-    </>
-  ));
 
   return (
     <>
       <div className={styles.addWallet}>
-        <Trans i18nKey='add_wallet' components={{ 1: <button onClick={() => setWalletsArray([...walletsArray, defaultWalletObject])} /> }} />
+        <select onChange={(e) => setSelectedWallet(Number(e.target.value))} value={selectedWallet}>
+          {walletsArray.length === 0 && <option>{t('none')}</option>}
+          {walletsArray.map((_, index) => (
+            <option key={index} value={index}>
+              {t('wallet')} #{index + 1}
+            </option>
+          ))}
+        </select>
+        <button
+          onClick={() => {
+            const newIndex = walletsArray.length;
+            setWalletsArray([...walletsArray, defaultWalletObject]);
+            setSelectedWallet(newIndex);
+          }}
+        >
+          +
+        </button>
       </div>
       {walletsInputs}
     </>
@@ -146,7 +177,13 @@ const CryptoWalletsForm = ({ account }: { account: Account | undefined }) => {
 
 const CryptoWalletsSetting = () => {
   const account = useAccount();
-  return account && <CryptoWalletsForm account={account} />;
+  return (
+    account && (
+      <div className={styles.setting}>
+        <CryptoWalletsForm account={account} />
+      </div>
+    )
+  );
 };
 
 export default CryptoWalletsSetting;

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

@@ -12,6 +12,16 @@
   cursor: pointer;
 }
 
+.settingsModal button {
+  text-transform: capitalize;
+}
+
+.settingsModal input[type='text'] {
+  outline: none;
+  border: 1px solid #aaa;
+  padding: 2px 4px 3px;
+}
+
 .settingsModal {
   top: 25px;
   width: 394px;

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

@@ -156,28 +156,28 @@ const SettingsModal = () => {
         <div className={`${styles.setting} ${styles.category}`}>
           <label onClick={() => setShowAccountSettings(!showAccountSettings)}>
             <span className={showAccountSettings ? styles.hideButton : styles.showButton} />
-            Account
+            {t('account')}
           </label>
         </div>
         {showAccountSettings && <AccountSettings />}
         <div className={`${styles.setting} ${styles.category}`}>
           <label onClick={() => setShowCryptoAddressSetting(!showCryptoAddressSetting)}>
             <span className={showCryptoAddressSetting ? styles.hideButton : styles.showButton} />
-            Crypto Address
+            {t('crypto_address')}
           </label>
         </div>
         {showCryptoAddressSetting && <CryptoAddressSetting />}
         <div className={`${styles.setting} ${styles.category}`}>
           <label onClick={() => setShowCryptoWalletSettings(!showCryptoWalletSettings)}>
             <span className={showCryptoWalletSettings ? styles.hideButton : styles.showButton} />
-            Crypto Wallets
+            {t('crypto_wallets')}
           </label>
         </div>
         {showCryptoWalletSettings && <CryptoWalletsSetting />}
         <div className={`${styles.setting} ${styles.category}`}>
           <label onClick={() => setShowPlebbitOptionsSettings(!showPlebbitOptionsSettings)}>
             <span className={showPlebbitOptionsSettings ? styles.hideButton : styles.showButton} />
-            Plebbit Options
+            {t('plebbit_options')}
           </label>
         </div>
         {showPlebbitOptionsSettings && <PlebbitOptionsSettings />}