TW-1569 Redesign 'Unlock Wallet' screen

public/_locales/en/messages.json

@@ -1019,6 +1019,35 @@
   "info": {
     "message": "Info"
   },
+  "welcomeBack": {
+    "message": "Welcome Back to Temple"
+  },
+  "enterPasswordToUnlock": {
+    "message": "Enter your password to unlock wallet"
+  },
+  "forgotPasswordQuestion": {
+    "message": "Forgot password?"
+  },
+  "forgotPasswordModalTitle": {
+    "message": "Forgot password"
+  },
+  "forgotPasswordModalDescription": {
+    "message": "For safety reasons, Temple never stores your password and can’t help recover it. If you forgot your password, you can reset extension and re-import your wallet using your Seed Phrase without losing any funds."
+  },
+  "unlockScreenResetModalAlertText": {
+    "message": "Before you continue, ensure you have a back up of your Seed Phrase to avoid permanent loss of your funds and recover access later."
+  },
+  "unlockScreenResetModalDescription": {
+    "message": "If you reset the extension without Seed Phrase back up, you'll not be able to recover your funds."
+  },
+  "walletTemporarilyBlockedError": {
+    "message": "Incorrect password entered $attempts$ times. Wallet temporarily blocked for safety reason.",
+    "placeholders": {
+      "attempts": {
+        "content": "$1"
+      }
+    }
+  },
   "unlockWallet": {
     "message": "Unlock the Wallet"
   },

src/app/atoms/NetworkLogo.tsx

@@ -23,13 +23,14 @@ interface TezosNetworkLogoProps {
   networkName: string;
   chainId: string;
   size?: number;
+  className?: string;
 }
 
-export const TezosNetworkLogo = memo<TezosNetworkLogoProps>(({ networkName, chainId, size = 16 }) =>
+export const TezosNetworkLogo = memo<TezosNetworkLogoProps>(({ className, networkName, chainId, size = 16 }) =>
   chainId === TEZOS_MAINNET_CHAIN_ID ? (
-    <TezNetworkLogo size={size} />
+    <TezNetworkLogo size={size} className={className} />
   ) : (
-    <NetworkLogoFallback networkName={networkName} size={size} />
+    <NetworkLogoFallback networkName={networkName} size={size} className={className} />
   )
 );
 

src/app/atoms/ScrollView.tsx

@@ -1,49 +1,21 @@
-import React, { FC, UIEventHandler, useCallback, useMemo, useRef } from 'react';
+import React, { FC, UIEventHandler, useCallback } from 'react';
 
 import clsx from 'clsx';
-import { throttle } from 'lodash';
 
-import { useSafeState } from 'lib/ui/hooks';
-import { useWillUnmount } from 'lib/ui/hooks/useWillUnmount';
+import { useResizeDependentValue } from 'app/hooks/use-resize-dependent-value';
 
 interface Props extends PropsWithChildren {
   className?: string;
 }
 
 export const ScrollView: FC<Props> = ({ className, children }) => {
-  const [contentHiding, setContentHiding] = useSafeState(false);
+  const { value: contentHiding, updateValue, refFn } = useResizeDependentValue(isContentHidingBelow, false, 300);
 
-  const ref = useRef<HTMLDivElement | nullish>();
-
-  const setContentHidingThrottled = useMemo(() => throttle((value: boolean) => setContentHiding(value), 300), []);
-
-  const onScroll = useCallback<UIEventHandler<HTMLDivElement>>(event => {
-    const node = event.currentTarget;
-
-    setContentHidingThrottled(isContentHidingBelow(node));
-  }, []);
-
-  const resizeObserver = useMemo(
-    () =>
-      new ResizeObserver(() => {
-        const node = ref.current;
-
-        if (node) setContentHidingThrottled(isContentHidingBelow(node));
-      }),
-    []
+  const onScroll = useCallback<UIEventHandler<HTMLDivElement>>(
+    event => updateValue(event.currentTarget),
+    [updateValue]
   );
 
-  useWillUnmount(() => void resizeObserver.disconnect());
-
-  const refFn = useCallback((node: HTMLDivElement | null) => {
-    ref.current = node;
-    if (!node) return void setContentHiding(false);
-
-    resizeObserver.observe(node);
-
-    setContentHiding(isContentHidingBelow(node));
-  }, []);
-
   return (
     <div
       ref={refFn}

src/app/atoms/TextButton.tsx

@@ -10,15 +10,15 @@ import { IconBase } from './IconBase';
 type Color = 'black' | 'blue' | 'grey';
 
 interface Props extends TestIDProps {
-  Icon: ImportedSVGComponent;
+  Icon?: ImportedSVGComponent;
   className?: string;
   color?: Color;
   onClick?: EmptyFn;
 }
 
 export const TextButton = memo(
   forwardRef<HTMLButtonElement, PropsWithChildren<Props>>(
-    ({ Icon, color, onClick, testID, testIDProperties, children, className }, ref) => {
+    ({ Icon, color = 'grey', onClick, testID, testIDProperties, children, className }, ref) => {
       const { textClassName, iconClassName } = useMemo(() => {
         switch (color) {
           case 'black':
@@ -52,7 +52,7 @@ export const TextButton = memo(
           testIDProperties={testIDProperties}
         >
           <span className={clsx('text-font-description-bold', textClassName)}>{children}</span>
-          <IconBase size={12} Icon={Icon} className={iconClassName} />
+          {Icon && <IconBase size={12} Icon={Icon} className={iconClassName} />}
         </Button>
       );
     }

src/app/hooks/use-resize-dependent-value.ts

@@ -0,0 +1,59 @@
+import { useCallback, useMemo, useRef } from 'react';
+
+import { throttle } from 'lodash';
+
+import { useSafeState } from 'lib/ui/hooks';
+import { useWillUnmount } from 'lib/ui/hooks/useWillUnmount';
+
+export const useResizeDependentValue = <T, E extends HTMLElement>(
+  fn: (element: E) => T,
+  fallbackValue: T,
+  throttleTime: number
+) => {
+  const [value, setValue] = useSafeState(fallbackValue);
+
+  const ref = useRef<E | nullish>();
+
+  const setValueThrottled = useMemo(
+    () => throttle((value: T) => setValue(value), throttleTime),
+    [setValue, throttleTime]
+  );
+
+  const updateValue = useCallback(
+    (node: E) => {
+      setValueThrottled(fn(node));
+    },
+    [fn, setValueThrottled]
+  );
+
+  const resizeObserver = useMemo(
+    () =>
+      new ResizeObserver(() => {
+        const node = ref.current;
+
+        if (node) updateValue(node);
+      }),
+    [updateValue]
+  );
+
+  useWillUnmount(() => void resizeObserver.disconnect());
+
+  const refFn = useCallback(
+    (node: E | null) => {
+      ref.current = node;
+      if (!node) return void setValue(fallbackValue);
+
+      resizeObserver.disconnect();
+      resizeObserver.observe(node);
+
+      updateValue(node);
+    },
+    [fallbackValue, resizeObserver, setValue, updateValue]
+  );
+
+  return {
+    value,
+    updateValue,
+    refFn
+  };
+};

src/app/layouts/PageLayout/index.tsx

@@ -45,7 +45,6 @@ export interface PageLayoutProps extends DefaultHeaderProps, ScrollEdgesVisibili
   contentPadding?: boolean;
   contentClassName?: string;
   paperClassName?: string;
-  dimBg?: boolean;
   headerChildren?: ReactNode;
 }
 
@@ -56,7 +55,6 @@ const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({
   contentPadding = true,
   contentClassName,
   paperClassName,
-  dimBg = true,
   headerChildren,
   onBottomEdgeVisibilityChange,
   bottomEdgeThreshold,
@@ -93,7 +91,7 @@ const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({
               'flex-grow flex flex-col',
               noScroll && 'overflow-hidden',
               contentPadding && 'p-4 pb-15',
-              dimBg && 'bg-background',
+              'bg-background',
               contentClassName
             )}
           >

src/app/pages/AccountSettings/index.tsx

@@ -135,7 +135,6 @@ export const AccountSettings = memo<AccountSettingsProps>(({ id }) => {
     <PageLayout
       pageTitle={t('editAccount')}
       contentPadding={false}
-      dimBg
       onBottomEdgeVisibilityChange={setBottomEdgeIsVisible}
       bottomEdgeThreshold={16}
     >

src/app/pages/Receive/Receive.tsx

@@ -27,7 +27,7 @@ export const Receive = memo(() => {
   const resetReceivePayload = useCallback(() => setReceivePayload(null), []);
 
   return (
-    <PageLayout pageTitle={<PageTitle title={t('receive')} />} dimBg>
+    <PageLayout pageTitle={<PageTitle title={t('receive')} />}>
       <AccountsModal opened={accountsModalIsOpen} onRequestClose={closeAccountsModal} />
       <AccountDropdownHeader className="mb-5" account={account} onClick={openAccountsModal} />
       {receivePayload && <ReceiveModal onClose={resetReceivePayload} {...receivePayload} />}

src/app/pages/Unlock/Unlock.selectors.ts

@@ -1,5 +1,8 @@
 export enum UnlockSelectors {
   passwordInput = 'Unlock/Password Input',
   unlockButton = 'Unlock/Unlock Button',
-  importWalletUsingSeedPhrase = 'Unlock/Import Wallet using Seed Phrase Link'
+  importWalletUsingSeedPhrase = 'Unlock/Import Wallet using Seed Phrase Link',
+  continueResetButton = 'Unlock/Continue Reset Button',
+  cancelResetExtensionButton = 'Unlock/Cancel Reset Extension Button',
+  confirmResetExtensionButton = 'Unlock/Confirm Reset Extension Button'
 }