TW-1548: Redesign 'Advanced Features' section (#1205)

* TW-1548 Redesign 'Advanced Features' section

* TW-1548 Some refactoring

* TW-1548 Remove old EnablingSetting component

* TW-1548 Remove unused exports

* TW-1548 Refactoring according to comments

e2e/src/page-objects/pages/general-settings.page.ts

@@ -12,7 +12,6 @@ export class GeneralSettingsPage extends Page {
   extensionLockUpCheckBox = createPageElement(SettingsGeneralSelectors.extensionLockUpCheckBox);
   anonymousAnalyticsCheckBox = createPageElement(SettingsGeneralSelectors.anonymousAnalyticsCheckBox);
   notificationCheckBox = createPageElement(SettingsGeneralSelectors.notificationCheckBox);
-  partnersPromotion = createPageElement(SettingsGeneralSelectors.partnersPromotion);
 
   async isVisible() {
     await this.languageDropDown.waitForDisplayed();
@@ -21,6 +20,5 @@ export class GeneralSettingsPage extends Page {
     await this.extensionLockUpCheckBox.waitForDisplayed();
     await this.anonymousAnalyticsCheckBox.waitForDisplayed();
     await this.notificationCheckBox.waitForDisplayed();
-    await this.partnersPromotion.waitForDisplayed();
   }
 }

public/_locales/en/messages.json

@@ -2150,8 +2150,14 @@
   "actionConfirmation": {
     "message": "Confirm the action"
   },
-  "closePartnersPromotion": {
-    "message": "Are you sure you want to disable all ads?"
+  "adsEnabledAlertTitle": {
+    "message": "Earn TKEY & Support Temple"
+  },
+  "adsEnabledAlertDescription": {
+    "message": "Congrats, you've started earning TKEY tokens!\nBy enabling this feature, you agreed to share your Wallet address and IP to receive tokens and view ads. You can turn ads off or on anytime in the settings."
+  },
+  "disableAdsModalTitle": {
+    "message": "Disable advertising?"
   },
   "hideAd": {
     "message": "Hide Ad"
@@ -2599,8 +2605,8 @@
   "deleteContactConfirm": {
     "message": "Are you sure you want to delete this contact?"
   },
-  "closePartnersPromoConfirm": {
-    "message": "Pay attention: you can receive rewards in TKEY tokens for viewing ads in our wallet. If you disabled Ads, you can always activate it in the settings."
+  "disableAdsModalDescription": {
+    "message": "Did you know, you can earn TKEY tokens by viewing ads? If ads are turned off, you can easily enable them anytime in the settings and start earning rewards!"
   },
   "enablePartnersPromotionConfirm": {
     "message": "Support the development team and earn TKEY tokens by viewing ads."
@@ -2807,12 +2813,7 @@
     "description": "Part of partnersPromoDescription phrase"
   },
   "partnersPromoDescription": {
-    "message": "Here you can configure displaying of ads in Temple wallet. Remember, you get $rewards$ at TKEY tokens for viewing ads.",
-    "placeholders": {
-      "rewards": {
-        "content": "$1"
-      }
-    }
+    "message": "Here you can configure displaying ads in Temple Wallet and getting reward in TKEY tokens. By enabling this, you agree to share your wallet address and IP to receive tokens and view ads."
   },
   "referralLinks": {
     "message": "Referral Links"

src/app/atoms/BakingButtons/index.tsx

@@ -116,8 +116,7 @@ const RedelegateButtonWithConfirmation = memo<RedelegateButtonWithConfirmationPr
           title: 'You have active staking',
           description:
             'After re-delegation, your active stake with current baker will be requested to unstake. New stake will be available after the unstake cooldown period ends.',
-          comfirmButtonText: `${t('reDelegate')} & Unstake`,
-          stretchButtons: true
+          confirmButtonText: `${t('reDelegate')} & Unstake`
         }).then(confirmed => {
           if (confirmed) navigate(`/delegate/${chainId}`);
         }),

src/app/atoms/FormCheckbox.tsx

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import Checkbox, { CheckboxProps } from 'app/atoms/Checkbox';
 import { AnalyticsEventCategory, setTestID, useAnalytics } from 'lib/analytics';
 
-export interface FormCheckboxProps extends CheckboxProps {
+interface FormCheckboxProps extends CheckboxProps {
   basic?: boolean;
   label?: ReactNode;
   labelDescription?: ReactNode;

src/app/atoms/SettingsCell.tsx

@@ -11,6 +11,7 @@ interface SettingsCellPropsBase<P extends ComponentBase = ComponentBase> {
   isLast?: boolean;
   cellIcon?: ReactNode;
   cellName: ReactNode;
+  cellNameClassName?: string;
   Component: 'div' | FC<P>;
 }
 
@@ -28,6 +29,7 @@ export const SettingsCell = <P extends ComponentBase>({
   className,
   cellIcon,
   cellName,
+  cellNameClassName = 'text-font-medium-bold',
   isLast = true,
   children,
   Component,
@@ -41,7 +43,7 @@ export const SettingsCell = <P extends ComponentBase>({
       <div className="flex items-center gap-2">
         {cellIcon}
 
-        <span className="text-font-medium-bold">{cellName}</span>
+        <span className={cellNameClassName}>{cellName}</span>
       </div>
 
       {children}

src/app/atoms/action-modal/action-modal.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { ReactNode, memo } from 'react';
 
 import clsx from 'clsx';
 
@@ -14,11 +14,11 @@ import {
 
 import actionModalStyles from './action-modal.module.css';
 
-interface ActionModalProps {
+export interface ActionModalProps {
   hasCloseButton?: boolean;
   onClose?: EmptyFn;
-  children: JSX.Element | JSX.Element[];
-  title: string;
+  children?: ReactNode | ReactNode[];
+  title?: ReactNode;
   className?: string;
 }
 

src/app/atoms/index.ts

@@ -37,7 +37,6 @@ export { FormSubmitButton } from './FormSubmitButton';
 
 export { FormSecondaryButton } from './FormSecondaryButton';
 
-export type { FormCheckboxProps } from './FormCheckbox';
 export { FormCheckbox } from './FormCheckbox';
 
 export { SyncSpinner } from './SyncSpinner';

src/app/layouts/Dialogs.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useCallback } from 'react';
 
-import AlertModal from 'app/templates/AlertModal';
-import ConfirmationModal from 'app/templates/ConfirmationModal/ConfirmationModal';
+import { AlertModal } from 'app/templates/AlertModal';
+import { ConfirmationModal } from 'app/templates/ConfirmationModal/ConfirmationModal';
 import { dispatchAlertClose, dispatchConfirmClose, useModalsParams } from 'lib/ui/dialog';
 
 const Dialogs: FC = () => {
@@ -17,12 +17,8 @@ const Dialogs: FC = () => {
 
   return (
     <>
-      <ConfirmationModal
-        {...confirmParams}
-        onRequestClose={handleConfirmationModalClose}
-        onConfirm={handleConfirmation}
-      />
-      <AlertModal {...alertParams} onRequestClose={dispatchAlertClose} />
+      <ConfirmationModal {...confirmParams} onClose={handleConfirmationModalClose} onConfirm={handleConfirmation} />
+      <AlertModal {...alertParams} onClose={dispatchAlertClose} />
     </>
   );
 };

src/app/pages/Home/OtherComponents/Tokens/components/TokenTag/ScamTag.tsx

@@ -25,9 +25,8 @@ export const ScamTag = memo<Props>(({ assetSlug, tezPkh, tezosChainId }) => {
       try {
         const confirmed = await confirm({
           title: t('deleteScamTokenConfirmTitle'),
-          titleClassName: 'font-bold',
           description: t('deleteScamTokenConfirmDescription'),
-          comfirmButtonText: t('delete')
+          confirmButtonText: t('delete')
         });
 
         if (confirmed)

src/app/templates/AccountsManagement/account-already-exists-warning.tsx

@@ -6,7 +6,7 @@ import {
   ActionModalButton,
   ActionModalButtonsContainer
 } from 'app/atoms/action-modal';
-import { t } from 'lib/i18n';
+import { T } from 'lib/i18n';
 import { DisplayedGroup, StoredAccount } from 'lib/temple/types';
 import { useHDGroups } from 'temple/front';
 import { getAllGroups } from 'temple/front/accounts-groups';
@@ -25,10 +25,10 @@ export const AccountAlreadyExistsWarning = memo<AccountAlreadyExistsWarningProps
     const oldAccountGroupName = useMemo(() => getAllGroups(hdGroups, [oldAccount])[0].name, [hdGroups, oldAccount]);
 
     return (
-      <ActionModal title={t('addAccount')} hasCloseButton={false} onClose={onClose}>
+      <ActionModal title={<T id="addAccount" />} hasCloseButton={false} onClose={onClose}>
         <ActionModalBodyContainer>
-          <span className="w-full text-center text-font-description text-gray-600">
-            {t('accountAlreadyExistsWarning', [newAccountGroup.name, oldAccountGroupName])}
+          <span className="w-full text-center text-font-description text-grey-1">
+            <T id="accountAlreadyExistsWarning" substitutions={[newAccountGroup.name, oldAccountGroupName]} />
           </span>
         </ActionModalBodyContainer>
         <ActionModalButtonsContainer>
@@ -38,7 +38,7 @@ export const AccountAlreadyExistsWarning = memo<AccountAlreadyExistsWarningProps
             onClick={onClose}
             testID={AccountsManagementSelectors.gotItButton}
           >
-            Got it
+            <T id="okGotIt" />
           </ActionModalButton>
         </ActionModalButtonsContainer>
       </ActionModal>

src/app/templates/AdvancedFeatures/index.tsx

@@ -5,7 +5,7 @@ import { ReferralLinksSettings } from './referral-links-settings';
 
 export const AdvancedFeatures = memo(() => {
   return (
-    <div className="w-full max-w-sm mx-auto my-8">
+    <div className="w-full flex flex-col gap-4">
       <PartnersPromotionSettings />
 
       <ReferralLinksSettings />

src/app/templates/AdvancedFeatures/partners-promotion-settings.tsx

@@ -1,44 +1,50 @@
-import React, { ChangeEvent, FC } from 'react';
+import React, { ChangeEvent, memo, useCallback } from 'react';
 
 import { useDispatch } from 'react-redux';
 
 import { togglePartnersPromotionAction } from 'app/store/partners-promotion/actions';
 import { useShouldShowPartnersPromoSelector } from 'app/store/partners-promotion/selectors';
-import { T, t } from 'lib/i18n';
-import { useConfirm } from 'lib/ui/dialog';
+import { T } from 'lib/i18n';
+import { useAlert, useConfirm } from 'lib/ui/dialog';
 
-import { EnablingSetting } from '../EnablingSetting';
-import { SettingsGeneralSelectors } from '../SettingsGeneral/selectors';
+import { EnablingSetting } from '../enabling-setting';
 
-export const PartnersPromotionSettings: FC = () => {
+import { AdvancedFeaturesSelectors } from './selectors';
+
+export const PartnersPromotionSettings = memo(() => {
   const dispatch = useDispatch();
+  const alert = useAlert();
   const confirm = useConfirm();
 
   const shouldShowPartnersPromo = useShouldShowPartnersPromoSelector();
 
-  const handleHidePromotion = async (toChecked: boolean) => {
-    const confirmed = await confirm({
-      title: t('closePartnersPromotion'),
-      children: t('closePartnersPromoConfirm'),
-      comfirmButtonText: t('disable')
-    });
+  const handleHidePromotion = useCallback(
+    async (toChecked: boolean) => {
+      const confirmed = await confirm({
+        title: <T id="disableAdsModalTitle" />,
+        description: <T id="disableAdsModalDescription" />,
+        confirmButtonText: (
+          <span className="capitalize">
+            <T id="disable" />
+          </span>
+        ),
+        hasCloseButton: false
+      });
 
-    if (confirmed) {
-      dispatch(togglePartnersPromotionAction(toChecked));
-    }
-  };
-
-  const handleShowPromotion = async (toChecked: boolean) => {
-    const confirmed = await confirm({
-      title: t('enablePartnersPromotionConfirm'),
-      children: t('enablePartnersPromotionDescriptionConfirm'),
-      comfirmButtonText: t('enable')
-    });
+      if (confirmed) {
+        dispatch(togglePartnersPromotionAction(toChecked));
+      }
+    },
+    [confirm, dispatch]
+  );
 
-    if (confirmed) {
+  const handleShowPromotion = useCallback(
+    async (toChecked: boolean) => {
       dispatch(togglePartnersPromotionAction(toChecked));
-    }
-  };
+      alert({ title: <T id="adsEnabledAlertTitle" />, description: <T id="adsEnabledAlertDescription" /> });
+    },
+    [alert, dispatch]
+  );
 
   const togglePartnersPromotion = (toChecked: boolean, event: ChangeEvent<HTMLInputElement>) => {
     event?.preventDefault();
@@ -49,15 +55,10 @@ export const PartnersPromotionSettings: FC = () => {
   return (
     <EnablingSetting
       titleI18nKey="partnersPromoSettings"
-      descriptionI18nKey="partnersPromoDescription"
-      descriptionSubstitutions={
-        <span className="font-semibold">
-          <T id="rewards" />
-        </span>
-      }
+      description={<T id="partnersPromoDescription" />}
       enabled={shouldShowPartnersPromo}
       onChange={togglePartnersPromotion}
-      testID={SettingsGeneralSelectors.partnersPromotion}
+      testID={AdvancedFeaturesSelectors.partnersPromotionToggle}
     />
   );
-};
+});

src/app/templates/AdvancedFeatures/referral-links-settings.tsx

@@ -15,7 +15,7 @@ import { t, T } from 'lib/i18n';
 import { putToStorage } from 'lib/storage';
 import { useConfirm } from 'lib/ui/dialog';
 
-import { EnablingSetting } from '../EnablingSetting';
+import { EnablingSetting } from '../enabling-setting';
 
 import { AdvancedFeaturesSelectors } from './selectors';
 
@@ -38,6 +38,7 @@ export const ReferralLinksSettings = memo(() => {
               substitutions={[
                 <a
                   href={TERMS_OF_USE_URL}
+                  key="termsLink"
                   target="_blank"
                   rel="noopener noreferrer"
                   className="underline text-secondary"
@@ -46,6 +47,7 @@ export const ReferralLinksSettings = memo(() => {
                 </a>,
                 <a
                   href={PRIVACY_POLICY_URL}
+                  key="privacyPolicyLink"
                   target="_blank"
                   rel="noopener noreferrer"
                   className="underline text-secondary"
@@ -55,7 +57,7 @@ export const ReferralLinksSettings = memo(() => {
               ]}
             />
           ),
-          comfirmButtonText: t('agreeAndContinue')
+          confirmButtonText: t('agreeAndContinue')
         });
 
         if (!confirmed) {
@@ -73,10 +75,10 @@ export const ReferralLinksSettings = memo(() => {
   return (
     <EnablingSetting
       titleI18nKey="referralLinks"
-      descriptionI18nKey="referralLinksDescription"
+      description={<T id="referralLinksDescription" />}
       enabled={referralLinksEnabled}
       onChange={toggleReferralLinks}
-      testID={AdvancedFeaturesSelectors.referralLinksCheckbox}
+      testID={AdvancedFeaturesSelectors.referralLinksToggle}
     />
   );
 });

src/app/templates/AdvancedFeatures/selectors.ts

@@ -1,3 +1,4 @@
 export enum AdvancedFeaturesSelectors {
-  referralLinksCheckbox = 'Advanced Features/Referral Links Checkbox'
+  referralLinksToggle = 'Advanced Features/Referral Links Toggle',
+  partnersPromotionToggle = 'Advanced Features/Partners Promotion Toggle'
 }