diff --git a/src/app/common/signature/requests.ts b/src/app/common/signature/requests.ts index 7ccb2331695..76274d47e6c 100644 --- a/src/app/common/signature/requests.ts +++ b/src/app/common/signature/requests.ts @@ -2,7 +2,6 @@ import { CommonSignaturePayload, SignaturePayload } from '@stacks/connect'; import { deserializeCV } from '@stacks/transactions'; import { TokenInterface, decodeToken } from 'jsontokens'; -import { StructuredMessageDataDomain } from '@shared/signature/signature-types'; import { isString } from '@shared/utils'; export function getGenericSignaturePayloadFromToken(requestToken: string): CommonSignaturePayload { @@ -27,6 +26,6 @@ export function getStructuredDataPayloadFromToken(requestToken: string) { return { ...(result as unknown as CommonSignaturePayload), message: deserializeCV(Buffer.from(result.message, 'hex')), - domain: deserializeCV(Buffer.from(result.domain, 'hex')) as StructuredMessageDataDomain, + domain: deserializeCV(Buffer.from(result.domain, 'hex')), }; } diff --git a/src/app/common/transactions/stacks/is-sip-10-transfer.ts b/src/app/common/transactions/stacks/is-sip-10-transfer.ts index 34ee9a19b50..1bb968bf392 100644 --- a/src/app/common/transactions/stacks/is-sip-10-transfer.ts +++ b/src/app/common/transactions/stacks/is-sip-10-transfer.ts @@ -1,8 +1,8 @@ -import { ContractCallPayload, StacksTransaction } from '@stacks/transactions'; +import { StacksTransaction } from '@stacks/transactions'; export function isSip10Transfer(tx: StacksTransaction) { if (!tx.payload || !('functionName' in tx.payload)) return false; - const payload = tx.payload as ContractCallPayload; + const payload = tx.payload; return ( payload.functionName.content === 'transfer' && (payload.functionArgs.length === 3 || payload.functionArgs.length === 4) diff --git a/src/app/common/utils/use-waiting-message.ts b/src/app/common/utils/use-waiting-message.ts index 6ac9701c667..d66334eeeac 100644 --- a/src/app/common/utils/use-waiting-message.ts +++ b/src/app/common/utils/use-waiting-message.ts @@ -6,7 +6,7 @@ import { useInterval } from './use-interval'; export type WaitingMessages = Record; function messageForSecondsPassed(waitingMessages: WaitingMessages, seconds: number) { - return waitingMessages[seconds as keyof typeof waitingMessages]; + return waitingMessages[seconds ]; } export const useWaitingMessage = ( diff --git a/src/app/components/account/account-avatar/account-avatar.tsx b/src/app/components/account/account-avatar/account-avatar.tsx index e781873f9de..07b7f9c9b50 100644 --- a/src/app/components/account/account-avatar/account-avatar.tsx +++ b/src/app/components/account/account-avatar/account-avatar.tsx @@ -1,6 +1,7 @@ import { memo } from 'react'; import { BoxProps, Circle } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { useAccountGradient } from '@app/common/hooks/account/use-account-gradient'; @@ -38,6 +39,7 @@ export const AccountAvatar = memo(({ name, publicKey, index, ...props }: Account return ( - {/* // FIXME isinline */} - + {accountName} @@ -75,13 +77,7 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) { balanceLabel )} - + {truncateMiddle(stxAddress, isNarrowViewport ? 3 : 4)} @@ -90,8 +86,8 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) { {truncateMiddle(btcAddress, 5)} )} - - + + {children} diff --git a/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee-fiat.tsx b/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee-fiat.tsx index c07924b37aa..7e3ea6215fa 100644 --- a/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee-fiat.tsx +++ b/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee-fiat.tsx @@ -1,7 +1,7 @@ import { useMemo } from 'react'; import { useField } from 'formik'; -import { Flex } from 'leather-styles/jsx'; +import { Flex, styled } from 'leather-styles/jsx'; import { satToBtc } from '@app/common/money/unit-conversion'; 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 f7e53706535..cba77693b3a 100644 --- a/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx +++ b/src/app/components/bitcoin-custom-fee/bitcoin-custom-fee.tsx @@ -93,8 +93,8 @@ export function BitcoinCustomFee({ View fee calculator - - + + Possibly caused by api issues - , + , ]; const title = 'Unable to calculate fees'; @@ -18,7 +18,7 @@ export function FeesListError() { const navigate = useNavigate(); return ( - + - + ); } diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-caption.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-caption.tsx index 4055992df42..4a8a63caeb8 100644 --- a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-caption.tsx +++ b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-caption.tsx @@ -1,4 +1,5 @@ import { styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; interface BitcoinTransactionCaptionProps { children: string; diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx index 47ddf6becd7..72ec143c3fc 100644 --- a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx +++ b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx @@ -1,13 +1,16 @@ +import { FiArrowDown, FiArrowUp } from 'react-icons/fi'; + // #4164 FIXME migrate colorFromTx then remove this -import { Box, color } from '@stacks/ui'; +import { color } from '@stacks/ui'; import { BoxProps, Circle, Flex } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model'; +import { isBitcoinTxInbound } from '@app/common/transactions/bitcoin/utils'; import { BtcIcon } from '@app/components/icons/btc-icon'; -import { IconForTx, colorFromTx } from './utils'; +import { colorFromTx } from './utils'; interface TransactionIconProps extends BoxProps { transaction: BitcoinTx; @@ -29,8 +32,11 @@ export function BitcoinTransactionIcon({ transaction, btcAddress, ...rest }: Tra borderColor={token('colors.accent.background-primary')} {...rest} > - {/* // #4164 FIXME refactor this IconForTx */} - + {isBitcoinTxInbound(btcAddress, transaction) ? ( + + ) : ( + + )} ); diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-inscription-icon.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-inscription-icon.tsx index 4e0e5200fe2..a65f0ab58f3 100644 --- a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-inscription-icon.tsx +++ b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-inscription-icon.tsx @@ -1,10 +1,16 @@ -import { Box, Circle, Flex } from 'leather-styles/jsx'; +import { FiArrowDown, FiArrowUp } from 'react-icons/fi'; + +import { Circle, Flex } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { SupportedInscription } from '@shared/models/inscription.model'; import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model'; +import { isBitcoinTxInbound } from '@app/common/transactions/bitcoin/utils'; + import { OrdinalIcon } from '../icons/ordinal-icon'; -import { IconForTx, colorFromTx } from './utils'; + +// import { colorFromTx } from './utils'; interface BitcoinTransactionInscriptionIconProps { inscription: SupportedInscription; @@ -17,7 +23,8 @@ function InscriptionIcon({ inscription, ...rest }: { inscription: SupportedInscr case 'image': return ( - + {isBitcoinTxInbound(btcAddress, transaction) ? ( + + ) : ( + + )} ); diff --git a/src/app/components/bitcoin-transaction-item/utils.ts b/src/app/components/bitcoin-transaction-item/utils.ts index 7727b5afd3e..1a931436d01 100644 --- a/src/app/components/bitcoin-transaction-item/utils.ts +++ b/src/app/components/bitcoin-transaction-item/utils.ts @@ -1,9 +1,5 @@ -import { FiArrowDown, FiArrowUp } from 'react-icons/fi'; - import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model'; -import { isBitcoinTxInbound } from '@app/common/transactions/bitcoin/utils'; - type ColorsStringLiteral = | 'accent' | 'brand' @@ -42,12 +38,6 @@ export const colorFromTx = (tx: BitcoinTx): ColorsStringLiteral => { return colorMap[statusFromTx(tx)] ?? 'feedback-error'; }; -// #4164 FIXME refactor this to return JSX with size -export function IconForTx(address: string, tx: BitcoinTx) { - if (isBitcoinTxInbound(address, tx)) return FiArrowDown; - return FiArrowUp; -} - export function containsTaprootInput(tx: BitcoinTx) { return tx.vin.some(input => input.prevout.scriptpubkey_type === 'v1_p2tr'); } diff --git a/src/app/components/broadcast-error-drawer/broadcast-error-drawer.layout.tsx b/src/app/components/broadcast-error-drawer/broadcast-error-drawer.layout.tsx index 74b23800015..1d1ecaafc73 100644 --- a/src/app/components/broadcast-error-drawer/broadcast-error-drawer.layout.tsx +++ b/src/app/components/broadcast-error-drawer/broadcast-error-drawer.layout.tsx @@ -1,8 +1,9 @@ import GenericError from '@assets/images/generic-error.png'; -import { Box, Button, Flex } from 'leather-styles/jsx'; +import { Flex, styled } from 'leather-styles/jsx'; import { BaseDrawer } from '@app/components/drawer/base-drawer'; +import { LeatherButton } from '../button/button'; import { Body, Title } from '../typography'; interface BroadcastErrorDrawerLayoutProps { @@ -20,15 +21,16 @@ export function BroadcastErrorDrawerLayout({ message, onClose }: BroadcastErrorD position="relative" top="-24px" > - + Unable to broadcast transaction - + Your transaction failed to broadcast{' '} {message && <>because of the error: {message.toLowerCase()}} - + ); diff --git a/src/app/components/button/button.tsx b/src/app/components/button/button.tsx index 80b5945eb97..d272d4abe33 100644 --- a/src/app/components/button/button.tsx +++ b/src/app/components/button/button.tsx @@ -1,6 +1,8 @@ import { styled } from 'leather-styles/jsx'; import { type ButtonVariantProps, button as buttonRecipe } from 'leather-styles/recipes'; +// #4164 FIXME migrate - maybe we need an isLoading state here? + const StyledButton = styled('button'); export type ButtonProps = Omit< diff --git a/src/app/components/crypto-assets/components/asset-caption.tsx b/src/app/components/crypto-assets/components/asset-caption.tsx index 0816c9f66b8..38370fb809e 100644 --- a/src/app/components/crypto-assets/components/asset-caption.tsx +++ b/src/app/components/crypto-assets/components/asset-caption.tsx @@ -2,7 +2,7 @@ import { FiInfo } from 'react-icons/fi'; // #4164 FIXME migrate Tooltip - use radix instead import { Tooltip } from '@stacks/ui'; -import { Flex, Stack } from 'leather-styles/jsx'; +import { Flex, HStack } from 'leather-styles/jsx'; import { styled } from 'leather-styles/jsx'; interface AssetCaptionProps { @@ -19,7 +19,7 @@ export function AssetCaption({ caption, isUnanchored }: AssetCaptionProps) { • Microblock - + - + ) : ( diff --git a/src/app/components/crypto-assets/crypto-currency-asset/asset-copy-icon.tsx b/src/app/components/crypto-assets/crypto-currency-asset/asset-copy-icon.tsx index eec76b1b590..2b871946345 100644 --- a/src/app/components/crypto-assets/crypto-currency-asset/asset-copy-icon.tsx +++ b/src/app/components/crypto-assets/crypto-currency-asset/asset-copy-icon.tsx @@ -1,7 +1,8 @@ import { FiCheck, FiCopy } from 'react-icons/fi'; import { UserAreaSelectors } from '@tests-legacy/integration/user-area.selectors'; -import { Box, Flex } from 'leather-styles/jsx'; +import { Flex } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; interface AssetItemCopyIconProps { hasCopied: boolean; @@ -9,14 +10,23 @@ interface AssetItemCopyIconProps { export function AssetItemCopyIcon({ hasCopied }: AssetItemCopyIconProps) { return ( - - + + {/* // #4164 FIXME refactor these icons to not duplicate - visual inspect + delete css*/} + {hasCopied ? ( + + ) : ( + + )} ); } diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx index 00150389639..c238efaf343 100644 --- a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx +++ b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx @@ -29,6 +29,15 @@ interface CryptoCurrencyAssetItemLayoutProps extends StackProps { additionalBalanceInfo?: React.JSX.Element; additionalUsdBalanceInfo?: React.JSX.Element; } + +// const Wrapper = (props: CryptoCurrencyAssetItemLayoutProps) => { +// props.isPressable ? ( +// {props.children} +// ) : ( +// {props.children} +// ); +// }; + export const CryptoCurrencyAssetItemLayout = forwardRefWithAs( (props: CryptoCurrencyAssetItemLayoutProps, ref) => { const { @@ -58,7 +67,9 @@ export const CryptoCurrencyAssetItemLayout = forwardRefWithAs( return ( ( - + // #4164 FIXME migrate color('accent') + invert + visual check this icon + + + )} /> ); diff --git a/src/app/components/crypto-assets/stacks/components/stx-avatar.tsx b/src/app/components/crypto-assets/stacks/components/stx-avatar.tsx index 6975bd41395..3a2035af6f2 100644 --- a/src/app/components/crypto-assets/stacks/components/stx-avatar.tsx +++ b/src/app/components/crypto-assets/stacks/components/stx-avatar.tsx @@ -1,4 +1,5 @@ import { BoxProps, Circle } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { StxIcon } from '@app/components/icons/stx-icon'; @@ -10,7 +11,7 @@ interface StxAvatarProps extends BoxProps { export function StxAvatar({ isUnanchored, ...props }: StxAvatarProps) { return ( ) : ( - + // #4164 FIXME migrate check and refactor if this is needed + )} {icon && icon} {title && {title}} diff --git a/src/app/components/drawer/components/header-action-button.tsx b/src/app/components/drawer/components/header-action-button.tsx index 9bc5ecdac0a..469e17f9d89 100644 --- a/src/app/components/drawer/components/header-action-button.tsx +++ b/src/app/components/drawer/components/header-action-button.tsx @@ -1,5 +1,7 @@ +// #4164 FIXME migrate transition +import { transition } from '@stacks/ui'; import { HomePageSelectors } from '@tests/selectors/home.selectors'; -import { Box, Grid, transition } from 'leather-styles/jsx'; +import { Box, Grid } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; interface HeaderActionButtonProps { @@ -23,7 +25,9 @@ export function HeaderActionButton(props: HeaderActionButtonProps) { opacity={isWaitingOnPerformedAction ? '0.3' : 'unset'} placeItems="center" position="relative" - size="36px" + // #4164 FIXME check the UI for this size / gap swap + // size="36px" + gap="36px" transition={transition} userSelect="none" zIndex={9} diff --git a/src/app/components/event-card.tsx b/src/app/components/event-card.tsx index b15fda93f8c..ad5e6dbbb15 100644 --- a/src/app/components/event-card.tsx +++ b/src/app/components/event-card.tsx @@ -1,6 +1,9 @@ import { FiMoreHorizontal } from 'react-icons/fi'; -import { Box, IconButton, Stack } from 'leather-styles/jsx'; +// #4164 FIXME migrate IconButton +import { IconButton } from '@stacks/ui'; +import { Box, Stack, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { SpaceBetween } from '@app/components/layout/space-between'; import { Caption } from '@app/components/typography'; @@ -25,7 +28,7 @@ export function EventCard(props: EventCardProps): React.JSX.Element { <> - + {title} {actions && ( diff --git a/src/app/components/fees-row/components/custom-fee-field.tsx b/src/app/components/fees-row/components/custom-fee-field.tsx index 878a7c1016e..2f0fcc8b31c 100644 --- a/src/app/components/fees-row/components/custom-fee-field.tsx +++ b/src/app/components/fees-row/components/custom-fee-field.tsx @@ -1,8 +1,11 @@ import { FormEvent, useCallback } from 'react'; +// #4164 FIXME migrate Input, InputGroup +import { Input, InputGroup } from '@stacks/ui'; import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; import { useField } from 'formik'; -import { Input, InputGroup, Stack, StackProps } from 'leather-styles/jsx'; +import { Stack, StackProps } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { CryptoCurrencies } from '@shared/models/currencies.model'; import { StacksFeeEstimate } from '@shared/models/fees/stacks-fees.model'; diff --git a/src/app/components/fees-row/components/fee-estimate-item.tsx b/src/app/components/fees-row/components/fee-estimate-item.tsx index a8398d9af0f..68f959f2344 100644 --- a/src/app/components/fees-row/components/fee-estimate-item.tsx +++ b/src/app/components/fees-row/components/fee-estimate-item.tsx @@ -1,7 +1,7 @@ import { useMemo } from 'react'; import { FiCheck } from 'react-icons/fi'; -import { Stack, styled } from 'leather-styles/jsx'; +import { HStack, styled } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { ChevronDownIcon } from '@app/components/icons/chevron-down-icon'; @@ -24,7 +24,7 @@ export function FeeEstimateItem(props: FeeEstimateItemProps) { }, [index, selectedItem]); return ( - onSelectItem(index)} @@ -42,6 +41,6 @@ export function FeeEstimateItem(props: FeeEstimateItemProps) { {labels[index]} {isVisible ? selectedIcon : } - + ); } diff --git a/src/app/components/fees-row/components/fee-estimate-select.layout.tsx b/src/app/components/fees-row/components/fee-estimate-select.layout.tsx index 2fb89b5af49..80950b03a9b 100644 --- a/src/app/components/fees-row/components/fee-estimate-select.layout.tsx +++ b/src/app/components/fees-row/components/fee-estimate-select.layout.tsx @@ -37,7 +37,7 @@ export { Fade }; // #4164 FIXME replace with radix tooltip replace Fade import { Fade, Tooltip } from '@stacks/ui'; import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; -import { Box, Stack } from 'leather-styles/jsx'; +import { Stack } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { FeeTypes } from '@shared/models/fees/fees.model'; @@ -72,7 +72,7 @@ export function FeeEstimateSelectLayout(props: FeeEstimateSelectLayoutProps) { selectedItem={FeeTypes.Middle} /> - {styles => ( + {(styles: React.CSSProperties) => ( - openInNewTab(url)} size="14px" diff --git a/src/app/components/fees-row/components/fees-row.layout.tsx b/src/app/components/fees-row/components/fees-row.layout.tsx index f584264c007..c4bcf3de102 100644 --- a/src/app/components/fees-row/components/fees-row.layout.tsx +++ b/src/app/components/fees-row/components/fees-row.layout.tsx @@ -1,5 +1,5 @@ import { useField } from 'formik'; -import { Stack, StackProps } from 'leather-styles/jsx'; +import { HStack, Stack, StackProps } from 'leather-styles/jsx'; import { SpaceBetween } from '@app/components/layout/space-between'; import { SponsoredLabel } from '@app/components/sponsored-label'; @@ -19,10 +19,10 @@ export function FeesRowLayout(props: FeesRowLayoutProps) { return ( - + Fee {!isSponsored ? selectInput : null} - + {feeField} {isSponsored && } diff --git a/src/app/components/fees-row/fees-row.tsx b/src/app/components/fees-row/fees-row.tsx index 90dcf6f7923..ecbf632a974 100644 --- a/src/app/components/fees-row/fees-row.tsx +++ b/src/app/components/fees-row/fees-row.tsx @@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; import BigNumber from 'bignumber.js'; import { useField } from 'formik'; -import { Box, StackProps } from 'leather-styles/jsx'; +import { StackProps, styled } from 'leather-styles/jsx'; import { FeeTypes, Fees } from '@shared/models/fees/fees.model'; import { createMoney } from '@shared/models/money.model'; @@ -74,8 +74,8 @@ export function FeesRow(props: FeeRowProps): React.JSX.Element { }, [feeTypeHelper, feeHelper, fees] ); - - if (!hasFeeEstimates) return ; + // #4164 FIXME migrate - check this and if it can be updated + if (!hasFeeEstimates) return ; return ( setFieldWarning(value)} /> ) : ( - handleSelectFeeEstimateOrCustomField(FeeTypes.Custom)}> + handleSelectFeeEstimateOrCustomField(FeeTypes.Custom)}> - + ) } fieldWarning={fieldWarning} diff --git a/src/app/components/generic-error/generic-error.layout.tsx b/src/app/components/generic-error/generic-error.layout.tsx index c3b8388c5ee..8e89658e8a7 100644 --- a/src/app/components/generic-error/generic-error.layout.tsx +++ b/src/app/components/generic-error/generic-error.layout.tsx @@ -2,6 +2,7 @@ import { ReactNode } from 'react'; import GenericError from '@assets/images/generic-error.png'; import { Box, Flex, FlexProps, HStack, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { openInNewTab } from '@app/common/utils/open-in-new-tab'; import { LeatherButton } from '@app/components/button/button'; diff --git a/src/app/components/hr.tsx b/src/app/components/hr.tsx index d623a4d5a87..67ce4d1a212 100644 --- a/src/app/components/hr.tsx +++ b/src/app/components/hr.tsx @@ -1,10 +1,16 @@ import { styled } from 'leather-styles/jsx'; -// FIXME - figure out what this does. maybe style a
; +export function Hr({ my = 'unset', height = 'auto' }: { my?: string; height?: string }) { + return ( + + ); } export function DashedHr(props: JsxStyleProps) { diff --git a/src/app/components/icons/btc-stamps-icon.tsx b/src/app/components/icons/btc-stamps-icon.tsx index 9fd47cc01c2..12262bd57d7 100644 --- a/src/app/components/icons/btc-stamps-icon.tsx +++ b/src/app/components/icons/btc-stamps-icon.tsx @@ -1,5 +1,4 @@ import BitcoinStampImg from '@assets/images/bitcoin-stamp.png'; -import { Box } from 'leather-styles/jsx'; export function BtcStampsIcon() { return ; diff --git a/src/app/components/icons/microblock.tsx b/src/app/components/icons/microblock.tsx deleted file mode 100644 index 621a4d811cd..00000000000 --- a/src/app/components/icons/microblock.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { FiZap } from 'react-icons/fi'; - -import { Box, BoxProps } from 'leather-styles/jsx'; - -export function MicroblockIcon(props: BoxProps) { - return ; -} diff --git a/src/app/components/icons/stx-icon.tsx b/src/app/components/icons/stx-icon.tsx index bdd79f03fe1..0ad5256d81e 100644 --- a/src/app/components/icons/stx-icon.tsx +++ b/src/app/components/icons/stx-icon.tsx @@ -1,8 +1,6 @@ -import { BoxProps, Svg } from 'leather-styles/jsx'; - -export function StxIcon(props: BoxProps) { +export function StxIcon(props: React.SVGProps) { return ( - + - + ); } diff --git a/src/app/components/icons/wallet-type-ledger-icon.tsx b/src/app/components/icons/wallet-type-ledger-icon.tsx index 53e6fe6eabd..1460956745e 100644 --- a/src/app/components/icons/wallet-type-ledger-icon.tsx +++ b/src/app/components/icons/wallet-type-ledger-icon.tsx @@ -1,13 +1,13 @@ -import { Box, BoxProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -export function WalletTypeLedgerIcon(props: BoxProps) { +// #4164 FIXME migrate - do we even need these wrappers? +export function WalletTypeLedgerIcon() { return ( - ); } diff --git a/src/app/components/info-card/info-card.tsx b/src/app/components/info-card/info-card.tsx index 9dc24c43973..1a305e41739 100644 --- a/src/app/components/info-card/info-card.tsx +++ b/src/app/components/info-card/info-card.tsx @@ -65,7 +65,7 @@ interface InfoCardAssetValueProps extends StackProps { fiatValue?: string; fiatSymbol?: string; symbol?: string; - icon?: React.FC; + icon?: React.JSX.Element; } export function InfoCardAssetValue({ @@ -77,10 +77,10 @@ export function InfoCardAssetValue({ ...props }: InfoCardAssetValueProps) { return ( - + // #4164 FIXME refactor this Box. Passing these props directly to keep TS happy + - {icon && } - + {icon && icon} void; } @@ -114,7 +114,10 @@ export function InfoCardBtn({ icon, label, onClick }: InfoCardBtnProps) { {label} - + {/* // #4164 FIXME check and refactor this */} + + {icon} + ); diff --git a/src/app/components/info-label.tsx b/src/app/components/info-label.tsx index 865326ffa2a..33328033a62 100644 --- a/src/app/components/info-label.tsx +++ b/src/app/components/info-label.tsx @@ -15,7 +15,7 @@ export function InfoLabel({ children, title, ...rest }: InfoLabelProps) { borderRadius="10px" minHeight="48px" px="space.04" - py="base-tight" + py="space.03" gap="space.02" width="100%" color="accent.notification-text" diff --git a/src/app/components/inscription-preview-card/components/inscription-metadata.tsx b/src/app/components/inscription-preview-card/components/inscription-metadata.tsx index 4d4872014dd..a8a11daf2ce 100644 --- a/src/app/components/inscription-preview-card/components/inscription-metadata.tsx +++ b/src/app/components/inscription-preview-card/components/inscription-metadata.tsx @@ -1,6 +1,5 @@ -import { Flex } from 'leather-styles/jsx'; - -import { Text } from '@app/components/typography'; +import { Flex, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; interface InscriptionMetadataProps { action?(): void; @@ -19,23 +18,20 @@ export function InscriptionMetadata({ return ( {icon && icon} - - {title} - + {title} {subtitle} {action ? ( - action()} type="button" > {actionLabel} - + ) : null} ); diff --git a/src/app/components/inscription-preview-card/components/inscription-text.tsx b/src/app/components/inscription-preview-card/components/inscription-text.tsx index 34698618235..55281f8b469 100644 --- a/src/app/components/inscription-preview-card/components/inscription-text.tsx +++ b/src/app/components/inscription-preview-card/components/inscription-text.tsx @@ -1,5 +1,7 @@ +// #4164 FIXME migrate - check if there is a radix spinner +import { Spinner } from '@stacks/ui'; import { sanitize } from 'dompurify'; -import { Box, Spinner } from 'leather-styles/jsx'; +import { Box, styled } from 'leather-styles/jsx'; import { figmaTheme } from '@app/common/utils/figma-theme'; import { useTextInscriptionContentQuery } from '@app/query/bitcoin/ordinals/use-text-ordinal-content.query'; @@ -19,7 +21,7 @@ export function InscriptionText(props: InscriptionTextProps) { height="100%" color="white" p="20px" - sx={{ + style={{ position: 'relative', overflow: 'hidden', textAlign: 'left', diff --git a/src/app/components/inscription-preview-card/inscription-preview-card.tsx b/src/app/components/inscription-preview-card/inscription-preview-card.tsx index 855232248fc..cc2f298c30c 100644 --- a/src/app/components/inscription-preview-card/inscription-preview-card.tsx +++ b/src/app/components/inscription-preview-card/inscription-preview-card.tsx @@ -28,7 +28,7 @@ export function InscriptionPreviewCard({ borderColor={hideBorder ? 'unset' : token('colors.accent.border-default')} borderRadius={hideBorder ? 'unset' : '10px'} img={image} - p={hideBorder ? 'unset' : 'base'} + p={hideBorder ? 'unset' : 'space.04'} spacing="space.04" > , +
, ]; }) .filter((_value, index, array) => index !== array.length - 1)} diff --git a/src/app/components/layout/divider.tsx b/src/app/components/layout/divider.tsx index 87eed0050e9..d9b9a7f837f 100644 --- a/src/app/components/layout/divider.tsx +++ b/src/app/components/layout/divider.tsx @@ -8,7 +8,7 @@ import { token } from 'leather-styles/tokens'; test divider class is working https://panda-css.com/docs/concepts/patterns#divider */ -function Divider() { +export function Divider() { return ( {img} diff --git a/src/app/components/layout/space-between.tsx b/src/app/components/layout/space-between.tsx index e94cda79fc4..4fb2b616958 100644 --- a/src/app/components/layout/space-between.tsx +++ b/src/app/components/layout/space-between.tsx @@ -1,14 +1,7 @@ import { forwardRefWithAs } from '@stacks/ui-core'; -import { Stack, StackProps } from 'leather-styles/jsx'; +import { HStack, HstackProps } from 'leather-styles/jsx'; // #4164 FIXME migrate - could be able to replace this ((props, ref) => ( - +export const SpaceBetween = forwardRefWithAs((props, ref) => ( + )); diff --git a/src/app/components/link.tsx b/src/app/components/link.tsx index b07833e0ce3..17d5a7e17e4 100644 --- a/src/app/components/link.tsx +++ b/src/app/components/link.tsx @@ -1,6 +1,7 @@ import { KeyboardEvent } from 'react'; -import { BoxProps } from 'leather-styles/jsx'; +import { BoxProps, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; export const buildEnterKeyEvent = (onClick: () => void) => { return (event: KeyboardEvent) => { @@ -16,7 +17,8 @@ export function Link(props: BoxProps): React.JSX.Element { diff --git a/src/app/components/request-password.tsx b/src/app/components/request-password.tsx index 9e6148ce285..5c90b429a4b 100644 --- a/src/app/components/request-password.tsx +++ b/src/app/components/request-password.tsx @@ -1,7 +1,9 @@ import { FormEvent, useCallback, useState } from 'react'; +// #4164 FIXME migrate Input - not sure if we even need it +import { Input } from '@stacks/ui'; import { SettingsSelectors } from '@tests/selectors/settings.selectors'; -import { Box, Input, Stack } from 'leather-styles/jsx'; +import { Box, Stack } from 'leather-styles/jsx'; import { styled } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; @@ -9,7 +11,6 @@ import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { useKeyActions } from '@app/common/hooks/use-key-actions'; import { WaitingMessages, useWaitingMessage } from '@app/common/utils/use-waiting-message'; import { LeatherButton } from '@app/components/button/button'; -import { Text } from '@app/components/typography'; import { ErrorLabel } from './error-label'; import { buildEnterKeyEvent } from './link'; diff --git a/src/app/components/requester-flag.tsx b/src/app/components/requester-flag.tsx index 9b5fca8aaed..3d97cda7747 100644 --- a/src/app/components/requester-flag.tsx +++ b/src/app/components/requester-flag.tsx @@ -13,7 +13,7 @@ export function RequesterFlag({ requester }: RequesterFlagProps) { img={} alignItems="center" justifyContent="center" - py="extra-tight" + py="space.01" px="space.02" borderRadius="10px" width="fit-content" diff --git a/src/app/components/sponsored-label.tsx b/src/app/components/sponsored-label.tsx index 25a4a6eecb8..09fb3fad050 100644 --- a/src/app/components/sponsored-label.tsx +++ b/src/app/components/sponsored-label.tsx @@ -1,22 +1,22 @@ import { FiAlertCircle } from 'react-icons/fi'; -import { Box, Stack } from 'leather-styles/jsx'; +import { HStack, Stack, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; export function SponsoredLabel(): React.JSX.Element { return ( - - This transaction is sponsored, so no fee is charged - + ); } diff --git a/src/app/components/stacks-transaction-item/increase-fee-button.tsx b/src/app/components/stacks-transaction-item/increase-fee-button.tsx index 29a8ccf8594..63f04ed4f99 100644 --- a/src/app/components/stacks-transaction-item/increase-fee-button.tsx +++ b/src/app/components/stacks-transaction-item/increase-fee-button.tsx @@ -1,6 +1,8 @@ import { FiFastForward } from 'react-icons/fi'; -import { Box, Button } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; + +import { LeatherButton } from '../button/button'; interface IncreaseFeeButtonProps { isEnabled?: boolean; @@ -13,26 +15,30 @@ export function IncreaseFeeButton(props: IncreaseFeeButtonProps) { const isActive = isEnabled && isHovered && !isSelected; return ( - + ); } diff --git a/src/app/components/stacks-transaction-item/stacks-transaction-icon.tsx b/src/app/components/stacks-transaction-item/stacks-transaction-icon.tsx index ca53dc787e6..4bfac638972 100644 --- a/src/app/components/stacks-transaction-item/stacks-transaction-icon.tsx +++ b/src/app/components/stacks-transaction-item/stacks-transaction-icon.tsx @@ -1,6 +1,8 @@ import { FiAlertOctagon, FiList } from 'react-icons/fi'; -import { BoxProps, DynamicColorCircle } from 'leather-styles/jsx'; +// #4164 FIXME migrate DynamicColorCircle +import { DynamicColorCircle } from '@stacks/ui'; +import { BoxProps } from 'leather-styles/jsx'; import { StacksTx } from '@shared/models/transactions/stacks-transaction.model'; @@ -23,7 +25,6 @@ export function StacksTransactionIcon({ transaction, ...rest }: TransactionIconP string={`${transaction.smart_contract.contract_id}`} backgroundSize="200%" size="36px" - {...rest} > @@ -35,7 +36,6 @@ export function StacksTransactionIcon({ transaction, ...rest }: TransactionIconP string={`${transaction.contract_call.contract_id}::${transaction.contract_call.function_name}`} backgroundSize="200%" size="36px" - {...rest} > diff --git a/src/app/components/stacks-transaction-item/stacks-transaction-item.tsx b/src/app/components/stacks-transaction-item/stacks-transaction-item.tsx index 3e66a3b99ea..099203fd824 100644 --- a/src/app/components/stacks-transaction-item/stacks-transaction-item.tsx +++ b/src/app/components/stacks-transaction-item/stacks-transaction-item.tsx @@ -2,7 +2,8 @@ import { createSearchParams, useLocation, useNavigate } from 'react-router-dom'; import type { MempoolTransaction } from '@stacks/stacks-blockchain-api-types'; import { isPendingTx } from '@stacks/ui-utils'; -import { BoxProps } from 'leather-styles/jsx'; +import { BoxProps, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { StacksTx, TxTransferDetails } from '@shared/models/transactions/stacks-transaction.model'; import { RouteUrls } from '@shared/route-urls'; diff --git a/src/app/components/stacks-transaction-item/stacks-transaction-status.tsx b/src/app/components/stacks-transaction-item/stacks-transaction-status.tsx index 15c9112c833..a902eb54964 100644 --- a/src/app/components/stacks-transaction-item/stacks-transaction-status.tsx +++ b/src/app/components/stacks-transaction-item/stacks-transaction-status.tsx @@ -1,6 +1,7 @@ import type { MempoolTransaction } from '@stacks/stacks-blockchain-api-types'; import { isPendingTx } from '@stacks/ui-utils'; import { styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { StacksTx } from '@shared/models/transactions/stacks-transaction.model'; diff --git a/src/app/components/text-input-field.tsx b/src/app/components/text-input-field.tsx index a9d4e4ec012..41a43e46fff 100644 --- a/src/app/components/text-input-field.tsx +++ b/src/app/components/text-input-field.tsx @@ -27,6 +27,7 @@ interface TextInputFieldProps extends FlexProps { topInputOverlay?: React.JSX.Element; hasError?: boolean; } + export function TextInputField({ dataTestId, isDisabled, @@ -39,8 +40,9 @@ export function TextInputField({ topInputOverlay, inputRef, hasError, - ...props -}: TextInputFieldProps) { +}: // #4164 FIXME migrate - check other props passed +// ...props +TextInputFieldProps) { const [field] = useField(name); const ref = useRef(null); @@ -48,7 +50,7 @@ export function TextInputField({ return ( <> - - + {label && field.value ? ( - + ); diff --git a/src/app/components/tooltip.tsx b/src/app/components/tooltip.tsx index cea9699b682..7e13522db36 100644 --- a/src/app/components/tooltip.tsx +++ b/src/app/components/tooltip.tsx @@ -3,7 +3,7 @@ import { memo, useMemo } from 'react'; import Tippy, { TippyProps } from '@tippyjs/react'; -import { Box, BoxProps } from 'leather-styles/jsx'; +import { BoxProps, styled } from 'leather-styles/jsx'; interface TooltipProps extends TippyProps { hideOnClick?: boolean; @@ -14,9 +14,9 @@ export const Tooltip = memo( ({ children, hideOnClick, label, labelProps = {}, ...rest }: TooltipProps) => { const content = useMemo( () => ( - + {label} - + ), [labelProps, label] ); diff --git a/src/app/components/transaction-item/transaction-item.layout.tsx b/src/app/components/transaction-item/transaction-item.layout.tsx index 5cb7e654d88..9c4224677d6 100644 --- a/src/app/components/transaction-item/transaction-item.layout.tsx +++ b/src/app/components/transaction-item/transaction-item.layout.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, Stack } from 'leather-styles/jsx'; +import { Box, Flex, HStack } from 'leather-styles/jsx'; import { SpaceBetween } from '@app/components/layout/space-between'; @@ -25,10 +25,8 @@ export function TransactionItemLayout({ }: TransactionItemLayoutProps) { return ( - {txTitle} {txValue} - + {txCaption} {txStatus && txStatus} {belowCaptionEl ? belowCaptionEl : null} - + - + {children} ); diff --git a/src/app/components/transaction/microblock-label.tsx b/src/app/components/transaction/microblock-label.tsx index de70845bf55..edc1ce4f170 100644 --- a/src/app/components/transaction/microblock-label.tsx +++ b/src/app/components/transaction/microblock-label.tsx @@ -1,6 +1,7 @@ import { FiInfo } from 'react-icons/fi'; -import { Box, Flex, Stack } from 'leather-styles/jsx'; +import { Flex, Stack, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { Tooltip } from '@app/components/tooltip'; @@ -10,16 +11,16 @@ const inMicroblockMessage = export function MicroblockLabel() { return ( - + In microblock - - + diff --git a/src/app/components/transaction/pending-label.tsx b/src/app/components/transaction/pending-label.tsx index 0d4a41a867e..54af80eb9d1 100644 --- a/src/app/components/transaction/pending-label.tsx +++ b/src/app/components/transaction/pending-label.tsx @@ -1,6 +1,8 @@ +// #4164 FIXME this is almost identical to MicroblockLabel import { FiInfo } from 'react-icons/fi'; -import { Box, Flex, Stack } from 'leather-styles/jsx'; +import { Flex, Stack, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { Tooltip } from '@app/components/tooltip'; @@ -16,16 +18,16 @@ export function PendingLabel({ }: PendingLabelProps) { return ( - + Pending - - + diff --git a/src/app/components/transaction/transaction-icon-wrapper.tsx b/src/app/components/transaction/transaction-icon-wrapper.tsx index ac0ec3d9551..27bfffb9705 100644 --- a/src/app/components/transaction/transaction-icon-wrapper.tsx +++ b/src/app/components/transaction/transaction-icon-wrapper.tsx @@ -1,4 +1,5 @@ -import { Box, BoxProps, Circle } from 'leather-styles/jsx'; +import { BoxProps, Circle } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { StacksTx } from '@shared/models/transactions/stacks-transaction.model'; @@ -15,14 +16,15 @@ export function TransactionIconWrapper({ }: TransactionIconWrapperProps) { return ( - + ); diff --git a/src/app/components/transaction/transaction-type-icon-wrapper.tsx b/src/app/components/transaction/transaction-type-icon-wrapper.tsx index 93b6dc19747..e449e18b451 100644 --- a/src/app/components/transaction/transaction-type-icon-wrapper.tsx +++ b/src/app/components/transaction/transaction-type-icon-wrapper.tsx @@ -1,4 +1,5 @@ -import { Box, BoxProps, Circle } from 'leather-styles/jsx'; +import { BoxProps, Circle } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; interface TransactionTypeIconWrapperProps extends BoxProps { icon: React.FC; @@ -15,13 +16,16 @@ export function TransactionTypeIconWrapper({ right="-9px" position="absolute" size="21px" - bg={color(bg)} + // #4164 FIXME migrate this bg needs a refactor + bg={token(bg)} color={token('colors.accent.background-primary')} border="2px solid" borderColor={token('colors.accent.background-primary')} {...rest} > - + {/* // #4164 FIXME migrate this bg needs a refactor */} + {/* */} + ); } diff --git a/src/app/components/transaction/transaction-type-icon.tsx b/src/app/components/transaction/transaction-type-icon.tsx index fe92be444e1..f8927ce67a8 100644 --- a/src/app/components/transaction/transaction-type-icon.tsx +++ b/src/app/components/transaction/transaction-type-icon.tsx @@ -4,20 +4,25 @@ import { FiCode as IconCode, FiPlus as IconPlus, } from 'react-icons/fi'; +// #4164 FIXME migrate - ask design about this icon - do we have a new one +import { FiZap } from 'react-icons/fi'; -import { BoxProps, ColorsStringLiteral } from 'leather-styles/jsx'; +// // #4164 FIXME migrate ColorsStringLiteral +import { ColorsStringLiteral } from '@stacks/ui'; +import { BoxProps, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import FunctionIcon from 'mdi-react/FunctionIcon'; import { StacksTx, StacksTxStatus } from '@shared/models/transactions/stacks-transaction.model'; import { statusFromTx } from '@app/common/transactions/stacks/transaction.utils'; -import { MicroblockIcon } from '@app/components/icons/microblock'; import { useCurrentAccountStxAddressState } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { TransactionTypeIconWrapper } from './transaction-type-icon-wrapper'; type StatusColorMap = Record; +// #4164 FIXME migrate color const colorFromTx = (tx: StacksTx): ColorsStringLiteral => { const colorMap: StatusColorMap = { pending: 'feedback-alert', @@ -35,12 +40,13 @@ function IconForTx(tx: StacksTx, currentAccountStxAddress: string | undefined) { const tokenTransferIcon = (tx: StacksTx) => { return 'is_unanchored' in tx && tx.is_unanchored ? () => ( - + + + ) : isSent ? IconArrowUp diff --git a/src/app/components/tx-asset-item.tsx b/src/app/components/tx-asset-item.tsx index 2118775c0b3..1a5ed0dc8d9 100644 --- a/src/app/components/tx-asset-item.tsx +++ b/src/app/components/tx-asset-item.tsx @@ -1,11 +1,11 @@ -import { Stack, StackProps } from 'leather-styles/jsx'; +import { HStack, HstackProps, styled } from 'leather-styles/jsx'; import { isValidUrl } from '@shared/utils/validate-url'; import { StacksAssetAvatar } from '@app/components/crypto-assets/stacks/components/stacks-asset-avatar'; import { SpaceBetween } from '@app/components/layout/space-between'; -interface AssetItemProps extends StackProps { +interface AssetItemProps extends HstackProps { iconString: string; amount: string | number; ticker: string; @@ -17,7 +17,7 @@ export function TxAssetItem(props: AssetItemProps): React.JSX.Element { return ( - + {ticker} - + {amount} diff --git a/src/app/components/warning-label.tsx b/src/app/components/warning-label.tsx index d35318dbdd2..a7640db17a4 100644 --- a/src/app/components/warning-label.tsx +++ b/src/app/components/warning-label.tsx @@ -20,7 +20,7 @@ export function WarningLabel({ children, title, ...props }: WarningLabelProps) { img={} minHeight="48px" px="space.04" - py="base-tight" + py="space.03" width="100%" > {title ? ( diff --git a/src/app/features/activity-list/components/pending-transaction-list/pending-transaction-list.layout.tsx b/src/app/features/activity-list/components/pending-transaction-list/pending-transaction-list.layout.tsx index 7e483111f57..5a7621a7152 100644 --- a/src/app/features/activity-list/components/pending-transaction-list/pending-transaction-list.layout.tsx +++ b/src/app/features/activity-list/components/pending-transaction-list/pending-transaction-list.layout.tsx @@ -1,6 +1,7 @@ import { ReactNode } from 'react'; -import { Stack } from 'leather-styles/jsx'; +import { Stack, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; interface PendingTransactionListLayoutProps { children: ReactNode; diff --git a/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-icon.tsx b/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-icon.tsx index 44da9c949db..6747d832c33 100644 --- a/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-icon.tsx +++ b/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-icon.tsx @@ -1,5 +1,7 @@ import { PayloadType, StacksTransaction, addressToString } from '@stacks/transactions'; -import { BoxProps, DynamicColorCircle } from 'leather-styles/jsx'; +// #4164 FIXME migrate DynamicColorCircle +import { DynamicColorCircle } from '@stacks/ui'; +import { BoxProps } from 'leather-styles/jsx'; import { StacksTx } from '@shared/models/transactions/stacks-transaction.model'; @@ -20,7 +22,6 @@ export function SubmittedTransactionIcon({ transaction, ...rest }: SubmittedTran string={`${getTxSenderAddress(transaction)}.${transaction.payload.contractName.content}`} backgroundSize="200%" size="36px" - {...rest} > - handleOpenTxLink({ blockchain: 'stacks', @@ -53,13 +51,9 @@ export function SubmittedTransactionItem(props: SubmittedTransactionItemProps) { > - + - + {caption} - + {value && ( @@ -80,7 +74,7 @@ export function SubmittedTransactionItem(props: SubmittedTransactionItemProps) { )} - + {component} ); diff --git a/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-list.layout.tsx b/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-list.layout.tsx index eaf6f7cf170..f5af91c4cc3 100644 --- a/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-list.layout.tsx +++ b/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-list.layout.tsx @@ -1,7 +1,8 @@ import { ReactNode, useMemo } from 'react'; import { deserializeTransaction } from '@stacks/transactions'; -import { Stack } from 'leather-styles/jsx'; +import { Stack, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { SubmittedTransactionItem } from '@app/features/activity-list/components/submitted-transaction-list/submitted-transaction-item'; import { SubmittedTransaction } from '@app/store/submitted-transactions/submitted-transactions.slice'; diff --git a/src/app/features/activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx b/src/app/features/activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx index b082f771f85..4d9e8a20fb7 100644 --- a/src/app/features/activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx +++ b/src/app/features/activity-list/components/transaction-list/stacks-transaction/tx-transfer-icon-wrapper.tsx @@ -1,4 +1,5 @@ -import { Box, Circle } from 'leather-styles/jsx'; +import { Circle } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { StxIcon } from '@app/components/icons/stx-icon'; import { TransactionTypeIconWrapper } from '@app/components/transaction/transaction-type-icon-wrapper'; @@ -9,13 +10,15 @@ interface TxTransferIconWrapperProps { export function TxTransferIconWrapper({ icon }: TxTransferIconWrapperProps) { return ( - + ); diff --git a/src/app/features/activity-list/components/transaction-list/transactions-by-date.layout.tsx b/src/app/features/activity-list/components/transaction-list/transactions-by-date.layout.tsx index 187669859c8..2d89bc9f791 100644 --- a/src/app/features/activity-list/components/transaction-list/transactions-by-date.layout.tsx +++ b/src/app/features/activity-list/components/transaction-list/transactions-by-date.layout.tsx @@ -1,6 +1,7 @@ import { ReactNode } from 'react'; -import { Box, Stack } from 'leather-styles/jsx'; +import { Box, Stack, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; interface TransactionByDateLayoutProps { children: ReactNode; diff --git a/src/app/features/add-network/add-network.tsx b/src/app/features/add-network/add-network.tsx index 227523fdf09..55ad9bff674 100644 --- a/src/app/features/add-network/add-network.tsx +++ b/src/app/features/add-network/add-network.tsx @@ -2,9 +2,11 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { ChainID } from '@stacks/transactions'; +// #4164 FIXME migrate Input +import { Input } from '@stacks/ui'; import { NetworkSelectors } from '@tests-legacy/integration/network.selectors'; import { Formik } from 'formik'; -import { Input, Stack } from 'leather-styles/jsx'; +import { Stack, styled } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { DefaultNetworkConfigurations } from '@shared/constants'; @@ -17,7 +19,6 @@ import { LeatherButton } from '@app/components/button/button'; import { CenteredPageContainer } from '@app/components/centered-page-container'; import { ErrorLabel } from '@app/components/error-label'; import { Header } from '@app/components/header'; -import { Text } from '@app/components/typography'; import { useCurrentStacksNetworkState, useNetworksActions, diff --git a/src/app/features/asset-list/asset-list.tsx b/src/app/features/asset-list/asset-list.tsx index 35f63d62b27..107c9e949e5 100644 --- a/src/app/features/asset-list/asset-list.tsx +++ b/src/app/features/asset-list/asset-list.tsx @@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom'; import { useNavigate } from 'react-router-dom'; import { HomePageSelectorsLegacy } from '@tests-legacy/page-objects/home.selectors'; -import { Box, Stack } from 'leather-styles/jsx'; +import { Stack } from 'leather-styles/jsx'; import { LEDGER_BITCOIN_ENABLED } from '@shared/environment'; @@ -34,7 +34,7 @@ export function AssetsList() { } + icon={} address={btcAddress} /> ), @@ -42,7 +42,7 @@ export function AssetsList() { } + icon={} address={btcAddress} // add conditionally if not bitcoin keys isPressable={!btcAddress} diff --git a/src/app/features/bitcoin-choose-fee/components/choose-fee-tabs.tsx b/src/app/features/bitcoin-choose-fee/components/choose-fee-tabs.tsx index 825673708a6..bd9b686585f 100644 --- a/src/app/features/bitcoin-choose-fee/components/choose-fee-tabs.tsx +++ b/src/app/features/bitcoin-choose-fee/components/choose-fee-tabs.tsx @@ -47,7 +47,8 @@ export { ScaleFade }; * * */ -import { SlideFade } from 'leather-styles/jsx'; +// #4164 FIXME migrate SlideFade +import { SlideFade } from '@stacks/ui'; import { Box, Flex, Stack, StackProps } from 'leather-styles/jsx'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; @@ -85,7 +86,7 @@ export function ChooseFeeTabs(props: ChooseFeeTabsProps) { {activeTab === 0 && ( }> - {styles => ( + {(styles: React.CSSProperties) => ( {feesList} @@ -96,7 +97,7 @@ export function ChooseFeeTabs(props: ChooseFeeTabsProps) { {activeTab === 1 && ( }> - {styles => ( + {(styles: React.CSSProperties) => ( {customFee} diff --git a/src/app/features/bitcoin-choose-fee/components/insufficient-balance-error.tsx b/src/app/features/bitcoin-choose-fee/components/insufficient-balance-error.tsx index dc1c585ef42..09b3bae9ccf 100644 --- a/src/app/features/bitcoin-choose-fee/components/insufficient-balance-error.tsx +++ b/src/app/features/bitcoin-choose-fee/components/insufficient-balance-error.tsx @@ -1,4 +1,5 @@ -import { Box, BoxProps } from 'leather-styles/jsx'; +import { Box, BoxProps, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; export function InsufficientBalanceError(props: BoxProps) { return ( diff --git a/src/app/features/collectibles/components/add-collectible.tsx b/src/app/features/collectibles/components/add-collectible.tsx index 1814efaa42f..c5b64e09b64 100644 --- a/src/app/features/collectibles/components/add-collectible.tsx +++ b/src/app/features/collectibles/components/add-collectible.tsx @@ -1,6 +1,5 @@ import { useNavigate } from 'react-router-dom'; -import { Box } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { RouteUrls } from '@shared/route-urls'; @@ -37,7 +36,8 @@ export function AddCollectible() { subtitle="Collectible" title="Add new" > - + {/* // #4164 FIXME check this icon */} + ); } diff --git a/src/app/features/collectibles/components/collectibes.layout.tsx b/src/app/features/collectibles/components/collectibes.layout.tsx index 778bf47480b..a183710175f 100644 --- a/src/app/features/collectibles/components/collectibes.layout.tsx +++ b/src/app/features/collectibles/components/collectibes.layout.tsx @@ -1,4 +1,7 @@ -import { Flex, Grid, Spinner } from 'leather-styles/jsx'; +// #4164 FIXME migrate Spinner +import { Spinner } from '@stacks/ui'; +import { Flex, Grid } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { RefreshIcon } from '@app/components/icons/refresh-icon'; import { LoadingSpinner } from '@app/components/loading-spinner'; @@ -30,7 +33,7 @@ export function CollectiblesLayout(props: CollectiblesLayoutProps) { {onClickCallToAction && ( - { e.stopPropagation(); onClickCallToAction(); }} - as="button" position="absolute" right="12px" top="12px" @@ -50,7 +50,7 @@ export function CollectibleHover({ _focus={{ outline: `4px solid ${figmaTheme.borderFocused}` }} > - + )} ); diff --git a/src/app/features/collectibles/components/collectible-item.layout.tsx b/src/app/features/collectibles/components/collectible-item.layout.tsx index 285ade7d836..67267d51565 100644 --- a/src/app/features/collectibles/components/collectible-item.layout.tsx +++ b/src/app/features/collectibles/components/collectible-item.layout.tsx @@ -1,11 +1,11 @@ import { ReactNode } from 'react'; -import { Box, Button, Stack } from 'leather-styles/jsx'; -import type { BoxProps } from 'leather-styles/jsx'; +import { Box, BoxProps, Stack, styled } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { useHover } from 'use-events'; import { figmaTheme } from '@app/common/utils/figma-theme'; +import { LeatherButton } from '@app/components/button/button'; import { CollectibleHover } from './collectible-hover'; @@ -40,11 +40,12 @@ export function CollectibleItemLayout({ outlineOffset: '-4px', }} _hover={{ backgroundColor: token('colors.accent.background-secondary') }} - as={onClickLayout ? 'button' : 'div'} + // // #4164 FIXME migrate - not sure if this 'as' matters - if so refactor + // as={onClickLayout ? 'button' : 'div'} borderRadius="20px" onClick={onClickLayout} padding="4px" - sx={{ + style={{ // Buttons have had styles applied that center their children text // nodes, which is undesirable in this case. A button is being used more // for its actionability (focus, onclick) & accessibility rather than @@ -76,7 +77,7 @@ export function CollectibleItemLayout({ {children} - + - + ) : ( diff --git a/src/app/features/collectibles/components/stacks/stacks-bns-name.tsx b/src/app/features/collectibles/components/stacks/stacks-bns-name.tsx index fdf0d77938f..6bcb665ca99 100644 --- a/src/app/features/collectibles/components/stacks/stacks-bns-name.tsx +++ b/src/app/features/collectibles/components/stacks/stacks-bns-name.tsx @@ -17,7 +17,7 @@ export function StacksBnsName(props: { bnsName: string }) { return ( } + collectibleTypeIcon={} subtitle="Bitcoin Naming System" title={bnsName} > diff --git a/src/app/features/collectibles/components/stacks/stacks-non-fungible-tokens.tsx b/src/app/features/collectibles/components/stacks/stacks-non-fungible-tokens.tsx index 77e3f08e6d9..8122294aa59 100644 --- a/src/app/features/collectibles/components/stacks/stacks-non-fungible-tokens.tsx +++ b/src/app/features/collectibles/components/stacks/stacks-non-fungible-tokens.tsx @@ -25,7 +25,7 @@ export function StacksNonFungibleTokens({ metadata }: StacksNonFungibleTokensPro } + icon={} src={metadata.cached_image ?? ''} subtitle="Stacks NFT" title={metadata.name ?? ''} diff --git a/src/app/features/current-account/popup-header.tsx b/src/app/features/current-account/popup-header.tsx index 85eefb243c4..df08b01d874 100644 --- a/src/app/features/current-account/popup-header.tsx +++ b/src/app/features/current-account/popup-header.tsx @@ -1,6 +1,6 @@ import { Suspense } from 'react'; -import { Box, Stack } from 'leather-styles/jsx'; +import { Box, HStack } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { BtcBalance } from '@app/components/balance-btc'; @@ -45,19 +45,20 @@ function PopupHeaderSuspense({ displayAddresssBalanceOf = 'stx' }: PopupHeaderPr color={token('colors.white')} fontSize="16px" fontWeight={500} - size="32px" + height="32px" + width="32px" /> } > - + {account && displayAddresssBalanceOf === 'stx' && ( )} {isBitcoinEnabled && displayAddresssBalanceOf === 'all' && } - + diff --git a/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx b/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx index af210d9a2f3..78c5caaa508 100644 --- a/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx +++ b/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx @@ -1,7 +1,8 @@ import { FormEvent, memo } from 'react'; +// #4164 FIXME migrate Input +import { Input } from '@stacks/ui'; import { useField } from 'formik'; -import { Input } from 'leather-styles/jsx'; import { Stack, StackProps, styled } from 'leather-styles/jsx'; import { ErrorLabel } from '@app/components/error-label'; diff --git a/src/app/features/errors/app-error-boundary.tsx b/src/app/features/errors/app-error-boundary.tsx index db6cae33a09..9f8ad0b50b0 100644 --- a/src/app/features/errors/app-error-boundary.tsx +++ b/src/app/features/errors/app-error-boundary.tsx @@ -1,8 +1,12 @@ -import { Box, Button, CodeBlock, Stack } from 'leather-styles/jsx'; +// #4164 FIXME migrate CodeBlock +import { CodeBlock } from '@stacks/ui'; +import { Box, Stack } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { Prism } from '@app/common/clarity-prism'; import { HasChildren } from '@app/common/has-children'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; +import { LeatherButton } from '@app/components/button/button'; import { Header } from '@app/components/header'; import { Title } from '@app/components/typography'; import { ErrorBoundary, FallbackProps, useErrorHandler } from '@app/features/errors/error-boundary'; @@ -29,20 +33,22 @@ function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) { borderRadius="12px" backgroundColor="ink.1000" width="100%" - code={value as string} + code={value} language="bash" Prism={Prism as any} /> )} - - + ); diff --git a/src/app/features/high-fee-drawer/components/high-fee-confirmation.tsx b/src/app/features/high-fee-drawer/components/high-fee-confirmation.tsx index ac5fcc2c82b..b3dfdca106a 100644 --- a/src/app/features/high-fee-drawer/components/high-fee-confirmation.tsx +++ b/src/app/features/high-fee-drawer/components/high-fee-confirmation.tsx @@ -1,5 +1,5 @@ import { useFormikContext } from 'formik'; -import { Button, Stack } from 'leather-styles/jsx'; +import { HStack, Stack } from 'leather-styles/jsx'; import { BitcoinSendFormValues, @@ -9,6 +9,7 @@ import { import { useDrawers } from '@app/common/hooks/use-drawers'; import { openInNewTab } from '@app/common/utils/open-in-new-tab'; +import { LeatherButton } from '@app/components/button/button'; import { Link } from '@app/components/link'; import { Caption, Title } from '@app/components/typography'; @@ -30,19 +31,21 @@ export function HighFeeConfirmation(props: { learnMoreUrl: string }) { Learn more - - - - + + ); } diff --git a/src/app/features/high-fee-drawer/high-fee-drawer.tsx b/src/app/features/high-fee-drawer/high-fee-drawer.tsx index 71560941fd8..38f6a6ed1b0 100644 --- a/src/app/features/high-fee-drawer/high-fee-drawer.tsx +++ b/src/app/features/high-fee-drawer/high-fee-drawer.tsx @@ -1,7 +1,7 @@ import { useEffect } from 'react'; import { FiAlertTriangle } from 'react-icons/fi'; -import { Box } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { useDrawers } from '@app/common/hooks/use-drawers'; import { ControlledDrawer } from '@app/components/drawer/controlled-drawer'; @@ -20,7 +20,7 @@ export function HighFeeDrawer(props: { learnMoreUrl: string }) { return ( } + icon={} isShowing={isShowingHighFeeConfirmation} onClose={() => setIsShowingHighFeeConfirmation(false)} > diff --git a/src/app/features/hiro-messages/components/in-app-message-item.tsx b/src/app/features/hiro-messages/components/in-app-message-item.tsx index 39879104b8f..c90ce8ab19a 100644 --- a/src/app/features/hiro-messages/components/in-app-message-item.tsx +++ b/src/app/features/hiro-messages/components/in-app-message-item.tsx @@ -1,6 +1,6 @@ import { FiX } from 'react-icons/fi'; -import { Box, Flex } from 'leather-styles/jsx'; +import { Box, Flex, styled } from 'leather-styles/jsx'; import { HiroMessage } from '@app/query/common/remote-config/remote-config.query'; @@ -22,13 +22,12 @@ export function HiroMessageItem(props: HiroMessageItemProps) { p="space.04" > {dismissible && ( - onDismiss(id)} > - + )} {img && ( - + )} @@ -52,15 +51,15 @@ export function HiroMessageItem(props: HiroMessageItemProps) { {text} + {/* #4164 FIXME use ExternalLink */} {learnMoreUrl && ( - {learnMoreText ? learnMoreText : 'Learn more ↗'} - + )} diff --git a/src/app/features/increase-fee-drawer/components/fee-multiplier-button.tsx b/src/app/features/increase-fee-drawer/components/fee-multiplier-button.tsx index 4056fcdc8af..f1e2190060f 100644 --- a/src/app/features/increase-fee-drawer/components/fee-multiplier-button.tsx +++ b/src/app/features/increase-fee-drawer/components/fee-multiplier-button.tsx @@ -1,22 +1,27 @@ -import { Button, ButtonProps } from 'leather-styles/jsx'; +// #4164 FIXME migrate - need to check thos properly, could be an icon +// probably don't need this component +import { LeatherButton } from '@app/components/button/button'; -interface FeeMultiplierButtonProps extends ButtonProps { +interface FeeMultiplierButtonProps { multiplier: number; + onClick: () => void; } -export function FeeMultiplierButton(props: FeeMultiplierButtonProps): React.JSX.Element { - const { multiplier, ...rest } = props; - +export function FeeMultiplierButton({ + multiplier, + onClick, +}: FeeMultiplierButtonProps): React.JSX.Element { return ( - + ); } diff --git a/src/app/features/increase-fee-drawer/components/fee-multiplier.tsx b/src/app/features/increase-fee-drawer/components/fee-multiplier.tsx index e4aef7f6dd8..00819f86f00 100644 --- a/src/app/features/increase-fee-drawer/components/fee-multiplier.tsx +++ b/src/app/features/increase-fee-drawer/components/fee-multiplier.tsx @@ -1,10 +1,10 @@ -import { Stack, StackProps } from 'leather-styles/jsx'; +import { HStack, HstackProps } from 'leather-styles/jsx'; import { FeeMultiplierButton } from './fee-multiplier-button'; const multipliers = [2, 5, 10]; -interface FeeMultiplierProps extends StackProps { +interface FeeMultiplierProps extends HstackProps { onSelectMultiplier(multiplier: number): void; showReset?: boolean; } @@ -13,7 +13,7 @@ export function FeeMultiplier(props: FeeMultiplierProps): React.JSX.Element { const { onSelectMultiplier, showReset, ...rest } = props; return ( - + {showReset && ( ))} - + ); } 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 61273f11370..5aa04abeb2d 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 @@ -52,12 +52,8 @@ export function IncreaseBtcFeeForm({ btcTx }: IncreaseBtcFeeFormProps) { {btcTx && } - - + + - + Fee - + void; isShowing: boolean; } diff --git a/src/app/features/ledger/components/ledger-inline-warnings.tsx b/src/app/features/ledger/components/ledger-inline-warnings.tsx index 3d99bf68ce4..b3bff28f3fc 100644 --- a/src/app/features/ledger/components/ledger-inline-warnings.tsx +++ b/src/app/features/ledger/components/ledger-inline-warnings.tsx @@ -23,9 +23,9 @@ export function CommonLedgerDeviceInlineWarnings({ return ( Latest version of {chain} app required - + Update on Ledger Live to continue - + ); } diff --git a/src/app/features/ledger/components/ledger-screen-detail.tsx b/src/app/features/ledger/components/ledger-screen-detail.tsx index d303836eaae..07218a9ba50 100644 --- a/src/app/features/ledger/components/ledger-screen-detail.tsx +++ b/src/app/features/ledger/components/ledger-screen-detail.tsx @@ -1,6 +1,7 @@ import { FiInfo } from 'react-icons/fi'; -import { Box, Flex } from 'leather-styles/jsx'; +import { Flex, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { Tooltip } from '@app/components/tooltip'; import { Caption } from '@app/components/typography'; @@ -20,12 +21,10 @@ export function LedgerScreenDetail(props: LedgerScreenDetailProps) { {title} - diff --git a/src/app/features/ledger/components/looking-for-ledger-label.tsx b/src/app/features/ledger/components/looking-for-ledger-label.tsx index 2f483946d4a..09564333605 100644 --- a/src/app/features/ledger/components/looking-for-ledger-label.tsx +++ b/src/app/features/ledger/components/looking-for-ledger-label.tsx @@ -1,4 +1,7 @@ -import { Flex, FlexProps, Spinner } from 'leather-styles/jsx'; +// #4164 FIXME migrate Spinner +import { Spinner } from '@stacks/ui'; +import { Flex, FlexProps } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { Caption } from '@app/components/typography'; diff --git a/src/app/features/ledger/components/success-label.tsx b/src/app/features/ledger/components/success-label.tsx index 98b14dee1bb..4a13ec8c054 100644 --- a/src/app/features/ledger/components/success-label.tsx +++ b/src/app/features/ledger/components/success-label.tsx @@ -1,6 +1,7 @@ import { FiCheck } from 'react-icons/fi'; import { Flex, FlexProps } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { Caption } from '@app/components/typography'; @@ -9,7 +10,8 @@ interface LedgerSuccessLabelProps extends FlexProps { } export function LedgerSuccessLabel({ children, ...props }: LedgerSuccessLabelProps) { return ( - + // #4164 FIXME migrate color success + {children} diff --git a/src/app/features/ledger/flows/jwt-signing/steps/sign-jwt-hash.tsx b/src/app/features/ledger/flows/jwt-signing/steps/sign-jwt-hash.tsx index c28ec3a44ae..212d3445d18 100644 --- a/src/app/features/ledger/flows/jwt-signing/steps/sign-jwt-hash.tsx +++ b/src/app/features/ledger/flows/jwt-signing/steps/sign-jwt-hash.tsx @@ -2,6 +2,7 @@ import { useContext } from 'react'; import SignLedgerTransaction from '@assets/images/ledger/sign-ledger-transaction.png'; import { Box, Flex } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { DeviceOperationApprovalStatus } from '@app/features/ledger/components/device-approval-status'; import { LedgerScreenDetail } from '@app/features/ledger/components/ledger-screen-detail'; diff --git a/src/app/features/ledger/flows/stacks-tx-signing/steps/contract-principal-bug-warning.tsx b/src/app/features/ledger/flows/stacks-tx-signing/steps/contract-principal-bug-warning.tsx index 514f94ad63b..c4a0aabbe71 100644 --- a/src/app/features/ledger/flows/stacks-tx-signing/steps/contract-principal-bug-warning.tsx +++ b/src/app/features/ledger/flows/stacks-tx-signing/steps/contract-principal-bug-warning.tsx @@ -1,10 +1,11 @@ import { useContext } from 'react'; import GenericErrorImg from '@assets/images/generic-error.png'; -import { Box, Button, Stack } from 'leather-styles/jsx'; +import { Box, HStack, styled } from 'leather-styles/jsx'; import { useLoading } from '@app/common/hooks/use-loading'; import { delay } from '@app/common/utils'; +import { LeatherButton } from '@app/components/button/button'; import { Body } from '@app/components/typography'; import { LedgerTitle } from '@app/features/ledger/components/ledger-title'; import { LedgerWrapper } from '@app/features/ledger/components/ledger-wrapper'; @@ -13,7 +14,7 @@ import { ledgerTxSigningContext } from '../ledger-sign-tx.context'; export function ContractPrincipalBugWarning() { const { hasUserSkippedBuggyAppWarning } = useContext(ledgerTxSigningContext); - const { isLoading, setIsLoading, setIsIdle } = useLoading('temp-spinner-deep-link'); + const { /*isLoading,*/ setIsLoading, setIsIdle } = useLoading('temp-spinner-deep-link'); return ( @@ -27,11 +28,11 @@ export function ContractPrincipalBugWarning() { {' '} and try again. - - - - + + ); } diff --git a/src/app/features/ledger/generic-flows/request-keys/steps/add-more-keys.tsx b/src/app/features/ledger/generic-flows/request-keys/steps/add-more-keys.tsx index 2cc7a9028ec..595f2da7a9b 100644 --- a/src/app/features/ledger/generic-flows/request-keys/steps/add-more-keys.tsx +++ b/src/app/features/ledger/generic-flows/request-keys/steps/add-more-keys.tsx @@ -1,7 +1,9 @@ import { useNavigate } from 'react-router-dom'; -import { Button, ButtonGroup } from 'leather-styles/jsx'; +// #4164 FIXME migrate ButtonGroup +import { ButtonGroup } from '@stacks/ui'; +import { LeatherButton } from '@app/components/button/button'; import { Caption } from '@app/components/typography'; import { LedgerTitle } from '@app/features/ledger/components/ledger-title'; import { LedgerWrapper } from '@app/features/ledger/components/ledger-wrapper'; @@ -12,10 +14,10 @@ export function AddMoreKeysLayout() { Add Bitcoin keys - - + + navigate('/')}>Go to homepage You'll need to have the Bitcoin app installed diff --git a/src/app/features/ledger/generic-steps/approve-ledger-operation/approve-ledger-operation.layout.tsx b/src/app/features/ledger/generic-steps/approve-ledger-operation/approve-ledger-operation.layout.tsx index 90cc9fe3a25..c089d6bc16e 100644 --- a/src/app/features/ledger/generic-steps/approve-ledger-operation/approve-ledger-operation.layout.tsx +++ b/src/app/features/ledger/generic-steps/approve-ledger-operation/approve-ledger-operation.layout.tsx @@ -1,5 +1,6 @@ import SignLedgerTransaction from '@assets/images/ledger/sign-ledger-transaction.png'; import { Box, Flex } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { DividerSeparator } from '@app/components/layout/divider-separator'; @@ -33,7 +34,7 @@ export function ApproveLedgerOperationLayout(props: ApproveLedgerOperationLayout py="space.06" width="100%" > - + {details.map(([title, value, tooltipLabel]) => ( {value} diff --git a/src/app/features/ledger/generic-steps/broadcast-error/broadcast-error.layout.tsx b/src/app/features/ledger/generic-steps/broadcast-error/broadcast-error.layout.tsx index a0269dd3805..40a944dbd6b 100644 --- a/src/app/features/ledger/generic-steps/broadcast-error/broadcast-error.layout.tsx +++ b/src/app/features/ledger/generic-steps/broadcast-error/broadcast-error.layout.tsx @@ -1,6 +1,7 @@ import BroadcastError from '@assets/images/unhappy-face-ui.png'; -import { Box, Button, Flex } from 'leather-styles/jsx'; +import { Box, Flex } from 'leather-styles/jsx'; +import { LeatherButton } from '@app/components/button/button'; import { Body } from '@app/components/typography'; import { LedgerTitle } from '../../components/ledger-title'; @@ -21,13 +22,14 @@ export function LedgerBroadcastErrorLayout(props: LedgerBroadcastErrorLayoutProp Transaction Broadcast Error - + Your transaction failed to broadcast {error && <>because of the error: {error}} - + ); diff --git a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx index 7638eb71b42..ec46557f9f2 100644 --- a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx +++ b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-error.layout.tsx @@ -2,6 +2,7 @@ import { FiCircle } from 'react-icons/fi'; import ConnectLedgerError from '@assets/images/ledger/connect-ledger-error.png'; import { Box, Flex, Stack } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { openInNewTab } from '@app/common/utils/open-in-new-tab'; import { LeatherButton } from '@app/components/button/button'; diff --git a/src/app/features/ledger/generic-steps/invalid-payload/device-invalid-payload.layout.tsx b/src/app/features/ledger/generic-steps/invalid-payload/device-invalid-payload.layout.tsx index ed1b45fa704..136b2ad06ef 100644 --- a/src/app/features/ledger/generic-steps/invalid-payload/device-invalid-payload.layout.tsx +++ b/src/app/features/ledger/generic-steps/invalid-payload/device-invalid-payload.layout.tsx @@ -1,5 +1,6 @@ import LedgerWithRedOutline from '@assets/images/ledger/ledger-red-outline.png'; -import { Box, Flex } from 'leather-styles/jsx'; +import { Box, Flex, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { LeatherButton } from '@app/components/button/button'; import { Title } from '@app/components/typography'; @@ -18,11 +19,11 @@ export function LedgerDeviceInvalidPayloadLayout({ Data Invalid - + Your Ledger device has rejected the payload stating it is invalid - + Close diff --git a/src/app/features/ledger/generic-steps/ledger-disconnected/ledger-disconnected.layout.tsx b/src/app/features/ledger/generic-steps/ledger-disconnected/ledger-disconnected.layout.tsx index 06e76a7cfa5..431d6932751 100644 --- a/src/app/features/ledger/generic-steps/ledger-disconnected/ledger-disconnected.layout.tsx +++ b/src/app/features/ledger/generic-steps/ledger-disconnected/ledger-disconnected.layout.tsx @@ -1,5 +1,5 @@ import LedgerDisconnected from '@assets/images/ledger/ledger-disconnected.png'; -import { Box, Button, Stack } from 'leather-styles/jsx'; +import { Box, HStack } from 'leather-styles/jsx'; import { LeatherButton } from '@app/components/button/button'; @@ -20,14 +20,15 @@ export function LedgerDisconnectedLayout(props: LedgerDisconnectedLayoutProps) { Your Ledger has disconnected - - + Connect again - + ); } diff --git a/src/app/features/ledger/generic-steps/operation-rejected/operation-rejected.layout.tsx b/src/app/features/ledger/generic-steps/operation-rejected/operation-rejected.layout.tsx index ed0d25cd5af..f49bdebe065 100644 --- a/src/app/features/ledger/generic-steps/operation-rejected/operation-rejected.layout.tsx +++ b/src/app/features/ledger/generic-steps/operation-rejected/operation-rejected.layout.tsx @@ -1,5 +1,8 @@ import LedgerTxRejected from '@assets/images/ledger/transaction-rejected.png'; -import { Box, Button, Flex } from 'leather-styles/jsx'; +import { Box, Flex, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; + +import { LeatherButton } from '@app/components/button/button'; import { LedgerTitle } from '../../components/ledger-title'; @@ -20,13 +23,13 @@ export function LedgerOperationRejectedLayout({ {description} - + ); } diff --git a/src/app/features/ledger/generic-steps/public-key-mismatch/public-key-mismatch.layout.tsx b/src/app/features/ledger/generic-steps/public-key-mismatch/public-key-mismatch.layout.tsx index ac014b3cc8b..53473bb769e 100644 --- a/src/app/features/ledger/generic-steps/public-key-mismatch/public-key-mismatch.layout.tsx +++ b/src/app/features/ledger/generic-steps/public-key-mismatch/public-key-mismatch.layout.tsx @@ -1,6 +1,8 @@ import LedgerWithRedOutline from '@assets/images/ledger/ledger-red-outline.png'; -import { Box, Button, Flex } from 'leather-styles/jsx'; +import { Box, Flex, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; +import { LeatherButton } from '@app/components/button/button'; import { Title } from '@app/components/typography'; import { LedgerWrapper } from '../../components/ledger-wrapper'; @@ -16,14 +18,15 @@ export function PublicKeyMismatchLayout({ onClose, onTryAgain }: PublicKeyMismat Public key does not match - + Ensure you're using the same Ledger you used when setting up the Leather - - + + Try again ); diff --git a/src/app/features/ledger/generic-steps/unsupported-browser/unsupported-browser.layout.tsx b/src/app/features/ledger/generic-steps/unsupported-browser/unsupported-browser.layout.tsx index 75628e11b4a..7bb9a0550a0 100644 --- a/src/app/features/ledger/generic-steps/unsupported-browser/unsupported-browser.layout.tsx +++ b/src/app/features/ledger/generic-steps/unsupported-browser/unsupported-browser.layout.tsx @@ -17,7 +17,7 @@ export function UnsupportedBrowserLayout() { fontSize="16px" lineHeight="1.7" mt="space.04" - pb="base-tight" + pb="space.03" mx="space.06" color={figmaTheme.textSubdued} > diff --git a/src/app/features/ledger/hooks/use-ledger-latest-route-error.hook.ts b/src/app/features/ledger/hooks/use-ledger-latest-route-error.hook.ts index 4d941d1bd1b..6aaca34fec2 100644 --- a/src/app/features/ledger/hooks/use-ledger-latest-route-error.hook.ts +++ b/src/app/features/ledger/hooks/use-ledger-latest-route-error.hook.ts @@ -8,7 +8,7 @@ export function useLatestLedgerError() { const state = location.state; if (!state || state === null) return null; if (typeof state === 'object') { - const error = (state as any).latestLedgerError; + const error = (state ).latestLedgerError; if (error) return error; } return null; diff --git a/src/app/features/ledger/utils/generic-ledger-utils.ts b/src/app/features/ledger/utils/generic-ledger-utils.ts index 7fb4c971b46..9ae23dfe2df 100644 --- a/src/app/features/ledger/utils/generic-ledger-utils.ts +++ b/src/app/features/ledger/utils/generic-ledger-utils.ts @@ -1,6 +1,7 @@ import { useState } from 'react'; -import { safeAwait } from 'leather-styles/jsx'; +// #4164 FIXME migrate safeAwait +import { safeAwait } from '@stacks/ui'; import { delay } from '@app/common/utils'; diff --git a/src/app/features/message-signer/hash-drawer.tsx b/src/app/features/message-signer/hash-drawer.tsx index b63722439c5..99e7398d434 100644 --- a/src/app/features/message-signer/hash-drawer.tsx +++ b/src/app/features/message-signer/hash-drawer.tsx @@ -1,6 +1,5 @@ import { useState } from 'react'; -import { Flex } from 'leather-styles/jsx'; import { Box, styled } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; @@ -24,8 +23,7 @@ export function HashDrawer(props: HashDrawerProps) { const [displayHash, setDisplayHash] = useState(hash); return ( - - + {order.amount} {order.tick} - + - + {/* // #4164 FIXME migrate - check this Caption is OK */} + - + - + {component} ); diff --git a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/psbt-inputs-outputs-totals.tsx b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/psbt-inputs-outputs-totals.tsx index 9f26fba4a22..830f9131896 100644 --- a/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/psbt-inputs-outputs-totals.tsx +++ b/src/app/features/psbt-signer/components/psbt-inputs-outputs-totals/psbt-inputs-outputs-totals.tsx @@ -1,4 +1,3 @@ -import { color } from '@stacks/ui-utils'; import { Box } from 'leather-styles/jsx'; import { Hr } from '@app/components/hr'; @@ -34,9 +33,7 @@ export function PsbtInputsOutputsTotals() { ) : null} - {showDivider ? ( -
- ) : null} + {showDivider ?
: null} {isReceiving ? ( diff --git a/src/app/features/psbt-signer/components/psbt-request-details-header.tsx b/src/app/features/psbt-signer/components/psbt-request-details-header.tsx index 276bab75e51..f1287c665c8 100644 --- a/src/app/features/psbt-signer/components/psbt-request-details-header.tsx +++ b/src/app/features/psbt-signer/components/psbt-request-details-header.tsx @@ -1,4 +1,4 @@ -import { Box, Stack } from 'leather-styles/jsx'; +import { Box, HStack } from 'leather-styles/jsx'; import { styled } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; @@ -17,28 +17,21 @@ export function PsbtRequestDetailsHeader() { const labelColor = isPsbtMutable ? token('colors.red.600') : token('colors.accent.text-subdued'); return ( - + Transaction - {/* #4164 FIXME migrate check if we need this wrapper box */} @@ -51,8 +44,8 @@ export function PsbtRequestDetailsHeader() { {isPsbtMutable ? 'Uncertain' : 'Certain'} - + - + ); } diff --git a/src/app/features/psbt-signer/components/psbt-request-details-section.layout.tsx b/src/app/features/psbt-signer/components/psbt-request-details-section.layout.tsx index 0a024de2960..e31bfaff81c 100644 --- a/src/app/features/psbt-signer/components/psbt-request-details-section.layout.tsx +++ b/src/app/features/psbt-signer/components/psbt-request-details-section.layout.tsx @@ -1,4 +1,5 @@ import { Stack, StackProps } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { HasChildren } from '@app/common/has-children'; @@ -9,7 +10,7 @@ export function PsbtRequestDetailsSectionLayout({ children, ...props }: HasChild borderColor={token('colors.accent.background-primary')} borderRadius="16px" p="space.05" - gap="extra-tight" + gap="space.01" width="100%" {...props} > diff --git a/src/app/features/psbt-signer/components/psbt-request-sighash-warning-label.tsx b/src/app/features/psbt-signer/components/psbt-request-sighash-warning-label.tsx index 371f5af2afa..ee2e9492fc0 100644 --- a/src/app/features/psbt-signer/components/psbt-request-sighash-warning-label.tsx +++ b/src/app/features/psbt-signer/components/psbt-request-sighash-warning-label.tsx @@ -8,7 +8,7 @@ export function PsbtRequestSighashWarningLabel() { The details you see here are not guaranteed. Be sure to fully trust your counterparty, who can later modify this transaction to send or receive other assets from your account, and possibly even drain it. - + Learn more↗ diff --git a/src/app/features/settings-dropdown/components/advanced-menu-items.tsx b/src/app/features/settings-dropdown/components/advanced-menu-items.tsx index 44f4f0b6379..04d3dbec523 100644 --- a/src/app/features/settings-dropdown/components/advanced-menu-items.tsx +++ b/src/app/features/settings-dropdown/components/advanced-menu-items.tsx @@ -47,7 +47,7 @@ export function AdvancedMenuItems({ closeHandler, settingsShown }: AdvancedMenuI })} > Copy diagnostics to clipboard - + Contains private wallet usage activity @@ -58,7 +58,7 @@ export function AdvancedMenuItems({ closeHandler, settingsShown }: AdvancedMenuI })} > Clear diagnostic information - + {diagnosticLogText} diff --git a/src/app/features/settings-dropdown/components/ledger-item-row.tsx b/src/app/features/settings-dropdown/components/ledger-item-row.tsx index c39024de95b..4d42ed75376 100644 --- a/src/app/features/settings-dropdown/components/ledger-item-row.tsx +++ b/src/app/features/settings-dropdown/components/ledger-item-row.tsx @@ -1,5 +1,5 @@ -import { Flex } from 'leather-styles/jsx'; -import { Divider } from 'leather-styles/jsx'; +import { Divider, Flex, styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { WalletTypeLedgerIcon } from '@app/components/icons/wallet-type-ledger-icon'; @@ -9,9 +9,9 @@ interface LedgerDeviceItemRowProps { export function LedgerDeviceItemRow({ deviceType }: LedgerDeviceItemRowProps) { return ( <> - - - + + + Ledger {deviceType ?? ''} diff --git a/src/app/features/settings-dropdown/components/settings-menu-wrapper.tsx b/src/app/features/settings-dropdown/components/settings-menu-wrapper.tsx index b216bb58a22..729aad36617 100644 --- a/src/app/features/settings-dropdown/components/settings-menu-wrapper.tsx +++ b/src/app/features/settings-dropdown/components/settings-menu-wrapper.tsx @@ -1,5 +1,6 @@ import { forwardRefWithAs } from '@stacks/ui-core'; import { Box } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; export const MenuWrapper = forwardRefWithAs((props, ref) => ( - {styles => ( + {(styles: React.CSSProperties) => ( {key && key.type === 'ledger' && ( @@ -106,11 +109,10 @@ export function SettingsDropdown() { openInNewTab('https://leather.gitbook.io/guides/installing/contact-support'); })} > - {/* FIXME - replace isInline */} - + Get support - + { @@ -118,11 +120,10 @@ export function SettingsDropdown() { openInNewTab('https://leather.canny.io/feature-requests'); })} > - {/* FIXME - replace isInline */} - + Request feature - + {hasGeneratedWallet ? : null} ( > Unable to load account information - + We're unable to load information about your accounts. This may be a problem with the wallet's API. If this problem persists, contact support. diff --git a/src/app/features/switch-account-drawer/components/switch-account-list.tsx b/src/app/features/switch-account-drawer/components/switch-account-list.tsx index d407bfef050..bc616341f6c 100644 --- a/src/app/features/switch-account-drawer/components/switch-account-list.tsx +++ b/src/app/features/switch-account-drawer/components/switch-account-list.tsx @@ -21,7 +21,7 @@ export const SwitchAccountList = memo( style={{ paddingTop: '24px', height: '70vh' }} totalCount={accounts.length} itemContent={index => ( - + )} diff --git a/src/app/features/switch-account-drawer/switch-account-drawer.tsx b/src/app/features/switch-account-drawer/switch-account-drawer.tsx index ce61a39dfed..51e23fd6e0f 100644 --- a/src/app/features/switch-account-drawer/switch-account-drawer.tsx +++ b/src/app/features/switch-account-drawer/switch-account-drawer.tsx @@ -33,7 +33,7 @@ export const SwitchAccountDrawer = memo(() => { return isShowing && accounts ? ( - + } align="middle" width="100%"> - - {title ? title : 'BTC'} - - - {value} - + {title ? title : 'BTC'} + {value} {subtitle ? ( @@ -49,35 +47,36 @@ export function BitcoinContractLockAmount({ maxWidth="230px" placement="bottom" > - - + {subtitle} {hoverLabel ? : null} - + ) : null} {subValue ? ( - + + {/* // #4164 FIXME need to visual check this */} + {/* // #4164 FIXME migrate color('accent') set to token('colors.accent.text-primary') here */} {subValue} - {subValueAction ? : null} - + {subValueAction ? : null} + ) : null} diff --git a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-offer-input.tsx b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-offer-input.tsx index b9c6a6e1fec..81311557967 100644 --- a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-offer-input.tsx +++ b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-offer-input.tsx @@ -1,5 +1,6 @@ import { truncateMiddle } from '@stacks/ui-utils'; import { Stack } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; import { createMoneyFromDecimal } from '@shared/models/money.model'; diff --git a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-actions.tsx b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-actions.tsx index 6a2ab8b8740..dd04d7cb3b6 100644 --- a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-actions.tsx +++ b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-request-actions.tsx @@ -1,4 +1,4 @@ -import { Box, Button, Stack } from 'leather-styles/jsx'; +import { Box, HStack } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { useBtcAssetBalance } from '@app/common/hooks/balance/btc/use-btc-balance'; @@ -32,20 +32,16 @@ export function BitcoinContractRequestActions({ width="100%" zIndex={999} > - - + Accept - + ); } diff --git a/src/app/pages/choose-account/components/accounts.tsx b/src/app/pages/choose-account/components/accounts.tsx index 14b632956d2..9c81e3f6042 100644 --- a/src/app/pages/choose-account/components/accounts.tsx +++ b/src/app/pages/choose-account/components/accounts.tsx @@ -3,7 +3,7 @@ import { FiPlusCircle } from 'react-icons/fi'; import { useNavigate } from 'react-router-dom'; import { Virtuoso } from 'react-virtuoso'; -import { Box, BoxProps, FlexProps, Stack } from 'leather-styles/jsx'; +import { Box, BoxProps, FlexProps, HStack } from 'leather-styles/jsx'; import { styled } from 'leather-styles/jsx'; import { RouteUrls } from '@shared/route-urls'; @@ -112,11 +112,11 @@ const AddAccountAction = memo(() => { }; return ( - - + + Generate new account - + {component} ); diff --git a/src/app/pages/fund/components/fast-checkout-badge.tsx b/src/app/pages/fund/components/fast-checkout-badge.tsx index 8034c9b9426..72bb6795465 100644 --- a/src/app/pages/fund/components/fast-checkout-badge.tsx +++ b/src/app/pages/fund/components/fast-checkout-badge.tsx @@ -1,29 +1,28 @@ import { FiZap } from 'react-icons/fi'; -import { Stack } from 'leather-styles/jsx'; +import { HStack } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { Caption } from '@app/components/typography'; export function FastCheckoutBadge() { return ( - Fast checkout - + ); } diff --git a/src/app/pages/fund/components/fiat-providers-list.tsx b/src/app/pages/fund/components/fiat-providers-list.tsx index 720f276b4cf..b4c9a9695ad 100644 --- a/src/app/pages/fund/components/fiat-providers-list.tsx +++ b/src/app/pages/fund/components/fiat-providers-list.tsx @@ -37,7 +37,7 @@ export function FiatProvidersList(props: FiatProvidersProps) { - + {receiveStxIcon} {title} - + {description} - - {attributes} - + {attributes} - + ); } diff --git a/src/app/pages/fund/components/zero-percent-fees-badge.tsx b/src/app/pages/fund/components/zero-percent-fees-badge.tsx index efc485456e7..8776c6844c2 100644 --- a/src/app/pages/fund/components/zero-percent-fees-badge.tsx +++ b/src/app/pages/fund/components/zero-percent-fees-badge.tsx @@ -1,31 +1,30 @@ import { FiStar } from 'react-icons/fi'; -import { Stack } from 'leather-styles/jsx'; +import { HStack } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { Caption } from '@app/components/typography'; export function ZeroPercentFeesBadge() { return ( - 0% Fees - + ); } diff --git a/src/app/pages/fund/fund.layout.tsx b/src/app/pages/fund/fund.layout.tsx index f3eff8a0ca6..e6d13bdf574 100644 --- a/src/app/pages/fund/fund.layout.tsx +++ b/src/app/pages/fund/fund.layout.tsx @@ -1,9 +1,10 @@ -import { Flex, Stack, useMediaQuery } from 'leather-styles/jsx'; +// #4164 FIXME migrate useMediaQuery +import { useMediaQuery } from '@stacks/ui'; +import { Flex, Stack } from 'leather-styles/jsx'; import { styled } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { PageTitle } from '@app/components/page-title'; -import { Text } from '@app/components/typography'; import { FiatProvidersList } from './components/fiat-providers-list'; @@ -27,10 +28,10 @@ export function FundLayout(props: FundLayoutProps) { > { +export const CurrentAccount = memo((props: HstackProps) => { const currentAccount = useCurrentStacksAccount(); const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero(); if (!currentAccount) return null; return ( - + - + - + - + - + ); }); diff --git a/src/app/pages/home/components/home.layout.tsx b/src/app/pages/home/components/home.layout.tsx index 225e3ff1a14..88e3181c833 100644 --- a/src/app/pages/home/components/home.layout.tsx +++ b/src/app/pages/home/components/home.layout.tsx @@ -1,7 +1,8 @@ import React from 'react'; +// #4164 FIXME migrate useMediaQuery +import { useMediaQuery } from '@stacks/ui'; import { HomePageSelectors } from '@tests/selectors/home.selectors'; -import { useMediaQuery } from 'leather-styles/jsx'; import { Stack } from 'leather-styles/jsx'; import { AccountInfoCard } from './account-info-card'; diff --git a/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.layout.tsx b/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.layout.tsx index c8e7e6eb7a2..3b7f9463281 100644 --- a/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.layout.tsx +++ b/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.layout.tsx @@ -1,4 +1,5 @@ -import { useMediaQuery } from 'leather-styles/jsx'; +// #4164 FIXME migrate useMediaQuery +import { useMediaQuery } from '@stacks/ui'; import { Box, Flex, Stack, styled } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; @@ -45,7 +46,7 @@ export function BackUpSecretKeyLayout(props: BackUpSecretKeyLayoutProps): React. flexGrow={1} flex="1" justifyContent="center" - mt={['loose', 'loose', 'unset']} + mt={['space.05', 'space.05', 'unset']} > {secretKeyDisplay} diff --git a/src/app/pages/onboarding/back-up-secret-key/components/back-up-secret-key-actions.tsx b/src/app/pages/onboarding/back-up-secret-key/components/back-up-secret-key-actions.tsx index e78357db5d3..617c8049fdc 100644 --- a/src/app/pages/onboarding/back-up-secret-key/components/back-up-secret-key-actions.tsx +++ b/src/app/pages/onboarding/back-up-secret-key/components/back-up-secret-key-actions.tsx @@ -1,7 +1,7 @@ -import { FiEyeOff, FiLock, FiRotateCcw } from 'react-icons/fi'; +import { FiEyeOff, FiLock } from 'react-icons/fi'; import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors'; -import { Box, Stack } from 'leather-styles/jsx'; +import { HStack } from 'leather-styles/jsx'; import { styled } from 'leather-styles/jsx'; import { LeatherButton } from '@app/components/button/button'; @@ -15,18 +15,18 @@ export function BackUpSecretKeyActions(props: BackUpSecretKeyLayoutProps): React return ( <> - + Your Secret Key gives access to your wallet - - + + Never share your Secret Key with anyone - - + + Store it somewhere 100% private and secure - + - + - Password strength: + Password strength: {field.value ? strengthText : '—'} diff --git a/src/app/pages/onboarding/set-password/components/password-strength-indicator.tsx b/src/app/pages/onboarding/set-password/components/password-strength-indicator.tsx index 71b7e94243b..62a3238661f 100644 --- a/src/app/pages/onboarding/set-password/components/password-strength-indicator.tsx +++ b/src/app/pages/onboarding/set-password/components/password-strength-indicator.tsx @@ -1,6 +1,6 @@ import { useMemo } from 'react'; -import { Box, Stack } from 'leather-styles/jsx'; +import { Box, HStack } from 'leather-styles/jsx'; import { createNullArrayOfLength } from '@app/common/utils'; import { ValidatedPassword } from '@app/common/validation/validate-password'; @@ -45,9 +45,5 @@ export function PasswordStrengthIndicator(props: PasswordStrengthIndicatorProps) strengthResult.score, ]); - return ( - - {bars} - - ); + return {bars}; } diff --git a/src/app/pages/onboarding/sign-in/sign-in.tsx b/src/app/pages/onboarding/sign-in/sign-in.tsx index 39bf74f7414..433626afd6f 100644 --- a/src/app/pages/onboarding/sign-in/sign-in.tsx +++ b/src/app/pages/onboarding/sign-in/sign-in.tsx @@ -1,8 +1,10 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; +// #4164 FIXME migrate Input +import { Input } from '@stacks/ui'; import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors'; -import { Grid, Input } from 'leather-styles/jsx'; +import { Grid } from 'leather-styles/jsx'; import { Box, Flex, Stack, styled } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { useFocus } from 'use-events'; @@ -129,7 +131,7 @@ export function SignIn() { Your Secret Key - + } + mb="space.05 " /> } /> @@ -144,15 +144,10 @@ export function RpcSendTransferSummary() { {arrivesIn && } - - - - + + } label="View Details" onClick={onClickLink} /> + } label="Copy ID" onClick={onClickCopy} /> + diff --git a/src/app/pages/rpc-sign-psbt/rpc-sign-psbt-summary.tsx b/src/app/pages/rpc-sign-psbt/rpc-sign-psbt-summary.tsx index 0380e626003..1908b9d4260 100644 --- a/src/app/pages/rpc-sign-psbt/rpc-sign-psbt-summary.tsx +++ b/src/app/pages/rpc-sign-psbt/rpc-sign-psbt-summary.tsx @@ -2,7 +2,9 @@ import toast from 'react-hot-toast'; import { FiCheck, FiCopy, FiExternalLink } from 'react-icons/fi'; import { useLocation } from 'react-router-dom'; -import { Flex, Stack, useClipboard } from 'leather-styles/jsx'; +// #4164 FIXME migrate useClipboard +import { useClipboard } from '@stacks/ui'; +import { Flex, HStack, Stack } from 'leather-styles/jsx'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { useExplorerLink } from '@app/common/hooks/use-explorer-link'; @@ -46,7 +48,7 @@ export function RpcSignPsbtSummary() { value={txValue} fiatValue={txFiatValue} fiatSymbol={txFiatValueSymbol} - icon={FiCheck} + icon={} mb="space.05" /> @@ -55,15 +57,10 @@ export function RpcSignPsbtSummary() { - - - - + + } label="View Details" onClick={onClickLink} /> + } label="Copy ID" onClick={onClickCopy} /> + diff --git a/src/app/pages/select-network/components/network-list-item.layout.tsx b/src/app/pages/select-network/components/network-list-item.layout.tsx index 0203549d9d8..eed1385f2b9 100644 --- a/src/app/pages/select-network/components/network-list-item.layout.tsx +++ b/src/app/pages/select-network/components/network-list-item.layout.tsx @@ -75,8 +75,8 @@ export function NetworkListItemLayout(props: NetworkListItemLayoutProps) { {isCustom && ( ) => { e.stopPropagation(); diff --git a/src/app/pages/send/broadcast-error/components/broadcast-error.layout.tsx b/src/app/pages/send/broadcast-error/components/broadcast-error.layout.tsx index 9cfdb3d3ea9..aa382803a8c 100644 --- a/src/app/pages/send/broadcast-error/components/broadcast-error.layout.tsx +++ b/src/app/pages/send/broadcast-error/components/broadcast-error.layout.tsx @@ -16,7 +16,13 @@ export function BroadcastErrorLayout(props: BroadcastErrorProps) { const { body, errorPayload, title, children, ...rest } = props; return ( - + Unhappy user interface cloud diff --git a/src/app/pages/send/choose-crypto-asset/components/send-btc-disabled.tsx b/src/app/pages/send/choose-crypto-asset/components/send-btc-disabled.tsx index 79de7893d1f..7349cc8e5ae 100644 --- a/src/app/pages/send/choose-crypto-asset/components/send-btc-disabled.tsx +++ b/src/app/pages/send/choose-crypto-asset/components/send-btc-disabled.tsx @@ -1,7 +1,7 @@ import { FiExternalLink } from 'react-icons/fi'; import { useNavigate } from 'react-router-dom'; -import { Box, Stack, styled } from 'leather-styles/jsx'; +import { Box, HStack, styled } from 'leather-styles/jsx'; import { RouteUrls } from '@shared/route-urls'; @@ -11,12 +11,12 @@ import { GenericError } from '@app/components/generic-error/generic-error'; const body = 'Sending bitcoin is temporarily disabled'; const helpTextList = [ - + Learm more on Twitter at @LeatherBTC - openInNewTab('https://twitter.com/leatherbtc')}> + openInNewTab('https://twitter.com/leatherbtc')}> - - + + , ]; const title = 'Temporarily disabled'; @@ -25,7 +25,7 @@ export function SendBtcDisabled() { const navigate = useNavigate(); return ( - + } my="space.05" px="space.05" /> @@ -55,10 +57,10 @@ export function LockBitcoinSummary() { with borrowing against it. - - - - + + } label="View Details" /> + } label="Copy ID" /> + ); diff --git a/src/app/pages/send/ordinal-inscription/components/collectible-asset.tsx b/src/app/pages/send/ordinal-inscription/components/collectible-asset.tsx index cc8dc2a6d3a..b8c39b25c6c 100644 --- a/src/app/pages/send/ordinal-inscription/components/collectible-asset.tsx +++ b/src/app/pages/send/ordinal-inscription/components/collectible-asset.tsx @@ -1,8 +1,6 @@ -import { Flex } from '@stacks/ui'; -import { token } from 'leather-styles/tokens'; +import { Flex, styled } from 'leather-styles/jsx'; import { SpaceBetween } from '@app/components/layout/space-between'; -import { Text } from '@app/components/typography'; interface CollectibleAssetProps { icon: React.JSX.Element; @@ -24,7 +22,7 @@ export function CollectibleAsset({ icon, name, symbol }: CollectibleAssetProps) {icon} - + {name} {symbol && ({symbol.toUpperCase()})} 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 20cb3e970fc..fe89449d2db 100644 --- a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx +++ b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx @@ -45,7 +45,7 @@ export function SendInscriptionForm() { subtitle="Ordinal inscription" title={inscription.title} /> - + } name="Ordinal inscription" /> - - - - + + } label="View Details" /> + } label="Copy ID" /> + ); diff --git a/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx b/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx index 73debc485d9..4311bc819b9 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx @@ -1,9 +1,11 @@ import type { ChangeEvent } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react'; +// #4164 FIXME migrate Input +import { Input } from '@stacks/ui'; import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors'; import { useField } from 'formik'; -import { Box, Flex, Input, Stack, styled } from 'leather-styles/jsx'; +import { Box, Flex, Stack, styled } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { STX_DECIMALS, TOKEN_NAME_LENGTH } from '@shared/constants'; @@ -142,7 +144,7 @@ export function AmountField({ 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 c422d0d6b2b..011f2939544 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 @@ -4,10 +4,6 @@ import { TextInputField } from '@app/components/text-input-field'; export function MemoField() { return ( - + ); } diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx index e125edbdc84..9837b9e6512 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx @@ -23,9 +23,9 @@ export const RecipientAccountsDrawer = memo(() => { return ( - + {accounts.length <= smallNumberOfAccountsToRenderWholeList ? ( - + {accounts.map(item => ( ))} 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 2940a7664c6..fea53abb9b6 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 @@ -34,7 +34,7 @@ export function RecipientField({ }, [name, field.value, setFieldValue]); return ( - - - + ); 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 a357e9ac805..579ac153343 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,5 +1,5 @@ import { color } from '@stacks/ui-utils'; -import { Box, styled } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { ChevronDownIcon } from '@app/components/icons/chevron-down-icon'; @@ -16,17 +16,16 @@ export function RecipientDropdownItem(props: RecipientDropdownItemProps) { const { index, isVisible, onSelectItem } = props; return ( - onSelectItem(index)} - pl={isVisible ? 'tight' : 'unset'} + pl={isVisible ? 'space.02' : 'unset'} type="button" > {/* TODO - check if color needs to be passed to icon */} {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 070dbd3a52f..6312ac4631b 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 @@ -1,6 +1,9 @@ import { ReactNode, useRef } from 'react'; -import { Box, Fade, Stack } from 'leather-styles/jsx'; +// #4164 FIXME migrate Fade +import { Fade } from '@stacks/ui'; +import { Box, Stack } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { useOnClickOutside } from '@app/common/hooks/use-onclickoutside'; @@ -30,7 +33,7 @@ export function RecipientDropdownLayout(props: RecipientDropdownLayoutProps) { flexDirection="column" minWidth="100px" overflow="hidden" - p="extra-tight" + p="space.01" position="absolute" ref={ref} style={styles} diff --git a/src/app/pages/send/send-crypto-asset-form/components/selected-asset-field.tsx b/src/app/pages/send/send-crypto-asset-form/components/selected-asset-field.tsx index 07db28b5bba..da6752db1c5 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/selected-asset-field.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/selected-asset-field.tsx @@ -28,7 +28,7 @@ export function SelectedAssetField({ icon, name, symbol }: SelectedAssetFieldPro width="100%" > - + {name} diff --git a/src/app/pages/send/send-crypto-asset-form/components/send-crypto-asset-form.layout.tsx b/src/app/pages/send/send-crypto-asset-form/components/send-crypto-asset-form.layout.tsx index d641881d963..38c13c25d95 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/send-crypto-asset-form.layout.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/send-crypto-asset-form.layout.tsx @@ -13,7 +13,7 @@ export function SendCryptoAssetFormLayout({ children }: SendCryptoAssetFormLayou maxHeight={['calc(100vh - 116px)', 'calc(85vh - 116px)']} overflowY="auto" pb={['120px', '48px']} - pt={['base', '48px']} + pt={['space.04', '48px']} px="space.05" width="100%" > diff --git a/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx index da6aad99024..0819bc26d52 100644 --- a/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx +++ b/src/app/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx @@ -40,7 +40,7 @@ export function BitcoinSendMaxButton({ return ( diff --git a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx index 0a47524b363..df26e99c4b8 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx @@ -3,7 +3,7 @@ import { useLocation, useParams } from 'react-router-dom'; // #4164 FIXME replace with radix tooltip import { Tooltip } from '@stacks/ui'; -import { Box, Stack } from 'leather-styles/jsx'; +import { Stack } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import get from 'lodash.get'; diff --git a/src/app/pages/send/sent-summary/brc20-sent-symmary.tsx b/src/app/pages/send/sent-summary/brc20-sent-symmary.tsx index 5edc356ed15..3d236800591 100644 --- a/src/app/pages/send/sent-summary/brc20-sent-symmary.tsx +++ b/src/app/pages/send/sent-summary/brc20-sent-symmary.tsx @@ -1,7 +1,7 @@ import { FiExternalLink } from 'react-icons/fi'; import { useLocation, useNavigate } from 'react-router-dom'; -import { Stack } from 'leather-styles/jsx'; +import { HStack, Stack } from 'leather-styles/jsx'; import get from 'lodash.get'; import { createMoney } from '@shared/models/money.model'; @@ -81,14 +81,13 @@ export function Brc20SentSummary() { - {/* FIXME isInline */} - + } label="Pending BRC-20 transfers" /> - + ); 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 6ff728a972e..170d4e9c523 100644 --- a/src/app/pages/send/sent-summary/btc-sent-summary.tsx +++ b/src/app/pages/send/sent-summary/btc-sent-summary.tsx @@ -4,7 +4,7 @@ import { useLocation } from 'react-router-dom'; // #4164 FIXME migrate useClipboard import { useClipboard } from '@stacks/ui'; -import { Stack } from 'leather-styles/jsx'; +import { HStack, Stack } from 'leather-styles/jsx'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { useExplorerLink } from '@app/common/hooks/use-explorer-link'; @@ -77,10 +77,10 @@ export function BtcSentSummary() { - - - - + + } label="View Details" /> + } label="Copy ID" /> + ); 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 8c32724cde1..fdb56641673 100644 --- a/src/app/pages/send/sent-summary/stx-sent-summary.tsx +++ b/src/app/pages/send/sent-summary/stx-sent-summary.tsx @@ -2,7 +2,9 @@ import { toast } from 'react-hot-toast'; import { FiCopy, FiExternalLink } from 'react-icons/fi'; import { useLocation } from 'react-router-dom'; -import { Stack, useClipboard } from 'leather-styles/jsx'; +// #4164 FIXME migrate useClipboard +import { useClipboard } from '@stacks/ui'; +import { HStack, Stack } from 'leather-styles/jsx'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { useExplorerLink } from '@app/common/hooks/use-explorer-link'; @@ -76,10 +78,10 @@ export function StxSentSummary() { - - - - + + } label="View Details" /> + } label="Copy ID" /> + ); diff --git a/src/app/pages/stacks-message-signing-request/components/structured-data-content.tsx b/src/app/pages/stacks-message-signing-request/components/structured-data-content.tsx index 41e0b0a7c24..067258a6583 100644 --- a/src/app/pages/stacks-message-signing-request/components/structured-data-content.tsx +++ b/src/app/pages/stacks-message-signing-request/components/structured-data-content.tsx @@ -1,5 +1,7 @@ import { ChainID } from '@stacks/common'; +import { StructuredMessageDataDomain } from '@shared/signature/signature-types'; + import { getStructuredDataPayloadFromToken } from '@app/common/signature/requests'; import { NoFeesWarningRow } from '@app/components/no-fees-warning-row'; import { SignMessageActions } from '@app/features/message-signer/stacks-sign-message-action'; @@ -20,11 +22,14 @@ export function SignatureRequestStructuredDataContent({ const appName = signatureRequest.appDetails?.name; return ( <> - + signMessage({ messageType: 'structured', message, domain })} />
diff --git a/src/app/pages/swap/components/swap-amount-field.tsx b/src/app/pages/swap/components/swap-amount-field.tsx index 11936a571ee..89f253ff484 100644 --- a/src/app/pages/swap/components/swap-amount-field.tsx +++ b/src/app/pages/swap/components/swap-amount-field.tsx @@ -1,7 +1,9 @@ import { ChangeEvent } from 'react'; +// #4164 FIXME migrate Input +import { Input } from '@stacks/ui'; import { useField, useFormikContext } from 'formik'; -import { Input, Stack } from 'leather-styles/jsx'; +import { Stack } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { useShowFieldError } from '@app/common/form-utils'; @@ -29,7 +31,7 @@ export function SwapAmountField({ amountAsFiat, isDisabled, name }: SwapAmountFi } return ( - + {name} diff --git a/src/app/pages/swap/components/swap-status/swap-status-item.layout.tsx b/src/app/pages/swap/components/swap-status/swap-status-item.layout.tsx index 7a569c1cbad..cb194c9a37e 100644 --- a/src/app/pages/swap/components/swap-status/swap-status-item.layout.tsx +++ b/src/app/pages/swap/components/swap-status/swap-status-item.layout.tsx @@ -13,7 +13,7 @@ export function SwapStatusItemLayout({ icon, text, timestamp }: SwapStatusItemLa return ( - + {timestamp ? {timestamp} : null} {text} diff --git a/src/app/pages/swap/swap-summary/swap-summary.tsx b/src/app/pages/swap/swap-summary/swap-summary.tsx index 21622c4892d..98f2357e114 100644 --- a/src/app/pages/swap/swap-summary/swap-summary.tsx +++ b/src/app/pages/swap/swap-summary/swap-summary.tsx @@ -11,7 +11,6 @@ import { logger } from '@shared/logger'; import { isUndefined } from '@shared/utils'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; -// import { useExplorerLink } from '@app/common/hooks/use-explorer-link'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { CopyIcon } from '@app/components/icons/copy-icon'; import { ExternalLinkIcon } from '@app/components/icons/external-link-icon'; diff --git a/src/app/pages/transaction-request/components/contract-deploy-details/contract-deploy-details.tsx b/src/app/pages/transaction-request/components/contract-deploy-details/contract-deploy-details.tsx index 08ab5b99a7e..f22762ee953 100644 --- a/src/app/pages/transaction-request/components/contract-deploy-details/contract-deploy-details.tsx +++ b/src/app/pages/transaction-request/components/contract-deploy-details/contract-deploy-details.tsx @@ -2,8 +2,7 @@ import { useState } from 'react'; // #4164 FIXME migrate CodeBlock import { CodeBlock } from '@stacks/ui'; -import { BoxProps, Stack } from 'leather-styles/jsx'; -import { Divider } from 'leather-styles/jsx'; +import { BoxProps, HStack, Stack } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { Prism } from '@app/common/clarity-prism'; @@ -84,14 +83,14 @@ export function ContractDeployDetails(): React.JSX.Element | null { return ( - + setTab('details')} isActive={tab === 'details'}> Details setTab('code')} isActive={tab === 'code'}> Code - + {tab === 'details' ? ( - }> + {/* // #4164 FIXME migrate } */> {currentAccountStxAddress && ( )} diff --git a/src/app/pages/transaction-request/components/contract-preview.tsx b/src/app/pages/transaction-request/components/contract-preview.tsx index 17c27f544be..e67179bd819 100644 --- a/src/app/pages/transaction-request/components/contract-preview.tsx +++ b/src/app/pages/transaction-request/components/contract-preview.tsx @@ -1,13 +1,13 @@ // #4164 FIXME migrate DynamicColorCircle import { DynamicColorCircle } from '@stacks/ui'; import { truncateMiddle } from '@stacks/ui-utils'; -import { Stack, StackProps } from 'leather-styles/jsx'; +import { HStack, HstackProps, Stack } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { formatContractId } from '@app/common/utils'; import { Caption, Title } from '@app/components/typography'; -interface ContractPreviewLayoutProps extends StackProps { +interface ContractPreviewLayoutProps extends HstackProps { contractAddress: string; contractName: string; functionName?: string; @@ -17,12 +17,11 @@ export function ContractPreviewLayout(props: ContractPreviewLayoutProps) { const { contractAddress, contractName, functionName, ...rest } = props; return ( - - + {functionName || contractName} @@ -51,6 +50,6 @@ export function ContractPreviewLayout(props: ContractPreviewLayoutProps) { {functionName ? `.${contractName}` : ''} - + ); } diff --git a/src/app/pages/transaction-request/components/minimal-error-message.tsx b/src/app/pages/transaction-request/components/minimal-error-message.tsx index 3b615b0b111..f6e4fceaecf 100644 --- a/src/app/pages/transaction-request/components/minimal-error-message.tsx +++ b/src/app/pages/transaction-request/components/minimal-error-message.tsx @@ -1,14 +1,15 @@ import { Suspense, memo } from 'react'; import { TransactionRequestSelectors } from '@tests/selectors/requests.selectors'; -import { Stack, StackProps } from 'leather-styles/jsx'; +import { HStack, HstackProps } from 'leather-styles/jsx'; import { styled } from 'leather-styles/jsx'; +import { token } from 'leather-styles/tokens'; import { ErrorIcon } from '@app/components/icons/error-icon'; import { TransactionErrorReason } from '@app/pages/transaction-request/components/transaction-error/transaction-error'; import { useTransactionError } from '@app/pages/transaction-request/hooks/use-transaction-error'; -function MinimalErrorMessageSuspense(props: StackProps) { +function MinimalErrorMessageSuspense(props: HstackProps) { const error = useTransactionError(); if (!error) return null; @@ -33,14 +34,12 @@ function MinimalErrorMessageSuspense(props: StackProps) { }; return ( - {getTitle()} - + ); } -function MinimalErrorMessageBase(props: StackProps) { +function MinimalErrorMessageBase(props: HstackProps) { return ( }> diff --git a/src/app/pages/transaction-request/components/post-conditions/no-post-conditions.tsx b/src/app/pages/transaction-request/components/post-conditions/no-post-conditions.tsx index 99e79dfcca4..78b2cd67b90 100644 --- a/src/app/pages/transaction-request/components/post-conditions/no-post-conditions.tsx +++ b/src/app/pages/transaction-request/components/post-conditions/no-post-conditions.tsx @@ -1,19 +1,13 @@ import { FiLock } from 'react-icons/fi'; -import { Box, Circle, Stack } from 'leather-styles/jsx'; +import { Box, Circle, HStack } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { Body } from '@app/components/typography'; export function NoPostConditions(): React.JSX.Element { return ( - + {/* // #4164 FIXME check this colour - changing them all to .background-secondary*/} {/* token('colors.accent.background-secondary') */} @@ -24,6 +18,6 @@ export function NoPostConditions(): React.JSX.Element { No transfers (besides fees) will be made from your account or the transaction will abort. - + ); } diff --git a/src/app/pages/transaction-request/components/row.tsx b/src/app/pages/transaction-request/components/row.tsx index 991ce0043d3..e569b409d3f 100644 --- a/src/app/pages/transaction-request/components/row.tsx +++ b/src/app/pages/transaction-request/components/row.tsx @@ -15,7 +15,7 @@ export function Row(props: RowProps): React.JSX.Element { const { name, type, value, ...rest } = props; return ( - + {name && {name}} {type && {type}} diff --git a/src/app/pages/transaction-request/components/transaction-error/error-message.tsx b/src/app/pages/transaction-request/components/transaction-error/error-message.tsx index 168aa4318dc..e58d421dd96 100644 --- a/src/app/pages/transaction-request/components/transaction-error/error-message.tsx +++ b/src/app/pages/transaction-request/components/transaction-error/error-message.tsx @@ -1,6 +1,6 @@ import { memo } from 'react'; -import { Stack, StackProps } from 'leather-styles/jsx'; +import { HStack, Stack, StackProps } from 'leather-styles/jsx'; import { styled } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; @@ -23,14 +23,13 @@ export const ErrorMessage = memo(({ title, body, actions, ...rest }: ErrorMessag {...rest} > - {/* FIXME - isInline */} - + {title} - + {body} - {actions && {actions}} + {actions && {actions}} ); }); diff --git a/src/app/pages/transaction-request/components/transaction-error/error-messages.tsx b/src/app/pages/transaction-request/components/transaction-error/error-messages.tsx index 594101afd9c..529e2fb4c3c 100644 --- a/src/app/pages/transaction-request/components/transaction-error/error-messages.tsx +++ b/src/app/pages/transaction-request/components/transaction-error/error-messages.tsx @@ -14,8 +14,8 @@ import { useDrawers } from '@app/common/hooks/use-drawers'; import { useScrollLock } from '@app/common/hooks/use-scroll-lock'; import { stacksValue } from '@app/common/stacks-utils'; // PETE fix this now merging my PRs -// figure out what isInline means on { return ( ); @@ -127,9 +129,11 @@ export const IncorrectContractAddressMessage = memo(props => { return ( ); @@ -144,7 +148,7 @@ export const ExpiredRequestErrorMessage = memo(props => { useScrollLock(true); return ( - {styles => ( + {(styles: React.CSSProperties) => ( - + diff --git a/src/app/pages/update-profile-request/components/update-action.layout.tsx b/src/app/pages/update-profile-request/components/update-action.layout.tsx index 5c729ac69a1..86a277c442e 100644 --- a/src/app/pages/update-profile-request/components/update-action.layout.tsx +++ b/src/app/pages/update-profile-request/components/update-action.layout.tsx @@ -1,5 +1,5 @@ import { UpdateProfileRequestSelectors } from '@tests/selectors/requests.selectors'; -import { Stack } from 'leather-styles/jsx'; +import { HStack } from 'leather-styles/jsx'; import { LeatherButton } from '@app/components/button/button'; @@ -15,8 +15,7 @@ export function UpdateActionLayout({ }: // isLoading, UpdateActionProfileProps) { return ( - // FIXME refactor isInline properly - + {/* FIXME - figure out tertiary variant of LeatherButton */} Cancel @@ -27,11 +26,11 @@ UpdateActionProfileProps) { flexGrow={1} borderRadius="10px" onClick={onUpdateProfile} - // FIXME - add isLoading variant to button if needed + // #4164 FIXME migrate - add isLoading variant to button if needed // isLoading={isLoading} > Update - + ); } diff --git a/src/app/pages/update-profile-request/components/update-profile-error-msg.tsx b/src/app/pages/update-profile-request/components/update-profile-error-msg.tsx index 892804ebe33..fab8220a311 100644 --- a/src/app/pages/update-profile-request/components/update-profile-error-msg.tsx +++ b/src/app/pages/update-profile-request/components/update-profile-error-msg.tsx @@ -1,6 +1,6 @@ import { FiAlertTriangle } from 'react-icons/fi'; -import { Stack, styled } from 'leather-styles/jsx'; +import { HStack, styled } from 'leather-styles/jsx'; import { token } from 'leather-styles/tokens'; import { Caption } from '@app/components/typography'; @@ -12,36 +12,13 @@ export function ErrorMessage(props: ErrorMessageProps) { const { errorMessage } = props; if (!errorMessage) return null; - /** Stacks UI Stack - * - * Replacing + // // #4164 FIXME migrate bg="#FCEEED" + {errorMessage} - + ); } diff --git a/src/app/pages/update-profile-request/components/update-profile-request.layout.tsx b/src/app/pages/update-profile-request/components/update-profile-request.layout.tsx index 916aa4d459c..497691e1420 100644 --- a/src/app/pages/update-profile-request/components/update-profile-request.layout.tsx +++ b/src/app/pages/update-profile-request/components/update-profile-request.layout.tsx @@ -7,7 +7,7 @@ interface ProfileUpdateRequestLayoutProps { } export function ProfileUpdateRequestLayout({ children }: ProfileUpdateRequestLayoutProps) { return ( - + {children} diff --git a/src/app/pages/view-secret-key/view-secret-key.tsx b/src/app/pages/view-secret-key/view-secret-key.tsx index 50fbfe530d7..af061f4512b 100644 --- a/src/app/pages/view-secret-key/view-secret-key.tsx +++ b/src/app/pages/view-secret-key/view-secret-key.tsx @@ -30,9 +30,9 @@ export function ViewSecretKey() { return ( ; + }); }; } diff --git a/src/app/store/networks/networks.hooks.ts b/src/app/store/networks/networks.hooks.ts index 2df503a673c..369eb24be6f 100644 --- a/src/app/store/networks/networks.hooks.ts +++ b/src/app/store/networks/networks.hooks.ts @@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'; import { StacksNetwork } from '@stacks/network'; import { ChainID, TransactionVersion } from '@stacks/transactions'; -import { NetworkModes } from '@shared/constants'; +import { BitcoinNetworkModes } from '@shared/constants'; import { whenStacksChainId } from '@app/common/utils'; import { useAppDispatch } from '@app/store'; @@ -18,7 +18,7 @@ export function useCurrentNetworkState() { return useMemo(() => { const isTestnet = currentNetwork.chain.stacks.chainId === ChainID.Testnet; - const mode = (isTestnet ? 'testnet' : 'mainnet') as NetworkModes; + const mode = isTestnet ? 'testnet' : ('mainnet' as BitcoinNetworkModes); return { ...currentNetwork, isTestnet, mode }; }, [currentNetwork]); } diff --git a/theme/tokens.ts b/theme/tokens.ts index d06014c41e7..475c0e922b8 100644 --- a/theme/tokens.ts +++ b/theme/tokens.ts @@ -30,14 +30,14 @@ export const tokens = defineTokens({ 'space.10': { value: '72px', description: '72px' }, 'space.11': { value: '128px', description: '128px' }, - // Legacy spacing units - 'extra-tight': { value: '4px' }, - tight: { value: '8px' }, - 'base-tight': { value: '12px' }, - base: { value: '16px' }, - 'base-loose': { value: '20px' }, + // Legacy spacing units - commented out deprecated + // 'extra-tight': { value: '4px' }, + // tight: { value: '8px' }, + // 'base-tight': { value: '12px' }, + // base: { value: '16px' }, + 'base-loose': { value: '20px' }, // #4164 FIXME migrate this doesn't fit into new system loose: { value: '24px' }, - 'extra-loose': { value: '32px' }, + // 'extra-loose': { value: '32px' }, }, colors, });