From 33846664a3e24b5cbd001bf438162deb59f0f9ad Mon Sep 17 00:00:00 2001 From: kyranjamie Date: Tue, 20 Feb 2024 15:09:41 +0100 Subject: [PATCH] refactor(input): remove InputTextField component --- .../bitcoin-custom-fee/bitcoin-custom-fee.tsx | 102 ++++++++------ src/app/components/error-label.tsx | 21 +-- src/app/components/text-input-field.tsx | 131 ------------------ .../components/increase-btc-fee-form.tsx | 16 ++- .../components/amount-field.tsx | 11 +- .../components/memo-field.tsx | 2 +- .../select-account-button.tsx | 36 +++++ .../components/recipient-field.tsx | 45 +++--- .../recipient-address-displayer.tsx | 2 +- .../generic-recipient-field.tsx | 62 +++++++++ .../hooks/use-recipient-select-fields.tsx | 58 ++++---- .../recipient-field-address.tsx | 24 ---- .../recipient-field-bns-name.tsx | 7 +- .../components/recipient-dropdown-item.tsx | 18 +-- .../components/recipient-dropdown.layout.tsx | 7 +- .../components/bitcoin-recipient-field.tsx | 49 +------ .../components/testnet-btc-message.tsx | 4 + .../components/stacks-recipient-field.tsx | 49 +------ .../form/btc/btc-send-form.tsx | 8 +- src/app/query/bitcoin/bitcoin-client.ts | 3 +- src/app/ui/components/flag/flag.tsx | 4 +- src/app/ui/components/input/input.tsx | 7 +- 22 files changed, 272 insertions(+), 394 deletions(-) delete mode 100644 src/app/components/text-input-field.tsx create mode 100644 src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/select-account-button.tsx create mode 100644 src/app/pages/send/send-crypto-asset-form/components/recipient-fields/generic-recipient-field.tsx delete mode 100644 src/app/pages/send/send-crypto-asset-form/components/recipient-fields/recipient-field-address.tsx 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 6ae302fd4c1..c2a5ad4f7b0 100644 --- a/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx +++ b/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx @@ -1,6 +1,6 @@ import { Dispatch, SetStateAction, useCallback, useRef } from 'react'; -import { Form, Formik } from 'formik'; +import { Form, Formik, useField } from 'formik'; import { Stack, styled } from 'leather-styles/jsx'; import * as yup from 'yup'; @@ -9,15 +9,41 @@ 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 { Input } from '@app/ui/components/input/input'; import { Link } from '@app/ui/components/link/link'; import { OnChooseFeeArgs } from '../bitcoin-fees-list/bitcoin-fees-list'; -import { TextInputField } from '../text-input-field'; import { BitcoinCustomFeeFiat } from './bitcoin-custom-fee-fiat'; import { useBitcoinCustomFee } from './hooks/use-bitcoin-custom-fee'; const feeInputLabel = 'sats/vB'; +interface BitcoinCustomFeeInputProps { + hasInsufficientBalanceError: boolean; + onClick(): void; + onChange?(e: React.ChangeEvent): void; +} +function BitcoinCustomFeeInput({ + hasInsufficientBalanceError, + onClick, + onChange, +}: BitcoinCustomFeeInputProps) { + const [field] = useField('feeRate'); + return ( + + {feeInputLabel} + { + field.onChange(e); + onChange?.(e); + }} + /> + + ); +} + interface BitcoinCustomFeeProps { amount: number; customFeeInitialValue: string; @@ -82,48 +108,40 @@ export function BitcoinCustomFee({ validateOnMount={false} validationSchema={validationSchema} > - {props => { - return ( -
- - - - Higher fee rates typically lead to faster confirmation times. - openInNewTab('https://buybitcoinworldwide.com/fee-calculator/')} - textStyle="body.02" - > - View fee calculator - - - - { - feeInputRef?.current?.focus(); - await props.setValues({ ...props.values }); - }} - onChange={e => { - setCustomFeeInitialValue((e.target as HTMLInputElement).value); - }} - inputRef={feeInputRef} - /> - - + {props => ( + + + + + Higher fee rates typically lead to faster confirmation times. + openInNewTab('https://buybitcoinworldwide.com/fee-calculator/')} + textStyle="body.02" + > + View fee calculator + + + { + feeInputRef?.current?.focus(); + await props.setValues({ ...props.values }); + }} + onChange={e => setCustomFeeInitialValue((e.target as HTMLInputElement).value)} + /> + + - - - ); - }} + + + + )} ); } diff --git a/src/app/components/error-label.tsx b/src/app/components/error-label.tsx index 1dd75e2e933..9fa955c4564 100644 --- a/src/app/components/error-label.tsx +++ b/src/app/components/error-label.tsx @@ -1,25 +1,16 @@ -import { css } from 'leather-styles/css'; -import { HStack, HstackProps } from 'leather-styles/jsx'; - +import { Flag, type FlagProps } from '@app/ui/components/flag/flag'; import { ErrorCircleIcon } from '@app/ui/icons/error-circle-icon'; -export function ErrorLabel({ children, ...rest }: HstackProps) { +export function ErrorLabel({ children, ...rest }: FlagProps) { return ( - } + spacing="space.02" color="error.label" - gap="space.02" - textAlign="left" textStyle="body.02" {...rest} > - {children} - + ); } diff --git a/src/app/components/text-input-field.tsx b/src/app/components/text-input-field.tsx deleted file mode 100644 index 2f67d1d3dbe..00000000000 --- a/src/app/components/text-input-field.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import { Ref, useRef } from 'react'; - -import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors'; -import { useField } from 'formik'; -import { Box, Flex, FlexProps, HStack, styled } from 'leather-styles/jsx'; - -import { useShowFieldError } from '@app/common/form-utils'; -import { capitalize } from '@app/common/utils'; -import { Link } from '@app/ui/components/link/link'; - -import { TextInputFieldError } from './field-error'; - -interface TextInputFieldProps extends FlexProps { - dataTestId?: string; - isDisabled?: boolean; - label?: string; - labelAction?: string; - name: string; - onBlur?(): void; - onClickLabelAction?(): void; - placeholder?: string; - inputRef?: Ref; - topInputOverlay?: React.JSX.Element; - hasError?: boolean; -} -export function TextInputField({ - dataTestId, - isDisabled, - label, - labelAction, - name, - onBlur, - onClickLabelAction, - placeholder, - topInputOverlay, - inputRef, - hasError, - ...props -}: TextInputFieldProps) { - const [field] = useField(name); - const ref = useRef(null); - - const showError = useShowFieldError(name) || hasError; - - return ( - - - - - {label && field.value ? ( - - {label} - - ) : null} - {topInputOverlay ? {topInputOverlay} : null} - - {labelAction ? ( - e.preventDefault()} - onClick={() => { - onClickLabelAction?.(); - // Improves UX of selecting a recipient from the window. As the - // button to open the drawer is inside the input, we force - // blur the input when interacting with the modal, if focused. - if (ref.current !== null && ref.current === document.activeElement) - ref.current.blur(); - }} - variant="text" - zIndex={999} - > - {labelAction} - - ) : null} - - { - onBlur?.(); - field.onBlur(e); - }} - /> - - - - ); -} diff --git a/src/app/features/increase-fee-drawer/components/increase-btc-fee-form.tsx b/src/app/features/increase-fee-drawer/components/increase-btc-fee-form.tsx index bb6bff62f2a..a957d4fe98b 100644 --- a/src/app/features/increase-fee-drawer/components/increase-btc-fee-form.tsx +++ b/src/app/features/increase-fee-drawer/components/increase-btc-fee-form.tsx @@ -1,6 +1,6 @@ import { useNavigate } from 'react-router-dom'; -import { Formik } from 'formik'; +import { Formik, useField } from 'formik'; import { Stack } from 'leather-styles/jsx'; import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model'; @@ -13,8 +13,8 @@ import { getBitcoinTxValue } from '@app/common/transactions/bitcoin/utils'; import { BitcoinCustomFeeFiat } from '@app/components/bitcoin-custom-fee/bitcoin-custom-fee-fiat'; import { BitcoinTransactionItem } from '@app/components/bitcoin-transaction-item/bitcoin-transaction-item'; import { LoadingSpinner } from '@app/components/loading-spinner'; -import { TextInputField } from '@app/components/text-input-field'; import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; +import { Input } from '@app/ui/components/input/input'; import { Caption } from '@app/ui/components/typography/caption'; import { useBtcIncreaseFee } from '../hooks/use-btc-increase-fee'; @@ -22,6 +22,16 @@ import { IncreaseFeeActions } from './increase-fee-actions'; const feeInputLabel = 'sats/vB'; +function BitcoinFeeIncreaseField() { + const [field] = useField('feeRate'); + return ( + + + Fee rate + + ); +} + interface IncreaseBtcFeeFormProps { btcTx: BitcoinTx; } @@ -53,7 +63,7 @@ export function IncreaseBtcFeeForm({ btcTx }: IncreaseBtcFeeFormProps) { {btcTx && } - + {switchableAmount && switchableAmount} {showError && ( - - {meta.error} - + + + {meta.error} + + )} {bottomInputOverlay} diff --git a/src/app/pages/send/send-crypto-asset-form/components/memo-field.tsx b/src/app/pages/send/send-crypto-asset-form/components/memo-field.tsx index c3a824ececd..d81ba3c43f7 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/memo-field.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/memo-field.tsx @@ -14,7 +14,7 @@ export function MemoField() { const showError = useShowFieldError(name); return ( - + Memo diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/select-account-button.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/select-account-button.tsx new file mode 100644 index 00000000000..b1fa98ed341 --- /dev/null +++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/select-account-button.tsx @@ -0,0 +1,36 @@ +import type { ComponentProps } from 'react'; + +import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors'; +import { styled } from 'leather-styles/jsx'; + +interface SelectAccountButtonProps extends ComponentProps { + onClick(): void; +} +export function SelectAccountButton({ onClick, ...props }: SelectAccountButtonProps) { + function preventFocusOfUnderlyingInput(e: React.MouseEvent) { + e.preventDefault(); + } + + return ( + preventFocusOfUnderlyingInput(e)} + onClick={e => { + // Improves UX of selecting a recipient from the window. As the button + // to open the drawer is inside the input, we force focus the button, + // such that the focus is taken away from the input in background + (e.target as HTMLButtonElement).focus(); + onClick?.(); + }} + zIndex={9} + {...props} + > + Select account + + ); +} diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-field.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-field.tsx index 5aad336632e..0589a4cfa38 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-field.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-field.tsx @@ -2,30 +2,27 @@ import { useEffect } from 'react'; import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors'; import { useField, useFormikContext } from 'formik'; +import { Box } from 'leather-styles/jsx'; import { BitcoinSendFormValues, StacksSendFormValues } from '@shared/models/form.model'; -import { TextInputField } from '@app/components/text-input-field'; +import { Input } from '@app/ui/components/input/input'; interface RecipientFieldProps { isDisabled?: boolean; label?: string; - labelAction?: string; name: string; onBlur?(): void; - onClickLabelAction?(): void; placeholder: string; topInputOverlay?: React.JSX.Element; + rightLabel?: React.JSX.Element; } export function RecipientField({ - isDisabled, - label, - labelAction, name, - onBlur, - onClickLabelAction, - placeholder, topInputOverlay, + rightLabel, + isDisabled, + onBlur, }: RecipientFieldProps) { const [field] = useField(name); const { setFieldValue } = useFormikContext(); @@ -35,17 +32,23 @@ export function RecipientField({ }, [name, field.value, setFieldValue]); return ( - + + + + {rightLabel} + + {topInputOverlay} + { + field.onBlur(e); + onBlur?.(); + }} + /> + + ); } diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/components/recipient-address-displayer.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/components/recipient-address-displayer.tsx index b2e81fd25a5..ed568d29f4a 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/components/recipient-address-displayer.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/components/recipient-address-displayer.tsx @@ -21,7 +21,7 @@ export function RecipientAddressDisplayer({ address }: RecipientAddressDisplayer }, [analytics, onCopy]); return ( - + ; +} +export function GenericRecipientField({ bnsFn }: GenericRecipientFieldProps) { + const { + isSelectVisible, + showRecipientAccountsModal, + onSelectRecipientFieldType, + onSetIsSelectVisible, + selectedRecipientField, + } = useRecipientSelectFields(); + + const recipientDropdown = ( + + ); + + const selectAccountButton = ; + + switch (selectedRecipientField) { + case RecipientFieldType.BnsName: + return ( + <> + + + + ); + case RecipientFieldType.Address: + default: + return ( + <> + + + + ); + } +} diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/hooks/use-recipient-select-fields.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/hooks/use-recipient-select-fields.tsx index ed8b256baec..7be5e1fe8a3 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/hooks/use-recipient-select-fields.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/hooks/use-recipient-select-fields.tsx @@ -1,4 +1,4 @@ -import { useCallback, useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useFormikContext } from 'formik'; @@ -19,11 +19,6 @@ export function useRecipientSelectFields() { const { setBnsAddress } = useRecipientBnsName(); const navigate = useNavigate(); - const onClickLabelAction = useCallback(() => { - setSelectedRecipientField(RecipientFieldType.Address); - navigate(RouteUrls.SendCryptoAssetFormRecipientAccounts, { replace: true }); - }, [navigate]); - // Formik does not provide a field reset const resetAllRecipientFields = useCallback(async () => { void setFieldValue('recipient', ''); @@ -32,31 +27,30 @@ export function useRecipientSelectFields() { void setFieldValue('recipientBnsName', ''); setFieldError('recipientBnsName', undefined); await setFieldTouched('recipientBnsName', false); - }, [setFieldError, setFieldTouched, setFieldValue]); - - const onSelectRecipientFieldType = useCallback( - async (index: number) => { - await resetAllRecipientFields(); - setBnsAddress(''); - setSelectedRecipientField(index); - setIsSelectVisible(false); - }, - [resetAllRecipientFields, setBnsAddress] - ); - - const onSetIsSelectVisible = useCallback( - async (value: boolean) => { - await resetAllRecipientFields(); - setIsSelectVisible(value); - }, - [resetAllRecipientFields] + }, [setFieldValue, setFieldError, setFieldTouched]); + + return useMemo( + () => ({ + selectedRecipientField, + isSelectVisible, + + showRecipientAccountsModal() { + setSelectedRecipientField(RecipientFieldType.Address); + navigate(RouteUrls.SendCryptoAssetFormRecipientAccounts, { replace: true }); + }, + + async onSelectRecipientFieldType(index: number) { + await resetAllRecipientFields(); + setBnsAddress(''); + setSelectedRecipientField(index); + setIsSelectVisible(false); + }, + + async onSetIsSelectVisible(value: boolean) { + await resetAllRecipientFields(); + setIsSelectVisible(value); + }, + }), + [isSelectVisible, navigate, resetAllRecipientFields, selectedRecipientField, setBnsAddress] ); - - return { - isSelectVisible, - onClickLabelAction, - onSelectRecipientFieldType, - onSetIsSelectVisible, - selectedRecipientField, - }; } diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/recipient-field-address.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/recipient-field-address.tsx deleted file mode 100644 index 88cf50e3d05..00000000000 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/recipient-field-address.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { RecipientField } from '@app/pages/send/send-crypto-asset-form/components/recipient-field'; - -interface RecipientFieldAddressProps { - isSelectVisible: boolean; - onClickLabelAction(): void; - selectedRecipientField: number; - topInputOverlay: React.JSX.Element; -} -export function RecipientFieldAddress({ - isSelectVisible, - onClickLabelAction, - topInputOverlay, -}: RecipientFieldAddressProps) { - return ( - - ); -} diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/recipient-field-bns-name.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/recipient-field-bns-name.tsx index 7897f386567..f84f75843d3 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/recipient-field-bns-name.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/recipient-field-bns-name.tsx @@ -13,15 +13,15 @@ import { useRecipientBnsName } from './hooks/use-recipient-bns-name'; interface RecipientFieldBnsNameProps { fetchFn(client: StacksClient, name: string, isTestnet?: boolean): Promise; isSelectVisible: boolean; - onClickLabelAction(): void; selectedRecipientField: number; topInputOverlay: React.JSX.Element; + rightLabel: React.JSX.Element; } export function RecipientFieldBnsName({ fetchFn, isSelectVisible, - onClickLabelAction, topInputOverlay, + rightLabel, }: RecipientFieldBnsNameProps) { const [showBnsAddress, setShowBnsAddress] = useState(false); const { errors, setFieldError, values } = useFormikContext< @@ -49,12 +49,11 @@ export function RecipientFieldBnsName({ <> getBnsAddressAndValidate(fetchFn)} - onClickLabelAction={onClickLabelAction} placeholder="Enter recipient BNS name" topInputOverlay={topInputOverlay} + rightLabel={rightLabel} /> {showBnsAddress ? : null} diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx index 75be88e61be..84bd39debe6 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown-item.tsx @@ -1,3 +1,5 @@ +import type { ComponentProps } from 'react'; + import { HStack, styled } from 'leather-styles/jsx'; import { ChevronDownIcon } from '@app/ui/icons/chevron-down-icon'; @@ -5,7 +7,7 @@ import { ChevronDownIcon } from '@app/ui/icons/chevron-down-icon'; const labels = ['Address', 'BNS Name']; const testLabels = ['address', 'bns-name']; -interface RecipientDropdownItemProps { +interface RecipientDropdownItemProps extends ComponentProps { index: number; isVisible?: boolean; onSelectItem(index: number): void; @@ -17,23 +19,23 @@ export function RecipientDropdownItem({ }: RecipientDropdownItemProps) { return ( onSelectItem(index)} + zIndex={20} pl={isVisible ? 'space.02' : 'unset'} - textStyle="label.02" - zIndex={999} > - {labels[index]} + {labels[index]} {isVisible ? <> : } diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown.layout.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown.layout.tsx index 4d49107c948..7eea09eff05 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown.layout.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/components/recipient-dropdown.layout.tsx @@ -31,13 +31,14 @@ export function RecipientDropdownLayout({ borderRadius="xs" boxShadow="0px 8px 16px rgba(27, 39, 51, 0.08)" flexDirection="column" - gap="0px" + gap="space.03" minWidth="100px" overflow="hidden" - p="space.01" + px="space.02" + py="space.02" position="absolute" ref={ref} - top="40px" + top="20px" zIndex={9999} > {children} diff --git a/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-recipient-field.tsx b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-recipient-field.tsx index c0bc8da9d5a..7131c7f7b90 100644 --- a/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-recipient-field.tsx +++ b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-recipient-field.tsx @@ -1,52 +1,7 @@ -import { RecipientFieldType } from '@app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/recipient-type-dropdown'; import { fetchBtcNameOwner } from '@app/query/stacks/bns/bns.utils'; -import { useRecipientSelectFields } from '../../../components/recipient-fields/hooks/use-recipient-select-fields'; -import { RecipientFieldAddress } from '../../../components/recipient-fields/recipient-field-address'; -import { RecipientFieldBnsName } from '../../../components/recipient-fields/recipient-field-bns-name'; -import { RecipientDropdownOverlay } from '../../../components/recipient-type-dropdown/components/recipient-dropdown-overlay'; +import { GenericRecipientField } from '../../../components/recipient-fields/generic-recipient-field'; export function BitcoinRecipientField() { - const { - isSelectVisible, - onClickLabelAction, - onSelectRecipientFieldType, - onSetIsSelectVisible, - selectedRecipientField, - } = useRecipientSelectFields(); - - const topInputOverlay = ( - - ); - - const recipientFieldAddress = ( - - ); - - switch (selectedRecipientField) { - case RecipientFieldType.Address: - return recipientFieldAddress; - case RecipientFieldType.BnsName: - return ( - - ); - default: - return recipientFieldAddress; - } + return ; } diff --git a/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/testnet-btc-message.tsx b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/testnet-btc-message.tsx index b34009109aa..58d6a97f782 100644 --- a/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/testnet-btc-message.tsx +++ b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/testnet-btc-message.tsx @@ -1,6 +1,10 @@ import { WarningLabel } from '@app/components/warning-label'; import { Link } from '@app/ui/components/link/link'; +/** + * @deprecated + * To be replaced with design system `Callout` component when ready + */ export function TestnetBtcMessage() { return ( diff --git a/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field.tsx b/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field.tsx index d3c4243265e..22ee903512a 100644 --- a/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field.tsx +++ b/src/app/pages/send/send-crypto-asset-form/family/stacks/components/stacks-recipient-field.tsx @@ -1,52 +1,7 @@ -import { RecipientFieldType } from '@app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/recipient-type-dropdown'; import { fetchNameOwner } from '@app/query/stacks/bns/bns.utils'; -import { useRecipientSelectFields } from '../../../components/recipient-fields/hooks/use-recipient-select-fields'; -import { RecipientFieldAddress } from '../../../components/recipient-fields/recipient-field-address'; -import { RecipientFieldBnsName } from '../../../components/recipient-fields/recipient-field-bns-name'; -import { RecipientDropdownOverlay } from '../../../components/recipient-type-dropdown/components/recipient-dropdown-overlay'; +import { GenericRecipientField } from '../../../components/recipient-fields/generic-recipient-field'; export function StacksRecipientField() { - const { - isSelectVisible, - onClickLabelAction, - onSelectRecipientFieldType, - onSetIsSelectVisible, - selectedRecipientField, - } = useRecipientSelectFields(); - - const topInputOverlay = ( - - ); - - const recipientFieldAddress = ( - - ); - - switch (selectedRecipientField) { - case RecipientFieldType.Address: - return recipientFieldAddress; - case RecipientFieldType.BnsName: - return ( - - ); - default: - return recipientFieldAddress; - } + return ; } 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 92a27877987..a5d500b6fc9 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 @@ -89,8 +89,14 @@ export function BtcSendForm() { name={btcBalance.asset.name} symbol={symbol} /> + - {currentNetwork.chain.bitcoin.bitcoinNetwork === 'testnet' && } + + {currentNetwork.chain.bitcoin.bitcoinNetwork === 'testnet' && ( + + + + )} diff --git a/src/app/query/bitcoin/bitcoin-client.ts b/src/app/query/bitcoin/bitcoin-client.ts index b33ec1242cb..b0f4bf0f1cf 100644 --- a/src/app/query/bitcoin/bitcoin-client.ts +++ b/src/app/query/bitcoin/bitcoin-client.ts @@ -69,7 +69,8 @@ interface FeeResult { class FeeEstimatesApi { constructor(public configuration: Configuration) {} - async getFeeEstimatesFromBlockcypherApi(network: string): Promise { + async getFeeEstimatesFromBlockcypherApi(network: 'main' | 'test3'): Promise { + // https://www.blockcypher.com/dev/bitcoin/#restful-resources const resp = await axios.get( `https://api.blockcypher.com/v1/btc/${network}` ); diff --git a/src/app/ui/components/flag/flag.tsx b/src/app/ui/components/flag/flag.tsx index e4a284f24e4..6b2e471f3c1 100644 --- a/src/app/ui/components/flag/flag.tsx +++ b/src/app/ui/components/flag/flag.tsx @@ -16,11 +16,11 @@ const flagStyles = css({ type FlagAlignment = 'top' | 'middle' | 'bottom'; -interface FlagProps extends FlexProps { +export interface FlagProps extends FlexProps { spacing?: SpacingToken; align?: FlagAlignment; children: React.ReactNode; - img: React.ReactNode; + img?: React.ReactNode; } /** diff --git a/src/app/ui/components/input/input.tsx b/src/app/ui/components/input/input.tsx index 90afff1870a..f34a1c937e4 100644 --- a/src/app/ui/components/input/input.tsx +++ b/src/app/ui/components/input/input.tsx @@ -34,7 +34,6 @@ const input = sva({ p: 'space.04', ring: 'none', textStyle: 'body.02', - zIndex: 4, color: 'accent.text-subdued', _before: { content: '""', @@ -74,7 +73,7 @@ const input = sva({ right: 0, bottom: 0, zIndex: 5, - textStyle: 'body.01', + textStyle: 'body.02', color: 'accent.text-primary', border: '1px solid', borderColor: 'accent.border-hover', @@ -88,13 +87,11 @@ const input = sva({ '&:placeholder-shown + label': transformedLabelStyles, '[data-has-label="true"] &': { pt: '22px', - pb: '4px', }, }, label: { - pointerEvents: 'none', pos: 'absolute', - top: '36%', + top: '38%', left: 'space.04', zIndex: 9, color: 'inherit',