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/info-card/info-card.tsx b/src/app/components/info-card/info-card.tsx index c7a5a17562f..7dce0e7900e 100644 --- a/src/app/components/info-card/info-card.tsx +++ b/src/app/components/info-card/info-card.tsx @@ -105,7 +105,6 @@ export function InfoCardBtn({ icon, label, onClick }: InfoCardBtnProps) { interface InfoCardFooterProps { children: ReactNode; } -/** @deprecated replace with ui/footer */ export function InfoCardFooter({ children }: InfoCardFooterProps) { return ( - {children} - - ); -} diff --git a/src/app/components/layout/card/card.stories.tsx b/src/app/components/layout/card/card.stories.tsx index 5778025c161..3806983bfd2 100644 --- a/src/app/components/layout/card/card.stories.tsx +++ b/src/app/components/layout/card/card.stories.tsx @@ -1,28 +1,110 @@ +import { TooltipProvider } from '@radix-ui/react-tooltip'; import type { Meta } from '@storybook/react'; -import { Box } from 'leather-styles/jsx'; +import { Box, styled } from 'leather-styles/jsx'; -import { Button } from '@leather.io/ui'; +import { Button, Logo } from '@leather.io/ui'; import { Card as Component } from './card'; +import { AvailableBalance, ButtonRow } from './index'; const meta: Meta = { component: Component, tags: ['autodocs'], title: 'Layout/Card', + decorators: [ + Story => ( + + + + ), + ], }; export default meta; export function Card() { + return ( + + Card content + + ); +} + +export function CardWithButtonFooter() { return ( null}> - Create new account + Button } > - + Card content + + ); +} +export function CardWithButtonRowFooter() { + return ( + + + + + } + > + Card content + + ); +} + +export function CardWithBalanceFooter() { + return ( + + + + + } + > + Card content + + ); +} + +export function CardWithBigHeader() { + return ( + + choose asset
to fund + + } + > + Card content + + ); +} + +export function CardWithLogo() { + return ( + + + + + + } + > + Card content ); } diff --git a/src/app/components/layout/card/card.tsx b/src/app/components/layout/card/card.tsx index c8c961b9a55..7ab9a5b9551 100644 --- a/src/app/components/layout/card/card.tsx +++ b/src/app/components/layout/card/card.tsx @@ -1,20 +1,65 @@ import type { ReactNode } from 'react'; -import { Flex } from 'leather-styles/jsx'; +import { Flex, FlexProps } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; interface CardProps { children: ReactNode; dataTestId?: string; header?: ReactNode; footer?: ReactNode; + footerBorder?: boolean; + contentStyle?: FlexProps; } -export function Card({ children, dataTestId, header, footer }: CardProps) { +export function Card({ + children, + dataTestId, + header, + footer, + contentStyle, + footerBorder = false, + ...props +}: CardProps & FlexProps) { return ( - + {header} - {children} - {footer} + + {children} + + {footer && ( + + {footer} + + )} ); } diff --git a/src/app/components/layout/footer/available-balance.tsx b/src/app/components/layout/card/components/available-balance.tsx similarity index 100% rename from src/app/components/layout/footer/available-balance.tsx rename to src/app/components/layout/card/components/available-balance.tsx 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..0127a382eed --- /dev/null +++ b/src/app/components/layout/card/index.ts @@ -0,0 +1,4 @@ +export { Card } from './card'; +export { ButtonRow } from './components/button-row'; +export { SummaryFooter } from './components/summary-footer'; +export { AvailableBalance } from './components/available-balance'; diff --git a/src/app/components/layout/footer/footer.stories.tsx b/src/app/components/layout/footer/footer.stories.tsx deleted file mode 100644 index 655e91a76ec..00000000000 --- a/src/app/components/layout/footer/footer.stories.tsx +++ /dev/null @@ -1,133 +0,0 @@ -import type { Meta } from '@storybook/react'; -import { Flex, styled } from 'leather-styles/jsx'; - -import { Button, Link } from '@leather.io/ui'; - -import { Footer as Component } from './footer'; - -const meta: Meta = { - component: Component, - tags: ['autodocs'], - title: 'Containers/Footer', - parameters: { - controls: { - disable: true, - // TODO try get rid of these empty controls - // https://github.com/storybookjs/storybook/issues/24422 - hideNoControlsWarning: true, - }, - }, -}; - -export default meta; - -export function Footer() { - return ( - - - - ); -} - -export function SignOutConfirmFooter() { - return ( - - - - - - - ); -} - -export function ReceiveTokensFooter() { - return ( - - - - ); -} - -export function RequestPasswordFooter() { - return ( - - - - ); -} - -export function FooterWithText() { - return ( - - - - - - Leather Wallet will now be provided by Leather Wallet LLC [a subsidiary of Nassau Machines - Inc]. Please review and accept Leather Wallet{' '} - - Terms of Service - {' '} - and{' '} - - Privacy Policy - - . - - - - ); -} - -export function FooterWithLink() { - return ( - - - - - - View all addresses - - - - ); -} - -export function FooterWithBalancesAbove() { - return ( - - - 0.00048208 BTC - $ 1,100.00 - - - - ); -} diff --git a/src/app/components/layout/footer/footer.tsx b/src/app/components/layout/footer/footer.tsx index 8d8f315997e..9343c63bb30 100644 --- a/src/app/components/layout/footer/footer.tsx +++ b/src/app/components/layout/footer/footer.tsx @@ -1,31 +1,25 @@ -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) { +/** @deprecated TODO: only used in Dialogs so should move to monorepo/ui/dialog */ +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..5e3b71a595a 100644 --- a/src/app/components/layout/index.ts +++ b/src/app/components/layout/index.ts @@ -1,8 +1,8 @@ export { Page } from './page/page.layout'; export { Footer } from './footer/footer'; -export { Card } from './card/card'; -export { CardContent } from './card/card-content'; -export { AvailableBalance } from './footer/available-balance'; +export * from './card'; + +export { AvailableBalance } from './card/components/available-balance'; export { Content } from './layouts/content.layout'; export { TwoColumnLayout } from './layouts/two-column.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..6d0a7f2e297 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'; @@ -55,6 +55,9 @@ export function RequestPassword({ onSuccess }: RequestPasswordProps) { return ( @@ -63,17 +66,16 @@ export function RequestPassword({ onSuccess }: RequestPasswordProps) { } footer={ -
- -
+ } > diff --git a/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx b/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx index 3ad80706206..199e0673f92 100644 --- a/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx +++ b/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; -import { Box, FlexProps, Stack, styled } from 'leather-styles/jsx'; +import { Box, Flex, FlexProps, Stack } from 'leather-styles/jsx'; import type { BtcFeeType, Money } from '@leather.io/models'; import { formatMoney } from '@leather.io/utils'; @@ -10,10 +10,11 @@ import type { TransferRecipient } from '@shared/models/form.model'; import { BitcoinCustomFee } from '@app/components/bitcoin-custom-fee/bitcoin-custom-fee'; import { MAX_FEE_RATE_MULTIPLIER } from '@app/components/bitcoin-custom-fee/hooks/use-bitcoin-custom-fee'; import { OnChooseFeeArgs } from '@app/components/bitcoin-fees-list/bitcoin-fees-list'; -import { AvailableBalance } from '@app/components/layout/footer/available-balance'; +import { AvailableBalance, Card } from '@app/components/layout'; +import { LoadingSpinner } from '@app/components/loading-spinner'; import { useCurrentBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks'; -import { BitcoinChooseFeeLayout } from './components/bitcoin-choose-fee.layout'; +import { ChooseFeeAmount } from './components/choose-fee-amount'; import { ChooseFeeSubtitle } from './components/choose-fee-subtitle'; import { ChooseFeeTabs } from './components/choose-fee-tabs'; import { InsufficientBalanceError } from './components/insufficient-balance-error'; @@ -51,17 +52,25 @@ export function BitcoinChooseFee({ const hasAmount = amount.amount.isGreaterThan(0); const [customFeeInitialValue, setCustomFeeInitialValue] = useState(recommendedFeeRate); + if (isLoading) { + return ( + + + + ); + } + return ( - + + + + } + {...rest} + > - {hasAmount && ( - - {formatMoney(amount)} - - )} + {hasAmount && } {showError ? ( ) : ( @@ -85,10 +94,7 @@ export function BitcoinChooseFee({ } feesList={feesList} /> - - - - + ); } 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 deleted file mode 100644 index 9b23952ad1f..00000000000 --- a/src/app/features/bitcoin-choose-fee/components/bitcoin-choose-fee.layout.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { Flex, FlexProps } from 'leather-styles/jsx'; - -import { LoadingSpinner } from '@app/components/loading-spinner'; - -interface BitcoinChooseFeeLayoutProps extends FlexProps { - children: React.JSX.Element; - isLoading: boolean; -} - -export function BitcoinChooseFeeLayout({ - children, - isLoading, - ...rest -}: BitcoinChooseFeeLayoutProps) { - if (isLoading) { - return ( - - - - ); - } - return ( - - {children} - - ); -} diff --git a/src/app/features/bitcoin-choose-fee/components/choose-fee-amount.tsx b/src/app/features/bitcoin-choose-fee/components/choose-fee-amount.tsx new file mode 100644 index 00000000000..621a5dc95b6 --- /dev/null +++ b/src/app/features/bitcoin-choose-fee/components/choose-fee-amount.tsx @@ -0,0 +1,17 @@ +import { styled } from 'leather-styles/jsx'; + +import type { Money } from '@leather.io/models'; +import { formatMoney } from '@leather.io/utils'; + +interface ChooseFeeAmountProps { + amount: Money; + showError: boolean; +} + +export function ChooseFeeAmount({ amount, showError }: ChooseFeeAmountProps) { + return ( + + {formatMoney(amount)} + + ); +} 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..204ca99cc25 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 @@ -3,6 +3,7 @@ import { useFormikContext } from 'formik'; import { Button } from '@leather.io/ui'; import { useWalletType } from '@app/common/use-wallet-type'; +import { ButtonRow } from '@app/components/layout'; interface IncreaseFeeActionsProps { isBroadcasting?: boolean; @@ -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={ -
+
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 ee13153be63..e2c496cab5e 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 7ff8837249b..3811aef9328 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() { > - -
+ } > 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 d23168993ee..c4eeaa11c8d 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() { - -
+ } > - - + + + + + + - - - - - - - - - + + 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 ( -
- - - -
- } - > - - - } - autoComplete="off" - switchableAmount={ - marketData ? ( - - ) : undefined - } + + {props => { + onFormStateChange(props.values); + return ( + + + + - } - name={ticker} - symbol={ticker} + + } + > + - - -
  • 1. Create transfer inscription with amount to send
    • -
  • 2. Send transfer inscription to recipient of choice
    • -     - { - openInNewTab( - 'https://leather.gitbook.io/guides/bitcoin/sending-brc-20-tokens' - ); - }} - textStyle="body.02" - > - Learn more - -     -     - + } + autoComplete="off" + switchableAmount={ + marketData ? ( + + ) : undefined + } + /> + } name={ticker} symbol={ticker} /> + + +
  • 1. Create transfer inscription with amount to send
    • +
  • 2. Send transfer inscription to recipient of choice
    • +     + { + openInNewTab( + 'https://leather.gitbook.io/guides/bitcoin/sending-brc-20-tokens' + ); + }} + textStyle="body.02" + > + Learn more + +     + - - - ); - }} - - + + + ); + }} + 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 8e7d9d65816..8eb8d0fd2c3 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() { - -
    + } > - - + + + } + 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..d0baf285dcc 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 @@ -9,7 +9,7 @@ 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 +44,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 ( -
    - - - - - } - > - - + + + + + } + > + - } - onSetIsSendingMax={onSetIsSendingMax} isSendingMax={isSendingMax} - switchableAmount={ - - } - /> - } - name="Bitcoin" - symbol={symbol} + onSetIsSendingMax={onSetIsSendingMax} + sendMaxBalance={sendMaxCalculation.spendableBitcoin.toString()} + sendMaxFee={sendMaxCalculation.spendAllFee.toString()} /> - - {currentNetwork.chain.bitcoin.bitcoinNetwork === 'testnet' && ( - - This is a Bitcoin testnet transaction. - - Get testnet BTC here ↗ - - - )} - - - + } + onSetIsSendingMax={onSetIsSendingMax} + isSendingMax={isSendingMax} + switchableAmount={ + + } + /> + } name="Bitcoin" symbol={symbol} /> + + {currentNetwork.chain.bitcoin.bitcoinNetwork === 'testnet' && ( + + This is a Bitcoin testnet transaction. + + Get testnet BTC here ↗ + + + )} + + - {/* 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} - - ); - }} -
    -     + {/* 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 ( - - + } > - - + - - {`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 ( - <> - -
    - - - - - } - > - - {amountField} - {selectedAssetField} - - - - - - navigate(RouteUrls.EditNonce)} + + {props => { + onFormStateChange(props.values); + return ( + <> + + + + + + + } + > + + {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 ( <> - - + } > - - - - + + 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 ( - - + } > - - - - + + + ); 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..910b5501094 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,21 @@ 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', + }, + }, + '.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',