Merge branch 'refs/heads/development-2' into TW-1385-gas-token-send-r…

…eceive

# Conflicts:
#	src/lib/temple/front/client.ts
#	yarn.lock

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

@@ -4,21 +4,17 @@ import { Page } from '../../classes/page.class';
 import { createPageElement } from '../../utils/search.utils';
 
 export class GeneralSettingsPage extends Page {
-  languageitem = createPageElement(SettingsGeneralSelectors.languageitem);
+  languageitem = createPageElement(SettingsGeneralSelectors.languageItem);
   languageDropDown = createPageElement(SettingsGeneralSelectors.languageDropDown);
   currencyItem = createPageElement(SettingsGeneralSelectors.currencyItem);
-  currenctyDropDown = createPageElement(SettingsGeneralSelectors.currenctyDropDown);
+  currencyDropDown = createPageElement(SettingsGeneralSelectors.currencyDropDown);
   popUpCheckBox = createPageElement(SettingsGeneralSelectors.popUpCheckBox);
-  extensionLockUpCheckBox = createPageElement(SettingsGeneralSelectors.extensionLockUpCheckBox);
-  anonymousAnalyticsCheckBox = createPageElement(SettingsGeneralSelectors.anonymousAnalyticsCheckBox);
   notificationCheckBox = createPageElement(SettingsGeneralSelectors.notificationCheckBox);
 
   async isVisible() {
     await this.languageDropDown.waitForDisplayed();
-    await this.currenctyDropDown.waitForDisplayed();
+    await this.currencyDropDown.waitForDisplayed();
     await this.popUpCheckBox.waitForDisplayed();
-    await this.extensionLockUpCheckBox.waitForDisplayed();
-    await this.anonymousAnalyticsCheckBox.waitForDisplayed();
     await this.notificationCheckBox.waitForDisplayed();
   }
 }

public/_locales/en/messages.json

@@ -295,11 +295,11 @@
   "usageAnalytics": {
     "message": "Usage Analytics"
   },
-  "analyticsCollecting": {
-    "message": "anonymous information collecting"
+  "usageAnalyticsSettingsDescription": {
+    "message": "Here you can configure sending of usage analytics that helps us to improve the Temple."
   },
-  "anonymousAnalytics": {
-    "message": "Anonymous analytics"
+  "never": {
+    "message": "Never"
   },
   "analyticsInputDescription": {
     "message": "By enabling this checkbox, you help Temple improve products and services by allowing analytics of usage data."
@@ -2801,11 +2801,8 @@
   "deleteTokenConfirm": {
     "message": "Are you sure you want to delete this token?"
   },
-  "lockUpSettings": {
-    "message": "Extension lock-up"
-  },
-  "lockUpSettingsDescription": {
-    "message": "The extension will be automatically blocked after 5 minutes of inactivity."
+  "autoLock": {
+    "message": "Auto-Lock"
   },
   "partnersPromoSettings": {
     "message": "Advertising"
@@ -3271,7 +3268,12 @@
     "message": "Cashback"
   },
   "swapCashbackDescription": {
-    "message": "Swap more than 10$ and receive 0.175% from the swapped amount in the TKEY token as a cashback"
+    "message": "Swap more than 10$$ and receive $text$% from the swapped amount in the TKEY token as a cashback",
+    "placeholders": {
+      "text": {
+        "content": "$1"
+      }
+    }
   },
   "jumpInTezos": {
     "message": "Jump in Tezos right now!"

public/_locales/en_GB/messages.json

@@ -1660,7 +1660,12 @@
     "message": "Cashback"
   },
   "swapCashbackDescription": {
-    "message": "Swap more than 10$ and receive 0.175% from the swapped amount in the TKEY token as a cashback"
+    "message": "Swap more than 10$$ and receive $text$% from the swapped amount in the TKEY token as a cashback",
+    "placeholders": {
+      "text": {
+        "content": "$1"
+      }
+    }
   },
   "subscribeToNewsletter": {
     "message": "Subscribe to our Newsletter"

public/_locales/uk/messages.json

@@ -110,9 +110,6 @@
   "lock": {
     "message": "Заблокувати"
   },
-  "lockUpSettingsDescription": {
-    "message": "Розширення буде заблоковане після 5 хвилин відсутності активності."
-  },
   "importedAccount": {
     "message": "Імпортований"
   },

src/app/App.tsx

@@ -1,7 +1,6 @@
 import React, { PropsWithChildren, ComponentProps, FC, Suspense } from 'react';
 
 import 'lib/local-storage/migrations';
-import 'lib/lock-up/run-checks';
 import 'lib/ledger/proxy/foreground';
 import 'lib/keep-bg-worker-alive/script';
 

src/app/pages/Home/OtherComponents/Tokens/components/TermsOfUseUpdateOverlay/index.tsx

@@ -14,8 +14,15 @@ import {
   setReferralLinksEnabledAction,
   setShowAgreementsCounterAction
 } from 'app/store/settings/actions';
-import { MAX_SHOW_AGREEMENTS_COUNTER, PRIVACY_POLICY_URL, RECENT_TERMS_VERSION, TERMS_OF_USE_URL } from 'lib/constants';
+import {
+  MAX_SHOW_AGREEMENTS_COUNTER,
+  PRIVACY_POLICY_URL,
+  RECENT_TERMS_VERSION,
+  REPLACE_REFERRALS_ENABLED,
+  TERMS_OF_USE_URL
+} from 'lib/constants';
 import { t, T } from 'lib/i18n';
+import { putToStorage } from 'lib/storage';
 
 import AdvancedFeaturesIllustration from './advanced-features-illustration.png';
 import IllustrationBgFull from './illustration-bg-full.png';
@@ -49,6 +56,7 @@ export const TermsOfUseUpdateOverlay = memo<TermsOfUseUpdateOverlayProps>(({ onC
   const onSubmit = useCallback(() => {
     dispatch(setAcceptedTermsVersionAction(RECENT_TERMS_VERSION));
     dispatch(setReferralLinksEnabledAction(true));
+    putToStorage<boolean>(REPLACE_REFERRALS_ENABLED, true);
     handleClose();
   }, [dispatch, handleClose]);
 

src/app/pages/Settings/Settings.tsx

@@ -21,6 +21,7 @@ import { AccountsManagement } from 'app/templates/AccountsManagement';
 import AddressBook from 'app/templates/AddressBook/AddressBook';
 import { AdvancedFeatures } from 'app/templates/AdvancedFeatures';
 import DAppSettings from 'app/templates/DAppSettings/DAppSettings';
+import { SecuritySettings } from 'app/templates/SecuritySettings';
 import GeneralSettings from 'app/templates/SettingsGeneral';
 import SyncSettings from 'app/templates/Synchronization/SyncSettings';
 import { TID, T } from 'lib/i18n';
@@ -80,7 +81,7 @@ const TABS_GROUPS: Tab[][] = [
       slug: 'security-and-privacy',
       titleI18nKey: 'securityAndPrivacy',
       Icon: DefaultSettingsIconHOC(LockIcon),
-      Component: () => <div>TODO: add some content</div>,
+      Component: SecuritySettings,
       testID: SettingsSelectors.securityAndPrivacyButton
     }
   ],

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

@@ -54,7 +54,7 @@ export const PartnersPromotionSettings = memo(() => {
 
   return (
     <EnablingSetting
-      titleI18nKey="partnersPromoSettings"
+      title={<T id="partnersPromoSettings" />}
       description={<T id="partnersPromoDescription" />}
       enabled={shouldShowPartnersPromo}
       onChange={togglePartnersPromotion}

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

@@ -74,7 +74,7 @@ export const ReferralLinksSettings = memo(() => {
 
   return (
     <EnablingSetting
-      titleI18nKey="referralLinks"
+      title={<T id="referralLinks" />}
       description={<T id="referralLinksDescription" />}
       enabled={referralLinksEnabled}
       onChange={toggleReferralLinks}

src/app/templates/SecuritySettings/auto-lock-select.tsx

@@ -0,0 +1,67 @@
+import React, { memo, useCallback, useMemo } from 'react';
+
+import { startCase } from 'lodash';
+
+import { IconBase } from 'app/atoms';
+import { ReactComponent as LocktimeIcon } from 'app/icons/base/locktime.svg';
+import { NEVER_AUTOLOCK_VALUE } from 'lib/constants';
+import { t } from 'lib/i18n';
+import { formatDuration } from 'lib/i18n/core';
+import { useLockUpTimeout } from 'lib/lock-up';
+import { SearchKey } from 'lib/utils/search-items';
+
+import { CellPartProps, NullComponent, SelectWithModal } from '../select-with-modal';
+
+import { SecuritySettingsSelectors } from './selectors';
+
+interface DurationOption {
+  value: number;
+  label: string;
+}
+
+const durationOptionsValues = [Infinity, 60, 5 * 60, 30 * 60, 60 * 60, 5 * 60 * 60];
+const DEFAULT_OPTION_INDEX = 2;
+const SEARCH_KEYS: Array<SearchKey<DurationOption, null>> = [];
+const durationOptionKeyFn = ({ value }: DurationOption) => value;
+
+const CellName = ({ option: { label } }: CellPartProps<DurationOption>) => <span>{label}</span>;
+const AutoLockIcon = () => <IconBase size={16} Icon={LocktimeIcon} className="text-primary" />;
+
+export const AutoLockSelect = memo(() => {
+  const [timeoutDurationMs, setTimeoutDurationMs] = useLockUpTimeout();
+  const options = useMemo(
+    () =>
+      durationOptionsValues.map(value => ({
+        value,
+        label: Number.isFinite(value) ? startCase(formatDuration(value)) : t('never')
+      })),
+    []
+  );
+  const value = useMemo(
+    () =>
+      options.find(({ value }) =>
+        Number.isFinite(value) ? value * 1000 === timeoutDurationMs : timeoutDurationMs === NEVER_AUTOLOCK_VALUE
+      ) ?? options[DEFAULT_OPTION_INDEX],
+    [options, timeoutDurationMs]
+  );
+  const handleAutoLockOptionSelect = useCallback(
+    ({ value }: DurationOption) => setTimeoutDurationMs(Number.isFinite(value) ? value * 1000 : NEVER_AUTOLOCK_VALUE),
+    [setTimeoutDurationMs]
+  );
+
+  return (
+    <SelectWithModal
+      title={t('autoLock')}
+      options={options}
+      value={value}
+      searchKeys={SEARCH_KEYS}
+      keyFn={durationOptionKeyFn}
+      CellIcon={AutoLockIcon}
+      ModalCellIcon={NullComponent}
+      CellName={CellName}
+      onSelect={handleAutoLockOptionSelect}
+      testID={SecuritySettingsSelectors.autoLockTimeDropDown}
+      itemTestID={SecuritySettingsSelectors.autoLockTimeItem}
+    />
+  );
+});

src/app/templates/SecuritySettings/index.tsx

@@ -0,0 +1,12 @@
+import React, { memo } from 'react';
+
+import { AutoLockSelect } from './auto-lock-select';
+import { UsageAnalyticsSettings } from './usage-analytics-settings';
+
+export const SecuritySettings = memo(() => (
+  <div className="w-full flex flex-col gap-6">
+    <AutoLockSelect />
+
+    <UsageAnalyticsSettings />
+  </div>
+));

src/app/templates/SecuritySettings/selectors.ts

@@ -0,0 +1,5 @@
+export enum SecuritySettingsSelectors {
+  autoLockTimeItem = 'Security Settings/Auto Lock Time Item',
+  autoLockTimeDropDown = 'Security Settings/Auto Lock Time Drop-down',
+  usageAnalyticsToggle = 'Security Settings/Usage Analytics Toggle'
+}

src/app/templates/SecuritySettings/usage-analytics-settings.tsx

@@ -0,0 +1,28 @@
+import React, { memo, useCallback } from 'react';
+
+import { useDispatch } from 'react-redux';
+
+import { setIsAnalyticsEnabledAction } from 'app/store/settings/actions';
+import { useAnalyticsEnabledSelector } from 'app/store/settings/selectors';
+import { T } from 'lib/i18n';
+
+import { EnablingSetting } from '../enabling-setting';
+
+import { SecuritySettingsSelectors } from './selectors';
+
+export const UsageAnalyticsSettings = memo(() => {
+  const dispatch = useDispatch();
+  const enabled = useAnalyticsEnabledSelector();
+
+  const handleSwitch = useCallback((newValue: boolean) => dispatch(setIsAnalyticsEnabledAction(newValue)), [dispatch]);
+
+  return (
+    <EnablingSetting
+      title={<T id="usageAnalytics" />}
+      enabled={enabled}
+      description={<T id="usageAnalyticsSettingsDescription" />}
+      onChange={handleSwitch}
+      testID={SecuritySettingsSelectors.usageAnalyticsToggle}
+    />
+  );
+});

src/app/templates/SettingsGeneral/components/fiat-currency-select/currency-icon.tsx

@@ -1,9 +1,8 @@
 import React, { memo } from 'react';
 
+import { CellPartProps } from 'app/templates/select-with-modal';
 import { FiatCurrencyOption } from 'lib/fiat-currency';
 
-import { CellPartProps } from '../select-with-modal';
-
 export const CurrencyIcon = memo<CellPartProps<FiatCurrencyOption>>(({ option: { symbol } }) => (
   <div className="w-6 h-6 flex items-center justify-center bg-white border border-lines shadow-bottom rounded-full">
     <span className="text-grey-1 leading-5 font-medium text-[13px]">{symbol}</span>

src/app/templates/SettingsGeneral/components/fiat-currency-select/index.tsx

@@ -1,5 +1,6 @@
 import React, { memo, useCallback, useMemo } from 'react';
 
+import { CellPartProps, SelectWithModal } from 'app/templates/select-with-modal';
 import { AnalyticsEventCategory, AnalyticsEventEnum, useAnalytics } from 'lib/analytics';
 import {
   FIAT_CURRENCIES_BASE,
@@ -11,7 +12,6 @@ import {
 import { t } from 'lib/i18n';
 
 import { SettingsGeneralSelectors } from '../../selectors';
-import { CellPartProps, SelectWithModal } from '../select-with-modal';
 
 import { CurrencyIcon } from './currency-icon';
 
@@ -64,7 +64,7 @@ export const FiatCurrencySelect = memo(() => {
       CellIcon={CurrencyIcon}
       CellName={CellName}
       onSelect={handleCurrencyChange}
-      testID={SettingsGeneralSelectors.currenctyDropDown}
+      testID={SettingsGeneralSelectors.currencyDropDown}
       itemTestID={SettingsGeneralSelectors.currencyItem}
     />
   );

src/app/templates/SettingsGeneral/components/locale-select/index.tsx

@@ -1,10 +1,10 @@
 import React, { memo, useCallback, useMemo } from 'react';
 
+import { CellPartProps, SelectWithModal } from 'app/templates/select-with-modal';
 import { AnalyticsEventCategory, AnalyticsEventEnum, useAnalytics } from 'lib/analytics';
 import { getCurrentLocale, t, updateLocale } from 'lib/i18n';
 
 import { SettingsGeneralSelectors } from '../../selectors';
-import { CellPartProps, SelectWithModal } from '../select-with-modal';
 
 import { LocaleIcon } from './locale-icon';
 import { LOCALE_OPTIONS, LocaleOption } from './options';
@@ -50,7 +50,7 @@ export const LocaleSelect = memo(() => {
       CellName={CellName}
       onSelect={handleLocaleChange}
       testID={SettingsGeneralSelectors.languageDropDown}
-      itemTestID={SettingsGeneralSelectors.languageitem}
+      itemTestID={SettingsGeneralSelectors.languageItem}
     />
   );
 });

src/app/templates/SettingsGeneral/components/locale-select/locale-icon.tsx

@@ -3,8 +3,7 @@ import React, { memo } from 'react';
 import browser from 'webextension-polyfill';
 
 import Flag from 'app/atoms/Flag';
-
-import { CellPartProps } from '../select-with-modal';
+import { CellPartProps } from 'app/templates/select-with-modal';
 
 import { LocaleOption } from './options';
 

src/app/templates/SettingsGeneral/components/notifications-settings.tsx

@@ -20,7 +20,7 @@ export const NotificationsSettings = memo(() => {
 
   return (
     <EnablingSetting
-      titleI18nKey="notifications"
+      title={<T id="notifications" />}
       description={<T id="notificationsSettingsDescription" />}
       enabled={isNewsEnabled}
       onChange={handleNewsNotificationsChange}

src/app/templates/SettingsGeneral/components/popup-settings.tsx

@@ -1,9 +1,9 @@
 import React, { memo, useCallback, useRef } from 'react';
 
-import { EnablingSetting } from 'app/templates/enabling-setting';
 import { T } from 'lib/i18n';
 import { isPopupModeEnabled, setPopupMode } from 'lib/popup-mode';
 
+import { EnablingSetting } from '../../enabling-setting';
 import { SettingsGeneralSelectors } from '../selectors';
 
 export const PopupSettings = memo(() => {
@@ -21,7 +21,7 @@ export const PopupSettings = memo(() => {
 
   return (
     <EnablingSetting
-      titleI18nKey="popupSettings"
+      title={<T id="popupSettings" />}
       description={<T id="popupSettingsDescription" />}
       enabled={popupEnabled}
       onChange={handlePopupModeChange}

src/app/templates/SettingsGeneral/selectors.ts

@@ -1,10 +1,9 @@
 export enum SettingsGeneralSelectors {
-  languageitem = 'Settings General/Language Item',
+  languageItem = 'Settings General/Language Item',
   languageDropDown = 'Settings General/Language Drop-down',
   currencyItem = 'Settings General/Currency Item',
-  currenctyDropDown = 'Settings General/Currency Drop-down',
+  currencyDropDown = 'Settings General/Currency Drop-down',
   popUpCheckBox = 'Setting General/Pop-up Check Box',
-  extensionLockUpCheckBox = 'Setting General/Extension Lock-up Check Box',
-  anonymousAnalyticsCheckBox = 'Setting General/Anonymous Analytics Check Box',
-  notificationCheckBox = 'Setting General/Notification Check Box'
+  notificationCheckBox = 'Setting General/Notification Check Box',
+  partnersPromotion = 'Setting General/Partners Promotion Check Box'
 }