fix: header alignment and request pw

src/app/common/hooks/use-interval.ts

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react';
+
+import { noop } from '@shared/utils';
+
+export function useInterval(callback: () => void, delay: number | null) {
+  const savedCallback = useRef(noop);
+
+  // Remember the latest callback.
+  useEffect(() => {
+    if (savedCallback) {
+      savedCallback.current = callback;
+    }
+  }, [callback]);
+
+  // Set up the interval.
+  useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+    return;
+  }, [delay]);
+}

src/app/common/hooks/use-waiting-message.ts

@@ -0,0 +1,39 @@
+import { useMemo, useRef, useState } from 'react';
+
+import { useInterval } from './use-interval';
+
+// Keys are the seconds to wait before showing the message
+export type WaitingMessages = Record<number, string>;
+
+function messageForSecondsPassed(waitingMessages: WaitingMessages, seconds: number) {
+  return waitingMessages[seconds as keyof typeof waitingMessages];
+}
+
+export const useWaitingMessage = (
+  waitingMessages: WaitingMessages,
+  { waitingMessageInterval } = {
+    waitingMessageInterval: 1000,
+  }
+): [boolean, string, () => void, () => void] => {
+  const [isRunning, setIsRunning] = useState(false);
+  const [waitingMessage, setWaitingMessage] = useState(messageForSecondsPassed(waitingMessages, 0));
+  const handlers = useMemo(
+    () => ({
+      startWaitingMessage: () => setIsRunning(true),
+      stopWaitingMessage: () => setIsRunning(false),
+    }),
+    []
+  );
+  const secondsPassed = useRef(0);
+
+  useInterval(
+    () => {
+      secondsPassed.current += waitingMessageInterval / 1000;
+      const newMessage = messageForSecondsPassed(waitingMessages, secondsPassed.current);
+      if (newMessage) setWaitingMessage(newMessage);
+    },
+    isRunning ? waitingMessageInterval : null
+  );
+
+  return [isRunning, waitingMessage, handlers.startWaitingMessage, handlers.stopWaitingMessage];
+};

src/app/components/request-password.tsx

@@ -6,6 +6,7 @@ import { Box, Stack, styled } from 'leather-styles/jsx';
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { useKeyActions } from '@app/common/hooks/use-key-actions';
 import { buildEnterKeyEvent } from '@app/common/hooks/use-modifier-key';
+import { WaitingMessages, useWaitingMessage } from '@app/common/hooks/use-waiting-message';
 import { Button } from '@app/ui/components/button/button';
 import { Footer } from '@app/ui/components/containers/footers/footer';
 import { Logo } from '@app/ui/components/logo';
@@ -14,6 +15,15 @@ import { Page } from '@app/ui/layout/page/page.layout';
 
 import { ErrorLabel } from './error-label';
 
+const waitingMessages: WaitingMessages = {
+  '2': 'Verifying password…',
+  '10': 'Still working…',
+  '20': 'Almost there',
+};
+
+const caption =
+  'Your password is used to secure your Secret Key and is only used locally on your device.';
+
 interface RequestPasswordProps {
   onSuccess(): void;
 }
@@ -22,21 +32,26 @@ export function RequestPassword({ onSuccess }: RequestPasswordProps) {
   const [error, setError] = useState('');
   const { unlockWallet } = useKeyActions();
   const analytics = useAnalytics();
+  const [isRunning, waitingMessage, startWaitingMessage, stopWaitingMessage] =
+    useWaitingMessage(waitingMessages);
+
   const submit = useCallback(async () => {
     const startUnlockTimeMs = performance.now();
     void analytics.track('start_unlock');
+    startWaitingMessage();
     setError('');
     try {
       await unlockWallet(password);
       onSuccess?.();
     } catch (error) {
       setError('The password you entered is invalid');
     }
+    stopWaitingMessage();
     const unlockSuccessTimeMs = performance.now();
     void analytics.track('complete_unlock', {
       durationMs: unlockSuccessTimeMs - startUnlockTimeMs,
     });
-  }, [analytics, unlockWallet, password, onSuccess]);
+  }, [analytics, startWaitingMessage, stopWaitingMessage, unlockWallet, password, onSuccess]);
 
   return (
     <Page>
@@ -52,7 +67,8 @@ export function RequestPassword({ onSuccess }: RequestPasswordProps) {
           <Footer variant="card">
             <Button
               data-testid={SettingsSelectors.UnlockWalletBtn}
-              disabled={!!error}
+              disabled={isRunning || !!error}
+              aria-busy={isRunning}
               onClick={submit}
               variant="solid"
             >
@@ -61,11 +77,9 @@ export function RequestPassword({ onSuccess }: RequestPasswordProps) {
           </Footer>
         }
       >
-        <Stack gap="space.05" px="space.05" minHeight="300px">
+        <Stack gap="space.05" px="space.05" minHeight="330px">
           <styled.h3 textStyle="heading.03">Enter your password</styled.h3>
-          <styled.p textStyle="label.02">
-            Your password is used to secure your Secret Key and is only used locally on your device.
-          </styled.p>
+          <styled.p textStyle="label.02">{(isRunning && waitingMessage) || caption}</styled.p>
           <styled.input
             _focus={{ border: 'focus' }}
             autoCapitalize="off"

src/app/components/stacks-transaction-item/increase-fee-button.tsx

@@ -1,5 +1,6 @@
 import { HStack, styled } from 'leather-styles/jsx';
 
+import { whenPageMode } from '@app/common/utils';
 import { ChevronsRightIcon } from '@app/ui/icons/chevrons-right-icon';
 
 interface IncreaseFeeButtonProps {
@@ -15,7 +16,7 @@ export function IncreaseFeeButton(props: IncreaseFeeButtonProps) {
     <styled.button
       _hover={{ color: 'ink.text-subdued' }}
       bg="ink.background-primary"
-      minWidth="105px"
+      maxWidth="110px"
       ml="auto"
       onClick={e => {
         onIncreaseFee();
@@ -32,7 +33,12 @@ export function IncreaseFeeButton(props: IncreaseFeeButtonProps) {
     >
       <HStack gap="space.01">
         <ChevronsRightIcon color="stacks" variant="small" />
-        <styled.span textStyle="label.03">Increase fee</styled.span>
+        <styled.span textStyle="label.03">
+          {whenPageMode({
+            popup: 'Fee',
+            full: 'Increase fee',
+          })}
+        </styled.span>
       </HStack>
     </styled.button>
   );

src/app/features/container/utils/route-helpers.ts

@@ -24,7 +24,15 @@ function isOnboardingPage(pathname: RouteUrls) {
   );
 }
 
+function isFundPage(pathname: RouteUrls) {
+  return (
+    pathname === RouteUrls.Fund.replace(':currency', 'STX') ||
+    pathname === RouteUrls.Fund.replace(':currency', 'BTC')
+  );
+}
+
 export function getPageVariant(pathname: RouteUrls) {
+  if (isFundPage(pathname)) return 'fund';
   if (isHomePage(pathname)) return 'home';
   if (isOnboardingPage(pathname)) return 'onboarding';
   if (isSummaryPage(pathname)) return 'summary';

src/app/features/dialogs/increase-fee-dialog/increase-fee-dialog.tsx

@@ -19,7 +19,7 @@ export function IncreaseFeeDialog({ feeForm, onClose, isShowing }: IncreaseFeeDi
       <Dialog
         isShowing={isShowing}
         onClose={onClose}
-        header={<Header variant="dialog" title="Increase transaction fee" />}
+        header={<Header variant="dialog" title="Increase fee" />}
       >
         <Stack gap="space.05" px="space.05" pb="space.05">
           <Suspense

src/app/ui/components/containers/container.layout.tsx

@@ -17,7 +17,7 @@ export function ContainerLayout({ children, header, variant }: ContainerLayoutPr
       height={{ base: '100vh', sm: '100%' }}
       className={css(radixBaseCSS)}
       bg={{
-        base: 'ink.background-primary',
+        base: variant === 'fund' ? 'ink.background-secondary' : 'ink.background-primary',
         md: variant !== 'home' ? 'ink.background-secondary' : undefined,
       }}
     >

src/app/ui/components/containers/headers/header.tsx

@@ -9,7 +9,7 @@ import { IconButton } from '../../icon-button/icon-button';
 import { BigTitleHeader } from './components/big-title-header';
 import { HeaderActionButton } from './components/header-action-button';
 
-type HeaderVariants = 'page' | 'home' | 'onboarding' | 'dialog' | 'bigTitle' | 'summary';
+type HeaderVariants = 'page' | 'home' | 'onboarding' | 'dialog' | 'bigTitle' | 'summary' | 'fund';
 
 export interface HeaderProps {
   variant: HeaderVariants;
@@ -43,16 +43,21 @@ export function Header({
 
   return (
     <styled.header
+      justifyContent="center"
+      margin={{ base: 0, md: 'auto' }}
       p={variant === 'bigTitle' ? 'space.05' : 'space.04'}
-      bg={{ base: 'ink.background-primary', sm: 'transparent' }}
+      bg={{
+        base: variant === 'fund' ? 'ink.background-secondary' : 'ink.background-primary',
+        sm: 'transparent',
+      }}
+      maxWidth={{ base: '100vw', md: 'fullPageMaxWidth' }}
+      width="100%"
     >
       <Grid
         alignItems="center"
         gridTemplateColumns={title ? '2fr 4fr 2fr' : 'auto 4fr auto'}
         gridAutoFlow="column"
         width="100%"
-        maxWidth={{ base: '100vw', md: 'fullPageMaxWidth' }}
-        margin={{ base: 0, md: 'auto' }}
         hideFrom={variant === 'bigTitle' ? 'md' : undefined}
       >
         <GridItem justifySelf="start">