From 4b158d231ff8a5c2b8d9bba41b512230e817870f Mon Sep 17 00:00:00 2001 From: Polybius93 Date: Wed, 29 Nov 2023 14:48:13 +0100 Subject: [PATCH 01/17] feat: modified explorer link maker function to have a regtest option --- src/app/common/hooks/use-bitcoin-contracts.ts | 2 +- src/app/common/hooks/use-explorer-link.ts | 10 ++++++---- src/app/common/utils.ts | 7 ++++++- src/shared/constants.ts | 2 +- 4 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/app/common/hooks/use-bitcoin-contracts.ts b/src/app/common/hooks/use-bitcoin-contracts.ts index ad0fef43a4a..186769314ad 100644 --- a/src/app/common/hooks/use-bitcoin-contracts.ts +++ b/src/app/common/hooks/use-bitcoin-contracts.ts @@ -224,7 +224,7 @@ export function useBitcoinContracts() { const txMoney = createMoneyFromDecimal(bitcoinValue, 'BTC'); const txFiatValue = i18nFormatCurrency(calculateFiatValue(txMoney)).toString(); const txFiatValueSymbol = bitcoinMarketData.price.symbol; - const txLink = { blockchain: 'bitcoin', txId }; + const txLink = { blockchain: 'bitcoin', txid: txId }; return { txId, diff --git a/src/app/common/hooks/use-explorer-link.ts b/src/app/common/hooks/use-explorer-link.ts index cd446dc1c7b..89530c94a95 100644 --- a/src/app/common/hooks/use-explorer-link.ts +++ b/src/app/common/hooks/use-explorer-link.ts @@ -13,11 +13,13 @@ export interface HandleOpenTxLinkArgs { txid: string; } export function useExplorerLink() { - const { mode } = useCurrentNetworkState(); + const { mode, chain } = useCurrentNetworkState(); + const { bitcoin } = chain; const handleOpenTxLink = useCallback( - ({ blockchain, suffix, txid }: HandleOpenTxLinkArgs) => - openInNewTab(makeTxExplorerLink({ blockchain, mode, suffix, txid })), - [mode] + ({ blockchain, suffix, txid }: HandleOpenTxLinkArgs) => { + openInNewTab(makeTxExplorerLink({ blockchain, mode, suffix, txid, bitcoin })); + }, + [mode, bitcoin] ); return { diff --git a/src/app/common/utils.ts b/src/app/common/utils.ts index 50d227bdecd..9443580634f 100644 --- a/src/app/common/utils.ts +++ b/src/app/common/utils.ts @@ -7,7 +7,7 @@ import { } from '@stacks/transactions'; import { toUnicode } from 'punycode'; -import { BitcoinNetworkModes, KEBAB_REGEX } from '@shared/constants'; +import { BitcoinChainConfig, BitcoinNetworkModes, KEBAB_REGEX } from '@shared/constants'; import type { Blockchains } from '@shared/models/blockchain.model'; export function createNullArrayOfLength(length: number) { @@ -44,15 +44,20 @@ interface MakeTxExplorerLinkArgs { mode: BitcoinNetworkModes; suffix?: string; txid: string; + bitcoin: BitcoinChainConfig; } export function makeTxExplorerLink({ blockchain, mode, suffix = '', txid, + bitcoin: { bitcoinUrl, bitcoinNetwork }, }: MakeTxExplorerLinkArgs) { switch (blockchain) { case 'bitcoin': + if (bitcoinNetwork === 'regtest') { + return `${bitcoinUrl}/tx/${txid}`; + } return `https://mempool.space/${mode !== 'mainnet' ? mode + '/' : ''}tx/${txid}`; case 'stacks': return `https://explorer.hiro.so/txid/${txid}?chain=${mode}${suffix}`; diff --git a/src/shared/constants.ts b/src/shared/constants.ts index cb052ff54bf..8f8d7ce10cf 100644 --- a/src/shared/constants.ts +++ b/src/shared/constants.ts @@ -55,7 +55,7 @@ interface BaseChainConfig { blockchain: Blockchains; } -interface BitcoinChainConfig extends BaseChainConfig { +export interface BitcoinChainConfig extends BaseChainConfig { blockchain: 'bitcoin'; bitcoinUrl: string; bitcoinNetwork: BitcoinNetworkModes; From 89bd3c52834c5f332cd7f0ba7e6f87863cb54216 Mon Sep 17 00:00:00 2001 From: Polybius93 Date: Thu, 30 Nov 2023 12:53:50 +0100 Subject: [PATCH 02/17] feat: use-explorer-link got separated into bitcoin and stacks function variant --- .../common/hooks/use-bitcoin-explorer-link.ts | 25 ++++++++++++ src/app/common/hooks/use-explorer-link.ts | 28 -------------- .../common/hooks/use-stacks-explorer-link.ts | 25 ++++++++++++ src/app/common/utils.ts | 38 +++++++++++-------- .../bitcoin-transaction-item.tsx | 6 +-- .../stacks-transaction-item.tsx | 5 +-- .../submitted-transaction-item.tsx | 5 +-- .../psbt-input-output-item.layout.tsx | 5 +-- .../contract-call-details.tsx | 5 +-- .../bitcoin-contract-list-item-layout.tsx | 6 +-- .../rpc-send-transfer-summary.tsx | 4 +- .../rpc-sign-psbt/rpc-sign-psbt-summary.tsx | 4 +- .../locked-bitcoin-summary.tsx | 4 +- .../sent-inscription-summary.tsx | 4 +- .../send/sent-summary/brc20-sent-symmary.tsx | 4 +- .../send/sent-summary/btc-sent-summary.tsx | 6 +-- .../send/sent-summary/stx-sent-summary.tsx | 4 +- 17 files changed, 101 insertions(+), 77 deletions(-) create mode 100644 src/app/common/hooks/use-bitcoin-explorer-link.ts delete mode 100644 src/app/common/hooks/use-explorer-link.ts create mode 100644 src/app/common/hooks/use-stacks-explorer-link.ts diff --git a/src/app/common/hooks/use-bitcoin-explorer-link.ts b/src/app/common/hooks/use-bitcoin-explorer-link.ts new file mode 100644 index 00000000000..d6717a2e9e6 --- /dev/null +++ b/src/app/common/hooks/use-bitcoin-explorer-link.ts @@ -0,0 +1,25 @@ +import { useCallback } from 'react'; + +import { makeBitcoinTxExplorerLink } from '@app/common/utils'; +import { useCurrentNetworkState } from '@app/store/networks/networks.hooks'; + +import { openInNewTab } from '../utils/open-in-new-tab'; + +interface HandleOpenBitcoinTxLinkArgs { + txid: string; +} + +export function useBitcoinExplorerLink() { + const { chain } = useCurrentNetworkState(); + const { bitcoin } = chain; + const handleOpenBitcoinTxLink = useCallback( + ({ txid }: HandleOpenBitcoinTxLinkArgs) => { + openInNewTab(makeBitcoinTxExplorerLink({ txid, bitcoin })); + }, + [bitcoin] + ); + + return { + handleOpenBitcoinTxLink, + }; +} diff --git a/src/app/common/hooks/use-explorer-link.ts b/src/app/common/hooks/use-explorer-link.ts deleted file mode 100644 index 89530c94a95..00000000000 --- a/src/app/common/hooks/use-explorer-link.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { useCallback } from 'react'; - -import type { Blockchains } from '@shared/models/blockchain.model'; - -import { makeTxExplorerLink } from '@app/common/utils'; -import { useCurrentNetworkState } from '@app/store/networks/networks.hooks'; - -import { openInNewTab } from '../utils/open-in-new-tab'; - -export interface HandleOpenTxLinkArgs { - blockchain: Blockchains; - suffix?: string; - txid: string; -} -export function useExplorerLink() { - const { mode, chain } = useCurrentNetworkState(); - const { bitcoin } = chain; - const handleOpenTxLink = useCallback( - ({ blockchain, suffix, txid }: HandleOpenTxLinkArgs) => { - openInNewTab(makeTxExplorerLink({ blockchain, mode, suffix, txid, bitcoin })); - }, - [mode, bitcoin] - ); - - return { - handleOpenTxLink, - }; -} diff --git a/src/app/common/hooks/use-stacks-explorer-link.ts b/src/app/common/hooks/use-stacks-explorer-link.ts new file mode 100644 index 00000000000..c11f9938ea6 --- /dev/null +++ b/src/app/common/hooks/use-stacks-explorer-link.ts @@ -0,0 +1,25 @@ +import { useCallback } from 'react'; + +import { makeStacksTxExplorerLink } from '@app/common/utils'; +import { useCurrentNetworkState } from '@app/store/networks/networks.hooks'; + +import { openInNewTab } from '../utils/open-in-new-tab'; + +export interface HandleOpenStacksTxLinkArgs { + suffix?: string; + txid: string; +} +export function useStacksExplorerLink() { + const { mode } = useCurrentNetworkState(); + + const handleOpenStacksTxLink = useCallback( + ({ suffix, txid }: HandleOpenStacksTxLinkArgs) => { + openInNewTab(makeStacksTxExplorerLink({ mode, suffix, txid })); + }, + [mode] + ); + + return { + handleOpenStacksTxLink, + }; +} diff --git a/src/app/common/utils.ts b/src/app/common/utils.ts index 9443580634f..51ff3d352e1 100644 --- a/src/app/common/utils.ts +++ b/src/app/common/utils.ts @@ -8,7 +8,6 @@ import { import { toUnicode } from 'punycode'; import { BitcoinChainConfig, BitcoinNetworkModes, KEBAB_REGEX } from '@shared/constants'; -import type { Blockchains } from '@shared/models/blockchain.model'; export function createNullArrayOfLength(length: number) { return new Array(length).fill(null); @@ -39,28 +38,37 @@ export function extractPhraseFromString(value: string) { } } -interface MakeTxExplorerLinkArgs { - blockchain: Blockchains; +interface MakeBitcoinTxExplorerLinkArgs { + txid: string; + bitcoin: BitcoinChainConfig; +} + +interface MakeStacksTxExplorerLinkArgs { mode: BitcoinNetworkModes; suffix?: string; txid: string; - bitcoin: BitcoinChainConfig; } -export function makeTxExplorerLink({ - blockchain, + +export function makeStacksTxExplorerLink({ mode, suffix = '', txid, +}: MakeStacksTxExplorerLinkArgs) { + return `https://explorer.hiro.so/txid/${txid}?chain=${mode}${suffix}`; +} + +export function makeBitcoinTxExplorerLink({ + txid, bitcoin: { bitcoinUrl, bitcoinNetwork }, -}: MakeTxExplorerLinkArgs) { - switch (blockchain) { - case 'bitcoin': - if (bitcoinNetwork === 'regtest') { - return `${bitcoinUrl}/tx/${txid}`; - } - return `https://mempool.space/${mode !== 'mainnet' ? mode + '/' : ''}tx/${txid}`; - case 'stacks': - return `https://explorer.hiro.so/txid/${txid}?chain=${mode}${suffix}`; +}: MakeBitcoinTxExplorerLinkArgs) { + switch (bitcoinNetwork) { + case 'mainnet': + case 'testnet': + return `https://mempool.space/${ + bitcoinNetwork !== 'mainnet' ? bitcoinNetwork + '/' : '' + }tx/${txid}`; + case 'regtest': + return `${bitcoinUrl}/tx/${txid}`; default: return ''; } diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx index 649a8a7c608..5211cff36c3 100644 --- a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx +++ b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx @@ -7,7 +7,7 @@ import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model import { RouteUrls } from '@shared/route-urls'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; -import { useExplorerLink } from '@app/common/hooks/use-explorer-link'; +import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link'; import { containsTaprootInput, getBitcoinTxCaption, @@ -50,7 +50,7 @@ export function BitcoinTransactionItem({ transaction, ...rest }: BitcoinTransact }); const bitcoinAddress = useCurrentAccountNativeSegwitAddressIndexZero(); - const { handleOpenTxLink } = useExplorerLink(); + const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink(); const analytics = useAnalytics(); const caption = useMemo(() => getBitcoinTxCaption(transaction), [transaction]); const value = useMemo( @@ -70,7 +70,7 @@ export function BitcoinTransactionItem({ transaction, ...rest }: BitcoinTransact openInNewTab(createInscriptionInfoUrl(inscriptionData.id)); return; } - handleOpenTxLink({ blockchain: 'bitcoin', txid: transaction?.txid || '' }); + handleOpenTxLink({ txid: transaction?.txid || '' }); }; const isOriginator = !isBitcoinTxInbound(bitcoinAddress, transaction); 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 01e314d22a3..cc143499190 100644 --- a/src/app/components/stacks-transaction-item/stacks-transaction-item.tsx +++ b/src/app/components/stacks-transaction-item/stacks-transaction-item.tsx @@ -6,7 +6,7 @@ import { StacksTx, TxTransferDetails } from '@shared/models/transactions/stacks- import { RouteUrls } from '@shared/route-urls'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; -import { useExplorerLink } from '@app/common/hooks/use-explorer-link'; +import { useStacksExplorerLink } from '@app/common/hooks/use-stacks-explorer-link'; import { getTxCaption, getTxTitle, @@ -36,7 +36,7 @@ export function StacksTransactionItem({ ...rest }: StacksTransactionItemProps) { const [component, bind, { isHovered }] = usePressable(true); - const { handleOpenTxLink } = useExplorerLink(); + const { handleOpenStacksTxLink: handleOpenTxLink } = useStacksExplorerLink(); const currentAccount = useCurrentStacksAccount(); const analytics = useAnalytics(); const [_, setRawTxId] = useRawTxIdState(); @@ -49,7 +49,6 @@ export function StacksTransactionItem({ const openTxLink = () => { void analytics.track('view_transaction'); handleOpenTxLink({ - blockchain: 'stacks', txid: transaction?.tx_id || transferDetails?.link || '', }); }; diff --git a/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-item.tsx b/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-item.tsx index 55e1b950976..b357aaf23a0 100644 --- a/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-item.tsx +++ b/src/app/features/activity-list/components/submitted-transaction-list/submitted-transaction-item.tsx @@ -1,7 +1,7 @@ import { StacksTransaction } from '@stacks/transactions'; import { Box, HStack, Stack } from 'leather-styles/jsx'; -import { useExplorerLink } from '@app/common/hooks/use-explorer-link'; +import { useStacksExplorerLink } from '@app/common/hooks/use-stacks-explorer-link'; import { getTxSenderAddress } from '@app/common/transactions/stacks/transaction.utils'; import { usePressable } from '@app/components/item-hover'; import { Tooltip } from '@app/components/tooltip'; @@ -18,7 +18,7 @@ interface SubmittedTransactionItemProps { } export function SubmittedTransactionItem({ transaction, txId }: SubmittedTransactionItemProps) { const [component, bind] = usePressable(true); - const { handleOpenTxLink } = useExplorerLink(); + const { handleOpenStacksTxLink: handleOpenTxLink } = useStacksExplorerLink(); if (!transaction) return null; @@ -38,7 +38,6 @@ export function SubmittedTransactionItem({ transaction, txId }: SubmittedTransac alignItems="center" onClick={() => handleOpenTxLink({ - blockchain: 'stacks', suffix: `&submitted=true`, txid: txId, }) diff --git a/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx b/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx index e6a04b7a4ce..272b753bbc6 100644 --- a/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx +++ b/src/app/features/psbt-signer/components/psbt-inputs-and-outputs/components/psbt-input-output-item.layout.tsx @@ -1,7 +1,7 @@ import { Box, Flex, HStack, styled } from 'leather-styles/jsx'; +import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; -import { useExplorerLink } from '@app/common/hooks/use-explorer-link'; import { Flag } from '@app/components/layout/flag'; import { Tooltip } from '@app/components/tooltip'; import { LeatherButton } from '@app/ui/components/button'; @@ -24,7 +24,7 @@ export function PsbtInputOutputItemLayout({ txIdHoverLabel, }: PsbtInputOutputItemLayoutProps) { const { onCopy, hasCopied } = useClipboard(addressHoverLabel ?? ''); - const { handleOpenTxLink } = useExplorerLink(); + const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink(); return ( } mt="space.05" spacing="space.04"> @@ -56,7 +56,6 @@ export function PsbtInputOutputItemLayout({ handleOpenTxLink({ - blockchain: 'bitcoin', txid: txIdHoverLabel ?? '', }) } diff --git a/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx b/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx index a58c292c921..cf639af48f3 100644 --- a/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx +++ b/src/app/features/stacks-transaction-request/contract-call-details/contract-call-details.tsx @@ -2,7 +2,7 @@ import { Suspense } from 'react'; import { Stack } from 'leather-styles/jsx'; -import { useExplorerLink } from '@app/common/hooks/use-explorer-link'; +import { useStacksExplorerLink } from '@app/common/hooks/use-stacks-explorer-link'; import { formatContractId } from '@app/common/utils'; import { AttachmentRow } from '@app/features/stacks-transaction-request/attachment-row'; import { ContractPreviewLayout } from '@app/features/stacks-transaction-request/contract-preview'; @@ -13,7 +13,7 @@ import { FunctionArgumentsList } from './function-arguments-list'; function ContractCallDetailsSuspense() { const transactionRequest = useTransactionRequestState(); - const { handleOpenTxLink } = useExplorerLink(); + const { handleOpenStacksTxLink: handleOpenTxLink } = useStacksExplorerLink(); if (!transactionRequest || transactionRequest.txType !== 'contract_call') return null; const { contractAddress, contractName, functionName, attachment } = transactionRequest; @@ -34,7 +34,6 @@ function ContractCallDetailsSuspense() { handleOpenTxLink({ - blockchain: 'stacks', txid: formatContractId(contractAddress, contractName), }) } diff --git a/src/app/pages/bitcoin-contract-list/components/bitcoin-contract-list-item-layout.tsx b/src/app/pages/bitcoin-contract-list/components/bitcoin-contract-list-item-layout.tsx index f90ba9ed7f7..ff771e8b077 100644 --- a/src/app/pages/bitcoin-contract-list/components/bitcoin-contract-list-item-layout.tsx +++ b/src/app/pages/bitcoin-contract-list/components/bitcoin-contract-list-item-layout.tsx @@ -4,7 +4,7 @@ import { Flex, HStack, styled } from 'leather-styles/jsx'; import { createMoneyFromDecimal } from '@shared/models/money.model'; -import { useExplorerLink } from '@app/common/hooks/use-explorer-link'; +import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link'; import { baseCurrencyAmountInQuote } from '@app/common/money/calculate-money'; import { i18nFormatCurrency } from '@app/common/money/format-money'; import { satToBtc } from '@app/common/money/unit-conversion'; @@ -25,7 +25,7 @@ export function BitcoinContractListItemLayout({ collateralAmount, txid, }: BitcoinContractListItemLayoutProps) { - const { handleOpenTxLink } = useExplorerLink(); + const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink(); const bitcoinMarketData = useCryptoCurrencyMarketData('BTC'); const getFiatValue = useCallback( @@ -41,8 +41,6 @@ export function BitcoinContractListItemLayout({ marginBottom="15px" onClick={() => handleOpenTxLink({ - blockchain: 'bitcoin', - suffix: `&submitted=true`, txid, }) } diff --git a/src/app/pages/rpc-send-transfer/rpc-send-transfer-summary.tsx b/src/app/pages/rpc-send-transfer/rpc-send-transfer-summary.tsx index 4c27bc4fe2f..ab7303fe472 100644 --- a/src/app/pages/rpc-send-transfer/rpc-send-transfer-summary.tsx +++ b/src/app/pages/rpc-send-transfer/rpc-send-transfer-summary.tsx @@ -4,8 +4,8 @@ import { useLocation } from 'react-router-dom'; import { HStack, Stack } from 'leather-styles/jsx'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; +import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; -import { useExplorerLink } from '@app/common/hooks/use-explorer-link'; import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer'; import { InfoCard, @@ -21,7 +21,7 @@ import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon'; export function RpcSendTransferSummary() { const { state } = useLocation(); - const { handleOpenTxLink } = useExplorerLink(); + const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink(); const analytics = useAnalytics(); const { 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 a7cc1f1c866..e29dfd0f09d 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 @@ -4,8 +4,8 @@ import { useLocation } from 'react-router-dom'; import { Flex, HStack, Stack } from 'leather-styles/jsx'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; +import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; -import { useExplorerLink } from '@app/common/hooks/use-explorer-link'; import { InfoCard, InfoCardAssetValue, @@ -19,7 +19,7 @@ import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon'; export function RpcSignPsbtSummary() { const { state } = useLocation(); - const { handleOpenTxLink } = useExplorerLink(); + const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink(); const analytics = useAnalytics(); const { fee, sendingValue, totalSpend, txId, txFiatValue, txFiatValueSymbol, txLink, txValue } = diff --git a/src/app/pages/send/locked-bitcoin-summary/locked-bitcoin-summary.tsx b/src/app/pages/send/locked-bitcoin-summary/locked-bitcoin-summary.tsx index b07a9c16c0f..01b7a04145a 100644 --- a/src/app/pages/send/locked-bitcoin-summary/locked-bitcoin-summary.tsx +++ b/src/app/pages/send/locked-bitcoin-summary/locked-bitcoin-summary.tsx @@ -4,8 +4,8 @@ import { useLocation } from 'react-router-dom'; import { HStack, styled } from 'leather-styles/jsx'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; +import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; -import { useExplorerLink } from '@app/common/hooks/use-explorer-link'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { satToBtc } from '@app/common/money/unit-conversion'; import { @@ -25,7 +25,7 @@ export function LockBitcoinSummary() { const { txId, txMoney, txFiatValue, txFiatValueSymbol, symbol, txLink } = state; const { onCopy } = useClipboard(txId); - const { handleOpenTxLink } = useExplorerLink(); + const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink(); const analytics = useAnalytics(); function onClickLink() { diff --git a/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx b/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx index abeac58abd2..a0c59400a5c 100644 --- a/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx +++ b/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx @@ -9,8 +9,8 @@ import { SupportedInscription } from '@shared/models/inscription.model'; import { RouteUrls } from '@shared/route-urls'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; +import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; -import { useExplorerLink } from '@app/common/hooks/use-explorer-link'; import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer'; import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { @@ -47,7 +47,7 @@ export function SendInscriptionSummary() { }; const { onCopy } = useClipboard(txid || ''); - const { handleOpenTxLink } = useExplorerLink(); + const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink(); const analytics = useAnalytics(); function onClickLink() { 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 30e2b428439..ae28aac03ee 100644 --- a/src/app/pages/send/sent-summary/brc20-sent-symmary.tsx +++ b/src/app/pages/send/sent-summary/brc20-sent-symmary.tsx @@ -5,8 +5,8 @@ import get from 'lodash.get'; import { createMoney } from '@shared/models/money.model'; -import { HandleOpenTxLinkArgs } from '@app/common/hooks/use-explorer-link'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; +import { HandleOpenStacksTxLinkArgs } from '@app/common/hooks/use-stacks-explorer-link'; import { formatMoney } from '@app/common/money/format-money'; import { openInNewTab } from '@app/common/utils/open-in-new-tab'; import { @@ -33,7 +33,7 @@ function useBrc20SentSummaryState() { tick: get(location.state, 'tick') as string, amount: get(location.state, 'amount') as string, txId: get(location.state, 'txId') as string, - txLink: get(location.state, 'txLink') as HandleOpenTxLinkArgs, + txLink: get(location.state, 'txLink') as HandleOpenStacksTxLinkArgs, feeRowValue: get(location.state, 'feeRowValue') as string, }; } 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 e37b851f8c8..6a20e2ea557 100644 --- a/src/app/pages/send/sent-summary/btc-sent-summary.tsx +++ b/src/app/pages/send/sent-summary/btc-sent-summary.tsx @@ -4,8 +4,8 @@ import { useLocation } from 'react-router-dom'; import { HStack, Stack } from 'leather-styles/jsx'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; +import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; -import { useExplorerLink } from '@app/common/hooks/use-explorer-link'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer'; import { @@ -40,12 +40,12 @@ export function BtcSentSummary() { } = state; const { onCopy } = useClipboard(txId); - const { handleOpenTxLink } = useExplorerLink(); + const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink(); const analytics = useAnalytics(); function onClickLink() { void analytics.track('view_transaction_confirmation', { symbol: 'BTC' }); - handleOpenTxLink({ blockchain: txLink.blockchain, txid: txLink.txid }); + handleOpenTxLink({ txid: txLink.txid }); } function onClickCopy() { 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 426e866b68b..69dd84ed698 100644 --- a/src/app/pages/send/sent-summary/stx-sent-summary.tsx +++ b/src/app/pages/send/sent-summary/stx-sent-summary.tsx @@ -5,8 +5,8 @@ import { HStack, Stack } from 'leather-styles/jsx'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; -import { useExplorerLink } from '@app/common/hooks/use-explorer-link'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; +import { useStacksExplorerLink } from '@app/common/hooks/use-stacks-explorer-link'; import { whenPageMode } from '@app/common/utils'; import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer'; import { @@ -41,7 +41,7 @@ export function StxSentSummary() { } = state; const { onCopy } = useClipboard(txId || ''); - const { handleOpenTxLink } = useExplorerLink(); + const { handleOpenStacksTxLink: handleOpenTxLink } = useStacksExplorerLink(); const analytics = useAnalytics(); function onClickLink() { From 907f33ccd8c8e432bd30fe855596bdd35cf25688 Mon Sep 17 00:00:00 2001 From: kyranjamie Date: Fri, 1 Dec 2023 12:51:24 +0100 Subject: [PATCH 03/17] fix: underlaid button, closes #4615 --- .../switch-account-drawer/components/create-account-action.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/features/switch-account-drawer/components/create-account-action.tsx b/src/app/features/switch-account-drawer/components/create-account-action.tsx index b21b99b399c..9f4bfc9938b 100644 --- a/src/app/features/switch-account-drawer/components/create-account-action.tsx +++ b/src/app/features/switch-account-drawer/components/create-account-action.tsx @@ -15,6 +15,7 @@ export function CreateAccountAction({ onCreateAccount }: CreateAccountActionProp position="fixed" bottom={0} width="100%" + zIndex={1} > onCreateAccount()}> Create new account From fcbf0d725c1557701bccd8224c60bc27441c2fe5 Mon Sep 17 00:00:00 2001 From: Fara Woolf Date: Thu, 30 Nov 2023 13:49:53 -0600 Subject: [PATCH 04/17] refactor: improve icons --- .../components/icons/alert-octagon-icon.tsx | 39 ++++--- .../components/icons/animated-tick-icon.tsx | 10 +- .../ui/components/icons/arrow-down-icon.tsx | 37 +++--- .../ui/components/icons/arrow-left-icon.tsx | 37 +++--- src/app/ui/components/icons/arrow-up-icon.tsx | 37 +++--- .../icons/bitcoin-contract-icon.tsx | 93 ++++++++-------- .../ui/components/icons/brc20-token-icon.tsx | 105 +++++++++--------- src/app/ui/components/icons/btc-icon.tsx | 35 +++--- .../ui/components/icons/btc-ledger-icon.tsx | 33 +++--- .../ui/components/icons/checkmark-icon.tsx | 37 +++--- .../ui/components/icons/chevron-down-icon.tsx | 27 +++-- .../ui/components/icons/chevron-up-icon.tsx | 43 ++++--- .../components/icons/chevrons-right-icon.tsx | 35 +++--- src/app/ui/components/icons/circle-icon.tsx | 35 +++--- src/app/ui/components/icons/close-icon.tsx | 29 +++-- .../ui/components/icons/cloud-off-icon.tsx | 35 +++--- src/app/ui/components/icons/code-icon.tsx | 49 ++++---- src/app/ui/components/icons/copy-icon.tsx | 39 ++++--- .../ui/components/icons/ellipses-h-icon.tsx | 67 ++++++----- .../ui/components/icons/error-circle-icon.tsx | 46 ++++---- src/app/ui/components/icons/error-icon.tsx | 46 ++++---- .../components/icons/external-link-icon.tsx | 37 +++--- src/app/ui/components/icons/eye-icon.tsx | 51 +++++---- .../ui/components/icons/eye-slash-icon.tsx | 63 ++++++----- src/app/ui/components/icons/function-icon.tsx | 14 +-- .../ui/components/icons/hamburger-icon.tsx | 53 +++++---- src/app/ui/components/icons/info-icon.tsx | 65 ++++++----- src/app/ui/components/icons/leather-icon.tsx | 8 +- .../ui/components/icons/leather-l-icon.tsx | 33 +++--- .../icons/leather-lettermark-icon.tsx | 8 +- src/app/ui/components/icons/ledger-icon.tsx | 33 +++--- src/app/ui/components/icons/list-icon.tsx | 44 ++++---- src/app/ui/components/icons/lock-icon.tsx | 55 +++++---- src/app/ui/components/icons/ordinal-icon.tsx | 31 +++--- src/app/ui/components/icons/plus-icon.tsx | 39 +++---- src/app/ui/components/icons/qr-code-icon.tsx | 43 ++++--- src/app/ui/components/icons/refresh-icon.tsx | 63 ++++++----- .../ui/components/icons/rotate-left-icon.tsx | 35 +++--- src/app/ui/components/icons/star-icon.tsx | 35 +++--- src/app/ui/components/icons/stx-icon.tsx | 43 ++++--- .../ui/components/icons/stx-ledger-icon.tsx | 41 ++++--- src/app/ui/components/icons/swap-icon.tsx | 51 +++++---- src/app/ui/components/icons/trash-icon.tsx | 41 ++++--- src/app/ui/components/icons/unlock-icon.tsx | 55 +++++---- .../icons/wallet-type-ledger-icon.tsx | 97 ++++++++-------- src/app/ui/components/icons/zap-icon.tsx | 33 +++--- src/app/ui/components/svg.tsx | 8 -- src/app/ui/ui-types.ts | 9 ++ 48 files changed, 969 insertions(+), 1033 deletions(-) delete mode 100644 src/app/ui/components/svg.tsx create mode 100644 src/app/ui/ui-types.ts diff --git a/src/app/ui/components/icons/alert-octagon-icon.tsx b/src/app/ui/components/icons/alert-octagon-icon.tsx index 7040e1ad2e1..5144d953223 100644 --- a/src/app/ui/components/icons/alert-octagon-icon.tsx +++ b/src/app/ui/components/icons/alert-octagon-icon.tsx @@ -1,25 +1,24 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function AlertOctagonIcon({ size = 'sm', ...props }: SquareProps) { +export function AlertOctagonIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - + + + + + ); } diff --git a/src/app/ui/components/icons/animated-tick-icon.tsx b/src/app/ui/components/icons/animated-tick-icon.tsx index ac1484d7143..06c8c98a78a 100644 --- a/src/app/ui/components/icons/animated-tick-icon.tsx +++ b/src/app/ui/components/icons/animated-tick-icon.tsx @@ -1,14 +1,10 @@ -import { HTMLStyledProps, styled } from 'leather-styles/jsx'; -import { SizeToken } from 'leather-styles/tokens'; +import { styled } from 'leather-styles/jsx'; -import { LiteralUnion } from '@shared/utils/type-utils'; +import { SvgProps } from '@app/ui/ui-types'; const defaultSize = '20px'; -interface AnimatedTickIconProps extends HTMLStyledProps<'svg'> { - size?: LiteralUnion; -} -export function AnimatedTickIcon({ size = defaultSize, ...props }: AnimatedTickIconProps) { +export function AnimatedTickIcon({ size = defaultSize, ...props }: SvgProps) { return ( - - - - + + + ); } diff --git a/src/app/ui/components/icons/arrow-left-icon.tsx b/src/app/ui/components/icons/arrow-left-icon.tsx index fb48e38983b..3ecfbc8b028 100644 --- a/src/app/ui/components/icons/arrow-left-icon.tsx +++ b/src/app/ui/components/icons/arrow-left-icon.tsx @@ -1,24 +1,23 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ArrowLeftIcon({ size = 'sm', ...props }: SquareProps) { +export function ArrowLeftIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/arrow-up-icon.tsx b/src/app/ui/components/icons/arrow-up-icon.tsx index 97e25c24853..3996c5b3954 100644 --- a/src/app/ui/components/icons/arrow-up-icon.tsx +++ b/src/app/ui/components/icons/arrow-up-icon.tsx @@ -1,24 +1,23 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ArrowUpIcon({ size = 'sm', ...props }: SquareProps) { +export function ArrowUpIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/bitcoin-contract-icon.tsx b/src/app/ui/components/icons/bitcoin-contract-icon.tsx index 9cdab8f2fc5..3a9ab39fe26 100644 --- a/src/app/ui/components/icons/bitcoin-contract-icon.tsx +++ b/src/app/ui/components/icons/bitcoin-contract-icon.tsx @@ -1,52 +1,51 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function BitcoinContractIcon({ size = 'xl', ...props }: SquareProps) { +export function BitcoinContractIcon({ size = 'xl', ...props }: SvgProps) { return ( - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/brc20-token-icon.tsx b/src/app/ui/components/icons/brc20-token-icon.tsx index 5cdca3b25f5..300696c3326 100644 --- a/src/app/ui/components/icons/brc20-token-icon.tsx +++ b/src/app/ui/components/icons/brc20-token-icon.tsx @@ -1,58 +1,57 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function Brc20TokenIcon({ size = 'xl', ...rest }: SquareProps) { +export function Brc20TokenIcon({ size = 'xl', ...props }: SvgProps) { return ( - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/btc-icon.tsx b/src/app/ui/components/icons/btc-icon.tsx index 2ddd2605f12..fd891f5382c 100644 --- a/src/app/ui/components/icons/btc-icon.tsx +++ b/src/app/ui/components/icons/btc-icon.tsx @@ -1,23 +1,22 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function BtcIcon({ size = 'xl', ...props }: SquareProps) { +export function BtcIcon({ size = 'xl', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/btc-ledger-icon.tsx b/src/app/ui/components/icons/btc-ledger-icon.tsx index 81c337e3c57..553192c63b0 100644 --- a/src/app/ui/components/icons/btc-ledger-icon.tsx +++ b/src/app/ui/components/icons/btc-ledger-icon.tsx @@ -1,22 +1,21 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function BtcLedgerIcon({ size = 'md', ...props }: SquareProps) { +export function BtcLedgerIcon({ size = 'md', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/checkmark-icon.tsx b/src/app/ui/components/icons/checkmark-icon.tsx index 665199d6583..179a8fcc6c7 100644 --- a/src/app/ui/components/icons/checkmark-icon.tsx +++ b/src/app/ui/components/icons/checkmark-icon.tsx @@ -1,24 +1,23 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function CheckmarkIcon({ size = 'sm', ...props }: SquareProps) { +export function CheckmarkIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/chevron-down-icon.tsx b/src/app/ui/components/icons/chevron-down-icon.tsx index e77e1a17168..f123168a712 100644 --- a/src/app/ui/components/icons/chevron-down-icon.tsx +++ b/src/app/ui/components/icons/chevron-down-icon.tsx @@ -1,19 +1,18 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ChevronDownIcon({ size = 'sm', ...props }: SquareProps) { +export function ChevronDownIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/chevron-up-icon.tsx b/src/app/ui/components/icons/chevron-up-icon.tsx index 283a9494e8c..bcb6c80212b 100644 --- a/src/app/ui/components/icons/chevron-up-icon.tsx +++ b/src/app/ui/components/icons/chevron-up-icon.tsx @@ -1,27 +1,26 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ChevronUpIcon({ size = 'sm', ...props }: SquareProps) { +export function ChevronUpIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - + + + + + ); } diff --git a/src/app/ui/components/icons/chevrons-right-icon.tsx b/src/app/ui/components/icons/chevrons-right-icon.tsx index b48fc34b41c..3edbf31a05f 100644 --- a/src/app/ui/components/icons/chevrons-right-icon.tsx +++ b/src/app/ui/components/icons/chevrons-right-icon.tsx @@ -1,23 +1,22 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ChevronsRightIcon({ size = 'sm', ...props }: SquareProps) { +export function ChevronsRightIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/circle-icon.tsx b/src/app/ui/components/icons/circle-icon.tsx index 4d0fb5e6230..a85081558c0 100644 --- a/src/app/ui/components/icons/circle-icon.tsx +++ b/src/app/ui/components/icons/circle-icon.tsx @@ -1,23 +1,22 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function CircleIcon({ size = 'sm', ...props }: SquareProps) { +export function CircleIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/close-icon.tsx b/src/app/ui/components/icons/close-icon.tsx index 7da3a42504c..d8bbc4543e1 100644 --- a/src/app/ui/components/icons/close-icon.tsx +++ b/src/app/ui/components/icons/close-icon.tsx @@ -1,20 +1,19 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function CloseIcon({ size = 'sm', ...props }: SquareProps) { +export function CloseIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/cloud-off-icon.tsx b/src/app/ui/components/icons/cloud-off-icon.tsx index 470a7eefcb9..82e9ff5aac0 100644 --- a/src/app/ui/components/icons/cloud-off-icon.tsx +++ b/src/app/ui/components/icons/cloud-off-icon.tsx @@ -1,24 +1,23 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; // TODO: This svg was copied from react-icons temporarily -export function CloudOffIcon({ size = 'sm', ...props }: SquareProps) { +export function CloudOffIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/code-icon.tsx b/src/app/ui/components/icons/code-icon.tsx index 277b39f3a2a..d08ad3d7e0a 100644 --- a/src/app/ui/components/icons/code-icon.tsx +++ b/src/app/ui/components/icons/code-icon.tsx @@ -1,30 +1,29 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function CodeIcon({ size = 'sm', ...props }: SquareProps) { +export function CodeIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/copy-icon.tsx b/src/app/ui/components/icons/copy-icon.tsx index a65b9cc647e..6d4cf2e77db 100644 --- a/src/app/ui/components/icons/copy-icon.tsx +++ b/src/app/ui/components/icons/copy-icon.tsx @@ -1,25 +1,24 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function CopyIcon({ size = 'sm', ...props }: SquareProps) { +export function CopyIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - - - - + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/ellipses-h-icon.tsx b/src/app/ui/components/icons/ellipses-h-icon.tsx index ab92b351ec3..4aa228940e5 100644 --- a/src/app/ui/components/icons/ellipses-h-icon.tsx +++ b/src/app/ui/components/icons/ellipses-h-icon.tsx @@ -1,39 +1,38 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function EllipsesHorizontalIcon({ size = 'sm', ...props }: SquareProps) { +export function EllipsesHorizontalIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - + + + + + ); } diff --git a/src/app/ui/components/icons/error-circle-icon.tsx b/src/app/ui/components/icons/error-circle-icon.tsx index 53a326e04e1..d3e9f421c04 100644 --- a/src/app/ui/components/icons/error-circle-icon.tsx +++ b/src/app/ui/components/icons/error-circle-icon.tsx @@ -1,31 +1,25 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ErrorCircleIcon({ size = 'sm', ...props }: SquareProps) { +export function ErrorCircleIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - + + + + + ); } diff --git a/src/app/ui/components/icons/error-icon.tsx b/src/app/ui/components/icons/error-icon.tsx index 3529797462d..85afa8b251d 100644 --- a/src/app/ui/components/icons/error-icon.tsx +++ b/src/app/ui/components/icons/error-icon.tsx @@ -1,31 +1,25 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ErrorIcon({ size = 'sm', ...props }: SquareProps) { +export function ErrorIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - + + + + + ); } diff --git a/src/app/ui/components/icons/external-link-icon.tsx b/src/app/ui/components/icons/external-link-icon.tsx index 3492cab68df..9589bc0d53d 100644 --- a/src/app/ui/components/icons/external-link-icon.tsx +++ b/src/app/ui/components/icons/external-link-icon.tsx @@ -1,24 +1,23 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ExternalLinkIcon({ size = 'sm', ...props }: SquareProps) { +export function ExternalLinkIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/eye-icon.tsx b/src/app/ui/components/icons/eye-icon.tsx index 47db9446324..dbb84fe838e 100644 --- a/src/app/ui/components/icons/eye-icon.tsx +++ b/src/app/ui/components/icons/eye-icon.tsx @@ -1,31 +1,30 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function EyeIcon({ size = 'sm', ...props }: SquareProps) { +export function EyeIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/eye-slash-icon.tsx b/src/app/ui/components/icons/eye-slash-icon.tsx index d73d408aa11..3c099fbf7c3 100644 --- a/src/app/ui/components/icons/eye-slash-icon.tsx +++ b/src/app/ui/components/icons/eye-slash-icon.tsx @@ -1,37 +1,36 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function EyeSlashIcon({ size = 'sm', ...props }: SquareProps) { +export function EyeSlashIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - - - - - - + + + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/function-icon.tsx b/src/app/ui/components/icons/function-icon.tsx index 8d99b24618d..a79fd06363a 100644 --- a/src/app/ui/components/icons/function-icon.tsx +++ b/src/app/ui/components/icons/function-icon.tsx @@ -1,14 +1,12 @@ -import { Square } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; // TODO: This svg was copied from mdi-react temporarily -export function FunctionIcon({ size = 'xs', ...props }) { +export function FunctionIcon({ size = 'xs', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/hamburger-icon.tsx b/src/app/ui/components/icons/hamburger-icon.tsx index 736d580369f..9c6c00ab7a9 100644 --- a/src/app/ui/components/icons/hamburger-icon.tsx +++ b/src/app/ui/components/icons/hamburger-icon.tsx @@ -1,32 +1,31 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function HamburgerIcon({ size = 'sm', ...props }: SquareProps) { +export function HamburgerIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - - - - - - + + + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/info-icon.tsx b/src/app/ui/components/icons/info-icon.tsx index f612c781c61..94f2aa88e3d 100644 --- a/src/app/ui/components/icons/info-icon.tsx +++ b/src/app/ui/components/icons/info-icon.tsx @@ -1,38 +1,37 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function InfoIcon({ size = 'sm', ...props }: SquareProps) { +export function InfoIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - - - - - - - + + + + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/leather-icon.tsx b/src/app/ui/components/icons/leather-icon.tsx index 1f2d501e7ec..c64f786ba8c 100644 --- a/src/app/ui/components/icons/leather-icon.tsx +++ b/src/app/ui/components/icons/leather-icon.tsx @@ -1,8 +1,10 @@ -import { Svg, SvgProps } from '../svg'; +import { styled } from 'leather-styles/jsx'; + +import { SvgProps } from '@app/ui/ui-types'; export function LeatherIcon({ ...props }: SvgProps) { return ( - - + ); } diff --git a/src/app/ui/components/icons/leather-l-icon.tsx b/src/app/ui/components/icons/leather-l-icon.tsx index 6b7d22d4376..b1c7d2f17ce 100644 --- a/src/app/ui/components/icons/leather-l-icon.tsx +++ b/src/app/ui/components/icons/leather-l-icon.tsx @@ -1,22 +1,21 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function LeatherLIcon({ size = '18px', ...props }: SquareProps) { +export function LeatherLIcon({ size = '18px', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/leather-lettermark-icon.tsx b/src/app/ui/components/icons/leather-lettermark-icon.tsx index eab79efece9..f109336d35c 100644 --- a/src/app/ui/components/icons/leather-lettermark-icon.tsx +++ b/src/app/ui/components/icons/leather-lettermark-icon.tsx @@ -1,12 +1,14 @@ -import { Svg, SvgProps } from '@app/ui/components/svg'; +import { styled } from 'leather-styles/jsx'; + +import { SvgProps } from '@app/ui/ui-types'; export function LeatherLettermarkIcon(props: SvgProps) { return ( - + - + ); } diff --git a/src/app/ui/components/icons/ledger-icon.tsx b/src/app/ui/components/icons/ledger-icon.tsx index 3c32ad81396..6e1973dccb6 100644 --- a/src/app/ui/components/icons/ledger-icon.tsx +++ b/src/app/ui/components/icons/ledger-icon.tsx @@ -1,22 +1,21 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function LedgerIcon({ size = 'sm', ...props }: SquareProps) { +export function LedgerIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/list-icon.tsx b/src/app/ui/components/icons/list-icon.tsx index 90984a35d70..685e6d811b1 100644 --- a/src/app/ui/components/icons/list-icon.tsx +++ b/src/app/ui/components/icons/list-icon.tsx @@ -1,28 +1,26 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function ListIcon({ size = 'sm', ...props }: SquareProps) { +export function ListIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - - - + + + + + + + + ); } diff --git a/src/app/ui/components/icons/lock-icon.tsx b/src/app/ui/components/icons/lock-icon.tsx index b92958613f6..b9df8a3a5dc 100644 --- a/src/app/ui/components/icons/lock-icon.tsx +++ b/src/app/ui/components/icons/lock-icon.tsx @@ -1,33 +1,32 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function LockIcon({ size = 'sm', ...props }: SquareProps) { +export function LockIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/ordinal-icon.tsx b/src/app/ui/components/icons/ordinal-icon.tsx index 99d61910412..8e7e217ac42 100644 --- a/src/app/ui/components/icons/ordinal-icon.tsx +++ b/src/app/ui/components/icons/ordinal-icon.tsx @@ -1,21 +1,20 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function OrdinalIcon({ size = 'xl', ...props }: SquareProps) { +export function OrdinalIcon({ size = 'xl', ...props }: SvgProps) { return ( - - - - - - - + + + + + ); } diff --git a/src/app/ui/components/icons/plus-icon.tsx b/src/app/ui/components/icons/plus-icon.tsx index 12c4e511ee1..54a6c91ebfb 100644 --- a/src/app/ui/components/icons/plus-icon.tsx +++ b/src/app/ui/components/icons/plus-icon.tsx @@ -1,30 +1,19 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function PlusIcon({ size = 'sm', ...props }: SquareProps) { +export function PlusIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/qr-code-icon.tsx b/src/app/ui/components/icons/qr-code-icon.tsx index b93bbc7be6c..bd49351daba 100644 --- a/src/app/ui/components/icons/qr-code-icon.tsx +++ b/src/app/ui/components/icons/qr-code-icon.tsx @@ -1,27 +1,26 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function QrCodeIcon({ size = 'sm', ...props }: SquareProps) { +export function QrCodeIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - - - - - - + + + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/refresh-icon.tsx b/src/app/ui/components/icons/refresh-icon.tsx index f67f76f79ff..98b74d2be3e 100644 --- a/src/app/ui/components/icons/refresh-icon.tsx +++ b/src/app/ui/components/icons/refresh-icon.tsx @@ -1,37 +1,36 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function RefreshIcon({ size = 'sm', ...props }: SquareProps) { +export function RefreshIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - - - - - - + + + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/rotate-left-icon.tsx b/src/app/ui/components/icons/rotate-left-icon.tsx index f3d1a981bb8..bd9f60a11b2 100644 --- a/src/app/ui/components/icons/rotate-left-icon.tsx +++ b/src/app/ui/components/icons/rotate-left-icon.tsx @@ -1,23 +1,22 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function RotateLeftIcon({ size = 'sm', ...props }: SquareProps) { +export function RotateLeftIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/star-icon.tsx b/src/app/ui/components/icons/star-icon.tsx index 73c59bee940..ea3c790a9e2 100644 --- a/src/app/ui/components/icons/star-icon.tsx +++ b/src/app/ui/components/icons/star-icon.tsx @@ -1,23 +1,22 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function StarIcon({ size = 'sm', ...props }: SquareProps) { +export function StarIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/icons/stx-icon.tsx b/src/app/ui/components/icons/stx-icon.tsx index d56c07c0bc6..35fc73b039a 100644 --- a/src/app/ui/components/icons/stx-icon.tsx +++ b/src/app/ui/components/icons/stx-icon.tsx @@ -1,27 +1,26 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '@app/ui/components/svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function StxIcon({ size = 'xl', ...props }: SquareProps) { +export function StxIcon({ size = 'xl', ...props }: SvgProps) { return ( - - - - - - - + + + + + ); } diff --git a/src/app/ui/components/icons/stx-ledger-icon.tsx b/src/app/ui/components/icons/stx-ledger-icon.tsx index 1f95eb3138c..aecd63f0d15 100644 --- a/src/app/ui/components/icons/stx-ledger-icon.tsx +++ b/src/app/ui/components/icons/stx-ledger-icon.tsx @@ -1,26 +1,25 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function StxLedgerIcon({ size = 'md', ...props }: SquareProps) { +export function StxLedgerIcon({ size = 'md', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/swap-icon.tsx b/src/app/ui/components/icons/swap-icon.tsx index 228a3fe408f..fc9f9d3a4b5 100644 --- a/src/app/ui/components/icons/swap-icon.tsx +++ b/src/app/ui/components/icons/swap-icon.tsx @@ -1,31 +1,30 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function SwapIcon({ size = 'sm', ...props }: SquareProps) { +export function SwapIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - - - - - + + + + + + + + + + ); } diff --git a/src/app/ui/components/icons/trash-icon.tsx b/src/app/ui/components/icons/trash-icon.tsx index 0014efe57ee..d6242214576 100644 --- a/src/app/ui/components/icons/trash-icon.tsx +++ b/src/app/ui/components/icons/trash-icon.tsx @@ -1,26 +1,25 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function TrashIcon({ size = 'sm', ...props }: SquareProps) { +export function TrashIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - - - + + + + + + ); } diff --git a/src/app/ui/components/icons/unlock-icon.tsx b/src/app/ui/components/icons/unlock-icon.tsx index 1c839ca0fc5..1ff6db1cc8f 100644 --- a/src/app/ui/components/icons/unlock-icon.tsx +++ b/src/app/ui/components/icons/unlock-icon.tsx @@ -1,33 +1,32 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function UnlockIcon({ size = 'sm', ...props }: SquareProps) { +export function UnlockIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - - + + + + ); } diff --git a/src/app/ui/components/icons/wallet-type-ledger-icon.tsx b/src/app/ui/components/icons/wallet-type-ledger-icon.tsx index dc52b9eafa5..6635a889f2a 100644 --- a/src/app/ui/components/icons/wallet-type-ledger-icon.tsx +++ b/src/app/ui/components/icons/wallet-type-ledger-icon.tsx @@ -1,54 +1,53 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; -export function WalletTypeLedgerIcon({ size = 'md', ...props }: SquareProps) { +export function WalletTypeLedgerIcon({ size = 'md', ...props }: SvgProps) { return ( - - - - - - - - - - + + + + + + + + ); } diff --git a/src/app/ui/components/icons/zap-icon.tsx b/src/app/ui/components/icons/zap-icon.tsx index ac9aaf8183a..c4af26b7502 100644 --- a/src/app/ui/components/icons/zap-icon.tsx +++ b/src/app/ui/components/icons/zap-icon.tsx @@ -1,23 +1,22 @@ -import { Square, SquareProps } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; -import { Svg } from '../svg'; +import { SvgProps } from '@app/ui/ui-types'; // TODO: This svg was copied from react-icons temporarily -export function ZapIcon({ size = 'sm', ...props }: SquareProps) { +export function ZapIcon({ size = 'sm', ...props }: SvgProps) { return ( - - - - - + + + ); } diff --git a/src/app/ui/components/svg.tsx b/src/app/ui/components/svg.tsx deleted file mode 100644 index 9118a4caa10..00000000000 --- a/src/app/ui/components/svg.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { styled } from 'leather-styles/jsx'; -import { HTMLStyledProps } from 'leather-styles/types'; - -export type SvgProps = HTMLStyledProps<'svg'>; - -export function Svg(props: SvgProps) { - return ; -} diff --git a/src/app/ui/ui-types.ts b/src/app/ui/ui-types.ts new file mode 100644 index 00000000000..9caaa9610b0 --- /dev/null +++ b/src/app/ui/ui-types.ts @@ -0,0 +1,9 @@ +import { SizeToken } from 'leather-styles/tokens'; +import type { HTMLStyledProps, LiteralUnion } from 'leather-styles/types'; + +type IconSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; +type Size = LiteralUnion, string>; + +export interface SvgProps extends HTMLStyledProps<'svg'> { + size?: Size; +} From 0e52e5fb28428202e99f4ac533741171be43f002 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Wed, 29 Nov 2023 15:23:59 +0000 Subject: [PATCH 05/17] chore: consume design tokens from extension --- package.json | 1 + theme/breakpoints.ts | 9 ++-- theme/colors.ts | 114 ++------------------------------------- theme/keyframes.ts | 43 +-------------- theme/semantic-tokens.ts | 107 +----------------------------------- theme/tokens.ts | 57 +------------------- theme/typography.ts | 108 +------------------------------------ yarn.lock | 5 ++ 8 files changed, 21 insertions(+), 423 deletions(-) diff --git a/package.json b/package.json index ce952d97ff2..5b4b9e20108 100644 --- a/package.json +++ b/package.json @@ -232,6 +232,7 @@ "@actions/core": "1.10.1", "@btckit/types": "0.0.19", "@leather-wallet/prettier-config": "0.0.1", + "@leather-wallet/tokens": "0.0.2", "@ls-lint/ls-lint": "2.1.0", "@pandacss/dev": "0.18.3", "@playwright/test": "1.38.1", diff --git a/theme/breakpoints.ts b/theme/breakpoints.ts index f2eb092de96..9b562db7dca 100644 --- a/theme/breakpoints.ts +++ b/theme/breakpoints.ts @@ -1,8 +1,7 @@ +import { breakpoints as leatherBreakpoints } from '@leather-wallet/tokens'; + +// TODO consider removing this from the tokens package / doing this better // ts-unused-exports:disable-next-line export const breakpoints = { - sm: '398px', - md: '768px', - lg: '1024px', - xl: '1280px', - '2xl': '1536px', + ...leatherBreakpoints, }; diff --git a/theme/colors.ts b/theme/colors.ts index 69c182613b0..6f51e8e6d32 100644 --- a/theme/colors.ts +++ b/theme/colors.ts @@ -1,115 +1,7 @@ +import { colors as leatherColors } from '@leather-wallet/tokens'; import { defineTokens } from '@pandacss/dev'; +// ts-unused-exports:disable-next-line export const colors = defineTokens.colors({ - current: { value: 'currentColor' }, - dark: { value: '#111' }, - black: { value: '#000' }, - white: { value: '#fff' }, - lightModeRed: { - 100: { value: '#FCEEED' }, - 300: { value: '#FFABB1' }, - 500: { value: '#FF5863' }, - 600: { value: '#FF2E3C' }, - }, - darkModeRed: { - 100: { value: '#38191A' }, - 300: { value: '#4F1A1D' }, - 500: { value: '#7C1E24' }, - 600: { value: '#AB1F29' }, - }, - lightModeBlue: { - 100: { value: '#E6F2FF' }, - 300: { value: '#9BCAFF' }, - 500: { value: '#3795FF' }, - 600: { value: '#057AFF' }, - }, - darkModeBlue: { - 100: { value: '#0C2644' }, - 300: { value: '#092F5A' }, - 500: { value: '#053E80' }, - 600: { value: '#004EA6' }, - }, - lightModeYellow: { - 100: { value: '#FEF9E6' }, - 300: { value: '#FBE699' }, - 500: { value: '#F7CD33' }, - 600: { value: '#F5C000' }, - }, - darkModeYellow: { - 100: { value: '#473D1C' }, - 300: { value: '#5C4F21' }, - 500: { value: '#A98D29' }, - 600: { value: '#D8B021' }, - }, - lightModeGreen: { - 100: { value: '#E6F5ED' }, - 300: { value: '#99D8B9' }, - 500: { value: '#33B172' }, - 600: { value: '#009E4F' }, - }, - darkModeGreen: { - 100: { value: '#1A3124' }, - 300: { value: '#19422C' }, - 500: { value: '#165C38' }, - 600: { value: '#00753A' }, - }, - lightModeBrown: { - 1: { value: '#FFFFFF' }, - 2: { value: '#F7F5F3' }, - 3: { value: '#F5F1ED' }, - 4: { value: '#EAE5E0' }, - 5: { value: '#E4DDD6' }, - 6: { value: '#DED6CD' }, - 7: { value: '#D8CEC4' }, - 8: { value: '#948677' }, - 9: { value: '#948677' }, - 10: { value: '#64594D' }, - 11: { value: '#4A423B' }, - 12: { value: '#12100F' }, - }, - darkModeBrown: { - 1: { value: '#12100F' }, - 2: { value: '#2C2A24' }, - 3: { value: '#4A423B' }, - 4: { value: '#34312A' }, - 5: { value: '#12100F' }, - 6: { value: '#716A60' }, - 7: { value: '#8F887D' }, - 8: { value: '#948677' }, - 9: { value: '#F5F1ED' }, - 10: { value: '#DED6CD' }, - 11: { value: '#DED6CD' }, - 12: { value: '#F5F1ED' }, - }, - lightModeInk: { - 1: { value: '#FFFFFF' }, - 2: { value: '#F9F9F9' }, - 3: { value: '#F1F1F1' }, - 4: { value: '#EBEBEB' }, - 5: { value: '#E4E4E4' }, - 6: { value: '#DDDDDD' }, - 7: { value: '#D4D4D4' }, - 8: { value: '#BBBBBB' }, - 9: { value: '#8D8D8D' }, - 10: { value: '#808080' }, - 11: { value: '#646464' }, - 12: { value: '#12100F' }, - }, - darkModeInk: { - 1: { value: '#12100F' }, - 2: { value: '#1B1B1B' }, - 3: { value: '#282828' }, - 4: { value: '#303030' }, - 5: { value: '#373737' }, - 6: { value: '#3F3F3F' }, - 7: { value: '#4A4A4A' }, - 8: { value: '#606060' }, - 9: { value: '#6E6E6E' }, - 10: { value: '#818181' }, - 11: { value: '#B1B1B1' }, - 12: { value: '#EEEEEE' }, - }, - lightModeStacks: { value: '#5546FF' }, - darkModeStacks: { value: '#7F80FF' }, - overlay: { value: 'rgba(0,0,0,0.4)' }, + ...leatherColors, }); diff --git a/theme/keyframes.ts b/theme/keyframes.ts index be88dc91df2..d82a4737e3d 100644 --- a/theme/keyframes.ts +++ b/theme/keyframes.ts @@ -1,46 +1,7 @@ +import { keyframes as leatherKeyframes } from '@leather-wallet/tokens'; import { CssKeyframes } from 'leather-styles/types/system-types'; // ts-unused-exports:disable-next-line export const keyframes: CssKeyframes = { - fadein: { - '0%': { opacity: '0' }, - '100%': { opacity: '1' }, - }, - fadeout: { - '0%': { opacity: '1' }, - '100%': { opacity: '0' }, - }, - shine: { - '0%': { - backgroundPosition: '-50px', - }, - '100%': { - backgroundPosition: '500px', - }, - }, - rotate: { - '0%': { - transform: 'rotate(0deg)', - }, - '100%': { - transform: 'rotate(360deg)', - }, - }, - // TODO: identical to above, remove - spin: { - '0%': { - transform: 'rotate(0deg)', - }, - '100%': { - transform: 'rotate(360deg)', - }, - }, - animatedTick: { - from: { - strokeDashoffset: 350, - }, - to: { - strokeDashoffset: 0, - }, - }, + ...leatherKeyframes, }; diff --git a/theme/semantic-tokens.ts b/theme/semantic-tokens.ts index b6661b6b097..cc2dd434cd9 100644 --- a/theme/semantic-tokens.ts +++ b/theme/semantic-tokens.ts @@ -1,110 +1,7 @@ +import { semanticTokens as leatherSemanticTokens } from '@leather-wallet/tokens'; import { defineSemanticTokens } from '@pandacss/dev'; // ts-unused-exports:disable-next-line export const semanticTokens = defineSemanticTokens({ - colors: { - // Primative colours defined as semantic tokens to match Radix - brown: { - 1: { value: { base: '{colors.lightModeBrown.1}', _dark: '{colors.darkModeBrown.1}' } }, - 2: { value: { base: '{colors.lightModeBrown.2}', _dark: '{colors.darkModeBrown.2}' } }, - 3: { value: { base: '{colors.lightModeBrown.3}', _dark: '{colors.darkModeBrown.3}' } }, - 4: { value: { base: '{colors.lightModeBrown.4}', _dark: '{colors.darkModeBrown.4}' } }, - 5: { value: { base: '{colors.lightModeBrown.5}', _dark: '{colors.darkModeBrown.5}' } }, - 6: { value: { base: '{colors.lightModeBrown.6}', _dark: '{colors.darkModeBrown.6}' } }, - 7: { value: { base: '{colors.lightModeBrown.7}', _dark: '{colors.darkModeBrown.7}' } }, - 8: { value: { base: '{colors.lightModeBrown.8}', _dark: '{colors.darkModeBrown.8}' } }, - 9: { value: { base: '{colors.lightModeBrown.9}', _dark: '{colors.darkModeBrown.9}' } }, - 10: { value: { base: '{colors.lightModeBrown.10}', _dark: '{colors.darkModeBrown.10}' } }, - 11: { value: { base: '{colors.lightModeBrown.11}', _dark: '{colors.darkModeBrown.11}' } }, - 12: { value: { base: '{colors.lightModeBrown.12}', _dark: '{colors.darkModeBrown.12}' } }, - }, - ink: { - 1: { value: { base: '{colors.lightModeInk.1}', _dark: '{colors.darkModeInk.1}' } }, - 2: { value: { base: '{colors.lightModeInk.2}', _dark: '{colors.darkModeInk.2}' } }, - 3: { value: { base: '{colors.lightModeInk.3}', _dark: '{colors.darkModeInk.3}' } }, - 4: { value: { base: '{colors.lightModeInk.4}', _dark: '{colors.darkModeInk.4}' } }, - 5: { value: { base: '{colors.lightModeInk.5}', _dark: '{colors.darkModeInk.5}' } }, - 6: { value: { base: '{colors.lightModeInk.6}', _dark: '{colors.darkModeInk.6}' } }, - 7: { value: { base: '{colors.lightModeInk.7}', _dark: '{colors.darkModeInk.7}' } }, - 8: { value: { base: '{colors.lightModeInk.8}', _dark: '{colors.darkModeInk.8}' } }, - 9: { value: { base: '{colors.lightModeInk.9}', _dark: '{colors.darkModeInk.9}' } }, - 10: { value: { base: '{colors.lightModeInk.10}', _dark: '{colors.darkModeInk.10}' } }, - 11: { value: { base: '{colors.lightModeInk.11}', _dark: '{colors.darkModeInk.11}' } }, - 12: { value: { base: '{colors.lightModeInk.12}', _dark: '{colors.darkModeInk.12}' } }, - }, - accent: { - 'text-primary': { - value: { base: '{colors.lightModeBrown.12}', _dark: '{colors.darkModeBrown.12}' }, - }, - 'text-subdued': { - value: { base: '{colors.lightModeBrown.8}', _dark: '{colors.darkModeBrown.8}' }, - }, - 'action-primary-hover': { - value: { base: '{colors.lightModeBrown.10}', _dark: '{colors.darkModeBrown.10}' }, - }, - 'action-primary-default': { - value: { base: '{colors.lightModeBrown.9}', _dark: '{colors.darkModeBrown.9}' }, - }, - 'border-hover': { - value: { base: '{colors.lightModeBrown.5}', _dark: '{colors.darkModeBrown.8}' }, - }, - 'border-default': { - value: { base: '{colors.lightModeBrown.4}', _dark: '{colors.darkModeBrown.7}' }, - }, - 'non-interactive': { - value: { base: '{colors.lightModeBrown.7}', _dark: '{colors.darkModeBrown.6}' }, - }, - 'component-background-pressed': { - value: { base: '{colors.lightModeBrown.4}', _dark: '{colors.darkModeBrown.5}' }, - }, - 'component-background-hover': { - value: { base: '{colors.lightModeBrown.2}', _dark: '{colors.darkModeBrown.4}' }, - }, - 'component-background-default': { - value: { base: '{colors.lightModeBrown.3}', _dark: '{colors.darkModeBrown.3}' }, - }, - 'background-secondary': { - value: { base: '{colors.lightModeBrown.2}', _dark: '{colors.darkModeBrown.2}' }, - }, - 'background-primary': { - value: { base: '{colors.lightModeBrown.1}', _dark: '{colors.darkModeBrown.1}' }, - }, - 'notification-text': { - value: { base: '{colors.lightModeBrown.12}', _dark: '{colors.darkModeBrown.12}' }, - }, - }, - disabled: { - value: { base: '{colors.lightModeBlue.100}', _dark: '{colors.darkModeBlue.100}' }, - }, - error: { - background: { - value: { base: '{colors.lightModeRed.100}', _dark: '{colors.darkModeRed.100}' }, - }, - label: { - value: { base: '{colors.lightModeRed.600}', _dark: '{colors.darkModeRed.600}' }, - }, - }, - invert: { - value: { base: '{colors.darkModeBrown.1}', _dark: '{colors.lightModeBrown.1}' }, - }, - stacks: { - value: { base: '{colors.lightModeStacks}', _dark: '{colors.darkModeStacks}' }, - }, - success: { - background: { - value: { base: '{colors.lightModeGreen.100}', _dark: '{colors.darkModeGreen.100}' }, - }, - label: { - value: { base: '{colors.lightModeGreen.600}', _dark: '{colors.darkModeGreen.600}' }, - }, - }, - warning: { - background: { - value: { base: '{colors.lightModeYellow.100}', _dark: '{colors.darkModeYellow.100}' }, - }, - label: { - value: { base: '{colors.lightModeYellow.600}', _dark: '{colors.darkModeYellow.600}' }, - }, - }, - }, + ...leatherSemanticTokens, }); diff --git a/theme/tokens.ts b/theme/tokens.ts index d378bb359da..e5165203b52 100644 --- a/theme/tokens.ts +++ b/theme/tokens.ts @@ -1,60 +1,7 @@ +import { tokens as leatherTokens } from '@leather-wallet/tokens'; import { defineTokens } from '@pandacss/dev'; -import { colors } from './colors'; - // ts-unused-exports:disable-next-line export const tokens = defineTokens({ - animations: { - spin: { - value: 'spin 1s linear infinite', - }, - }, - sizes: { - centeredPageFullWidth: { value: '500px' }, - desktopViewportMinWidth: { value: '480px' }, - xs: { value: '12px' }, - sm: { value: '16px' }, - md: { value: '24px' }, - lg: { value: '30px' }, - xl: { value: '36px' }, - }, - radii: { - xs: { value: '8px' }, - sm: { value: '10px' }, - md: { value: '12px' }, - lg: { value: '16px' }, - xl: { value: '20px' }, - xxl: { value: '24px' }, - }, - spacing: { - // Numbers are padded with 0 to ensure they are sorted correctly in TS - // autocomplete. When typing, mt="04" + enter key, will jump straight to the - // spacing value you need. - 'space.00': { value: '0' }, - 'space.01': { value: '4px', description: '4px' }, - 'space.02': { value: '8px', description: '8px' }, - 'space.03': { value: '12px', description: '12px' }, - 'space.04': { value: '16px', description: '16px' }, - 'space.05': { value: '24px', description: '24px' }, - 'space.06': { value: '32px', description: '32px' }, - 'space.07': { value: '40px', description: '40px' }, - 'space.08': { value: '48px', description: '48px' }, - 'space.09': { value: '64px', description: '64px' }, - 'space.10': { value: '72px', description: '72px' }, - 'space.11': { value: '128px', description: '128px' }, - }, - colors, - borders: { - action: { value: '1px solid {colors.accent.action-primary-default}' }, - active: { value: '2px solid {colors.accent.border-default}' }, - background: { value: '2px solid {colors.accent.background-primary}' }, - dashed: { value: '2px dashed {colors.accent.component-background-default}' }, - default: { value: '1px solid {colors.accent.border-default}' }, - error: { value: '1px solid {colors.error.label}' }, - focus: { value: '2px solid {colors.accent.action-primary-default}' }, - invert: { value: '1px solid {colors.invert}' }, - subdued: { value: '1px solid {colors.accent.text-subdued}' }, - warning: { value: '1px solid {colors.warning.label}' }, - }, - transition: { value: 'all 0.2s cubic-bezier(0.23, 1, 0.32, 1)' }, + ...leatherTokens, }); diff --git a/theme/typography.ts b/theme/typography.ts index 0c01d54946e..60189901e4f 100644 --- a/theme/typography.ts +++ b/theme/typography.ts @@ -1,109 +1,5 @@ +import { textStyles as leatherTextStyles } from '@leather-wallet/tokens'; import { defineTextStyles } from '@pandacss/dev'; -const marchePro = 'Marche'; - -const commonMarcheProStyles = { - fontFamily: marchePro, - textTransform: 'uppercase', -}; - -const diatype = 'Diatype'; - -const commonDiatypeStyles = { - fontFamily: diatype, -}; - -const firaCode = 'Fira Code'; - // ts-unused-exports:disable-next-line -export const textStyles = defineTextStyles({ - 'display.01': { - description: 'display.01', - value: { ...commonMarcheProStyles, fontSize: '9.375rem', lineHeight: '7.5rem' }, - }, - 'display.02': { - description: 'display.02', - value: { ...commonMarcheProStyles, fontSize: '4rem', lineHeight: '3.5rem' }, - }, - - 'heading.01': { - description: 'heading.01', - value: { ...commonDiatypeStyles, fontSize: '3.3125rem', lineHeight: '3.75rem' }, - }, - 'heading.02': { - description: 'heading.02', - value: { ...commonMarcheProStyles, fontSize: '2.75rem', lineHeight: '2.75rem' }, - }, - 'heading.03': { - description: 'heading.03', - value: { ...commonMarcheProStyles, fontSize: '2rem', lineHeight: '2.1875rem' }, - }, - 'heading.04': { - description: 'heading.04', - value: { - ...commonDiatypeStyles, - fontSize: '1.625rem', - lineHeight: '2.25rem', - fontWeight: '500', - }, - }, - 'heading.05': { - description: 'heading.05', - value: { - ...commonDiatypeStyles, - fontSize: '1.3125rem', - lineHeight: '1.75rem', - fontWeight: '500', - }, - }, - - 'label.01': { - description: 'label.01', - value: { - ...commonDiatypeStyles, - fontSize: '1.0625rem', - lineHeight: '1.5rem', - fontWeight: '500', - }, - }, - 'label.02': { - description: 'label.02', - value: { ...commonDiatypeStyles, fontSize: '0.9375rem', lineHeight: '1.25rem' }, - }, - 'label.03': { - description: 'label.03', - value: { ...commonDiatypeStyles, fontSize: '0.8125rem', lineHeight: '1rem' }, - }, - - 'body.01': { - description: 'body.01', - value: { ...commonDiatypeStyles, fontSize: '1.0625rem', lineHeight: '1.5rem' }, - }, - 'body.02': { - description: 'body.02', - value: { ...commonDiatypeStyles, fontSize: '0.9375rem', lineHeight: '1.25rem' }, - }, - - 'caption.01': { - description: 'caption.01', - value: { ...commonDiatypeStyles, fontSize: '0.9375rem', lineHeight: '1.25rem' }, - }, - 'caption.02': { - description: 'caption.02', - value: { ...commonDiatypeStyles, fontSize: '0.8125rem', lineHeight: '1rem' }, - }, - - 'mono.01': { - description: 'mono.01', - value: { - fontFamily: firaCode, - fontSize: '1rem', - lineHeight: '1.5rem', - letterSpacing: '.08rem', - }, - }, - 'mono.02': { - description: 'mono.02', - value: { fontFamily: firaCode, fontSize: '0.6rem', lineHeight: '1rem' }, - }, -}); +export const textStyles = defineTextStyles({ ...leatherTextStyles }); diff --git a/yarn.lock b/yarn.lock index b63d244cf94..091155a8428 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1743,6 +1743,11 @@ "@trivago/prettier-plugin-sort-imports" "^4.2.0" prettier "^3.0.3" +"@leather-wallet/tokens@0.0.2": + version "0.0.2" + resolved "https://registry.yarnpkg.com/@leather-wallet/tokens/-/tokens-0.0.2.tgz#6e93cb34be0f63562e4031db0e06b721fa48b2de" + integrity sha512-y4kISkpHirC+1OonyIHhLbu8eBMS8GkASE09Ay330RMjdCnkprhuVVHYCzEZgzKN0+szyCzFzrz1foYf9Tpe6A== + "@ledgerhq/devices@^8.0.7", "@ledgerhq/devices@^8.0.8": version "8.0.8" resolved "https://registry.yarnpkg.com/@ledgerhq/devices/-/devices-8.0.8.tgz#cd233eb54a044913160c9183be9fb22adae4e071" From d476fa31cd7061613b43d157c6b724edda9efd74 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Wed, 29 Nov 2023 16:26:29 +0000 Subject: [PATCH 06/17] chore: consume design tokens from extension --- theme/breakpoints.ts | 1 - theme/colors.ts | 1 + 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/theme/breakpoints.ts b/theme/breakpoints.ts index 9b562db7dca..1d1acf2bfbf 100644 --- a/theme/breakpoints.ts +++ b/theme/breakpoints.ts @@ -1,6 +1,5 @@ import { breakpoints as leatherBreakpoints } from '@leather-wallet/tokens'; -// TODO consider removing this from the tokens package / doing this better // ts-unused-exports:disable-next-line export const breakpoints = { ...leatherBreakpoints, diff --git a/theme/colors.ts b/theme/colors.ts index 6f51e8e6d32..0d25f40195f 100644 --- a/theme/colors.ts +++ b/theme/colors.ts @@ -3,5 +3,6 @@ import { defineTokens } from '@pandacss/dev'; // ts-unused-exports:disable-next-line export const colors = defineTokens.colors({ + current: { value: 'currentColor' }, ...leatherColors, }); From 1d9fd6092cf0606c50080061fa2f1dff614ee5ee Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Mon, 4 Dec 2023 06:26:40 +0000 Subject: [PATCH 07/17] fix: remove PSBT learn more link, closes #4607 --- .../components/psbt-request-sighash-warning-label.tsx | 5 ----- 1 file changed, 5 deletions(-) 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 8d5ebb2bebc..b69c18efd57 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 @@ -1,5 +1,4 @@ import { WarningLabel } from '@app/components/warning-label'; -import { LeatherButton } from '@app/ui/components/button'; export function PsbtRequestSighashWarningLabel() { return ( @@ -7,10 +6,6 @@ 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. - {/* TODO: Link for this? */} - - Learn more ↗ - ); } From 9ec8a0cacd1f6cf54d057c1879857b249d56a089 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Mon, 4 Dec 2023 08:52:03 +0000 Subject: [PATCH 08/17] fix: roll back move to async from PR 4490 to supress sentry error --- src/app/components/fees-row/components/custom-fee-field.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 cc61499bf39..edc3866dbf3 100644 --- a/src/app/components/fees-row/components/custom-fee-field.tsx +++ b/src/app/components/fees-row/components/custom-fee-field.tsx @@ -58,8 +58,8 @@ export function CustomFeeField({ height="32px" name="fee" disabled={disableFeeSelection} - onChange={async (evt: FormEvent) => { - await helpers.setValue(evt.currentTarget.value); + onChange={(evt: FormEvent) => { + void helpers.setValue(evt.currentTarget.value); // Separating warning check from field validations // bc we want the user to be able to submit the form // with the low fee warning present. From fc2e08a929768ef7bba41b736f81f7426cfd8a50 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Mon, 4 Dec 2023 09:02:46 +0000 Subject: [PATCH 09/17] fix: adjust position of fee slot, closes #4462 --- src/app/components/fees-row/components/custom-fee-field.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 edc3866dbf3..72090e7b42c 100644 --- a/src/app/components/fees-row/components/custom-fee-field.tsx +++ b/src/app/components/fees-row/components/custom-fee-field.tsx @@ -45,9 +45,10 @@ export function CustomFeeField({ justifyContent="center" position="relative" width="130px" + textStyle="label.02" > - - {feeCurrencySymbol} + + {feeCurrencySymbol} From cdcc59787fc74ebd98449a2314d2dfb72ef5f518 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Mon, 4 Dec 2023 11:15:43 +0000 Subject: [PATCH 10/17] fix: add color to warning background, closes #4600 --- src/app/pages/receive/components/receive-btc-warning.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app/pages/receive/components/receive-btc-warning.tsx b/src/app/pages/receive/components/receive-btc-warning.tsx index fd5179ad537..93dff6db511 100644 --- a/src/app/pages/receive/components/receive-btc-warning.tsx +++ b/src/app/pages/receive/components/receive-btc-warning.tsx @@ -2,7 +2,13 @@ import { Flex, styled } from 'leather-styles/jsx'; export function ReceiveBtcModalWarning({ message }: { message: string }) { return ( - + {message} ); From b104a482c07eb5099e50c7f0c08034037d9f811b Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Mon, 4 Dec 2023 10:46:46 +0000 Subject: [PATCH 11/17] fix: set backgroundLocation for send ordinal, closes #4562 --- .../hooks/use-send-inscription-form.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/app/pages/send/ordinal-inscription/hooks/use-send-inscription-form.tsx b/src/app/pages/send/ordinal-inscription/hooks/use-send-inscription-form.tsx index 35e3c00db09..596b7c853ac 100644 --- a/src/app/pages/send/ordinal-inscription/hooks/use-send-inscription-form.tsx +++ b/src/app/pages/send/ordinal-inscription/hooks/use-send-inscription-form.tsx @@ -76,7 +76,14 @@ export function useSendInscriptionForm() { navigate( `/${RouteUrls.SendOrdinalInscription}/${RouteUrls.SendOrdinalInscriptionChooseFee}`, - { state: { inscription, recipient: values.recipient, utxo } } + { + state: { + inscription, + recipient: values.recipient, + utxo, + backgroundLocation: { pathname: RouteUrls.Home }, + }, + } ); }, @@ -115,6 +122,7 @@ export function useSendInscriptionForm() { time, feeRowValue, signedTx: signedTx.extract(), + backgroundLocation: { pathname: RouteUrls.Home }, }, }); }, From d00d83faf6952f0e658622102435827fe6c18aa1 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Mon, 4 Dec 2023 11:03:59 +0000 Subject: [PATCH 12/17] fix: change to hstack to align buttons, closes #4592 --- .../send/ordinal-inscription/sent-inscription-summary.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx b/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx index a0c59400a5c..282cb834094 100644 --- a/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx +++ b/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx @@ -1,7 +1,7 @@ import { toast } from 'react-hot-toast'; import { useLocation, useNavigate } from 'react-router-dom'; -import { Box, Stack } from 'leather-styles/jsx'; +import { Box, HStack, Stack } from 'leather-styles/jsx'; import get from 'lodash.get'; import { Blockchains } from '@shared/models/blockchain.model'; @@ -79,14 +79,14 @@ export function SendInscriptionSummary() { - + } label="View details" /> } label="Copy ID" /> - + ); From c5ee6b75776e9b21faa15a6d8cb933181a47801f Mon Sep 17 00:00:00 2001 From: Fara Woolf Date: Wed, 29 Nov 2023 20:21:44 -0600 Subject: [PATCH 13/17] feat: add tests for psbt sigining --- .../use-legacy-auth-bitcoin-addresses.ts | 4 + .../common/psbt/use-psbt-request-params.ts | 4 +- src/app/common/transactions/bitcoin/utils.ts | 3 +- .../pages/rpc-sign-psbt/use-rpc-sign-psbt.tsx | 5 +- .../messaging/rpc-methods/sign-psbt.ts | 2 +- test-app/src/components/bitcoin.tsx | 47 +++---- tests/mocks/constants.ts | 23 ++-- tests/specs/rpc-sign-psbt/sign-psbt.spec.ts | 129 ++++++++++++++++++ 8 files changed, 175 insertions(+), 42 deletions(-) create mode 100644 tests/specs/rpc-sign-psbt/sign-psbt.spec.ts diff --git a/src/app/common/authentication/use-legacy-auth-bitcoin-addresses.ts b/src/app/common/authentication/use-legacy-auth-bitcoin-addresses.ts index 4e04dd9e5e6..84b2a314fd7 100644 --- a/src/app/common/authentication/use-legacy-auth-bitcoin-addresses.ts +++ b/src/app/common/authentication/use-legacy-auth-bitcoin-addresses.ts @@ -30,6 +30,10 @@ export function useGetLegacyAuthBitcoinAddresses() { p2tr: bytesToHex(taprootAccount?.mainnet?.keychain.publicKey!), p2wpkh: bytesToHex(nativeSegwitAccount?.mainnet?.keychain.publicKey!), }, + btcPublicKeyTestnet: { + p2tr: bytesToHex(taprootAccount?.testnet?.keychain.publicKey!), + p2wpkh: bytesToHex(nativeSegwitAccount?.testnet?.keychain.publicKey!), + }, }; }; } diff --git a/src/app/common/psbt/use-psbt-request-params.ts b/src/app/common/psbt/use-psbt-request-params.ts index a034196d70d..63ead03b983 100644 --- a/src/app/common/psbt/use-psbt-request-params.ts +++ b/src/app/common/psbt/use-psbt-request-params.ts @@ -1,6 +1,6 @@ import { useMemo } from 'react'; -import { ensureArray, undefinedIfLengthZero } from '@shared/utils'; +import { ensureArray, isDefined, undefinedIfLengthZero } from '@shared/utils'; import { useDefaultRequestParams } from '../hooks/use-default-request-search-params'; import { initialSearchParams } from '../initial-search-params'; @@ -20,7 +20,7 @@ export function usePsbtRequestSearchParams() { origin, payload, requestToken, - signAtIndex: payload?.signAtIndex + signAtIndex: isDefined(payload?.signAtIndex) ? undefinedIfLengthZero(ensureArray(payload?.signAtIndex).map(h => Number(h))) : undefined, tabId: tabId ?? 1, diff --git a/src/app/common/transactions/bitcoin/utils.ts b/src/app/common/transactions/bitcoin/utils.ts index 81758437473..834520f219d 100644 --- a/src/app/common/transactions/bitcoin/utils.ts +++ b/src/app/common/transactions/bitcoin/utils.ts @@ -22,8 +22,7 @@ export const getColorFromBitcoinTx = (tx: BitcoinTx) => { pending: 'warning.label', success: 'stacks', }; - - return colorMap[statusFromBitcoinTx(tx)] ?? 'feedback-error'; + return colorMap[statusFromBitcoinTx(tx)] ?? 'error.label'; }; export function containsTaprootInput(tx: BitcoinTx) { diff --git a/src/app/pages/rpc-sign-psbt/use-rpc-sign-psbt.tsx b/src/app/pages/rpc-sign-psbt/use-rpc-sign-psbt.tsx index b97c9c40428..248d8c1c8f9 100644 --- a/src/app/pages/rpc-sign-psbt/use-rpc-sign-psbt.tsx +++ b/src/app/pages/rpc-sign-psbt/use-rpc-sign-psbt.tsx @@ -103,7 +103,7 @@ export function useRpcSignPsbt() { // but we only support broadcasting using the rpc request method if (broadcast && addressNativeSegwitTotal && addressTaprootTotal && fee) { try { - tx.finalize(); + signedTx.finalize(); } catch (e) { return navigate(RouteUrls.RequestError, { state: { @@ -121,7 +121,6 @@ export function useRpcSignPsbt() { }); return; } - closeWindow(); } catch (e) { return navigate(RouteUrls.RequestError, { @@ -135,8 +134,8 @@ export function useRpcSignPsbt() { makeRpcErrorResponse('signPsbt', { id: requestId, error: { - message: 'User denied signing', code: RpcErrorCode.USER_REJECTION, + message: 'User rejected signing PSBT request', }, }) ); diff --git a/src/background/messaging/rpc-methods/sign-psbt.ts b/src/background/messaging/rpc-methods/sign-psbt.ts index 574cf5e1f92..617dc3f0eda 100644 --- a/src/background/messaging/rpc-methods/sign-psbt.ts +++ b/src/background/messaging/rpc-methods/sign-psbt.ts @@ -98,7 +98,7 @@ export async function rpcSignPsbt(message: SignPsbtRequest, port: chrome.runtime id: message.id, error: { code: RpcErrorCode.USER_REJECTION, - message: 'User rejected the PSBT request', + message: 'User rejected signing PSBT request', }, }), }); diff --git a/test-app/src/components/bitcoin.tsx b/test-app/src/components/bitcoin.tsx index a3da6b67f5b..7fa214e231e 100644 --- a/test-app/src/components/bitcoin.tsx +++ b/test-app/src/components/bitcoin.tsx @@ -29,10 +29,10 @@ const bitcoinTestnet: BitcoinNetwork = { const ecdsaPublicKeyLength = 33; const TEST_TESTNET_ACCOUNT_1_PUBKEY_P2WPKH = - '02b6b0afe5f620bc8e532b640b148dd9dea0ed19d11f8ab420fcce488fe3974893'; + '03fe21e3444109e30ff7d19da0f530c344cad2e35fbee89afb2413858e4a9d7aa5'; const TEST_TESTNET_ACCOUNT_1_PUBKEY_TR = - '03cf7525b9d94fd35eaf6b4ac4c570f718d1df142606ba3a64e2407ea01a37778f'; -const TEST_TESTNET_ACCOUNT_2_BTC_ADDRESS = 'tb1qkzvk9hr7uvas23hspvsgqfvyc8h4nngeqjqtnj'; + '02e11c344f80d5fa9530183ed4c7f532c796def176c13276b7919f5047d82370b5'; +const TEST_TESTNET_ACCOUNT_2_BTC_ADDRESS = 'tb1qr8me8t9gu9g6fu926ry5v44yp0wyljrespjtnz'; export function ecdsaPublicKeyToSchnorr(pubKey: Uint8Array) { if (pubKey.byteLength !== ecdsaPublicKeyLength) throw new Error('Invalid public key length'); @@ -43,29 +43,31 @@ function getTaprootPayment(publicKey: Uint8Array) { return btc.p2tr(ecdsaPublicKeyToSchnorr(publicKey), undefined, bitcoinTestnet); } -function buildTestNativeSegwitPsbtRequest(pubKey: Uint8Array): PsbtRequestOptions { +function buildTestNativeSegwitPsbtRequest( + pubKey: Uint8Array +): PsbtRequestOptions & { broadcast: boolean } { const p2wpkh = btc.p2wpkh(pubKey, bitcoinTestnet); const tx = new btc.Transaction(); tx.addInput({ index: 0, - txid: '5be910a6557bae29b8ff2dbf4607dbf783eaf82802896d13f61d975c133ccce7', + txid: '5e03c0986d1b196dc586558bdcfcc9971c31e0c4c98ac7a6e86f9e07d899910c', witnessUtxo: { - amount: BigInt(1268294), + amount: BigInt(100), script: p2wpkh.script, }, }); tx.addInput({ - index: 1, - txid: '513bb27703148f97fbc2b7758ee314c14510a7ccd2b10cd8cb57366022fea8ab', + index: 0, + txid: 'ef375b4af02821a14b249c879f818a50d3d0a98a334d70277ab329b9f5687108', witnessUtxo: { - amount: BigInt(1000), + amount: BigInt(100), script: p2wpkh.script, }, }); tx.addOutput({ - amount: BigInt(5000), + amount: BigInt(200), script: p2wpkh.script, }); @@ -73,7 +75,7 @@ function buildTestNativeSegwitPsbtRequest(pubKey: Uint8Array): PsbtRequestOption // For testing mainnet // return { hex: tempHex }; - return { hex: bytesToHex(psbt) }; + return { hex: bytesToHex(psbt), broadcast: true }; } function buildTestNativeSegwitPsbtRequestWithIndexes(pubKey: Uint8Array): PsbtRequestOptions { @@ -83,29 +85,28 @@ function buildTestNativeSegwitPsbtRequestWithIndexes(pubKey: Uint8Array): PsbtRe tx.addInput({ index: 0, - txid: '5be910a6557bae29b8ff2dbf4607dbf783eaf82802896d13f61d975c133ccce7', - sighashType: 2, + txid: '5e03c0986d1b196dc586558bdcfcc9971c31e0c4c98ac7a6e86f9e07d899910c', witnessUtxo: { - amount: BigInt(1268294), + amount: BigInt(100), script: p2wpkh.script, }, }); tx.addInput({ - index: 1, - txid: '513bb27703148f97fbc2b7758ee314c14510a7ccd2b10cd8cb57366022fea8ab', + index: 0, + txid: 'ef375b4af02821a14b249c879f818a50d3d0a98a334d70277ab329b9f5687108', witnessUtxo: { - amount: BigInt(1000), + amount: BigInt(100), script: p2wpkh.script, }, }); tx.addOutput({ - amount: BigInt(5000), + amount: BigInt(200), script: p2wpkh.script, }); const psbt = tx.toPSBT(); - return { signAtIndex: [0, 1], hex: bytesToHex(psbt), allowedSighash: [2] }; + return { signAtIndex: 0, hex: bytesToHex(psbt) }; } function buildTestTaprootPsbtRequest(pubKey: Uint8Array): PsbtRequestOptions { @@ -117,12 +118,12 @@ function buildTestTaprootPsbtRequest(pubKey: Uint8Array): PsbtRequestOptions { index: 0, txid: '4f4cc7cb40b04978bd7704798dc1adf55b58196cef616b0fac8181965abc4726', witnessUtxo: { - amount: BigInt(1000), + amount: BigInt(100), script: payment.script, }, }); tx.addOutput({ - amount: BigInt(1000), + amount: BigInt(100), script: payment.script, }); @@ -141,12 +142,12 @@ function buildTestTaprootPsbtRequestWithIndex(pubKey: Uint8Array): PsbtRequestOp txid: '4f4cc7cb40b04978bd7704798dc1adf55b58196cef616b0fac8181965abc4726', // tapInternalKey: payment.tapInternalKey, witnessUtxo: { - amount: BigInt(1000), + amount: BigInt(100), script: payment.script, }, }); tx.addOutput({ - amount: BigInt(1000), + amount: BigInt(100), script: payment.script, }); diff --git a/tests/mocks/constants.ts b/tests/mocks/constants.ts index 33e54caa084..fe617c032f1 100644 --- a/tests/mocks/constants.ts +++ b/tests/mocks/constants.ts @@ -1,27 +1,28 @@ +// Bitcoin test addresses export const TEST_ACCOUNT_1_NATIVE_SEGWIT_ADDRESS = 'bc1q530dz4h80kwlzywlhx2qn0k6vdtftd93c499yq'; - export const TEST_ACCOUNT_1_TAPROOT_ADDRESS = 'bc1putuzj9lyfcm8fef9jpy85nmh33cxuq9u6wyuk536t9kemdk37yjqmkc0pg'; +export const TEST_TESTNET_ACCOUNT_2_BTC_ADDRESS = 'tb1qr8me8t9gu9g6fu926ry5v44yp0wyljrespjtnz'; -// export const TEST_TESTNET_ACCOUNT_1_BTC_ADDRESS = 'tb1q3c7zyg58dd9hy07m77dv8es9vnpk8xad0yaw8y' +// Stacks test addresses export const TEST_ACCOUNT_1_STX_ADDRESS = 'SPS8CKF63P16J28AYF7PXW9E5AACH0NZNTEFWSFE'; +export const TEST_ACCOUNT_2_STX_ADDRESS = 'SPXH3HNBPM5YP15VH16ZXZ9AX6CK289K3MCXRKCB'; +export const TEST_TESTNET_ACCOUNT_2_STX_ADDRESS = 'STXH3HNBPM5YP15VH16ZXZ9AX6CK289K3NVR9T1P'; + +// Account public keys export const TEST_ACCOUNT_1_PUBKEY = '02b6b0afe5f620bc8e532b640b148dd9dea0ed19d11f8ab420fcce488fe3974893'; -export const TEST_ACCOUNT_2_STX_ADDRESS = 'SPRE7HABZGQ204G3VQAKMDMVBBD8A8CYG6BQKHQ'; -export const TEST_TESTNET_ACCOUNT_2_STX_ADDRESS = 'STXH3HNBPM5YP15VH16ZXZ9AX6CK289K3NVR9T1P'; -// export const TEST_ACCOUNT_2_BTC_ADDRESS = 'bc1qznkpz8fk07nmdhvr2k4nnea5n08tw6tk540snu'; -export const TEST_TESTNET_ACCOUNT_2_BTC_ADDRESS = 'tb1qkzvk9hr7uvas23hspvsgqfvyc8h4nngeqjqtnj'; -// export const TEST_ACCOUNT_3_STX_ADDRESS = 'SP297VG59W96DPGBT13SGD542QE1XS954X78Z75G0' export const TEST_ACCOUNT_3_PUBKEY = '03c1e856462ca2844adb898aee90af5237e9d1be0fe51212635b2f7a643b0585e1'; -export const TEST_BNS_NAME = 'test-hiro-wallet.btc'; -export const TEST_BNS_RESOLVED_ADDRESS = 'SP12YQ0M2KFT7YMJKVGP71B874YF055F77PFPH9KM'; -export const TEST_PASSWORD = 'my_s3cret_p@ssw0r4'; - +// Bitcoin contracts export const TEST_BITCOIN_CONTRACT_ATTESTOR_URLS = '["https://devnet.dlc.link/attestor-2","https://devnet.dlc.link/attestor-1","https://devnet.dlc.link/attestor-3"]'; export const TEST_BITCOIN_CONTRACT_OFFER = '{"protocolVersion":1,"contractFlags":0,"chainHash":"06226e46111a0b59caaf126043eb5bbf28c34f3a5e332a1fc7b2b73cf188910f","temporaryContractId":"7d23eb68507db7cdf1c503674ec9608544f0c2b441898a9fb3f833f81aab83c5","contractInfo":{"singleContractInfo":{"totalCollateral":10000,"contractInfo":{"contractDescriptor":{"numericOutcomeContractDescriptor":{"numDigits":14,"payoutFunction":{"payoutFunctionPieces":[{"endPoint":{"eventOutcome":0,"outcomePayout":0,"extraPrecision":0},"payoutCurvePiece":{"polynomialPayoutCurvePiece":{"payoutPoints":[]}}},{"endPoint":{"eventOutcome":100,"outcomePayout":10000,"extraPrecision":0},"payoutCurvePiece":{"polynomialPayoutCurvePiece":{"payoutPoints":[]}}}],"lastEndpoint":{"eventOutcome":16383,"outcomePayout":10000,"extraPrecision":0}},"roundingIntervals":{"intervals":[{"beginInterval":0,"roundingMod":1}]}}},"oracleInfo":{"multi":{"threshold":3,"oracleAnnouncements":[{"announcementSignature":"a52182d8142248567695a899d8584aaa8f56763bc3a9adcaf214c3d66b46436cfe09b71631fc66b9790365f25ec10104ef6369a9ea40e657cdb8523cc07d99fd","oraclePublicKey":"eaa01780f06a026622ece8b740cde318f814b2d314412e68c68dd4023c68052a","oracleEvent":{"oracleNonces":["4c26c2997dece716ee9538fb318461c9cc1b9f7c2bb6d15596c304899b6ba8cc","127d5d0466b2e73c6733555856cfd19536d49bad49ad7fad4daf20bacb8ae6e1","865be7f5ce2467df976449c2008325fd677d0b6ba889d27c595a4880fe1d1e3f","423e34b5d5820637461b23a5b5360bee70229dd5e49f8a8f7ab5440e00281db4","bcfcc20020fb2ef47baeaeb0ae9170e33faa40b590b7f61983df3cf12b0c5820","0e3d57bbc65ac1743230243c4ca8e2ead8c56c57744d560a34fba7a672b38b1c","4383810a0af8f907f95e90843b9a1057a158be4c20fb0252444728c8d9ae0717","b7681bc3135b12000f3abc184dcf9174d1835afbd68ed2774a5b4ee821141e13","f1e5365c160644004281de68fcd5f3ade50666016adb91cf620dcc960ed9f1b8","76485b44b2a82fb5fc97b665d7774026fc82dc06a20267df9e8b28cc1f5976c2","51bd2643b4ce77b23294d8a2fa62edf0f1d047ffc746d6357c8434fc18dbbd89","3919d344ef2e6448741b92e42e10ff13b43cce4537021fa85859dab6b785ef7f","05c68ea49ffa56b161e37fd7166f0de67ed3c62133ef61dbb4c1f82fb2e9e4e8","2e90ff8cd98effc308edf795a16360b523d45caa375b03b24f07e6a5b6350e33"],"eventMaturityEpoch":1705500842,"eventDescriptor":{"digitDecompositionEvent":{"base":2,"isSigned":false,"unit":"BTCUSD","precision":0,"nbDigits":14}},"eventId":"0x7212ba13ef9c5af579b6256e5ae0e6a053c67fb3df277d71d3e0677895f0629a"}},{"announcementSignature":"1b459c1267773970f80a30b81cd373f74564418d96fb71b5cb51b1ae8a7cf2cfd7fa74fdef4f1f0923028725563ccd062cc2fab277317e8210f975cf2490d001","oraclePublicKey":"eb7abed009f648192c363541263e7e8a8bdc1a56de39b33ff8fac8baab42275e","oracleEvent":{"oracleNonces":["ef17d7f0b047468241e01c58cbc44faccbbaadec44d113d37e98eb84e1eb5835","5eddd819f1eaaacb8a466fa52ae12f58effcba5e035959e70c559553f2392d17","3911c8c4ca6c42758c4b99922bf17a1bfd51f35b1a1f8b1c5b92d79b935a649e","89debc75335ca39d9b197ee77d74fc6498eca7fd8de29bc7e472ecfc1abb61c3","7a82ffe029e687d1f17bb2f1ff3e7498c3f3a49249309af3145756c3c6b52369","b5b8c1114297533ff92cdbb390b0ba6df5d6fe56da30b8677a3de1aebe1951cf","64726acc81b498f746f51a751177ee102138ab1264da7eace3fd774095e4b9a8","0ca0b6689b5798645bd309116500e2933e02110ab890d7c05fbc28aad0098e82","93d9ed9ba6e857dc821f897ec023a723690e98571dfcef962530717d0d984b92","f01ba826a84051ddcb456d44616c496123174efe95a9aade32b554300c19018e","b086fadb7ff7900123808a128afb8cd68eca3a2870ede9d48108af21f5333c2d","9a86c4209d574719f5450fedb205b27c2bcb2cd9f5981b756b33d53e6bd2a23f","ab79809d3d0325f220330de0cd0ea2dac62c55a3557bdf08abf442565c8d915a","3b90cc64a0f93317d659a68f8d144d757a779899df8dc211dd8d75fe6ab9c491"],"eventMaturityEpoch":1705500845,"eventDescriptor":{"digitDecompositionEvent":{"base":2,"isSigned":false,"unit":"BTCUSD","precision":0,"nbDigits":14}},"eventId":"0x7212ba13ef9c5af579b6256e5ae0e6a053c67fb3df277d71d3e0677895f0629a"}},{"announcementSignature":"35daa249c918e91a403ed373d4e786b021b328344ce1a99ca96f715ad565f31a83410585beaff7eb055bc99b3d24256a10ee7a0aa1edd719635043d25babd1ae","oraclePublicKey":"b7a66e9349350752703bbd779e1711beab6f67bf6f1a1c683e6621511b4aa7b7","oracleEvent":{"oracleNonces":["1e460e68ff0c296d12c12fba1172eb58680419b13a6ce939ad898004d40269c9","daf7f86bc906b39ef22aaaec8a6d40198b9d921882d731a67c55bad542c04fec","404dfee3cc69c9c800c2bd961207e09f2af70b38b82618393bce072677bf3841","9e57fc54b008297658f186148a8ff98f5f1faa2890cb68078a3d6fd7d4041c77","62aa2795bc81058d9de470167ce8d2425387f9d46a7efb0682502bbaec80dfc9","b2e8f595234cdcc45fb541c2a4e0c6e9ab21b49fcca91cd2624df31e4942b208","3aab86f7a26b71da2901d33095a68fa9f0e702e250a5915c34c2d0ae21232e7f","aeb01b2f537476454b80fa72781cbceb90710fd76d66d3e81270caa59c3670ae","87aa070a1e9dfa6a34476498acef34acf04b57de468400b4fd45b27721d48f86","5d4a961a38b9afe30bd1a25782bc3bbf4b072aa22d05272ebd0a94fc1a21cb09","4b7fbf2a0c85ccf8a806bb926c5b38aede95204cc9cf37a58a750a5a3779a5cf","da8305bfc28991a5c849c92fd9a086a90f143db9a6515f808e6022071f25a620","f385b0645223da47950e3501ae2bc7b63d96f1c926c55c9e8b4dce294679f2dc","8b744b07b5253ef4f06afa2c37d2c6cba382556122b6ed6dc6850c3a88bdad2e"],"eventMaturityEpoch":1705500844,"eventDescriptor":{"digitDecompositionEvent":{"base":2,"isSigned":false,"unit":"BTCUSD","precision":0,"nbDigits":14}},"eventId":"0x7212ba13ef9c5af579b6256e5ae0e6a053c67fb3df277d71d3e0677895f0629a"}}],"oracleParams":null}}}}},"fundingPubkey":"0244f854a8e35e6c15db085acca64d281a00449de20a391ffaa453653789ded41c","payoutSpk":"0014bc6eff91661193a5645006ec2f7172d224309825","payoutSerialId":7642446663264477000,"offerCollateral":0,"fundingInputs":[],"changeSpk":"0014bc6eff91661193a5645006ec2f7172d224309825","changeSerialId":3518700527019011000,"fundOutputSerialId":9975383107517720000,"feeRatePerVb":400,"cetLocktime":1697552870,"refundLocktime":1706105645}'; export const TEST_BITCOIN_CONTRACT_COUNTERPARTYWALLETDETAILS = '{"counterpartyWalletURL":"https://testnet.dlc.link/eth-wallet","counterpartyWalletName":"DLC.Link","counterpartyWalletIcon":"https://dlc-public-assets.s3.amazonaws.com/DLC.Link_logo_icon_color.svg"}'; + +export const TEST_BNS_NAME = 'test-hiro-wallet.btc'; +export const TEST_BNS_RESOLVED_ADDRESS = 'SP12YQ0M2KFT7YMJKVGP71B874YF055F77PFPH9KM'; +export const TEST_PASSWORD = 'my_s3cret_p@ssw0r4'; diff --git a/tests/specs/rpc-sign-psbt/sign-psbt.spec.ts b/tests/specs/rpc-sign-psbt/sign-psbt.spec.ts new file mode 100644 index 00000000000..8f0bca29968 --- /dev/null +++ b/tests/specs/rpc-sign-psbt/sign-psbt.spec.ts @@ -0,0 +1,129 @@ +import { SignPsbtRequestParams } from '@btckit/types'; +import { BrowserContext, Page } from '@playwright/test'; + +import { WalletDefaultNetworkConfigurationIds } from '@shared/constants'; + +import { test } from '../../fixtures/fixtures'; + +// TODO: Refactor these tests to create the PSBT instances with btc.Transaction +// rather than using the pre-made hex payload. There is currently an open issue +// with playwright that is preventing us from using btc-signer lib here. +// https://github.com/microsoft/playwright/issues/17075 +const unsignedPsbtHex = + '70736274ff01007b02000000020c9199d8079e6fe8a6c78ac9c4e0311c97c9fcdc8b5586c56d191b6d98c0035e0000000000ffffffff087168f5b929b37a27704d338aa9d0d3508a819f879c244ba12128f04a5b37ef0000000000ffffffff01c800000000000000160014a8113965cee4d5ffa2d9996a204866a58200131d000000000001011f6400000000000000160014a8113965cee4d5ffa2d9996a204866a58200131d0001011f6400000000000000160014a8113965cee4d5ffa2d9996a204866a58200131d0000'; +const signedAllPsbt = + '70736274ff01007b02000000020c9199d8079e6fe8a6c78ac9c4e0311c97c9fcdc8b5586c56d191b6d98c0035e0000000000ffffffff087168f5b929b37a27704d338aa9d0d3508a819f879c244ba12128f04a5b37ef0000000000ffffffff01c800000000000000160014a8113965cee4d5ffa2d9996a204866a58200131d000000000001011f6400000000000000160014a8113965cee4d5ffa2d9996a204866a58200131d220203fe21e3444109e30ff7d19da0f530c344cad2e35fbee89afb2413858e4a9d7aa5483045022100ea4c2a68f1032102ad2c73504096f5dbd63d242ccce8000aa9db1a0ce4c4c59402204269fdd3536697329ed9bffcf67e3584d2d3426f84bb004fe467286abe7b02d8010001011f6400000000000000160014a8113965cee4d5ffa2d9996a204866a58200131d220203fe21e3444109e30ff7d19da0f530c344cad2e35fbee89afb2413858e4a9d7aa54730440220014950184114126c0cfeef37c87fff342d297c33190fcbd3fb9bf7c960d2bbe3022057554115f480ae984b12d919a505b1f52cfa89e49cd25f25e877db03bc153a77010000'; +const signedOnlyIndexZeroPsbt = + '70736274ff01007b02000000020c9199d8079e6fe8a6c78ac9c4e0311c97c9fcdc8b5586c56d191b6d98c0035e0000000000ffffffff087168f5b929b37a27704d338aa9d0d3508a819f879c244ba12128f04a5b37ef0000000000ffffffff01c800000000000000160014a8113965cee4d5ffa2d9996a204866a58200131d000000000001011f6400000000000000160014a8113965cee4d5ffa2d9996a204866a58200131d220203fe21e3444109e30ff7d19da0f530c344cad2e35fbee89afb2413858e4a9d7aa5483045022100ea4c2a68f1032102ad2c73504096f5dbd63d242ccce8000aa9db1a0ce4c4c59402204269fdd3536697329ed9bffcf67e3584d2d3426f84bb004fe467286abe7b02d8010001011f6400000000000000160014a8113965cee4d5ffa2d9996a204866a58200131d0000'; + +test.describe('Sign PSBT', () => { + test.beforeEach(async ({ extensionId, globalPage, onboardingPage, page }) => { + await globalPage.setupAndUseApiCalls(extensionId); + await onboardingPage.signInWithTestAccount(extensionId); + await page.goto('https://leather.io'); + }); + + function clickActionButton(context: BrowserContext) { + return async (buttonToPress: 'Cancel' | 'Confirm') => { + const popup = await context.waitForEvent('page'); + const btn = popup.locator(`text="${buttonToPress}"`); + await btn.click(); + }; + } + + async function interceptBroadcastRequest(context: BrowserContext) { + const popup = await context.waitForEvent('page'); + const requestPromise = popup.waitForRequest('**/*/tx'); + await popup.route('**/*/tx', async route => { + await route.abort(); + }); + return requestPromise; + } + + const signAllParams = { + hex: unsignedPsbtHex, + network: WalletDefaultNetworkConfigurationIds.testnet, + }; + + const signAtIndexParams = { + hex: unsignedPsbtHex, + network: WalletDefaultNetworkConfigurationIds.testnet, + signAtIndex: 0, + }; + + function initiatePsbtSigning(page: Page) { + return async (params: SignPsbtRequestParams & { broadcast?: boolean }) => + page.evaluate( + async params => + (window as any).LeatherProvider.request('signPsbt', { + ...params, + }).catch((e: unknown) => e), + { ...params } + ); + } + + test('that all inputs are signed', async ({ page, context }) => { + const [result] = await Promise.all([ + initiatePsbtSigning(page)(signAllParams), + clickActionButton(context)('Confirm'), + ]); + + delete result.id; + + test.expect(result).toEqual({ + jsonrpc: '2.0', + result: { hex: signedAllPsbt }, + }); + }); + + test('that only requested inputs are signed', async ({ page, context }) => { + const [result] = await Promise.all([ + initiatePsbtSigning(page)(signAtIndexParams), + clickActionButton(context)('Confirm'), + ]); + + delete result.id; + + test.expect(result).toEqual({ + jsonrpc: '2.0', + result: { hex: signedOnlyIndexZeroPsbt }, + }); + }); + + test('that the request can be signed and broadcast', async ({ page, context }) => { + const requestPromise = interceptBroadcastRequest(context); + + const [result] = await Promise.all([ + initiatePsbtSigning(page)({ ...signAllParams, broadcast: true }), + clickActionButton(context)('Confirm'), + ]); + + delete result.id; + + test.expect(result).toEqual({ + jsonrpc: '2.0', + result: { hex: signedAllPsbt }, + }); + + const request = await requestPromise; + const requestBody = request.postDataBuffer(); + test.expect(requestBody).toBeDefined(); + }); + + test('that the request to sign can be canceled', async ({ page, context }) => { + const [result] = await Promise.all([ + initiatePsbtSigning(page)(signAllParams), + clickActionButton(context)('Cancel'), + ]); + + delete result.id; + + test.expect(result).toEqual({ + jsonrpc: '2.0', + error: { + code: 4001, + message: 'User rejected signing PSBT request', + }, + }); + }); +}); From 57df9dabc1ee45041f55538d900a4f8b0e421807 Mon Sep 17 00:00:00 2001 From: kyranjamie Date: Mon, 4 Dec 2023 09:52:42 +0100 Subject: [PATCH 14/17] ci: sentry release version --- webpack/webpack.config.prod.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/webpack/webpack.config.prod.js b/webpack/webpack.config.prod.js index d060f2eef1d..78a49de03dc 100644 --- a/webpack/webpack.config.prod.js +++ b/webpack/webpack.config.prod.js @@ -48,7 +48,9 @@ config.plugins = [ // and needs the `project:releases` and `org:read` scopes authToken: sentryAuthToken, - release: packageJson.version, + release: { + name: packageJson.version, + }, }), ] : []), From 7a9260ee912e9f13324b72012396e2d989470163 Mon Sep 17 00:00:00 2001 From: kyranjamie Date: Mon, 4 Dec 2023 10:13:01 +0100 Subject: [PATCH 15/17] ci: rename sentry project to leather --- webpack/webpack.config.prod.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpack/webpack.config.prod.js b/webpack/webpack.config.prod.js index 78a49de03dc..e1bd330741e 100644 --- a/webpack/webpack.config.prod.js +++ b/webpack/webpack.config.prod.js @@ -39,7 +39,7 @@ config.plugins = [ ? [ sentryWebpackPlugin({ org: 'trust-machines', - project: 'hiro-wallet', + project: 'leather', // Specify the directory containing build artifacts include: './dist', From eb96ac2732a1ced897aa4c9c9dc01da8dd786613 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Mon, 4 Dec 2023 12:02:13 +0000 Subject: [PATCH 16/17] fix: make sure pending transactions have the correct circle colour, closes #4591 --- src/app/common/transactions/bitcoin/utils.ts | 16 -------- .../bitcoin-transaction-icon.tsx | 11 ++--- .../bitcoin-transaction-inscription-icon.tsx | 41 +------------------ .../bitcoin-transaction-item.tsx | 21 +++++----- 4 files changed, 18 insertions(+), 71 deletions(-) diff --git a/src/app/common/transactions/bitcoin/utils.ts b/src/app/common/transactions/bitcoin/utils.ts index 834520f219d..6730c435990 100644 --- a/src/app/common/transactions/bitcoin/utils.ts +++ b/src/app/common/transactions/bitcoin/utils.ts @@ -9,22 +9,6 @@ import { truncateMiddle } from '@app/ui/utils/truncate-middle'; import { BtcSizeFeeEstimator } from './fees/btc-size-fee-estimator'; -type BtcTxStatus = 'pending' | 'success'; -type BtcStatusColorMap = Record; - -const statusFromBitcoinTx = (tx: BitcoinTx): BtcTxStatus => { - if (tx.status.confirmed) return 'success'; - return 'pending'; -}; - -export const getColorFromBitcoinTx = (tx: BitcoinTx) => { - const colorMap: BtcStatusColorMap = { - pending: 'warning.label', - success: 'stacks', - }; - return colorMap[statusFromBitcoinTx(tx)] ?? 'error.label'; -}; - export function containsTaprootInput(tx: BitcoinTx) { return tx.vin.some(input => input.prevout.scriptpubkey_type === 'v1_p2tr'); } 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 ad55fd9369e..cd392b86745 100644 --- a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx +++ b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-icon.tsx @@ -2,12 +2,11 @@ import { Circle, CircleProps, Flex } from 'leather-styles/jsx'; import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model'; -import { getColorFromBitcoinTx, isBitcoinTxInbound } from '@app/common/transactions/bitcoin/utils'; +import { isBitcoinTxInbound } from '@app/common/transactions/bitcoin/utils'; import { ArrowDownIcon } from '@app/ui/components/icons/arrow-down-icon'; import { ArrowUpIcon } from '@app/ui/components/icons/arrow-up-icon'; -import { BtcIcon } from '@app/ui/components/icons/btc-icon'; -export function TxStatusIcon(props: { address: string; tx: BitcoinTx }) { +function TxStatusIcon(props: { address: string; tx: BitcoinTx }) { const { address, tx } = props; if (isBitcoinTxInbound(address, tx)) return ; return ; @@ -16,21 +15,23 @@ export function TxStatusIcon(props: { address: string; tx: BitcoinTx }) { interface TransactionIconProps extends CircleProps { transaction: BitcoinTx; btcAddress: string; + icon: React.ReactNode; } export function BitcoinTransactionIcon({ transaction, btcAddress, + icon, ...props }: TransactionIconProps) { return ( - + {icon} ; } } - -export function BitcoinTransactionInscriptionIcon({ - inscription, - transaction, - btcAddress, - ...rest -}: BitcoinTransactionInscriptionIconProps) { - return ( - - - - - - - - - ); -} diff --git a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx index 5211cff36c3..432bdc35320 100644 --- a/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx +++ b/src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx @@ -24,12 +24,13 @@ import { } from '@app/query/bitcoin/ordinals/inscription.hooks'; import { useGetInscriptionsByOutputQuery } from '@app/query/bitcoin/ordinals/inscriptions-by-param.query'; import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; +import { BtcIcon } from '@app/ui/components/icons/btc-icon'; import { CaptionDotSeparator } from '../caption-dot-separator'; import { TransactionItemLayout } from '../transaction-item/transaction-item.layout'; import { BitcoinTransactionCaption } from './bitcoin-transaction-caption'; import { BitcoinTransactionIcon } from './bitcoin-transaction-icon'; -import { BitcoinTransactionInscriptionIcon } from './bitcoin-transaction-inscription-icon'; +import { InscriptionIcon } from './bitcoin-transaction-inscription-icon'; import { BitcoinTransactionStatus } from './bitcoin-transaction-status'; import { BitcoinTransactionValue } from './bitcoin-transaction-value'; @@ -86,15 +87,7 @@ export function BitcoinTransactionItem({ transaction, ...rest }: BitcoinTransact ); const txValue = {value}; - const txIcon = inscriptionData ? ( - - ) : ( - - ); + const title = inscriptionData ? `Ordinal inscription #${inscriptionData.number}` : 'Bitcoin'; const increaseFeeButton = ( : } + transaction={transaction} + btcAddress={bitcoinAddress} + /> + } txStatus={} txTitle={} txValue={txValue} From 7b112135201e6b86221d7868183177f7c23d0a29 Mon Sep 17 00:00:00 2001 From: Edgar Khanzadian Date: Tue, 5 Dec 2023 16:09:29 +0400 Subject: [PATCH 17/17] fix: decouple choose crypto asset components and add a new lint rule --- .eslintrc.js | 1 + src/app/common/hooks/use-copy-to-clipboard.ts | 2 +- src/app/common/theme-provider.tsx | 2 +- .../common/validation/forms/fee-validators.ts | 4 +- .../bitcoin-contract-entry-point-layout.tsx | 2 +- .../components/fees-list-item.tsx | 2 +- .../components/brc20-token-asset-item.tsx | 2 +- .../choose-crypto-asset.layout.tsx | 0 .../crypto-asset-list-item.tsx | 31 +++++++++ .../crypto-asset-list.layout.tsx | 0 .../crypto-asset-list.tsx | 11 +++- .../crypto-currency-asset-icon.tsx | 0 .../fungible-token-asset-item.tsx | 2 +- .../send-btc-disabled.tsx | 0 .../crypto-currency-asset-item.tsx | 2 +- ...tacks-fungible-token-asset-item.layout.tsx | 2 +- .../stacks-fungible-token-asset-item.tsx | 2 +- src/app/components/info-card/info-card.tsx | 2 +- .../loaders/bitcoin-account-loader.tsx | 2 +- .../mnemonic-key/mnemonic-input-field.tsx | 4 +- src/app/components/tabs.tsx | 2 +- .../components/bitcoin/ordinals.tsx | 2 +- src/app/features/errors/error-boundary.tsx | 29 +++------ .../components/increase-fee-actions.tsx | 2 +- .../increase-fee-drawer.tsx | 2 +- .../request-keys/request-keys-flow.tsx | 2 +- .../components/settings-menu-item.tsx | 2 +- .../contract-preview.tsx | 2 +- .../components/switch-account-list.tsx | 2 +- .../theme-drawer/theme-list-item-layout.tsx | 2 +- .../features/theme-drawer/theme-list-item.tsx | 2 +- .../sign-in/components/sign-in.content.tsx | 2 +- .../onboarding/sign-in/mnemonic-form.tsx | 2 +- .../choose-crypto-asset.tsx | 35 +++++++++-- .../components/crypto-asset-list-item.tsx | 63 ------------------- .../form/send-form-confirmation.tsx | 2 +- .../stacks-sip10/sip10-token-send-form.tsx | 2 +- .../send-crypto-asset-form.routes.tsx | 2 +- .../components/update-action.layout.tsx | 4 +- .../blockchain/bitcoin/bitcoin-signer.ts | 6 +- src/app/ui/components/highlighter.tsx | 4 +- src/app/ui/utils/prism.tsx | 4 +- 42 files changed, 120 insertions(+), 128 deletions(-) rename src/app/{pages/send/choose-crypto-asset/components => components/crypto-assets/choose-crypto-asset}/choose-crypto-asset.layout.tsx (100%) create mode 100644 src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list-item.tsx rename src/app/{pages/send/choose-crypto-asset/components => components/crypto-assets/choose-crypto-asset}/crypto-asset-list.layout.tsx (100%) rename src/app/{pages/send/choose-crypto-asset/components => components/crypto-assets/choose-crypto-asset}/crypto-asset-list.tsx (50%) rename src/app/{pages/send/choose-crypto-asset/components => components/crypto-assets/choose-crypto-asset}/crypto-currency-asset-icon.tsx (100%) rename src/app/{pages/send/choose-crypto-asset/components => components/crypto-assets/choose-crypto-asset}/fungible-token-asset-item.tsx (96%) rename src/app/{pages/send/choose-crypto-asset/components => components/crypto-assets/choose-crypto-asset}/send-btc-disabled.tsx (100%) delete mode 100644 src/app/pages/send/choose-crypto-asset/components/crypto-asset-list-item.tsx diff --git a/.eslintrc.js b/.eslintrc.js index 8062907604a..246fd276f8f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -81,6 +81,7 @@ module.exports = { '@typescript-eslint/no-unnecessary-condition': 'off', '@typescript-eslint/consistent-type-definitions': ['error', 'interface'], '@typescript-eslint/array-type': ['error'], + '@typescript-eslint/method-signature-style': ['error', 'method'], 'no-warning-comments': [0], 'react-hooks/rules-of-hooks': 'error', diff --git a/src/app/common/hooks/use-copy-to-clipboard.ts b/src/app/common/hooks/use-copy-to-clipboard.ts index 97e02328021..45c6c11da7b 100644 --- a/src/app/common/hooks/use-copy-to-clipboard.ts +++ b/src/app/common/hooks/use-copy-to-clipboard.ts @@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'; interface UiClipboard { value: string; - onCopy: () => void; + onCopy(): void; hasCopied: boolean; } diff --git a/src/app/common/theme-provider.tsx b/src/app/common/theme-provider.tsx index 73583e2da2d..5af6e839032 100644 --- a/src/app/common/theme-provider.tsx +++ b/src/app/common/theme-provider.tsx @@ -24,7 +24,7 @@ export const getThemeLabel = (theme: UserSelectedTheme) => { const ThemeContext = createContext<{ theme: ComputedTheme; userSelectedTheme: UserSelectedTheme; - setUserSelectedTheme: (theme: UserSelectedTheme) => void; + setUserSelectedTheme(theme: UserSelectedTheme): void; }>({ // These values are not used, but are set to satisfy the context's value type. theme: 'light', diff --git a/src/app/common/validation/forms/fee-validators.ts b/src/app/common/validation/forms/fee-validators.ts index d8b2cb263e4..f24933a6e25 100644 --- a/src/app/common/validation/forms/fee-validators.ts +++ b/src/app/common/validation/forms/fee-validators.ts @@ -14,8 +14,8 @@ import { btcToSat, moneyToBaseUnit, stxToMicroStx } from '../../money/unit-conve interface FeeValidatorFactoryArgs { availableBalance?: Money; - unitConverter: (unit: string | number | BigNumber) => BigNumber; - validator: (errorMsg: string) => NumberSchema; + unitConverter(unit: string | number | BigNumber): BigNumber; + validator(errorMsg: string): NumberSchema; } function feeValidatorFactory({ availableBalance, diff --git a/src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point-layout.tsx b/src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point-layout.tsx index 8f514fc05e0..6e00b4a9e0b 100644 --- a/src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point-layout.tsx +++ b/src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point-layout.tsx @@ -16,7 +16,7 @@ interface BitcoinContractEntryPointLayoutProps { usdBalance?: string; isLoading?: boolean; cursor?: 'pointer' | 'default'; - onClick: () => void; + onClick(): void; } export function BitcoinContractEntryPointLayout(props: BitcoinContractEntryPointLayoutProps) { const { balance, caption, icon, usdBalance, isLoading, cursor, onClick } = props; diff --git a/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx b/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx index d5a71de8c12..a4369fe7c4a 100644 --- a/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx +++ b/src/app/components/bitcoin-fees-list/components/fees-list-item.tsx @@ -8,7 +8,7 @@ interface FeesListItemProps { feeRate: number; feeType: string; isSelected?: boolean; - onClick: () => void; + onClick(): void; } export function FeesListItem({ arrivesIn, diff --git a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.tsx b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.tsx index 0fe3db50c8e..131566227ba 100644 --- a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.tsx +++ b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.tsx @@ -7,7 +7,7 @@ import { Brc20TokenAssetItemLayout } from './brc20-token-asset-item.layout'; interface Brc20TokenAssetItemProps { token: Brc20Token; isPressable?: boolean; - onClick?: () => void; + onClick?(): void; } export function Brc20TokenAssetItem({ token, isPressable, onClick }: Brc20TokenAssetItemProps) { return ( diff --git a/src/app/pages/send/choose-crypto-asset/components/choose-crypto-asset.layout.tsx b/src/app/components/crypto-assets/choose-crypto-asset/choose-crypto-asset.layout.tsx similarity index 100% rename from src/app/pages/send/choose-crypto-asset/components/choose-crypto-asset.layout.tsx rename to src/app/components/crypto-assets/choose-crypto-asset/choose-crypto-asset.layout.tsx diff --git a/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list-item.tsx b/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list-item.tsx new file mode 100644 index 00000000000..e98f899f166 --- /dev/null +++ b/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list-item.tsx @@ -0,0 +1,31 @@ +import type { AllTransferableCryptoAssetBalances } from '@shared/models/crypto-asset-balance.model'; + +import { CryptoCurrencyAssetItem } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item'; + +import { CryptoCurrencyAssetIcon } from './crypto-currency-asset-icon'; +import { FungibleTokenAssetItem } from './fungible-token-asset-item'; + +interface CryptoAssetListItemProps { + assetBalance: AllTransferableCryptoAssetBalances; + onClick(): void; +} +export function CryptoAssetListItem(props: CryptoAssetListItemProps) { + const { assetBalance, onClick } = props; + const { blockchain, type } = assetBalance; + + switch (type) { + case 'crypto-currency': + return ( + } + isPressable + onClick={onClick} + /> + ); + case 'fungible-token': + return ; + default: + return null; + } +} diff --git a/src/app/pages/send/choose-crypto-asset/components/crypto-asset-list.layout.tsx b/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.layout.tsx similarity index 100% rename from src/app/pages/send/choose-crypto-asset/components/crypto-asset-list.layout.tsx rename to src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.layout.tsx diff --git a/src/app/pages/send/choose-crypto-asset/components/crypto-asset-list.tsx b/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx similarity index 50% rename from src/app/pages/send/choose-crypto-asset/components/crypto-asset-list.tsx rename to src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx index af988a18508..5f3088a60c1 100644 --- a/src/app/pages/send/choose-crypto-asset/components/crypto-asset-list.tsx +++ b/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx @@ -5,12 +5,17 @@ import { CryptoAssetListLayout } from './crypto-asset-list.layout'; interface CryptoAssetListProps { cryptoAssetBalances: AllTransferableCryptoAssetBalances[]; + onItemClick(cryptoAssetBalance: AllTransferableCryptoAssetBalances): void; } -export function CryptoAssetList({ cryptoAssetBalances }: CryptoAssetListProps) { +export function CryptoAssetList({ cryptoAssetBalances, onItemClick }: CryptoAssetListProps) { return ( - {cryptoAssetBalances.map(assetBalance => ( - + {cryptoAssetBalances.map(cryptoAssetBalance => ( + onItemClick(cryptoAssetBalance)} + assetBalance={cryptoAssetBalance} + key={cryptoAssetBalance.asset.name} + /> ))} ); diff --git a/src/app/pages/send/choose-crypto-asset/components/crypto-currency-asset-icon.tsx b/src/app/components/crypto-assets/choose-crypto-asset/crypto-currency-asset-icon.tsx similarity index 100% rename from src/app/pages/send/choose-crypto-asset/components/crypto-currency-asset-icon.tsx rename to src/app/components/crypto-assets/choose-crypto-asset/crypto-currency-asset-icon.tsx diff --git a/src/app/pages/send/choose-crypto-asset/components/fungible-token-asset-item.tsx b/src/app/components/crypto-assets/choose-crypto-asset/fungible-token-asset-item.tsx similarity index 96% rename from src/app/pages/send/choose-crypto-asset/components/fungible-token-asset-item.tsx rename to src/app/components/crypto-assets/choose-crypto-asset/fungible-token-asset-item.tsx index 200355eacc4..0ce6b98c4ff 100644 --- a/src/app/pages/send/choose-crypto-asset/components/fungible-token-asset-item.tsx +++ b/src/app/components/crypto-assets/choose-crypto-asset/fungible-token-asset-item.tsx @@ -6,7 +6,7 @@ import { StacksFungibleTokenAssetItem } from '@app/components/crypto-assets/stac interface FungibleTokenAssetItemProps extends FlexProps { assetBalance: StacksFungibleTokenAssetBalance; - onClick: () => void; + onClick(): void; } export function FungibleTokenAssetItem({ assetBalance, onClick }: FungibleTokenAssetItemProps) { const { blockchain } = assetBalance; diff --git a/src/app/pages/send/choose-crypto-asset/components/send-btc-disabled.tsx b/src/app/components/crypto-assets/choose-crypto-asset/send-btc-disabled.tsx similarity index 100% rename from src/app/pages/send/choose-crypto-asset/components/send-btc-disabled.tsx rename to src/app/components/crypto-assets/choose-crypto-asset/send-btc-disabled.tsx diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.tsx index 6f382a7e785..bddbae243ac 100644 --- a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.tsx +++ b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.tsx @@ -13,7 +13,7 @@ interface CryptoCurrencyAssetItemProps { additionalBalanceInfo?: React.ReactNode; additionalUsdBalanceInfo?: React.ReactNode; rightElement?: React.ReactNode; - onClick?: () => void; + onClick?(): void; } export function CryptoCurrencyAssetItem({ additionalBalanceInfo, diff --git a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx index fdc4753f97f..7a2fe95fee4 100644 --- a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx +++ b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx @@ -19,7 +19,7 @@ interface StacksFungibleTokenAssetItemLayoutProps extends FlexProps { imageCanonicalUri?: string; isPressable?: boolean; title: string; - onClick?: () => void; + onClick?(): void; } export function StacksFungibleTokenAssetItemLayout({ avatar, diff --git a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.tsx b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.tsx index 895720521bb..3e62de0873e 100644 --- a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.tsx +++ b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.tsx @@ -15,7 +15,7 @@ interface StacksFungibleTokenAssetItemProps extends FlexProps { assetBalance: StacksFungibleTokenAssetBalance; unanchoredAssetBalance?: Money; isPressable?: boolean; - onClick?: () => void; + onClick?(): void; } export function StacksFungibleTokenAssetItem({ assetBalance, diff --git a/src/app/components/info-card/info-card.tsx b/src/app/components/info-card/info-card.tsx index aefa2d30f86..b63f8868b7b 100644 --- a/src/app/components/info-card/info-card.tsx +++ b/src/app/components/info-card/info-card.tsx @@ -101,7 +101,7 @@ export function InfoCardAssetValue({ interface InfoCardBtnProps { icon: ReactNode; label: string; - onClick: () => void; + onClick(): void; } export function InfoCardBtn({ icon, label, onClick }: InfoCardBtnProps) { return ( diff --git a/src/app/components/loaders/bitcoin-account-loader.tsx b/src/app/components/loaders/bitcoin-account-loader.tsx index 4dd3fe014b3..48766ca5541 100644 --- a/src/app/components/loaders/bitcoin-account-loader.tsx +++ b/src/app/components/loaders/bitcoin-account-loader.tsx @@ -4,7 +4,7 @@ import { useCurrentNativeSegwitAccount } from '@app/store/accounts/blockchain/bi import { useCurrentTaprootAccount } from '@app/store/accounts/blockchain/bitcoin/taproot-account.hooks'; interface CurrentBitcoinAccountLoaderProps { - children: (data: { nativeSegwit: BitcoinAccount; taproot: BitcoinAccount }) => React.ReactNode; + children(data: { nativeSegwit: BitcoinAccount; taproot: BitcoinAccount }): React.ReactNode; } export function CurrentBitcoinAccountLoader({ children }: CurrentBitcoinAccountLoaderProps) { const nativeSegwit = useCurrentNativeSegwitAccount(); diff --git a/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx b/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx index 939598c3c7c..5d2ba8e05c7 100644 --- a/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx +++ b/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx @@ -11,8 +11,8 @@ interface InputFieldProps extends FlexProps { dataTestId?: string; name: string; value: string; - onPaste: (e: React.ClipboardEvent) => void; - onUpdateWord: (word: string) => void; + onPaste(e: React.ClipboardEvent): void; + onUpdateWord(word: string): void; hasError?: boolean; wordlist: string[]; } diff --git a/src/app/components/tabs.tsx b/src/app/components/tabs.tsx index 29a40472d9a..561ec03163b 100644 --- a/src/app/components/tabs.tsx +++ b/src/app/components/tabs.tsx @@ -16,7 +16,7 @@ export function Tabs({ }: { tabs: Tabs[]; activeTab: number; - onTabClick: (index: number) => void; + onTabClick(index: number): void; }) { return ( void; + setIsLoadingMore(isLoading: boolean): void; } export function Ordinals({ setIsLoadingMore }: OrdinalsProps) { const query = useGetInscriptionsInfiniteQuery(); diff --git a/src/app/features/errors/error-boundary.tsx b/src/app/features/errors/error-boundary.tsx index 9a6a31e3033..e4c79511cce 100644 --- a/src/app/features/errors/error-boundary.tsx +++ b/src/app/features/errors/error-boundary.tsx @@ -16,16 +16,13 @@ const changedArray = (a: unknown[] = [], b: unknown[] = []) => interface FallbackProps { error: Error; - resetErrorBoundary: (...args: unknown[]) => void; + resetErrorBoundary(...args: unknown[]): void; } interface ErrorBoundaryPropsWithComponent { - onResetKeysChange?: ( - prevResetKeys: unknown[] | undefined, - resetKeys: unknown[] | undefined - ) => void; - onReset?: (...args: unknown[]) => void; - onError?: (error: Error, info: { componentStack: string }) => void; + onResetKeysChange?(prevResetKeys: unknown[] | undefined, resetKeys: unknown[] | undefined): void; + onReset?(...args: unknown[]): void; + onError?(error: Error, info: { componentStack: string }): void; resetKeys?: unknown[]; fallback?: never; FallbackComponent: ComponentType; @@ -37,12 +34,9 @@ declare function FallbackRender( ): ReactElement | null; interface ErrorBoundaryPropsWithRender { - onResetKeysChange?: ( - prevResetKeys: unknown[] | undefined, - resetKeys: unknown[] | undefined - ) => void; - onReset?: (...args: unknown[]) => void; - onError?: (error: Error, info: { componentStack: string }) => void; + onResetKeysChange?(prevResetKeys: unknown[] | undefined, resetKeys: unknown[] | undefined): void; + onReset?(...args: unknown[]): void; + onError?(error: Error, info: { componentStack: string }): void; resetKeys?: unknown[]; fallback?: never; FallbackComponent?: never; @@ -50,12 +44,9 @@ interface ErrorBoundaryPropsWithRender { } interface ErrorBoundaryPropsWithFallback { - onResetKeysChange?: ( - prevResetKeys: unknown[] | undefined, - resetKeys: unknown[] | undefined - ) => void; - onReset?: (...args: unknown[]) => void; - onError?: (error: Error, info: { componentStack: string }) => void; + onResetKeysChange?(prevResetKeys: unknown[] | undefined, resetKeys: unknown[] | undefined): void; + onReset?(...args: unknown[]): void; + onError?(error: Error, info: { componentStack: string }): void; resetKeys?: unknown[]; fallback: ReactElement | null; FallbackComponent?: never; diff --git a/src/app/features/increase-fee-drawer/components/increase-fee-actions.tsx b/src/app/features/increase-fee-drawer/components/increase-fee-actions.tsx index a9808fa90d0..497713d5bee 100644 --- a/src/app/features/increase-fee-drawer/components/increase-fee-actions.tsx +++ b/src/app/features/increase-fee-drawer/components/increase-fee-actions.tsx @@ -7,7 +7,7 @@ import { LeatherButton } from '@app/ui/components/button'; interface IncreaseFeeActionsProps { isDisabled: boolean; - onCancel: () => void; + onCancel(): void; } export function IncreaseFeeActions(props: IncreaseFeeActionsProps) { const { onCancel, isDisabled } = props; diff --git a/src/app/features/increase-fee-drawer/increase-fee-drawer.tsx b/src/app/features/increase-fee-drawer/increase-fee-drawer.tsx index 08496aca9c2..b642400598a 100644 --- a/src/app/features/increase-fee-drawer/increase-fee-drawer.tsx +++ b/src/app/features/increase-fee-drawer/increase-fee-drawer.tsx @@ -9,7 +9,7 @@ import { Caption } from '@app/ui/components/typography/caption'; interface IncreaseFeeDrawerProps { feeForm: React.JSX.Element; - onClose: () => void; + onClose(): void; isShowing: boolean; } export function IncreaseFeeDrawer({ feeForm, onClose, isShowing }: IncreaseFeeDrawerProps) { diff --git a/src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx b/src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx index 99469358f4b..67b4f00dc8c 100644 --- a/src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx +++ b/src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx @@ -8,7 +8,7 @@ import { LedgerRequestKeysContext, LedgerRequestKeysProvider } from './ledger-re interface RequestKeysFlowProps { context: LedgerRequestKeysContext; isActionCancellableByUser: boolean; - onCancelConnectLedger?: () => void; + onCancelConnectLedger?(): void; } export function RequestKeysFlow({ context, diff --git a/src/app/features/settings-dropdown/components/settings-menu-item.tsx b/src/app/features/settings-dropdown/components/settings-menu-item.tsx index 25a35acee49..c0b0392442f 100644 --- a/src/app/features/settings-dropdown/components/settings-menu-item.tsx +++ b/src/app/features/settings-dropdown/components/settings-menu-item.tsx @@ -4,7 +4,7 @@ import { ButtonProps, LeatherButton } from '@app/ui/components/button'; interface SettingsMenuItemProps extends ButtonProps { color?: string; - onClick: (e: React.MouseEvent) => void; + onClick(e: React.MouseEvent): void; children: ReactNode; } export function SettingsMenuItem({ color, onClick, children, ...props }: SettingsMenuItemProps) { diff --git a/src/app/features/stacks-transaction-request/contract-preview.tsx b/src/app/features/stacks-transaction-request/contract-preview.tsx index 400ad664dcb..0ecec7542f5 100644 --- a/src/app/features/stacks-transaction-request/contract-preview.tsx +++ b/src/app/features/stacks-transaction-request/contract-preview.tsx @@ -10,7 +10,7 @@ interface ContractPreviewLayoutProps { contractAddress: string; contractName: string; functionName?: string; - onClick?: () => void; + onClick?(): void; } export function ContractPreviewLayout({ 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 09a8f98247d..809dccd3804 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 @@ -8,7 +8,7 @@ import { useWalletType } from '@app/common/use-wallet-type'; import { SwitchAccountListItem } from './switch-account-list-item'; interface SwitchAccountListProps { - handleClose: () => void; + handleClose(): void; currentAccountIndex: number; addressesNum: number; } diff --git a/src/app/features/theme-drawer/theme-list-item-layout.tsx b/src/app/features/theme-drawer/theme-list-item-layout.tsx index cb58d155329..65e5be98607 100644 --- a/src/app/features/theme-drawer/theme-list-item-layout.tsx +++ b/src/app/features/theme-drawer/theme-list-item-layout.tsx @@ -5,7 +5,7 @@ import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon'; interface ThemeListItemProps { themeLabel: string; isActive: boolean; - onThemeItemSelect: () => void; + onThemeItemSelect(): void; } export function ThemeListItemLayout({ themeLabel, diff --git a/src/app/features/theme-drawer/theme-list-item.tsx b/src/app/features/theme-drawer/theme-list-item.tsx index a91513eb57c..6437bda0a9e 100644 --- a/src/app/features/theme-drawer/theme-list-item.tsx +++ b/src/app/features/theme-drawer/theme-list-item.tsx @@ -6,7 +6,7 @@ import { ThemeListItemLayout } from './theme-list-item-layout'; interface ThemeListItemProps { theme: UserSelectedTheme; - onThemeSelected: (theme: UserSelectedTheme) => void; + onThemeSelected(theme: UserSelectedTheme): void; isActive: boolean; } export function ThemeListItem({ theme, onThemeSelected, isActive }: ThemeListItemProps) { diff --git a/src/app/pages/onboarding/sign-in/components/sign-in.content.tsx b/src/app/pages/onboarding/sign-in/components/sign-in.content.tsx index b3782f7898a..f88640bb8cf 100644 --- a/src/app/pages/onboarding/sign-in/components/sign-in.content.tsx +++ b/src/app/pages/onboarding/sign-in/components/sign-in.content.tsx @@ -6,7 +6,7 @@ export function SignInContent({ onClick, twentyFourWordMode, }: { - onClick: () => void; + onClick(): void; twentyFourWordMode: boolean; }): React.JSX.Element { return ( diff --git a/src/app/pages/onboarding/sign-in/mnemonic-form.tsx b/src/app/pages/onboarding/sign-in/mnemonic-form.tsx index f4c2e6f6029..594cc3e95e1 100644 --- a/src/app/pages/onboarding/sign-in/mnemonic-form.tsx +++ b/src/app/pages/onboarding/sign-in/mnemonic-form.tsx @@ -20,7 +20,7 @@ import { validationSchema } from '../../../components/secret-key/mnemonic-key/ut interface MnemonicFormProps { mnemonic: (string | null)[]; - setMnemonic: (mnemonic: (string | null)[]) => void; + setMnemonic(mnemonic: (string | null)[]): void; twentyFourWordMode: boolean; } export function MnemonicForm({ mnemonic, setMnemonic, twentyFourWordMode }: MnemonicFormProps) { diff --git a/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx b/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx index d5a259807b7..2ec651e6836 100644 --- a/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx +++ b/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx @@ -1,23 +1,30 @@ import { useCallback } from 'react'; +import toast from 'react-hot-toast'; +import { useNavigate } from 'react-router-dom'; + +import { AllTransferableCryptoAssetBalances } from '@shared/models/crypto-asset-balance.model'; +import { RouteUrls } from '@shared/route-urls'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { useAllTransferableCryptoAssetBalances } from '@app/common/hooks/use-transferable-asset-balances.hooks'; import { useWalletType } from '@app/common/use-wallet-type'; import { Brc20TokensLoader } from '@app/components/brc20-tokens-loader'; +import { Brc20TokenAssetList } from '@app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list'; +import { ChooseCryptoAssetLayout } from '@app/components/crypto-assets/choose-crypto-asset/choose-crypto-asset.layout'; +import { CryptoAssetList } from '@app/components/crypto-assets/choose-crypto-asset/crypto-asset-list'; import { ModalHeader } from '@app/components/modal-header'; +import { useConfigBitcoinSendEnabled } from '@app/query/common/remote-config/remote-config.query'; import { useHasCurrentBitcoinAccount } from '@app/store/accounts/blockchain/bitcoin/bitcoin.hooks'; import { useHasStacksLedgerKeychain } from '@app/store/accounts/blockchain/stacks/stacks.hooks'; -import { Brc20TokenAssetList } from '../../../components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list'; -import { ChooseCryptoAssetLayout } from './components/choose-crypto-asset.layout'; -import { CryptoAssetList } from './components/crypto-asset-list'; - export function ChooseCryptoAsset() { const allTransferableCryptoAssetBalances = useAllTransferableCryptoAssetBalances(); const { whenWallet } = useWalletType(); const hasBitcoinLedgerKeys = useHasCurrentBitcoinAccount(); const hasStacksLedgerKeys = useHasStacksLedgerKeychain(); + const navigate = useNavigate(); + const isBitcoinSendEnabled = useConfigBitcoinSendEnabled(); const checkBlockchainAvailable = useCallback( (symbol: string) => { @@ -34,9 +41,29 @@ export function ChooseCryptoAsset() { useRouteHeader(); + function navigateToSendForm(cryptoAssetBalance: AllTransferableCryptoAssetBalances) { + const { asset } = cryptoAssetBalance; + if (asset.symbol === 'BTC' && !isBitcoinSendEnabled) { + return navigate(RouteUrls.SendBtcDisabled); + } + const symbol = asset.symbol === '' ? asset.contractAssetName : asset.symbol.toLowerCase(); + + if (cryptoAssetBalance.type === 'fungible-token') { + const asset = cryptoAssetBalance.asset; + if (!asset.contractId) { + toast.error('Unable to find contract id'); + return navigate('..'); + } + const contractId = `${asset.contractId.split('::')[0]}`; + return navigate(`${RouteUrls.SendCryptoAsset}/${symbol}/${contractId}`); + } + navigate(`${RouteUrls.SendCryptoAsset}/${symbol}`); + } + return ( navigateToSendForm(cryptoAssetBalance)} cryptoAssetBalances={allTransferableCryptoAssetBalances.filter(asset => whenWallet({ ledger: checkBlockchainAvailable(asset.blockchain), diff --git a/src/app/pages/send/choose-crypto-asset/components/crypto-asset-list-item.tsx b/src/app/pages/send/choose-crypto-asset/components/crypto-asset-list-item.tsx deleted file mode 100644 index 7f444bb355a..00000000000 --- a/src/app/pages/send/choose-crypto-asset/components/crypto-asset-list-item.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { toast } from 'react-hot-toast'; -import { useNavigate } from 'react-router-dom'; - -import type { - AllTransferableCryptoAssetBalances, - StacksFungibleTokenAssetBalance, -} from '@shared/models/crypto-asset-balance.model'; -import { RouteUrls } from '@shared/route-urls'; - -import { CryptoCurrencyAssetItem } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item'; -import { useConfigBitcoinSendEnabled } from '@app/query/common/remote-config/remote-config.query'; - -import { CryptoCurrencyAssetIcon } from './crypto-currency-asset-icon'; -import { FungibleTokenAssetItem } from './fungible-token-asset-item'; - -interface CryptoAssetListItemProps { - assetBalance: AllTransferableCryptoAssetBalances; -} -export function CryptoAssetListItem(props: CryptoAssetListItemProps) { - const { assetBalance } = props; - const { blockchain, type, asset } = assetBalance; - const navigate = useNavigate(); - const isBitcoinSendEnabled = useConfigBitcoinSendEnabled(); - - function navigateToSendForm({ isFtToken = false }: { isFtToken: boolean }) { - if (asset.symbol === 'BTC' && !isBitcoinSendEnabled) { - return navigate(RouteUrls.SendBtcDisabled); - } - const symbol = asset.symbol === '' ? asset.contractAssetName : asset.symbol.toLowerCase(); - - if (isFtToken) { - const asset = (assetBalance as StacksFungibleTokenAssetBalance).asset; - if (!asset.contractId) { - toast.error('Unable to find contract id'); - return navigate('..'); - } - const contractId = `${asset.contractId.split('::')[0]}`; - return navigate(`${RouteUrls.SendCryptoAsset}/${symbol}/${contractId}`); - } - navigate(`${RouteUrls.SendCryptoAsset}/${symbol}`); - } - - switch (type) { - case 'crypto-currency': - return ( - } - isPressable - onClick={() => navigateToSendForm({ isFtToken: false })} - /> - ); - case 'fungible-token': - return ( - navigateToSendForm({ isFtToken: true })} - /> - ); - default: - return null; - } -} diff --git a/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx index 9f1f304c635..a98a681fb66 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx @@ -27,7 +27,7 @@ interface SendFormConfirmationProps { memoDisplayText: string; isLoading: boolean; feeWarningTooltip?: React.ReactNode; - onBroadcastTransaction: () => void; + onBroadcastTransaction(): void; } export function SendFormConfirmation({ txValue, diff --git a/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/sip10-token-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/sip10-token-send-form.tsx index 1ce202aac31..a51f86323a4 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/sip10-token-send-form.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/stacks-sip10/sip10-token-send-form.tsx @@ -16,7 +16,7 @@ export function Sip10TokenSendForm() { } interface Sip10TokenSendFormLoaderProps { - children: (data: { symbol: string; contractId: string }) => React.JSX.Element; + children(data: { symbol: string; contractId: string }): React.JSX.Element; } function Sip10TokenSendFormLoader({ children }: Sip10TokenSendFormLoaderProps) { const { symbol, contractId } = useParams(); diff --git a/src/app/pages/send/send-crypto-asset-form/send-crypto-asset-form.routes.tsx b/src/app/pages/send/send-crypto-asset-form/send-crypto-asset-form.routes.tsx index 4db89f85939..7bd95d10a71 100644 --- a/src/app/pages/send/send-crypto-asset-form/send-crypto-asset-form.routes.tsx +++ b/src/app/pages/send/send-crypto-asset-form/send-crypto-asset-form.routes.tsx @@ -4,6 +4,7 @@ import { Route } from 'react-router-dom'; import { RouteUrls } from '@shared/route-urls'; import { BroadcastErrorDrawer } from '@app/components/broadcast-error-drawer/broadcast-error-drawer'; +import { SendBtcDisabled } from '@app/components/crypto-assets/choose-crypto-asset/send-btc-disabled'; import { FullPageWithHeaderLoadingSpinner } from '@app/components/loading-spinner'; import { EditNonceDrawer } from '@app/features/edit-nonce-drawer/edit-nonce-drawer'; import { ledgerBitcoinTxSigningRoutes } from '@app/features/ledger/flows/bitcoin-tx-signing/ledger-bitcoin-sign-tx-container'; @@ -12,7 +13,6 @@ import { AccountGate } from '@app/routes/account-gate'; import { BroadcastError } from '../broadcast-error/broadcast-error'; import { ChooseCryptoAsset } from '../choose-crypto-asset/choose-crypto-asset'; -import { SendBtcDisabled } from '../choose-crypto-asset/components/send-btc-disabled'; import { SendContainer } from '../send-container'; import { Brc20SentSummary } from '../sent-summary/brc20-sent-symmary'; import { BtcSentSummary } from '../sent-summary/btc-sent-summary'; 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 e6e80dd5ac1..21722a58e1d 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 @@ -4,8 +4,8 @@ import { HStack } from 'leather-styles/jsx'; import { LeatherButton } from '@app/ui/components/button'; interface UpdateActionLayoutProps { - onUpdateProfile: () => Promise; - onCancel: () => void; + onUpdateProfile(): Promise; + onCancel(): void; isLoading: boolean; } export function UpdateActionLayout({ diff --git a/src/app/store/accounts/blockchain/bitcoin/bitcoin-signer.ts b/src/app/store/accounts/blockchain/bitcoin/bitcoin-signer.ts index e7e2b1dec25..f51466a26bf 100644 --- a/src/app/store/accounts/blockchain/bitcoin/bitcoin-signer.ts +++ b/src/app/store/accounts/blockchain/bitcoin/bitcoin-signer.ts @@ -104,9 +104,9 @@ export function bitcoinAddressIndexSignerFactory unknown; - mainnetKeychainFn: (accountIndex: number) => BitcoinAccount | undefined; - testnetKeychainFn: (accountIndex: number) => BitcoinAccount | undefined; + paymentFn(keychain: HDKey, network: BitcoinNetworkModes): unknown; + mainnetKeychainFn(accountIndex: number): BitcoinAccount | undefined; + testnetKeychainFn(accountIndex: number): BitcoinAccount | undefined; extendedPublicKeyVersions?: Versions; } function createSignersForAllNetworkTypes({ diff --git a/src/app/ui/components/highlighter.tsx b/src/app/ui/components/highlighter.tsx index 1fac3f2b1a5..8e6f0592284 100644 --- a/src/app/ui/components/highlighter.tsx +++ b/src/app/ui/components/highlighter.tsx @@ -137,8 +137,8 @@ type LanguageDict = { [lang in Language]: PrismGrammar }; interface PrismLib { languages: LanguageDict; - tokenize: (code: string, grammar: PrismGrammar, language: Language) => PrismToken[] | string[]; - highlight: (code: string, grammar: PrismGrammar, language: Language) => string; + tokenize(code: string, grammar: PrismGrammar, language: Language): PrismToken[] | string[]; + highlight(code: string, grammar: PrismGrammar, language: Language): string; } export interface HighlighterProps { diff --git a/src/app/ui/utils/prism.tsx b/src/app/ui/utils/prism.tsx index 881a64061d7..e4ae2112869 100644 --- a/src/app/ui/utils/prism.tsx +++ b/src/app/ui/utils/prism.tsx @@ -43,8 +43,8 @@ export interface RenderProps { tokens: GrammaticalToken[][]; className: string; style: CSSProperties; - getLineProps: (input: LineInputProps) => LineOutputProps; - getTokenProps: (input: GrammaticalTokenInputProps) => GrammaticalTokenOutputProps; + getLineProps(input: LineInputProps): LineOutputProps; + getTokenProps(input: GrammaticalTokenInputProps): GrammaticalTokenOutputProps; } export type GetGrammaticalTokenProps = (