diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 00342974047..9bec459c1c4 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -17,6 +17,7 @@ const preview: Preview = { ...customViewports, }, }, + toc: true, }, }; diff --git a/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx b/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx index b2cb03e8b1e..1a490a51f74 100644 --- a/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx +++ b/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx @@ -1,5 +1,6 @@ import { Dispatch, SetStateAction, useCallback, useRef } from 'react'; +import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors'; import { Form, Formik } from 'formik'; import { Stack, styled } from 'leather-styles/jsx'; import * as yup from 'yup'; @@ -8,7 +9,6 @@ import { BtcFeeType } from '@shared/models/fees/bitcoin-fees.model'; import { createMoney } from '@shared/models/money.model'; import { openInNewTab } from '@app/common/utils/open-in-new-tab'; -import { PreviewButton } from '@app/components/preview-button'; import { LeatherButton } from '@app/ui/components/button'; import { OnChooseFeeArgs } from '../bitcoin-fees-list/bitcoin-fees-list'; @@ -120,7 +120,14 @@ export function BitcoinCustomFee({ /> - + props.handleSubmit} + type="submit" + > + Use custom fee + ); diff --git a/src/app/components/preview-button.tsx b/src/app/components/preview-button.tsx deleted file mode 100644 index 6161fd23a1a..00000000000 --- a/src/app/components/preview-button.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors'; -import { useFormikContext } from 'formik'; - -import { LeatherButton } from '@app/ui/components/button'; - -interface PreviewButtonProps { - text?: string; - isDisabled?: boolean; -} -export function PreviewButton({ text = 'Continue', isDisabled, ...props }: PreviewButtonProps) { - const { handleSubmit } = useFormikContext(); - - return ( - handleSubmit()} - type="submit" - {...props} - > - {text} - - ); -} 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 99e3f3472bc..78932be32da 100644 --- a/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx +++ b/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx @@ -7,12 +7,12 @@ import { BtcFeeType } from '@shared/models/fees/bitcoin-fees.model'; import { Money } from '@shared/models/money.model'; import { formatMoney } from '@app/common/money/format-money'; -import { AvailableBalance } from '@app/components/available-balance'; 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 { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-segwit-balance.hooks'; import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; +import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance'; import { BitcoinChooseFeeLayout } from './components/bitcoin-choose-fee.layout'; import { ChooseFeeSubtitle } from './components/choose-fee-subtitle'; @@ -82,7 +82,7 @@ export function BitcoinChooseFee({ feesList={feesList} /> - + diff --git a/src/app/pages/send/send-crypto-asset-form/components/form-footer.tsx b/src/app/pages/send/send-crypto-asset-form/components/form-footer.tsx deleted file mode 100644 index 2993596e33b..00000000000 --- a/src/app/pages/send/send-crypto-asset-form/components/form-footer.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { Box } from 'leather-styles/jsx'; -import { Flex } from 'leather-styles/jsx'; - -import { Money } from '@shared/models/money.model'; - -import { whenPageMode } from '@app/common/utils'; -import { AvailableBalance } from '@app/components/available-balance'; -import { PreviewButton } from '@app/components/preview-button'; - -export function FormFooter(props: { balance: Money; balanceTooltipLabel?: string }) { - const { balance, balanceTooltipLabel } = props; - - return ( - - - - - - - ); -} diff --git a/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form.tsx index 8e0ea15e638..dfb1f1b3cc7 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc20-send-form.tsx @@ -1,16 +1,19 @@ 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 get from 'lodash.get'; +import { formatMoney } from '@app/common/money/format-money'; import { openInNewTab } from '@app/common/utils/open-in-new-tab'; import { InfoLabel } from '@app/components/info-label'; import { LeatherButton } from '@app/ui/components/button'; +import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance'; +import { Footer } from '@app/ui/components/containers/footers/footer'; import { Brc20TokenIcon } from '@app/ui/components/icons/brc20-token-icon'; import { AmountField } from '../../components/amount-field'; -import { FormFooter } from '../../components/form-footer'; import { SelectedAssetField } from '../../components/selected-asset-field'; import { SendCryptoAssetFormLayout } from '../../components/send-crypto-asset-form.layout'; import { SendMaxButton } from '../../components/send-max-button'; @@ -80,11 +83,20 @@ export function Brc20SendForm() { + - ); 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 42af9f7ee99..dcba0de6f72 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 @@ -7,14 +7,17 @@ import { Box } from 'leather-styles/jsx'; import { HIGH_FEE_WARNING_LEARN_MORE_URL_BTC } from '@shared/constants'; import { CryptoCurrencies } from '@shared/models/currencies.model'; +import { formatMoney } from '@app/common/money/format-money'; import { HighFeeDrawer } from '@app/features/high-fee-drawer/high-fee-drawer'; import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-segwit-balance.hooks'; import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks'; import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; +import { LeatherButton } from '@app/ui/components/button'; +import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance'; +import { Footer } from '@app/ui/components/containers/footers/footer'; import { BtcIcon } from '@app/ui/components/icons/btc-icon'; import { AmountField } from '../../components/amount-field'; -import { FormFooter } from '../../components/form-footer'; import { SelectedAssetField } from '../../components/selected-asset-field'; import { SendCryptoAssetFormLayout } from '../../components/send-crypto-asset-form.layout'; import { SendFiatValue } from '../../components/send-fiat-value'; @@ -92,7 +95,17 @@ export function BtcSendForm() { {currentNetwork.chain.bitcoin.bitcoinNetwork === 'testnet' && } - + +
+ props.handleSubmit()} + type="submit" + > + Continue + + +
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 8a4041e0993..b685661ae1a 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 @@ -1,5 +1,6 @@ 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 { ObjectSchema } from 'yup'; @@ -10,13 +11,16 @@ import { StacksSendFormValues } from '@shared/models/form.model'; import { Money } from '@shared/models/money.model'; import { RouteUrls } from '@shared/route-urls'; +import { formatMoney } from '@app/common/money/format-money'; import { EditNonceButton } from '@app/components/edit-nonce-button'; import { FeesRow } from '@app/components/fees-row/fees-row'; import { NonceSetter } from '@app/components/nonce-setter'; import { HighFeeDrawer } from '@app/features/high-fee-drawer/high-fee-drawer'; import { useUpdatePersistedSendFormValues } from '@app/features/popup-send-form-restoration/use-update-persisted-send-form-values'; +import { LeatherButton } from '@app/ui/components/button'; +import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance'; +import { Footer } from '@app/ui/components/containers/footers/footer'; -import { FormFooter } from '../../components/form-footer'; import { MemoField } from '../../components/memo-field'; import { SendCryptoAssetFormLayout } from '../../components/send-crypto-asset-form.layout'; import { StacksRecipientField } from '../../family/stacks/components/stacks-recipient-field'; @@ -46,7 +50,6 @@ export function StacksCommonSendForm({ }: StacksCommonSendFormProps) { const navigate = useNavigate(); const { onFormStateChange } = useUpdatePersistedSendFormValues(); - return ( navigate(RouteUrls.EditNonce)} /> - + +
+ props.handleSubmit()} + type="submit" + > + Continue + + +
diff --git a/src/app/components/available-balance.tsx b/src/app/ui/components/containers/footers/available-balance.tsx similarity index 62% rename from src/app/components/available-balance.tsx rename to src/app/ui/components/containers/footers/available-balance.tsx index 34e4bc143c6..19e9b90e1ba 100644 --- a/src/app/components/available-balance.tsx +++ b/src/app/ui/components/containers/footers/available-balance.tsx @@ -1,17 +1,17 @@ import { Box, Flex, HStack, styled } from 'leather-styles/jsx'; -import { Money } from '@shared/models/money.model'; - -import { formatMoney } from '@app/common/money/format-money'; import { InfoIcon } from '@app/ui/components/icons/info-icon'; import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; -export function AvailableBalance(props: { balance: Money; balanceTooltipLabel?: string }) { - const { - balance, - balanceTooltipLabel = 'Amount that is immediately available for use after taking into account any pending transactions or holds placed on your account by the protocol.', - } = props; +interface AvailableBalanceProps { + balance: string; + balanceTooltipLabel?: string; +} +export function AvailableBalance({ + balance, + balanceTooltipLabel = 'Amount that is immediately available for use after taking into account any pending transactions or holds placed on your account by the protocol.', +}: AvailableBalanceProps) { return ( @@ -25,7 +25,7 @@ export function AvailableBalance(props: { balance: Money; balanceTooltipLabel?: - {formatMoney(balance)} + {balance} ); diff --git a/src/app/ui/components/containers/footers/footer.stories.tsx b/src/app/ui/components/containers/footers/footer.stories.tsx index 691142bf362..6fc3a625d0f 100644 --- a/src/app/ui/components/containers/footers/footer.stories.tsx +++ b/src/app/ui/components/containers/footers/footer.stories.tsx @@ -1,7 +1,10 @@ import type { Meta } from '@storybook/react'; +import { Flex, styled } from 'leather-styles/jsx'; import { LeatherButton } from '@app/ui/components/button'; +import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance'; +// import { customViewports } from '../../../../../../.storybook/viewports'; import { Footer as Component } from './footer'; const meta: Meta = { @@ -15,6 +18,12 @@ const meta: Meta = { // https://github.com/storybookjs/storybook/issues/24422 hideNoControlsWarning: true, }, + + // TODO - tried to tie this to specific viewports only + // viewport: { + // viewports: customViewports.extension, + // defaultViewport: 'Extension Popout', + // }, }, }; @@ -33,19 +42,21 @@ export function Footer() { export function SignOutConfirmFooter() { return ( - null}> - Cancel - - null} - type="submit" - > - Sign out - + + null}> + Cancel + + null} + type="submit" + > + Sign out + + ); } @@ -60,6 +71,7 @@ export function ReceiveTokensFooter() { ); } +// This should just be footer without the weird hacks export function RequestPasswordFooter() { return ( @@ -68,9 +80,9 @@ export function RequestPasswordFooter() { // can I move this style to footer / do I need it? // - something weird happens with this button overflowing // fullWidth - width={{ base: 'calc(100vw - 48px)', md: 'calc(100vw - 96px)', lg: '100%' }} + // width={{ base: 'calc(100vw - 48px)', md: 'calc(100vw - 96px)', lg: '100%' }} onClick={() => null} - mt={['unset', 'space.05']} + // mt={['unset', 'space.05']} // mx={{ base: 'space.05', md: 'unset' }} > Continue @@ -78,3 +90,83 @@ export function RequestPasswordFooter() { ); } + +export function FooterWithText() { + return ( + + null}> + Continue + + + + + 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 ( + + null}> + Button + + + + {/* < try ExternalLink here and move into Storybook? */} + + View all addresses + + + + ); +} + +export function FooterWithBalance() { + return ( + + null} type="submit"> + Button + + + + ); +} + +export function FooterWithBalancesAbove() { + return ( + + + 0.00048208 BTC + $ 1,100.00 + + null} type="submit"> + Button + + + ); +} diff --git a/src/app/ui/components/containers/footers/footer.tsx b/src/app/ui/components/containers/footers/footer.tsx index 633d3c37726..438ba936d44 100644 --- a/src/app/ui/components/containers/footers/footer.tsx +++ b/src/app/ui/components/containers/footers/footer.tsx @@ -2,19 +2,8 @@ import { Flex } from 'leather-styles/jsx'; import { HasChildren } from '@app/common/has-children'; -// interface FooterProps { -// children: ReactNode; -// } -/* - * NOTES: Only 3 places using the footer now - always in Dialog - * - * switch-account-drawer: single CTA - * receive-tokens.layout: single CTA - * sign-out-confirm: two 'secondary' CTAs - * - */ - -export function Footer({ children /*, ...rest*/ }: HasChildren) { +/** Footer is only used at smaller widths - in Dialog / Page card view / extension size */ +export function Footer({ children }: HasChildren) { return ( - {children} + {/* seem to need this always apart from password/ ReceiveTokensFooter / signout - probably good to always have it */} + + {children} + ); }