feat(settings): add avatar setting

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

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import styles from './settings-modal.module.css';
 import AccountSettings from './account-settings';
+import AvatarSettings from './avatar-settings';
 import BlockedAddressesSetting from './blocked-addresses-setting';
 import CryptoAddressSetting from './crypto-address-setting';
 import CryptoWalletsSetting from './crypto-wallets-setting';
@@ -19,6 +20,7 @@ const SettingsModal = () => {
 
   const [showInterfaceSettings, setShowInterfaceSettings] = useState(false);
   const [showAccountSettings, setShowAccountSettings] = useState(false);
+  const [showAvatarSettings, setShowAvatarSettings] = useState(false);
   const [showCryptoAddressSetting, setShowCryptoAddressSetting] = useState(false);
   const [showCryptoWalletSettings, setShowCryptoWalletSettings] = useState(false);
   const [showBlockedAddressesSetting, setShowBlockedAddressesSetting] = useState(false);
@@ -30,6 +32,7 @@ const SettingsModal = () => {
     setExpandAll(newExpandState);
     setShowInterfaceSettings(newExpandState);
     setShowAccountSettings(newExpandState);
+    setShowAvatarSettings(newExpandState);
     setShowCryptoAddressSetting(newExpandState);
     setShowCryptoWalletSettings(newExpandState);
     setShowBlockedAddressesSetting(newExpandState);
@@ -61,6 +64,13 @@ const SettingsModal = () => {
           </label>
         </div>
         {showAccountSettings && <AccountSettings />}
+        <div className={`${styles.setting} ${styles.category}`}>
+          <label onClick={() => setShowAvatarSettings(!showAvatarSettings)}>
+            <span className={showAvatarSettings ? styles.hideButton : styles.showButton} />
+            {t('avatar')}
+          </label>
+        </div>
+        {showAvatarSettings && <AvatarSettings />}
         <div className={`${styles.setting} ${styles.category}`}>
           <label onClick={() => setShowCryptoAddressSetting(!showCryptoAddressSetting)}>
             <span className={showCryptoAddressSetting ? styles.hideButton : styles.showButton} />