From 77cb5e532b5046477a8117c3397798310129de50 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Mon, 22 Jul 2024 11:23:35 +0100
Subject: [PATCH] chore: differentiate action popup and popup, improve
responsiveness and refactor footers, ref #5260
---
public/html/action-popup.html | 14 ++
scripts/generate-manifest.js | 2 +-
src/app/components/disclaimer.tsx | 2 +-
.../components/layout/card/card-content.tsx | 27 ----
src/app/components/layout/card/card.tsx | 54 ++++++-
.../layout/card/components/button-row.tsx | 11 ++
.../layout/card/components/summary-footer.tsx | 18 +++
src/app/components/layout/card/index.ts | 3 +
.../layout/footer/footer.stories.tsx | 2 +-
src/app/components/layout/footer/footer.tsx | 29 ++--
src/app/components/layout/index.ts | 4 +-
.../components/layout/page/page.layout.tsx | 7 +-
src/app/components/request-password.tsx | 23 ++-
.../components/bitcoin-choose-fee.layout.tsx | 15 +-
.../components/increase-fee-actions.tsx | 5 +-
.../increase-btc-fee-dialog.tsx | 2 +-
.../increase-stx-fee-dialog.tsx | 2 +-
.../message-signer/message-preview-box.tsx | 9 +-
.../message-signer/message-signing-header.tsx | 6 +-
.../features/psbt-signer/components/index.ts | 1 -
.../components/psbt-request-actions.tsx | 21 ---
src/app/features/psbt-signer/psbt-signer.tsx | 36 ++---
...trieve-taproot-to-native-segwit.layout.tsx | 10 +-
.../features/settings/sign-out/sign-out.tsx | 46 +++---
.../stacks-high-fee-dialog.tsx | 38 +++--
.../components/get-addresses.layout.tsx | 8 +-
.../choose-crypto-asset.tsx | 3 +
.../send-inscription-form.tsx | 2 +-
.../send-inscription-review.tsx | 20 ++-
.../sent-inscription-summary.tsx | 12 +-
.../brc20/brc20-send-form-confirmation.tsx | 53 +++---
.../form/brc20/brc20-send-form.tsx | 149 ++++++++---------
.../form/btc/btc-send-form-confirmation.tsx | 77 +++++----
.../form/btc/btc-send-form.tsx | 152 +++++++++---------
.../form/send-form-confirmation.tsx | 98 +++++------
.../form/stacks/stacks-common-send-form.tsx | 112 ++++++-------
.../send/sent-summary/brc20-sent-summary.tsx | 89 +++++-----
.../send/sent-summary/btc-sent-summary.tsx | 57 +++----
.../send/sent-summary/stx-sent-summary.tsx | 57 +++----
src/app/pages/swap/components/swap-review.tsx | 29 ++--
src/app/pages/swap/swap.tsx | 28 ++--
.../components/profile-data-content.tsx | 2 +-
src/background/popup.ts | 12 +-
theme/global/global.ts | 27 ++--
webpack/webpack.config.base.js | 5 +
45 files changed, 694 insertions(+), 685 deletions(-)
create mode 100644 public/html/action-popup.html
delete mode 100644 src/app/components/layout/card/card-content.tsx
create mode 100644 src/app/components/layout/card/components/button-row.tsx
create mode 100644 src/app/components/layout/card/components/summary-footer.tsx
create mode 100644 src/app/components/layout/card/index.ts
delete mode 100644 src/app/features/psbt-signer/components/psbt-request-actions.tsx
diff --git a/public/html/action-popup.html b/public/html/action-popup.html
new file mode 100644
index 00000000000..b25f5bb1390
--- /dev/null
+++ b/public/html/action-popup.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/scripts/generate-manifest.js b/scripts/generate-manifest.js
index ca234728ce5..a5c701a437b 100644
--- 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/disclaimer.tsx b/src/app/components/disclaimer.tsx
index edf9540fe23..509a1903b47 100644
--- a/src/app/components/disclaimer.tsx
+++ b/src/app/components/disclaimer.tsx
@@ -10,7 +10,7 @@ interface DisclaimerProps extends BoxProps {
}
export function Disclaimer({ disclaimerText, learnMoreUrl, ...props }: DisclaimerProps) {
return (
-
+
{disclaimerText}
{learnMoreUrl ? (
diff --git a/src/app/components/layout/card/card-content.tsx b/src/app/components/layout/card/card-content.tsx
deleted file mode 100644
index 1f63d24c69d..00000000000
--- a/src/app/components/layout/card/card-content.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { ReactNode } from 'react';
-
-import { Flex, FlexProps } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
-
-interface CardContentProps extends FlexProps {
- children: ReactNode;
- dataTestId?: string;
-}
-
-export function CardContent({ children, dataTestId, ...props }: CardContentProps) {
- return (
-
- {children}
-
- );
-}
diff --git a/src/app/components/layout/card/card.tsx b/src/app/components/layout/card/card.tsx
index c8c961b9a55..22598d7b304 100644
--- a/src/app/components/layout/card/card.tsx
+++ b/src/app/components/layout/card/card.tsx
@@ -1,20 +1,64 @@
import type { ReactNode } from 'react';
-import { Flex } from 'leather-styles/jsx';
+import { Flex, FlexProps } from 'leather-styles/jsx';
+import { token } from 'leather-styles/tokens';
+
+import { Footer } from '@app/components/layout';
interface CardProps {
children: ReactNode;
dataTestId?: string;
header?: ReactNode;
footer?: ReactNode;
+ contentStyle?: FlexProps;
}
-export function Card({ children, dataTestId, header, footer }: CardProps) {
+export function Card({
+ children,
+ dataTestId,
+ header,
+ footer,
+ contentStyle,
+ ...props
+}: CardProps & FlexProps) {
return (
-
+
{header}
- {children}
- {footer}
+
+ {children}
+
+ {footer && (
+
+ )}
);
}
+
+// Also update storybook for all this stuff too
+
+// also on PSBT signing parts needs to have a maxHeight
+
+// need to test action popup for send + swap against what we now have in prod
+// make sure footer is at bottom and scroll is not over doing it
diff --git a/src/app/components/layout/card/components/button-row.tsx b/src/app/components/layout/card/components/button-row.tsx
new file mode 100644
index 00000000000..11b8218413c
--- /dev/null
+++ b/src/app/components/layout/card/components/button-row.tsx
@@ -0,0 +1,11 @@
+import { Flex, FlexProps } from 'leather-styles/jsx';
+
+import { HasChildren } from '@app/common/has-children';
+
+export function ButtonRow({ children, ...props }: HasChildren & FlexProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/app/components/layout/card/components/summary-footer.tsx b/src/app/components/layout/card/components/summary-footer.tsx
new file mode 100644
index 00000000000..4e4a67fa6dc
--- /dev/null
+++ b/src/app/components/layout/card/components/summary-footer.tsx
@@ -0,0 +1,18 @@
+import { HStack } from 'leather-styles/jsx';
+
+import { CopyIcon, ExternalLinkIcon } from '@leather.io/ui';
+
+import { InfoCardBtn } from '@app/components/info-card/info-card';
+
+interface SummaryFooterProps {
+ onClickLink(): void;
+ onClickCopy(): void;
+}
+export function SummaryFooter({ onClickLink, onClickCopy }: SummaryFooterProps) {
+ return (
+
+ } label="View details" onClick={onClickLink} />
+ } label="Copy ID" onClick={onClickCopy} />
+
+ );
+}
diff --git a/src/app/components/layout/card/index.ts b/src/app/components/layout/card/index.ts
new file mode 100644
index 00000000000..83747862e81
--- /dev/null
+++ b/src/app/components/layout/card/index.ts
@@ -0,0 +1,3 @@
+export { Card } from './card';
+export { ButtonRow } from './components/button-row';
+export { SummaryFooter } from './components/summary-footer';
diff --git a/src/app/components/layout/footer/footer.stories.tsx b/src/app/components/layout/footer/footer.stories.tsx
index 655e91a76ec..31fa5864361 100644
--- 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 (
-
+
diff --git a/src/app/components/layout/footer/footer.tsx b/src/app/components/layout/footer/footer.tsx
index 8d8f315997e..41476b2ca0d 100644
--- 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 (
-
-
- {children}
-
-
+ {children}
+
);
}
diff --git a/src/app/components/layout/index.ts b/src/app/components/layout/index.ts
index 9da37b9db05..ab1e880e03d 100644
--- a/src/app/components/layout/index.ts
+++ b/src/app/components/layout/index.ts
@@ -1,7 +1,7 @@
export { Page } from './page/page.layout';
export { Footer } from './footer/footer';
-export { Card } from './card/card';
-export { CardContent } from './card/card-content';
+export * from './card';
+
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
index 5aa6dee99c5..f6ee12bc2e0 100644
--- a/src/app/components/layout/page/page.layout.tsx
+++ b/src/app/components/layout/page/page.layout.tsx
@@ -9,12 +9,7 @@ interface PageProps {
export function Page({ children }: PageProps) {
return (
-
+
{children}
);
diff --git a/src/app/components/request-password.tsx b/src/app/components/request-password.tsx
index 080aeefab16..c64635e421d 100644
--- 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, Page } from '@app/components/layout';
import { ErrorLabel } from './error-label';
@@ -63,17 +63,16 @@ export function RequestPassword({ onSuccess }: RequestPasswordProps) {
}
footer={
-
+
}
>
diff --git a/src/app/features/bitcoin-choose-fee/components/bitcoin-choose-fee.layout.tsx b/src/app/features/bitcoin-choose-fee/components/bitcoin-choose-fee.layout.tsx
index 9b23952ad1f..2daf6170232 100644
--- a/src/app/features/bitcoin-choose-fee/components/bitcoin-choose-fee.layout.tsx
+++ b/src/app/features/bitcoin-choose-fee/components/bitcoin-choose-fee.layout.tsx
@@ -1,5 +1,6 @@
import { Flex, FlexProps } from 'leather-styles/jsx';
+import { Card } from '@app/components/layout';
import { LoadingSpinner } from '@app/components/loading-spinner';
interface BitcoinChooseFeeLayoutProps extends FlexProps {
@@ -19,18 +20,10 @@ export function BitcoinChooseFeeLayout({
);
}
+
return (
-
+
{children}
-
+
);
}
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
index b51ae084d0f..fbb7d948b4b 100644
--- 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 (
- <>
+
@@ -34,6 +35,6 @@ export function IncreaseFeeActions(props: IncreaseFeeActionsProps) {
>
{actionText}
- >
+
);
}
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
index bdbf8e02d22..e7d1720c102 100644
--- 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={}
footer={
-
)}
-
+
);
}
diff --git a/src/app/features/psbt-signer/components/index.ts b/src/app/features/psbt-signer/components/index.ts
index 64ca01c327f..4838d279905 100644
--- 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
deleted file mode 100644
index d940cc6d347..00000000000
--- a/src/app/features/psbt-signer/components/psbt-request-actions.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Button } from '@leather.io/ui';
-
-import { Footer } from '@app/components/layout';
-
-interface PsbtRequestActionsProps {
- isLoading?: boolean;
- onCancel(): void;
- onSignPsbt(): void;
-}
-export function PsbtRequestActions({ isLoading, onCancel, onSignPsbt }: PsbtRequestActionsProps) {
- return (
-
-
-
-
- );
-}
diff --git a/src/app/features/psbt-signer/psbt-signer.tsx b/src/app/features/psbt-signer/psbt-signer.tsx
index ee13153be63..35ddf80c3dd 100644
--- a/src/app/features/psbt-signer/psbt-signer.tsx
+++ b/src/app/features/psbt-signer/psbt-signer.tsx
@@ -11,7 +11,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 { ButtonRow, Card } 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';
@@ -94,8 +94,14 @@ export function PsbtSigner(props: PsbtSignerProps) {
+
@@ -113,24 +119,18 @@ export function PsbtSigner(props: PsbtSignerProps) {
>
Confirm
-
+
}
>
-
-
-
- {isPsbtMutable ? : null}
-
-
-
- {psbtRaw ? : null}
-
-
-
+
+
+ {isPsbtMutable ? : null}
+
+
+
+ {psbtRaw ? : null}
+
+
);
diff --git a/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx b/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx
index 8b05860953c..0aaa2f7bfd2 100644
--- a/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx
+++ b/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx
@@ -20,10 +20,12 @@ export function RetrieveTaprootToNativeSegwitLayout(
header={}
onClose={() => onClose()}
footer={
-
-
+
+
+
+
}
>
diff --git a/src/app/features/settings/sign-out/sign-out.tsx b/src/app/features/settings/sign-out/sign-out.tsx
index 54a3f0811a3..a62092234c4 100644
--- a/src/app/features/settings/sign-out/sign-out.tsx
+++ b/src/app/features/settings/sign-out/sign-out.tsx
@@ -5,7 +5,7 @@ import { Flex, HStack, styled } from 'leather-styles/jsx';
import { Button, Callout, Dialog, DialogHeader } from '@leather.io/ui';
import { useWalletType } from '@app/common/use-wallet-type';
-import { Footer } from '@app/components/layout';
+import { ButtonRow, Footer } from '@app/components/layout';
interface SignOutDialogProps {
isShowing: boolean;
@@ -39,27 +39,29 @@ export function SignOutDialog({ isShowing, onUserDeleteWallet, onClose }: SignOu
isShowing={isShowing}
onClose={onClose}
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
index 4079cf6630b..ecfd4a5753d 100644
--- 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
@@ -7,7 +7,7 @@ import { Button, Caption, Dialog, DialogHeader, ErrorIcon, Link, Title } from '@
import { StacksSendFormValues } from '@shared/models/form.model';
import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { Footer } from '@app/components/layout';
+import { ButtonRow, Footer } from '@app/components/layout';
import { useStacksHighFeeWarningContext } from './stacks-high-fee-warning-container';
@@ -26,21 +26,27 @@ export function HighFeeDialog({ learnMoreUrl }: HighFeeDialogProps) {
isShowing={showHighFeeWarningDialog}
onClose={() => setShowHighFeeWarningDialog(false)}
footer={
-
-
-
+
+
+
+
+
}
>
diff --git a/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx b/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx
index fba9ead95c6..87f0805f002 100644
--- a/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx
+++ b/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx
@@ -13,7 +13,13 @@ export function GetAddressesLayout({
onUserApproveGetAddresses,
}: GetAddressesLayoutProps) {
return (
-
+
choose asset
to send
diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
index c57b848b57e..ecfaa92c384 100644
--- a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
+++ b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx
@@ -46,7 +46,7 @@ export function SendInscriptionForm() {
onClose={() => navigate(RouteUrls.Home)}
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
index b1e0ad03a44..738354d9c05 100644
--- a/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx
+++ b/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx
@@ -13,7 +13,7 @@ import { analytics } from '@shared/utils/analytics';
import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';
import { InfoCardRow, InfoCardSeparator } from '@app/components/info-card/info-card';
import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview';
-import { Card, Footer } from '@app/components/layout';
+import { Card } from '@app/components/layout';
import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks';
import { useAppDispatch } from '@app/store';
import { inscriptionSent } from '@app/store/ordinals/ordinals.slice';
@@ -81,16 +81,14 @@ export function SendInscriptionReview() {
>
-
- Confirm and send transaction
-
-
+
+ Confirm and send transaction
+
}
>
diff --git a/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx b/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx
index 3dc7341b58a..55a8e63ca4e 100644
--- a/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx
+++ b/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx
@@ -14,7 +14,7 @@ import { copyToClipboard } from '@app/common/utils/copy-to-clipboard';
import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';
import { InfoCardBtn, InfoCardRow, InfoCardSeparator } from '@app/components/info-card/info-card';
import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview';
-import { Card, Footer } from '@app/components/layout';
+import { Card } from '@app/components/layout';
import { useToast } from '@app/features/toasts/use-toast';
import { InscriptionPreviewCard } from '../../../components/inscription-preview-card/inscription-preview-card';
@@ -60,12 +60,10 @@ export function SendInscriptionSummary() {
>
-
- } label="View details" />
- } label="Copy ID" />
-
-
+
+ } label="View details" />
+ } label="Copy ID" />
+
}
>
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
index fbbd719607c..9f43bbe76f1 100644
--- 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
@@ -17,7 +17,7 @@ import {
InfoCardRow,
InfoCardSeparator,
} from '@app/components/info-card/info-card';
-import { Card, CardContent, Content, Footer, Page } from '@app/components/layout';
+import { Card, Content, Page } from '@app/components/layout';
import { PageHeader } from '@app/features/container/headers/page.header';
import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks';
import { useBrc20Transfers } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.hooks';
@@ -110,38 +110,37 @@ export function Brc20SendFormConfirmation() {
-
- Create transfer inscription
-
-
+
+ Create transfer inscription
+
}
>
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
+
diff --git a/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form.tsx
index edc1e5317d5..c1220fc368a 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form.tsx
@@ -2,7 +2,7 @@ import { Outlet, useLocation } from 'react-router-dom';
import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
import { Form, Formik } from 'formik';
-import { Box, styled } from 'leather-styles/jsx';
+import { styled } from 'leather-styles/jsx';
import get from 'lodash.get';
import type { MarketData, Money } from '@leather.io/models';
@@ -10,7 +10,7 @@ import { Brc20AvatarIcon, Button, Callout, Link } from '@leather.io/ui';
import { convertAmountToBaseUnit, formatMoney } from '@leather.io/utils';
import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { AvailableBalance, Card, CardContent, Content, Footer, Page } from '@app/components/layout';
+import { AvailableBalance, ButtonRow, Card, Content, Page } from '@app/components/layout';
import { PageHeader } from '@app/features/container/headers/page.header';
import { AmountField } from '../../components/amount-field';
@@ -40,85 +40,78 @@ export function Brc20SendForm() {
-
-
- {props => {
- onFormStateChange(props.values);
- return (
-
- );
- }}
-
-
+
+
+ );
+ }}
+
>
diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx
index 5ee31ef7d0f..57e88842103 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx
@@ -34,7 +34,7 @@ import {
InfoCardRow,
InfoCardSeparator,
} from '@app/components/info-card/info-card';
-import { Card, CardContent, Content, Footer, Page } from '@app/components/layout';
+import { Card, Content, Page } from '@app/components/layout';
import { PageHeader } from '@app/features/container/headers/page.header';
import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks';
@@ -138,49 +138,48 @@ export function BtcSendFormConfirmation() {
-
- Confirm and send transaction
-
-
+
+ Confirm and send transaction
+
}
>
-
-
+
+
+ }
+ data-testid={SendCryptoAssetSelectors.ConfirmationDetailsRecipient}
/>
-
-
- }
- data-testid={SendCryptoAssetSelectors.ConfirmationDetailsRecipient}
- />
-
-
-
-
- {arrivesIn && }
-
-
+
+
+
+
+ {arrivesIn && }
+
diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
index 02fcffb548a..65980362074 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx
@@ -2,14 +2,13 @@ import { Outlet } from 'react-router-dom';
import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
import { Form, Formik } from 'formik';
-import { Box } from 'leather-styles/jsx';
import type { CryptoCurrencies } from '@leather.io/models';
import { useCryptoCurrencyMarketDataMeanAverage } from '@leather.io/query';
import { BtcAvatarIcon, Button, Callout, Link } from '@leather.io/ui';
import { formatMoney } from '@leather.io/utils';
-import { AvailableBalance, Card, CardContent, Content, Footer, Page } from '@app/components/layout';
+import { AvailableBalance, ButtonRow, Card, Content, Page } from '@app/components/layout';
import { PageHeader } from '@app/features/container/headers/page.header';
import { AmountField } from '../../components/amount-field';
@@ -44,89 +43,82 @@ export function BtcSendForm() {
-
-
- {props => {
- onFormStateChange(props.values);
- const sendMaxCalculation = calcMaxSpend(props.values.recipient, utxos);
+
+ {props => {
+ onFormStateChange(props.values);
+ const sendMaxCalculation = calcMaxSpend(props.values.recipient, utxos);
- return (
-
- );
- }}
-
-
+ {/* This is for testing purposes only, to make sure the form is ready to be submitted. */}
+ {calcMaxSpend(props.values.recipient, utxos).spendableBitcoin.toNumber() > 0 ? (
+
+ ) : null}
+
+ );
+ }}
+
>
diff --git a/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx
index 5b0bcd0b5d5..1eee7acf204 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx
@@ -9,7 +9,7 @@ import {
InfoCardRow,
InfoCardSeparator,
} from '@app/components/info-card/info-card';
-import { Card, CardContent, Footer } from '@app/components/layout';
+import { Card } from '@app/components/layout';
interface SendFormConfirmationProps {
recipient: string;
@@ -45,59 +45,59 @@ export function SendFormConfirmation({
}: SendFormConfirmationProps) {
return (
-
- Confirm and send transaction
-
-
+
+ Confirm and send transaction
+
}
>
-
-
+
-
- {`Make sure you include the memo so the exchange can credit the ${symbol} to your account`}
-
+
+ {`Make sure you include the memo so the exchange can credit the ${symbol} to your account`}
+
-
- }
- data-testid={SendCryptoAssetSelectors.ConfirmationDetailsRecipient}
- />
-
-
-
-
-
-
-
-
-
+
+ }
+ data-testid={SendCryptoAssetSelectors.ConfirmationDetailsRecipient}
+ />
+
+
+
+
+
+
+
+
);
}
diff --git a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-common-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-common-send-form.tsx
index bc505838b84..a8765a08b1b 100644
--- a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-common-send-form.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-common-send-form.tsx
@@ -2,7 +2,7 @@ import { Outlet, useNavigate } from 'react-router-dom';
import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors';
import { Form, Formik, FormikHelpers } from 'formik';
-import { Box } from 'leather-styles/jsx';
+import { Box, Flex } from 'leather-styles/jsx';
import { ObjectSchema } from 'yup';
import { HIGH_FEE_WARNING_LEARN_MORE_URL_STX } from '@leather.io/constants';
@@ -14,7 +14,7 @@ import { StacksSendFormValues } from '@shared/models/form.model';
import { RouteUrls } from '@shared/route-urls';
import { FeesRow } from '@app/components/fees-row/fees-row';
-import { AvailableBalance, Card, CardContent, Footer, Page } from '@app/components/layout';
+import { AvailableBalance, ButtonRow, Card, Page } from '@app/components/layout';
import { NonceSetter } from '@app/components/nonce-setter';
import { useUpdatePersistedSendFormValues } from '@app/features/popup-send-form-restoration/use-update-persisted-send-form-values';
import { HighFeeDialog } from '@app/features/stacks-high-fee-warning/stacks-high-fee-dialog';
@@ -50,59 +50,63 @@ export function StacksCommonSendForm({
const { onFormStateChange } = useUpdatePersistedSendFormValues();
return (
-
-
- {props => {
- onFormStateChange(props.values);
- return (
- <>
-
-
- >
- );
- }}
-
-
+ Continue
+
+
+
+ }
+ >
+
+ {amountField}
+ {selectedAssetField}
+
+
+
+
+
+ navigate(RouteUrls.EditNonce)}
+ >
+ Edit nonce
+
+
+
+
+
+
+ >
+ );
+ }}
+
);
}
diff --git a/src/app/pages/send/sent-summary/brc20-sent-summary.tsx b/src/app/pages/send/sent-summary/brc20-sent-summary.tsx
index bec4cbb5f78..2318ec9ecb0 100644
--- a/src/app/pages/send/sent-summary/brc20-sent-summary.tsx
+++ b/src/app/pages/send/sent-summary/brc20-sent-summary.tsx
@@ -14,7 +14,7 @@ import {
InfoCardRow,
InfoCardSeparator,
} from '@app/components/info-card/info-card';
-import { Card, CardContent, Content, Footer, Page } from '@app/components/layout';
+import { Card, Content, Page } from '@app/components/layout';
import { PageHeader } from '@app/features/container/headers/page.header';
import { TxDone } from '../send-crypto-asset-form/components/tx-done';
@@ -48,57 +48,56 @@ export function Brc20SentSummary() {
-
- }
- label="Pending BRC-20 transfers"
- onClick={onClickLink}
- />
-
-
+
+ }
+ label="Pending BRC-20 transfers"
+ onClick={onClickLink}
+ />
+
}
>
-
-
+
-
+
-
-
-
-
- You'll need to send the transfer inscription to your recipient of choice from
- the home screen once its status changes to "Ready to send"
-
- {
- openInNewTab(
- 'https://leather.gitbook.io/guides/bitcoin/sending-brc-20-tokens'
- );
- }}
- >
- Learn more
-
-
-
-
+
+
+
+
+ You'll need to send the transfer inscription to your recipient of choice from
+ the home screen once its status changes to "Ready to send"
+
+ {
+ openInNewTab(
+ 'https://leather.gitbook.io/guides/bitcoin/sending-brc-20-tokens'
+ );
+ }}
+ >
+ Learn more
+
+
+
+
-
-
-
+
+
+
-
-
-
-
+
+
+
diff --git a/src/app/pages/send/sent-summary/btc-sent-summary.tsx b/src/app/pages/send/sent-summary/btc-sent-summary.tsx
index eb533b6a9b0..98b6ba7dcde 100644
--- a/src/app/pages/send/sent-summary/btc-sent-summary.tsx
+++ b/src/app/pages/send/sent-summary/btc-sent-summary.tsx
@@ -1,8 +1,6 @@
import { useLocation } from 'react-router-dom';
-import { HStack, Stack } from 'leather-styles/jsx';
-
-import { CopyIcon, ExternalLinkIcon } from '@leather.io/ui';
+import { Stack } from 'leather-styles/jsx';
import { analytics } from '@shared/utils/analytics';
@@ -11,11 +9,10 @@ import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard';
import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';
import {
InfoCardAssetValue,
- InfoCardBtn,
InfoCardRow,
InfoCardSeparator,
} from '@app/components/info-card/info-card';
-import { Card, CardContent, Content, Footer, Page } from '@app/components/layout';
+import { Card, Content, Page, SummaryFooter } from '@app/components/layout';
import { PageHeader } from '@app/features/container/headers/page.header';
import { useToast } from '@app/features/toasts/use-toast';
@@ -59,39 +56,29 @@ export function BtcSentSummary() {
-
- }
- label="View details"
- onClick={onClickLink}
- />
- } label="Copy ID" onClick={onClickCopy} />
-
-
- }
+ contentStyle={{
+ p: 'space.00',
+ }}
+ footer={}
>
-
-
-
+
+
-
- } />
-
-
+
+ } />
+
+
-
-
- {arrivesIn && }
-
-
+
+
+ {arrivesIn && }
+
diff --git a/src/app/pages/send/sent-summary/stx-sent-summary.tsx b/src/app/pages/send/sent-summary/stx-sent-summary.tsx
index 21cf965be63..20f5be8572b 100644
--- a/src/app/pages/send/sent-summary/stx-sent-summary.tsx
+++ b/src/app/pages/send/sent-summary/stx-sent-summary.tsx
@@ -1,8 +1,6 @@
import { useLocation } from 'react-router-dom';
-import { HStack, Stack } from 'leather-styles/jsx';
-
-import { CopyIcon, ExternalLinkIcon } from '@leather.io/ui';
+import { Stack } from 'leather-styles/jsx';
import { analytics } from '@shared/utils/analytics';
@@ -11,11 +9,10 @@ import { useStacksExplorerLink } from '@app/common/hooks/use-stacks-explorer-lin
import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';
import {
InfoCardAssetValue,
- InfoCardBtn,
InfoCardRow,
InfoCardSeparator,
} from '@app/components/info-card/info-card';
-import { Card, CardContent, Content, Footer, Page } from '@app/components/layout';
+import { Card, Content, Page, SummaryFooter } from '@app/components/layout';
import { PageHeader } from '@app/features/container/headers/page.header';
import { useToast } from '@app/features/toasts/use-toast';
@@ -58,40 +55,30 @@ export function StxSentSummary() {
-
- }
- label="View details"
- onClick={onClickLink}
- />
- } label="Copy ID" onClick={onClickCopy} />
-
-
- }
+ contentStyle={{
+ p: 'space.00',
+ }}
+ footer={}
>
-
-
+
-
+
-
- } />
-
-
+
+ } />
+
+
-
-
-
-
-
+
+
+
+
diff --git a/src/app/pages/swap/components/swap-review.tsx b/src/app/pages/swap/components/swap-review.tsx
index 3a3bbebc2ea..87f1f617fde 100644
--- a/src/app/pages/swap/components/swap-review.tsx
+++ b/src/app/pages/swap/components/swap-review.tsx
@@ -5,7 +5,7 @@ import { SwapSelectors } from '@tests/selectors/swap.selectors';
import { Button } from '@leather.io/ui';
import { LoadingKeys, useLoading } from '@app/common/hooks/use-loading';
-import { Card, CardContent, Footer } from '@app/components/layout';
+import { Card } from '@app/components/layout';
import { useSwapContext } from '../swap.context';
import { SwapAssetsPair } from './swap-assets-pair/swap-assets-pair';
@@ -18,24 +18,21 @@ export function SwapReview() {
return (
<>
-
- Swap
-
-
+
+ Swap
+
}
>
-
-
-
-
+
+
>
diff --git a/src/app/pages/swap/swap.tsx b/src/app/pages/swap/swap.tsx
index a9cc1eadcf5..e9973007e5e 100644
--- a/src/app/pages/swap/swap.tsx
+++ b/src/app/pages/swap/swap.tsx
@@ -7,7 +7,7 @@ import { useFormikContext } from 'formik';
import { Button } from '@leather.io/ui';
import { isUndefined } from '@leather.io/utils';
-import { Card, CardContent, Footer } from '@app/components/layout';
+import { Card } from '@app/components/layout';
import { LoadingSpinner } from '@app/components/loading-spinner';
import { SwapAssetSelectBase } from './components/swap-asset-select/swap-asset-select-base';
@@ -47,23 +47,21 @@ export function Swap() {
return (
-
- Review and swap
-
-
+
+ Review and swap
+
}
>
-
-
-
-
+
+
+
);
diff --git a/src/app/pages/update-profile-request/components/profile-data-content.tsx b/src/app/pages/update-profile-request/components/profile-data-content.tsx
index 8b5c26f13a9..9a27beaafae 100644
--- a/src/app/pages/update-profile-request/components/profile-data-content.tsx
+++ b/src/app/pages/update-profile-request/components/profile-data-content.tsx
@@ -24,7 +24,7 @@ export function ProfileDataContent(props: ProfileDataContentProps) {
>
diff --git a/src/background/popup.ts b/src/background/popup.ts
index 7dd57833bfb..04a503db393 100644
--- a/src/background/popup.ts
+++ b/src/background/popup.ts
@@ -1,3 +1,5 @@
+import { tokens } from '@leather.io/tokens';
+
import { pxStringToNumber } from '@shared/utils/px-string-to-number';
interface PopupOptions {
@@ -5,18 +7,12 @@ interface PopupOptions {
title?: string;
skipPopupFallback?: boolean;
}
-// FIXME import popupTokens from '@leather.io/tokens' when bundling working
-// https://github.com/leather-io/mono/pull/76
-const popupTokens = {
- popupWidth: { value: '390px' },
- popupHeight: { value: '756px' },
-};
export function popup(options: PopupOptions): Promise {
const { url } = options;
- const popupWidth = pxStringToNumber(popupTokens.popupWidth.value);
- const popupHeight = pxStringToNumber(popupTokens.popupHeight.value);
+ const popupWidth = pxStringToNumber(tokens.sizes.popupWidth.value);
+ const popupHeight = pxStringToNumber(tokens.sizes.popupHeight.value);
return new Promise(resolve => {
// @see https://developer.chrome.com/docs/extensions/reference/windows/#method-getCurrent
diff --git a/theme/global/global.ts b/theme/global/global.ts
index b6a07b06e57..06f0511f0ab 100644
--- a/theme/global/global.ts
+++ b/theme/global/global.ts
@@ -1,6 +1,7 @@
-import { tokens } from '@leather.io/tokens';
import { defineGlobalStyles } from '@pandacss/dev';
+import { tokens } from '@leather.io/tokens';
+
// ts-unused-exports:disable-next-line
export const globalCss = defineGlobalStyles({
button: {
@@ -34,16 +35,24 @@ export const globalCss = defineGlobalStyles({
},
},
'.mode__popup': {
- 'html,body, #app, .radix-themes': {
- maxHeight: '100vh',
+ '&, body': {
+ height: '100%',
+ width: '100%',
minHeight: tokens.sizes.dialogHeight.value,
- width: tokens.sizes.popupWidth.value,
+ maxWidth: tokens.sizes.popupMaxWidth.value,
+ margin: '0 auto',
+ },
+ '&, #main-container': {
+ height: '100vh',
+ },
+ },
+ '.mode__action-popup': {
+ 'html,body': {
+ minWidth: tokens.sizes.popupWidth.value,
+ maxWidth: tokens.sizes.popupWidth.value,
+ minHeight: tokens.sizes.dialogHeight.value,
+ maxHeight: tokens.sizes.dialogHeight.value,
margin: '0 auto',
-
- '::-webkit-scrollbar': {
- display: 'none',
- width: 0,
- },
},
},
});
diff --git a/webpack/webpack.config.base.js b/webpack/webpack.config.base.js
index f1bbbe21b98..e15301aac4b 100755
--- a/webpack/webpack.config.base.js
+++ b/webpack/webpack.config.base.js
@@ -232,6 +232,11 @@ export const config = {
filename: 'popup.html',
...HTML_PROD_OPTIONS,
}),
+ new HtmlWebpackPlugin({
+ template: path.join(SRC_ROOT_PATH, '../', 'public', 'html', 'action-popup.html'),
+ filename: 'action-popup.html',
+ ...HTML_PROD_OPTIONS,
+ }),
new HtmlWebpackPlugin({
template: path.join(SRC_ROOT_PATH, '../', 'public', 'html', 'debug.html'),
filename: 'debug.html',