chore: differentiate action popup and popup, improve responsiveness a…

…nd refactor footers, ref #5260
leather-io · Aug 2, 2024 · 9cb00c9 · 9cb00c9
1 parent 17d71a8
commit 9cb00c9
Show file tree

Hide file tree

Showing 38 changed files with 210 additions and 175 deletions.
diff --git a/public/html/action-popup.html b/public/html/action-popup.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html class="mode__action-popup light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="/assets/base.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div id="splash-screen"></div>
+    <div id="app"></div>
+    <script src="/assets/splash-screen.js"></script>
+    <script src="browser-polyfill.js"></script>
+  </body>
+</html>
diff --git a/scripts/generate-manifest.js b/scripts/generate-manifest.js
@@ -87,7 +87,7 @@ const manifest = {
   web_accessible_resources: [{ resources: ['inpage.js'], matches: ['*://*/*'] }],
   action: {
     default_title: 'Leather',
-    default_popup: 'popup.html',
+    default_popup: 'action-popup.html',
     default_icon: defaultIconEnvironment[WALLET_ENVIRONMENT],
   },
   options_ui: {

diff --git a/src/app/components/json.tsx b/src/app/components/json.tsx
@@ -21,6 +21,7 @@ function parseJsonReadable(value: any) {
 export function Json(value: any) {
   return (
     <Box
+      maxWidth={{ base: '70vw', md: 'pageWidth' }}
       className={css({
         '& pre': {
           overflowX: 'auto',

diff --git a/src/app/components/layout/card/card-footer.tsx b/src/app/components/layout/card/card-footer.tsx
@@ -0,0 +1,12 @@
+import { FlexProps } from 'leather-styles/jsx';
+
+import type { HasChildren } from '@app/common/has-children';
+import { Footer } from '@app/components/layout';
+
+export function CardFooter({ children, ...props }: HasChildren & FlexProps) {
+  return (
+    <Footer position="absolute" borderBottomRadius="md" bg={undefined} borderTop="none" {...props}>
+      {children}
+    </Footer>
+  );
+}
diff --git a/src/app/components/layout/card/index.ts b/src/app/components/layout/card/index.ts
@@ -0,0 +1,3 @@
+export { Card } from './card';
+export { CardFooter } from './card-footer';
+export { CardContent } from './card-content';
diff --git a/src/app/components/layout/footer/footer.stories.tsx b/src/app/components/layout/footer/footer.stories.tsx
@@ -34,7 +34,7 @@ export function Footer() {
 export function SignOutConfirmFooter() {
   return (
     <Component>
-      <Flex flexDirection="row" gap="space.04">
+      <Flex flexDirection="row" gap="space.04" width="100%">
         <Button color="gray" flexGrow={1} variant="outline" onClick={() => null}>
           Cancel
         </Button>

diff --git a/src/app/components/layout/footer/footer.tsx b/src/app/components/layout/footer/footer.tsx
@@ -1,31 +1,24 @@
-import type { ReactNode } from 'react';
+import { Flex, FlexProps } from 'leather-styles/jsx';
 
-import { Flex, styled } from 'leather-styles/jsx';
+import type { HasChildren } from '@app/common/has-children';
 
-interface FooterProps {
-  children: ReactNode;
-  variant?: 'page' | 'card';
-  flexDirection?: 'column' | 'row';
-}
-
-export function Footer({ children, variant = 'page', flexDirection = 'column' }: FooterProps) {
+export function Footer({ children, ...props }: HasChildren & FlexProps) {
   return (
-    <styled.footer
+    <Flex
       gap="space.05"
       p="space.05"
       bottom={0}
       width="100vw"
-      maxWidth={variant === 'card' ? 'pageWidth' : '100%'}
+      maxWidth="100%"
       zIndex={1}
       minHeight="footerHeight"
-      position={variant === 'card' ? ' absolute' : 'fixed'}
+      position="fixed"
       borderBottomRadius="md"
-      bg={variant === 'page' ? 'ink.background-primary' : undefined}
-      borderTop={variant === 'page' ? ' default' : 'none'}
+      bg="ink.background-primary"
+      borderTop="default"
+      {...props}
     >
-      <Flex flexDirection={flexDirection} width="100%" gap="space.04">
-        {children}
-      </Flex>
-    </styled.footer>
+      {children}
+    </Flex>
   );
 }
diff --git a/src/app/components/layout/index.ts b/src/app/components/layout/index.ts
@@ -2,6 +2,7 @@ export { Page } from './page/page.layout';
 export { Footer } from './footer/footer';
 export { Card } from './card/card';
 export { CardContent } from './card/card-content';
+export { CardFooter } from './card/card-footer';
 export { AvailableBalance } from './footer/available-balance';
 
 export { Content } from './layouts/content.layout';

diff --git a/src/app/components/layout/page/page.layout.tsx b/src/app/components/layout/page/page.layout.tsx
@@ -11,6 +11,7 @@ export function Page({ children }: PageProps) {
   return (
     <Box
       width="pageWidth"
+      margin="auto"
       height={{ base: '100%', md: 'fit-content' }}
       border={{ base: 'unset', sm: 'default' }}
       rounded="lg"

diff --git a/src/app/components/request-password.tsx b/src/app/components/request-password.tsx
@@ -10,7 +10,7 @@ import { analytics } from '@shared/utils/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 { Card, Footer, Page } from '@app/components/layout';
+import { Card, CardFooter, Page } from '@app/components/layout';
 
 import { ErrorLabel } from './error-label';
 
@@ -63,17 +63,18 @@ export function RequestPassword({ onSuccess }: RequestPasswordProps) {
           </styled.h1>
         }
         footer={
-          <Footer variant="card">
+          <CardFooter>
             <Button
               data-testid={SettingsSelectors.UnlockWalletBtn}
               disabled={isRunning || !!error}
               aria-busy={isRunning}
               onClick={submit}
               variant="solid"
+              fullWidth
             >
               Continue
             </Button>
-          </Footer>
+          </CardFooter>
         }
       >
         <Stack gap="space.05" px="space.05" minHeight="330px">

diff --git a/src/app/features/dialogs/increase-fee-dialog/components/increase-fee-actions.tsx b/src/app/features/dialogs/increase-fee-dialog/components/increase-fee-actions.tsx
@@ -1,4 +1,5 @@
 import { useFormikContext } from 'formik';
+import { Flex } from 'leather-styles/jsx';
 
 import { Button } from '@leather.io/ui';
 
@@ -19,7 +20,7 @@ export function IncreaseFeeActions(props: IncreaseFeeActionsProps) {
   const actionText = whenWallet({ ledger: 'Confirm on Ledger', software: 'Submit' });
 
   return (
-    <>
+    <Flex flexDirection="row" width="100%" gap="space.04">
       <Button onClick={onCancel} variant="outline" flexGrow={1}>
         Cancel
       </Button>
@@ -34,6 +35,6 @@ export function IncreaseFeeActions(props: IncreaseFeeActionsProps) {
       >
         {actionText}
       </Button>
-    </>
+    </Flex>
   );
 }
diff --git a/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx b/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx
@@ -66,7 +66,7 @@ export function IncreaseBtcFeeDialog() {
             onClose={onClose}
             header={<DialogHeader title="Increase fee" />}
             footer={
-              <Footer flexDirection="row">
+              <Footer>
                 <IncreaseFeeActions
                   isDisabled={isBroadcasting}
                   isBroadcasting={isBroadcasting}

diff --git a/src/app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog.tsx b/src/app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog.tsx
@@ -89,7 +89,7 @@ export function IncreaseStxFeeDialog() {
               onClose={() => navigate(RouteUrls.Home)}
               header={<DialogHeader title="Increase fee" />}
               footer={
-                <Footer flexDirection="row">
+                <Footer>
                   <IncreaseFeeActions
                     isDisabled={stxToMicroStx(props.values.fee).isEqualTo(fee)}
                     isLoading={isLoadingRawTx || isLoadingTx}

diff --git a/src/app/features/psbt-signer/components/index.ts b/src/app/features/psbt-signer/components/index.ts
@@ -1,6 +1,5 @@
 export { PsbtInputsAndOutputs } from './psbt-inputs-and-outputs/psbt-inputs-and-outputs';
 export { PsbtInputsOutputsTotals } from './psbt-inputs-outputs-totals/psbt-inputs-outputs-totals';
-export { PsbtRequestActions } from './psbt-request-actions';
 export { PsbtRequestDetailsHeader } from './psbt-request-details-header';
 export { PsbtRequestDetailsLayout } from './psbt-request-details.layout';
 export { PsbtRequestFee } from './psbt-request-fee';

diff --git a/...bt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx b/...bt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx
@@ -37,7 +37,7 @@ export function PsbtInputOutputItemLayout({
             label={hasCopied ? 'Copied!' : addressHoverLabel}
             side="bottom"
           >
-            <Box display="flex" height="16px">
+            <Box display="flex">
               <styled.button _hover={{ bg: 'ink.component-background-hover' }} onClick={onCopy}>
                 {addressHoverLabel ? <CopyIcon variant="small" /> : null}
               </styled.button>

diff --git a/.../psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx b/.../psbt-signer/components/psbt-inputs-outputs-totals/components/psbt-address-total-item.tsx
@@ -46,7 +46,7 @@ export function PsbtAddressTotalItem({
               label={hasCopied ? 'Copied!' : hoverLabel}
               side="bottom"
             >
-              <Box display="flex" height="16px">
+              <Box display="flex">
                 <Link onClick={onCopy} variant="text">
                   {hoverLabel ? <CopyIcon /> : null}
                 </Link>

diff --git a/src/app/features/psbt-signer/components/psbt-request-actions.tsx b/src/app/features/psbt-signer/components/psbt-request-actions.tsx
diff --git a/src/app/features/psbt-signer/psbt-signer.tsx b/src/app/features/psbt-signer/psbt-signer.tsx
@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { PsbtSelectors } from '@tests/selectors/requests.selectors';
+import { Flex } from 'leather-styles/jsx';
 
 import { getPsbtTxInputs, getPsbtTxOutputs } from '@leather.io/bitcoin';
 import { Button } from '@leather.io/ui';
@@ -11,7 +12,7 @@ import { RouteUrls } from '@shared/route-urls';
 import { closeWindow } from '@shared/utils';
 
 import { SignPsbtArgs } from '@app/common/psbt/requests';
-import { Card, CardContent, Footer } from '@app/components/layout';
+import { Card, CardContent, CardFooter } from '@app/components/layout';
 import { PopupHeader } from '@app/features/container/headers/popup.header';
 import { useBreakOnNonCompliantEntity } from '@app/query/common/compliance-checker/compliance-checker.query';
 import { useOnOriginTabClose } from '@app/routes/hooks/use-on-tab-closed';
@@ -95,32 +96,30 @@ export function PsbtSigner(props: PsbtSignerProps) {
       <PopupHeader showSwitchAccount balance="all" />
       <Card
         footer={
-          <Footer flexDirection="row">
-            <Button flexGrow={1} onClick={onCancel} variant="outline">
-              Cancel
-            </Button>
-            <Button
-              flexGrow={1}
-              aria-busy={isBroadcasting}
-              onClick={() =>
-                onSignPsbt({
-                  addressNativeSegwitTotal,
-                  addressTaprootTotal,
-                  fee,
-                  inputs: psbtTxInputs,
-                })
-              }
-            >
-              Confirm
-            </Button>
-          </Footer>
+          <CardFooter borderTop="default">
+            <Flex flexDirection="row" gap="space.04" width="100%">
+              <Button flexGrow={1} onClick={onCancel} variant="outline">
+                Cancel
+              </Button>
+              <Button
+                flexGrow={1}
+                aria-busy={isBroadcasting}
+                onClick={() =>
+                  onSignPsbt({
+                    addressNativeSegwitTotal,
+                    addressTaprootTotal,
+                    fee,
+                    inputs: psbtTxInputs,
+                  })
+                }
+              >
+                Confirm
+              </Button>
+            </Flex>
+          </CardFooter>
         }
       >
-        <CardContent
-          dataTestId={PsbtSelectors.PsbtSignerCard}
-          maxHeight="80vh"
-          maxWidth="popupWidth"
-        >
+        <CardContent dataTestId={PsbtSelectors.PsbtSignerCard} maxHeight="80vh">
           <Psbt.PsbtRequestHeader name={name} origin={origin} />
           <Psbt.PsbtRequestDetailsLayout>
             {isPsbtMutable ? <Psbt.PsbtRequestSighashWarningLabel origin={origin} /> : null}

diff --git a/...retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx b/...retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx
@@ -20,10 +20,12 @@ export function RetrieveTaprootToNativeSegwitLayout(
       header={<DialogHeader />}
       onClose={() => onClose()}
       footer={
-        <Footer flexDirection="row">
-          <Button onClick={onApproveTransaction} aria-busy={isBroadcasting} width="100%">
-            Retrieve bitcoin
-          </Button>
+        <Footer>
+          <Flex flexDirection="row">
+            <Button onClick={onApproveTransaction} aria-busy={isBroadcasting} fullWidth>
+              Retrieve bitcoin
+            </Button>
+          </Flex>
         </Footer>
       }
     >

diff --git a/src/app/features/settings/sign-out/sign-out.tsx b/src/app/features/settings/sign-out/sign-out.tsx
@@ -39,27 +39,29 @@ export function SignOutDialog({ isShowing, onUserDeleteWallet, onClose }: SignOu
       isShowing={isShowing}
       onClose={onClose}
       footer={
-        <Footer flexDirection="row">
-          <Button
-            color="gray"
-            data-testid={SettingsSelectors.BtnSignOutReturnToHomeScreen}
-            flexGrow={1}
-            variant="outline"
-            onClick={onClose}
-          >
-            Cancel
-          </Button>
-          <Button
-            color="lightModeInk.1"
-            opacity={!canSignOut ? 0.8 : undefined}
-            data-testid={SettingsSelectors.BtnSignOutActuallyDeleteWallet}
-            flexGrow={1}
-            disabled={!canSignOut}
-            onClick={handleSignOut}
-            type="submit"
-          >
-            Sign out
-          </Button>
+        <Footer>
+          <Flex flexDirection="row" gap="space.04" width="100%">
+            <Button
+              color="gray"
+              data-testid={SettingsSelectors.BtnSignOutReturnToHomeScreen}
+              flexGrow={1}
+              variant="outline"
+              onClick={onClose}
+            >
+              Cancel
+            </Button>
+            <Button
+              color="lightModeInk.1"
+              opacity={!canSignOut ? 0.8 : undefined}
+              data-testid={SettingsSelectors.BtnSignOutActuallyDeleteWallet}
+              flexGrow={1}
+              disabled={!canSignOut}
+              onClick={handleSignOut}
+              type="submit"
+            >
+              Sign out
+            </Button>
+          </Flex>
         </Footer>
       }
     >