From 68ab9bc25c63027b362152341a23858e55f82e39 Mon Sep 17 00:00:00 2001
From: Danyl Mishyn <35381314+lendihop@users.noreply.github.com>
Date: Wed, 6 Nov 2024 10:12:41 +0100
Subject: [PATCH 1/3] TW-1549: Sync settings section (#1217)

* sync

* transition some basic forms to v7

* refactor

* fix imports

* some after-merge fixes

* rm redundant prop

* rm global settings content padding
---
 public/_locales/en/messages.json              |  17 +-
 src/app/atoms/CaptionAlert.tsx                |   8 +-
 src/app/atoms/action-modal/action-modal.tsx   |   7 +-
 .../hooks/use-temple-backend-action-form.ts   |  22 +--
 src/app/layouts/PageLayout/index.tsx          |   8 +-
 ...onfirm-reveal-private-key-access-modal.tsx |  32 ++--
 .../edit-account-name-modal.tsx               |  36 ++--
 .../AccountSettings/remove-account-modal.tsx  |  28 ++-
 src/app/pages/Settings/Settings.tsx           |  25 ++-
 .../pages/Settings/reset-extension-modal.tsx  |  34 ++--
 .../confirm-seed-phrase-access-modal.tsx      |  40 ++--
 .../delete-wallet-modal.tsx                   |  32 ++--
 .../rename-wallet-modal.tsx                   |  39 ++--
 .../templates/Synchronization/QrCodeModal.tsx |  26 +++
 .../Synchronization/SyncSettings.selectors.ts |   2 +-
 .../Synchronization/SyncSettings.tsx          | 171 ++++++++----------
 .../Synchronization/SyncUnavailableModal.tsx  |  31 ++++
 src/lib/temple/back/actions.ts                |   4 +-
 src/lib/temple/back/main.ts                   |   2 +-
 src/lib/temple/back/vault/index.ts            |  44 +++--
 src/lib/temple/front/client.ts                |   5 +-
 src/lib/temple/types.ts                       |   1 +
 22 files changed, 373 insertions(+), 241 deletions(-)
 create mode 100644 src/app/templates/Synchronization/QrCodeModal.tsx
 create mode 100644 src/app/templates/Synchronization/SyncUnavailableModal.tsx

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index da7ebf2968..442987623b 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -189,7 +189,7 @@
     }
   },
   "okGotIt": {
-    "message": "Got it"
+    "message": "Got It"
   },
   "changelogTitle": {
     "message": "Temple Wallet updated"
@@ -3331,19 +3331,22 @@
     "message": "Temple Sync"
   },
   "syncSettingsTitle": {
-    "message": "Sync with Mobile Temple Wallet"
+    "message": "Sync with Temple Wallet app"
   },
   "syncSettingsDescription": {
-    "message": "You can sync your Seed Phrase and accounts (HD) with your mobile device. If you just open the Temple Mobile app for the first time, click 'Sync' button and follow the steps in your phone."
+    "message": "Easily sync your Seed Phrase from current wallet with the mobile app. Just select Sync method for import during the initial setup of the Temple app, and follow the steps to complete."
   },
-  "syncPasswordDescription": {
-    "message": "Use your current wallet password to start the synchronization."
+  "syncSettingsPassword": {
+    "message": "Enter the password to reveal QR-code"
   },
   "syncSettingsAlert": {
-    "message": "Make sure nobody else is looking at your screen when you scan this code."
+    "message": "Make sure nobody else is looking at your screen when you scan this QR-code."
   },
   "scanQRWithTempleMobile": {
-    "message": "Scan this QR-code with yor Temple Wallet Mobile app."
+    "message": "Scan this QR-code with your Temple Wallet\nmobile app to sync."
+  },
+  "syncUnavailable": {
+    "message": "This feature allows you to sync Temple extension with mobile app. You can only sync your Seed Phrase from wallet that supports Tezos network. Switch your current account to proceed synchronization."
   },
   "serviceIsUnavailable": {
     "message": "Sorry, service is temporarily unavailable. Try again later!"
diff --git a/src/app/atoms/CaptionAlert.tsx b/src/app/atoms/CaptionAlert.tsx
index 4411602114..a6e0eca4e2 100644
--- a/src/app/atoms/CaptionAlert.tsx
+++ b/src/app/atoms/CaptionAlert.tsx
@@ -12,6 +12,7 @@ type CaptionAlertType = 'success' | 'error' | 'info' | 'warning';
 interface Props {
   type: CaptionAlertType;
   message: string;
+  title?: string;
   className?: string;
   textClassName?: string;
 }
@@ -24,7 +25,7 @@ const TYPE_CLASSES: Record<CaptionAlertType, string> = {
 };
 
 /** Refer to `./Alert` for existing functionality */
-export const CaptionAlert = memo<Props>(({ type, message, className, textClassName }) => {
+export const CaptionAlert = memo<Props>(({ type, message, title, className, textClassName }) => {
   const Icon = (() => {
     switch (type) {
       case 'success':
@@ -42,7 +43,10 @@ export const CaptionAlert = memo<Props>(({ type, message, className, textClassNa
     <div className={clsx('flex items-start p-3 gap-x-1 rounded-md', TYPE_CLASSES[type], className)}>
       <Icon className="shrink-0 w-6 h-6" />
 
-      <p className={clsx('flex-1 text-font-description', textClassName)}>{message}</p>
+      <div className="flex-1">
+        {title && <p className="text-font-description-bold">{title}</p>}
+        <p className={clsx('text-font-description', textClassName)}>{message}</p>
+      </div>
     </div>
   );
 });
diff --git a/src/app/atoms/action-modal/action-modal.tsx b/src/app/atoms/action-modal/action-modal.tsx
index ea0f430e90..eecb0a4f64 100644
--- a/src/app/atoms/action-modal/action-modal.tsx
+++ b/src/app/atoms/action-modal/action-modal.tsx
@@ -20,17 +20,18 @@ export interface ActionModalProps {
   children?: ReactNode | ReactNode[];
   title?: ReactNode;
   headerClassName?: string;
+  contentClassName?: string;
   className?: string;
 }
 
 export const ActionModal = memo<ActionModalProps>(
-  ({ onClose, children, hasCloseButton = true, headerClassName, title }) => {
+  ({ onClose, children, hasCloseButton = true, title, headerClassName, contentClassName, className }) => {
     const { fullPage } = useAppEnv();
 
     return (
       <CustomModal
         isOpen
-        className="rounded-lg"
+        className={clsx('rounded-lg', className)}
         overlayClassName={clsx(
           'backdrop-blur-xs',
           fullPage && [
@@ -42,7 +43,7 @@ export const ActionModal = memo<ActionModalProps>(
         )}
         onRequestClose={onClose}
       >
-        <div className="relative p-3 border-b-0.5 border-lines w-modal">
+        <div className={clsx('relative p-3 border-b-0.5 border-lines w-modal', contentClassName)}>
           <h1 className={clsx('text-center text-font-regular-bold mx-12', headerClassName)}>{title}</h1>
           {hasCloseButton && (
             <Button className="absolute top-3 right-3" onClick={onClose}>
diff --git a/src/app/hooks/use-temple-backend-action-form.ts b/src/app/hooks/use-temple-backend-action-form.ts
index 066491ae0a..711a65a35e 100644
--- a/src/app/hooks/use-temple-backend-action-form.ts
+++ b/src/app/hooks/use-temple-backend-action-form.ts
@@ -1,31 +1,31 @@
 import { useCallback } from 'react';
 
-import { FieldName, OnSubmit, UseFormOptions, useForm } from 'react-hook-form';
+import { FieldPath, SubmitHandler, UseFormProps, useForm } from 'react-hook-form-v7';
 
 const SUBMIT_ERROR_TYPE = 'submit-error';
 
 export const useTempleBackendActionForm = <T extends object>(
   action: (formData: T) => Promise<void>,
-  submitErrorField: FieldName<T>,
-  options?: UseFormOptions<T>
+  submitErrorField: FieldPath<T>,
+  options?: UseFormProps<T>
 ) => {
-  const { register, handleSubmit, errors, setError, clearError, formState, ...rest } = useForm<T>(options);
-  const submitting = formState.isSubmitting;
+  const { register, handleSubmit, setError, clearErrors, formState, ...rest } = useForm<T>(options);
+  const { isSubmitting, errors } = formState;
 
-  const onSubmit = useCallback<OnSubmit<T>>(
+  const onSubmit = useCallback<SubmitHandler<T>>(
     async formData => {
-      if (submitting) return;
+      if (isSubmitting) return;
 
-      clearError(submitErrorField);
+      clearErrors(submitErrorField);
       try {
         await action(formData);
       } catch (err: any) {
         console.error(err);
 
-        setError(submitErrorField, SUBMIT_ERROR_TYPE, err.message);
+        setError(submitErrorField, { type: SUBMIT_ERROR_TYPE, message: err.message });
       }
     },
-    [submitting, clearError, submitErrorField, action, setError]
+    [isSubmitting, clearErrors, submitErrorField, action, setError]
   );
 
   return {
@@ -33,7 +33,7 @@ export const useTempleBackendActionForm = <T extends object>(
     handleSubmit,
     errors,
     setError,
-    clearError,
+    clearErrors,
     formState,
     onSubmit,
     ...rest
diff --git a/src/app/layouts/PageLayout/index.tsx b/src/app/layouts/PageLayout/index.tsx
index 6cdfed08db..7e87a43669 100644
--- a/src/app/layouts/PageLayout/index.tsx
+++ b/src/app/layouts/PageLayout/index.tsx
@@ -43,6 +43,8 @@ export interface PageLayoutProps extends DefaultHeaderProps, ScrollEdgesVisibili
   Header?: ComponentType;
   noScroll?: boolean;
   contentPadding?: boolean;
+  contentClassName?: string;
+  paperClassName?: string;
   dimBg?: boolean;
   headerChildren?: ReactNode;
 }
@@ -52,6 +54,8 @@ const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({
   children,
   noScroll = false,
   contentPadding = true,
+  contentClassName,
+  paperClassName,
   dimBg = true,
   headerChildren,
   onBottomEdgeVisibilityChange,
@@ -76,6 +80,7 @@ const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({
 
       <div id={APP_CONTENT_WRAP_DOM_ID} className={clsx(fullPage && FULL_PAGE_WRAP_CLASSNAME)}>
         <ContentPaper
+          className={paperClassName}
           onBottomEdgeVisibilityChange={onBottomEdgeVisibilityChange}
           bottomEdgeThreshold={bottomEdgeThreshold}
           onTopEdgeVisibilityChange={onTopEdgeVisibilityChange}
@@ -88,7 +93,8 @@ const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({
               'flex-grow flex flex-col',
               noScroll && 'overflow-hidden',
               contentPadding && 'p-4 pb-15',
-              dimBg && 'bg-background'
+              dimBg && 'bg-background',
+              contentClassName
             )}
           >
             <SuspenseContainer errorMessage="displaying this page">{children}</SuspenseContainer>
diff --git a/src/app/pages/AccountSettings/confirm-reveal-private-key-access-modal.tsx b/src/app/pages/AccountSettings/confirm-reveal-private-key-access-modal.tsx
index 4099a7c5a6..bd978e0b7c 100644
--- a/src/app/pages/AccountSettings/confirm-reveal-private-key-access-modal.tsx
+++ b/src/app/pages/AccountSettings/confirm-reveal-private-key-access-modal.tsx
@@ -1,5 +1,7 @@
 import React, { memo, useCallback } from 'react';
 
+import { Controller } from 'react-hook-form-v7';
+
 import { FormField } from 'app/atoms';
 import {
   ActionModal,
@@ -54,7 +56,7 @@ export const ConfirmRevealPrivateKeyAccessModal = memo<ConfirmRevealPrivateKeyAc
       [account, onReveal, revealPrivateKey]
     );
 
-    const { register, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm<FormData>(
+    const { control, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm<FormData>(
       revealSecretKeys,
       'password'
     );
@@ -64,18 +66,24 @@ export const ConfirmRevealPrivateKeyAccessModal = memo<ConfirmRevealPrivateKeyAc
       <ActionModal title={t('confirmAccess')} onClose={onClose}>
         <form onSubmit={handleSubmit(onSubmit)}>
           <ActionModalBodyContainer>
-            <FormField
-              ref={register({ required: t('required') })}
-              label={t('enterPasswordToRevealPrivateKey')}
-              labelContainerClassName="text-grey-2"
-              id="revealprivatekey-secret-password"
-              type="password"
+            <Controller
               name="password"
-              placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
-              errorCaption={errors.password?.message}
-              reserveSpaceForError={false}
-              containerClassName="mb-1"
-              testID={AccountSettingsSelectors.passwordInput}
+              control={control}
+              rules={{ required: t('required') }}
+              render={({ field }) => (
+                <FormField
+                  {...field}
+                  label={t('enterPasswordToRevealPrivateKey')}
+                  labelContainerClassName="text-grey-2"
+                  id="revealprivatekey-secret-password"
+                  type="password"
+                  placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
+                  errorCaption={errors.password?.message}
+                  reserveSpaceForError={false}
+                  containerClassName="mb-1"
+                  testID={AccountSettingsSelectors.passwordInput}
+                />
+              )}
             />
           </ActionModalBodyContainer>
           <ActionModalButtonsContainer>
diff --git a/src/app/pages/AccountSettings/edit-account-name-modal.tsx b/src/app/pages/AccountSettings/edit-account-name-modal.tsx
index 83dbbd55d6..8ca004617b 100644
--- a/src/app/pages/AccountSettings/edit-account-name-modal.tsx
+++ b/src/app/pages/AccountSettings/edit-account-name-modal.tsx
@@ -1,5 +1,7 @@
 import React, { memo, useCallback, useMemo } from 'react';
 
+import { Controller } from 'react-hook-form-v7';
+
 import { FormField } from 'app/atoms';
 import {
   ActionModal,
@@ -36,7 +38,7 @@ export const EditAccountNameModal = memo<EditAccountNameModalProps>(({ account,
     [account.id, editAccountName, onClose]
   );
 
-  const { register, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm<FormData>(
+  const { control, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm<FormData>(
     renameAccount,
     'name',
     { defaultValues: renameFormInitialValues }
@@ -47,24 +49,30 @@ export const EditAccountNameModal = memo<EditAccountNameModalProps>(({ account,
     <ActionModal title={t('editAccountName')} onClose={onClose}>
       <form onSubmit={handleSubmit(onSubmit)}>
         <ActionModalBodyContainer>
-          <FormField
-            ref={register({
+          <Controller
+            name="name"
+            control={control}
+            rules={{
               required: t('required'),
               pattern: {
                 value: ACCOUNT_OR_GROUP_NAME_PATTERN,
                 message: t('accountOrGroupNameInputTitle')
               }
-            })}
-            label={t('accountNameInputLabel')}
-            labelContainerClassName="text-grey-2"
-            id="rename-account-input"
-            type="text"
-            name="name"
-            placeholder={account.name}
-            errorCaption={errors.name?.message}
-            reserveSpaceForError={false}
-            containerClassName="mb-1"
-            testID={AccountSettingsSelectors.accountNameInput}
+            }}
+            render={({ field }) => (
+              <FormField
+                {...field}
+                label={t('accountNameInputLabel')}
+                labelContainerClassName="text-grey-2"
+                id="rename-account-input"
+                type="text"
+                placeholder={account.name}
+                errorCaption={errors.name?.message}
+                reserveSpaceForError={false}
+                containerClassName="mb-1"
+                testID={AccountSettingsSelectors.accountNameInput}
+              />
+            )}
           />
         </ActionModalBodyContainer>
         <ActionModalButtonsContainer>
diff --git a/src/app/pages/AccountSettings/remove-account-modal.tsx b/src/app/pages/AccountSettings/remove-account-modal.tsx
index 671956daa5..39b8515afb 100644
--- a/src/app/pages/AccountSettings/remove-account-modal.tsx
+++ b/src/app/pages/AccountSettings/remove-account-modal.tsx
@@ -1,5 +1,7 @@
 import React, { memo, useCallback, useMemo } from 'react';
 
+import { Controller } from 'react-hook-form-v7';
+
 import { Alert, FormField } from 'app/atoms';
 import {
   ActionModal,
@@ -42,7 +44,7 @@ export const RemoveAccountModal = memo<RemoveAccountModalProps>(({ account, onCl
     },
     [account.id, onClose, removeAccount]
   );
-  const { register, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm<FormData>(
+  const { control, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm<FormData>(
     deleteAccount,
     'password'
   );
@@ -77,16 +79,22 @@ export const RemoveAccountModal = memo<RemoveAccountModalProps>(({ account, onCl
       ) : (
         <form onSubmit={handleSubmit(onSubmit)}>
           <ActionModalBodyContainer>
-            <FormField
-              ref={register({ required: t('required') })}
-              id="removewallet-secret-password"
-              type="password"
+            <Controller
               name="password"
-              placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
-              errorCaption={errors.password?.message}
-              reserveSpaceForError={false}
-              containerClassName="mb-1"
-              testID={AccountSettingsSelectors.passwordInput}
+              control={control}
+              rules={{ required: t('required') }}
+              render={({ field }) => (
+                <FormField
+                  {...field}
+                  id="removewallet-secret-password"
+                  type="password"
+                  placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
+                  errorCaption={errors.password?.message}
+                  reserveSpaceForError={false}
+                  containerClassName="mb-1"
+                  testID={AccountSettingsSelectors.passwordInput}
+                />
+              )}
             />
             <span className="text-font-description text-grey-1 w-full text-center">
               This will remove the account from this list and delete all data associated with it.
diff --git a/src/app/pages/Settings/Settings.tsx b/src/app/pages/Settings/Settings.tsx
index 9ca94dd233..b497201776 100644
--- a/src/app/pages/Settings/Settings.tsx
+++ b/src/app/pages/Settings/Settings.tsx
@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, memo, useMemo, useState } from 'react';
+import React, { FC, ReactNode, memo, useMemo, useState, useCallback, MouseEventHandler } from 'react';
 
 import { IconBase } from 'app/atoms';
 import { AccountAvatar } from 'app/atoms/AccountAvatar';
@@ -24,7 +24,9 @@ import { NetworksSettings } from 'app/templates/NetworksSettings';
 import { SecuritySettings } from 'app/templates/SecuritySettings';
 import GeneralSettings from 'app/templates/SettingsGeneral';
 import SyncSettings from 'app/templates/Synchronization/SyncSettings';
+import { SyncUnavailableModal } from 'app/templates/Synchronization/SyncUnavailableModal';
 import { TID, T } from 'lib/i18n';
+import { TempleAccountType } from 'lib/temple/types';
 import { useBooleanState } from 'lib/ui/hooks';
 import { SettingsTabProps } from 'lib/ui/settings-tab-props';
 import { Link } from 'lib/woozie';
@@ -51,6 +53,8 @@ interface Tab {
 const DefaultSettingsIconHOC = (Icon: React.FC<React.SVGProps<SVGSVGElement>>) =>
   memo(() => <IconBase size={16} Icon={Icon} className="text-primary" />);
 
+const SYNC_PAGE_SLUG = 'synchronization';
+
 const TABS_GROUPS: Tab[][] = [
   [
     {
@@ -114,10 +118,11 @@ const TABS_GROUPS: Tab[][] = [
       testID: SettingsSelectors.advancedFeaturesButton
     },
     {
-      slug: 'synchronization',
+      slug: SYNC_PAGE_SLUG,
       titleI18nKey: 'templeSync',
       Icon: DefaultSettingsIconHOC(RefreshIcon),
       Component: SyncSettings,
+      noPadding: true,
       testID: SettingsSelectors.synchronizationButton
     }
   ],
@@ -135,20 +140,33 @@ const TABS_GROUPS: Tab[][] = [
 const TABS = TABS_GROUPS.flat();
 
 const Settings = memo<SettingsProps>(({ tabSlug }) => {
+  const { type: currentAccountType } = useAccount();
   const activeTab = useMemo(() => TABS.find(t => t.slug === tabSlug) || null, [tabSlug]);
   const [headerChildren, setHeaderChildren] = useState<ReactNode>(null);
   const [extensionModalOpened, openResetExtensionModal, closeResetExtensionModal] = useBooleanState(false);
+  const [syncUnavailableModalOpened, openSyncUnavailableModal, closeSyncUnavailableModal] = useBooleanState(false);
+
+  const handleSyncCellClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(
+    e => {
+      if (currentAccountType !== TempleAccountType.HD) {
+        e.preventDefault();
+        openSyncUnavailableModal();
+      }
+    },
+    [currentAccountType, openSyncUnavailableModal]
+  );
 
   return (
     <PageLayout
       pageTitle={<T id={activeTab?.titleI18nKey ?? 'settings'} />}
-      dimBg
       headerChildren={headerChildren}
       noScroll={activeTab?.noScroll}
       contentPadding={!activeTab?.noPadding}
     >
       {extensionModalOpened && <ResetExtensionModal onClose={closeResetExtensionModal} />}
 
+      {syncUnavailableModalOpened && <SyncUnavailableModal onClose={closeSyncUnavailableModal} />}
+
       {activeTab ? (
         <activeTab.Component setHeaderChildren={setHeaderChildren} />
       ) : (
@@ -162,6 +180,7 @@ const Settings = memo<SettingsProps>(({ tabSlug }) => {
                   key={slug}
                   cellIcon={<Icon />}
                   cellName={<T id={titleI18nKey} />}
+                  onClick={slug === SYNC_PAGE_SLUG ? handleSyncCellClick : undefined}
                   isLast={j === tabs.length - 1}
                   testID={testID}
                 >
diff --git a/src/app/pages/Settings/reset-extension-modal.tsx b/src/app/pages/Settings/reset-extension-modal.tsx
index 4ba31cae96..fb7c14b780 100644
--- a/src/app/pages/Settings/reset-extension-modal.tsx
+++ b/src/app/pages/Settings/reset-extension-modal.tsx
@@ -1,5 +1,7 @@
 import React, { memo, useCallback } from 'react';
 
+import { Controller } from 'react-hook-form-v7';
+
 import { Alert, FormField } from 'app/atoms';
 import {
   ActionModal,
@@ -27,7 +29,7 @@ export const ResetExtensionModal = memo<ResetExtensionModalProps>(({ onClose })
 
   const handleResetPasswordSubmit = useCallback(({ password }: FormData) => resetExtension(password), [resetExtension]);
 
-  const { register, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm(
+  const { control, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm(
     handleResetPasswordSubmit,
     'password'
   );
@@ -47,19 +49,25 @@ export const ResetExtensionModal = memo<ResetExtensionModalProps>(({ onClose })
             }
           />
 
-          <FormField
-            ref={register({ required: t('required') })}
-            id="reset-extension-password"
-            type="password"
+          <Controller
             name="password"
-            shouldShowRevealWhenEmpty
-            label={<T id="resetPasswordInputLabel" />}
-            labelContainerClassName="text-grey-2"
-            placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
-            errorCaption={errors.password?.message}
-            reserveSpaceForError={false}
-            containerClassName="mb-2"
-            testID={SettingsSelectors.passwordInput}
+            control={control}
+            rules={{ required: t('required') }}
+            render={({ field }) => (
+              <FormField
+                {...field}
+                id="reset-extension-password"
+                type="password"
+                shouldShowRevealWhenEmpty
+                label={<T id="resetPasswordInputLabel" />}
+                labelContainerClassName="text-grey-2"
+                placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
+                errorCaption={errors.password?.message}
+                reserveSpaceForError={false}
+                containerClassName="mb-2"
+                testID={SettingsSelectors.passwordInput}
+              />
+            )}
           />
         </ActionModalBodyContainer>
 
diff --git a/src/app/templates/AccountsManagement/confirm-seed-phrase-access-modal.tsx b/src/app/templates/AccountsManagement/confirm-seed-phrase-access-modal.tsx
index 60cb8bf1f6..324b98611d 100644
--- a/src/app/templates/AccountsManagement/confirm-seed-phrase-access-modal.tsx
+++ b/src/app/templates/AccountsManagement/confirm-seed-phrase-access-modal.tsx
@@ -1,5 +1,7 @@
 import React, { memo, useCallback } from 'react';
 
+import { Controller } from 'react-hook-form-v7';
+
 import { FormField } from 'app/atoms';
 import {
   ActionModal,
@@ -34,7 +36,7 @@ export const ConfirmSeedPhraseAccessModal = memo<ConfirmSeedPhraseAccessModalPro
       [onReveal, revealMnemonic, selectedGroup.id]
     );
 
-    const { register, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm<FormData>(
+    const { control, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm<FormData>(
       revealSeedPhrase,
       'password'
     );
@@ -44,22 +46,28 @@ export const ConfirmSeedPhraseAccessModal = memo<ConfirmSeedPhraseAccessModalPro
       <ActionModal title={t('confirmAccess')} onClose={onClose}>
         <form onSubmit={handleSubmit(onSubmit)}>
           <ActionModalBodyContainer>
-            <FormField
-              ref={register({ required: t('required') })}
-              label={
-                <span className="text-grey-2">
-                  <T id="revealSeedPhrasePasswordLabel" />
-                </span>
-              }
-              id="revealseedphrase-secret-password"
-              type="password"
+            <Controller
               name="password"
-              placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
-              errorCaption={errors.password?.message}
-              shouldShowRevealWhenEmpty
-              reserveSpaceForError={false}
-              containerClassName="mb-1"
-              testID={AccountsManagementSelectors.passwordInput}
+              control={control}
+              rules={{ required: t('required') }}
+              render={({ field }) => (
+                <FormField
+                  {...field}
+                  label={
+                    <span className="text-grey-2">
+                      <T id="revealSeedPhrasePasswordLabel" />
+                    </span>
+                  }
+                  id="revealseedphrase-secret-password"
+                  type="password"
+                  placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
+                  errorCaption={errors.password?.message}
+                  shouldShowRevealWhenEmpty
+                  reserveSpaceForError={false}
+                  containerClassName="mb-1"
+                  testID={AccountsManagementSelectors.passwordInput}
+                />
+              )}
             />
           </ActionModalBodyContainer>
           <ActionModalButtonsContainer>
diff --git a/src/app/templates/AccountsManagement/delete-wallet-modal.tsx b/src/app/templates/AccountsManagement/delete-wallet-modal.tsx
index c5dfa326af..e495f8b137 100644
--- a/src/app/templates/AccountsManagement/delete-wallet-modal.tsx
+++ b/src/app/templates/AccountsManagement/delete-wallet-modal.tsx
@@ -1,5 +1,7 @@
 import React, { memo, useCallback } from 'react';
 
+import { Controller } from 'react-hook-form-v7';
+
 import { Alert, FormField } from 'app/atoms';
 import {
   ActionModal,
@@ -45,7 +47,7 @@ export const DeleteWalletModal = memo<DeleteWalletModalProps>(({ onClose, select
     },
     [onClose, removeAccountsByType, removeHdGroup, selectedGroup]
   );
-  const { register, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm<FormData>(
+  const { control, handleSubmit, errors, formState, onSubmit } = useTempleBackendActionForm<FormData>(
     deleteGroup,
     'password'
   );
@@ -87,18 +89,24 @@ export const DeleteWalletModal = memo<DeleteWalletModalProps>(({ onClose, select
               />
             )}
 
-            <FormField
-              ref={register({ required: t('required') })}
-              label={<T id="deleteWalletPasswordLabel" />}
-              labelContainerClassName="text-grey-2"
-              id="removewallet-secret-password"
-              type="password"
+            <Controller
               name="password"
-              placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
-              errorCaption={errors.password?.message}
-              reserveSpaceForError={false}
-              containerClassName="mb-1"
-              testID={AccountsManagementSelectors.passwordInput}
+              control={control}
+              rules={{ required: t('required') }}
+              render={({ field }) => (
+                <FormField
+                  {...field}
+                  label={<T id="deleteWalletPasswordLabel" />}
+                  labelContainerClassName="text-grey-2"
+                  id="removewallet-secret-password"
+                  type="password"
+                  placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
+                  errorCaption={errors.password?.message}
+                  reserveSpaceForError={false}
+                  containerClassName="mb-1"
+                  testID={AccountsManagementSelectors.passwordInput}
+                />
+              )}
             />
           </ActionModalBodyContainer>
           <ActionModalButtonsContainer>
diff --git a/src/app/templates/AccountsManagement/rename-wallet-modal.tsx b/src/app/templates/AccountsManagement/rename-wallet-modal.tsx
index 7c077593d4..e0f9f0e4f2 100644
--- a/src/app/templates/AccountsManagement/rename-wallet-modal.tsx
+++ b/src/app/templates/AccountsManagement/rename-wallet-modal.tsx
@@ -1,6 +1,7 @@
 import React, { memo, useCallback, useMemo } from 'react';
 
 import { startCase } from 'lodash';
+import { Controller } from 'react-hook-form-v7';
 
 import { FormField } from 'app/atoms';
 import {
@@ -38,7 +39,7 @@ export const RenameWalletModal = memo<RenameWalletModalProps>(({ onClose, select
     [editHdGroupName, onClose, selectedGroup.id]
   );
 
-  const { register, handleSubmit, errors, formState, onSubmit, setValue } = useTempleBackendActionForm<FormData>(
+  const { control, handleSubmit, errors, formState, onSubmit, setValue } = useTempleBackendActionForm<FormData>(
     renameGroup,
     'name',
     { defaultValues: renameFormInitialValues }
@@ -51,26 +52,32 @@ export const RenameWalletModal = memo<RenameWalletModalProps>(({ onClose, select
     <ActionModal title={startCase(t('renameWallet'))} onClose={onClose}>
       <form onSubmit={handleSubmit(onSubmit)}>
         <ActionModalBodyContainer>
-          <FormField
-            ref={register({
+          <Controller
+            name="name"
+            control={control}
+            rules={{
               required: t('required'),
               pattern: {
                 value: ACCOUNT_OR_GROUP_NAME_PATTERN,
                 message: t('accountOrGroupNameInputTitle')
               }
-            })}
-            label={<T id="walletNameInputLabel" />}
-            labelContainerClassName="text-grey-2"
-            id="rename-wallet-input"
-            type="text"
-            name="name"
-            placeholder={selectedGroup.name}
-            errorCaption={errors.name?.message}
-            reserveSpaceForError={false}
-            containerClassName="mb-1.5"
-            cleanable
-            onClean={cleanWalletName}
-            testID={AccountsManagementSelectors.newWalletNameInput}
+            }}
+            render={({ field }) => (
+              <FormField
+                {...field}
+                label={<T id="walletNameInputLabel" />}
+                labelContainerClassName="text-grey-2"
+                id="rename-wallet-input"
+                type="text"
+                placeholder={selectedGroup.name}
+                errorCaption={errors.name?.message}
+                reserveSpaceForError={false}
+                containerClassName="mb-1.5"
+                cleanable
+                onClean={cleanWalletName}
+                testID={AccountsManagementSelectors.newWalletNameInput}
+              />
+            )}
           />
         </ActionModalBodyContainer>
         <ActionModalButtonsContainer>
diff --git a/src/app/templates/Synchronization/QrCodeModal.tsx b/src/app/templates/Synchronization/QrCodeModal.tsx
new file mode 100644
index 0000000000..19615ac4bd
--- /dev/null
+++ b/src/app/templates/Synchronization/QrCodeModal.tsx
@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+
+import { CaptionAlert, QRCode } from 'app/atoms';
+import { ActionModal, ActionModalBodyContainer } from 'app/atoms/action-modal';
+import { T, t } from 'lib/i18n';
+
+interface Props {
+  payload: string;
+  onClose: EmptyFn;
+}
+
+export const QrCodeModal: FC<Props> = ({ payload, onClose }) => (
+  <ActionModal title={t('sync')} hasCloseButton onClose={onClose} className="w-82" contentClassName="!w-full">
+    <ActionModalBodyContainer className="items-center pt-4 pb-4">
+      <CaptionAlert type="warning" message={t('syncSettingsAlert')} />
+
+      <div className="mt-2 mb-5 rounded-lg shadow-center overflow-hidden p-4">
+        <QRCode size={188} data={payload} />
+      </div>
+
+      <p className="text-center text-grey-1 text-font-description">
+        <T id="scanQRWithTempleMobile" />
+      </p>
+    </ActionModalBodyContainer>
+  </ActionModal>
+);
diff --git a/src/app/templates/Synchronization/SyncSettings.selectors.ts b/src/app/templates/Synchronization/SyncSettings.selectors.ts
index ef8bc8b5c6..d03c52b916 100644
--- a/src/app/templates/Synchronization/SyncSettings.selectors.ts
+++ b/src/app/templates/Synchronization/SyncSettings.selectors.ts
@@ -1,5 +1,5 @@
 export enum SyncSettingsSelectors {
   passwordInput = 'Synchronization/Password Input',
   syncButton = 'Synchronization/Sync Button',
-  doneButton = 'Synchronization/Done! Button'
+  gotItButton = 'Synchronization/Got It Button'
 }
diff --git a/src/app/templates/Synchronization/SyncSettings.tsx b/src/app/templates/Synchronization/SyncSettings.tsx
index e1d3ca33fb..4505d33a96 100644
--- a/src/app/templates/Synchronization/SyncSettings.tsx
+++ b/src/app/templates/Synchronization/SyncSettings.tsx
@@ -1,118 +1,105 @@
-import React, { FC, useCallback, useLayoutEffect, useRef } from 'react';
+import React, { FC, useCallback } from 'react';
 
-import { OnSubmit, useForm } from 'react-hook-form';
-import { QRCode } from 'react-qr-svg';
+import { Controller } from 'react-hook-form-v7';
 
-import { Alert, FormField, FormSubmitButton } from 'app/atoms';
+import { CaptionAlert, FormField } from 'app/atoms';
+import { ActionsButtonsBox } from 'app/atoms/PageModal/actions-buttons-box';
+import { StyledButton } from 'app/atoms/StyledButton';
+import { DeadEndBoundaryError } from 'app/ErrorBoundary';
+import { useTempleBackendActionForm } from 'app/hooks/use-temple-backend-action-form';
 import { DEFAULT_PASSWORD_INPUT_PLACEHOLDER } from 'lib/constants';
-import { T, t } from 'lib/i18n';
+import { t } from 'lib/i18n';
 import { useTempleClient } from 'lib/temple/front';
+import { TempleAccountType } from 'lib/temple/types';
 import { useVanishingState } from 'lib/ui/hooks';
-import { delay } from 'lib/utils';
+import { useAccount } from 'temple/front';
 
+import { QrCodeModal } from './QrCodeModal';
 import { SyncSettingsSelectors } from './SyncSettings.selectors';
 
 interface FormData {
   password: string;
 }
 
+const defaultFormValues: FormData = {
+  password: ''
+};
+
 const SyncSettings: FC = () => {
+  const account = useAccount();
+
+  if (account.type !== TempleAccountType.HD) throw new DeadEndBoundaryError();
+
   const { generateSyncPayload } = useTempleClient();
 
-  const formRef = useRef<HTMLFormElement>(null);
   const [payload, setPayload] = useVanishingState();
-  const { register, handleSubmit, errors, setError, clearError, formState } = useForm<FormData>();
 
-  const focusPasswordField = useCallback(
-    () => formRef.current?.querySelector<HTMLInputElement>("input[name='password']")?.focus(),
-    []
+  const setQrCodePayload = useCallback(
+    async ({ password }: FormData) => {
+      const syncPayload = await generateSyncPayload(password, account.walletId);
+      setPayload(syncPayload);
+    },
+    [account.walletId, generateSyncPayload, setPayload]
   );
 
-  useLayoutEffect(() => focusPasswordField(), [focusPasswordField]);
-
-  const onSubmit = useCallback<OnSubmit<FormData>>(
-    async ({ password }) => {
-      if (formState.isSubmitting) return;
-
-      clearError('password');
-      try {
-        const syncPayload = await generateSyncPayload(password);
-        setPayload(syncPayload);
-      } catch (err: any) {
-        if (process.env.NODE_ENV === 'development') {
-          console.error(err);
-        }
-
-        // Human delay.
-        await delay();
-        setError('password', 'submit-error', err.message);
-        focusPasswordField();
-      }
-    },
-    [formState.isSubmitting, clearError, setError, generateSyncPayload, setPayload, focusPasswordField]
+  const { control, handleSubmit, formState, onSubmit } = useTempleBackendActionForm<FormData>(
+    setQrCodePayload,
+    'password',
+    {
+      mode: 'onSubmit',
+      defaultValues: defaultFormValues
+    }
   );
 
+  const { errors, isSubmitting, isValid, submitCount } = formState;
+
+  const formSubmitted = submitCount > 0;
+
+  const resetPayload = useCallback(() => void setPayload(null), [setPayload]);
+
   return (
-    <div className="w-full max-w-sm p-2 mx-auto">
-      {payload ? (
-        <>
-          <Alert
-            title={t('attentionExclamation')}
-            description={
-              <p>
-                <T id="syncSettingsAlert" />
-              </p>
-            }
-            className="mt-4 mb-8"
+    <>
+      <div className="flex-1 pt-4 px-4">
+        <CaptionAlert type="info" title={t('syncSettingsTitle')} message={t('syncSettingsDescription')} />
+
+        <form id="sync-form" onSubmit={handleSubmit(onSubmit)}>
+          <Controller
+            name="password"
+            control={control}
+            rules={{ required: t('required') }}
+            render={({ field }) => (
+              <FormField
+                {...field}
+                autoFocus
+                type="password"
+                id="reveal-secret-password"
+                label={t('syncSettingsPassword')}
+                placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
+                errorCaption={errors.password?.message}
+                testID={SyncSettingsSelectors.passwordInput}
+                containerClassName="mt-6"
+              />
+            )}
           />
-
-          <p className="mb-4 text-sm text-gray-600">
-            <T id="scanQRWithTempleMobile" />
-          </p>
-
-          <div className="mb-8 p-1 bg-gray-100 border-2 border-gray-300 rounded">
-            <QRCode value={payload} bgColor="#f7fafc" fgColor="#000000" level="Q" style={{ width: '100%' }} />
-          </div>
-
-          <FormSubmitButton
-            className="w-full justify-center"
-            onClick={() => setPayload(null)}
-            testID={SyncSettingsSelectors.doneButton}
-          >
-            <T id="done" />
-          </FormSubmitButton>
-        </>
-      ) : (
-        <>
-          <h2 className="mb-3 text-base text-gray-700">
-            <T id="syncSettingsTitle" />
-          </h2>
-
-          <p className="mb-6 text-xs text-gray-600">
-            <T id="syncSettingsDescription" />
-          </p>
-
-          <form ref={formRef} onSubmit={handleSubmit(onSubmit)}>
-            <FormField
-              ref={register({ required: t('required') })}
-              label={t('password')}
-              labelDescription={t('syncPasswordDescription')}
-              id="reveal-secret-password"
-              type="password"
-              name="password"
-              placeholder={DEFAULT_PASSWORD_INPUT_PLACEHOLDER}
-              errorCaption={errors.password?.message}
-              containerClassName="mb-4"
-              testID={SyncSettingsSelectors.passwordInput}
-            />
-
-            <FormSubmitButton loading={formState.isSubmitting} testID={SyncSettingsSelectors.syncButton}>
-              <T id="sync" />
-            </FormSubmitButton>
-          </form>
-        </>
-      )}
-    </div>
+        </form>
+      </div>
+
+      <ActionsButtonsBox flexDirection="col" className="px-4" style={{ backgroundColor: '#FBFBFB' }}>
+        <StyledButton
+          type="submit"
+          form="sync-form"
+          size="L"
+          color="primary"
+          loading={isSubmitting}
+          disabled={formSubmitted && !isValid}
+          testID={SyncSettingsSelectors.syncButton}
+        >
+          Sync
+        </StyledButton>
+      </ActionsButtonsBox>
+
+      {payload && <QrCodeModal onClose={resetPayload} payload={payload} />}
+    </>
   );
 };
 
diff --git a/src/app/templates/Synchronization/SyncUnavailableModal.tsx b/src/app/templates/Synchronization/SyncUnavailableModal.tsx
new file mode 100644
index 0000000000..56ec17fe55
--- /dev/null
+++ b/src/app/templates/Synchronization/SyncUnavailableModal.tsx
@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+
+import { ActionModal, ActionModalBodyContainer } from 'app/atoms/action-modal';
+import { StyledButton } from 'app/atoms/StyledButton';
+import { t, T } from 'lib/i18n';
+
+import { SyncSettingsSelectors } from './SyncSettings.selectors';
+
+interface Props {
+  onClose: EmptyFn;
+}
+
+export const SyncUnavailableModal: FC<Props> = ({ onClose }) => (
+  <ActionModal title={t('templeSync')} hasCloseButton onClose={onClose}>
+    <ActionModalBodyContainer className="items-center pt-4 pb-4">
+      <p className="mb-5 text-grey-1 text-font-description text-center">
+        <T id="syncUnavailable" />
+      </p>
+
+      <StyledButton
+        size="L"
+        color="primary"
+        onClick={onClose}
+        testID={SyncSettingsSelectors.gotItButton}
+        className="w-full"
+      >
+        <T id="okGotIt" />
+      </StyledButton>
+    </ActionModalBodyContainer>
+  </ActionModal>
+);
diff --git a/src/lib/temple/back/actions.ts b/src/lib/temple/back/actions.ts
index f1ef336628..3e8b2a9db3 100644
--- a/src/lib/temple/back/actions.ts
+++ b/src/lib/temple/back/actions.ts
@@ -150,8 +150,8 @@ export function revealMnemonic(walletId: string, password: string) {
   return withUnlocked(() => Vault.revealMnemonic(walletId, password));
 }
 
-export function generateSyncPayload(password: string) {
-  return withUnlocked(() => Vault.generateSyncPayload(password));
+export function generateSyncPayload(password: string, walletId: string) {
+  return withUnlocked(() => Vault.generateSyncPayload(password, walletId));
 }
 
 export function revealPrivateKey(address: string, password: string) {
diff --git a/src/lib/temple/back/main.ts b/src/lib/temple/back/main.ts
index 813d7c30a2..0469a9f815 100644
--- a/src/lib/temple/back/main.ts
+++ b/src/lib/temple/back/main.ts
@@ -115,7 +115,7 @@ const processRequest = async (req: TempleRequest, port: Runtime.Port): Promise<T
       };
 
     case TempleMessageType.GenerateSyncPayloadRequest:
-      const payload = await Actions.generateSyncPayload(req.password);
+      const payload = await Actions.generateSyncPayload(req.password, req.walletId);
       return {
         type: TempleMessageType.GenerateSyncPayloadResponse,
         payload
diff --git a/src/lib/temple/back/vault/index.ts b/src/lib/temple/back/vault/index.ts
index 3e832d0aad..80d29c7827 100644
--- a/src/lib/temple/back/vault/index.ts
+++ b/src/lib/temple/back/vault/index.ts
@@ -10,10 +10,10 @@ import { privateKeyToAccount } from 'viem/accounts';
 import type * as WasmThemisPackageInterface from 'wasm-themis';
 
 import {
-  AT_LEAST_ONE_HD_ACCOUNT_ERR_MSG,
+  ACCOUNT_ALREADY_EXISTS_ERR_MSG,
   ACCOUNT_NAME_COLLISION_ERR_MSG,
-  WALLETS_SPECS_STORAGE_KEY,
-  ACCOUNT_ALREADY_EXISTS_ERR_MSG
+  AT_LEAST_ONE_HD_ACCOUNT_ERR_MSG,
+  WALLETS_SPECS_STORAGE_KEY
 } from 'lib/constants';
 import { fetchFromStorage as getPlain, putToStorage as savePlain } from 'lib/storage';
 import {
@@ -40,20 +40,20 @@ import { PublicError } from '../PublicError';
 import { fetchMessage, transformHttpResponseError } from './helpers';
 import { MIGRATIONS } from './migrations';
 import {
-  seedToPrivateKey,
-  deriveSeed,
-  generateCheck,
-  fetchNewAccountName,
+  buildEncryptAndSaveManyForAccount,
+  canRemoveAccounts,
   concatAccount,
   createMemorySigner,
-  withError,
-  mnemonicToTezosAccountCreds,
+  deriveSeed,
+  fetchNewAccountName,
+  generateCheck,
+  isEvmDerivationPath,
   mnemonicToEvmAccountCreds,
-  buildEncryptAndSaveManyForAccount,
-  privateKeyToTezosAccountCreds,
+  mnemonicToTezosAccountCreds,
   privateKeyToEvmAccountCreds,
-  canRemoveAccounts,
-  isEvmDerivationPath
+  privateKeyToTezosAccountCreds,
+  seedToPrivateKey,
+  withError
 } from './misc';
 import {
   encryptAndSaveMany,
@@ -68,14 +68,14 @@ import {
 } from './safe-storage';
 import * as SessionStore from './session-store';
 import {
-  checkStrgKey,
-  migrationLevelStrgKey,
-  walletMnemonicStrgKey,
+  accountsStrgKey,
   accPrivKeyStrgKey,
   accPubKeyStrgKey,
-  accountsStrgKey,
+  checkStrgKey,
+  legacyMigrationLevelStrgKey,
+  migrationLevelStrgKey,
   settingsStrgKey,
-  legacyMigrationLevelStrgKey
+  walletMnemonicStrgKey
 } from './storage-keys';
 
 const TEMPLE_SYNC_PREFIX = 'templesync';
@@ -237,7 +237,7 @@ export class Vault {
     );
   }
 
-  static async generateSyncPayload(password: string) {
+  static async generateSyncPayload(password: string, walletId: string) {
     let WasmThemis: typeof WasmThemisPackageInterface;
     try {
       WasmThemis = await import('wasm-themis');
@@ -248,14 +248,12 @@ export class Vault {
 
     const { passKey } = await Vault.toValidPassKey(password);
     return withError('Failed to generate sync payload', async () => {
-      const walletsSpecs = await getPlain<StringRecord<WalletSpecs>>(WALLETS_SPECS_STORAGE_KEY);
-      const firstWalletId = Object.keys(walletsSpecs ?? {})[0];
       const [mnemonic, allAccounts] = await Promise.all([
-        fetchAndDecryptOne<string>(walletMnemonicStrgKey(firstWalletId), passKey),
+        fetchAndDecryptOne<string>(walletMnemonicStrgKey(walletId), passKey),
         fetchAndDecryptOne<StoredAccount[]>(accountsStrgKey, passKey)
       ]);
 
-      const hdAccounts = getSameGroupAccounts(allAccounts, TempleAccountType.HD, firstWalletId);
+      const hdAccounts = getSameGroupAccounts(allAccounts, TempleAccountType.HD, walletId);
 
       const data = [mnemonic, hdAccounts.length];
 
diff --git a/src/lib/temple/front/client.ts b/src/lib/temple/front/client.ts
index dee77bb5f1..7decc9c0b4 100644
--- a/src/lib/temple/front/client.ts
+++ b/src/lib/temple/front/client.ts
@@ -182,10 +182,11 @@ export const [TempleClientProvider, useTempleClient] = constate(() => {
     return res.mnemonic;
   }, []);
 
-  const generateSyncPayload = useCallback(async (password: string) => {
+  const generateSyncPayload = useCallback(async (password: string, walletId: string) => {
     const res = await request({
       type: TempleMessageType.GenerateSyncPayloadRequest,
-      password
+      password,
+      walletId
     });
     assertResponse(res.type === TempleMessageType.GenerateSyncPayloadResponse);
     return res.payload;
diff --git a/src/lib/temple/types.ts b/src/lib/temple/types.ts
index 99c75812f3..858fea6c6f 100644
--- a/src/lib/temple/types.ts
+++ b/src/lib/temple/types.ts
@@ -488,6 +488,7 @@ interface TempleRevealMnemonicResponse extends TempleMessageBase {
 interface TempleGenerateSyncPayloadRequest extends TempleMessageBase {
   type: TempleMessageType.GenerateSyncPayloadRequest;
   password: string;
+  walletId: string;
 }
 
 interface TempleGenerateSyncPayloadResponse extends TempleMessageBase {

From 5421ed6a9d20d8a0281e8c415e0c141e2adc59ff Mon Sep 17 00:00:00 2001
From: Inokentii Mazhara <keshan3262@gmail.com>
Date: Wed, 6 Nov 2024 12:48:24 +0200
Subject: [PATCH 2/3] TW-1550: Redesign 'About & Support' section (#1216)

* TW-1550 Redesign 'About & Support' section

* TW-1550 Remove an unused component

* TW-1550 Refactoring according to comments
---
 public/_locales/de/messages.json              |  31 +--
 public/_locales/en/messages.json              |  52 +++--
 public/_locales/en_GB/messages.json           |  20 +-
 public/_locales/fr/messages.json              |  21 +--
 public/_locales/ja/messages.json              |  19 +-
 public/_locales/ko/messages.json              |  19 +-
 public/_locales/pt/messages.json              |  33 +---
 public/_locales/tr/messages.json              |  33 +---
 public/_locales/uk/messages.json              |  37 +---
 public/_locales/zh_CN/messages.json           |  19 +-
 public/_locales/zh_TW/messages.json           |  19 +-
 .../atoms/DonationBanner/DonationBanner.tsx   |  23 ---
 src/app/atoms/DonationBanner/selectors.ts     |   3 -
 src/app/atoms/Lines.tsx                       |  31 ++-
 src/app/icons/base/outLink.svg                |   6 +
 src/app/icons/monochrome/discord.svg          |   4 +
 src/app/icons/monochrome/knowledge-base.svg   |  11 ++
 src/app/icons/monochrome/reddit.svg           |   4 +
 src/app/icons/monochrome/telegram.svg         |   4 +
 src/app/icons/monochrome/x-social.svg         |   4 +
 src/app/icons/monochrome/youtube.svg          |   4 +
 src/app/icons/ukraine.svg                     |   1 -
 src/app/pages/Settings/Settings.tsx           |   2 +-
 src/app/templates/About/About.selectors.ts    |   9 +-
 src/app/templates/About/About.tsx             | 177 ++++++++++--------
 src/app/templates/About/links-group-item.tsx  |  35 ++++
 src/app/templates/About/links-group-view.tsx  |  30 +++
 27 files changed, 280 insertions(+), 371 deletions(-)
 delete mode 100644 src/app/atoms/DonationBanner/DonationBanner.tsx
 delete mode 100644 src/app/atoms/DonationBanner/selectors.ts
 create mode 100644 src/app/icons/base/outLink.svg
 create mode 100644 src/app/icons/monochrome/discord.svg
 create mode 100644 src/app/icons/monochrome/knowledge-base.svg
 create mode 100644 src/app/icons/monochrome/reddit.svg
 create mode 100644 src/app/icons/monochrome/telegram.svg
 create mode 100644 src/app/icons/monochrome/x-social.svg
 create mode 100644 src/app/icons/monochrome/youtube.svg
 delete mode 100644 src/app/icons/ukraine.svg
 create mode 100644 src/app/templates/About/links-group-item.tsx
 create mode 100644 src/app/templates/About/links-group-view.tsx

diff --git a/public/_locales/de/messages.json b/public/_locales/de/messages.json
index 967b3ed120..1f1556bb6d 100644
--- a/public/_locales/de/messages.json
+++ b/public/_locales/de/messages.json
@@ -46,24 +46,13 @@
     }
   },
   "branchName": {
-    "message": "branch: $branch$",
+    "message": "Branch: $branch$",
     "placeholders": {
       "branch": {
         "content": "$1"
       }
     }
   },
-  "madeWithLove": {
-    "message": "Erstellt mit $loveIcon$ von $companyName$",
-    "placeholders": {
-      "loveIcon": {
-        "content": "$1"
-      },
-      "companyName": {
-        "content": "$2"
-      }
-    }
-  },
   "feeInputDescription": {
     "message": "Die Grundgebühr für diesen Vorgang beträgt: $fee$\nZusätzlich - beschleunigt die Bestätigung",
     "placeholders": {
@@ -690,18 +679,12 @@
   "website": {
     "message": "Website"
   },
-  "repo": {
-    "message": "Repository"
-  },
   "privacyPolicy": {
     "message": "Datenschutzbestimmungen"
   },
   "termsOfUse": {
     "message": "Nutzungsbedingungen"
   },
-  "contact": {
-    "message": "Kontakt"
-  },
   "minimalFeeDescription": {
     "message": "Minimal"
   },
@@ -1666,18 +1649,6 @@
       }
     }
   },
-  "helpAndCommunity": {
-    "message": "Hilfe & Community"
-  },
-  "communityResourcesTitle": {
-    "message": "Sie können jederzeit zusätzliche Informationen über die Temple Wallet finden oder um Hilfe bei den nächsten Ressourcen bitten."
-  },
-  "helpAndCommunityDescription": {
-    "message": "Verwenden Sie diesen Abschnitt, wenn Sie Teil unserer Community werden möchten oder Hilfe benötigen."
-  },
-  "joinPrompt": {
-    "message": "Treten Sie gerne bei und stellen Sie Ihre Fragen "
-  },
   "blockExplorer": {
     "message": "Blockchain-Explorer"
   },
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index 442987623b..ea0cde3b1b 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -59,7 +59,7 @@
     "message": "Click on the X icon to reset permissions."
   },
   "versionLabel": {
-    "message": "version: $version$",
+    "message": "Version: $version$",
     "placeholders": {
       "version": {
         "content": "$1"
@@ -67,24 +67,13 @@
     }
   },
   "branchName": {
-    "message": "branch: $branch$",
+    "message": "Branch: $branch$",
     "placeholders": {
       "branch": {
         "content": "$1"
       }
     }
   },
-  "madeWithLove": {
-    "message": "Made with $loveIcon$ by $companyName$",
-    "placeholders": {
-      "loveIcon": {
-        "content": "$1"
-      },
-      "companyName": {
-        "content": "$2"
-      }
-    }
-  },
   "feeInputDescription": {
     "message": "Base Fee for this operation is: $fee$\nAdditional - speeds up its confirmation",
     "placeholders": {
@@ -1077,7 +1066,7 @@
     "message": "Website"
   },
   "repo": {
-    "message": "Repository"
+    "message": "GitHub Repository"
   },
   "privacyPolicy": {
     "message": "Privacy Policy"
@@ -1085,8 +1074,26 @@
   "termsOfUse": {
     "message": "Terms of Use"
   },
-  "contact": {
-    "message": "Contact"
+  "knowledgeBase": {
+    "message": "Knowledge Base"
+  },
+  "featureRequest": {
+    "message": "Feature Request"
+  },
+  "xSocial": {
+    "message": "X (Twitter)"
+  },
+  "telegram": {
+    "message": "Telegram"
+  },
+  "discord": {
+    "message": "Discord"
+  },
+  "reddit": {
+    "message": "Reddit"
+  },
+  "youtube": {
+    "message": "Youtube"
   },
   "minimalFeeDescription": {
     "message": "Minimal"
@@ -2427,17 +2434,8 @@
       }
     }
   },
-  "helpAndCommunity": {
-    "message": "Help & Community"
-  },
-  "communityResourcesTitle": {
-    "message": "You may always find additional info about the Temple wallet or ask for help on the next resources."
-  },
-  "helpAndCommunityDescription": {
-    "message": "Use this section if you want to be a part of our community or need help."
-  },
-  "joinPrompt": {
-    "message": "Feel free to join and ask your questions 😊"
+  "community": {
+    "message": "Community"
   },
   "blockExplorer": {
     "message": "Block Explorer"
diff --git a/public/_locales/en_GB/messages.json b/public/_locales/en_GB/messages.json
index 9aa898a111..a89d099474 100644
--- a/public/_locales/en_GB/messages.json
+++ b/public/_locales/en_GB/messages.json
@@ -38,7 +38,7 @@
     "message": "Click on the X icon to reset permissions."
   },
   "versionLabel": {
-    "message": "version: $version$",
+    "message": "Version: $version$",
     "placeholders": {
       "version": {
         "content": "$1"
@@ -46,24 +46,13 @@
     }
   },
   "branchName": {
-    "message": "branch: $branch$",
+    "message": "Branch: $branch$",
     "placeholders": {
       "branch": {
         "content": "$1"
       }
     }
   },
-  "madeWithLove": {
-    "message": "Made with $loveIcon$ by $companyName$",
-    "placeholders": {
-      "loveIcon": {
-        "content": "$1"
-      },
-      "companyName": {
-        "content": "$2"
-      }
-    }
-  },
   "feeInputDescription": {
     "message": "Base Fee for this operation is: $fee$\nAdditional - speeds up its confirmation",
     "placeholders": {
@@ -685,7 +674,7 @@
     "message": "Website"
   },
   "repo": {
-    "message": "Repository"
+    "message": "GitHub Repository"
   },
   "privacyPolicy": {
     "message": "Privacy Policy"
@@ -693,9 +682,6 @@
   "termsOfUse": {
     "message": "Terms of Use"
   },
-  "contact": {
-    "message": "Contact"
-  },
   "minimalFeeDescription": {
     "message": "Minimal"
   },
diff --git a/public/_locales/fr/messages.json b/public/_locales/fr/messages.json
index af5ab7754b..bcc75dd3e4 100644
--- a/public/_locales/fr/messages.json
+++ b/public/_locales/fr/messages.json
@@ -35,7 +35,7 @@
     "message": "Cliquez sur l'icône X pour réinitialiser les permissions."
   },
   "versionLabel": {
-    "message": "version : $version$",
+    "message": "Version : $version$",
     "placeholders": {
       "version": {
         "content": "$1"
@@ -43,24 +43,13 @@
     }
   },
   "branchName": {
-    "message": "branch: $branch$",
+    "message": "Branch: $branch$",
     "placeholders": {
       "branch": {
         "content": "$1"
       }
     }
   },
-  "madeWithLove": {
-    "message": "Créée avec $loveIcon$ par $companyName$",
-    "placeholders": {
-      "loveIcon": {
-        "content": "$1"
-      },
-      "companyName": {
-        "content": "$2"
-      }
-    }
-  },
   "feeInputDescription": {
     "message": "Frais de base pour cette opération : $fee$\nSupplémentaires - accélère sa confirmation",
     "placeholders": {
@@ -647,18 +636,12 @@
   "website": {
     "message": "Site web"
   },
-  "repo": {
-    "message": "Référentiel"
-  },
   "privacyPolicy": {
     "message": "Politique de confidentialité"
   },
   "termsOfUse": {
     "message": "Conditions d'utilisation"
   },
-  "contact": {
-    "message": "Contact"
-  },
   "minimalFeeDescription": {
     "message": "Minimum"
   },
diff --git a/public/_locales/ja/messages.json b/public/_locales/ja/messages.json
index f8a2a1621a..06ddb38ebb 100644
--- a/public/_locales/ja/messages.json
+++ b/public/_locales/ja/messages.json
@@ -43,24 +43,13 @@
     }
   },
   "branchName": {
-    "message": "branch: $branch$",
+    "message": "Branch: $branch$",
     "placeholders": {
       "branch": {
         "content": "$1"
       }
     }
   },
-  "madeWithLove": {
-    "message": "$companyName$が$loveIcon$で作成",
-    "placeholders": {
-      "loveIcon": {
-        "content": "$1"
-      },
-      "companyName": {
-        "content": "$2"
-      }
-    }
-  },
   "feeInputDescription": {
     "message": "このオペレーションの基本手数料: $fee$\n追加 - 確認を高速化します",
     "placeholders": {
@@ -647,18 +636,12 @@
   "website": {
     "message": "ウェブサイト"
   },
-  "repo": {
-    "message": "レポジトリ"
-  },
   "privacyPolicy": {
     "message": "プライバシーポリシー"
   },
   "termsOfUse": {
     "message": "利用規約"
   },
-  "contact": {
-    "message": "お問合せ"
-  },
   "minimalFeeDescription": {
     "message": "最少"
   },
diff --git a/public/_locales/ko/messages.json b/public/_locales/ko/messages.json
index 5dbc69139a..4c52ff8212 100644
--- a/public/_locales/ko/messages.json
+++ b/public/_locales/ko/messages.json
@@ -43,24 +43,13 @@
     }
   },
   "branchName": {
-    "message": "branch: $branch$",
+    "message": "Branch: $branch$",
     "placeholders": {
       "branch": {
         "content": "$1"
       }
     }
   },
-  "madeWithLove": {
-    "message": "$companyName$ 옆에 $loveIcon$ 포함하여 제작",
-    "placeholders": {
-      "loveIcon": {
-        "content": "$1"
-      },
-      "companyName": {
-        "content": "$2"
-      }
-    }
-  },
   "feeInputDescription": {
     "message": "이 운영에 대한 기본 비용은 $fee$입니다\n추가 - 확인에 따라 속도 상승",
     "placeholders": {
@@ -647,18 +636,12 @@
   "website": {
     "message": "웹사이트"
   },
-  "repo": {
-    "message": "저장소"
-  },
   "privacyPolicy": {
     "message": "개인정보 보호정책"
   },
   "termsOfUse": {
     "message": "사용약관"
   },
-  "contact": {
-    "message": "연락처"
-  },
   "minimalFeeDescription": {
     "message": "최소"
   },
diff --git a/public/_locales/pt/messages.json b/public/_locales/pt/messages.json
index d2ab4f47bd..61c77bd07f 100644
--- a/public/_locales/pt/messages.json
+++ b/public/_locales/pt/messages.json
@@ -38,7 +38,7 @@
     "message": "Clique no ícone X para repor as permissões."
   },
   "versionLabel": {
-    "message": "versão: $version$",
+    "message": "Versão: $version$",
     "placeholders": {
       "version": {
         "content": "$1"
@@ -46,24 +46,13 @@
     }
   },
   "branchName": {
-    "message": "branch: $branch$",
+    "message": "Branch: $branch$",
     "placeholders": {
       "branch": {
         "content": "$1"
       }
     }
   },
-  "madeWithLove": {
-    "message": "Feito com $loveIcon$ pela $companyName$",
-    "placeholders": {
-      "loveIcon": {
-        "content": "$1"
-      },
-      "companyName": {
-        "content": "$2"
-      }
-    }
-  },
   "feeInputDescription": {
     "message": "A taxa de base para esta operação é: $fee$\nAdicional - acelera a confirmação",
     "placeholders": {
@@ -686,18 +675,12 @@
   "website": {
     "message": "Website"
   },
-  "repo": {
-    "message": "Repositório"
-  },
   "privacyPolicy": {
     "message": "Política de privacidade"
   },
   "termsOfUse": {
     "message": "Termos de utilização"
   },
-  "contact": {
-    "message": "Contacto"
-  },
   "minimalFeeDescription": {
     "message": "Mínimo"
   },
@@ -1662,18 +1645,6 @@
       }
     }
   },
-  "helpAndCommunity": {
-    "message": "Ajuda e comunidade"
-  },
-  "communityResourcesTitle": {
-    "message": "Poderá sempre encontrar informações adicionais sobre a carteira Temple ou pedir ajuda sobre os próximos recursos."
-  },
-  "helpAndCommunityDescription": {
-    "message": "Utilize esta secção se quiser fazer parte da nossa comunidade ou precisar de ajuda."
-  },
-  "joinPrompt": {
-    "message": "Sinta-se à vontade para aderir e colocar as suas dúvidas "
-  },
   "blockExplorer": {
     "message": "Explorador de blocos em cadeia"
   },
diff --git a/public/_locales/tr/messages.json b/public/_locales/tr/messages.json
index 6a68750c92..01b6cec3f6 100644
--- a/public/_locales/tr/messages.json
+++ b/public/_locales/tr/messages.json
@@ -38,7 +38,7 @@
     "message": "İzinleri sıfırlamak için X simgesine tıklayın."
   },
   "versionLabel": {
-    "message": "sürüm: $version$",
+    "message": "Sürüm: $version$",
     "placeholders": {
       "version": {
         "content": "$1"
@@ -46,24 +46,13 @@
     }
   },
   "branchName": {
-    "message": "branch: $branch$",
+    "message": "Branch: $branch$",
     "placeholders": {
       "branch": {
         "content": "$1"
       }
     }
   },
-  "madeWithLove": {
-    "message": "$companyName$ tarafından $loveIcon$ ile oluşturulmuştur",
-    "placeholders": {
-      "loveIcon": {
-        "content": "$1"
-      },
-      "companyName": {
-        "content": "$2"
-      }
-    }
-  },
   "feeInputDescription": {
     "message": "Bu işlem için Taban Ücret: $fee$\nEk - konfirmasyonu hızlandırır",
     "placeholders": {
@@ -686,18 +675,12 @@
   "website": {
     "message": "Web Sitesi"
   },
-  "repo": {
-    "message": "Depo"
-  },
   "privacyPolicy": {
     "message": "Gizlilik Politikası"
   },
   "termsOfUse": {
     "message": "Kullanım Koşulları"
   },
-  "contact": {
-    "message": "İletişim"
-  },
   "minimalFeeDescription": {
     "message": "En az"
   },
@@ -1662,18 +1645,6 @@
       }
     }
   },
-  "helpAndCommunity": {
-    "message": "Yardım ve Topluluk"
-  },
-  "communityResourcesTitle": {
-    "message": "Dilediğiniz zaman Temple Wallet hakkında ek bilgi bulabilir ya da sonraki kaynaklarla ilgili yardım isteyebilirsiniz."
-  },
-  "helpAndCommunityDescription": {
-    "message": "Topluluğumuzun bir parçası olmak istiyorsanız ya da yardıma ihtiyacınız varsa bu bölümü kullanın."
-  },
-  "joinPrompt": {
-    "message": "Aramıza katılmaktan ve sorularınızı sormaktan çekinmeyin "
-  },
   "blockExplorer": {
     "message": "Blokzinciri gezgini"
   },
diff --git a/public/_locales/uk/messages.json b/public/_locales/uk/messages.json
index 8ef170704b..fbb9f62598 100644
--- a/public/_locales/uk/messages.json
+++ b/public/_locales/uk/messages.json
@@ -39,7 +39,7 @@
     "message": "Натисни X іконку щоб скинути дозволи."
   },
   "versionLabel": {
-    "message": "version: $version$",
+    "message": "Версія: $version$",
     "placeholders": {
       "version": {
         "content": "$1"
@@ -47,24 +47,13 @@
     }
   },
   "branchName": {
-    "message": "branch: $branch$",
+    "message": "Гілка: $branch$",
     "placeholders": {
       "branch": {
         "content": "$1"
       }
     }
   },
-  "madeWithLove": {
-    "message": "Зроблено з $loveIcon$ компанією $companyName$",
-    "placeholders": {
-      "loveIcon": {
-        "content": "$1"
-      },
-      "companyName": {
-        "content": "$2"
-      }
-    }
-  },
   "feeInputDescription": {
     "message": "Базова комісія блокчейну за цю операцію становить: $fee$\nДодаткова комісія може пришвидшити обробку транзакції",
     "placeholders": {
@@ -675,7 +664,7 @@
     "message": "Вебсайт"
   },
   "repo": {
-    "message": "Репозиторій"
+    "message": "GitHub репозиторій"
   },
   "privacyPolicy": {
     "message": "Політика конфіденційності"
@@ -683,8 +672,11 @@
   "termsOfUse": {
     "message": "Умови використання"
   },
-  "contact": {
-    "message": "Контакти"
+  "knowledgeBase": {
+    "message": "База знань"
+  },
+  "featureRequest": {
+    "message": "Попросити функцію"
   },
   "minimalFeeDescription": {
     "message": "Мінімально"
@@ -1601,17 +1593,8 @@
   "minimumReceived": {
     "message": "Мінімальний вихід"
   },
-  "helpAndCommunity": {
-    "message": "Допомога та спільнота"
-  },
-  "communityResourcesTitle": {
-    "message": "На цих ресурсах Ви завжди зможете знайти додаткову інформацію про Temple wallet або попросити про допомогу."
-  },
-  "helpAndCommunityDescription": {
-    "message": "Використовуйте цей розділ, якщо хочете стати частиною нашої спільноти або якщо Вам потрібна допомога."
-  },
-  "joinPrompt": {
-    "message": "Долучайтесь та задавайте Ваші запитання 😊"
+  "community": {
+    "message": "Спільнота"
   },
   "blockExplorer": {
     "message": "Експлорер блокчейна"
diff --git a/public/_locales/zh_CN/messages.json b/public/_locales/zh_CN/messages.json
index 62c61fc118..790d0eacf0 100644
--- a/public/_locales/zh_CN/messages.json
+++ b/public/_locales/zh_CN/messages.json
@@ -43,24 +43,13 @@
     }
   },
   "branchName": {
-    "message": "branch: $branch$",
+    "message": "Branch: $branch$",
     "placeholders": {
       "branch": {
         "content": "$1"
       }
     }
   },
-  "madeWithLove": {
-    "message": "$companyName$的用$loveIcon$之作",
-    "placeholders": {
-      "loveIcon": {
-        "content": "$1"
-      },
-      "companyName": {
-        "content": "$2"
-      }
-    }
-  },
   "feeInputDescription": {
     "message": "此操作的基本费用为：$fee$\n附加 - 加快其确认流程",
     "placeholders": {
@@ -650,18 +639,12 @@
   "website": {
     "message": "网站"
   },
-  "repo": {
-    "message": "知识库"
-  },
   "privacyPolicy": {
     "message": "隐私政策"
   },
   "termsOfUse": {
     "message": "使用条款"
   },
-  "contact": {
-    "message": "联系方式"
-  },
   "minimalFeeDescription": {
     "message": "最小"
   },
diff --git a/public/_locales/zh_TW/messages.json b/public/_locales/zh_TW/messages.json
index d4ac754831..428513169f 100644
--- a/public/_locales/zh_TW/messages.json
+++ b/public/_locales/zh_TW/messages.json
@@ -43,24 +43,13 @@
     }
   },
   "branchName": {
-    "message": "branch: $branch$",
+    "message": "Branch: $branch$",
     "placeholders": {
       "branch": {
         "content": "$1"
       }
     }
   },
-  "madeWithLove": {
-    "message": "$companyName$ 以 $loveIcon$ 製作",
-    "placeholders": {
-      "loveIcon": {
-        "content": "$1"
-      },
-      "companyName": {
-        "content": "$2"
-      }
-    }
-  },
   "feeInputDescription": {
     "message": "此操作的基本費用：$fee$\n其他 - 加速確認",
     "placeholders": {
@@ -647,18 +636,12 @@
   "website": {
     "message": "網站"
   },
-  "repo": {
-    "message": "存放庫"
-  },
   "privacyPolicy": {
     "message": "隱私政策"
   },
   "termsOfUse": {
     "message": "使用條款"
   },
-  "contact": {
-    "message": "聯絡我們"
-  },
   "minimalFeeDescription": {
     "message": "最小金額"
   },
diff --git a/src/app/atoms/DonationBanner/DonationBanner.tsx b/src/app/atoms/DonationBanner/DonationBanner.tsx
deleted file mode 100644
index cbc4416bbf..0000000000
--- a/src/app/atoms/DonationBanner/DonationBanner.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, { memo } from 'react';
-
-import { Anchor } from 'app/atoms/Anchor';
-import { ReactComponent as Ukraine } from 'app/icons/ukraine.svg';
-import { T } from 'lib/i18n';
-
-import { DonationBannerSelectors } from './selectors';
-
-const DONATE_MAD_FISH_URL = 'https://donate.mad.fish';
-
-export const DonationBanner = memo(() => (
-  <Anchor
-    className="flex items-center rounded h-7 bg-blue-150 max-w-25 px-2"
-    href={DONATE_MAD_FISH_URL}
-    testID={DonationBannerSelectors.ukraineDonationBanner}
-  >
-    <span className="font-inter text-font-medium-bold mr-3 text-blue-650">
-      <T id="support" />
-    </span>
-
-    <Ukraine />
-  </Anchor>
-));
diff --git a/src/app/atoms/DonationBanner/selectors.ts b/src/app/atoms/DonationBanner/selectors.ts
deleted file mode 100644
index cc6fca5c88..0000000000
--- a/src/app/atoms/DonationBanner/selectors.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export enum DonationBannerSelectors {
-  ukraineDonationBanner = 'DonationBanner/Ukraine Donation Banner'
-}
diff --git a/src/app/atoms/Lines.tsx b/src/app/atoms/Lines.tsx
index abefee8e29..c5b6e8ca65 100644
--- a/src/app/atoms/Lines.tsx
+++ b/src/app/atoms/Lines.tsx
@@ -12,16 +12,35 @@ interface LinesProps {
   style?: React.CSSProperties;
 }
 
+const COMMON_CONTAINER_CLASS_NAME = 'flex items-center gap-2';
+const COMMON_LINE_CLASS_NAME = 'flex-1 border-lines';
+
 export const Lines = memo<LinesProps>(({ type = 'divider', className, style }) => (
-  <div className={clsx('w-auto flex items-center gap-2', className)} style={style}>
-    <div className={clsx('flex-1 border-lines', type === 'line' ? 'border-b-0.5' : 'border-b')} />
+  <div className={clsx('w-auto', COMMON_CONTAINER_CLASS_NAME, className)} style={style}>
+    <div className={clsx(COMMON_LINE_CLASS_NAME, type === 'line' ? 'border-b-0.5' : 'border-b')} />
+    {type === 'or' && (
+      <>
+        <OrLabel />
+        <div className={clsx(COMMON_LINE_CLASS_NAME, 'border-b')} />
+      </>
+    )}
+  </div>
+));
+
+export const VerticalLines = memo<LinesProps>(({ type = 'divider', className, style }) => (
+  <div className={clsx('h-auto flex-col', COMMON_CONTAINER_CLASS_NAME, className)} style={style}>
+    <div className={clsx(COMMON_LINE_CLASS_NAME, type === 'line' ? 'border-r-0.5' : 'border-r')} />
     {type === 'or' && (
       <>
-        <span className="text-font-small text-grey-3 font-semibold">
-          <T id="or" />
-        </span>
-        <div className="flex-1 border-b border-lines" />
+        <OrLabel />
+        <div className={clsx(COMMON_LINE_CLASS_NAME, 'border-r')} />
       </>
     )}
   </div>
 ));
+
+const OrLabel = memo(() => (
+  <span className="text-font-small text-grey-3 font-semibold">
+    <T id="or" />
+  </span>
+));
diff --git a/src/app/icons/base/outLink.svg b/src/app/icons/base/outLink.svg
new file mode 100644
index 0000000000..d170d2b42e
--- /dev/null
+++ b/src/app/icons/base/outLink.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M17.5371 6.52734C18.2412 7.23145 18.3711 8.19531 18.3711 9.43945V14.6826C18.3711 15.9336 18.2412 16.8975 17.5371 17.6016C16.833 18.2988 15.8623 18.4355 14.6182 18.4355H9.375C8.13086 18.4355 7.16016 18.2988 6.44922 17.6016C5.75195 16.8975 5.62207 15.9336 5.62207 14.6826L5.62207 9.42578C5.62207 8.19531 5.75195 7.23145 6.45605 6.52734C7.15332 5.83008 8.13086 5.69336 9.35449 5.69336L14.6182 5.69336C15.8623 5.69336 16.833 5.82324 17.5371 6.52734ZM17.0312 9.25488C17.0312 8.54395 16.9424 7.8877 16.5596 7.51172C16.1768 7.12891 15.5137 7.02637 14.8096 7.02637L9.19727 7.02637C8.47949 7.02637 7.80957 7.12207 7.42676 7.50488C7.05078 7.8877 6.96191 8.54395 6.96191 9.26855L6.96191 14.874C6.96191 15.585 7.05078 16.2344 7.43359 16.6172C7.81641 17 8.47949 17.0957 9.18359 17.0957H14.8096C15.5137 17.0957 16.1768 17 16.5596 16.6172C16.9355 16.2344 17.0312 15.585 17.0312 14.874V9.25488ZM14.1328 13.8418C13.791 13.8418 13.5654 13.6094 13.5654 13.2334V12.1396L13.668 11.1553L12.7451 12.1602L10.3594 14.5459C10.2295 14.6689 10.0859 14.7373 9.89453 14.7373C9.55273 14.7373 9.2998 14.498 9.2998 14.1426C9.2998 13.9785 9.375 13.8213 9.49121 13.7051L11.8906 11.3057L12.9023 10.376L11.9658 10.4854H10.8105C10.4414 10.4854 10.2021 10.2666 10.2021 9.9248C10.2021 9.58301 10.4414 9.36426 10.8037 9.36426L14.0029 9.36426C14.4268 9.36426 14.6934 9.57617 14.6934 10.0479V13.2266C14.6934 13.5889 14.4678 13.8418 14.1328 13.8418Z"
+    stroke="none"
+  />
+</svg>
diff --git a/src/app/icons/monochrome/discord.svg b/src/app/icons/monochrome/discord.svg
new file mode 100644
index 0000000000..4fb6f57d29
--- /dev/null
+++ b/src/app/icons/monochrome/discord.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="20" height="20" rx="10" fill="#FF5B00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6286 7.87239C15.7655 7.46484 14.8426 7.16865 13.8778 7C13.7593 7.21621 13.6209 7.50701 13.5254 7.73835C12.4998 7.58268 11.4836 7.58268 10.4769 7.73835C10.3814 7.50701 10.2398 7.21621 10.1203 7C9.15443 7.16865 8.23052 7.46593 7.36742 7.87455C5.62656 10.5295 5.15464 13.1186 5.3906 15.6708C6.54524 16.541 7.66421 17.0697 8.7643 17.4156C9.03592 17.0383 9.27817 16.6373 9.48686 16.2146C9.0894 16.0622 8.70872 15.8741 8.34903 15.6557C8.44445 15.5844 8.53779 15.5098 8.62797 15.433C10.8219 16.4686 13.2056 16.4686 15.3733 15.433C15.4645 15.5098 15.5578 15.5844 15.6522 15.6557C15.2915 15.8751 14.9098 16.0632 14.5123 16.2157C14.721 16.6373 14.9622 17.0394 15.2348 17.4167C16.336 17.0707 17.456 16.5421 18.6106 15.6708C18.8875 12.7121 18.1377 10.1468 16.6286 7.87239ZM9.78575 14.1012C9.12716 14.1012 8.58707 13.4807 8.58707 12.7251C8.58707 11.9694 9.11563 11.3479 9.78575 11.3479C10.4559 11.3479 10.996 11.9683 10.9844 12.7251C10.9855 13.4807 10.4559 14.1012 9.78575 14.1012ZM13.0168 12.7251C13.0168 13.4807 13.5569 14.1012 14.2155 14.1012C14.8856 14.1012 15.4142 13.4807 15.4142 12.7251C15.4257 11.9683 14.8856 11.3479 14.2155 11.3479C13.5454 11.3479 13.0168 11.9694 13.0168 12.7251Z" fill="white"/>
+</svg>
diff --git a/src/app/icons/monochrome/knowledge-base.svg b/src/app/icons/monochrome/knowledge-base.svg
new file mode 100644
index 0000000000..c5d0970b7a
--- /dev/null
+++ b/src/app/icons/monochrome/knowledge-base.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="20" height="20" rx="10" fill="#FF5B00"/>
+<g clip-path="url(#clip0_5130_92049)">
+<path d="M17.2174 15.0612C17.6504 15.0612 18 14.7331 18 14.3265V9.91837C18 9.51184 17.6504 9.18367 17.2174 9.18367C16.7843 9.18367 16.4348 9.51184 16.4348 9.91837C16.4348 10.0555 16.5496 10.1633 16.6957 10.1633C16.8417 10.1633 16.9565 10.0555 16.9565 9.91837C16.9565 9.78122 17.0713 9.67347 17.2174 9.67347C17.3635 9.67347 17.4783 9.78122 17.4783 9.91837V14.3265C17.4783 14.4637 17.3635 14.5714 17.2174 14.5714C17.0713 14.5714 16.9565 14.4637 16.9565 14.3265V11.3878C16.9565 10.9812 16.607 10.6531 16.1739 10.6531C16.0278 10.6531 15.913 10.5453 15.913 10.4082V8.44898C15.913 8.31184 16.0278 8.20408 16.1739 8.20408C16.32 8.20408 16.4348 8.31184 16.4348 8.44898C16.4348 8.58612 16.5496 8.69388 16.6957 8.69388C16.8417 8.69388 16.9565 8.58612 16.9565 8.44898C16.9565 8.04245 16.607 7.71429 16.1739 7.71429C15.7409 7.71429 15.3913 8.04245 15.3913 8.44898V11.3878V12.3673C15.3913 12.5045 15.2765 12.6122 15.1304 12.6122C14.9843 12.6122 14.8696 12.5045 14.8696 12.3673V11.3878V8.69388C14.8696 7.2098 13.5809 6 12 6C10.4191 6 9.13043 7.2098 9.13043 8.69388V11.3878V12.3673C9.13043 12.5045 9.01565 12.6122 8.86957 12.6122C8.72348 12.6122 8.6087 12.5045 8.6087 12.3673V11.3878V8.44898C8.6087 8.04245 8.25913 7.71429 7.82609 7.71429C7.39304 7.71429 7.04348 8.04245 7.04348 8.44898C7.04348 8.58612 7.15826 8.69388 7.30435 8.69388C7.45043 8.69388 7.56522 8.58612 7.56522 8.44898C7.56522 8.31184 7.68 8.20408 7.82609 8.20408C7.97217 8.20408 8.08696 8.31184 8.08696 8.44898V10.4082C8.08696 10.5453 7.97217 10.6531 7.82609 10.6531C7.39304 10.6531 7.04348 10.9812 7.04348 11.3878V14.3265C7.04348 14.4637 6.9287 14.5714 6.78261 14.5714C6.63652 14.5714 6.52174 14.4637 6.52174 14.3265V9.91837C6.52174 9.78122 6.63652 9.67347 6.78261 9.67347C6.9287 9.67347 7.04348 9.78122 7.04348 9.91837C7.04348 10.0555 7.15826 10.1633 7.30435 10.1633C7.45043 10.1633 7.56522 10.0555 7.56522 9.91837C7.56522 9.51184 7.21565 9.18367 6.78261 9.18367C6.34957 9.18367 6 9.51184 6 9.91837V14.3265C6 14.7331 6.34957 15.0612 6.78261 15.0612C7.21565 15.0612 7.56522 14.7331 7.56522 14.3265V11.3878C7.56522 11.2506 7.68 11.1429 7.82609 11.1429C7.97217 11.1429 8.08696 11.2506 8.08696 11.3878V12.3673C8.08696 12.7739 8.43652 13.102 8.86957 13.102C9.30261 13.102 9.65217 12.7739 9.65217 12.3673V11.3878C9.65217 11.2506 9.76696 11.1429 9.91304 11.1429C10.0591 11.1429 10.1739 11.2506 10.1739 11.3878V11.8776V14.8163C10.1739 14.9535 10.0591 15.0612 9.91304 15.0612C9.76696 15.0612 9.65217 14.9535 9.65217 14.8163V14.3265C9.65217 13.92 9.30261 13.5918 8.86957 13.5918C8.43652 13.5918 8.08696 13.92 8.08696 14.3265V15.7959C8.08696 15.9331 7.97217 16.0408 7.82609 16.0408C7.68 16.0408 7.56522 15.9331 7.56522 15.7959C7.56522 15.6588 7.45043 15.551 7.30435 15.551C7.15826 15.551 7.04348 15.6588 7.04348 15.7959C7.04348 16.2024 7.39304 16.5306 7.82609 16.5306C8.25913 16.5306 8.6087 16.2024 8.6087 15.7959V14.3265C8.6087 14.1894 8.72348 14.0816 8.86957 14.0816C9.01565 14.0816 9.13043 14.1894 9.13043 14.3265V14.8163C9.13043 15.2229 9.48 15.551 9.91304 15.551C10.3461 15.551 10.6957 15.2229 10.6957 14.8163V11.8776C10.6957 11.7404 10.8104 11.6327 10.9565 11.6327C11.1026 11.6327 11.2174 11.7404 11.2174 11.8776V17.2653C11.2174 17.4024 11.1026 17.5102 10.9565 17.5102C10.8104 17.5102 10.6957 17.4024 10.6957 17.2653V16.7755C10.6957 16.369 10.3461 16.0408 9.91304 16.0408C9.48 16.0408 9.13043 16.369 9.13043 16.7755C9.13043 16.9127 9.24522 17.0204 9.3913 17.0204C9.53739 17.0204 9.65217 16.9127 9.65217 16.7755C9.65217 16.6384 9.76696 16.5306 9.91304 16.5306C10.0591 16.5306 10.1739 16.6384 10.1739 16.7755V17.2653C10.1739 17.6718 10.5235 18 10.9565 18C11.3896 18 11.7391 17.6718 11.7391 17.2653V11.8776V10.898C11.7391 10.7608 11.8539 10.6531 12 10.6531C12.1461 10.6531 12.2609 10.7608 12.2609 10.898V11.8776V17.2653C12.2609 17.6718 12.6104 18 13.0435 18C13.4765 18 13.8261 17.6718 13.8261 17.2653V16.7755C13.8261 16.6384 13.9409 16.5306 14.087 16.5306C14.233 16.5306 14.3478 16.6384 14.3478 16.7755C14.3478 16.9127 14.4626 17.0204 14.6087 17.0204C14.7548 17.0204 14.8696 16.9127 14.8696 16.7755C14.8696 16.369 14.52 16.0408 14.087 16.0408C13.6539 16.0408 13.3043 16.369 13.3043 16.7755V17.2653C13.3043 17.4024 13.1896 17.5102 13.0435 17.5102C12.8974 17.5102 12.7826 17.4024 12.7826 17.2653V11.8776C12.7826 11.7404 12.8974 11.6327 13.0435 11.6327C13.1896 11.6327 13.3043 11.7404 13.3043 11.8776V14.8163C13.3043 15.2229 13.6539 15.551 14.087 15.551C14.52 15.551 14.8696 15.2229 14.8696 14.8163V14.3265C14.8696 14.1894 14.9843 14.0816 15.1304 14.0816C15.2765 14.0816 15.3913 14.1894 15.3913 14.3265V15.7959C15.3913 16.2024 15.7409 16.5306 16.1739 16.5306C16.607 16.5306 16.9565 16.2024 16.9565 15.7959C16.9565 15.6588 16.8417 15.551 16.6957 15.551C16.5496 15.551 16.4348 15.6588 16.4348 15.7959C16.4348 15.9331 16.32 16.0408 16.1739 16.0408C16.0278 16.0408 15.913 15.9331 15.913 15.7959V14.3265C15.913 13.92 15.5635 13.5918 15.1304 13.5918C14.6974 13.5918 14.3478 13.92 14.3478 14.3265V14.8163C14.3478 14.9535 14.233 15.0612 14.087 15.0612C13.9409 15.0612 13.8261 14.9535 13.8261 14.8163V11.8776V11.3878C13.8261 11.2506 13.9409 11.1429 14.087 11.1429C14.233 11.1429 14.3478 11.2506 14.3478 11.3878V12.3673C14.3478 12.7739 14.6974 13.102 15.1304 13.102C15.5635 13.102 15.913 12.7739 15.913 12.3673V11.3878C15.913 11.2506 16.0278 11.1429 16.1739 11.1429C16.32 11.1429 16.4348 11.2506 16.4348 11.3878V14.3265C16.4348 14.7331 16.7843 15.0612 17.2174 15.0612ZM12 6.4898C13.2939 6.4898 14.3478 7.47918 14.3478 8.69388C14.3478 8.83102 14.233 8.93878 14.087 8.93878H13.5652C13.2261 8.93878 12.9339 9.14449 12.8296 9.42857H11.1757C11.0661 9.14449 10.7791 8.93878 10.44 8.93878H9.91304C9.76696 8.93878 9.65217 8.83102 9.65217 8.69388C9.65217 7.47918 10.7061 6.4898 12 6.4898ZM13.8261 9.67347V9.91837C13.8261 10.0555 13.7113 10.1633 13.5652 10.1633C13.4191 10.1633 13.3043 10.0555 13.3043 9.91837V9.67347C13.3043 9.53633 13.4191 9.42857 13.5652 9.42857C13.7113 9.42857 13.8261 9.53633 13.8261 9.67347ZM10.4348 9.42857C10.5809 9.42857 10.6957 9.53633 10.6957 9.67347V9.91837C10.6957 10.0555 10.5809 10.1633 10.4348 10.1633C10.2887 10.1633 10.1739 10.0555 10.1739 9.91837V9.67347C10.1739 9.53633 10.2887 9.42857 10.4348 9.42857Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_5130_92049">
+<rect width="12" height="12" fill="white" transform="translate(6 6)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/app/icons/monochrome/reddit.svg b/src/app/icons/monochrome/reddit.svg
new file mode 100644
index 0000000000..abfaccf32c
--- /dev/null
+++ b/src/app/icons/monochrome/reddit.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="20" height="20" rx="10" fill="#FF5B00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.7551 10.8064C18.289 11.0192 18.6461 11.5209 18.6671 12.0877C18.6759 12.6419 18.3605 13.1518 17.8564 13.3985C17.8676 13.5428 17.8676 13.6878 17.8564 13.8322C17.8564 16.0399 15.2439 17.8337 12.0208 17.8337C8.79775 17.8337 6.18527 16.0399 6.18527 13.8322C6.174 13.6878 6.174 13.5428 6.18527 13.3985C5.65917 13.1605 5.32537 12.6391 5.33415 12.0691C5.34294 11.4991 5.69264 10.9879 6.22583 10.7657C6.75902 10.5436 7.37514 10.6523 7.7968 11.0429C8.95017 10.2727 10.3071 9.85133 11.7005 9.83064L12.4412 6.41063C12.458 6.33066 12.5066 6.26064 12.5762 6.2162C12.6458 6.17175 12.7306 6.15659 12.8116 6.17409L15.2639 6.65703C15.5113 6.23851 16.0308 6.05896 16.4896 6.23341C16.9484 6.40786 17.2105 6.88464 17.108 7.35825C17.0055 7.83187 16.5687 8.162 16.0776 8.13712C15.5864 8.11223 15.1864 7.73972 15.1338 7.25824L12.9917 6.81473L12.3411 9.88978C13.7176 9.91885 15.0561 10.3399 16.1948 11.1021C16.6103 10.7094 17.2213 10.5936 17.7551 10.8064ZM9.65857 12.0877C9.10576 12.0877 8.65762 12.5289 8.65762 13.0732C8.65762 13.3346 8.76308 13.5853 8.95079 13.7702C9.13851 13.955 9.3931 14.0588 9.65857 14.0588C10.2114 14.0588 10.6595 13.6176 10.6595 13.0732C10.6595 12.5289 10.2114 12.0877 9.65857 12.0877ZM14.4732 15.7836C13.763 16.3106 12.8893 16.5788 12.0008 16.5425C11.1123 16.5788 10.2386 16.3106 9.52845 15.7836C9.44026 15.6778 9.44797 15.5234 9.54626 15.4266C9.64455 15.3299 9.80136 15.3223 9.90881 15.4091C10.5106 15.8437 11.2452 16.0628 11.9908 16.03C12.7373 16.07 13.4753 15.8579 14.0828 15.4288C14.1543 15.3601 14.2576 15.3343 14.3537 15.3609C14.4499 15.3876 14.5243 15.4627 14.5489 15.558C14.5736 15.6534 14.5447 15.7544 14.4732 15.823V15.7836ZM13.292 13.1127C13.292 13.657 13.7402 14.0983 14.293 14.0983L14.283 14.1377C14.5573 14.1406 14.8207 14.0326 15.0118 13.8388C15.2029 13.645 15.3049 13.3825 15.2939 13.1127C15.2939 12.5683 14.8458 12.1271 14.293 12.1271C13.7402 12.1271 13.292 12.5683 13.292 13.1127Z" fill="white"/>
+</svg>
diff --git a/src/app/icons/monochrome/telegram.svg b/src/app/icons/monochrome/telegram.svg
new file mode 100644
index 0000000000..c3222add02
--- /dev/null
+++ b/src/app/icons/monochrome/telegram.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="20" height="20" rx="10" fill="#FF5B00"/>
+<path d="M6.49474 12.0168C9.40278 10.782 11.3419 9.96792 12.3122 9.5746C15.0825 8.45159 15.6581 8.25651 16.0333 8.25007C16.1158 8.24865 16.3003 8.26858 16.4199 8.3631C16.5208 8.44291 16.5485 8.55072 16.5618 8.62639C16.5751 8.70206 16.5917 8.87444 16.5785 9.00912C16.4284 10.5464 15.7788 14.2771 15.4483 15.9989C15.3085 16.7275 15.0332 16.9718 14.7666 16.9957C14.1873 17.0476 13.7474 16.6225 13.1864 16.2641C12.3084 15.7032 11.8124 15.354 10.9602 14.8067C9.97529 14.1741 10.6137 13.8265 11.175 13.2583C11.3219 13.1096 13.8743 10.8469 13.9237 10.6417C13.9299 10.616 13.9356 10.5203 13.8773 10.4698C13.819 10.4193 13.7329 10.4365 13.6708 10.4503C13.5827 10.4698 12.1801 11.3733 9.46305 13.1608C9.06494 13.4273 8.70434 13.5571 8.38125 13.5503C8.02508 13.5428 7.33994 13.354 6.83061 13.1926C6.2059 12.9947 5.70939 12.8901 5.75262 12.554C5.77514 12.3789 6.02251 12.1998 6.49474 12.0168Z" fill="white"/>
+</svg>
diff --git a/src/app/icons/monochrome/x-social.svg b/src/app/icons/monochrome/x-social.svg
new file mode 100644
index 0000000000..cabfb9f842
--- /dev/null
+++ b/src/app/icons/monochrome/x-social.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="20" height="20" rx="10" fill="#FF5B00"/>
+<path d="M15.1631 6.95195H16.8499L13.1649 11.1637L17.5 16.8949H14.1056L11.447 13.419L8.40497 16.8949H6.71722L10.6587 12.39L6.5 6.95195H9.98055L12.3837 10.1291L15.1631 6.95195ZM14.5712 15.8853H15.5058L9.4727 7.90852H8.46973L14.5712 15.8853Z" fill="white"/>
+</svg>
diff --git a/src/app/icons/monochrome/youtube.svg b/src/app/icons/monochrome/youtube.svg
new file mode 100644
index 0000000000..d00335622a
--- /dev/null
+++ b/src/app/icons/monochrome/youtube.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="20" height="20" rx="10" fill="#FF5B00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1953 7.69401C17.7687 7.84511 18.2223 8.29001 18.3763 8.85243C18.6588 9.87655 18.6673 12.0003 18.6673 12.0003C18.6673 12.0003 18.6673 14.1325 18.3849 15.1482C18.2309 15.7106 17.7773 16.1555 17.2039 16.3066C16.1684 16.5837 12.0007 16.5837 12.0007 16.5837C12.0007 16.5837 7.83291 16.5837 6.7974 16.3066C6.22401 16.1555 5.77044 15.7106 5.6164 15.1482C5.33398 14.1241 5.33398 12.0003 5.33398 12.0003C5.33398 12.0003 5.33398 9.87655 5.60784 8.86083C5.76188 8.2984 6.21546 7.8535 6.78884 7.7024C7.82436 7.42539 11.9921 7.41699 11.9921 7.41699C11.9921 7.41699 16.1598 7.41699 17.1953 7.69401ZM14.123 12.0003L10.6656 13.9646V10.036L14.123 12.0003Z" fill="white"/>
+</svg>
diff --git a/src/app/icons/ukraine.svg b/src/app/icons/ukraine.svg
deleted file mode 100644
index 06ee41c451..0000000000
--- a/src/app/icons/ukraine.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="14" viewBox="0 0 71 48"><defs><filter id="A" x="0%" y="0%" width="100%" height="100%"><feColorMatrix in="SourceGraphic" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/></filter><mask id="B"><g filter="url(#A)"><path d="M0 0h71v48H0z" fill="rgb(0%,0%,0%)" fill-opacity=".988" stroke="none"/></g></mask><clipPath id="C"><path d="M0 0h71v48H0z"/></clipPath><g id="D" clip-path="url(#C)"><path d="M43.152.008c-.156.004-.219.172-.281.234s-.117.184-.234.148-.215.199-.281.285-.215.082-.316.066-.164-.02-.266-.02a1.9 1.9 0 0 1-.582-.164c-.148-.086-.445-.102-.527-.102s-.168.016-.285-.035-.133-.066-.281.02-.082.418-.066.535.082.148-.066.184-.301.5-.301.566-.098.168-.164.219-.25-.02-.383 0-.184.133-.25.168-.215.016-.332 0-.148-.168-.168-.25-.066-.121-.148-.121-.43-.016-.715-.016-.68.02-.93-.031-.383.23-.48.367-.184.016-.285-.086-.43-.117-.562-.133-.164.148-.199.219-.184.066-.184.066l-.004.035c-.012.098-.051.188-.113.223-.074.043-.074.051-.047.141s-.352.203-.352.203v.023c.008.102.035.234-.082.254s-.168.047-.242.191-.082.199-.125.215-.098.051-.059.125.012.145-.023.184-.008.035-.109.059-.059.066-.016.094.094.016.066.09-.016.203-.125.219-.164.016-.148.199h-.059c-.016.012-.027.023-.043.039a.47.47 0 0 1-.039.16.59.59 0 0 0-.09.082c-.004.02-.004.035 0 .055.016.133.09.18.113.191-.039-.016-.039.227.051.242s.133.059.133.152-.016.215.023.25.086.105.051.133-.074-.027-.09.051-.027.074.047.125.109.133.137.234.031.082.016.133-.008.043.008.109.008.082.008.082-.043.125-.074.176-.199.164-.199.164l-.02.016-.035.063c0 .008-.004.016-.004.023l-.016.008c-.066-.098-.367-.316-.598-.398-.301-.109-.184-.27-.199-.484s-.367-.453-.699-.551-.945.184-1.062.316-.332-.082-.383-.184-.133-.133-.383-.168-.633.484-.633.551-.113.035-.246 0-.168.051-.266.102-.168-.117-.184-.219-.051-.168-.098-.219-.086-.398-.086-.449-.098-.168-.18-.199-.086-.27-.137-.387-.148-.066-.297-.098-.184.082-.234.148-.133.188-.398.219-.547.566-.578.766-.086.137-.234.07-.266-.602-.285-.77-.281-.133-.48-.152-.332.168-.332.168c-.133.066-.098.035-.332-.168s-.133-.23-.133-.23.012-.023.02-.047l.023-.07c.008-.059-.012-.117-.109-.117s-.176.059-.266.141l-.367.359c-.266.234-.23.102-.332-.035s-.266-.23-.496-.301-.199.102-.133.27.031.266-.102.367-.164.203-.465.035.066-.437.066-.535c0-.055-.148-.113-.293-.16h-.008l-.266-.074s-.133-.066-.23.035c-.016.016-.035.027-.055.039h-.004c-.109.059-.281.055-.473.023-.043-.004-.07-.012-.102-.023h-.008c-.059-.023-.09-.059-.098-.098-.008-.023-.008-.047-.004-.07s.004-.047.012-.074c.035-.133-.035-.133-.199-.168s-.102-.367-.133-.531-.5-.035-.73 0-.598-.102-.766-.27-.199-.066-.367-.066-.363-.035-.496-.168-.766-.133-1-.199-.363-.234-.363-.234-.098-.168-.332-.266-.199-.004-.332-.234-.398.133-.496.164-.398-.098-.566-.098-.633 0-.965-.035-.496-.133-.73-.234-.664 0-.93.137-1.098.164-1.199.133-.43-.066-.562 0-.297-.035-.496-.066-.434.633-.402.668-.23.266-.363.266-.301.102-.332.234-.234.266-.398.367-.266.035-.301-.133-.266-.102-.367-.066-.164.066-.43-.137-.367.27-.301.402-.133.234-.133.234-.008.02-.016.145.074.133.133.141-.016.148-.051.191c-.008.012 0 .039.012.066a.96.96 0 0 0 .133.176c.031.031 0 .109-.043.125s-.008.059 0 .102.008.066-.051.074-.141.109-.172.234.063.199.121.199.102.051.125.102.051.207.066.234.035.066.008.117.078.125.125.141.133.148.141.176.16.102.199.133-.008.125-.039.16-.008.082.016.184a.24.24 0 0 0 .109.16c.039.023.059.148.008.258s.059.199.09.227.082.098.066.164.023.109.059.152l.16.215c.047.078.313.27.371.293s.051.102-.023.168-.383-.016-.5-.023-.164.074-.184.234c-.012.129.098.152.168.152.016 0 .031 0 .043-.004.055-.008.023.109 0 .219s.141.148.176.156.039.051.004.102.043.219.078.301.051.09.051.09l-.031.098.004.004-.012.031c-.023.086-.043.195 0 .254.086.098.074.133.027.164s-.168.137-.242.145-.199.074-.168.152.02.113 0 .156-.105.25-.164.277-.414-.035-.523-.035-.555-.02-.613.141-.074.285-.168.313-.105.004-.172.121a1.08 1.08 0 0 1-.344.301 3.44 3.44 0 0 0-.32.199c-.043.031-.082.059-.094.078-.043.066-.398.324-.473.395l-.316.301c-.043.023-.141.105-.148.156s-.059.109-.102.133-.215.086-.348.27-.516.652-.559.668-.125.016-.133.074-.031.191-.074.203-.184.031-.199.113-.047.203-.105.238-.129.148-.176.164-.16-.016-.207.09-.141.301-.273.395-.352.41-.293.508.141.32.094.43-.035.176.031.223.117.125.082.277-.031.234 0 .301.051.227-.008.309-.125.242-.133.309-.016.035-.082.051-.184.051-.191.168 0 .133.141.215.25.227.289.262.063.074.086.09.059.125.047.211.027.184-.055.148-.094-.082-.117-.117-.059-.059-.109-.059-.289.043-.348 0-.164-.277-.242-.293-.164-.008-.191.086l-.066.273c-.016.074-.016.211-.082.203s-.176-.035-.227.031-.055.234-.098.25c-.012.004-.023.008-.031.016-.016.004-.023.012-.035.02-.016.016-.031.043-.031.09 0 .102-.051.168-.086.195s-.195.09-.18.281.016.25-.062.301-.113.078-.121.184-.059.426-.266.461-.219.16-.234.199-.074.086-.172.133-.184.074-.191.234-.02.203.008.262.016.066-.008.102-.078.047-.086.121l-.016.254c0 .031-.082.215.051.191s.176-.035.223-.027.234.059.152.145-.094.234 0 .223.199-.066.172.051-.051.176-.016.27.133.258.148.309.043.133.109.102.102-.012.141.012.133.047.176.027.066-.023.09.02.082.203.117.223a.38.38 0 0 1 .199.434c-.051.211.141.254.223.246s.449-.152.516-.109.176.191.176.191l.082.203h1.078c.066-.062.152-.102.199-.086s.078.055.109.086h13.77c.074-.152.207-.422.27-.363.082.086.215.285.297.285s.168-.133.121-.219-.234-.285-.07-.285.367-.031.465.02.285.133.383.148.219-.031.219-.082.066-.184.148-.148.148.113.25.164.363.086.496-.016.051-.199.184-.184.582.051.762-.266l.109-.027c.102-.051.188-.09.227-.082.012 0 .016.008.016.023 0 .059-.074.109.074.184s.258.094.367.043.23-.008.273.066.125.176.215.191.125.125.141.176.102.309.375.359l.078.012h47.063c.055-.039.145-.07.191-.109.086-.066.035-.117 0-.336s.234-.801.398-.867.133-.352.016-.434-.215.031-.281.051-.148.066-.23-.02.098-.266.18-.332-.031-.234-.098-.32-.199-.582-.215-.766-.184-.152-.234-.219 0-.168.219-.25.113-.301.063-.402-.312-.031-.43.02-.152.449-.316.582-.266-.148-.199-.352.199-.668.348-.832.75-.035.883-.086.184-.234.215-.367.016-.199-.051-.301-.215.016-.297.051-.465.066-.582.066-.184-.184-.234-.234-.18-.098-.281-.148-.117-.121-.117-.254.066-.133.219-.199.645-.117.746-.184.016-.383.082-.5.348-.301.484-.57l.262-.516c.086-.168-.082-.234-.148-.316s-.363-.32-.512-.57.031-.383.23-.617-.215-.301-.465-.266-.434.348-.598.414-.25.035-.383-.066-.465-.199-.582-.266-.148-.316-.246-.469-.285-.133-.52-.082-.43 0-.648-.051-.246-.383-.297-.516-.133-.219-.266-.219-.148.184-.168.25-.363.219-.512.234-.148-.254-.266-.402-.484-.031-.598-.031-.234-.336-.316-.504-.234-.016-.25.07-.117.098-.25.148-.23-.016-.266-.066-.066-.117-.215-.102-.199-.082-.367-.281-.348-.051-.613 0 .035.449.051.516.098.184-.02.184-.262.184-.414.234-.168.066-.234-.082-.113-.187-.195-.238-.168-.281-.285-.398-.312-.133-.48-.133-.234-.168-.301-.336-.348-.418-.445-.5c-.043-.031-.047-.121-.039-.223l.039-.379c-.02-.082-.367-.168-.469-.184s-.113-.316-.164-.418-.215-.031-.398 0-.449.117-.465.184-.035.117-.133.117a1.09 1.09 0 0 0-.516.215c-.133.117-.398.137-.75.219-.148.035-.281.137-.383.246h-.008a1.18 1.18 0 0 0-.238.375c-.031.113-.117.164-.316.164s-.102-.082-.266-.402-.699.086-.883.07c-.09-.008-.148-.094-.211-.207s-.129-.262-.219-.379c-.184-.234-.598-.219-.98-.219s-.664.438-.715.484-.348.086-.516.066-.18-.184-.246-.383-.203-.352-.316-.418-.117.066-.133-.066-.102-.336-.199-.602.133-.266.199-.352-.035-.484-.066-.582-.117-.168-.184-.184-.086-.051-.102-.219-.133-.5-.281-.652.035-.266.086-.383-.035-.184-.152-.25-.398.066-.531.016-.234-.586-.281-.785-.25-.203-.352-.168-.281.086-.398.086-.598.164-.781.215-.363-.281-.461-.367-.301-.082-.566-.082-.234.066-.383.148-.266-.016-.383-.148 0-.187.117-.187.117-.184.117-.301-.035-.215-.301-.301-.098-.148.016-.25.02-.348.02-.516c0-.109-.176-.352-.328-.559l-.187-.277c-.012-.016-.012-.035-.004-.051 0-.008.008-.02.016-.027.184-.219.785-.238 1.082-.34.25-.082-.082-.551-.164-.684s-.301-.184-.434-.27-.133-.215-.23-.301-.199-.117-.25-.133-.102-.148-.117-.25-.098-.219-.148-.316-.051-.133 0-.219.051-.168.051-.27-.285-.383-.367-.48-.496-.617-.664-.734-.332-.086-.48-.07-.316.285-.465.387-.152-.219-.184-.27-.184-.098-.383-.098a10.9 10.9 0 0 1-.73-.035h-.035zm0 0" stroke="none" fill="rgb(0%,35.686275%,73.333333%)" fill-opacity=".988"/></g><mask id="E"><g filter="url(#A)"><path d="M0 0h71v48H0z" fill="rgb(0%,0%,0%)" fill-opacity=".988" stroke="none"/></g></mask><clipPath id="F"><path d="M0 0h71v48H0z"/></clipPath><g id="G" clip-path="url(#F)"><path d="M1.59 23.813c-.012.168.152.199.227.195.086-.012.449-.152.516-.109s.176.191.176.191l.141.359c.016.039.043.141 0 .164s-.074.035-.074.059-.02.027-.051.07-.082.133.008.164.082.059.102.086.031.031.074.023.191-.066.148-.168-.008-.199.043-.176.191.152.266.176.266-.074.301-.105.098-.312.164-.402.18-.152.238-.133.102.09.145.113.105.043.133.035.074 0 .09.035.051.25.133.301.141.082.176.141.066.125.141.117.109.008.133.023.152.125.238.094c.051-.02.086-.035.105-.047.012-.016.023-.031.039-.035.031-.02.082-.035.082-.035l.199.109c.109 0 .156.008.199.043s.168.063.242.063.23.004.332.07.156.133.172.199.043.168.152.125.25-.199.383-.168.387.086.465.203l.047.082c.047.074.086.117.191.082l.102-.023s.215.148.398.051.234-.051.316-.035.082-.082.164-.098.066-.219.551-.02.363.234.465.301.082.102.066.168-.035.148.133.25l.184.102c.113.059.215.109.25.152.047.066.195.414.215.48s.098.168.215.121.117-.051.25-.051.516-.152.598-.301.148-.305.215-.32c.051-.012.074-.043.086-.082.004-.012.012-.023.016-.035a.27.27 0 0 1 .148-.164c.102-.051.332-.168.434-.137s.266.02.348-.016.133-.066.23-.051.863.051.98.066.184 0 .25-.051.117-.098.234-.098.266-.035.363-.016.168 0 .234-.02.199-.031.332 0 .348 0 .398-.066.133-.352.199-.367.184-.082.184-.133.098-.316.164-.402-.031-.184.051-.184.168-.051.168-.051h.031c.012.016.027.031.047.035s.043 0 .063-.016c.031-.035.207-.176.297-.141s.199.098.273.055.125-.074.133-.105a.19.19 0 0 1 .023-.051c.012-.023.031-.043.051-.027.035.027.07.066.102.02l.074-.102s.234-.551.316-.469.215.285.297.285.168-.137.121-.219c-.027-.043-.094-.121-.121-.184zm17.418 0c.074.031.152.059.203.066.09.016.195-.023.215-.066zm.82 0c.094.047.336.082.477 0zm2.816 0a.48.48 0 0 1 .047.109c.016.051.102.309.375.359s.449.043.441.176c-.008.078-.039.191-.055.273-.012.063-.012.105.02.117.074.027.176-.016.227-.105s.141-.035.148.031.023.352.215.234.367-.285.441-.199.176.266.031.383-.289.258-.141.301.168-.051.223-.148.191-.125.211 0 .008.121-.008.273c0 0 .34.594.238 0-.016-.102.285-.301.484-.234.156.027.488.02.672.109l.043.02c.039.027.066.063.082.105.039.141.172.555.352.836a1.2 1.2 0 0 0 .145.184l.066.051a.32.32 0 0 0 .074.035c.027.008.039.012.051.012.027 0 .051-.004.074-.016.367-.133.566-.367.633-.133s.199.434.332.469-.332.367-.199.5.266.234.199.402-.168.234-.234.398-.031.469-.098.637-.164.168-.098.332.129.238.328.27.402.367.5.5 0 .367.168.469.363.035.398-.066.199-.168.297-.035.234.434.035.5-.133.203-.098.336.129.203-.07.234-.266.102-.164.199.164.27.297.168.199 0 .199.102-.062.301-.129.367-.203.234 0 .301.332.035.43.199.199.07.363.168.168.133.301.234.164-.031.266.066.234.133.133.27-.199.43-.133.633.102.332.031.5-.195.469-.098.535.168.402.5.535.266.199-.035.234-.496.031-.598.164-.367.035-.367-.098.102-.5-.133-.469-.43-.133-.398.168-.098.402-.262.266-.434-.23-.434-.23.133-.301 0-.301-.332 0-.332.133-.102.297-.168.199-.098-.199-.266-.168-.164.066-.199.199-.164.238-.266.203 0-.234.035-.402.066-.633-.133-.535-.234.203-.434.301-.73.102-.633.434.102.535.066.637-.031.168.066.301.332.336.199.434-.297.301-.297.504.066.398-.102.5-.664.199-.73.332.066.57-.031.672-.266.164-.633.398-.562.336-.465.637.031.332.031.602c0 .086-.008.156-.027.207-.039.113-.125.148-.238.125-.082-.016-.312-.117-.535-.125s-.426.074-.461.426v.035c.133.039.215.082.234.148s.008.395.164.566.434.297.59.348.227.082.309.156.234.082.273.082a.37.37 0 0 1 .199.063c.078.047.207.098.293.074s.191-.043.223-.043.141-.051.086-.082-.262-.168-.137-.211.152-.066.125-.125-.051-.184.043-.168.125.043.148.086.074.074.117.066.082.023.098.051.211.191.262.082.105-.32.23-.395.164-.074.223-.117.145-.082.219-.059.082.027.164 0 .219-.141.266-.191.094-.066.168-.059.164.02.23-.031.117-.043.156-.035.16.035.234.027.133-.027.207.039.094.066.234.102.375.133.414.199.25.293.266.453.027.266.078.336.137.156.137.156l-.008.008.02-.008.039-.004.016-.016v-.047l-.027-.055-.004-.043.02-.031.07-.234.066-.141.004-.031-.004-.02-.027-.059.016-.105-.031-.102-.008-.16-.023-.027-.051-.035v-.02l.063.023h.023l.016-.008.004-.027.008-.215-.012-.02-.039-.039-.016-.059-.039-.02-.023.031-.035.152-.02.039-.008-.023-.004-.09-.02-.039-.016-.008-.043.02-.027.055-.012.016h-.016l-.016-.039.008-.074-.012-.043-.008-.016-.023-.004-.023.008-.023.027-.016.047-.012.148-.023.004-.043-.039-.059-.105-.066-.09v-.023l.012-.016.039-.012.027-.027.066-.137.031-.027h.02l.047-.035.023-.031.016-.051.004-.008-.023-.004-.035-.02-.074-.008-.074-.016-.078-.039-.023-.031.004-.07.051-.289-.008-.117-.027-.191.004-.102.016-.047.023-.031.051-.035.055-.02.031-.027v-.023l-.016-.012-.047-.039-.008-.031-.004-.07.035-.113.043-.078.055-.059.004-.027-.07-.141-.004-.047.012-.027.016-.008.016.004.027.031.02.059.016.012.098.004.008.016.02.082.043.043-.008.047-.047.063-.012.051-.02.066-.008.051.031.051.02.035-.008.051-.031.063v.047l.02.031.094.078.059.078.063.121.008.066-.023.098.008.047h.016l.012-.02.02-.043.016-.012.105-.031.035-.023.008-.023-.004-.066.008-.016.02-.008.055.031.023.004.02-.004.031-.02.043-.043.105-.055.027-.023.008-.027-.016-.031-.035-.023-.078-.008-.035-.016-.105-.141-.016-.039v-.047l.012-.051.023-.031.117-.039.086-.039h.074l.023-.004.039-.07.023-.008.02.008.012.016-.004.051.012.02.082.055.02.031.016.063.023.008.012-.02-.012-.066.008-.051-.07-.18.008-.129.035-.109.012-.012.02-.004.012.043-.023.117.008.023.031.02.031.078h.008l.074-.164.004-.031-.035-.047v-.043l.012-.102.027-.031.035-.016h.023l.164.043.039.043.066.125.047.059h.02l.016-.078.008-.02.02-.012.059.051.02-.004.012-.02v-.051l.02-.039.004-.02-.035-.098.063-.109.016-.129.02-.035h.023l.031.051.035.07-.008.047-.035.051v.023l.039.039.02.059-.023.121h.004l.105-.074.238-.191.086-.051.047-.035.066-.109.074-.09.121-.234.117-.168.063-.07.129-.121.07-.074.078-.055.148-.156.176-.156.043-.078.039-.164.016-.043.031-.027.051-.027.027-.027.059-.109.051-.125.035-.055.055-.059.09-.137.137-.141.023-.035.094-.203s.004-.035.012-.07l.027-.098v-.027l-.016-.031-.086-.039-.039-.039-.008-.039.008-.027.012-.008.047.004.148.086.027.004.027-.09.035-.035.152-.109.02-.047.059-.246.047-.094v-.051l-.043-.062-.008-.141-.027-.027-.062-.031-.023-.027-.02-.059.027-.055.055-.055.086-.145.027-.027.043-.012.027.004.055.031.027.004h.027l.074-.023.176-.086.09-.07.039-.023.039-.004.047.016h.027l.105-.086.125-.059.16-.051.082-.012.164.004.102-.027.074-.035.082-.008h.055l.051.012.168.066.102.027.098.004.18.031.043-.004.086-.047.066-.039.098-.027.059-.027.023-.027.023-.102.027-.031.066-.039.066-.07.074-.168.047-.07.023-.066-.016-.039-.012-.012-.07-.027-.09-.055-.023-.027-.02-.059-.008-.16-.035-.07.012-.016.027.004.039.039.016.039.027.125.016.035.078.035.07.066.027.008.02-.008.023-.027.016-.047v-.047l-.012-.039.004-.027.082-.023.047-.031.082-.059.02-.031.027-.059.035-.121.02.008.035.047v.051l-.066.113-.141.16-.031.094-.004.121-.016.047-.035.051-.07.063-.023.039-.004.102-.035.059-.023.031-.07.035-.027.027-.023.063.004.047.008.016.043.016.094.008.098.023.059.035.039.039.043.02h.047l.016-.016.016-.039.016-.078.02-.047.023-.035.047-.031.113-.035h.051l.164.055.082.035.113.066.047.008.094-.008.098.051.047.016h.023l.184-.082.141-.074.055-.051.023-.066-.051-.109-.016-.105.008-.051.035-.148-.016-.062-.02-.055-.039-.043-.059-.051-.043-.066-.016-.062v-.066l.027-.102.016-.043.031-.055.047-.035.156-.078.031-.023.012-.016.086-.215.031-.121.012-.078-.008-.02-.039-.023-.051.023-.035.02-.055.023h-.043l-.043-.016-.027-.027-.012-.039.004-.102.02-.043.117-.164.035-.055.004-.027-.004-.02-.012-.012-.023-.008-.039.008-.113.078-.031.016-.105-.012-.035-.02-.043-.043-.035-.094.004-.098.035-.086.086-.141.012-.039-.004-.07-.023-.059-.066-.062-.098-.027-.023-.008-.02-.035-.008-.039.031-.137.008-.102-.012-.043-.051-.082-.07-.043-.125-.031-.09-.055-.051-.059-.012-.059.008-.055.023-.043.023-.031.055-.02.016.016-.02.145.016.059.027.027.039.02.188.059.074.039.02.035.012.039-.02.203.004.043.02.039.004.016.047.039.109.047.043.043.016.031.02.105-.008.105-.043.113-.059.117-.008.051.004.02.031.027.047.016.039.004.094-.039.086-.016.047.008.074.02.039.039.008.043-.023.043-.156.176-.023.07.008.043.02.031.047.012.066-.004.063-.02.066.012.047.043.012.059-.012.109-.059.215-.043.113-.027.059-.098.098-.047.066-.02.098.004.188.023.055.027.082.02.031.066.074.008.016.004.168.082.219.113.16.082.063.043.016.051.012.09-.012.027.004.043.016.055.035.027.031.031.047.031.188.031.031h.023l.012-.012.066-.074.035-.027.051-.02.082-.012.035-.02.055-.086.016-.012.023-.012.047.012.031.023.133.148.07.063.039.023.074.012.18-.012.102-.027.082-.043.141-.102.16-.086.035-.016.063-.043.074-.035.039-.008.051.004.055-.027.234-.164.02-.008h.023l.027.027-.105.145-.07.07-.055.027-.105.023-.055.023-.078.055-.164.066-.047.035-.086.105-.055.027-.094.066-.043.07-.016.105.016.031.055.035.008.016-.008.027-.031.023-.137.074-.105.094-.066-.004-.082-.016-.043-.016-.16-.027-.059-.031-.078-.082-.062-.031-.074-.008-.062.012-.039.02-.043.004-.047-.012-.203-.094-.027-.008-.043.004-.055.023-.078.023-.109.012-.102-.016-.137-.047-.051-.008-.148-.008-.129-.02-.086.012-.047-.004-.035-.016-.035-.047-.133-.031-.059-.027-.086-.062-.082-.035-.047-.004-.086.016-.109.004-.043.012-.113.043-.117.004-.062.012h-.094l-.074-.016-.066-.02-.051-.039-.113-.133-.051-.035-.016.012.105.164.043.039.129.078.117.172.051.059.066.051.09.051.027.031.02.031.023.051.039.145.02.035.02-.012.008-.023.004-.242.012-.051.035-.047.031-.016h.023l.125.008.039-.016h.094l.102.047.09.027.188.082.109.039.156.086.027.004.039-.012.066-.039h.027l.016.012.09-.008.023.004.047.059.027.055.031.047.078.086.047.082.012.043-.023.039-.102-.008-.039.012-.035.016-.008.023-.008.047-.02.043-.086.051-.086.039-.187.039h-.145l-.129-.016-.094.004-.035.012-.082.055-.109.051-.047.035-.012.043.039.047.035.031.047.074.016.016.066.023.098.012.129-.02.078.008.039-.008.016-.039-.02-.035s-.008-.016-.02-.031h.203l.035.023.023.027.043.09.035.02.102.02.059.031.09.027.043-.004.059-.012.027.004.031.012.055.055.047.059.047.063.035.07.027.027.098.051.078.016.121.055.055.008.059-.016.07.02.039-.012.082-.051h.02l.008.016-.004.027-.086.078-.008.023.055.105.008.094.016.055.023.031.102.02.195.078.301.094.418.094.074.004.055-.023.063-.082.07-.023.051-.008.07-.039.039-.004.094-.043.039-.008h.023l.125.02.051-.027.063-.004.059-.027.094-.062.125-.027.168.004.129.051h.023l.059-.016.031.008.055.027.012.016.047.016.043-.004.082-.051.039-.016h.047l.141.004.109-.008.051-.031.027-.035.012-.039-.008-.066-.043-.066.008-.012.016-.012.16.051.145.133.051.012.039-.008.082-.051.137-.102.066-.043.008-.016-.004-.094.012-.047.051-.031.027-.055.02-.07.027-.031.016.008v.043l-.02.039-.012.105.031.16.004.047-.016.047-.043.063-.008.016.016.039.023-.008.105-.082.035-.016.023-.004h.023l.051.039.148.063.023.023.004.02-.008.051-.027.035-.062.039-.023.035.02.008.043.012.023-.008.051-.09.035-.02.184.055.035.051.016.086.078.059.055.082.035.02h.051l.078-.055.047-.004.125.07.02.008.02-.004.016-.02-.012-.016-.07-.113v-.023l.023-.043.023-.031.035-.02.148.012.016-.008.004-.02-.035-.043-.07-.023-.031-.027-.008-.039.016-.043.043-.043.055-.02.012-.016.023-.066.051-.027.016-.012.027-.066.016-.008h.023l.055.031.023.035.059.145.066.094.043.09v.047l-.004.023-.047.035-.023.031-.004.027.004.141.031.07.047.035.012.016v.027l-.012.016-.062.043-.02.039.078.109.016.063-.008.027-.074.094-.016.047.004.016.012.016.047-.004.07-.098.031-.016h.051l.113.031.184.023.059.035.043.039.02.031.004.023-.008.02-.016.012-.137.008-.078.055-.02.008-.051-.004-.039.016-.008.012-.004.051.023.078.016.086-.008.051-.027.027-.059.016-.043-.016-.031-.02-.066-.074-.039-.02-.023-.004-.059.016-.16.074-.031.031-.016.078-.027.031-.035.016-.039.012-.094.004-.016-.008-.066-.047-.047-.008-.027.02-.023.043-.016.012h-.09l-.109.047-.113.145-.059.063-.059.047-.187.133-.258.133-.059.023h-.027l-.039-.023-.035-.043-.031-.023-.066-.027-.035-.023-.012-.035-.008-.047-.027-.023-.027.027-.016.051.004.02.023.055.063.047.027.035v.02l-.012.02-.152.051-.227.141-.289.133-.293.156-.059.023-.16.105-.121.121-.141.113-.059.078v.039l.047.059.008.02.004.023-.031.059-.031.02h-.023l-.105-.02-.066-.027-.074-.004-.031.027-.082.145-.059.055-.105.047-.164.027-.055.031-.086.078-.191.125-.098.066-.055.055-.156.246-.043.137.012.039.059.078.02.039-.004.098.008.043.02.031.012.012.109.02s.012.004.02.012c.016.008.039.016.039.016l.078.066.047.008.156-.008.023.004.074.039.027.008.047-.004.031-.016.055-.094.023-.031.047-.035.051-.027.039-.043.051-.031.066-.008.18.016.137-.035.121-.004.098.012.262.07.117.078.016.02.043.031.164.098.238.191.211.227.035.023.098.117.117.105.047.016.121.008.039.016.066.051.059.078.035.023.074.016.039-.008.047-.031.063-.086.043-.008.07.008.035-.016.078-.059.07-.008.043.004.051.012.09.059.219.18.086.031.074.039.125.105.02.027.043.039.047.063.023.055.047.203.004.145.008.063.008.016.023.027.039.063.059.145.059.293v.07l-.047.168v.07l-.02.074-.012.023-.035.016-.109.016-.031.016-.023.031-.051.094-.023.105-.055.156v.023l.031.094s.004.008.004.023c.008.043.016.125.016.125l.059.129.027.098v.051l-.039.121-.078.121-.02.07.016.035.023.031.016.012.098.008.023.008.055.035.008.02-.027.027-.066.016-.113.004-.082.02-.051-.012-.117.035-.098-.004-.031.055-.066.008-.039.07-.035.02h-.02l-.02-.027-.031-.027-.051-.004-.012.043.004.016.059.082.082.086.176.133.066.074.055.031.102.043.156.082.047.012h.016l.121-.059.047.004.066.051.086.129.051.063.004.02-.012.07.008.02.023.031.051.023.152.035.063.051.047.055.047.035.051.012.125-.008.156.031.059-.023.102-.051.063-.012.07.012.172.059.125.031.125-.016.152-.082.105-.023.027-.02.039-.051.16-.066.059-.016.164-.074.047-.035.035-.047.117-.23.039-.043.094-.035.117-.004.035-.016.039-.074.059-.184.023-.031.059-.004.125.023h.023l.051-.031.012-.016.02-.043.008-.078.02-.066.07-.133.082-.25.117-.172.074-.191.047-.074.039-.047.027-.023.074-.027.051-.043c.02-.02.039-.031.039-.031l.098-.066.051-.027.055-.008.152-.047.074-.031.184-.043.078-.051.086-.113.113-.074.055-.023.125-.027.105-.012.086.008.086.031h.02l.039-.016.047-.062.035-.012.023.008.047.039.043.016h.043l.047-.035.031-.062.031-.043.035-.023.141-.031.102.004.055.027.16.172.031.051.031.023.074.016h.02l.039-.02.059-.051.035-.074.027-.094.035-.203.02-.07.047-.098.066-.074.074-.059.074-.023.086-.02.055-.027.012-.016.043-.172.027-.059.051-.027.043-.004.098.023h.023l.078-.059.043.016.125.105.023.004.012-.012.012-.02-.008-.043-.051-.086-.004-.02.004-.039.016-.043.027-.031.051-.027.184-.012.027-.027.008-.02-.004-.023-.031-.023-.094-.031-.039-.035-.004-.043.004-.055.012-.047.023-.066.047-.066.039-.043.238-.168.113-.102.059-.02.066-.004.043-.012.133-.004.215.035.137.043.133.074.109.035.055.035.137.09.082.039.148.203.066.141.035.023.074.012.219-.062.117-.062.055.004.059.031.055.008.059-.004.031-.027.023-.035.016-.043.02-.078.031-.051.031-.031.051-.02h.23l.02.008.078.063.063.023.188.027h.047l.148.031h.023l.023-.004.027-.023.023-.031.023-.07.027-.059.047-.035.063-.016.129-.004.074.004.152-.016.156-.105.125-.059.043-.035.02-.043-.004-.047-.09-.094-.086-.125-.062-.125-.008-.109.008-.223.008-.066c.008-.031.012-.066.012-.066l.027-.066.016-.074-.012-.086v-.047l.008-.051.023-.031.023-.008.16-.043.051-.027.008-.02-.004-.039-.07-.098-.008-.066.008-.023.02-.039.035-.023.035-.012.09-.004h.047l.031.004.098.043.051.008.113-.008.074-.023.023-.027.02-.047-.02-.199-.074-.113-.023-.055-.043-.066-.035-.023h-.066l-.133.113-.047.008-.023-.008-.039-.02-.086-.102c-.055-.09-.137-.086-.254-.027s-.168.051-.301-.023-.133-.031-.234.043-.02-.113-.023-.133-.117-.02-.184 0-.332.082-.48.066-.141.066-.25.133-.113.152-.113.152l-.07.195-.035.078-.055.063-.055.02-.039.008-.152-.008-.133-.047-.043-.039-.156-.078-.121-.082-.043-.055-.016-.039-.023-.062v-.043l.008-.016.059-.02.016-.016.008-.016-.008-.039-.07-.047-.055-.004h-.043l-.035.023-.027.059-.027.18-.043.137-.047.066-.043.047-.043.035-.031.027-.004.023.004.043-.004.02-.043.039-.043.102-.012.02-.051.031-.07.035-.312.094-.258.133-.137.039-.059.016-.047.004-.07-.02-.059-.031-.098-.074-.062-.078-.078-.02-.113-.062-.238-.18-.07-.07-.18-.25-.105-.117-.105-.137-.109-.164-.117-.152-.055-.105-.07-.094-.113-.129-.152-.199-.074-.09-.086-.129-.066-.148-.039-.043-.043-.09-.051-.078-.055-.055-.031-.051-.098-.207-.09-.148-.043-.09-.082-.258-.078-.156-.09-.121-.07-.141-.02-.059-.031-.191-.027-.125-.121-.277-.035-.211-.031-.363-.055-.148-.012-.059v-.098l.027-.062.035-.047.063-.051.059-.023.047-.027.051-.059.027-.156.008-.02.012-.016.016-.004h.016l.031.031.027.117.02.012.023.004.047-.004.137-.074.238-.07.031-.02.086-.07.133-.145.102-.094.055-.09.059-.16.039-.07.07-.07.07-.102h.289v.031.094l.016.059.031.027.082.016.055.031h.023l.016-.016.055-.086.043-.043.027.012-.004.051-.039.117-.016.039-.043.043-.105.078-.023.039-.004.125-.066.07-.016.027-.062.148-.09.137-.062.148-.02.035-.043.039-.047.035-.074.035-.176.055-.238.09-.062.051v.027l.039.039-.027.027-.098.031-.031.023-.02.07-.082.055-.027.027-.004.047.012.016.035.023.047.004.035-.012.094-.066.027-.004.066-.035.133-.082.105-.047.07-.035.121-.094.059-.059.105-.148.074-.168.145-.293.074-.121.066-.102.25-.484.066-.105s.012-.008.02-.023l.035-.035.086-.078.098-.098.059-.086.063-.117.063-.078.066-.039.113-.027.074-.031.156-.09.023-.023.102-.066.023-.031.074-.059.121-.195.066-.078.086-.145.105-.121.059-.051.07-.035.031-.047.094-.074.105-.051.25-.152.063-.012h.07l.172-.031.133-.016.094-.035.082-.051.035-.012.047.004.121.059.055.008.043-.004.059-.02.129-.062.043-.004.047.004.059.031.016.012.051.086.063.07.004.047-.008.074.016.035.023.008.008-.016.016-.078.027-.035.016-.004.023.012.004.012.004.051-.012.051.016.004.023-.039.008-.125.051-.098.055-.09.09-.105.063-.102.09-.105.16-.105.094-.039.117-.039.082-.051.074-.062.055-.023h.188l.066-.008.027-.023.039-.082.043-.031.078.004.066.02.191-.039h.043l.129.031.047.012.074.066.063.074.066.051.043.063.012.039.008.043-.016.129-.023.07-.039.074-.012.047v.051l-.023.039-.016.012-.023-.008-.07-.031.031.051.035.02.016.012.047-.008.035-.047.105-.355.027-.086.027-.148.043-.113.055-.121.008-.051-.039-.066v-.02l.008-.023.016-.008.051.004.059-.02.023-.035.027-.062.031-.055.027-.027.082-.051.078-.023.078-.094.047-.035.07-.031.09-.07.227-.121.16-.066.07-.039.063-.047.086-.078.066-.039.113-.039.066-.004.039.016.137.102.125.047.016.016.004.043-.039.09v.023l.016.016.02.008.016-.016.094-.137.152-.352.02-.035.07-.074.137-.266.117-.172.086-.109.094-.172.063-.051.031-.012.047-.008.121.008h.023l.164.047.207-.008.172.016.113-.043.125-.059.133-.078.094-.031.152-.02.18.055.02-.004.078-.059h.035l.129.051.098.02.07-.035.055-.062.035-.012h.023l.117.082.133.07.02.035-.008.055-.012.039-.055.063-.008.023-.012.051.023.004.031-.023.063-.074.055-.098.063-.082.121-.191.055-.059.016-.012c0-.008-.051-.332-.051-.5s.117-.281.266-.363.051-.234.035-.32-.133-.016-.332 0 .133-.52.18-.684-.031-.734-.031-.902c0-.086-.035-.199.199-.219.117-.008.168-.031.184-.098s.031-.086.184-.102.73-.234.746-.301.031-.102.098-.102a1.02 1.02 0 0 0 .336-.117c.031-.02.063-.145.09-.297l.109-.602c.051-.152.098-.168.246-.203s.367-.098.516-.066.93-.035 1.047-.066.02-.066.234.035.383.082.465.016.199-.117.531-.168.348.035.613.016.234-.117.215-.234 0-.316.02-.434-.098-.25-.184-.352.133-.148.215-.215.035-.117 0-.336c0-.012-.004-.023-.004-.035zM5.164 25.02c-.012.016-.023.031-.039.047.016-.016.027-.031.039-.047zm42.992 11.5l.07.027.051.035.074.07.137.168.02.027.094.266.023.031.105.063.047.375.02.031.039-.016.023-.062-.008-.398-.098-.023-.016-.012-.02-.035.008-.031.094-.133h.039l.07.094.16.043.02.016.031.023.031.066.027.031.176.066.094.07.027.008.16-.105.039-.148.066-.047.031.027.059.098.039.047.016.035-.016.07-.074.324-.172-.152-.07.133-.02-.004-.012-.043.035-.082v-.047l-.02-.012h-.02l-.035.016-.043.074-.094.102-.008.141.125.172.008.016-.008.035-.164-.062-.09.137-.008.027.008.066.055.031.168-.023.051.012.016.027.012.047-.031.094-.004.051.043.039.035-.012.012-.012.039-.117.023-.039.035-.012.168.02.082-.02.027-.027.039-.086.156-.402.008-.023-.012-.137-.039-.094-.012-.035-.012-.23.012-.039.305-.094.133.066.211.184.035.117.023.152-.012.012-.02.012-.047-.004-.035-.02-.113-.113-.055.016-.145.07-.082.016-.016.039.02.035.105.043.043.16.164.145.043.063.039-.004.027-.031.012-.102.008-.023.016-.012h.016l.02.012.086.156.031.07.031.332.012.063.063.074.027.254.012.09-.082.25.016.043.031.02h.023l.02-.004.082-.082.047-.137.027-.027.051.004.082.063.07.133.043.164.094.191.117.156.176.375.141.129.027.074.16.223.129.168.047.066.234.281.074.086.191.246.234.355.137.09.098.168.035.023.074.02.02.016.082.109.031.023.02.012h.094l.027.027.063.023.055.039.012.031-.301.16-.035-.02-.031-.027-.051-.082-.238-.086-.117-.059-.148-.035-.062-.023-.246-.117-.207.043-.035-.039-.234-.168-.02-.035-.008-.066-.023-.055-.129-.121-.012-.016.004-.043.027-.031.23-.109.063-.078.016-.066-.145-.488-.141-.262-.004-.016-.027-.027-.176-.113-.02-.035-.09-.199-.043-.012h-.023l-.184.035-.047-.031-.18-.16-.078-.012-.012-.02.027-.035.121-.156-.012-.016-.043.008-.254.148-.145-.059-.098-.012-.09.039-.02-.008.004-.023.012-.023.102-.117.02-.309-.012-.035-.187.043-.168.102-.043.008-.012-.008.02-.094.039-.039.02-.043.02-.172.07-.043.211-.039.016.012.02-.016.012-.051-.012-.133-.055-.062-.055.098-.039.039-.344.148-.043.043-.098.16-.164.164-.09.012-.078.09-.117.031-.09.039h-.023l-.012-.02.016-.039.059-.043.113-.082.016-.113.039-.047.094-.102.012-.02.008-.121.027-.023.137-.035.051-.035.137-.348-.012-.039-.012-.016-.117-.059-.23-.074h-.023l-.02.004.004.02.141.188.012.039-.02.039-.012.016-.023.004-.07-.02h-.023l-.031.016-.031.059-.059.156-.02.031-.035.023-.043-.012-.047-.066-.039-.07-.004-.082.027-.117-.047-.004-.109.051-.016.012-.02.039-.023.102v.051l.023.148-.008.051-.039.004-.027-.098.016-.078-.008-.023h-.016l-.02.012-.039.078-.02.008-.012-.008.012-.082-.004-.023-.008-.016-.062.078-.031.02-.016-.016.004-.02.074-.207.102-.031.02-.043.027-.055-.051-.109-.141-.062-.051-.035v-.027l.035-.016.059-.008v-.023l-.09-.145-.043-.043-.043-.008-.02.004-.016.016-.016.043-.016.102-.031.023-.078-.012-.082-.059.012-.191-.012-.043-.035-.008-.012.02-.031.09-.066.137-.102.02-.012-.012v-.051l.035-.043.012-.027-.004-.023-.027-.023-.227-.031-.047.004-.023-.004-.168-.066.008.023.004.016.063.051.047.066.191.098.035.023.027.051.031.215-.004.047-.008.023-.043.035-.156.039-.035-.004-.031-.027-.109-.184.008-.027.02-.004.082.039.043-.008.07-.129-.012-.02-.086-.055-.266-.219-.133-.113-.086-.109-.043-.043-.289-.039-.047.031-.008.027.004.039.027.031.047.012h.094l.051.012.016.016-.016.043-.082.102.07.07.02.035-.008.023-.043.043-.039.012-.043-.008-.047-.039-.02-.031-.039-.09-.02-.031-.09-.004-.066.094-.043.004-.031.027h-.016l-.012-.012.012-.047v-.023l-.012-.051.07-.066-.004-.051-.004-.02-.102-.086-.086-.105-.004-.027.008-.02.051-.113-.039-.141-.031-.023-.07-.016-.074-.051-.016.012-.004.285-.035.043h-.047l-.059-.074-.172-.094-.102-.25-.008-.02-.043-.152.043.008.055.031h.027l.063-.141.012-.02.078-.016.043-.047.016-.004.043.016.094.098.191.047.055-.023.039-.047.016-.008.023.008.055.059.031.016.051.008.172.008.035.023.031.027.023.051.082.184.113.109.051.086.02.004.02-.012.055-.117.043.004.051.109.02.035.016.012h.027l.184-.016-.156-.246-.039-.02-.055-.09h.02l.063.023h.027l.023-.023h.168l-.004.23h.023l.145-.152v-.109l-.051-.016-.016-.008-.137-.187-.012-.043.02-.293.016-.008h.02zm0 0" stroke="none" fill="rgb(100%,83.529412%,0%)" fill-opacity="1"/></g></defs><use xlink:href="#D" mask="url(#B)"/><use xlink:href="#G" mask="url(#E)"/></svg>
diff --git a/src/app/pages/Settings/Settings.tsx b/src/app/pages/Settings/Settings.tsx
index b497201776..fc7e70cd1f 100644
--- a/src/app/pages/Settings/Settings.tsx
+++ b/src/app/pages/Settings/Settings.tsx
@@ -16,7 +16,7 @@ import { ReactComponent as LockIcon } from 'app/icons/base/lock.svg';
 import { ReactComponent as ManageIcon } from 'app/icons/base/manage.svg';
 import { ReactComponent as RefreshIcon } from 'app/icons/base/refresh.svg';
 import PageLayout from 'app/layouts/PageLayout';
-import About from 'app/templates/About/About';
+import { About } from 'app/templates/About/About';
 import { AccountsManagement } from 'app/templates/AccountsManagement';
 import AddressBook from 'app/templates/AddressBook/AddressBook';
 import { AdvancedFeatures } from 'app/templates/AdvancedFeatures';
diff --git a/src/app/templates/About/About.selectors.ts b/src/app/templates/About/About.selectors.ts
index 25fabbe791..67f94d13c9 100644
--- a/src/app/templates/About/About.selectors.ts
+++ b/src/app/templates/About/About.selectors.ts
@@ -1,8 +1,13 @@
 export enum AboutSelectors {
-  madFishLink = 'About/MadFish Link',
   websiteLink = 'About/Website Link',
   repoLink = 'About/Repo Link',
   privacyPolicyLink = 'About/Privacy Policy Link',
   termsOfUseLink = 'About/Terms Of Use Link',
-  contactLink = 'About/Contact Link'
+  knowledgeBaseLink = 'About/Knowledge Base Link',
+  featureRequestLink = 'About/Feature Request Link',
+  xSocialLink = 'About/X Social Link',
+  telegramLink = 'About/Telegram Link',
+  discordLink = 'About/Discord Link',
+  redditLink = 'About/Reddit Link',
+  youtubeLink = 'About/Youtube Link'
 }
diff --git a/src/app/templates/About/About.tsx b/src/app/templates/About/About.tsx
index ac551c7afe..7c14eac0f4 100644
--- a/src/app/templates/About/About.tsx
+++ b/src/app/templates/About/About.tsx
@@ -1,20 +1,24 @@
-import React, { FC } from 'react';
+import React, { memo } from 'react';
 
-import { Anchor } from 'app/atoms/Anchor';
-import { DonationBanner } from 'app/atoms/DonationBanner/DonationBanner';
+import { VerticalLines } from 'app/atoms/Lines';
 import { Logo } from 'app/atoms/Logo';
-import SubTitle from 'app/atoms/SubTitle';
+import { SettingsCell } from 'app/atoms/SettingsCell';
+import { SettingsCellGroup } from 'app/atoms/SettingsCellGroup';
+import { ReactComponent as DiscordIcon } from 'app/icons/monochrome/discord.svg';
+import { ReactComponent as KnowledgeBaseIcon } from 'app/icons/monochrome/knowledge-base.svg';
+import { ReactComponent as RedditIcon } from 'app/icons/monochrome/reddit.svg';
+import { ReactComponent as TelegramIcon } from 'app/icons/monochrome/telegram.svg';
+import { ReactComponent as XSocialIcon } from 'app/icons/monochrome/x-social.svg';
+import { ReactComponent as YoutubeIcon } from 'app/icons/monochrome/youtube.svg';
 import { PRIVACY_POLICY_URL, TERMS_OF_USE_URL } from 'lib/constants';
 import { EnvVars } from 'lib/env';
-import { TID, T } from 'lib/i18n';
+import { T, t } from 'lib/i18n';
 
 import { AboutSelectors } from './About.selectors';
+import { LinkProps } from './links-group-item';
+import { LinksGroupView } from './links-group-view';
 
-const LINKS: {
-  key: TID;
-  link: string;
-  testID: string;
-}[] = [
+const LINKS: LinkProps[] = [
   {
     key: 'website',
     link: 'https://templewallet.com',
@@ -34,81 +38,92 @@ const LINKS: {
     key: 'termsOfUse',
     link: TERMS_OF_USE_URL,
     testID: AboutSelectors.termsOfUseLink
+  }
+];
+
+const COMMUNITY_LINKS: LinkProps[] = [
+  {
+    key: 'knowledgeBase',
+    link: 'https://madfish.crunch.help/en/temple-wallet',
+    testID: AboutSelectors.knowledgeBaseLink,
+    Icon: KnowledgeBaseIcon
+  },
+  {
+    key: 'featureRequest',
+    link: 'https://madfish.canny.io/feature-requests',
+    testID: AboutSelectors.featureRequestLink,
+    Icon: KnowledgeBaseIcon
   },
   {
-    key: 'contact',
-    link: 'https://templewallet.com/contact',
-    testID: AboutSelectors.contactLink
+    key: 'xSocial',
+    link: 'https://x.com/madfishofficial',
+    testID: AboutSelectors.xSocialLink,
+    Icon: XSocialIcon
+  },
+  {
+    key: 'telegram',
+    link: 'https://t.me/MadFishCommunity',
+    testID: AboutSelectors.telegramLink,
+    Icon: TelegramIcon
+  },
+  {
+    key: 'discord',
+    link: 'https://www.madfish.solutions/discord',
+    testID: AboutSelectors.discordLink,
+    Icon: DiscordIcon
+  },
+  {
+    key: 'reddit',
+    link: 'https://www.reddit.com/r/MadFishCommunity',
+    testID: AboutSelectors.redditLink,
+    Icon: RedditIcon
+  },
+  {
+    key: 'youtube',
+    link: 'https://www.youtube.com/channel/UCUp80EXfJEigks3xU5hiwyA',
+    testID: AboutSelectors.youtubeLink,
+    Icon: YoutubeIcon
   }
 ];
 
-const About: FC = () => (
-  <div className="flex flex-col items-center my-8">
-    <div className="flex items-center justify-center">
-      <Logo type="icon" size={60} className="my-1.5" />
-
-      <div className="ml-4">
-        <h4 className="text-xl font-semibold text-gray-700">
-          <T id="appName" />
-        </h4>
-
-        <p className="text-sm font-light text-gray-800">
-          <T
-            id="versionLabel"
-            substitutions={[
-              <span className="font-bold" key="version">
-                {process.env.VERSION}
-              </span>
-            ]}
-          />
-        </p>
-        <p className="text-sm font-light text-gray-800 max-w-xs">
-          <T
-            id="branchName"
-            substitutions={[
-              <span className="font-bold" key="branch">
-                {EnvVars.TEMPLE_WALLET_DEVELOPMENT_BRANCH_NAME}
-              </span>
-            ]}
-          />
-        </p>
-      </div>
-    </div>
-
-    <p className="my-6 text-font-regular font-light text-gray-600">
-      <T
-        id="madeWithLove"
-        substitutions={[
-          <span role="img" aria-label="love" key="heart">
-            ❤️
-          </span>,
-          <Anchor
-            href="https://madfish.solutions"
-            key="link"
-            className="font-normal hover:underline"
-            style={{ color: '#98c630' }}
-            testID={AboutSelectors.madFishLink}
-          >
-            Madfish.Solutions
-          </Anchor>
-        ]}
-      />
-    </p>
-
-    <DonationBanner />
+export const About = memo(() => {
+  const branch = EnvVars.TEMPLE_WALLET_DEVELOPMENT_BRANCH_NAME;
+  const version = process.env.VERSION;
 
-    <SubTitle className="mt-6 mb-2">
-      <T id="links" />
-    </SubTitle>
-
-    <div className="text-center">
-      {LINKS.map(({ key, link, testID }) => (
-        <Anchor key={key} href={link} className="block mb-2 text-base text-blue-600 hover:underline" testID={testID}>
-          <T id={key} />
-        </Anchor>
-      ))}
+  return (
+    <div className="flex flex-col gap-4">
+      <SettingsCellGroup>
+        <SettingsCell
+          Component="div"
+          isLast
+          className="p-4 gap-3"
+          cellIcon={<Logo type="icon" />}
+          wrapCellName={false}
+          cellName={
+            <div className="flex flex-col gap-1">
+              <p className="text-font-medium-bold">
+                <T id="appName" />
+              </p>
+              <div className="inline-flex flex-wrap gap-1.5 text-font-description text-grey-1">
+                <span>
+                  <T id="versionLabel" substitutions={version} />
+                </span>
+                {/* `branch` is equal to `version` in releases */}
+                {branch && branch !== version && (
+                  <>
+                    <VerticalLines className="py-0.5" />
+                    <span>
+                      <T id="branchName" substitutions={branch} />
+                    </span>
+                  </>
+                )}
+              </div>
+            </div>
+          }
+        />
+      </SettingsCellGroup>
+      <LinksGroupView group={{ title: t('links'), links: LINKS }} />
+      <LinksGroupView group={{ title: t('community'), links: COMMUNITY_LINKS }} />
     </div>
-  </div>
-);
-
-export default About;
+  );
+});
diff --git a/src/app/templates/About/links-group-item.tsx b/src/app/templates/About/links-group-item.tsx
new file mode 100644
index 0000000000..c350997f1c
--- /dev/null
+++ b/src/app/templates/About/links-group-item.tsx
@@ -0,0 +1,35 @@
+import React, { memo } from 'react';
+
+import { Anchor, IconBase } from 'app/atoms';
+import { SettingsCell } from 'app/atoms/SettingsCell';
+import { ReactComponent as OutLinkIcon } from 'app/icons/base/outLink.svg';
+import { TID, t } from 'lib/i18n';
+
+export interface LinkProps {
+  key: TID;
+  link: string;
+  testID: string;
+  Icon?: ImportedSVGComponent;
+}
+
+interface LinksGroupItemProps {
+  item: LinkProps;
+  isLast: boolean;
+}
+
+export const LinksGroupItem = memo<LinksGroupItemProps>(({ item, isLast }) => {
+  const { Icon, key, link, testID } = item;
+
+  return (
+    <SettingsCell
+      isLast={isLast}
+      cellIcon={Icon && <Icon />}
+      cellName={t(key)}
+      Component={Anchor}
+      href={link}
+      testID={testID}
+    >
+      <IconBase size={16} className="text-primary" Icon={OutLinkIcon} />
+    </SettingsCell>
+  );
+});
diff --git a/src/app/templates/About/links-group-view.tsx b/src/app/templates/About/links-group-view.tsx
new file mode 100644
index 0000000000..c877376ae7
--- /dev/null
+++ b/src/app/templates/About/links-group-view.tsx
@@ -0,0 +1,30 @@
+import React, { memo } from 'react';
+
+import { SettingsCellGroup } from 'app/atoms/SettingsCellGroup';
+import { InputContainer } from 'app/templates/InputContainer/InputContainer';
+
+import { LinkProps, LinksGroupItem } from './links-group-item';
+
+interface LinksGroup {
+  title: string;
+  links: LinkProps[];
+}
+
+interface LinksGroupViewProps {
+  className?: string;
+  group: LinksGroup;
+}
+
+export const LinksGroupView = memo<LinksGroupViewProps>(({ className, group }) => {
+  const { title, links } = group;
+
+  return (
+    <InputContainer className={className} header={<p className="my-1 text-font-description-bold">{title}</p>}>
+      <SettingsCellGroup>
+        {links.map((link, i) => (
+          <LinksGroupItem key={link.key} item={link} isLast={i === links.length - 1} />
+        ))}
+      </SettingsCellGroup>
+    </InputContainer>
+  );
+});

From 3d7d420aad8143ed4ff7ff2dc419e21c764912fb Mon Sep 17 00:00:00 2001
From: Alex <alexseleznov@madfish.solutions>
Date: Wed, 6 Nov 2024 15:56:33 +0200
Subject: [PATCH 3/3] TW-1578: [evm] Fix lots of failing node requests on large
 accounts (#1222)

---
 .../components/EvmChainCollectiblesTab.tsx           |  3 +++
 .../components/EvmCollectiblesTab.tsx                |  3 +++
 .../components/MultiChainCollectiblesTab.tsx         |  3 +++
 .../CollectiblesTab/components/evm-meta-loading.ts}  | 11 ++++++-----
 src/app/root-hooks/index.tsx                         |  2 --
 src/lib/balances/hooks.ts                            |  3 ++-
 src/temple/evm/index.ts                              | 12 ++++++++++--
 7 files changed, 27 insertions(+), 10 deletions(-)
 rename src/app/{root-hooks/evm/collectibles-metadata-loading.ts => pages/Collectibles/CollectiblesTab/components/evm-meta-loading.ts} (91%)

diff --git a/src/app/pages/Collectibles/CollectiblesTab/components/EvmChainCollectiblesTab.tsx b/src/app/pages/Collectibles/CollectiblesTab/components/EvmChainCollectiblesTab.tsx
index 6b30966575..c162364f39 100644
--- a/src/app/pages/Collectibles/CollectiblesTab/components/EvmChainCollectiblesTab.tsx
+++ b/src/app/pages/Collectibles/CollectiblesTab/components/EvmChainCollectiblesTab.tsx
@@ -7,6 +7,7 @@ import { useEvmChainByChainId } from 'temple/front/chains';
 
 import { EvmCollectibleItem } from './CollectibleItem';
 import { CollectiblesTabBase } from './CollectiblesTabBase';
+import { useEvmCollectiblesMetadataLoading } from './evm-meta-loading';
 
 interface EvmChainCollectiblesTabProps {
   chainId: number;
@@ -22,6 +23,8 @@ export const EvmChainCollectiblesTab = memo<EvmChainCollectiblesTabProps>(({ cha
   const { isInSearchMode, paginatedSlugs, isSyncing, loadNext, searchValue, setSearchValue } =
     useEvmChainCollectiblesListingLogic(publicKeyHash, chainId, manageActive);
 
+  useEvmCollectiblesMetadataLoading(publicKeyHash);
+
   const contentElement = useMemo(
     () => (
       <div className={manageActive ? undefined : 'grid grid-cols-3 gap-2'}>
diff --git a/src/app/pages/Collectibles/CollectiblesTab/components/EvmCollectiblesTab.tsx b/src/app/pages/Collectibles/CollectiblesTab/components/EvmCollectiblesTab.tsx
index d7686d4256..097ef0f6b9 100644
--- a/src/app/pages/Collectibles/CollectiblesTab/components/EvmCollectiblesTab.tsx
+++ b/src/app/pages/Collectibles/CollectiblesTab/components/EvmCollectiblesTab.tsx
@@ -8,6 +8,7 @@ import { useEthereumMainnetChain } from 'temple/front';
 
 import { EvmCollectibleItem } from './CollectibleItem';
 import { CollectiblesTabBase } from './CollectiblesTabBase';
+import { useEvmCollectiblesMetadataLoading } from './evm-meta-loading';
 
 interface EvmCollectiblesTabProps {
   publicKeyHash: HexString;
@@ -22,6 +23,8 @@ export const EvmCollectiblesTab = memo<EvmCollectiblesTabProps>(({ publicKeyHash
   const { isInSearchMode, paginatedSlugs, isSyncing, loadNext, searchValue, setSearchValue } =
     useEvmAccountCollectiblesListingLogic(publicKeyHash, manageActive);
 
+  useEvmCollectiblesMetadataLoading(publicKeyHash);
+
   const contentElement = useMemo(
     () => (
       <div className={manageActive ? undefined : 'grid grid-cols-3 gap-2'}>
diff --git a/src/app/pages/Collectibles/CollectiblesTab/components/MultiChainCollectiblesTab.tsx b/src/app/pages/Collectibles/CollectiblesTab/components/MultiChainCollectiblesTab.tsx
index 65db28c47d..97809a5e05 100644
--- a/src/app/pages/Collectibles/CollectiblesTab/components/MultiChainCollectiblesTab.tsx
+++ b/src/app/pages/Collectibles/CollectiblesTab/components/MultiChainCollectiblesTab.tsx
@@ -8,6 +8,7 @@ import { TempleChainKind } from 'temple/types';
 
 import { EvmCollectibleItem, TezosCollectibleItem } from './CollectibleItem';
 import { CollectiblesTabBase } from './CollectiblesTabBase';
+import { useEvmCollectiblesMetadataLoading } from './evm-meta-loading';
 
 interface MultiChainCollectiblesTabProps {
   accountTezAddress: string;
@@ -23,6 +24,8 @@ export const MultiChainCollectiblesTab = memo<MultiChainCollectiblesTabProps>(
     const { isInSearchMode, paginatedSlugs, isSyncing, loadNext, searchValue, setSearchValue } =
       useAccountCollectiblesListingLogic(accountTezAddress, accountEvmAddress, manageActive);
 
+    useEvmCollectiblesMetadataLoading(accountEvmAddress);
+
     const contentElement = useMemo(
       () => (
         <div className={manageActive ? undefined : 'grid grid-cols-3 gap-2'}>
diff --git a/src/app/root-hooks/evm/collectibles-metadata-loading.ts b/src/app/pages/Collectibles/CollectiblesTab/components/evm-meta-loading.ts
similarity index 91%
rename from src/app/root-hooks/evm/collectibles-metadata-loading.ts
rename to src/app/pages/Collectibles/CollectiblesTab/components/evm-meta-loading.ts
index 12c81b7b50..ac62f6982d 100644
--- a/src/app/root-hooks/evm/collectibles-metadata-loading.ts
+++ b/src/app/pages/Collectibles/CollectiblesTab/components/evm-meta-loading.ts
@@ -1,4 +1,4 @@
-import { memo, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { dispatch } from 'app/store';
 import { setEvmCollectiblesMetadataLoading } from 'app/store/evm/actions';
@@ -14,7 +14,10 @@ import { isSupportedChainId } from 'lib/apis/temple/endpoints/evm/api.utils';
 import { fetchEvmCollectiblesMetadataFromChain } from 'lib/evm/on-chain/metadata';
 import { useEnabledEvmChains } from 'temple/front';
 
-export const AppEvmCollectiblesMetadataLoading = memo<{ publicKeyHash: HexString }>(({ publicKeyHash }) => {
+/** TODO: Might wanna tune this loading logic either via pagination or queueing.
+ * Pagination for Collectibles is planned for the future.
+ */
+export const useEvmCollectiblesMetadataLoading = (publicKeyHash: HexString) => {
   const evmChains = useEnabledEvmChains();
   const isLoading = useEvmCollectiblesMetadataLoadingSelector();
 
@@ -61,6 +64,4 @@ export const AppEvmCollectiblesMetadataLoading = memo<{ publicKeyHash: HexString
       })
     ).then(() => void dispatch(setEvmCollectiblesMetadataLoading(false)));
   }, [evmChains, storedCollectiblesRecord, publicKeyHash]);
-
-  return null;
-});
+};
diff --git a/src/app/root-hooks/index.tsx b/src/app/root-hooks/index.tsx
index 4b918a2231..b321ddd6ec 100644
--- a/src/app/root-hooks/index.tsx
+++ b/src/app/root-hooks/index.tsx
@@ -22,7 +22,6 @@ import { useAccountAddressForEvm, useAccountAddressForTezos } from 'temple/front
 import { AppTezosAssetsLoading } from './assets-loading';
 import { AppTezosBalancesLoading } from './balances-loading';
 import { AppEvmBalancesLoading } from './evm/balances-loading';
-import { AppEvmCollectiblesMetadataLoading } from './evm/collectibles-metadata-loading';
 import { AppEvmTokensExchangeRatesLoading } from './evm/tokens-exchange-rates-loading';
 import { AppEvmTokensMetadataLoading } from './evm/tokens-metadata-loading';
 import { AppTezosTokensMetadataLoading } from './metadata-loading';
@@ -87,7 +86,6 @@ const EvmAccountHooks = memo<{ publicKeyHash: HexString }>(({ publicKeyHash }) =
   <>
     <AppEvmTokensExchangeRatesLoading publicKeyHash={publicKeyHash} />
     <AppEvmTokensMetadataLoading publicKeyHash={publicKeyHash} />
-    <AppEvmCollectiblesMetadataLoading publicKeyHash={publicKeyHash} />
     <AppEvmBalancesLoading publicKeyHash={publicKeyHash} />
   </>
 ));
diff --git a/src/lib/balances/hooks.ts b/src/lib/balances/hooks.ts
index c9fb4ffd31..086ac3ea9a 100644
--- a/src/lib/balances/hooks.ts
+++ b/src/lib/balances/hooks.ts
@@ -245,7 +245,8 @@ function useEvmAssetRawBalance(
       refreshBalanceOnChain();
     },
     [usingStore, refreshBalanceOnChain],
-    EVM_BALANCES_SYNC_INTERVAL
+    EVM_BALANCES_SYNC_INTERVAL,
+    false
   );
 
   if (usingStore)
diff --git a/src/temple/evm/index.ts b/src/temple/evm/index.ts
index 6fe06a4f53..9ff2875f16 100644
--- a/src/temple/evm/index.ts
+++ b/src/temple/evm/index.ts
@@ -1,5 +1,5 @@
 import memoizee from 'memoizee';
-import { Transport, Chain, createPublicClient, http, PublicClient } from 'viem';
+import { Transport, Chain, createPublicClient, http, PublicClient, HttpTransportConfig } from 'viem';
 
 import { rejectOnTimeout } from 'lib/utils';
 import { EvmChain } from 'temple/front';
@@ -7,10 +7,18 @@ import { MAX_MEMOIZED_TOOLKITS } from 'temple/misc';
 
 import { getViemChainsList } from './utils';
 
+/** See: https://viem.sh/docs/clients/transports/http */
+const READ_ONLY_CLIENT_TRANSPORT_CONFIG: HttpTransportConfig = {
+  /** Defaults to 3 */
+  retryCount: 1,
+  /** Defaults to 150 */
+  retryDelay: 300
+};
+
 export const getReadOnlyEvm = memoizee(
   (rpcUrl: string): PublicClient =>
     createPublicClient({
-      transport: http(rpcUrl)
+      transport: http(rpcUrl, READ_ONLY_CLIENT_TRANSPORT_CONFIG)
     }),
   { max: MAX_MEMOIZED_TOOLKITS }
 );