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/request-password.tsx b/src/app/components/request-password.tsx index 7993607fc71..6055a8070e8 100644 --- 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) { } footer={ - + } > 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 8a382bca309..84df0b3547c 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 @@ -67,7 +67,7 @@ export function IncreaseBtcFeeDialog() { onClose={onClose} header={} footer={ -
+
navigate(RouteUrls.Home)} header={} footer={ -
+
- - -
- ); -} diff --git a/src/app/features/psbt-signer/psbt-signer.tsx b/src/app/features/psbt-signer/psbt-signer.tsx index 50073036c2d..15d7583f6c6 100644 --- 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) { - - -
+ + + + + + } > - + {isPsbtMutable ? : 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 d72d6a97620..284dcae2722 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 @@ -22,10 +22,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 04e83ee6e6b..e13b4b4c96b 100644 --- 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={ -
- - +
+ + + +
} > 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 9ebcd5850e7..d4dbcbcb25e 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 @@ -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={ -
- - +
+ + + +
} > 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 24e26acf4d4..d817e1079ee 100644 --- 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() { > + -
+ } > 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 8cbcff5c829..fbf44021dba 100644 --- 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() { > + } 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 9eb2af315e1..aad66cce23d 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 @@ -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() { + -
+ } > 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 bc3ffd79965..0fc7ecf49d2 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 @@ -11,9 +11,7 @@ import { convertAmountToBaseUnit, formatMoney } from '@leather.io/utils'; import { openInNewTab } from '@app/common/utils/open-in-new-tab'; import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance'; -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 { AmountField } from '../../components/amount-field'; import { SelectedAssetField } from '../../components/selected-asset-field'; @@ -52,7 +50,7 @@ export function Brc20SendForm() {
+
+ } > 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 b54a4b4b730..6d539547685 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 @@ -35,9 +35,7 @@ import { InfoCardSeparator, } from '@app/components/info-card/info-card'; import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.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'; @@ -137,7 +135,7 @@ export function BtcSendFormConfirmation() { + -
+ } > 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 d5559567d73..87674ffcda0 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 @@ -10,9 +10,7 @@ import { BtcAvatarIcon, Button, Callout, Link } from '@leather.io/ui'; import { formatMoney } from '@leather.io/utils'; import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance'; -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 { AmountField } from '../../components/amount-field'; import { SelectedAssetField } from '../../components/selected-asset-field'; @@ -63,7 +61,7 @@ export function BtcSendForm() { + - + } > 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 fa2dc988213..34d1596f676 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 @@ -18,9 +18,7 @@ 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'; import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance'; -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 { MemoField } from '../../components/memo-field'; import { StacksRecipientField } from '../../family/stacks/components/stacks-recipient-field'; @@ -67,7 +65,7 @@ export function StacksCommonSendForm({ + - + } > diff --git a/src/app/pages/swap/swap.tsx b/src/app/pages/swap/swap.tsx index 260777648e1..ff426a4aabb 100644 --- a/src/app/pages/swap/swap.tsx +++ b/src/app/pages/swap/swap.tsx @@ -8,9 +8,7 @@ import { Button } from '@leather.io/ui'; import { isUndefined } from '@leather.io/utils'; import { LoadingSpinner } from '@app/components/loading-spinner'; -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 { SwapAssetSelectBase } from './components/swap-asset-select/swap-asset-select-base'; import { SwapAssetSelectQuote } from './components/swap-asset-select/swap-asset-select-quote'; @@ -50,7 +48,7 @@ export function Swap() { return ( + - + } > diff --git a/src/app/ui/components/containers/footers/footer.tsx b/src/app/ui/components/containers/footers/footer.tsx index 8d8f315997e..f03757dc15c 100644 --- a/src/app/ui/components/containers/footers/footer.tsx +++ b/src/app/ui/components/containers/footers/footer.tsx @@ -1,31 +1,28 @@ import type { ReactNode } from 'react'; -import { Flex, styled } from 'leather-styles/jsx'; +import { Flex, FlexProps } from 'leather-styles/jsx'; -interface FooterProps { +export interface FooterProps extends FlexProps { children: ReactNode; - variant?: 'page' | 'card'; - flexDirection?: 'column' | 'row'; } -export function Footer({ children, variant = 'page', flexDirection = 'column' }: FooterProps) { +export function Footer({ children, ...props }: FooterProps) { return ( - - - {children} - - + {children} + ); } diff --git a/src/app/ui/layout/card/card-footer.tsx b/src/app/ui/layout/card/card-footer.tsx new file mode 100644 index 00000000000..9883169c308 --- /dev/null +++ b/src/app/ui/layout/card/card-footer.tsx @@ -0,0 +1,16 @@ +import { Footer, FooterProps } from '@app/ui/components/containers/footers/footer'; + +export function CardFooter({ children, ...props }: FooterProps) { + return ( +
+ {children} +
+ ); +} diff --git a/src/app/ui/layout/card/index.ts b/src/app/ui/layout/card/index.ts new file mode 100644 index 00000000000..87ba06b81d4 --- /dev/null +++ b/src/app/ui/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/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..8bc555aad63 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,20 @@ export const globalCss = defineGlobalStyles({ }, }, '.mode__popup': { - 'html,body, #app, .radix-themes': { - maxHeight: '100vh', + '&, body': { + height: '100%', + width: '100%', + maxWidth: '640px', + margin: '0 auto', + }, + }, + '.mode__action-popup': { + 'html,body': { + minWidth: tokens.sizes.popupWidth.value, + maxWidth: tokens.sizes.popupWidth.value, minHeight: tokens.sizes.dialogHeight.value, - width: tokens.sizes.popupWidth.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',