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

…nd refactor footers, ref #5260
leather-io · Jul 22, 2024 · 7f0f11d · 7f0f11d
1 parent 1187acf
commit 7f0f11d
Show file tree

Hide file tree

Showing 31 changed files with 190 additions and 193 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/request-password.tsx b/src/app/components/request-password.tsx
@@ -10,8 +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 { Footer } from '@app/ui/components/containers/footers/footer';
-import { Card } from '@app/ui/layout/card/card';
+import { Card, CardFooter } from '@app/ui/layout/card';
 import { Page } from '@app/ui/layout/page/page.layout';
 
 import { ErrorLabel } from './error-label';
@@ -65,7 +64,7 @@ export function RequestPassword({ onSuccess }: RequestPasswordProps) {
           </styled.h1>
         }
         footer={
-          <Footer variant="card">
+          <CardFooter>
             <Button
               data-testid={SettingsSelectors.UnlockWalletBtn}
               disabled={isRunning || !!error}
@@ -75,7 +74,7 @@ export function RequestPassword({ onSuccess }: RequestPasswordProps) {
             >
               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
@@ -67,7 +67,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
@@ -90,7 +90,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/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';
@@ -15,9 +16,7 @@ import { useBreakOnNonCompliantEntity } from '@app/query/common/compliance-check
 import { useOnOriginTabClose } from '@app/routes/hooks/use-on-tab-closed';
 import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useCurrentAccountTaprootIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/taproot-account.hooks';
-import { Footer } from '@app/ui/components/containers/footers/footer';
-import { Card } from '@app/ui/layout/card/card';
-import { CardContent } from '@app/ui/layout/card/card-content';
+import { Card, CardContent, CardFooter } from '@app/ui/layout/card';
 
 import * as Psbt from './components';
 import { usePsbtDetails } from './hooks/use-psbt-details';
@@ -95,32 +94,30 @@ export function PsbtSigner(props: PsbtSignerProps) {
     <PsbtSignerProvider value={psbtSignerContext}>
       <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>
+            <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
@@ -22,10 +22,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} width="100%">
+              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
@@ -40,27 +40,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">
+            <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>
       }
     >

diff --git a/src/app/features/stacks-high-fee-warning/stacks-high-fee-dialog.tsx b/src/app/features/stacks-high-fee-warning/stacks-high-fee-dialog.tsx
@@ -1,6 +1,6 @@
 import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
 import { useFormikContext } from 'formik';
-import { HStack, Stack } from 'leather-styles/jsx';
+import { Flex, HStack, Stack } from 'leather-styles/jsx';
 
 import { Button, Caption, Dialog, ErrorIcon, Link, Title } from '@leather.io/ui';
 
@@ -27,21 +27,27 @@ export function HighFeeDialog({ learnMoreUrl }: HighFeeDialogProps) {
       isShowing={showHighFeeWarningDialog}
       onClose={() => setShowHighFeeWarningDialog(false)}
       footer={
-        <Footer flexDirection="row">
-          <Button onClick={() => setShowHighFeeWarningDialog(false)} variant="outline" flexGrow={1}>
-            Edit fee
-          </Button>
-          <Button
-            onClick={() => {
-              setHasBypassedFeeWarning(true);
-              handleSubmit();
-            }}
-            data-testid={SendCryptoAssetSelectors.HighFeeWarningDialogSubmit}
-            type="submit"
-            flexGrow={1}
-          >
-            Yes, I'm sure
-          </Button>
+        <Footer>
+          <Flex flexDirection="row" gap="space.04">
+            <Button
+              onClick={() => setShowHighFeeWarningDialog(false)}
+              variant="outline"
+              flexGrow={1}
+            >
+              Edit fee
+            </Button>
+            <Button
+              onClick={() => {
+                setHasBypassedFeeWarning(true);
+                handleSubmit();
+              }}
+              data-testid={SendCryptoAssetSelectors.HighFeeWarningDialogSubmit}
+              type="submit"
+              flexGrow={1}
+            >
+              Yes, I'm sure
+            </Button>
+          </Flex>
         </Footer>
       }
     >

diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx
@@ -16,9 +16,8 @@ import { InscriptionPreview } from '@app/components/inscription-preview-card/com
 import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks';
 import { useAppDispatch } from '@app/store';
 import { inscriptionSent } from '@app/store/ordinals/ordinals.slice';
-import { Footer } from '@app/ui/components/containers/footers/footer';
 import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header';
-import { Card } from '@app/ui/layout/card/card';
+import { Card, CardFooter } from '@app/ui/layout/card';
 
 import { InscriptionPreviewCard } from '../../../components/inscription-preview-card/inscription-preview-card';
 import { useSendInscriptionState } from './components/send-inscription-container';
@@ -83,11 +82,11 @@ export function SendInscriptionReview() {
     >
       <Card
         footer={
-          <Footer variant="card">
+          <CardFooter>
             <Button aria-busy={isBroadcasting} onClick={sendInscription}>
               Confirm and send transaction
             </Button>
-          </Footer>
+          </CardFooter>
         }
       >
         <Box px="space.06" mt="space.06">

diff --git a/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx b/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx
@@ -15,9 +15,8 @@ import { FormAddressDisplayer } from '@app/components/address-displayer/form-add
 import { InfoCardBtn, InfoCardRow, InfoCardSeparator } from '@app/components/info-card/info-card';
 import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview';
 import { useToast } from '@app/features/toasts/use-toast';
-import { Footer } from '@app/ui/components/containers/footers/footer';
 import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header';
-import { Card } from '@app/ui/layout/card/card';
+import { Card, CardFooter } from '@app/ui/layout/card';
 
 import { InscriptionPreviewCard } from '../../../components/inscription-preview-card/inscription-preview-card';
 
@@ -62,12 +61,12 @@ export function SendInscriptionSummary() {
     >
       <Card
         footer={
-          <Footer variant="card">
+          <CardFooter>
             <HStack gap="space.04" width="100%">
               <InfoCardBtn onClick={onClickLink} icon={<ExternalLinkIcon />} label="View details" />
               <InfoCardBtn onClick={onClickCopy} icon={<CopyIcon />} label="Copy ID" />
             </HStack>
-          </Footer>
+          </CardFooter>
         }
       >
         <Box mt="space.06" px="space.06">

diff --git a/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form-confirmation.tsx
@@ -19,9 +19,7 @@ import {
 } from '@app/components/info-card/info-card';
 import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks';
 import { useBrc20Transfers } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.hooks';
-import { Footer } from '@app/ui/components/containers/footers/footer';
-import { Card } from '@app/ui/layout/card/card';
-import { CardContent } from '@app/ui/layout/card/card-content';
+import { Card, CardContent, CardFooter } from '@app/ui/layout/card';
 
 import { useSendFormNavigate } from '../../hooks/use-send-form-navigate';
 
@@ -109,11 +107,11 @@ export function Brc20SendFormConfirmation() {
     <Card
       dataTestId={SendCryptoAssetSelectors.ConfirmationDetails}
       footer={
-        <Footer variant="card">
+        <CardFooter>
           <Button aria-busy={isBroadcasting} onClick={initiateTransaction} width="100%">
             Create transfer inscription
           </Button>
-        </Footer>
+        </CardFooter>
       }
     >
       <CardContent p="space.00">