diff --git a/src/app/components/alertMessage/index.tsx b/src/app/components/alertMessage/index.tsx
index 6287416aa..1621bdbdf 100644
--- a/src/app/components/alertMessage/index.tsx
+++ b/src/app/components/alertMessage/index.tsx
@@ -1,6 +1,8 @@
import Cross from '@assets/img/dashboard/X.svg';
import ActionButton from '@components/button';
+import Button from '@ui-library/button';
import Checkbox from '@ui-library/checkbox';
+import { useEffect, useRef } from 'react';
import styled from 'styled-components';
const Container = styled.div((props) => ({
@@ -75,7 +77,7 @@ const OuterContainer = styled.div((props) => ({
opacity: 0.6,
}));
-interface Props {
+type Props = {
onClose: () => void;
title: string;
description: string;
@@ -87,7 +89,7 @@ interface Props {
onSecondButtonClick?: () => void;
tickMarkButtonClick?: (e: React.ChangeEvent) => void;
tickMarkButtonChecked?: boolean;
-}
+};
function AlertMessage({
onClose,
@@ -102,13 +104,30 @@ function AlertMessage({
tickMarkButtonClick,
tickMarkButtonChecked,
}: Props) {
+ const buttonRef = useRef(null);
+ const previousFocusRef = useRef(null);
+
+ useEffect(() => {
+ previousFocusRef.current = document.activeElement as HTMLElement;
+
+ if (buttonRef.current) {
+ buttonRef.current.focus();
+ }
+
+ return () => {
+ if (previousFocusRef.current) {
+ previousFocusRef.current.focus();
+ }
+ };
+ }, []);
+
return (
<>
{title}
-
+
@@ -127,7 +146,7 @@ function AlertMessage({
)}
{!onSecondButtonClick && onButtonClick && (
-
)}
{tickMarkButtonText && tickMarkButtonClick && (
diff --git a/src/app/screens/signBatchPsbtRequest/index.styled.ts b/src/app/components/batchPsbtSigning/index.styled.ts
similarity index 74%
rename from src/app/screens/signBatchPsbtRequest/index.styled.ts
rename to src/app/components/batchPsbtSigning/index.styled.ts
index 79c35ffb1..efcd21c01 100644
--- a/src/app/screens/signBatchPsbtRequest/index.styled.ts
+++ b/src/app/components/batchPsbtSigning/index.styled.ts
@@ -1,5 +1,5 @@
import BottomModal from '@components/bottomModal';
-import { StickyHorizontalSplitButtonContainer } from '@ui-library/common.styled';
+import Button from '@ui-library/button';
import styled from 'styled-components';
export const OuterContainer = styled.div`
@@ -25,6 +25,14 @@ export const ModalContainer = styled(Container)({
marginTop: 0,
});
+export const HeaderContainer = styled.div((props) => ({
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ marginBottom: props.theme.space.l,
+ alignItems: 'center',
+}));
+
export const LoaderContainer = styled.div((props) => ({
display: 'flex',
flex: 1,
@@ -33,15 +41,9 @@ export const LoaderContainer = styled.div((props) => ({
marginTop: props.theme.space.l,
}));
-export const TransparentButtonContainer = styled.div((props) => ({
- marginRight: props.theme.space.s,
- width: '100%',
-}));
-
export const ReviewTransactionText = styled.h1((props) => ({
...props.theme.headline_s,
color: props.theme.colors.white_0,
- marginBottom: props.theme.space.l,
textAlign: 'left',
}));
@@ -67,16 +69,21 @@ export const StyledSheet = styled(BottomModal)`
flex-direction: column;
height: 100%;
max-height: 100% !important;
- background-color: #181818 !important;
+ background-color: ${(props) => props.theme.colors.elevation0} !important;
`;
-export const TxReviewModalControls = styled.div((props) => ({
+export const ButtonsContainer = styled.div((props) => ({
display: 'flex',
columnGap: props.theme.space.s,
padding: `${props.theme.space.l} ${props.theme.space.m}`,
}));
-export const ButtonsContainer = styled(StickyHorizontalSplitButtonContainer)`
- padding-left: ${(props) => props.theme.space.m};
- padding-right: ${(props) => props.theme.space.m};
-`;
+export const InlineButtonsContainer = styled(ButtonsContainer)((props) => ({
+ columnGap: props.theme.space.xs,
+ padding: 'inherit',
+}));
+
+export const SmallButton = styled(Button)(() => ({
+ minWidth: 44,
+ padding: 'initial',
+}));
diff --git a/src/app/components/batchPsbtSigning/index.tsx b/src/app/components/batchPsbtSigning/index.tsx
new file mode 100644
index 000000000..f3cc46c65
--- /dev/null
+++ b/src/app/components/batchPsbtSigning/index.tsx
@@ -0,0 +1,378 @@
+import AccountHeaderComponent from '@components/accountHeader';
+import { TxSummaryContext } from '@components/confirmBtcTransaction/hooks/useTxSummaryContext';
+import ConfirmBatchBtcTransactions from '@components/confirmBtcTransaction/indexBatch';
+import TransactionSummary from '@components/confirmBtcTransaction/transactionSummary';
+import LedgerSteps from '@components/ledgerSteps';
+import LoadingTransactionStatus from '@components/loadingTransactionStatus';
+import type { ConfirmationStatus } from '@components/loadingTransactionStatus/circularSvgAnimation';
+import useSelectedAccount from '@hooks/useSelectedAccount';
+import useTrackMixPanelPageViewed from '@hooks/useTrackMixPanelPageViewed';
+import useTransactionContext from '@hooks/useTransactionContext';
+import useWalletSelector from '@hooks/useWalletSelector';
+import { ArrowLeft, ArrowRight } from '@phosphor-icons/react';
+import type { SignMultiplePsbtPayload } from '@sats-connect/core';
+import {
+ AnalyticsEvents,
+ btcTransaction,
+ extractViewSummary,
+ type AggregatedSummary,
+ type Transport,
+ type UserTransactionSummary,
+} from '@secretkeylabs/xverse-core';
+import Button from '@ui-library/button';
+import Sheet from '@ui-library/sheet';
+import Spinner from '@ui-library/spinner';
+import { isLedgerAccount } from '@utils/helper';
+import { trackMixPanel } from '@utils/mixpanel';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import {
+ BundleLinkContainer,
+ BundleLinkText,
+ ButtonsContainer,
+ Container,
+ HeaderContainer,
+ InlineButtonsContainer,
+ LoaderContainer,
+ ModalContainer,
+ OuterContainer,
+ ReviewTransactionText,
+ SmallButton,
+ StyledSheet,
+} from './index.styled';
+
+type ParsedPsbt = {
+ extractedSummary: UserTransactionSummary | AggregatedSummary;
+ summary: btcTransaction.PsbtSummary;
+};
+
+interface BatchPsbtSigningProps {
+ psbts: SignMultiplePsbtPayload[];
+ onSigned: (signedPsbts: string[]) => void | Promise;
+ onCancel: () => void;
+ onPostSignDone: () => void;
+}
+
+function BatchPsbtSigning({ onSigned, psbts, onCancel, onPostSignDone }: BatchPsbtSigningProps) {
+ const selectedAccount = useSelectedAccount();
+ const { network } = useWalletSelector();
+ const navigate = useNavigate();
+ const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
+ const txnContext = useTransactionContext();
+ useTrackMixPanelPageViewed();
+
+ const [isSigning, setIsSigning] = useState(false);
+ const [isSigningComplete, setIsSigningComplete] = useState(false);
+ const [signingPsbtIndex, setSigningPsbtIndex] = useState(1);
+ const [currentPsbtIndex, setCurrentPsbtIndex] = useState(0);
+ const [reviewTransaction, setReviewTransaction] = useState(false);
+ const [isLoading, setIsLoading] = useState(true);
+ const [parsedPsbts, setParsedPsbts] = useState([]);
+ const [isLedgerModalVisible, setIsLedgerModalVisible] = useState(false);
+
+ const individualTxSummaryContext = useMemo(
+ () => ({
+ extractedTxSummary: parsedPsbts[currentPsbtIndex]?.extractedSummary,
+ }),
+ [parsedPsbts, currentPsbtIndex],
+ );
+
+ useEffect(() => {
+ const handlePsbtParsing = async (psbt: SignMultiplePsbtPayload): Promise => {
+ try {
+ const parsedPsbt = new btcTransaction.EnhancedPsbt(txnContext, psbt.psbtBase64);
+ const summary = await parsedPsbt.getSummary();
+ const extractedSummary = await extractViewSummary(txnContext, summary, network.type);
+ return { extractedSummary, summary };
+ } catch (err) {
+ throw new Error('PSBT parsing failed');
+ }
+ };
+
+ (async () => {
+ const parsedPsbtsRes = await Promise.allSettled(psbts.map(handlePsbtParsing));
+ setIsLoading(false);
+
+ const index = parsedPsbtsRes.findIndex((item) => item.status === 'rejected');
+ if (index !== -1) {
+ navigate('/tx-status', {
+ state: {
+ txid: '',
+ currency: 'BTC',
+ errorTitle: t('PSBT_CANT_PARSE_ERROR_TITLE'),
+ error: t('PSBT_INDEX_CANT_PARSE_ERROR_DESCRIPTION', { index }),
+ browserTx: true,
+ },
+ });
+ return;
+ }
+
+ const validParsedPsbts = parsedPsbtsRes.map(
+ (item) => (item.status === 'fulfilled' && item.value) as ParsedPsbt,
+ );
+ setParsedPsbts(validParsedPsbts);
+ })();
+ }, [psbts, txnContext, network, navigate, t]);
+
+ const onSignPsbtConfirmed = async (transport?: Transport) => {
+ try {
+ if (isLedgerAccount(selectedAccount) && !transport) {
+ setIsLedgerModalVisible(true);
+ return;
+ }
+
+ setIsSigning(true);
+
+ const signedPsbts: string[] = [];
+
+ for (let i = 0; i < psbts.length; i++) {
+ const psbt = psbts[i];
+ const enhancedPsbt = new btcTransaction.EnhancedPsbt(
+ txnContext,
+ psbt.psbtBase64,
+ psbt.inputsToSign,
+ );
+
+ const psbtBase64 = await enhancedPsbt.getSignedPsbtBase64({
+ finalize: false,
+ ledgerTransport: transport,
+ });
+ signedPsbts.push(psbtBase64);
+
+ if (i !== psbts.length - 1) {
+ setSigningPsbtIndex((prevIndex) => prevIndex + 1);
+ }
+ }
+
+ trackMixPanel(AnalyticsEvents.TransactionConfirmed, {
+ protocol: 'bitcoin',
+ action: 'sign-psbt',
+ wallet_type: selectedAccount.accountType || 'software',
+ batch: psbts.length,
+ });
+ setIsSigningComplete(true);
+ setIsSigning(false);
+
+ onSigned(signedPsbts);
+ setIsLedgerModalVisible(false);
+ } catch (err) {
+ setIsSigning(false);
+ setIsSigningComplete(false);
+
+ if (err instanceof Error) {
+ navigate('/tx-status', {
+ state: {
+ txid: '',
+ currency: 'BTC',
+ errorTitle: t('PSBT_CANT_SIGN_ERROR_TITLE'),
+ error: err.message,
+ browserTx: true,
+ },
+ });
+ }
+ }
+ };
+
+ const renderSign = isSigning || isSigningComplete;
+
+ const renderPreSign = () => {
+ if (renderSign) return null;
+
+ const visitedInputs = new Set();
+ const hasDuplicateInputs = parsedPsbts.some((parsedPsbt) => {
+ const inputLocations = parsedPsbt.summary.inputs.map(
+ (input) => input.extendedUtxo.utxo.txid + input.extendedUtxo.utxo.vout,
+ );
+ const hasDuplicate = inputLocations.some((input) => {
+ if (visitedInputs.has(input)) {
+ return true;
+ }
+ visitedInputs.add(input);
+ return false;
+ });
+ return hasDuplicate;
+ });
+
+ const renderBody = () => {
+ if (isLoading) {
+ return (
+
+
+ );
+ }
+
+ if (hasDuplicateInputs) {
+ // if there are duplicate inputs on the individual transactions, we won't show a summary
+ // and will have to ask the user to review each txn individually
+ return null;
+ }
+
+ return (
+ <>
+
+
+
+ {t('SIGN_TRANSACTIONS', { count: parsedPsbts.length })}
+
+ setReviewTransaction(true)}>
+ {t('REVIEW_ALL')}
+
+
+
+
+
+
+
+ );
+ };
+
+ const onReviewDone = () => {
+ setReviewTransaction(false);
+ setCurrentPsbtIndex(0);
+ };
+
+ return (
+ <>
+
+
+
+
+
+ {t('TRANSACTION')} {currentPsbtIndex + 1}/{parsedPsbts.length}
+
+ {hasDuplicateInputs && (
+
+ {
+ setCurrentPsbtIndex((prevIndex) => prevIndex - 1);
+ }}
+ icon={ {
+ setCurrentPsbtIndex((prevIndex) => prevIndex + 1);
+ }}
+ icon={
+ )}
+
+ {!!parsedPsbts[currentPsbtIndex] && (
+
+
+ )}
+
+
+
+ {hasDuplicateInputs && (
+ <>
+
+
+
+
+ );
+ };
+
+ const renderSigning = () => {
+ if (!renderSign || (!isSigningComplete && isLedgerModalVisible)) return null;
+
+ const signingStatus: ConfirmationStatus = isSigningComplete ? 'SUCCESS' : 'LOADING';
+ return (
+ setIsLedgerModalVisible(false)}>
+ {isLedgerModalVisible && (
+
+
+ );
+}
+
+export default BatchPsbtSigning;
diff --git a/src/app/components/bottomModal/index.tsx b/src/app/components/bottomModal/index.tsx
index 4e27454c1..724522c74 100644
--- a/src/app/components/bottomModal/index.tsx
+++ b/src/app/components/bottomModal/index.tsx
@@ -32,7 +32,7 @@ type Props = {
header: string;
visible: boolean;
children: React.ReactNode;
- onClose: () => void;
+ onClose?: () => void;
overlayStylesOverriding?: {};
contentStylesOverriding?: {};
className?: string;
@@ -86,9 +86,11 @@ function BottomModal({
>
{header}
-
-
+ {onClose && (
+
+
+ )}
{children}
diff --git a/src/app/components/btcAddressTypeLabel/index.tsx b/src/app/components/btcAddressTypeLabel/index.tsx
new file mode 100644
index 000000000..6126bc00d
--- /dev/null
+++ b/src/app/components/btcAddressTypeLabel/index.tsx
@@ -0,0 +1,84 @@
+import * as btc from '@scure/btc-signer';
+import type { BtcAddressType, NetworkType } from '@secretkeylabs/xverse-core';
+import { useTranslation } from 'react-i18next';
+import { Tooltip } from 'react-tooltip';
+import styled from 'styled-components';
+
+const LabelContainer = styled.p((props) => ({
+ ...props.theme.typography.body_medium_s,
+ color: 'white_0',
+ backgroundColor: props.theme.colors.white_900,
+ borderRadius: '6px',
+ padding: '3px 8px',
+}));
+
+const labelMap: Record = {
+ native: 'Native SegWit',
+ nested: 'Nested SegWit',
+ taproot: 'Ordinals',
+};
+
+// TODO: centralize this tooltip with the styles
+const StyledTooltip = styled(Tooltip)`
+ ${(props) => props.theme.typography.body_bold_m}
+ max-width: 200px;
+ background-color: ${(props) => props.theme.colors.white_0};
+ color: #12151e;
+ border-radius: ${(props) => props.theme.space.s};
+ padding: 10px 12px;
+`;
+
+type BtcAddressTypeLabelProps = {
+ addressType: BtcAddressType;
+};
+
+export function BtcAddressTypeLabel({ addressType }: BtcAddressTypeLabelProps) {
+ const { t } = useTranslation('translation', { keyPrefix: 'INFORMATION' });
+ if (addressType === 'taproot') {
+ return (
+ <>
+ {labelMap[addressType]}
+
+ {t('ORDINALS_ADDRESS_TOOLTIP')}
+
+
+ );
+ }
+ return {labelMap[addressType]} ;
+}
+
+type BtcAddressTypeForAddressLabelProps = {
+ address: string;
+ network: NetworkType;
+};
+
+export function BtcAddressTypeForAddressLabel({
+ address,
+ network,
+}: BtcAddressTypeForAddressLabelProps) {
+ try {
+ const addressMetadata = btc
+ .Address(network === 'Mainnet' ? btc.NETWORK : btc.TEST_NETWORK)
+ .decode(address);
+
+ let addressType: BtcAddressType;
+
+ switch (addressMetadata.type) {
+ case 'sh':
+ addressType = 'nested';
+ break;
+ case 'wpkh':
+ addressType = 'native';
+ break;
+ case 'tr':
+ addressType = 'taproot';
+ break;
+ default:
+ return null;
+ }
+
+ return
{children}
-
- {itemId}
-
+
+ {(inscriptionStarred || nftStarred) && (
+
+ {itemId}
+
+
{itemSubText && (
{itemSubText}
diff --git a/src/app/components/confirmBtcTransaction/hooks/useExtractTxSummary.ts b/src/app/components/confirmBtcTransaction/hooks/useExtractTxSummary.ts
new file mode 100644
index 000000000..325d83128
--- /dev/null
+++ b/src/app/components/confirmBtcTransaction/hooks/useExtractTxSummary.ts
@@ -0,0 +1,34 @@
+import useTransactionContext from '@hooks/useTransactionContext';
+import type { TransactionSummary } from '@screens/sendBtc/helpers';
+import {
+ btcTransaction,
+ extractViewSummary,
+ type AggregatedSummary,
+ type NetworkType,
+ type UserTransactionSummary,
+} from '@secretkeylabs/xverse-core';
+import { useEffect, useState } from 'react';
+
+export default function useExtractTxSummary(
+ network: NetworkType,
+ summary?: TransactionSummary | btcTransaction.PsbtSummary,
+) {
+ const [data, setData] = useState(
+ undefined,
+ );
+ const [isLoading, setIsLoading] = useState(false);
+
+ const context = useTransactionContext();
+ useEffect(() => {
+ if (!summary) return;
+
+ setIsLoading(true);
+ extractViewSummary(context, summary, network)
+ .then((extractedSummary) => {
+ setData(extractedSummary);
+ })
+ .finally(() => setIsLoading(false));
+ }, [context, network, summary]);
+
+ return { data, isLoading };
+}
diff --git a/src/app/components/confirmBtcTransaction/hooks/useParsedTxSummaryContext.ts b/src/app/components/confirmBtcTransaction/hooks/useParsedTxSummaryContext.ts
deleted file mode 100644
index e0bbf70cc..000000000
--- a/src/app/components/confirmBtcTransaction/hooks/useParsedTxSummaryContext.ts
+++ /dev/null
@@ -1,278 +0,0 @@
-import {
- getInputsWithAssetsFromUserAddress,
- getNetAmount,
- getOutputsWithAssetsFromUserAddress,
- getOutputsWithAssetsToUserAddress,
- isScriptOutput,
-} from '@components/confirmBtcTransaction/utils';
-import useSelectedAccount from '@hooks/useSelectedAccount';
-import useWalletSelector from '@hooks/useWalletSelector';
-import type { TransactionSummary } from '@screens/sendBtc/helpers';
-import {
- type Brc20Definition,
- type btcTransaction,
- type RuneSummary,
- type RuneSummaryActions,
-} from '@secretkeylabs/xverse-core';
-import { createContext, useContext } from 'react';
-import type { Color } from 'theme';
-
-export type ParsedTxSummaryContextProps = {
- summary?: TransactionSummary | btcTransaction.PsbtSummary;
- runeSummary?: RuneSummary | RuneSummaryActions;
- brc20Summary?: Brc20Definition & { status: string; statusColor: Color };
-};
-
-export const ParsedTxSummaryContext = createContext({
- summary: undefined,
- runeSummary: undefined,
- brc20Summary: undefined,
-});
-
-type BundledOutputs = Record<
- string,
- {
- outputs: (btcTransaction.TransactionOutput | btcTransaction.TransactionPubKeyOutput)[];
- netBtcAmount: number;
- runeTransfers: RuneSummary['transfers'];
- }
->;
-
-export const useParsedTxSummaryContext = (): {
- summary:
- | (TransactionSummary & { dustFiltered?: boolean })
- | btcTransaction.PsbtSummary
- | undefined;
- runeSummary: RuneSummary | RuneSummaryActions | undefined;
- brc20Summary: (Brc20Definition & { status: string; statusColor: Color }) | undefined;
- hasExternalInputs: boolean;
- isUnconfirmedInput: boolean;
- showCenotaphCallout: boolean;
- netBtcAmount: number;
- hasInsufficientRunes: boolean;
- hasSigHashSingle: boolean;
- transactionIsFinal: boolean;
- hasOutputScript: boolean;
- hasSigHashNone: boolean;
- validMintingRune: undefined | boolean;
- showSendSection: boolean;
- showTransferSection: boolean;
- showReceiveSection: boolean;
- sendSection: {
- bundledOutputs: BundledOutputs;
- inscriptionsFromPayment: btcTransaction.IOInscription[];
- satributesFromPayment: btcTransaction.IOSatribute[];
- };
- transferSection: {
- showBtcAmount: boolean;
- showRuneTransfers: boolean;
- outputsFromOrdinal: (
- | btcTransaction.TransactionOutput
- | btcTransaction.TransactionPubKeyOutput
- )[];
- inputsFromOrdinal: btcTransaction.EnhancedInput[];
- inscriptionsFromPayment: btcTransaction.IOInscription[];
- satributesFromPayment: btcTransaction.IOSatribute[];
- };
- receiveSection: {
- showBtcAmount: boolean;
- showOrdinalSection: boolean;
- showPaymentSection: boolean;
- outputsToOrdinal: btcTransaction.TransactionOutput[];
- showPaymentRunes: boolean;
- ordinalRuneReceipts: RuneSummary['receipts'];
- inscriptionsRareSatsInPayment: btcTransaction.TransactionOutput[];
- outputsToPayment: btcTransaction.TransactionOutput[];
- showOrdinalRunes: boolean;
- paymentRuneReceipts: RuneSummary['receipts'];
- };
-} => {
- const { summary, runeSummary, brc20Summary } = useContext(ParsedTxSummaryContext);
- const { btcAddress, ordinalsAddress } = useSelectedAccount();
- const { hasActivatedRareSatsKey } = useWalletSelector();
- const showCenotaphCallout = !!summary?.runeOp?.Cenotaph?.flaws;
- const hasInsufficientRunes =
- runeSummary?.transfers?.some((transfer) => !transfer.hasSufficientBalance) ?? false;
- const validMintingRune =
- !runeSummary?.mint ||
- (runeSummary?.mint && runeSummary.mint.runeIsOpen && runeSummary.mint.runeIsMintable);
- const hasOutputScript = summary?.outputs.some((output) => isScriptOutput(output)) ?? false;
- const hasExternalInputs =
- summary?.inputs.some(
- (input) =>
- input.extendedUtxo.address !== btcAddress && input.extendedUtxo.address !== ordinalsAddress,
- ) ?? false;
- const isUnconfirmedInput =
- summary?.inputs.some(
- (input) => !input.extendedUtxo.utxo.status.confirmed && input.walletWillSign,
- ) ?? false;
-
- // defaults for non-psbt transactions
- const transactionIsFinal = (summary as btcTransaction.PsbtSummary)?.isFinal ?? true;
- const hasSigHashNone = (summary as btcTransaction.PsbtSummary)?.hasSigHashNone ?? false;
- const hasSigHashSingle = (summary as btcTransaction.PsbtSummary)?.hasSigHashSingle ?? false;
-
- const netBtcAmount = getNetAmount({
- inputs: summary?.inputs,
- outputs: summary?.outputs,
- btcAddress,
- ordinalsAddress,
- });
-
- /* Send/Transfer Section */
-
- const { inputsFromPayment, inputsFromOrdinal } = getInputsWithAssetsFromUserAddress({
- inputs: summary?.inputs,
- btcAddress,
- ordinalsAddress,
- });
-
- const { outputsFromPayment, outputsFromOrdinal } = getOutputsWithAssetsFromUserAddress({
- outputs: summary?.outputs,
- btcAddress,
- ordinalsAddress,
- });
-
- const showSendBtc = netBtcAmount < 0;
- // if transaction is not final, then runes will be delegated and will show up in the delegation section
- const showRuneTransfers = transactionIsFinal && (runeSummary?.transfers ?? []).length > 0;
- const hasInscriptionsRareSatsInOrdinal =
- (!transactionIsFinal && inputsFromOrdinal.length > 0) || outputsFromOrdinal.length > 0;
-
- const showSendOrTransfer = showSendBtc || showRuneTransfers || hasInscriptionsRareSatsInOrdinal;
- const showSendSection = showSendOrTransfer && transactionIsFinal && !hasExternalInputs;
- const showTransferSection = showSendOrTransfer && (!transactionIsFinal || hasExternalInputs);
-
- const bundledOutputs: BundledOutputs = {};
- if (showSendSection) {
- summary?.outputs.forEach((output) => {
- if (output.type === 'script') return;
- let destinationKey: string;
- if (output.type === 'address') {
- if ([ordinalsAddress, btcAddress].includes(output.address)) return; // ignore outputs to own address
- destinationKey = output.address;
- } else {
- // TODO - we can have different destinations of the same type
- destinationKey = output.type;
- }
- bundledOutputs[destinationKey] ||= {
- outputs: [],
- netBtcAmount: 0,
- runeTransfers: [],
- };
- if (output.inscriptions.length || (output.satributes.length && hasActivatedRareSatsKey)) {
- bundledOutputs[destinationKey].outputs =
- bundledOutputs[destinationKey].outputs.concat(output);
- } else {
- bundledOutputs[destinationKey].netBtcAmount += output.amount;
- }
- });
- runeSummary?.transfers.forEach((runeTransfer) => {
- const outputAddress = runeTransfer.destinationAddresses[0];
- if (bundledOutputs[outputAddress]) {
- bundledOutputs[outputAddress].runeTransfers =
- bundledOutputs[outputAddress].runeTransfers.concat(runeTransfer);
- }
- });
- }
- // TODO move to utils
- const inscriptionsFromPayment: btcTransaction.IOInscription[] = [];
- const satributesFromPayment: btcTransaction.IOSatribute[] = [];
- (transactionIsFinal ? outputsFromPayment : inputsFromPayment).forEach(
- (
- item:
- | btcTransaction.EnhancedInput
- | btcTransaction.TransactionOutput
- | btcTransaction.TransactionPubKeyOutput,
- ) => {
- inscriptionsFromPayment.push(...item.inscriptions);
- satributesFromPayment.push(...item.satributes);
- },
- );
-
- /* Receive section */
-
- const { outputsToPayment, outputsToOrdinal } = getOutputsWithAssetsToUserAddress({
- outputs: summary?.outputs,
- btcAddress,
- ordinalsAddress,
- });
-
- // if receiving runes from own addresses, hide it because it is change, unless it swap addresses (recover runes)
- const filteredRuneReceipts: RuneSummary['receipts'] =
- runeSummary?.receipts?.filter(
- (receipt) =>
- !receipt.sourceAddresses.some(
- (address) =>
- (address === ordinalsAddress && receipt.destinationAddress === ordinalsAddress) ||
- (address === btcAddress && receipt.destinationAddress === btcAddress),
- ),
- ) ?? [];
- const ordinalRuneReceipts = filteredRuneReceipts.filter(
- (receipt) => receipt.destinationAddress === ordinalsAddress,
- );
- const paymentRuneReceipts = filteredRuneReceipts.filter(
- (receipt) => receipt.destinationAddress === btcAddress,
- );
-
- const inscriptionsRareSatsInPayment = outputsToPayment.filter(
- (output) =>
- output.inscriptions.length > 0 || (hasActivatedRareSatsKey && output.satributes.length > 0),
- );
-
- // if transaction is not final, then runes will be delegated and will show up in the delegation section
- const showOrdinalRunes = !!(transactionIsFinal && ordinalRuneReceipts.length);
-
- // if transaction is not final, then runes will be delegated and will show up in the delegation section
- const showPaymentRunes = !!(transactionIsFinal && paymentRuneReceipts.length);
-
- const showReceiveBtc = netBtcAmount > 0;
- const showOrdinalSection = showOrdinalRunes || outputsToOrdinal.length > 0;
- const showPaymentSection =
- showReceiveBtc || showPaymentRunes || inscriptionsRareSatsInPayment.length > 0;
- const showReceiveSection = showOrdinalSection || showPaymentSection;
-
- return {
- summary,
- runeSummary,
- brc20Summary,
- hasExternalInputs,
- hasInsufficientRunes,
- hasOutputScript,
- hasSigHashNone,
- hasSigHashSingle,
- isUnconfirmedInput,
- netBtcAmount,
- showCenotaphCallout,
- transactionIsFinal,
- validMintingRune,
- showSendSection,
- showTransferSection,
- showReceiveSection,
- sendSection: {
- bundledOutputs,
- inscriptionsFromPayment,
- satributesFromPayment,
- },
- transferSection: {
- showBtcAmount: showSendBtc,
- showRuneTransfers,
- inputsFromOrdinal,
- outputsFromOrdinal,
- inscriptionsFromPayment,
- satributesFromPayment,
- },
- receiveSection: {
- showOrdinalSection,
- showPaymentSection,
- showBtcAmount: showReceiveBtc,
- inscriptionsRareSatsInPayment,
- ordinalRuneReceipts,
- outputsToOrdinal,
- outputsToPayment,
- paymentRuneReceipts,
- showOrdinalRunes,
- showPaymentRunes,
- },
- };
-};
diff --git a/src/app/components/confirmBtcTransaction/hooks/useTxSummaryContext.ts b/src/app/components/confirmBtcTransaction/hooks/useTxSummaryContext.ts
new file mode 100644
index 000000000..734f98064
--- /dev/null
+++ b/src/app/components/confirmBtcTransaction/hooks/useTxSummaryContext.ts
@@ -0,0 +1,55 @@
+import {
+ type AggregatedSummary,
+ type Brc20Definition,
+ type EtchActionDetails,
+ type MintActionDetails,
+ type RuneMint,
+ type UserTransactionSummary,
+} from '@secretkeylabs/xverse-core';
+import { createContext, useContext } from 'react';
+import type { Color } from '../../../../theme';
+
+export type TxSummaryContextProps = {
+ extractedTxSummary?: UserTransactionSummary | AggregatedSummary;
+ runeMintDetails?: MintActionDetails;
+ runeEtchDetails?: EtchActionDetails;
+ brc20Summary?: Brc20Definition & { status: string; statusColor: Color };
+ batchMintDetails?: (RuneMint | undefined)[];
+};
+
+export const TxSummaryContext = createContext({
+ extractedTxSummary: undefined,
+ runeMintDetails: undefined,
+ runeEtchDetails: undefined,
+ brc20Summary: undefined,
+ batchMintDetails: undefined,
+});
+
+/**
+ * This is a hook for internal components to get the extracted transaction summary.
+ * The internal components would only be rendered if the extractedTxSummary is defined.
+ * This allows internal components to not have to check for undefined values.
+ */
+export const useTxSummaryContext = (): {
+ extractedTxSummary: UserTransactionSummary | AggregatedSummary;
+ runeMintDetails?: MintActionDetails;
+ runeEtchDetails?: EtchActionDetails;
+ brc20Summary?: Brc20Definition & { status: string; statusColor: Color };
+ batchMintDetails?: (RuneMint | undefined)[];
+} => {
+ const { extractedTxSummary, runeMintDetails, runeEtchDetails, brc20Summary, batchMintDetails } =
+ useContext(TxSummaryContext);
+
+ if (!extractedTxSummary) {
+ // This should never happen in production
+ throw new Error('extractedTxSummary is not defined for internal component');
+ }
+
+ return {
+ extractedTxSummary,
+ runeMintDetails,
+ runeEtchDetails,
+ brc20Summary,
+ batchMintDetails,
+ };
+};
diff --git a/src/app/components/confirmBtcTransaction/index.tsx b/src/app/components/confirmBtcTransaction/index.tsx
index 14c88c573..7d2a0e691 100644
--- a/src/app/components/confirmBtcTransaction/index.tsx
+++ b/src/app/components/confirmBtcTransaction/index.tsx
@@ -1,14 +1,14 @@
-import { delay } from '@common/utils/ledger';
-import {
- ParsedTxSummaryContext,
- type ParsedTxSummaryContextProps,
- useParsedTxSummaryContext,
-} from '@components/confirmBtcTransaction/hooks/useParsedTxSummaryContext';
-import TransactionSummary from '@components/confirmBtcTransaction/transactionSummary';
+import LedgerSteps from '@components/ledgerSteps';
import type { Tab } from '@components/tabBar';
import useSelectedAccount from '@hooks/useSelectedAccount';
-import TransportFactory from '@ledgerhq/hw-transport-webusb';
-import type { Transport } from '@secretkeylabs/xverse-core';
+import useWalletSelector from '@hooks/useWalletSelector';
+import {
+ type Brc20Definition,
+ type btcTransaction,
+ type EtchActionDetails,
+ type MintActionDetails,
+ type Transport,
+} from '@secretkeylabs/xverse-core';
import Button from '@ui-library/button';
import Callout, { type CalloutProps } from '@ui-library/callout';
import { StickyHorizontalSplitButtonContainer, StyledP } from '@ui-library/common.styled';
@@ -18,8 +18,11 @@ import { isLedgerAccount } from '@utils/helper';
import { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
+import type { Color } from '../../../theme';
import SendLayout from '../../layouts/sendLayout';
-import LedgerStepView, { Steps } from './ledgerStepView';
+import useExtractTxSummary from './hooks/useExtractTxSummary';
+import { TxSummaryContext } from './hooks/useTxSummaryContext';
+import TransactionSummary from './transactionSummary';
const LoaderContainer = styled.div(() => ({
display: 'flex',
@@ -37,21 +40,11 @@ const SpacedCallout = styled(Callout)`
margin-bottom: ${(props) => props.theme.space.m};
`;
-const SuccessActionsContainer = styled.div((props) => ({
- width: '100%',
- display: 'flex',
- flexDirection: 'column',
- gap: props.theme.space.s,
- paddingLeft: props.theme.space.m,
- paddingRight: props.theme.space.m,
- marginBottom: props.theme.space.xxl,
- marginTop: props.theme.space.xxl,
-}));
-
type Props = {
- summary?: ParsedTxSummaryContextProps['summary'];
- runeSummary?: ParsedTxSummaryContextProps['runeSummary'];
- brc20Summary?: ParsedTxSummaryContextProps['brc20Summary'];
+ summary?: btcTransaction.TransactionSummary | btcTransaction.PsbtSummary;
+ runeMintDetails?: MintActionDetails;
+ runeEtchDetails?: EtchActionDetails;
+ brc20Summary?: Brc20Definition & { status: string; statusColor: Color };
isLoading: boolean;
isSubmitting: boolean;
isBroadcast?: boolean;
@@ -77,7 +70,9 @@ type Props = {
function ConfirmBtcTransaction({
summary,
- runeSummary,
+ runeMintDetails,
+ runeEtchDetails,
+ brc20Summary,
isLoading,
isSubmitting,
isBroadcast,
@@ -95,28 +90,23 @@ function ConfirmBtcTransaction({
feeRate,
title,
selectedBottomTab,
- brc20Summary,
customCallout,
}: Props) {
+ const { network } = useWalletSelector();
+ const selectedAccount = useSelectedAccount();
+
+ const { data: extractedTxSummary, isLoading: extractTxSummaryLoading } = useExtractTxSummary(
+ network.type,
+ summary,
+ );
const parsedTxSummaryContextValue = useMemo(
- () => ({ summary, runeSummary, brc20Summary }),
- [summary, runeSummary, brc20Summary],
+ () => ({ extractedTxSummary, runeMintDetails, runeEtchDetails, brc20Summary }),
+ [extractedTxSummary, runeMintDetails, runeEtchDetails, brc20Summary],
);
+
const [isModalVisible, setIsModalVisible] = useState(false);
- const [currentStep, setCurrentStep] = useState(Steps.ConnectLedger);
- const [isButtonDisabled, setIsButtonDisabled] = useState(false);
- const [isConnectSuccess, setIsConnectSuccess] = useState(false);
- const [isConnectFailed, setIsConnectFailed] = useState(false);
- const [isTxRejected, setIsTxRejected] = useState(false);
- const { hasInsufficientRunes, hasSigHashNone, validMintingRune } = useParsedTxSummaryContext();
const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
- const { t: signatureRequestTranslate } = useTranslation('translation', {
- keyPrefix: 'SIGNATURE_REQUEST',
- });
- const selectedAccount = useSelectedAccount();
-
- const hideBackButton = !onBackClick;
const onConfirmPress = async () => {
if (!isLedgerAccount(selectedAccount)) {
@@ -126,133 +116,65 @@ function ConfirmBtcTransaction({
setIsModalVisible(true);
};
- const handleConnectAndConfirm = async () => {
- if (!selectedAccount) {
- console.error('No account selected');
- return;
- }
- setIsButtonDisabled(true);
-
- const transport = await TransportFactory.create();
-
- if (!transport) {
- setIsConnectSuccess(false);
- setIsConnectFailed(true);
- setIsButtonDisabled(false);
- return;
- }
-
- setIsConnectSuccess(true);
- await delay(1500);
-
- if (currentStep !== Steps.ExternalInputs && currentStep !== Steps.ConfirmTransaction) {
- setCurrentStep(Steps.ExternalInputs);
- return;
- }
-
- if (currentStep !== Steps.ConfirmTransaction) {
- setCurrentStep(Steps.ConfirmTransaction);
- }
-
- try {
- onConfirm(transport);
- } catch (err) {
- console.error(err);
- setIsTxRejected(true);
- }
- };
-
- const goToConfirmationStep = () => {
- setCurrentStep(Steps.ConfirmTransaction);
-
- handleConnectAndConfirm();
- };
-
- const handleRetry = async () => {
- setIsTxRejected(false);
- setIsConnectSuccess(false);
- setCurrentStep(Steps.ConnectLedger);
- };
-
- return isLoading ? (
-
-
- ) : (
-
- {/* TODO start a new layout. SendLayout was not intended for the review screens */}
-
-
- {title || t('REVIEW_TRANSACTION')}
-
- {/* TODO: add sighash single warning */}
- {hasSigHashNone && (
-
-
-
- )}
-
- setIsModalVisible(false)}>
-
- {currentStep === Steps.ExternalInputs && !isTxRejected && !isConnectFailed ? (
-
- ) : (
- <>
-
+ )}
+ {!isBroadcast &&
+
-
+
)}
-
-
-
- );
+
+ setIsModalVisible(false)}>
+ {isModalVisible &&
+
+ );
+ }
}
export default ConfirmBtcTransaction;
diff --git a/src/app/components/confirmBtcTransaction/indexBatch.tsx b/src/app/components/confirmBtcTransaction/indexBatch.tsx
new file mode 100644
index 000000000..b001b4a3c
--- /dev/null
+++ b/src/app/components/confirmBtcTransaction/indexBatch.tsx
@@ -0,0 +1,96 @@
+import useTransactionContext from '@hooks/useTransactionContext';
+import useWalletSelector from '@hooks/useWalletSelector';
+import {
+ compileViewSummary,
+ parseSummaryForRunes,
+ type AggregatedSummary,
+ type BaseSummary,
+ type btcTransaction,
+ type UserTransactionSummary,
+} from '@secretkeylabs/xverse-core';
+import Callout from '@ui-library/callout';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+import { TxSummaryContext, type TxSummaryContextProps } from './hooks/useTxSummaryContext';
+import TransactionSummary from './transactionSummary';
+
+const SpacedCallout = styled(Callout)`
+ margin-bottom: ${(props) => props.theme.space.m};
+`;
+
+type Props = {
+ summaries: {
+ extractedSummary: UserTransactionSummary | AggregatedSummary;
+ summary: btcTransaction.PsbtSummary;
+ }[];
+};
+
+function ConfirmBatchBtcTransactions({ summaries }: Props) {
+ const txnContext = useTransactionContext();
+ const { network } = useWalletSelector();
+
+ const [aggregatedParsedTxSummaryContext, setAggregatedParsedTxSummaryContext] =
+ useState();
+
+ useEffect(() => {
+ (async () => {
+ const summary: btcTransaction.PsbtSummary = {
+ inputs: summaries.map((psbt) => psbt.summary.inputs).flat(),
+ outputs: summaries.map((psbt) => psbt.summary.outputs).flat(),
+ feeOutput: undefined,
+ isFinal: summaries.every((curr) => curr.extractedSummary.isFinal),
+ hasSigHashNone: summaries.some((psbt) => psbt.extractedSummary.hasSigHashNone),
+ hasSigHashSingle: summaries.some((psbt) => psbt.extractedSummary.hasSigHashSingle),
+ };
+ const runeSummary = await parseSummaryForRunes(txnContext, summary, network.type);
+ const base: BaseSummary = {
+ runes: {
+ mint: undefined,
+ burns: summaries.map((psbt) => psbt.extractedSummary.runes.burns).flat(),
+ hasCenotaph: summaries.some((psbt) => psbt.extractedSummary.runes.hasCenotaph),
+ hasInvalidMint: summaries.some((psbt) => psbt.extractedSummary.runes.hasInvalidMint),
+ hasInsufficientBalance: summaries.some(
+ (psbt) => psbt.extractedSummary.runes.hasInsufficientBalance,
+ ),
+ },
+ inputs: summary.inputs,
+ outputs: summary.outputs,
+ feeRate: summary.feeRate,
+ isFinal: summary.isFinal,
+ hasSigHashNone: summary.hasSigHashNone,
+ hasSigHashSingle: summary.hasSigHashSingle,
+ hasExternalInputs: summaries.some((psbt) => psbt.extractedSummary.hasExternalInputs),
+ hasOutputScript: summaries.some((psbt) => psbt.extractedSummary.hasOutputScript),
+ hasUnconfirmedInputs: summaries.some((psbt) => psbt.extractedSummary.hasUnconfirmedInputs),
+ };
+
+ setAggregatedParsedTxSummaryContext({
+ extractedTxSummary: compileViewSummary(txnContext, summary, runeSummary, base),
+ batchMintDetails: summaries.map((psbt) => psbt.extractedSummary.runes.mint).flat(),
+ });
+ })();
+ }, [summaries, txnContext, network.type]);
+
+ const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
+
+ if (aggregatedParsedTxSummaryContext?.extractedTxSummary) {
+ const { hasSigHashNone } = aggregatedParsedTxSummaryContext.extractedTxSummary;
+
+ return (
+
+ {/* TODO: add sighash single warning */}
+ {hasSigHashNone && (
+
+ );
+ }
+}
+
+export default ConfirmBatchBtcTransactions;
diff --git a/src/app/components/confirmBtcTransaction/itemRow/amount.tsx b/src/app/components/confirmBtcTransaction/itemRow/amount.tsx
index 469417188..6a50349d8 100644
--- a/src/app/components/confirmBtcTransaction/itemRow/amount.tsx
+++ b/src/app/components/confirmBtcTransaction/itemRow/amount.tsx
@@ -1,6 +1,6 @@
import FiatAmountText from '@components/fiatAmountText';
import TokenImage from '@components/tokenImage';
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
import useWalletSelector from '@hooks/useWalletSelector';
import { getBtcFiatEquivalent, satsToBtc } from '@secretkeylabs/xverse-core';
import { StyledP } from '@ui-library/common.styled';
@@ -9,20 +9,14 @@ import { useTranslation } from 'react-i18next';
import { NumericFormat } from 'react-number-format';
import styled from 'styled-components';
-const RowCenter = styled.div<{ spaceBetween?: boolean }>((props) => ({
+const Container = styled.div<{ spaceBetween?: boolean }>((props) => ({
+ width: '100%',
display: 'flex',
- flex: 1,
flexDirection: 'row',
alignItems: 'center',
- justifyContent: props.spaceBetween ? 'space-between' : 'initial',
- columnGap: props.theme.space.m,
marginBottom: props.theme.space.s,
}));
-const NumberTypeContainer = styled.div`
- text-align: right;
-`;
-
const StyledFiatAmountText = styled(FiatAmountText)`
display: block;
${(props) => props.theme.typography.body_medium_s}
@@ -30,8 +24,24 @@ const StyledFiatAmountText = styled(FiatAmountText)`
margin-top: ${(props) => props.theme.space.xxxs};
`;
-const StyledBtcTitle = styled(StyledP)`
- margin-top: ${(props) => props.theme.space.xxxs};
+const Column = styled.div`
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ overflow: hidden;
+`;
+
+const Row = styled.div`
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 24px;
+`;
+
+const AvatarContainer = styled.div`
+ margin-right: ${(props) => props.theme.space.m};
`;
type Props = {
@@ -40,24 +50,21 @@ type Props = {
export default function Amount({ amount }: Props) {
const { fiatCurrency } = useWalletSelector();
- const { btcFiatRate } = useCoinRates();
+ const { btcFiatRate } = useSupportedCoinRates();
const { t } = useTranslation('translation');
if (!amount) return null;
return (
-
-
-
)}
/>
+
+
+
+ Bitcoin
+
-
-
+
+
+
);
}
diff --git a/src/app/components/confirmBtcTransaction/itemRow/amountWithInscriptionSatribute.tsx b/src/app/components/confirmBtcTransaction/itemRow/amountWithInscriptionSatribute.tsx
index 37710a65e..167bc0efc 100644
--- a/src/app/components/confirmBtcTransaction/itemRow/amountWithInscriptionSatribute.tsx
+++ b/src/app/components/confirmBtcTransaction/itemRow/amountWithInscriptionSatribute.tsx
@@ -2,21 +2,22 @@ import DropDownIcon from '@assets/img/transactions/dropDownIcon.svg';
import useWalletSelector from '@hooks/useWalletSelector';
import { WarningOctagon } from '@phosphor-icons/react';
import { animated, config, useSpring } from '@react-spring/web';
-import { btcTransaction } from '@secretkeylabs/xverse-core';
+import { btcTransaction, type RareSatsType } from '@secretkeylabs/xverse-core';
import { StyledP } from '@ui-library/common.styled';
import Divider from '@ui-library/divider';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
import Theme from 'theme';
-import { mapTxSatributeInfoToBundleInfo } from '../utils';
-import BundleItem from './bundleItem';
import Inscription from './inscription';
+import RareSatRow from './rareSatRow';
+import RareSats from './rareSats';
const WarningContainer = styled.div`
display: flex;
flex-direction: column;
border-radius: ${(props) => props.theme.space.s};
+ margin-bottom: ${(props) => props.theme.space.s};
`;
const WarningButton = styled.button`
@@ -53,10 +54,28 @@ export default function AmountWithInscriptionSatribute({
inscriptions,
onShowInscription,
}: {
- satributes: btcTransaction.IOSatribute[];
- inscriptions: btcTransaction.IOInscription[];
- onShowInscription: (inscription: btcTransaction.IOInscription) => void;
+ satributes: btcTransaction.IOSatribute[] | Omit[];
+ inscriptions:
+ | btcTransaction.IOInscription[]
+ | (btcTransaction.IOInscription & { satributes: RareSatsType[] })[]
+ | (Omit & { satributes: RareSatsType[] })[];
+ onShowInscription: (
+ inscription:
+ | (btcTransaction.IOInscription & { satributes: RareSatsType[] })
+ | (Omit & { satributes: RareSatsType[] }),
+ ) => void;
}) {
+ const inscriptionsHaveSatributes = (
+ inscriptionsArr: (
+ | btcTransaction.IOInscription
+ | (btcTransaction.IOInscription & { satributes: RareSatsType[] })
+ | (Omit & { satributes: RareSatsType[] })
+ )[],
+ ): inscriptionsArr is (
+ | (btcTransaction.IOInscription & { satributes: RareSatsType[] })
+ | (Omit & { satributes: RareSatsType[] })
+ )[] => inscriptions.some((inscription) => 'satributes' in inscription);
+
const [showBundleDetail, setShowBundleDetail] = useState(false);
const { t } = useTranslation('translation');
@@ -76,15 +95,26 @@ export default function AmountWithInscriptionSatribute({
config: { ...config.stiff },
});
+ const inscriptionSatributes =
+ hasActivatedRareSatsKey && inscriptionsHaveSatributes(inscriptions)
+ ? inscriptions
+ .map((inscription) => inscription.satributes)
+ .filter((rareSatsArr) => rareSatsArr.length > 0)
+ : [];
// we only show the satributes if the user has activated the rare sats key
const satributesArray = hasActivatedRareSatsKey ? satributes : [];
+
const amountOfAssets = satributesArray.length + inscriptions.length;
- return amountOfAssets > 0 ? (
+ if (amountOfAssets === 0) {
+ return null;
+ }
+
+ return (
setShowBundleDetail((prevState) => !prevState)}>
-
{t(
`CONFIRM_TRANSACTION.${
@@ -95,11 +125,10 @@ export default function AmountWithInscriptionSatribute({
</Row>
<animated.img style={arrowRotation} src={DropDownIcon} alt="Drop Down" />
</WarningButton>
-
{showBundleDetail && (
<ItemsContainer style={slideInStyles}>
- {inscriptions.map((item: btcTransaction.IOInscription, index: number) => (
- <div key={item.id}>
+ {inscriptions.map((item, index: number) => (
+ <>
<Range>
<Inscription
inscription={item}
@@ -107,21 +136,38 @@ export default function AmountWithInscriptionSatribute({
onShowInscription={onShowInscription}
/>
</Range>
- {(satributesArray.length || inscriptions.length > index + 1) && (
+ {(inscriptionSatributes.length > 0 || inscriptions.length > index + 1) && (
<Divider verticalMargin="s" />
)}
- </div>
+ </>
))}
- {satributesArray.map((item: btcTransaction.IOSatribute, index: number) => (
- <div key={item.offset}>
+ {inscriptionSatributes.length > 0 && (
+ <>
<Range>
- <BundleItem item={mapTxSatributeInfoToBundleInfo(item)} />
+ <RareSats
+ buttonColor={Theme.colors.elevation2}
+ satributes={[]}
+ inscriptionSatributes={inscriptionSatributes}
+ />
</Range>
- {satributesArray.length > index + 1 && <Divider verticalMargin="s" />}
- </div>
- ))}
+ {satributesArray.length > 0 && <Divider verticalMargin="s" />}
+ </>
+ )}
+ {satributesArray.map(
+ (
+ item: btcTransaction.IOSatribute | Omit<btcTransaction.IOSatribute, 'offset'>,
+ index: number,
+ ) => (
+ <>
+ <Range>
+ <RareSatRow item={item} />
+ </Range>
+ {satributesArray.length > index + 1 && <Divider verticalMargin="s" />}
+ </>
+ ),
+ )}
</ItemsContainer>
)}
</WarningContainer>
- ) : null;
+ );
}
diff --git a/src/app/components/confirmBtcTransaction/itemRow/bundleItem.tsx b/src/app/components/confirmBtcTransaction/itemRow/bundleItem.tsx
deleted file mode 100644
index 118072513..000000000
--- a/src/app/components/confirmBtcTransaction/itemRow/bundleItem.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import OrdinalIcon from '@assets/img/rareSats/ic_ordinal_small.svg';
-import RareSatIcon from '@components/rareSatIcon/rareSatIcon';
-import { DotsThree, Eye } from '@phosphor-icons/react';
-import type { BundleSatRange, SatRangeInscription } from '@secretkeylabs/xverse-core';
-import { StyledP } from '@ui-library/common.styled';
-import { getSatLabel } from '@utils/rareSats';
-import { NumericFormat } from 'react-number-format';
-import styled from 'styled-components';
-import Theme from 'theme';
-
-const RangeContainer = styled.div``;
-
-const Range = styled.div`
- display: flex;
- border-radius: 6px;
- border: 1px solid ${(props) => props.theme.colors.white_800};
- padding: 1px;
- flex-wrap: wrap;
- flex-direction: row;
- align-items: center;
-`;
-
-const Container = styled.div`
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- align-items: center;
- width: 100%;
-}`;
-
-const Column = styled.div`
- display: flex;
- flex: 1;
- flex-direction: column;
- align-items: flex-end;
-`;
-
-const SatsText = styled(StyledP)`
- width: 100%;
- text-align: right;
-`;
-const InscriptionRow = styled.button`
- display: flex;
- flex-direction: row;
- align-items: center;
- background-color: transparent;
- cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};
-`;
-const InscriptionText = styled(StyledP)`
- text-wrap: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- width: 100%;
- margin-left: 4px;
-`;
-
-const BundleText = styled(StyledP)`
- text-align: right;
- width: 100%;
-`;
-
-function BundleItem({
- item,
- ordinalEyePressed,
-}: {
- item: BundleSatRange;
- ordinalEyePressed?: (inscription: SatRangeInscription) => void;
-}) {
- const renderedIcons = () => (
- <RangeContainer>
- <Range>
- {item.satributes.map((satribute, index) => {
- if (index > 4) return null;
- if (index === 4) {
- return <DotsThree color={Theme.colors.white_200} size="20" />;
- }
- return <RareSatIcon key={satribute} type={satribute} size={24} />;
- })}
- </Range>
- </RangeContainer>
- );
-
- return (
- <Container>
- {renderedIcons()}
- <Column>
- <BundleText typography="body_medium_m">{getSatLabel(item.satributes)}</BundleText>
- <NumericFormat
- value={item.totalSats}
- displayType="text"
- suffix={item.totalSats > 1 ? ' Sats' : ' Sat'}
- thousandSeparator
- renderText={(value: string) => (
- <SatsText typography="body_medium_m" color="white_400">
- {value}
- </SatsText>
- )}
- />
- {item.inscriptions.map((inscription) => (
- <InscriptionRow
- type="button"
- key={inscription.id}
- onClick={() => {
- ordinalEyePressed?.(inscription);
- }}
- disabled={!ordinalEyePressed}
- >
- <img src={OrdinalIcon} alt="ordinal" />
- <InscriptionText typography="body_medium_m" color="white_0">
- {inscription.inscription_number}
- </InscriptionText>
- {ordinalEyePressed && <Eye color={Theme.colors.white_0} size={20} weight="fill" />}
- </InscriptionRow>
- ))}
- </Column>
- </Container>
- );
-}
-
-export default BundleItem;
diff --git a/src/app/components/confirmBtcTransaction/itemRow/inscription.tsx b/src/app/components/confirmBtcTransaction/itemRow/inscription.tsx
index 6a2022555..38c967f15 100644
--- a/src/app/components/confirmBtcTransaction/itemRow/inscription.tsx
+++ b/src/app/components/confirmBtcTransaction/itemRow/inscription.tsx
@@ -1,21 +1,14 @@
import OrdinalIcon from '@assets/img/rareSats/ic_ordinal_small_over_card.svg';
import { Eye } from '@phosphor-icons/react';
import OrdinalImage from '@screens/ordinals/ordinalImage';
-import { btcTransaction } from '@secretkeylabs/xverse-core';
+import { btcTransaction, type RareSatsType } from '@secretkeylabs/xverse-core';
import Avatar from '@ui-library/avatar';
import { StyledP } from '@ui-library/common.styled';
import { useTranslation } from 'react-i18next';
import { NumericFormat } from 'react-number-format';
import styled from 'styled-components';
import Theme from 'theme';
-import { useParsedTxSummaryContext } from '../hooks/useParsedTxSummaryContext';
-
-type Props = {
- inscription: btcTransaction.IOInscription;
- bundleSize?: number;
- hideTypeSizeInfo?: boolean;
- onShowInscription: (inscription: btcTransaction.IOInscription) => void;
-};
+import { useTxSummaryContext } from '../hooks/useTxSummaryContext';
const RowCenter = styled.div<{ spaceBetween?: boolean; gap?: boolean }>((props) => ({
display: 'flex',
@@ -49,15 +42,25 @@ const Dot = styled(StyledP)`
margin: 0 ${(props) => props.theme.space.xxs};
`;
+type Props = {
+ inscription:
+ | (btcTransaction.IOInscription & { satributes: RareSatsType[] })
+ | (Omit<btcTransaction.IOInscription, 'offset'> & { satributes: RareSatsType[] });
+ hideTypeSizeInfo?: boolean;
+ onShowInscription: (
+ inscription:
+ | (btcTransaction.IOInscription & { satributes: RareSatsType[] })
+ | (Omit<btcTransaction.IOInscription, 'offset'> & { satributes: RareSatsType[] }),
+ ) => void;
+};
+
export default function Inscription({
inscription,
- bundleSize,
hideTypeSizeInfo = false,
onShowInscription,
}: Props) {
const { t } = useTranslation('translation');
- const { brc20Summary } = useParsedTxSummaryContext();
-
+ const { brc20Summary } = useTxSummaryContext();
return (
<RowCenter>
<AvatarContainer>
@@ -78,25 +81,9 @@ export default function Inscription({
<RowCenter spaceBetween gap>
<div>
{!hideTypeSizeInfo && (
- <>
- <StyledP typography="body_medium_m" color="white_0">
- {t('COMMON.INSCRIPTION')}
- </StyledP>
- {bundleSize && (
- <NumericFormat
- value={bundleSize}
- displayType="text"
- thousandSeparator
- prefix={`${t('COMMON.SIZE')}: `}
- suffix={` ${t('COMMON.SATS')}`}
- renderText={(value: string) => (
- <StyledP typography="body_medium_s" color="white_400">
- {value}
- </StyledP>
- )}
- />
- )}
- </>
+ <StyledP typography="body_medium_m" color="white_0">
+ {t('COMMON.INSCRIPTION')}
+ </StyledP>
)}
</div>
{brc20Summary ? (
@@ -132,9 +119,7 @@ export default function Inscription({
<NumberTypeContainer>
<InscriptionNumberContainer
type="button"
- onClick={() => {
- onShowInscription(inscription);
- }}
+ onClick={() => onShowInscription(inscription)}
>
<RowCenter>
<InscriptionNumber
diff --git a/src/app/components/confirmBtcTransaction/itemRow/inscriptionSatributeRow.tsx b/src/app/components/confirmBtcTransaction/itemRow/inscriptionSatributeRow.tsx
index 84f118497..9cf87a051 100644
--- a/src/app/components/confirmBtcTransaction/itemRow/inscriptionSatributeRow.tsx
+++ b/src/app/components/confirmBtcTransaction/itemRow/inscriptionSatributeRow.tsx
@@ -1,11 +1,7 @@
import Link from '@assets/img/rareSats/link.svg';
import useWalletSelector from '@hooks/useWalletSelector';
-import { btcTransaction } from '@secretkeylabs/xverse-core';
-import { StyledP } from '@ui-library/common.styled';
-import { useTranslation } from 'react-i18next';
-import { NumericFormat } from 'react-number-format';
+import { btcTransaction, type RareSatsType } from '@secretkeylabs/xverse-core';
import styled from 'styled-components';
-import { getSatRangesWithInscriptions } from '../utils';
import Inscription from './inscription';
import RareSats from './rareSats';
@@ -18,77 +14,53 @@ const LinkContainer = styled.div`
width: 32px;
justify-content: center;
margin-top: ${(props) => props.theme.space.xxxs};
- margin-bottom: -6px;
+ margin-bottom: -10px;
`;
-const BundleHeader = styled.div<{ topMargin? }>((props) => ({
- display: 'flex',
- flex: 1,
- flexDirection: 'row',
- justifyContent: 'space-between',
- marginBottom: props.theme.space.s,
- marginTop: props.topMargin ? props.theme.space.s : 0,
-}));
-
type Props = {
- inscriptions: btcTransaction.IOInscription[];
- satributes: btcTransaction.IOSatribute[];
- amount: number;
- showAmount?: boolean;
- topMargin?: boolean;
- onShowInscription: (inscription: btcTransaction.IOInscription) => void;
+ bundleSize?: number;
+ inscriptions:
+ | (btcTransaction.IOInscription & { satributes: RareSatsType[] })[]
+ | (Omit<btcTransaction.IOInscription, 'offset'> & { satributes: RareSatsType[] })[];
+ satributes: btcTransaction.IOSatribute[] | Omit<btcTransaction.IOSatribute, 'offset'>[];
+ onShowInscription: (
+ inscription:
+ | (btcTransaction.IOInscription & { satributes: RareSatsType[] })
+ | (Omit<btcTransaction.IOInscription, 'offset'> & { satributes: RareSatsType[] }),
+ ) => void;
};
function InscriptionSatributeRow({
+ bundleSize,
inscriptions,
satributes,
- amount,
- showAmount = false,
- topMargin = false,
onShowInscription,
}: Props) {
- const { t } = useTranslation('translation');
const { hasActivatedRareSatsKey } = useWalletSelector();
- const satributesInfo = getSatRangesWithInscriptions({
- satributes,
- inscriptions,
- amount,
- });
- // we only show rare sats if there are any and the user has enabled the feature
- const showRareSats = satributesInfo.totalExoticSats > 0 && hasActivatedRareSatsKey;
-
return (
<Container>
- {showAmount && (
- <BundleHeader topMargin={topMargin}>
- <StyledP typography="body_medium_m" color="white_400">
- {t('COMMON.BUNDLE')}
- </StyledP>
- <NumericFormat
- value={amount}
- displayType="text"
- thousandSeparator
- prefix={`${t('COMMON.SIZE')}: `}
- suffix={` ${t('COMMON.SATS')}`}
- renderText={(value: string) => (
- <StyledP typography="body_medium_m" color="white_400">
- {value}
- </StyledP>
+ {inscriptions.map((inscription, index) => {
+ const inscriptionSatributes = inscription.satributes.filter(
+ (rareSatsArr) => rareSatsArr.length > 0,
+ );
+ return (
+ <>
+ <Container key={inscription.number}>
+ <Inscription inscription={inscription} onShowInscription={onShowInscription} />
+ {(bundleSize && inscriptions.length > index + 1) ||
+ (hasActivatedRareSatsKey && inscriptionSatributes.length > 0 && (
+ <LinkContainer>
+ <img src={Link} alt="link" />
+ </LinkContainer>
+ ))}
+ </Container>
+ {hasActivatedRareSatsKey && (
+ <RareSats bundleSize={bundleSize} inscriptionSatributes={inscriptionSatributes} />
)}
- />
- </BundleHeader>
- )}
- {inscriptions.map((inscription, index) => (
- <div key={inscription.number}>
- <Inscription inscription={inscription} onShowInscription={onShowInscription} />
- {!!(inscriptions.length > index + 1 || showRareSats) && (
- <LinkContainer>
- <img src={Link} alt="link" />
- </LinkContainer>
- )}
- </div>
- ))}
- {showRareSats && <RareSats satributesInfo={satributesInfo} />}
+ </>
+ );
+ })}
+ {hasActivatedRareSatsKey && <RareSats bundleSize={bundleSize} satributes={satributes} />}
</Container>
);
}
diff --git a/src/app/components/confirmBtcTransaction/itemRow/rareSatRow.tsx b/src/app/components/confirmBtcTransaction/itemRow/rareSatRow.tsx
new file mode 100644
index 000000000..22f59bb37
--- /dev/null
+++ b/src/app/components/confirmBtcTransaction/itemRow/rareSatRow.tsx
@@ -0,0 +1,83 @@
+import RareSatIcon from '@components/rareSatIcon/rareSatIcon';
+import { DotsThree } from '@phosphor-icons/react';
+import { btcTransaction } from '@secretkeylabs/xverse-core';
+import { StyledP } from '@ui-library/common.styled';
+import { getSatLabel } from '@utils/rareSats';
+import { NumericFormat } from 'react-number-format';
+import styled from 'styled-components';
+import Theme from 'theme';
+
+const RangeContainer = styled.div``;
+
+const Range = styled.div`
+ display: flex;
+ border-radius: 6px;
+ border: 1px solid ${(props) => props.theme.colors.white_800};
+ padding: 1px;
+ flex-wrap: wrap;
+ flex-direction: row;
+ align-items: center;
+`;
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+`;
+
+const Column = styled.div`
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ align-items: flex-end;
+`;
+
+const SatsText = styled(StyledP)`
+ width: 100%;
+ text-align: right;
+`;
+
+const BundleText = styled(StyledP)`
+ text-align: right;
+ width: 100%;
+`;
+
+function RareSatRow({
+ item,
+}: {
+ item: btcTransaction.IOSatribute | Omit<btcTransaction.IOSatribute, 'offset'>;
+}) {
+ return (
+ <Container>
+ <RangeContainer>
+ <Range>
+ {item.types.map((rareSatType, index) => {
+ if (index > 4) return null;
+ if (index === 4) return <DotsThree color={Theme.colors.white_200} size="20" />;
+ return <RareSatIcon key={rareSatType} type={rareSatType} size={24} />;
+ })}
+ </Range>
+ </RangeContainer>
+ <Column>
+ <BundleText typography="body_medium_m">{getSatLabel(item.types)}</BundleText>
+ {item.amount > 0 && (
+ <NumericFormat
+ value={item.amount}
+ displayType="text"
+ suffix={item.amount > 1 ? ' Sats' : ' Sat'}
+ thousandSeparator
+ renderText={(value: string) => (
+ <SatsText typography="body_medium_m" color="white_400">
+ {value}
+ </SatsText>
+ )}
+ />
+ )}
+ </Column>
+ </Container>
+ );
+}
+
+export default RareSatRow;
diff --git a/src/app/components/confirmBtcTransaction/itemRow/rareSats.tsx b/src/app/components/confirmBtcTransaction/itemRow/rareSats.tsx
index 3fdf25e27..235a67b7f 100644
--- a/src/app/components/confirmBtcTransaction/itemRow/rareSats.tsx
+++ b/src/app/components/confirmBtcTransaction/itemRow/rareSats.tsx
@@ -1,31 +1,31 @@
import DropDownIcon from '@assets/img/transactions/dropDownIcon.svg';
import { Butterfly } from '@phosphor-icons/react';
import { animated, config, useSpring } from '@react-spring/web';
+import { btcTransaction, type RareSatsType } from '@secretkeylabs/xverse-core';
import { StyledP } from '@ui-library/common.styled';
import Divider from '@ui-library/divider';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
-import { NumericFormat } from 'react-number-format';
import styled from 'styled-components';
import Theme from 'theme';
import Avatar from '../../../ui-library/avatar';
-import { mapTxSatributeInfoToBundleInfo, type SatRangeTx } from '../utils';
-import BundleItem from './bundleItem';
+import RareSatRow from './rareSatRow';
const SatsBundleContainer = styled.div`
display: flex;
flex-direction: column;
border-radius: ${(props) => props.theme.space.s};
+ margin-top: ${(props) => props.theme.space.s};
margin-bottom: ${(props) => props.theme.space.s};
`;
-const SatsBundleButton = styled.button`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- background-color: ${(props) => props.theme.colors.elevation1};
-`;
+const SatsBundleButton = styled.button<{ buttonColor?: string }>((props) => ({
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ backgroundColor: props.buttonColor ?? props.theme.colors.elevation1,
+}));
const RangesContainer = styled(animated.div)((props) => ({
borderRadius: props.theme.space.s,
@@ -44,7 +44,7 @@ const Row = styled.div`
align-items: center;
`;
-const BundleInfo = styled.div`
+const ButterflyHeader = styled.div`
display: flex;
flex-direction: column;
align-items: flex-start;
@@ -52,11 +52,15 @@ const BundleInfo = styled.div`
`;
function RareSats({
- satributesInfo,
+ satributes,
+ inscriptionSatributes,
bundleSize,
+ buttonColor,
}: {
- satributesInfo: { satRanges: SatRangeTx[]; totalExoticSats: number };
+ satributes?: btcTransaction.IOSatribute[] | Omit<btcTransaction.IOSatribute, 'offset'>[];
+ inscriptionSatributes?: RareSatsType[];
bundleSize?: number;
+ buttonColor?: string;
}) {
const [showBundleDetail, setShowBundleDetail] = useState(false);
@@ -76,51 +80,74 @@ function RareSats({
config: { ...config.stiff },
});
+ const totalExoticSats: number =
+ satributes?.reduce(
+ (accumulator, current) =>
+ accumulator + (!current.types.includes('COMMON') ? current.amount : 0),
+ 0,
+ ) ?? 0;
+
+ if (!totalExoticSats && !inscriptionSatributes?.length) return null;
+
return (
<SatsBundleContainer>
<SatsBundleButton
type="button"
+ buttonColor={buttonColor}
onClick={() => setShowBundleDetail((prevState) => !prevState)}
>
<Row>
<Avatar icon={<Butterfly size={18} color={Theme.colors.elevation0} />} />
- <BundleInfo>
- <StyledP typography="body_medium_m" color="white_0">{`${
- satributesInfo.totalExoticSats
- } ${t(
- satributesInfo.totalExoticSats > 1
- ? 'NFT_DASHBOARD_SCREEN.RARE_SATS'
- : 'NFT_DASHBOARD_SCREEN.RARE_SAT',
- )}`}</StyledP>
- {bundleSize && (
- <NumericFormat
- value={bundleSize}
- displayType="text"
- thousandSeparator
- prefix={`${t('COMMON.SIZE')}: `}
- suffix={` ${t('COMMON.SATS')}`}
- renderText={(value: string) => (
- <StyledP typography="body_medium_s" color="white_400">
- {value}
- </StyledP>
- )}
- />
- )}
- </BundleInfo>
+ <ButterflyHeader>
+ <StyledP typography="body_medium_m" color="white_0">
+ {totalExoticSats > 0
+ ? `${totalExoticSats} ${t(
+ totalExoticSats > 1
+ ? 'NFT_DASHBOARD_SCREEN.RARE_SATS'
+ : 'NFT_DASHBOARD_SCREEN.RARE_SAT',
+ )}`
+ : `${t('NFT_DASHBOARD_SCREEN.RARE_SATS')}`}
+ </StyledP>
+ </ButterflyHeader>
</Row>
<animated.img style={arrowRotation} src={DropDownIcon} alt="Drop Down" />
</SatsBundleButton>
-
{showBundleDetail && (
<RangesContainer style={slideInStyles}>
- {satributesInfo.satRanges.map((item: SatRangeTx, index: number) => (
- <div key={item.offset}>
+ {inscriptionSatributes && (
+ <Range>
+ <RareSatRow
+ item={{
+ types: inscriptionSatributes,
+ amount: 0,
+ fromAddress: '',
+ }}
+ />
+ </Range>
+ )}
+ {totalExoticSats > 0 &&
+ satributes &&
+ satributes.map((item, i) => (
+ // eslint-disable-next-line react/jsx-key
+ <Range>
+ <RareSatRow item={item} />
+ {i < satributes.length - 1 && <Divider verticalMargin="s" />}
+ </Range>
+ ))}
+ {bundleSize && totalExoticSats !== bundleSize && (
+ <>
+ <Divider verticalMargin="s" />
<Range>
- <BundleItem item={mapTxSatributeInfoToBundleInfo(item)} />
+ <RareSatRow
+ item={{
+ types: ['COMMON'],
+ amount: bundleSize - totalExoticSats,
+ fromAddress: '',
+ }}
+ />
</Range>
- {satributesInfo.satRanges.length > index + 1 && <Divider verticalMargin="s" />}
- </div>
- ))}
+ </>
+ )}
</RangesContainer>
)}
</SatsBundleContainer>
diff --git a/src/app/components/confirmBtcTransaction/itemRow/runeAmount.tsx b/src/app/components/confirmBtcTransaction/itemRow/runeAmount.tsx
index 76aa9d1ad..19d8cd8d8 100644
--- a/src/app/components/confirmBtcTransaction/itemRow/runeAmount.tsx
+++ b/src/app/components/confirmBtcTransaction/itemRow/runeAmount.tsx
@@ -1,8 +1,12 @@
-import { mapRuneNameToPlaceholder } from '@components/confirmBtcTransaction/utils';
+import { RightAlignedStyledFiatAmountText } from '@components/fiatAmountText';
import TokenImage from '@components/tokenImage';
+import useRuneFiatRateQuery from '@hooks/queries/runes/useRuneFiatRateQuery';
+import useWalletSelector from '@hooks/useWalletSelector';
import type { RuneBase } from '@secretkeylabs/xverse-core';
import { StyledP } from '@ui-library/common.styled';
import { ftDecimals } from '@utils/helper';
+import { mapRuneBaseToFungibleToken } from '@utils/mappers';
+import BigNumber from 'bignumber.js';
import { useTranslation } from 'react-i18next';
import { NumericFormat } from 'react-number-format';
import styled from 'styled-components';
@@ -13,7 +17,6 @@ const Container = styled.div<{ topMargin?: boolean }>((props) => ({
flexDirection: 'row',
alignItems: 'center',
marginBottom: props.theme.space.s,
- marginTop: props.topMargin ? props.theme.space.s : 0,
}));
const AvatarContainer = styled.div`
@@ -36,11 +39,6 @@ const Column = styled.div`
overflow: hidden;
`;
-const StyledPRight = styled(StyledP)`
- word-break: break-all;
- text-align: end;
-`;
-
type Props = {
rune: RuneBase;
hasSufficientBalance?: boolean;
@@ -53,14 +51,16 @@ export default function RuneAmount({
topMargin = false,
}: Props) {
const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
- const { runeName, amount, divisibility, symbol, inscriptionId } = rune;
+ const { runeName, amount, divisibility, symbol } = rune;
const amountWithDecimals = ftDecimals(String(amount), divisibility);
+ const { fiatCurrency } = useWalletSelector();
+ const { data: runeFiatRate } = useRuneFiatRateQuery(rune);
return (
<Container topMargin={topMargin}>
<AvatarContainer>
<TokenImage
currency="FT"
- fungibleToken={mapRuneNameToPlaceholder(runeName, symbol, inscriptionId)}
+ fungibleToken={mapRuneBaseToFungibleToken(rune)}
showProtocolIcon
loading={false}
size={32}
@@ -77,19 +77,27 @@ export default function RuneAmount({
thousandSeparator
suffix={` ${symbol}`}
renderText={(value: string) => (
- <StyledPRight
+ <StyledP
data-testid="send-rune-amount"
typography="body_medium_m"
color={hasSufficientBalance ? 'white_0' : 'danger_light'}
>
{value}
- </StyledPRight>
+ </StyledP>
)}
/>
</Row>
- <StyledP data-testid="rune-name" typography="body_medium_s" color="white_400">
- {runeName}
- </StyledP>
+ <Row>
+ <StyledP data-testid="rune-name" typography="body_medium_s" color="white_400">
+ {runeName}
+ </StyledP>
+ {runeFiatRate !== undefined && runeFiatRate > 0 && (
+ <RightAlignedStyledFiatAmountText
+ fiatAmount={BigNumber(amountWithDecimals).multipliedBy(runeFiatRate)}
+ fiatCurrency={fiatCurrency}
+ />
+ )}
+ </Row>
</Column>
</Container>
);
diff --git a/src/app/components/confirmBtcTransaction/receiveSection.tsx b/src/app/components/confirmBtcTransaction/receiveSection.tsx
deleted file mode 100644
index c956622e6..000000000
--- a/src/app/components/confirmBtcTransaction/receiveSection.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import { useParsedTxSummaryContext } from '@components/confirmBtcTransaction/hooks/useParsedTxSummaryContext';
-import RuneAmount from '@components/confirmBtcTransaction/itemRow/runeAmount';
-import { ArrowRight } from '@phosphor-icons/react';
-import type { btcTransaction } from '@secretkeylabs/xverse-core';
-import { StyledP } from '@ui-library/common.styled';
-import { useTranslation } from 'react-i18next';
-import { NumericFormat } from 'react-number-format';
-import styled from 'styled-components';
-import Theme from 'theme';
-import Amount from './itemRow/amount';
-import InscriptionSatributeRow from './itemRow/inscriptionSatributeRow';
-
-const Container = styled.div((props) => ({
- display: 'flex',
- flexDirection: 'column',
- background: props.theme.colors.elevation1,
- borderRadius: 12,
- paddingTop: props.theme.space.m,
- justifyContent: 'center',
- marginBottom: props.theme.space.s,
-}));
-
-const RowCenter = styled.div<{ spaceBetween?: boolean }>((props) => ({
- display: 'flex',
- flexDirection: 'row',
- alignItems: 'center',
- justifyContent: props.spaceBetween ? 'space-between' : 'initial',
-}));
-
-const Header = styled(RowCenter)((props) => ({
- padding: `0 ${props.theme.space.m}`,
-}));
-
-const RowContainer = styled.div<{ noPadding?: boolean; noMargin?: boolean }>((props) => ({
- padding: props.noPadding ? 0 : `0 ${props.theme.space.m}`,
- marginTop: props.noMargin ? 0 : `${props.theme.space.m}`,
-}));
-
-const AddressLabel = styled(StyledP)((props) => ({
- marginLeft: props.theme.space.xxs,
-}));
-
-const BundleHeader = styled.div((props) => ({
- display: 'flex',
- flex: 1,
- flexDirection: 'row',
- justifyContent: 'space-between',
- marginBottom: props.theme.space.m,
-}));
-
-type Props = {
- onShowInscription: (inscription: btcTransaction.IOInscription) => void;
-};
-function ReceiveSection({ onShowInscription }: Props) {
- const { t } = useTranslation('translation');
- const {
- netBtcAmount,
- showReceiveSection,
- receiveSection: {
- showOrdinalSection,
- showPaymentSection,
- showBtcAmount,
- inscriptionsRareSatsInPayment,
- ordinalRuneReceipts,
- outputsToOrdinal,
- paymentRuneReceipts,
- showOrdinalRunes,
- showPaymentRunes,
- },
- } = useParsedTxSummaryContext();
-
- if (!showReceiveSection) return null;
-
- return (
- <>
- {showOrdinalSection && (
- <Container>
- <Header spaceBetween>
- <StyledP typography="body_medium_m" color="white_200">
- {t('CONFIRM_TRANSACTION.YOU_WILL_RECEIVE')}
- </StyledP>
- <RowCenter>
- <ArrowRight weight="bold" color={Theme.colors.white_0} size={16} />
- <AddressLabel typography="body_medium_m">
- {t('CONFIRM_TRANSACTION.YOUR_ORDINAL_ADDRESS')}
- </AddressLabel>
- </RowCenter>
- </Header>
- {showOrdinalRunes &&
- ordinalRuneReceipts.map((receipt) => (
- <RowContainer key={receipt.runeName}>
- <BundleHeader>
- <div>
- <StyledP typography="body_medium_m" color="white_400">
- {t('COMMON.BUNDLE')}
- </StyledP>
- </div>
- <div>
- <NumericFormat
- value={546}
- displayType="text"
- thousandSeparator
- prefix={`${t('COMMON.SIZE')}: `}
- suffix={` ${t('COMMON.SATS')}`}
- renderText={(value: string) => (
- <StyledP typography="body_medium_m" color="white_400">
- {value}
- </StyledP>
- )}
- />
- </div>
- </BundleHeader>
- <RuneAmount rune={receipt} />
- </RowContainer>
- ))}
- {outputsToOrdinal.length > 0 && (
- <RowContainer>
- {outputsToOrdinal
- .sort((a, b) => b.inscriptions.length - a.inscriptions.length)
- .map((output, index) => (
- <InscriptionSatributeRow
- // eslint-disable-next-line react/no-array-index-key
- key={index}
- inscriptions={output.inscriptions}
- satributes={output.satributes}
- amount={output.amount}
- showAmount
- onShowInscription={onShowInscription}
- />
- ))}
- </RowContainer>
- )}
- </Container>
- )}
- {showPaymentSection && (
- <Container>
- <Header spaceBetween>
- <StyledP typography="body_medium_m" color="white_200">
- {t('CONFIRM_TRANSACTION.YOU_WILL_RECEIVE')}
- </StyledP>
- <RowCenter>
- <ArrowRight weight="bold" color={Theme.colors.white_0} size={16} />
- <AddressLabel typography="body_medium_m">
- {t('CONFIRM_TRANSACTION.YOUR_PAYMENT_ADDRESS')}
- </AddressLabel>
- </RowCenter>
- </Header>
- {showBtcAmount && (
- <RowContainer>
- <Amount amount={netBtcAmount} />
- </RowContainer>
- )}
- {showPaymentRunes &&
- paymentRuneReceipts.map((receipt) => (
- <RowContainer key={receipt.runeName}>
- <BundleHeader>
- <div>
- <StyledP typography="body_medium_m" color="white_400">
- {t('COMMON.BUNDLE')}
- </StyledP>
- </div>
- <div>
- <NumericFormat
- value={546}
- displayType="text"
- thousandSeparator
- prefix={`${t('COMMON.SIZE')}: `}
- suffix={` ${t('COMMON.SATS')}`}
- renderText={(value: string) => (
- <StyledP typography="body_medium_m" color="white_400">
- {value}
- </StyledP>
- )}
- />
- </div>
- </BundleHeader>
- <RuneAmount rune={receipt} />
- </RowContainer>
- ))}
- {inscriptionsRareSatsInPayment.length > 0 && (
- <RowContainer>
- {inscriptionsRareSatsInPayment
- .sort((a, b) => b.inscriptions.length - a.inscriptions.length)
- .map((output, index) => (
- <InscriptionSatributeRow
- // eslint-disable-next-line react/no-array-index-key
- key={index}
- inscriptions={output.inscriptions}
- satributes={output.satributes}
- amount={output.amount}
- showAmount
- onShowInscription={onShowInscription}
- />
- ))}
- </RowContainer>
- )}
- </Container>
- )}
- </>
- );
-}
-
-export default ReceiveSection;
diff --git a/src/app/components/confirmBtcTransaction/sections/feeSection.tsx b/src/app/components/confirmBtcTransaction/sections/feeSection.tsx
new file mode 100644
index 000000000..d3f42110e
--- /dev/null
+++ b/src/app/components/confirmBtcTransaction/sections/feeSection.tsx
@@ -0,0 +1,115 @@
+import TransferFeeView from '@components/transferFeeView';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
+import useBtcFeeRate from '@hooks/useBtcFeeRate';
+import useWalletSelector from '@hooks/useWalletSelector';
+import {
+ btcTransaction,
+ getBtcFiatEquivalent,
+ type RareSatsType,
+} from '@secretkeylabs/xverse-core';
+import SelectFeeRate from '@ui-components/selectFeeRate';
+import BigNumber from 'bignumber.js';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+import { useTxSummaryContext } from '../hooks/useTxSummaryContext';
+import AmountWithInscriptionSatribute from '../itemRow/amountWithInscriptionSatribute';
+
+const Container = styled.div((props) => ({
+ background: props.theme.colors.elevation1,
+ borderRadius: props.theme.radius(2),
+ padding: props.theme.space.m,
+ paddingBottom: 20,
+ marginBottom: props.theme.space.s,
+}));
+
+const Subtitle = styled.p`
+ ${(props) => props.theme.typography.body_medium_m};
+ color: ${(props) => props.theme.colors.white_200};
+ margin-top: ${(props) => props.theme.space.s};
+ margin-bottom: ${(props) => props.theme.space.xs};
+`;
+
+type Props = {
+ feeRate?: number;
+ getFeeForFeeRate?: (
+ feeRate: number,
+ useEffectiveFeeRate?: boolean,
+ ) => Promise<number | undefined>;
+ onFeeRateSet?: (feeRate: number) => void;
+ isSubmitting?: boolean;
+ onShowInscription: (
+ inscription:
+ | (btcTransaction.IOInscription & { satributes: RareSatsType[] })
+ | (Omit<btcTransaction.IOInscription, 'offset'> & { satributes: RareSatsType[] }),
+ ) => void;
+};
+
+function FeeSection({
+ feeRate,
+ getFeeForFeeRate,
+ onFeeRateSet,
+ isSubmitting,
+ onShowInscription,
+}: Props) {
+ const { fiatCurrency } = useWalletSelector();
+ const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
+ const { t: tUnits } = useTranslation('translation', { keyPrefix: 'UNITS' });
+ const { data: recommendedFees } = useBtcFeeRate();
+ const { btcFiatRate } = useSupportedCoinRates();
+
+ const { extractedTxSummary } = useTxSummaryContext();
+
+ const isUserSummary = extractedTxSummary.type === 'user';
+ const fees = isUserSummary ? extractedTxSummary.feeOutput.amount : extractedTxSummary.fee ?? 0;
+ const showFeeSelector = !!(feeRate && getFeeForFeeRate && onFeeRateSet);
+
+ const satsToFiat = (sats: string): string =>
+ getBtcFiatEquivalent(new BigNumber(sats), new BigNumber(btcFiatRate)).toString();
+
+ if (showFeeSelector && recommendedFees) {
+ return (
+ <>
+ <Subtitle>{t('FEES')}</Subtitle>
+ <Container>
+ <SelectFeeRate
+ fee={fees.toString()}
+ feeUnits="sats"
+ feeRate={String(feeRate)}
+ feeRateUnits={tUnits('SATS_PER_VB')}
+ setFeeRate={(newFeeRate) => onFeeRateSet(+newFeeRate)}
+ baseToFiat={satsToFiat}
+ fiatUnit={fiatCurrency}
+ getFeeForFeeRate={getFeeForFeeRate}
+ feeRates={{
+ medium: recommendedFees.regular,
+ high: recommendedFees.priority,
+ }}
+ feeRateLimits={recommendedFees.limits}
+ isLoading={isSubmitting}
+ />
+ <AmountWithInscriptionSatribute
+ inscriptions={isUserSummary ? extractedTxSummary.feeOutput.inscriptions : []}
+ satributes={isUserSummary ? extractedTxSummary.feeOutput.satributes : []}
+ onShowInscription={onShowInscription}
+ />
+ </Container>
+ </>
+ );
+ }
+
+ if (!showFeeSelector && fees > 0) {
+ return (
+ <TransferFeeView
+ fee={new BigNumber(fees)}
+ currency={t('SATS')}
+ satributes={isUserSummary ? extractedTxSummary.feeOutput.satributes : []}
+ inscriptions={isUserSummary ? extractedTxSummary.feeOutput.inscriptions : []}
+ onShowInscription={onShowInscription}
+ />
+ );
+ }
+
+ return null;
+}
+
+export default FeeSection;
diff --git a/src/app/components/confirmBtcTransaction/ContentLabel/common.ts b/src/app/components/confirmBtcTransaction/sections/inscribeSection/ContentLabel/common.ts
similarity index 100%
rename from src/app/components/confirmBtcTransaction/ContentLabel/common.ts
rename to src/app/components/confirmBtcTransaction/sections/inscribeSection/ContentLabel/common.ts
diff --git a/src/app/components/confirmBtcTransaction/ContentLabel/index.tsx b/src/app/components/confirmBtcTransaction/sections/inscribeSection/ContentLabel/index.tsx
similarity index 100%
rename from src/app/components/confirmBtcTransaction/ContentLabel/index.tsx
rename to src/app/components/confirmBtcTransaction/sections/inscribeSection/ContentLabel/index.tsx
diff --git a/src/app/components/confirmBtcTransaction/ContentLabel/preview.tsx b/src/app/components/confirmBtcTransaction/sections/inscribeSection/ContentLabel/preview.tsx
similarity index 100%
rename from src/app/components/confirmBtcTransaction/ContentLabel/preview.tsx
rename to src/app/components/confirmBtcTransaction/sections/inscribeSection/ContentLabel/preview.tsx
diff --git a/src/app/components/confirmBtcTransaction/ContentLabel/utils.ts b/src/app/components/confirmBtcTransaction/sections/inscribeSection/ContentLabel/utils.ts
similarity index 100%
rename from src/app/components/confirmBtcTransaction/ContentLabel/utils.ts
rename to src/app/components/confirmBtcTransaction/sections/inscribeSection/ContentLabel/utils.ts
diff --git a/src/app/components/confirmBtcTransaction/inscribeSection/index.tsx b/src/app/components/confirmBtcTransaction/sections/inscribeSection/index.tsx
similarity index 94%
rename from src/app/components/confirmBtcTransaction/inscribeSection/index.tsx
rename to src/app/components/confirmBtcTransaction/sections/inscribeSection/index.tsx
index 3a5c3586e..82701674e 100644
--- a/src/app/components/confirmBtcTransaction/inscribeSection/index.tsx
+++ b/src/app/components/confirmBtcTransaction/sections/inscribeSection/index.tsx
@@ -3,8 +3,8 @@ import { ArrowDown } from '@phosphor-icons/react';
import { StyledP } from '@ui-library/common.styled';
import { getShortTruncatedAddress } from '@utils/helper';
import { useTranslation } from 'react-i18next';
-import ContentLabel from '../ContentLabel';
-import { Pill, StyledPillLabel } from '../runes';
+import { Pill, StyledPillLabel } from '../runesSection/styles';
+import ContentLabel from './ContentLabel';
import {
ButtonIcon,
CardContainer,
diff --git a/src/app/components/confirmBtcTransaction/inscribeSection/styles.tsx b/src/app/components/confirmBtcTransaction/sections/inscribeSection/styles.tsx
similarity index 100%
rename from src/app/components/confirmBtcTransaction/inscribeSection/styles.tsx
rename to src/app/components/confirmBtcTransaction/sections/inscribeSection/styles.tsx
diff --git a/src/app/components/confirmBtcTransaction/sections/receiveSection.tsx b/src/app/components/confirmBtcTransaction/sections/receiveSection.tsx
new file mode 100644
index 000000000..06e7dde8f
--- /dev/null
+++ b/src/app/components/confirmBtcTransaction/sections/receiveSection.tsx
@@ -0,0 +1,130 @@
+import useSelectedAccount from '@hooks/useSelectedAccount';
+import type {
+ AggregatedOutputSummary,
+ btcTransaction,
+ RareSatsType,
+} from '@secretkeylabs/xverse-core';
+import { StyledP } from '@ui-library/common.styled';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+import { useTxSummaryContext } from '../hooks/useTxSummaryContext';
+import Amount from '../itemRow/amount';
+import InscriptionSatributeRow from '../itemRow/inscriptionSatributeRow';
+import RuneAmount from '../itemRow/runeAmount';
+
+const Title = styled.p`
+ ${(props) => props.theme.typography.body_medium_m};
+ color: ${(props) => props.theme.colors.white_200};
+ margin-top: ${(props) => props.theme.space.s};
+ margin-bottom: ${(props) => props.theme.space.xs};
+`;
+
+const Container = styled.div((props) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ background: props.theme.colors.elevation1,
+ borderRadius: 12,
+ paddingTop: props.theme.space.m,
+ justifyContent: 'center',
+ marginBottom: props.theme.space.s,
+}));
+
+const SubHeader = styled.div((props) => ({
+ display: 'flex',
+ flex: 1,
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ marginBottom: props.theme.space.s,
+}));
+
+const RowContainer = styled.div<{ noPadding?: boolean; noMargin?: boolean }>((props) => ({
+ padding: props.noPadding ? 0 : `0 ${props.theme.space.m}`,
+ marginBottom: props.noMargin ? 0 : props.theme.space.m,
+}));
+
+type Props = {
+ onShowInscription: (
+ inscription:
+ | (btcTransaction.IOInscription & { satributes: RareSatsType[] })
+ | (Omit<btcTransaction.IOInscription, 'offset'> & { satributes: RareSatsType[] }),
+ ) => void;
+};
+
+function ReceiveSection({ onShowInscription }: Props) {
+ const { t } = useTranslation('translation');
+ const { extractedTxSummary } = useTxSummaryContext();
+ const { ordinalsAddress, btcAddress } = useSelectedAccount();
+ const txIsFinal = extractedTxSummary.isFinal;
+
+ const extractReceiveDetails = (address: string, receive: AggregatedOutputSummary) => {
+ const { btcSatsAmount, inscriptions, satributes, runes } = receive;
+
+ const showReceipts =
+ btcSatsAmount > 0 || inscriptions.length || satributes.length || runes.length;
+
+ if (!showReceipts) {
+ return null;
+ }
+
+ return (
+ <>
+ <Title>{t('CONFIRM_TRANSACTION.YOU_WILL_RECEIVE')}
+
+
+
+
+ {t('COMMON.TO')}
+
+
+ {address === btcAddress && t('CONFIRM_TRANSACTION.YOUR_PAYMENT_ADDRESS')}
+ {address === ordinalsAddress && t('CONFIRM_TRANSACTION.YOUR_ORDINAL_ADDRESS')}
+
+
+ {btcSatsAmount > 0 && (
+
+
+ )}
+ {txIsFinal &&
+ runes.map((receipt) => (
+
+
+ ))}
+
+
+
+ );
+ };
+
+ return (
+ <>
+ {extractedTxSummary.type === 'user' && (
+ <>
+ {extractReceiveDetails(ordinalsAddress, extractedTxSummary.ordinalsAddressReceipts)}
+ {extractReceiveDetails(btcAddress, extractedTxSummary.paymentsAddressReceipts)}
+
+ )}
+ {extractedTxSummary.type === 'aggregated' && (
+ <>
+ {extractReceiveDetails(ordinalsAddress, extractedTxSummary.receipts[ordinalsAddress])}
+ {extractReceiveDetails(btcAddress, extractedTxSummary.receipts[btcAddress])}
+
+ )}
+
+ );
+}
+
+export default ReceiveSection;
diff --git a/src/app/components/confirmBtcTransaction/burnSection.tsx b/src/app/components/confirmBtcTransaction/sections/runesSection/burnSection.tsx
similarity index 79%
rename from src/app/components/confirmBtcTransaction/burnSection.tsx
rename to src/app/components/confirmBtcTransaction/sections/runesSection/burnSection.tsx
index dd7883edc..14824fcba 100644
--- a/src/app/components/confirmBtcTransaction/burnSection.tsx
+++ b/src/app/components/confirmBtcTransaction/sections/runesSection/burnSection.tsx
@@ -1,8 +1,8 @@
-import RuneAmount from '@components/confirmBtcTransaction/itemRow/runeAmount';
-import type { RuneSummary } from '@secretkeylabs/xverse-core';
import { InputFeedback } from '@ui-library/inputFeedback';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
+import { useTxSummaryContext } from '../../hooks/useTxSummaryContext';
+import RuneAmount from '../../itemRow/runeAmount';
const Container = styled.div((props) => ({
display: 'flex',
@@ -30,21 +30,19 @@ const Header = styled(RowCenter)((props) => ({
padding: `0 ${props.theme.space.m}`,
}));
-type Props = {
- burns?: RuneSummary['burns'];
-};
-
-function BurnSection({ burns }: Props) {
+function BurnSection() {
const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
- if (!burns?.length) return null;
+ const { extractedTxSummary } = useTxSummaryContext();
+
+ if (!extractedTxSummary.runes.burns?.length) return null;
return (
- {burns.map((burn) => (
+ {extractedTxSummary.runes.burns.map((burn) => (
diff --git a/src/app/components/confirmBtcTransaction/delegateSection.tsx b/src/app/components/confirmBtcTransaction/sections/runesSection/delegateSection.tsx
similarity index 54%
rename from src/app/components/confirmBtcTransaction/delegateSection.tsx
rename to src/app/components/confirmBtcTransaction/sections/runesSection/delegateSection.tsx
index 099f95306..e47389a3f 100644
--- a/src/app/components/confirmBtcTransaction/delegateSection.tsx
+++ b/src/app/components/confirmBtcTransaction/sections/runesSection/delegateSection.tsx
@@ -1,13 +1,20 @@
import DropDownIcon from '@assets/img/transactions/dropDownIcon.svg';
-import RuneAmount from '@components/confirmBtcTransaction/itemRow/runeAmount';
import { WarningOctagon } from '@phosphor-icons/react';
import { animated, config, useSpring } from '@react-spring/web';
-import type { RuneSummary } from '@secretkeylabs/xverse-core';
import { StyledP } from '@ui-library/common.styled';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
-import Theme from 'theme';
+import Theme from '../../../../../theme';
+import { useTxSummaryContext } from '../../hooks/useTxSummaryContext';
+import RuneAmount from '../../itemRow/runeAmount';
+
+const Title = styled.p`
+ ${(props) => props.theme.typography.body_medium_m};
+ color: ${(props) => props.theme.colors.white_200};
+ margin-top: ${(props) => props.theme.space.s};
+ margin-bottom: ${(props) => props.theme.space.xs};
+`;
const Container = styled.div((props) => ({
display: 'flex',
@@ -21,7 +28,6 @@ const Container = styled.div((props) => ({
const RowContainer = styled.div((props) => ({
padding: `0 ${props.theme.space.m}`,
- marginTop: `${props.theme.space.m}`,
}));
const RowCenter = styled.div<{ spaceBetween?: boolean }>((props) => ({
@@ -31,10 +37,6 @@ const RowCenter = styled.div<{ spaceBetween?: boolean }>((props) => ({
justifyContent: props.spaceBetween ? 'space-between' : 'initial',
}));
-const Header = styled(RowCenter)((props) => ({
- padding: `0 ${props.theme.space.m}`,
-}));
-
const WarningButton = styled.button`
display: flex;
flex-direction: row;
@@ -50,16 +52,17 @@ const DelegationDescription = styled(StyledP)`
padding-bottom: ${(props) => props.theme.space.xs};
`;
-const Title = styled(StyledP)`
+const Warning = styled(StyledP)`
margin-left: ${(props) => props.theme.space.xxs};
`;
-type Props = {
- delegations?: RuneSummary['receipts'];
-};
-
-function DelegateSection({ delegations }: Props) {
+function DelegateSection() {
const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
+ const { extractedTxSummary } = useTxSummaryContext();
+
+ const delegations = !extractedTxSummary.isFinal
+ ? Object.values(extractedTxSummary.transfers).flatMap((addressItem) => addressItem.runes)
+ : [];
const [showDelegationInfo, setShowDelegationInfo] = useState(false);
@@ -78,32 +81,33 @@ function DelegateSection({ delegations }: Props) {
if (!delegations?.length) return null;
return (
-
-
-
- {t('YOU_WILL_DELEGATE')}
-
-
- {delegations.map((delegation) => (
-
-
- ))}
- setShowDelegationInfo((prevState) => !prevState)}>
-
-
- {t('UNKNOWN_RUNE_RECIPIENTS')}
-
-
-
-
-
- {t('RUNE_DELEGATION_DESCRIPTION')}
-
-
-
+ <>
+ {t('YOU_WILL_DELEGATE')}
+
+ {delegations.map((delegation) => (
+
+
+ ))}
+ setShowDelegationInfo((prevState) => !prevState)}
+ >
+
+
+ {t('UNKNOWN_RUNE_RECIPIENTS')}
+
+
+
+
+
+ {t('RUNE_DELEGATION_DESCRIPTION')}
+
+
+
+
);
}
diff --git a/src/app/components/confirmBtcTransaction/etchSection.tsx b/src/app/components/confirmBtcTransaction/sections/runesSection/etchSection.tsx
similarity index 98%
rename from src/app/components/confirmBtcTransaction/etchSection.tsx
rename to src/app/components/confirmBtcTransaction/sections/runesSection/etchSection.tsx
index 7910bc777..902a76307 100644
--- a/src/app/components/confirmBtcTransaction/etchSection.tsx
+++ b/src/app/components/confirmBtcTransaction/sections/runesSection/etchSection.tsx
@@ -11,8 +11,8 @@ import { ftDecimals, getShortTruncatedAddress } from '@utils/helper';
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { NumericFormat } from 'react-number-format';
-import Theme from '../../../theme';
-import InscribeSection from './inscribeSection';
+import Theme from '../../../../../theme';
+import InscribeSection from '../inscribeSection';
import {
AddressLabel,
Container,
@@ -23,7 +23,7 @@ import {
RuneImage,
RuneSymbol,
RuneValue,
-} from './runes';
+} from './styles';
type Props = {
etch?: EtchActionDetails;
diff --git a/src/app/components/confirmBtcTransaction/mintSection.tsx b/src/app/components/confirmBtcTransaction/sections/runesSection/mintSection.tsx
similarity index 84%
rename from src/app/components/confirmBtcTransaction/mintSection.tsx
rename to src/app/components/confirmBtcTransaction/sections/runesSection/mintSection.tsx
index 2789261ad..4b3c72ad9 100644
--- a/src/app/components/confirmBtcTransaction/mintSection.tsx
+++ b/src/app/components/confirmBtcTransaction/sections/runesSection/mintSection.tsx
@@ -1,11 +1,12 @@
import useSelectedAccount from '@hooks/useSelectedAccount';
import { ArrowRight } from '@phosphor-icons/react';
-import type { MintActionDetails, RuneSummary } from '@secretkeylabs/xverse-core';
+import type { MintActionDetails, RuneMint } from '@secretkeylabs/xverse-core';
import { StyledP } from '@ui-library/common.styled';
import { ftDecimals, getShortTruncatedAddress } from '@utils/helper';
import { useTranslation } from 'react-i18next';
import { NumericFormat } from 'react-number-format';
-import Theme from '../../../theme';
+import Theme from '../../../../../theme';
+import { useTxSummaryContext } from '../../hooks/useTxSummaryContext';
import {
AddressLabel,
Container,
@@ -18,25 +19,24 @@ import {
RuneSymbol,
RuneValue,
StyledPillLabel,
-} from './runes';
+} from './styles';
-type Props = {
- mints?: RuneSummary['mint'][] | MintActionDetails[] | undefined[];
-};
-
-function MintSection({ mints }: Props) {
+function MintSection() {
const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
const { ordinalsAddress } = useSelectedAccount();
- if (!mints) return null;
+
+ const { extractedTxSummary, runeMintDetails, batchMintDetails = [] } = useTxSummaryContext();
+
+ if (!extractedTxSummary.runes.mint && !runeMintDetails && !batchMintDetails) return null;
const isMintActionDetails = (
- obj: RuneSummary['mint'] | MintActionDetails | undefined,
+ obj: RuneMint | MintActionDetails | undefined,
): obj is MintActionDetails => obj !== undefined && 'repeats' in obj;
return (
<>
- {mints.map(
- (mint: RuneSummary['mint'] | MintActionDetails | undefined) =>
+ {[extractedTxSummary.runes.mint, runeMintDetails, ...batchMintDetails].map(
+ (mint: RuneMint | MintActionDetails | undefined) =>
mint && (
diff --git a/src/app/components/confirmBtcTransaction/runes.tsx b/src/app/components/confirmBtcTransaction/sections/runesSection/styles.tsx
similarity index 100%
rename from src/app/components/confirmBtcTransaction/runes.tsx
rename to src/app/components/confirmBtcTransaction/sections/runesSection/styles.tsx
diff --git a/src/app/components/confirmBtcTransaction/sections/sendSection.tsx b/src/app/components/confirmBtcTransaction/sections/sendSection.tsx
new file mode 100644
index 000000000..00dfaf9d1
--- /dev/null
+++ b/src/app/components/confirmBtcTransaction/sections/sendSection.tsx
@@ -0,0 +1,117 @@
+import type { btcTransaction, RareSatsType } from '@secretkeylabs/xverse-core';
+import { StyledP } from '@ui-library/common.styled';
+import { getTruncatedAddress } from '@utils/helper';
+import { useTranslation } from 'react-i18next';
+import { NumericFormat } from 'react-number-format';
+import styled from 'styled-components';
+import { useTxSummaryContext } from '../hooks/useTxSummaryContext';
+import Amount from '../itemRow/amount';
+import InscriptionSatributeRow from '../itemRow/inscriptionSatributeRow';
+import RuneAmount from '../itemRow/runeAmount';
+
+const Title = styled.p`
+ ${(props) => props.theme.typography.body_medium_m};
+ color: ${(props) => props.theme.colors.white_200};
+ margin-top: ${(props) => props.theme.space.s};
+ margin-bottom: ${(props) => props.theme.space.xs};
+`;
+
+const Container = styled.div((props) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ background: props.theme.colors.elevation1,
+ borderRadius: props.theme.radius(2),
+ paddingTop: props.theme.space.m,
+ justifyContent: 'center',
+ marginBottom: props.theme.space.s,
+}));
+
+const RowContainer = styled.div<{ noPadding?: boolean; noMargin?: boolean }>((props) => ({
+ padding: props.noPadding ? 0 : `0 ${props.theme.space.m}`,
+ marginBottom: props.noMargin ? 0 : props.theme.space.m,
+}));
+
+const SubHeader = styled.div((props) => ({
+ display: 'flex',
+ flex: 1,
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ marginBottom: props.theme.space.s,
+}));
+
+function SendSection({
+ onShowInscription,
+}: {
+ onShowInscription: (
+ inscription:
+ | (btcTransaction.IOInscription & { satributes: RareSatsType[] })
+ | (Omit & { satributes: RareSatsType[] }),
+ ) => void;
+}) {
+ const { t } = useTranslation('translation');
+
+ const { extractedTxSummary } = useTxSummaryContext();
+
+ if (extractedTxSummary.type !== 'user' || !extractedTxSummary.transfers.length) return null;
+
+ return (
+ <>
+ {t('CONFIRM_TRANSACTION.YOU_WILL_SEND')}
+ {extractedTxSummary.transfers.map((transfer) => (
+
+
+
+
+ {t('COMMON.TO')}
+
+
+ {/* TODO - clarify what to display when not an address type */}
+ {transfer.address
+ ? getTruncatedAddress(transfer.address, 6)
+ : transfer.destinationType}
+
+
+ {transfer.btcSatsAmount > 0 &&
+
+ {t('COMMON.BUNDLE')}
+
+ (
+
+ {value}
+
+ )}
+ />
+
+ {bundle.runes.map((runeTransfer, i) => (
+ 0}
+ hasSufficientBalance
+ />
+ ))}
+
+
+ ))}
+
+ );
+}
+
+export default SendSection;
diff --git a/src/app/components/confirmBtcTransaction/sections/transferSection.tsx b/src/app/components/confirmBtcTransaction/sections/transferSection.tsx
new file mode 100644
index 000000000..71d4b259c
--- /dev/null
+++ b/src/app/components/confirmBtcTransaction/sections/transferSection.tsx
@@ -0,0 +1,151 @@
+import useSelectedAccount from '@hooks/useSelectedAccount';
+import { WarningOctagon } from '@phosphor-icons/react';
+import type {
+ AggregatedInputSummary,
+ btcTransaction,
+ RareSatsType,
+} from '@secretkeylabs/xverse-core';
+import { StyledP } from '@ui-library/common.styled';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+import Theme from '../../../../theme';
+import { useTxSummaryContext } from '../hooks/useTxSummaryContext';
+import Amount from '../itemRow/amount';
+import InscriptionSatributeRow from '../itemRow/inscriptionSatributeRow';
+import RuneAmount from '../itemRow/runeAmount';
+
+const Title = styled.p`
+ ${(props) => props.theme.typography.body_medium_m};
+ color: ${(props) => props.theme.colors.white_200};
+ margin-top: ${(props) => props.theme.space.s};
+ margin-bottom: ${(props) => props.theme.space.xs};
+`;
+
+const Container = styled.div((props) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ background: props.theme.colors.elevation1,
+ borderRadius: props.theme.radius(2),
+ paddingTop: props.theme.space.m,
+ justifyContent: 'center',
+ marginBottom: props.theme.space.s,
+}));
+
+const RowContainer = styled.div<{ noPadding?: boolean; noMargin?: boolean }>((props) => ({
+ padding: props.noPadding ? 0 : `0 ${props.theme.space.m}`,
+ marginBottom: props.noMargin ? 0 : props.theme.space.m,
+}));
+
+const WarningContainer = styled.div((props) => ({
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: props.theme.space.xs,
+ marginTop: props.theme.space.s,
+}));
+
+const WarningText = styled(StyledP)`
+ flex: 1 0 0;
+`;
+
+const SubHeader = styled.div((props) => ({
+ display: 'flex',
+ flex: 1,
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ marginBottom: props.theme.space.s,
+}));
+
+type Props = {
+ onShowInscription: (
+ inscription:
+ | (btcTransaction.IOInscription & { satributes: RareSatsType[] })
+ | (Omit & { satributes: RareSatsType[] }),
+ ) => void;
+};
+
+function TransferSection({ onShowInscription }: Props) {
+ const { btcAddress, ordinalsAddress } = useSelectedAccount();
+ const { t } = useTranslation('translation');
+ const { extractedTxSummary } = useTxSummaryContext();
+
+ if (
+ extractedTxSummary.type !== 'aggregated' ||
+ !Object.values(extractedTxSummary.transfers).length
+ ) {
+ return null;
+ }
+
+ const txIsFinal = extractedTxSummary.isFinal;
+
+ const extractTransferDetails = (address: string, transfer: AggregatedInputSummary) => {
+ const { btcSatsAmount, inscriptions, satributes, runes } = transfer;
+
+ const showTransfers =
+ (txIsFinal && btcSatsAmount > 0) ||
+ inscriptions.length ||
+ satributes.length ||
+ (txIsFinal && runes.length);
+
+ if (!showTransfers) return null;
+
+ return (
+ <>
+ {t('CONFIRM_TRANSACTION.YOU_WILL_TRANSFER')}
+
+
+
+
+ {t('COMMON.FROM')}
+
+
+ {address === btcAddress && t('CONFIRM_TRANSACTION.YOUR_PAYMENT_ADDRESS')}
+ {address === ordinalsAddress && t('CONFIRM_TRANSACTION.YOUR_ORDINAL_ADDRESS')}
+
+
+ {txIsFinal && btcSatsAmount > 0 && (
+
+
+
+ {t('CONFIRM_TRANSACTION.BTC_TRANSFER_WARNING')}
+
+
+
+ )}
+ {txIsFinal &&
+ runes.map((runeTransfer) => (
+
+
+ ))}
+
+
+
+ );
+ };
+
+ return (
+ <>
+ {extractedTxSummary.transfers[btcAddress] &&
+ extractTransferDetails(btcAddress, extractedTxSummary.transfers[btcAddress])}
+ {extractedTxSummary.transfers[ordinalsAddress] &&
+ extractTransferDetails(ordinalsAddress, extractedTxSummary.transfers[ordinalsAddress])}
+
+ );
+}
+
+export default TransferSection;
diff --git a/src/app/components/confirmBtcTransaction/sendSection.tsx b/src/app/components/confirmBtcTransaction/sendSection.tsx
deleted file mode 100644
index e84e28733..000000000
--- a/src/app/components/confirmBtcTransaction/sendSection.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { useParsedTxSummaryContext } from '@components/confirmBtcTransaction/hooks/useParsedTxSummaryContext';
-import RuneAmount from '@components/confirmBtcTransaction/itemRow/runeAmount';
-import type { btcTransaction } from '@secretkeylabs/xverse-core';
-import { StyledP } from '@ui-library/common.styled';
-import { getTruncatedAddress } from '@utils/helper';
-import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
-import Amount from './itemRow/amount';
-import AmountWithInscriptionSatribute from './itemRow/amountWithInscriptionSatribute';
-import InscriptionSatributeRow from './itemRow/inscriptionSatributeRow';
-
-const Title = styled.p`
- ${(props) => props.theme.typography.body_medium_m};
- color: ${(props) => props.theme.colors.white_200};
- margin-top: ${(props) => props.theme.space.s};
- margin-bottom: ${(props) => props.theme.space.xs};
-`;
-
-const Container = styled.div((props) => ({
- display: 'flex',
- flexDirection: 'column',
- background: props.theme.colors.elevation1,
- borderRadius: props.theme.radius(2),
- paddingTop: props.theme.space.m,
- justifyContent: 'center',
- marginBottom: props.theme.space.s,
-}));
-
-const RowContainer = styled.div<{ noPadding?: boolean; noMargin?: boolean }>((props) => ({
- padding: props.noPadding ? 0 : `0 ${props.theme.space.m}`,
- marginBottom: props.noMargin ? 0 : props.theme.space.m,
-}));
-
-const BundleHeader = styled.div((props) => ({
- display: 'flex',
- flex: 1,
- flexDirection: 'row',
- justifyContent: 'space-between',
- marginBottom: props.theme.space.s,
-}));
-
-function SendSection({
- onShowInscription,
-}: {
- onShowInscription: (inscription: btcTransaction.IOInscription) => void;
-}) {
- const { t } = useTranslation('translation');
- const {
- showSendSection,
- sendSection: { bundledOutputs, inscriptionsFromPayment, satributesFromPayment },
- } = useParsedTxSummaryContext();
-
- if (!showSendSection || !Object.entries(bundledOutputs).length) return null;
-
- return (
- <>
- {t('CONFIRM_TRANSACTION.YOU_WILL_SEND')}
- {Object.entries(bundledOutputs).map(([address, bundle], index) => (
-
-
-
-
- {t('COMMON.TO')}
-
-
- {getTruncatedAddress(address, 6)}
-
-
-
-
- {bundle.runeTransfers.map((runeTransfer, i) => (
- 0}
- hasSufficientBalance={runeTransfer.hasSufficientBalance}
- />
- ))}
- {bundle.outputs.map((output) => (
- 0 || bundle.runeTransfers.length > 0}
- showAmount
- onShowInscription={onShowInscription}
- />
- ))}
-
-
- ))}
-
- );
-}
-
-export default SendSection;
diff --git a/src/app/components/confirmBtcTransaction/transactionSummary.tsx b/src/app/components/confirmBtcTransaction/transactionSummary.tsx
index e54e7c2fb..60705b248 100644
--- a/src/app/components/confirmBtcTransaction/transactionSummary.tsx
+++ b/src/app/components/confirmBtcTransaction/transactionSummary.tsx
@@ -1,39 +1,21 @@
+import AssetModal from '@components/assetModal';
import TransactionDetailComponent from '@components/transactionDetailComponent';
import useWalletSelector from '@hooks/useWalletSelector';
-
-import AssetModal from '@components/assetModal';
-import BurnSection from '@components/confirmBtcTransaction/burnSection';
-import MintSection from '@components/confirmBtcTransaction/mintSection';
-import TransferFeeView from '@components/transferFeeView';
-import useCoinRates from '@hooks/queries/useCoinRates';
-import useBtcFeeRate from '@hooks/useBtcFeeRate';
-import {
- btcTransaction,
- getBtcFiatEquivalent,
- type RuneSummaryActions,
-} from '@secretkeylabs/xverse-core';
-import SelectFeeRate from '@ui-components/selectFeeRate';
+import { btcTransaction, type RareSatsType } from '@secretkeylabs/xverse-core';
import Callout from '@ui-library/callout';
-import BigNumber from 'bignumber.js';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
-import DelegateSection from './delegateSection';
-import EtchSection from './etchSection';
-import { useParsedTxSummaryContext } from './hooks/useParsedTxSummaryContext';
-import AmountWithInscriptionSatribute from './itemRow/amountWithInscriptionSatribute';
-import ReceiveSection from './receiveSection';
-import SendSection from './sendSection';
-import TransferSection from './transferSection';
-import TxInOutput from './txInOutput/txInOutput';
-
-const Container = styled.div((props) => ({
- background: props.theme.colors.elevation1,
- borderRadius: props.theme.radius(2),
- padding: props.theme.space.m,
- paddingBottom: 20,
- marginBottom: props.theme.space.s,
-}));
+import { useTxSummaryContext } from './hooks/useTxSummaryContext';
+import FeeSection from './sections/feeSection';
+import ReceiveSection from './sections/receiveSection';
+import BurnSection from './sections/runesSection/burnSection';
+import DelegateSection from './sections/runesSection/delegateSection';
+import EtchSection from './sections/runesSection/etchSection';
+import MintSection from './sections/runesSection/mintSection';
+import SendSection from './sections/sendSection';
+import TransferSection from './sections/transferSection';
+import TxInOutput from './txInOutput';
const WarningCallout = styled(Callout)`
margin-bottom: ${(props) => props.theme.space.m};
@@ -47,40 +29,35 @@ const Subtitle = styled.p`
`;
type Props = {
+ feeRate?: number;
getFeeForFeeRate?: (
feeRate: number,
useEffectiveFeeRate?: boolean,
) => Promise;
onFeeRateSet?: (feeRate: number) => void;
- feeRate?: number;
isSubmitting?: boolean;
+ hideDetails?: boolean;
};
-function TransactionSummary({ isSubmitting, getFeeForFeeRate, onFeeRateSet, feeRate }: Props) {
+function TransactionSummary({
+ feeRate,
+ getFeeForFeeRate,
+ onFeeRateSet,
+ isSubmitting,
+ hideDetails,
+}: Props) {
const [inscriptionToShow, setInscriptionToShow] = useState<
- btcTransaction.IOInscription | undefined
+ | (btcTransaction.IOInscription & { satributes: RareSatsType[] })
+ | (Omit & { satributes: RareSatsType[] })
+ | undefined
>(undefined);
- const { btcFiatRate } = useCoinRates();
- const { network, fiatCurrency } = useWalletSelector();
+ const { network } = useWalletSelector();
const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
- const { t: tUnits } = useTranslation('translation', { keyPrefix: 'UNITS' });
- const { data: recommendedFees } = useBtcFeeRate();
- const {
- summary,
- runeSummary,
- isUnconfirmedInput,
- hasOutputScript,
- showCenotaphCallout,
- transactionIsFinal,
- } = useParsedTxSummaryContext();
+ const { extractedTxSummary, runeEtchDetails } = useTxSummaryContext();
- const satsToFiat = (sats: string) =>
- getBtcFiatEquivalent(new BigNumber(sats), new BigNumber(btcFiatRate)).toString();
-
- const showFeeSelector = !!(feeRate && getFeeForFeeRate && onFeeRateSet);
-
- const hasRuneDelegation = !transactionIsFinal;
+ const { hasUnconfirmedInputs, hasOutputScript, runes } = extractedTxSummary;
+ const { hasCenotaph, mint } = runes;
return (
<>
@@ -94,72 +71,38 @@ function TransactionSummary({ isSubmitting, getFeeForFeeRate, onFeeRateSet, feeR
}}
/>
)}
- {isUnconfirmedInput && (
+ {hasUnconfirmedInputs && (
{t('TRANSACTION_DETAILS')}
-
+ {t('TRANSACTION_DETAILS')} }
{t('FEES')}
-
- onFeeRateSet(+newFeeRate)}
- baseToFiat={satsToFiat}
- fiatUnit={fiatCurrency}
- getFeeForFeeRate={getFeeForFeeRate}
- feeRates={{
- medium: recommendedFees.regular,
- high: recommendedFees.priority,
- }}
- feeRateLimits={recommendedFees.limits}
- isLoading={isSubmitting}
- />
-
-
- )}
);
}
diff --git a/src/app/components/confirmBtcTransaction/transferSection.tsx b/src/app/components/confirmBtcTransaction/transferSection.tsx
deleted file mode 100644
index 44edfa9be..000000000
--- a/src/app/components/confirmBtcTransaction/transferSection.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { useParsedTxSummaryContext } from '@components/confirmBtcTransaction/hooks/useParsedTxSummaryContext';
-import RuneAmount from '@components/confirmBtcTransaction/itemRow/runeAmount';
-import { WarningOctagon } from '@phosphor-icons/react';
-import { type btcTransaction } from '@secretkeylabs/xverse-core';
-import { StyledP } from '@ui-library/common.styled';
-import Divider from '@ui-library/divider';
-import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
-import Theme from 'theme';
-import Amount from './itemRow/amount';
-import AmountWithInscriptionSatribute from './itemRow/amountWithInscriptionSatribute';
-import InscriptionSatributeRow from './itemRow/inscriptionSatributeRow';
-
-const Title = styled.p`
- ${(props) => props.theme.typography.body_medium_m};
- color: ${(props) => props.theme.colors.white_200};
- margin-top: ${(props) => props.theme.space.s};
- margin-bottom: ${(props) => props.theme.space.xs};
-`;
-
-const Container = styled.div((props) => ({
- display: 'flex',
- flexDirection: 'column',
- background: props.theme.colors.elevation1,
- borderRadius: props.theme.radius(2),
- paddingTop: props.theme.space.m,
- justifyContent: 'center',
- marginBottom: props.theme.space.s,
-}));
-
-const RowContainer = styled.div<{ noPadding?: boolean; noMargin?: boolean }>((props) => ({
- padding: props.noPadding ? 0 : `0 ${props.theme.space.m}`,
-}));
-
-const WarningContainer = styled.div((props) => ({
- display: 'flex',
- flexDirection: 'row',
- alignItems: 'center',
- gap: props.theme.space.xs,
- marginTop: props.theme.space.s,
-}));
-
-const WarningText = styled(StyledP)`
- flex: 1 0 0;
-`;
-
-type Props = { onShowInscription: (inscription: btcTransaction.IOInscription) => void };
-
-function TransferSection({ onShowInscription }: Props) {
- const { t } = useTranslation('translation');
- const {
- runeSummary,
- netBtcAmount,
- showTransferSection,
- transactionIsFinal,
- transferSection: {
- showBtcAmount,
- showRuneTransfers,
- outputsFromOrdinal,
- inputsFromOrdinal,
- inscriptionsFromPayment,
- satributesFromPayment,
- },
- } = useParsedTxSummaryContext();
-
- if (!showTransferSection) return null;
-
- return (
- <>
- {t('CONFIRM_TRANSACTION.YOU_WILL_TRANSFER')}
-
-
- {showBtcAmount && (
- <>
-
-
- {t('CONFIRM_TRANSACTION.BTC_TRANSFER_WARNING')}
-
-
-
- )}
- {showRuneTransfers &&
- runeSummary?.transfers?.map((transfer, index) => (
- <>
- {showBtcAmount && index === 0 &&
-
-
- );
-}
-
-export default TransferSection;
diff --git a/src/app/components/confirmBtcTransaction/txInOutput/txInOutput.tsx b/src/app/components/confirmBtcTransaction/txInOutput/index.tsx
similarity index 87%
rename from src/app/components/confirmBtcTransaction/txInOutput/txInOutput.tsx
rename to src/app/components/confirmBtcTransaction/txInOutput/index.tsx
index ee2201638..6e854ad1b 100644
--- a/src/app/components/confirmBtcTransaction/txInOutput/txInOutput.tsx
+++ b/src/app/components/confirmBtcTransaction/txInOutput/index.tsx
@@ -1,11 +1,10 @@
import DropDownIcon from '@assets/img/transactions/dropDownIcon.svg';
-import { useParsedTxSummaryContext } from '@components/confirmBtcTransaction/hooks/useParsedTxSummaryContext';
import { animated, config, useSpring } from '@react-spring/web';
import { StyledP } from '@ui-library/common.styled';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
-import { isScriptOutput } from '../utils';
+import { useTxSummaryContext } from '../hooks/useTxSummaryContext';
import TransactionInput from './transactionInput';
import TransactionOutput from './transactionOutput';
@@ -46,7 +45,7 @@ function TxInOutput() {
const [isExpanded, setIsExpanded] = useState(false);
const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
- const { summary } = useParsedTxSummaryContext();
+ const { extractedTxSummary } = useTxSummaryContext();
const slideInStyles = useSpring({
config: { ...config.gentle, duration: 400 },
@@ -76,18 +75,18 @@ function TxInOutput() {
{isExpanded && (
- {summary?.inputs.map((input) => (
+ {extractedTxSummary.inputs.map((input) => (
{t('OUTPUT')}
- {summary?.outputs.map((output, index) => (
+ {extractedTxSummary.outputs.map((output, index) => (
diff --git a/src/app/components/confirmBtcTransaction/txInOutput/transactionInput.tsx b/src/app/components/confirmBtcTransaction/txInOutput/transactionInput.tsx
index 438843d94..a89af0725 100644
--- a/src/app/components/confirmBtcTransaction/txInOutput/transactionInput.tsx
+++ b/src/app/components/confirmBtcTransaction/txInOutput/transactionInput.tsx
@@ -28,19 +28,18 @@ type Props = {
};
function TransactionInput({ input }: Props) {
- const { btcAddress, ordinalsAddress } = useSelectedAccount();
+ const { btcAddresses } = useSelectedAccount();
const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
- const isPaymentsAddress = input.extendedUtxo.address === btcAddress;
- const isOrdinalsAddress = input.extendedUtxo.address === ordinalsAddress;
- const isExternalInput = !isPaymentsAddress && !isOrdinalsAddress;
+ const userAddresses = Object.values(btcAddresses).map((address) => address.address);
+ const isExternalInput = userAddresses.every((address) => address !== input.extendedUtxo.address);
// TODO: show this in the UI?
// const insecureInput =
// input.sigHash === btc.SigHash.NONE || input.sigHash === btc.SigHash.NONE_ANYONECANPAY;
const renderAddress = (addressToBeDisplayed: string) =>
- addressToBeDisplayed === btcAddress || addressToBeDisplayed === ordinalsAddress ? (
+ userAddresses.some((address) => address === addressToBeDisplayed) ? (
{getTruncatedAddress(addressToBeDisplayed)}
@@ -59,7 +58,7 @@ function TransactionInput({ input }: Props) {
icon={InputIcon}
hideAddress
dataTestID="confirm-balance"
- hideCopyButton={isPaymentsAddress || isOrdinalsAddress}
+ hideCopyButton={!isExternalInput}
amount={`${satsToBtc(
new BigNumber(input.extendedUtxo.utxo.value.toString()),
).toFixed()} BTC`}
diff --git a/src/app/components/confirmBtcTransaction/txInOutput/transactionOutput.tsx b/src/app/components/confirmBtcTransaction/txInOutput/transactionOutput.tsx
index c684fb8e6..ec18a8f8f 100644
--- a/src/app/components/confirmBtcTransaction/txInOutput/transactionOutput.tsx
+++ b/src/app/components/confirmBtcTransaction/txInOutput/transactionOutput.tsx
@@ -8,7 +8,6 @@ import { getTruncatedAddress } from '@utils/helper';
import BigNumber from 'bignumber.js';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
-import { isAddressOutput, isPubKeyOutput, isScriptOutput } from '../utils';
const TransferDetailContainer = styled.div((props) => ({
paddingBottom: props.theme.space.m,
@@ -35,16 +34,24 @@ type Props = {
};
function TransactionOutput({ output, scriptOutputCount }: Props) {
- const { btcAddress, ordinalsAddress, btcPublicKey, ordinalsPublicKey } = useSelectedAccount();
const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
- const isOutputWithScript = isScriptOutput(output);
- const isOutputWithPubKey = isPubKeyOutput(output);
+
+ const { btcAddresses, btcPublicKey, ordinalsPublicKey } = useSelectedAccount();
+
+ const userAddresses = Object.values(btcAddresses).map((address) => address.address);
+
+ const isOutputWithScript = output.type === 'script';
+ const isOutputWithAddress = output.type === 'address';
+ const isOutputWithPubKey = !isOutputWithScript && !isOutputWithAddress;
+
+ const isOutputToOwnAddress =
+ isOutputWithScript || isOutputWithPubKey
+ ? false
+ : userAddresses.some((address) => address === output.address);
const detailViewIcon = isOutputWithScript ? ScriptIcon : OutputIcon;
const detailViewHideCopyButton =
- isOutputWithScript || isOutputWithPubKey
- ? true
- : btcAddress === output.address || ordinalsAddress === output.address;
+ isOutputWithScript || isOutputWithPubKey ? true : isOutputToOwnAddress;
const detailView = () => {
if (isOutputWithScript) {
@@ -67,7 +74,7 @@ function TransactionOutput({ output, scriptOutputCount }: Props) {
);
}
- if (output.address === btcAddress || output.address === ordinalsAddress) {
+ if (isOutputToOwnAddress) {
return (
@@ -93,7 +100,7 @@ function TransactionOutput({ output, scriptOutputCount }: Props) {
hideCopyButton={detailViewHideCopyButton}
dataTestID="confirm-amount"
amount={`${satsToBtc(
- new BigNumber(isAddressOutput(output) ? output.amount.toString() : '0'),
+ new BigNumber(isOutputWithAddress ? output.amount.toString() : '0'),
).toFixed()} BTC`}
address={isOutputWithScript || isOutputWithPubKey ? '' : output.address}
outputScript={isOutputWithScript ? output.script : undefined}
diff --git a/src/app/components/confirmBtcTransaction/utils.ts b/src/app/components/confirmBtcTransaction/utils.ts
deleted file mode 100644
index 93147f812..000000000
--- a/src/app/components/confirmBtcTransaction/utils.ts
+++ /dev/null
@@ -1,315 +0,0 @@
-import type { btcTransaction, BundleSatRange, FungibleToken } from '@secretkeylabs/xverse-core';
-
-// TODO this should all be in core and unit tested
-
-export type SatRangeTx = {
- totalSats: number;
- offset: number;
- fromAddress: string;
- inscriptions: (Omit & {
- content_type: string;
- inscription_number: number;
- })[];
- satributes: btcTransaction.IOSatribute['types'];
-};
-
-const DUMMY_OFFSET = -1;
-
-export const isScriptOutput = (
- output: btcTransaction.EnhancedOutput,
-): output is btcTransaction.TransactionScriptOutput =>
- (output as btcTransaction.TransactionScriptOutput).script !== undefined;
-
-export const isPubKeyOutput = (
- output: btcTransaction.EnhancedOutput,
-): output is btcTransaction.TransactionPubKeyOutput =>
- !!(output as btcTransaction.TransactionPubKeyOutput).pubKeys?.length;
-
-export const isAddressOutput = (
- output: btcTransaction.EnhancedOutput,
-): output is btcTransaction.TransactionOutput =>
- (output as btcTransaction.TransactionOutput).address !== undefined;
-
-type CommonInputOutputUtilProps = {
- inputs?: btcTransaction.EnhancedInput[];
- outputs?: btcTransaction.EnhancedOutput[];
- btcAddress: string;
- ordinalsAddress: string;
-};
-
-export const getNetAmount = ({
- inputs,
- outputs,
- btcAddress,
- ordinalsAddress,
-}: CommonInputOutputUtilProps) => {
- if (!inputs || !outputs) {
- return 0;
- }
-
- const initialValue = 0;
-
- const totalUserSpend = inputs.reduce((accumulator: number, input) => {
- const isFromUserAddress = [btcAddress, ordinalsAddress].includes(input.extendedUtxo.address);
- if (isFromUserAddress) {
- return accumulator + input.extendedUtxo.utxo.value;
- }
- return accumulator;
- }, initialValue);
-
- const totalUserReceive = outputs.reduce((accumulator: number, output) => {
- const isToUserAddress =
- isAddressOutput(output) && [btcAddress, ordinalsAddress].includes(output.address);
- if (isToUserAddress) {
- return accumulator + output.amount;
- }
- return accumulator;
- }, initialValue);
-
- return totalUserReceive - totalUserSpend;
-};
-
-export const getOutputsWithAssetsFromUserAddress = ({
- btcAddress,
- ordinalsAddress,
- outputs,
-}: Omit): {
- outputsFromPayment: (btcTransaction.TransactionOutput | btcTransaction.TransactionPubKeyOutput)[];
- outputsFromOrdinal: (btcTransaction.TransactionOutput | btcTransaction.TransactionPubKeyOutput)[];
-} => {
- // we want to discard outputs that are script, are not from user address and do not have inscriptions or satributes
- const outputsFromPayment: (
- | btcTransaction.TransactionOutput
- | btcTransaction.TransactionPubKeyOutput
- )[] = [];
- const outputsFromOrdinal: (
- | btcTransaction.TransactionOutput
- | btcTransaction.TransactionPubKeyOutput
- )[] = [];
- outputs?.forEach((output) => {
- if (isScriptOutput(output)) {
- return;
- }
-
- const itemsFromPayment: (btcTransaction.IOInscription | btcTransaction.IOSatribute)[] = [];
- const itemsFromOrdinal: (btcTransaction.IOInscription | btcTransaction.IOSatribute)[] = [];
- [...output.inscriptions, ...output.satributes].forEach((item) => {
- if (item.fromAddress === btcAddress) {
- return itemsFromPayment.push(item);
- }
- if (item.fromAddress === ordinalsAddress) {
- itemsFromOrdinal.push(item);
- }
- });
-
- if (itemsFromOrdinal.length > 0) {
- outputsFromOrdinal.push(output);
- }
- if (itemsFromPayment.length > 0) {
- outputsFromPayment.push(output);
- }
- });
-
- return { outputsFromPayment, outputsFromOrdinal };
-};
-
-export const getInputsWithAssetsFromUserAddress = ({
- btcAddress,
- ordinalsAddress,
- inputs,
-}: Omit): {
- inputsFromPayment: btcTransaction.EnhancedInput[];
- inputsFromOrdinal: btcTransaction.EnhancedInput[];
-} => {
- // we want to discard inputs that are not from user address and do not have inscriptions or satributes
- const inputsFromPayment: btcTransaction.EnhancedInput[] = [];
- const inputsFromOrdinal: btcTransaction.EnhancedInput[] = [];
- inputs?.forEach((input) => {
- if (!input.inscriptions.length && !input.satributes.length) {
- return;
- }
-
- if (input.extendedUtxo.address === btcAddress) {
- return inputsFromPayment.push(input);
- }
- if (input.extendedUtxo.address === ordinalsAddress) {
- inputsFromOrdinal.push(input);
- }
- });
-
- return { inputsFromPayment, inputsFromOrdinal };
-};
-
-export const getOutputsWithAssetsToUserAddress = ({
- btcAddress,
- ordinalsAddress,
- outputs,
-}: Omit): {
- outputsToPayment: btcTransaction.TransactionOutput[];
- outputsToOrdinal: btcTransaction.TransactionOutput[];
-} => {
- const outputsToPayment: btcTransaction.TransactionOutput[] = [];
- const outputsToOrdinal: btcTransaction.TransactionOutput[] = [];
- outputs?.forEach((output) => {
- // we want to discard outputs that are not spendable or are not to user address
- if (
- isScriptOutput(output) ||
- isPubKeyOutput(output) ||
- ![btcAddress, ordinalsAddress].includes(output.address)
- ) {
- return;
- }
-
- if (output.address === btcAddress) {
- return outputsToPayment.push(output);
- }
-
- // we don't want to show amount to ordinals address, because it's not spendable
- if (
- output.address === ordinalsAddress &&
- (output.inscriptions.length > 0 || output.satributes.length > 0)
- ) {
- outputsToOrdinal.push(output);
- }
- });
-
- return { outputsToPayment, outputsToOrdinal };
-};
-
-export const mapTxSatributeInfoToBundleInfo = (item: btcTransaction.IOSatribute | SatRangeTx) => {
- const commonProps = {
- offset: item.offset,
- block: 0,
- range: {
- start: '0',
- end: '0',
- },
- yearMined: 0,
- };
-
- // SatRangeTx
- if ('totalSats' in item) {
- return {
- ...commonProps,
- totalSats: item.totalSats,
- inscriptions: item.inscriptions,
- satributes: item.satributes,
- } as BundleSatRange;
- }
-
- // btcTransaction.IOSatribute
- return {
- ...commonProps,
- totalSats: item.amount,
- inscriptions: [],
- satributes: item.types,
- } as BundleSatRange;
-};
-
-export const getSatRangesWithInscriptions = ({
- satributes,
- inscriptions,
- amount,
-}: {
- inscriptions: btcTransaction.IOInscription[];
- satributes: btcTransaction.IOSatribute[];
- amount: number;
-}) => {
- const satRanges: {
- [offset: number]: SatRangeTx;
- } = {};
-
- satributes.forEach((satribute) => {
- const { types, amount: totalSats, ...rest } = satribute;
- satRanges[rest.offset] = { ...rest, satributes: types, totalSats, inscriptions: [] };
- });
-
- inscriptions.forEach((inscription) => {
- const { contentType, number, ...inscriptionRest } = inscription;
- const mappedInscription = {
- ...inscriptionRest,
- content_type: contentType,
- inscription_number: number,
- };
- if (satRanges[inscription.offset]) {
- satRanges[inscription.offset] = {
- ...satRanges[inscription.offset],
- inscriptions: [...satRanges[inscription.offset].inscriptions, mappedInscription],
- };
- return;
- }
-
- satRanges[inscription.offset] = {
- totalSats: 1,
- offset: inscription.offset,
- fromAddress: inscription.fromAddress,
- inscriptions: [mappedInscription],
- satributes: ['COMMON'],
- };
- });
-
- const { amountOfExoticsOrInscribedSats, totalExoticSats } = Object.values(satRanges).reduce(
- (acc, range) => ({
- amountOfExoticsOrInscribedSats: acc.amountOfExoticsOrInscribedSats + range.totalSats,
- totalExoticSats:
- acc.totalExoticSats + (!range.satributes.includes('COMMON') ? range.totalSats : 0),
- }),
- {
- amountOfExoticsOrInscribedSats: 0,
- totalExoticSats: 0,
- },
- );
-
- if (amountOfExoticsOrInscribedSats < amount) {
- satRanges[DUMMY_OFFSET] = {
- totalSats: amount - amountOfExoticsOrInscribedSats,
- offset: DUMMY_OFFSET,
- fromAddress: '',
- inscriptions: [],
- satributes: ['COMMON'],
- };
- }
-
- // sort should be: inscribed rare, rare, inscribed common, common
- const satRangesArray = Object.values(satRanges).sort((a, b) => {
- // Check conditions for each category
- const aHasInscriptions = a.inscriptions.length > 0;
- const bHasInscriptions = b.inscriptions.length > 0;
- const aHasRareSatributes = a.satributes.some((s) => s !== 'COMMON');
- const bHasRareSatributes = b.satributes.some((s) => s !== 'COMMON');
-
- // sats not rare and not inscribed at bottom
- if (!aHasInscriptions && !aHasRareSatributes) return 1;
-
- // sats inscribed and rare at top
- if (aHasInscriptions && aHasRareSatributes) return -1;
-
- // sats not inscribed and rare below inscribed and rare
- if (bHasInscriptions && bHasRareSatributes) return 1;
-
- // sats inscribed and not rare above sats not inscribed and not rare
- if (aHasRareSatributes) return -1;
- if (bHasRareSatributes) return 1;
-
- // equal ranges
- return 0;
- });
-
- return { satRanges: satRangesArray, totalExoticSats };
-};
-
-export const mapRuneNameToPlaceholder = (
- runeName: string,
- symbol: string,
- inscriptionId: string,
-): FungibleToken => ({
- protocol: 'runes',
- name: runeName,
- assetName: '',
- balance: '',
- principal: '',
- total_received: '',
- total_sent: '',
- runeSymbol: symbol,
- runeInscriptionId: inscriptionId,
-});
diff --git a/src/app/components/confirmStxTransactionComponent/index.styled.ts b/src/app/components/confirmStxTransactionComponent/index.styled.ts
index 8de1152e3..967e2faea 100644
--- a/src/app/components/confirmStxTransactionComponent/index.styled.ts
+++ b/src/app/components/confirmStxTransactionComponent/index.styled.ts
@@ -26,10 +26,6 @@ export const EditNonceButton = styled(Button)((props) => ({
padding: props.theme.space.xxs,
'&.tertiary': {
color: props.theme.colors.tangerine,
- '&:focus-visible': {
- color: props.theme.colors.tangerine,
- opacity: 0.8,
- },
'&:hover:enabled': {
color: props.theme.colors.tangerine,
opacity: 0.8,
diff --git a/src/app/components/confirmStxTransactionComponent/index.tsx b/src/app/components/confirmStxTransactionComponent/index.tsx
index 07a021414..c4a0c78d6 100644
--- a/src/app/components/confirmStxTransactionComponent/index.tsx
+++ b/src/app/components/confirmStxTransactionComponent/index.tsx
@@ -1,12 +1,12 @@
import ledgerConnectDefaultIcon from '@assets/img/ledger/ledger_connect_default.svg';
import ledgerConnectStxIcon from '@assets/img/ledger/ledger_import_connect_stx.svg';
-import { delay } from '@common/utils/ledger';
+import { delay } from '@common/utils/promises';
import BottomModal from '@components/bottomModal';
import ActionButton from '@components/button';
import LedgerConnectionView from '@components/ledger/connectLedgerView';
import TransactionSettingAlert from '@components/transactionSetting';
-import useCoinRates from '@hooks/queries/useCoinRates';
import useStxWalletData from '@hooks/queries/useStxWalletData';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
import useNetworkSelector from '@hooks/useNetwork';
import useSeedVault from '@hooks/useSeedVault';
import useSelectedAccount from '@hooks/useSelectedAccount';
@@ -15,6 +15,7 @@ import Transport from '@ledgerhq/hw-transport-webusb';
import { FadersHorizontal } from '@phosphor-icons/react';
import type { StacksTransaction } from '@secretkeylabs/xverse-core';
import {
+ estimateStacksTransactionWithFallback,
getNonce,
getStxFiatEquivalent,
microstacksToStx,
@@ -23,7 +24,7 @@ import {
signTransaction,
stxToMicrostacks,
} from '@secretkeylabs/xverse-core';
-import { estimateTransaction, PostConditionMode } from '@stacks/transactions';
+import { PostConditionMode } from '@stacks/transactions';
import SelectFeeRate from '@ui-components/selectFeeRate';
import Button from '@ui-library/button';
import Callout from '@ui-library/callout';
@@ -32,6 +33,7 @@ import { modifyRecommendedStxFees } from '@utils/transactions/transactions';
import BigNumber from 'bignumber.js';
import { useEffect, useState, type ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
import Theme from 'theme';
import {
ButtonsContainer,
@@ -46,6 +48,13 @@ import {
WarningWrapper,
} from './index.styled';
+const Subtitle = styled.p`
+ ${(props) => props.theme.typography.body_medium_m};
+ color: ${(props) => props.theme.colors.white_200};
+ margin-top: ${(props) => props.theme.space.s};
+ margin-bottom: ${(props) => props.theme.space.xs};
+`;
+
// todo: make fee non option - that'll require change in all components using it
type Props = {
initialStxTransactions: StacksTransaction[];
@@ -86,12 +95,12 @@ function ConfirmStxTransactionComponent({
keyPrefix: 'TRANSACTION_SETTING',
});
const selectedNetwork = useNetworkSelector();
- const { stxBtcRate, btcFiatRate } = useCoinRates();
+ const { stxBtcRate, btcFiatRate } = useSupportedCoinRates();
const { data: stxData } = useStxWalletData();
const { getSeed } = useSeedVault();
const [showFeeSettings, setShowFeeSettings] = useState(false);
const selectedAccount = useSelectedAccount();
- const { feeMultipliers, fiatCurrency } = useWalletSelector();
+ const { feeMultipliers, fiatCurrency, network } = useWalletSelector();
const [openTransactionSettingModal, setOpenTransactionSettingModal] = useState(false);
const [buttonLoading, setButtonLoading] = useState(loading);
const [isModalVisible, setIsModalVisible] = useState(false);
@@ -119,9 +128,8 @@ function ConfirmStxTransactionComponent({
const fetchStxFees = async () => {
try {
setFeesLoading(true);
- const [low, medium, high] = await estimateTransaction(
- initialStxTransactions[0].payload,
- undefined,
+ const [low, medium, high] = await estimateStacksTransactionWithFallback(
+ initialStxTransactions[0],
selectedNetwork,
);
@@ -132,6 +140,7 @@ function ConfirmStxTransactionComponent({
high: high.fee,
},
feeMultipliers,
+ initialStxTransactions[0].payload.payloadType,
);
setFeeRates({
@@ -139,7 +148,7 @@ function ConfirmStxTransactionComponent({
medium: microstacksToStx(BigNumber(modifiedFees.medium)).toNumber(),
high: microstacksToStx(BigNumber(modifiedFees.high)).toNumber(),
});
- if (!fee) setFeeRate?.(Number(microstacksToStx(BigNumber(medium.fee))).toString());
+ if (!fee) setFeeRate?.(Number(microstacksToStx(BigNumber(modifiedFees.low))).toString());
} catch (e) {
console.error(e);
} finally {
@@ -148,15 +157,16 @@ function ConfirmStxTransactionComponent({
};
fetchStxFees();
- }, [selectedNetwork, initialStxTransactions]);
+ }, [selectedNetwork, initialStxTransactions, feeMultipliers, fee, setFeeRate]);
useEffect(() => {
- const stxTxFee = BigNumber(initialStxTransactions[0].auth.spendingCondition.fee.toString());
+ if (!feeMultipliers || !fee) return;
- if (
- feeMultipliers &&
- stxTxFee.isGreaterThan(BigNumber(feeMultipliers.thresholdHighStacksFee))
- ) {
+ const feeExceedsThreshold = stxToMicrostacks(new BigNumber(fee)).isGreaterThan(
+ BigNumber(feeMultipliers.thresholdHighStacksFee),
+ );
+
+ if (feeExceedsThreshold) {
setShowFeeWarning(true);
} else if (showFeeWarning) {
setShowFeeWarning(false);
@@ -212,8 +222,9 @@ function ConfirmStxTransactionComponent({
}
if (initialStxTransactions.length === 1) {
+ const transaction = initialStxTransactions[0];
const signedContractCall = await signTransaction(
- initialStxTransactions[0],
+ transaction,
seed,
selectedAccount?.id ?? 0,
selectedNetwork,
@@ -352,6 +363,8 @@ function ConfirmStxTransactionComponent({
)}
{children}
+
+ {t('FEES')}
void;
};
-export default function Steps({
+export default function Dots({
numDots,
activeIndex,
dotStrategy,
diff --git a/src/app/components/explore/FeaturedCard.tsx b/src/app/components/explore/FeaturedCard.tsx
index 144c9d06a..003120375 100644
--- a/src/app/components/explore/FeaturedCard.tsx
+++ b/src/app/components/explore/FeaturedCard.tsx
@@ -2,14 +2,16 @@ import { AnalyticsEvents } from '@secretkeylabs/xverse-core';
import { trackMixPanel } from '@utils/mixpanel';
import styled from 'styled-components';
-const Card = styled.div`
+const Card = styled.button`
cursor: pointer;
- display: block;
+ display: flex;
+ flex-direction: column;
border-radius: 12px;
background-color: ${({ theme }) => theme.colors.elevation2};
height: 182px;
width: 212px;
color: ${({ theme }) => theme.colors.white_0};
+ text-align: left;
transition: opacity 0.1s ease;
&:hover {
diff --git a/src/app/components/explore/FeaturedCarousel.tsx b/src/app/components/explore/FeaturedCarousel.tsx
index a8b311dd5..5779afc67 100644
--- a/src/app/components/explore/FeaturedCarousel.tsx
+++ b/src/app/components/explore/FeaturedCarousel.tsx
@@ -13,7 +13,6 @@ const CarouselContainer = styled.div`
padding-bottom: 35px;
}
- // So silly that they don't have a native API for this
.swiper-slide {
width: fit-content !important;
}
@@ -24,11 +23,17 @@ const CarouselContainer = styled.div`
}
.swiper-pagination-bullet {
- background: ${(props) => props.theme.colors.white_800};
+ width: 6px;
+ height: 6px;
+ background: ${(props) => props.theme.colors.white_600};
+ opacity: 1;
+ border-radius: 50px;
+ transition: width 0.2s ease, background 0.1s ease;
}
.swiper-pagination-bullet-active {
- background: ${(props) => props.theme.colors.white_200};
+ width: 18px;
+ background: ${(props) => props.theme.colors.white_0};
}
`;
diff --git a/src/app/components/explore/RecommendedApps.tsx b/src/app/components/explore/RecommendedApps.tsx
index e33899518..f997883ba 100644
--- a/src/app/components/explore/RecommendedApps.tsx
+++ b/src/app/components/explore/RecommendedApps.tsx
@@ -10,13 +10,15 @@ const Container = styled.div`
width: 100%;
`;
-const Card = styled.div`
+const Card = styled.button`
cursor: pointer;
display: flex;
align-items: center;
column-gap: ${({ theme }) => theme.space.m};
width: 100%;
color: ${({ theme }) => theme.colors.white_0};
+ background-color: transparent;
+ text-align: left;
transition: opacity 0.1s ease;
&:hover {
@@ -47,7 +49,14 @@ const CardText = styled.div`
overflow: hidden;
`;
-type Props = { items: { url: string; icon: string; name: string; description: string }[] };
+type Props = {
+ items: {
+ url: string;
+ icon: string;
+ name: string;
+ description: string;
+ }[];
+};
function RecommendedApps({ items }: Props) {
return (
diff --git a/src/app/components/explore/SwiperNavigation.tsx b/src/app/components/explore/SwiperNavigation.tsx
index 366d2864c..a4c0dac1e 100644
--- a/src/app/components/explore/SwiperNavigation.tsx
+++ b/src/app/components/explore/SwiperNavigation.tsx
@@ -8,6 +8,9 @@ const Container = styled.div`
const Button = styled.button`
background-color: transparent;
+ width: 18px;
+ height: 18px;
+ margin: 6px;
svg {
color: ${({ theme }) => theme.colors.white_0};
@@ -21,13 +24,11 @@ const Button = styled.button`
}
&:disabled {
+ cursor: default;
svg {
- color: ${({ theme }) => theme.colors.white_400};
+ color: ${({ theme }) => theme.colors.white_600};
}
}
- width: 18px;
- height: 18px;
- margin: 6px;
`;
function SwiperNavigation() {
diff --git a/src/app/components/fiatAmountText/index.tsx b/src/app/components/fiatAmountText/index.tsx
index 46b197585..128cc7f69 100644
--- a/src/app/components/fiatAmountText/index.tsx
+++ b/src/app/components/fiatAmountText/index.tsx
@@ -46,4 +46,8 @@ export const StyledFiatAmountText = styled(FiatAmountText)`
color: ${(props) => props.theme.colors.white_400};
`;
+export const RightAlignedStyledFiatAmountText = styled(StyledFiatAmountText)`
+ text-align: right;
+`;
+
export default FiatAmountText;
diff --git a/src/app/components/guards/auth.tsx b/src/app/components/guards/auth.tsx
index 9a8eac8c5..ec3251d96 100644
--- a/src/app/components/guards/auth.tsx
+++ b/src/app/components/guards/auth.tsx
@@ -66,7 +66,9 @@ function AuthGuard({ children }: PropsWithChildren) {
navigate('/login');
}
- await loadWallet();
+ await loadWallet(() => {
+ isInitialised.current = true;
+ });
};
useEffect(() => {
diff --git a/src/app/components/guards/onboarding/index.tsx b/src/app/components/guards/onboarding/index.tsx
index 7251342cf..2498b235a 100644
--- a/src/app/components/guards/onboarding/index.tsx
+++ b/src/app/components/guards/onboarding/index.tsx
@@ -38,7 +38,7 @@ function OnboardingGuard({ children }: WalletExistsGuardProps): React.ReactEleme
return;
}
- unlockVault('');
+ await unlockVault('');
setIsWalletInitialized(false);
} catch (e) {
// seed exists and unlocking with empty password failed
diff --git a/src/app/components/ledger/ledgerAssetSelectCard/index.tsx b/src/app/components/ledger/ledgerAssetSelectCard/index.tsx
index decc0e47d..b880faed6 100644
--- a/src/app/components/ledger/ledgerAssetSelectCard/index.tsx
+++ b/src/app/components/ledger/ledgerAssetSelectCard/index.tsx
@@ -1,28 +1,25 @@
import styled from 'styled-components';
-const CardContainer = styled.label((props) => ({
+const CardContainer = styled.button((props) => ({
display: 'flex',
- flexDirection: 'row',
- gap: props.theme.spacing(6),
+ gap: props.theme.space.s,
justifyContent: 'flex-start',
+ alignItems: 'center',
padding: props.theme.spacing(7),
- paddingLeft: props.theme.spacing(8),
- paddingRight: props.theme.spacing(8),
+ paddingLeft: props.theme.space.m,
+ paddingRight: props.theme.space.m,
cursor: 'pointer',
- transition: 'background 0.2s ease, border 0.2s ease',
- background:
- props.className === 'checked' ? props.theme.colors.background.selectBackground : 'transparent',
+ transition: 'background 0.1s ease, border 0.1s ease',
+ textAlign: 'left',
+ color: props.theme.colors.white_0,
+ background: props.theme.colors.elevation1,
borderRadius: props.theme.radius(2),
border: `1px solid ${
- props.className === 'checked' ? props.theme.colors.border.select : props.theme.colors.white_900
+ props.className === 'checked' ? '#7383ff4d' : props.theme.colors.elevation1
}`,
userSelect: 'none',
}));
-const CardInput = styled.input({
- display: 'none',
-});
-
const CardIconContainer = styled.div((props) => ({
display: 'flex',
width: props.theme.spacing(24),
@@ -46,38 +43,35 @@ const CardText = styled.p((props) => ({
color: props.theme.colors.white_400,
}));
-interface Props {
+type Props = {
icon: string;
title: string;
text: string;
- id: string;
+ name: 'Bitcoin' | 'Stacks';
isChecked: boolean;
- onChange: (e: React.ChangeEvent) => void;
+ onClick: (selectedAsset: 'Bitcoin' | 'Stacks') => void;
squareIcon?: boolean;
-}
+};
function LedgerAssetSelectCard({
icon,
title,
text,
- id,
+ name,
isChecked,
- onChange: handleChange,
+ onClick: handleClick,
squareIcon = false,
}: Props) {
return (
- handleClick(name)}>
+
+
+
);
}
diff --git a/src/app/components/ledgerSteps/index.tsx b/src/app/components/ledgerSteps/index.tsx
new file mode 100644
index 000000000..23c79d97c
--- /dev/null
+++ b/src/app/components/ledgerSteps/index.tsx
@@ -0,0 +1,121 @@
+import { delay } from '@common/utils/promises';
+import TransportFactory from '@ledgerhq/hw-transport-webusb';
+import { type Transport } from '@secretkeylabs/xverse-core';
+import Button from '@ui-library/button';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+import LedgerStepView, { Steps } from './ledgerStepView';
+
+const SuccessActionsContainer = styled.div((props) => ({
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ gap: props.theme.space.s,
+ paddingLeft: props.theme.space.m,
+ paddingRight: props.theme.space.m,
+ marginBottom: props.theme.space.xxl,
+ marginTop: props.theme.space.xxl,
+}));
+
+type Props = {
+ onConfirm: (ledgerTransport?: Transport) => void;
+ onCancel: () => void;
+ txnToSignCount?: number;
+ txnSignIndex?: number;
+};
+
+function LedgerSteps({ onConfirm, onCancel, txnToSignCount, txnSignIndex }: Props) {
+ const [currentStep, setCurrentStep] = useState(Steps.ConnectLedger);
+ const [isButtonDisabled, setIsButtonDisabled] = useState(false);
+ const [isConnectSuccess, setIsConnectSuccess] = useState(false);
+ const [isConnectFailed, setIsConnectFailed] = useState(false);
+ const [isTxRejected, setIsTxRejected] = useState(false);
+
+ const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
+ const { t: signatureRequestTranslate } = useTranslation('translation', {
+ keyPrefix: 'SIGNATURE_REQUEST',
+ });
+
+ const handleConnectAndConfirm = async () => {
+ setIsButtonDisabled(true);
+
+ const transport = await TransportFactory.create();
+
+ if (!transport) {
+ setIsConnectSuccess(false);
+ setIsConnectFailed(true);
+ setIsButtonDisabled(false);
+ return;
+ }
+
+ setIsConnectSuccess(true);
+ await delay(1500);
+
+ if (currentStep !== Steps.ExternalInputs && currentStep !== Steps.ConfirmTransaction) {
+ setCurrentStep(Steps.ExternalInputs);
+ return;
+ }
+
+ if (currentStep !== Steps.ConfirmTransaction) {
+ setCurrentStep(Steps.ConfirmTransaction);
+ }
+
+ try {
+ onConfirm(transport);
+ } catch (err) {
+ console.error(err);
+ setIsTxRejected(true);
+ }
+ };
+
+ const goToConfirmationStep = () => {
+ setCurrentStep(Steps.ConfirmTransaction);
+
+ handleConnectAndConfirm();
+ };
+
+ const handleRetry = async () => {
+ setIsTxRejected(false);
+ setIsConnectSuccess(false);
+ setCurrentStep(Steps.ConnectLedger);
+ };
+
+ return (
+ <>
+
+ {currentStep === Steps.ExternalInputs && !isTxRejected && !isConnectFailed ? (
+
+ ) : (
+ <>
+
+
+
+ )}
+
+
+ );
+}
+
+export default LedgerSteps;
diff --git a/src/app/components/confirmBtcTransaction/ledgerStepView.tsx b/src/app/components/ledgerSteps/ledgerStepView.tsx
similarity index 84%
rename from src/app/components/confirmBtcTransaction/ledgerStepView.tsx
rename to src/app/components/ledgerSteps/ledgerStepView.tsx
index 74c7520eb..697b262b5 100644
--- a/src/app/components/confirmBtcTransaction/ledgerStepView.tsx
+++ b/src/app/components/ledgerSteps/ledgerStepView.tsx
@@ -9,7 +9,7 @@ import LedgerFailView from '@components/ledger/failLedgerView';
import {
ConnectLedgerTitle,
InfoImage,
-} from '@screens/ledger/confirmLedgerTransaction/index.styled';
+} from '@screens/ledger/confirmLedgerStxTransaction/index.styled';
import type { TFunction } from 'react-i18next';
export enum Steps {
@@ -25,6 +25,8 @@ type Props = {
isTxRejected: boolean;
t: TFunction<'translation', 'CONFIRM_TRANSACTION'>;
signatureRequestTranslate: TFunction<'translation', 'SIGNATURE_REQUEST'>;
+ txnToSignCount?: number;
+ txnSignIndex?: number;
};
function LedgerStepView({
@@ -34,6 +36,8 @@ function LedgerStepView({
isTxRejected,
t,
signatureRequestTranslate,
+ txnToSignCount,
+ txnSignIndex,
}: Props) {
switch (currentStep) {
case Steps.ConnectLedger:
@@ -67,10 +71,17 @@ function LedgerStepView({
);
- case Steps.ConfirmTransaction:
+ case Steps.ConfirmTransaction: {
+ let title = signatureRequestTranslate('LEDGER.CONFIRM.TITLE');
+ if (txnToSignCount && txnSignIndex && txnToSignCount > 1) {
+ title = signatureRequestTranslate('LEDGER.CONFIRM.TITLE_WITH_COUNT', {
+ current: txnSignIndex,
+ total: txnToSignCount,
+ });
+ }
return (
+
+
+
+
+
{t('CONFIRM_TRANSACTION.AMOUNT')}
-
- Bitcoin
-
-
-
-
-
-
-
-
+
- {title}
- {text}
-
-
+ {title}
+ {text}
+
+ {t('PASSWORD_STRENGTH_WEAK')}
, + }; + } else if (score <= PasswordStrength.AverageScore) { + passwordStrengthLabel = { + color: theme.colors.feedback.caution, + width: '50%', + message:{t('PASSWORD_STRENGTH_MEDIUM')}
, + }; + } else { + passwordStrengthLabel = { + color: theme.colors.feedback.success, + width: '100%', + message:{t('PASSWORD_STRENGTH_STRONG')}
, + }; + } useEffect(() => { const keyDownHandler = (event) => { if ( event.key === 'Enter' && + document.activeElement?.id === 'password-input' && !!enteredPassword && - enteredPasswordLength >= REQUIRED_PASSWORD_LENGTH && (checkPasswordStrength ? score >= PasswordStrength.AverageScore : true) ) { event.preventDefault(); @@ -208,94 +118,16 @@ function PasswordInput(props: PasswordInputProps): JSX.Element { return () => { document.removeEventListener('keydown', keyDownHandler); }; - }, [enteredPassword]); - - useEffect(() => { - if (passwordError) { - setError(passwordError); - return; - } - if (enteredPassword && !!createPasswordFlow && score <= PasswordStrength.WeakScore) { - setError(t('PASSWORD_STRENGTH_ERROR')); - return; - } - setError(''); - }, [passwordError, enteredPassword]); + }, [checkPasswordStrength, enteredPassword, enteredPasswordLength, handleContinue, score]); useEffect(() => { if (enteredPassword !== '') { setPasswordStrength(score); } - return () => { setPasswordStrength(PasswordStrength.NoScore); }; - }, [enteredPassword, setPasswordStrength]); - - const handleTogglePasswordView = () => { - setIsPasswordVisible(!isPasswordVisible); - }; - - const handlePasswordChange = (event: React.FormEvent{t('PASSWORD_STRENGTH_WEAK')}
-{t('PASSWORD_STRENGTH_MEDIUM')}
-{t('PASSWORD_STRENGTH_STRONG')}
-
- {showSenderAddress ? (
-
-
- ) : (
-
- )}
-
- {heading &&
- {title}
- {currencyType === 'BTC' && Bitcoin }
- {currencyType === 'STX' && Stacks }
-
-
+ {showSenderAddress ? (
+
+
+ ) : (
+
+ )}
+ {heading &&
+ {title}
+ {currencyType === 'BTC' && Bitcoin }
+ {currencyType === 'STX' && Stacks }
+
+
+
{!hideListActions ? (
-
) : null}
diff --git a/src/app/screens/backupWallet/index.tsx b/src/app/screens/backupWallet/index.tsx
index 58483a5b1..7751a10ec 100644
--- a/src/app/screens/backupWallet/index.tsx
+++ b/src/app/screens/backupWallet/index.tsx
@@ -10,8 +10,8 @@ import styled from 'styled-components';
const Container = styled.div((props) => ({
flex: 1,
- paddingLeft: props.theme.spacing(8),
- paddingRight: props.theme.spacing(8),
+ paddingLeft: props.theme.space.m,
+ paddingRight: props.theme.space.m,
display: 'flex',
flexDirection: 'column',
}));
@@ -27,7 +27,7 @@ const ContentContainer = styled.div((props) => ({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
- marginBottom: props.theme.spacing(32),
+ marginBottom: props.theme.space.xxxl,
}));
const Title = styled.h1((props) => ({
@@ -46,7 +46,7 @@ const BackupActionsContainer = styled.div((props) => ({
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
- marginTop: props.theme.spacing(20),
+ marginTop: props.theme.space.xxl,
width: '100%',
columnGap: props.theme.space.xs,
}));
@@ -55,7 +55,7 @@ const LoadingContainer = styled.div((props) => ({
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
- marginTop: props.theme.spacing(20),
+ marginTop: props.theme.space.xxl,
width: '100%',
}));
diff --git a/src/app/screens/btcSendRequest/index.tsx b/src/app/screens/btcSendRequest/index.tsx
index 50db52f51..b01680774 100644
--- a/src/app/screens/btcSendRequest/index.tsx
+++ b/src/app/screens/btcSendRequest/index.tsx
@@ -1,20 +1,12 @@
-import { makeRPCError, sendRpcResponse } from '@common/utils/rpc/helpers';
+import { makeRPCError, makeRpcSuccessResponse, sendRpcResponse } from '@common/utils/rpc/helpers';
import ConfirmBtcTransaction from '@components/confirmBtcTransaction';
import useBtcFeeRate from '@hooks/useBtcFeeRate';
-import useHasFeature from '@hooks/useHasFeature';
import useSelectedAccount from '@hooks/useSelectedAccount';
import useTransactionContext from '@hooks/useTransactionContext';
import useWalletSelector from '@hooks/useWalletSelector';
import { RpcErrorCode } from '@sats-connect/core';
import type { TransactionSummary } from '@screens/sendBtc/helpers';
-import {
- AnalyticsEvents,
- btcTransaction,
- FeatureId,
- parseSummaryForRunes,
- type RuneSummary,
- type Transport,
-} from '@secretkeylabs/xverse-core';
+import { AnalyticsEvents, btcTransaction, type Transport } from '@secretkeylabs/xverse-core';
import Spinner from '@ui-library/spinner';
import { BITCOIN_DUST_AMOUNT_SATS } from '@utils/constants';
import { trackMixPanel } from '@utils/mixpanel';
@@ -50,8 +42,6 @@ function BtcSendRequest() {
const [feeRate, setFeeRate] = useState('');
const [transaction, setTransaction] = useState();
const [summary, setSummary] = useState();
- const [runeSummary, setRuneSummary] = useState();
- const hasRunesSupport = useHasFeature(FeatureId.RUNES_SUPPORT);
const [isLoading, setIsLoading] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);
@@ -74,7 +64,6 @@ function BtcSendRequest() {
useEffect(() => {
if (!payload || !transactionContext || !feeRate) {
setSummary(undefined);
- setRuneSummary(undefined);
return;
}
const generateTxnAndSummary = async () => {
@@ -84,13 +73,6 @@ function BtcSendRequest() {
const newSummary = await newTransaction.getSummary();
setTransaction(newTransaction);
setSummary(newSummary);
- if (newSummary && hasRunesSupport) {
- setRuneSummary(
- await parseSummaryForRunes(transactionContext, newSummary, transactionContext.network, {
- separateTransfersOnNoExternalInputs: true,
- }),
- );
- }
} catch (e) {
setTransaction(undefined);
setSummary(undefined);
@@ -123,23 +105,35 @@ function BtcSendRequest() {
useEffect(() => {
const checkIfMismatch = () => {
+ let errorTitle = '';
+ let error = '';
+ let textAlignment = 'center';
+
if (payload.senderAddress !== selectedAccount.btcAddress) {
- navigate('/tx-status', {
- state: {
- txid: '',
- currency: 'STX',
- error: t('CONFIRM_TRANSACTION.ADDRESS_MISMATCH'),
- browserTx: true,
- },
- });
+ if (
+ selectedAccount.btcAddresses.native?.address === payload.senderAddress ||
+ selectedAccount.btcAddresses.nested?.address === payload.senderAddress
+ ) {
+ errorTitle = t('REQUEST_ERRORS.ADDRESS_TYPE_MISMATCH_TITLE');
+ error = t('REQUEST_ERRORS.ADDRESS_TYPE_MISMATCH');
+ } else {
+ errorTitle = t('REQUEST_ERRORS.ADDRESS_MISMATCH_TITLE');
+ error = t('REQUEST_ERRORS.ADDRESS_MISMATCH');
+ }
+ textAlignment = 'left';
+ } else if (payload.network.type !== network.type) {
+ error = t('REQUEST_ERRORS.NETWORK_MISMATCH');
}
- if (payload.network.type !== network.type) {
+
+ if (error) {
navigate('/tx-status', {
state: {
txid: '',
currency: 'BTC',
- error: t('CONFIRM_TRANSACTION.NETWORK_MISMATCH'),
+ errorTitle,
+ error,
browserTx: true,
+ textAlignment,
},
});
}
@@ -166,6 +160,15 @@ function BtcSendRequest() {
checkIfValidAmount();
}, [payload]);
+ const handleCancel = () => {
+ const response = makeRPCError(requestId, {
+ code: RpcErrorCode.USER_REJECTION,
+ message: 'User rejected request to send transfer',
+ });
+ sendRpcResponse(+tabId, response);
+ window.close();
+ };
+
const handleSubmit = async (ledgerTransport?: Transport) => {
try {
setIsSubmitting(true);
@@ -175,16 +178,26 @@ function BtcSendRequest() {
action: 'transfer',
wallet_type: selectedAccount.accountType || 'software',
});
- navigate('/tx-status', {
- state: {
+ if (txnId) {
+ const sendTransferResponse = makeRpcSuccessResponse<'sendTransfer'>(requestId, {
txid: txnId,
- currency: 'BTC',
- error: '',
- browserTx: true,
- },
- });
+ });
+ sendRpcResponse(+tabId, sendTransferResponse);
+ navigate('/tx-status', {
+ state: {
+ txid: txnId,
+ currency: 'BTC',
+ error: '',
+ browserTx: true,
+ },
+ });
+ }
} catch (e) {
- console.error(e);
+ const response = makeRPCError(requestId, {
+ code: RpcErrorCode.INTERNAL_ERROR,
+ message: (e as any).message,
+ });
+ sendRpcResponse(+tabId, response);
navigate('/tx-status', {
state: {
txid: '',
@@ -212,11 +225,10 @@ function BtcSendRequest() {
return (
window.close()}
+ onCancel={handleCancel}
onConfirm={handleSubmit}
getFeeForFeeRate={calculateFeeForFeeRate}
onFeeRateSet={(newFeeRate) => setFeeRate(newFeeRate.toString())}
@@ -224,6 +236,7 @@ function BtcSendRequest() {
isSubmitting={isSubmitting}
isBroadcast
hideBottomBar
+ showAccountHeader
/>
);
}
diff --git a/src/app/screens/btcSendRequest/useBtcSendRequestPayload.ts b/src/app/screens/btcSendRequest/useBtcSendRequestPayload.ts
index 3486a7e7d..6ee2bb7b2 100644
--- a/src/app/screens/btcSendRequest/useBtcSendRequestPayload.ts
+++ b/src/app/screens/btcSendRequest/useBtcSendRequestPayload.ts
@@ -10,7 +10,7 @@ import { useLocation } from 'react-router-dom';
const useBtcSendRequestPayload = (btcAddress: string, network: SettingsNetwork) => {
const { search } = useLocation();
- const params = new URLSearchParams(search);
+ const params = useMemo(() => new URLSearchParams(search), [search]);
const tabId = params.get('tabId') ?? '0';
const requestId = params.get('requestId') ?? '';
@@ -38,7 +38,7 @@ const useBtcSendRequestPayload = (btcAddress: string, network: SettingsNetwork)
payload: rpcPayload,
requestToken: null,
};
- }, []);
+ }, [params, btcAddress, network]);
return { payload, tabId, requestToken, requestId };
};
diff --git a/src/app/screens/buy/index.tsx b/src/app/screens/buy/index.tsx
index ef302015b..4753fd87f 100644
--- a/src/app/screens/buy/index.tsx
+++ b/src/app/screens/buy/index.tsx
@@ -10,7 +10,7 @@ import useWalletSelector from '@hooks/useWalletSelector';
import { FeatureId, getMoonPaySignedUrl } from '@secretkeylabs/xverse-core';
import Spinner from '@ui-library/spinner';
import { MOON_PAY_API_KEY, MOON_PAY_URL, TRANSAC_API_KEY, TRANSAC_URL } from '@utils/constants';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, useParams } from 'react-router-dom';
import styled from 'styled-components';
diff --git a/src/app/screens/coinDashboard/coinHeader.styled.ts b/src/app/screens/coinDashboard/coinHeader.styled.ts
index f5a0721d6..01b91c7cb 100644
--- a/src/app/screens/coinDashboard/coinHeader.styled.ts
+++ b/src/app/screens/coinDashboard/coinHeader.styled.ts
@@ -44,6 +44,7 @@ export const CoinBalanceText = styled.p((props) => ({
color: props.theme.colors.white_0,
textAlign: 'center',
wordBreak: 'break-all',
+ cursor: 'pointer',
}));
export const FiatAmountText = styled.p((props) => ({
@@ -52,6 +53,7 @@ export const FiatAmountText = styled.p((props) => ({
fontSize: '0.875rem',
marginTop: props.theme.spacing(2),
textAlign: 'center',
+ cursor: 'pointer',
}));
export const BalanceTitleText = styled.p((props) => ({
diff --git a/src/app/screens/coinDashboard/coinHeader.tsx b/src/app/screens/coinDashboard/coinHeader.tsx
index bc82e7e52..2cb59a979 100644
--- a/src/app/screens/coinDashboard/coinHeader.tsx
+++ b/src/app/screens/coinDashboard/coinHeader.tsx
@@ -8,12 +8,13 @@ import BottomModal from '@components/bottomModal';
import ActionButton from '@components/button';
import SmallActionButton from '@components/smallActionButton';
import TokenImage from '@components/tokenImage';
-import useBtcWalletData from '@hooks/queries/useBtcWalletData';
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSelectedAccountBtcBalance from '@hooks/queries/useSelectedAccountBtcBalance';
import useStxWalletData from '@hooks/queries/useStxWalletData';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
import useHasFeature from '@hooks/useHasFeature';
import useSelectedAccount from '@hooks/useSelectedAccount';
import useWalletSelector from '@hooks/useWalletSelector';
+import { getTrackingIdentifier, isMotherToken } from '@screens/swap/utils';
import {
AnalyticsEvents,
FeatureId,
@@ -22,7 +23,9 @@ import {
microstacksToStx,
type FungibleToken,
} from '@secretkeylabs/xverse-core';
+import { setBalanceHiddenToggleAction } from '@stores/wallet/actions/actionCreators';
import type { CurrencyTypes } from '@utils/constants';
+import { HIDDEN_BALANCE_LABEL } from '@utils/constants';
import { isInOptions, isLedgerAccount } from '@utils/helper';
import { trackMixPanel } from '@utils/mixpanel';
import { getBalanceAmount, getFtTicker } from '@utils/tokens';
@@ -30,6 +33,7 @@ import BigNumber from 'bignumber.js';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { NumericFormat } from 'react-number-format';
+import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import {
AvailableStxContainer,
@@ -57,18 +61,25 @@ type Props = {
export default function CoinHeader({ currency, fungibleToken }: Props) {
const selectedAccount = useSelectedAccount();
- const { fiatCurrency, network } = useWalletSelector();
- const { data: btcBalance } = useBtcWalletData();
+ const { fiatCurrency, network, balanceHidden } = useWalletSelector();
+
+ // TODO: this should be a dumb component, move the logic to the parent
+ // TODO: currently, we get btc and stx balances here for all currencies and FTs, but we should get them in
+ // TODO: the relevant parent and pass them as props
+ const { confirmedPaymentBalance: btcBalance } = useSelectedAccountBtcBalance();
const { data: stxData } = useStxWalletData();
- const { btcFiatRate, stxBtcRate } = useCoinRates();
+ const { btcFiatRate, stxBtcRate } = useSupportedCoinRates();
const navigate = useNavigate();
const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
+ const { t: commonT } = useTranslation('translation', { keyPrefix: 'COMMON' });
const [openReceiveModal, setOpenReceiveModal] = useState(false);
const isReceivingAddressesVisible = !isLedgerAccount(selectedAccount);
+ const dispatch = useDispatch();
const showRunesListing =
(useHasFeature(FeatureId.RUNES_LISTING) || process.env.NODE_ENV === 'development') &&
- network.type === 'Mainnet';
+ network.type === 'Mainnet' &&
+ fungibleToken?.protocol === 'runes';
const handleReceiveModalOpen = () => {
setOpenReceiveModal(true);
@@ -101,7 +112,12 @@ export default function CoinHeader({ currency, fungibleToken }: Props) {
value={microstacksToStx(new BigNumber(stxData?.locked ?? '0')).toString()}
displayType="text"
thousandSeparator
- renderText={(value: string) => {`${value} STX`} }
+ renderText={(value: string) => (
+
+ {balanceHidden && HIDDEN_BALANCE_LABEL}
+ {!balanceHidden && `${value} STX`}
+
+ )}
/>
@@ -110,7 +126,12 @@ export default function CoinHeader({ currency, fungibleToken }: Props) {
value={microstacksToStx(new BigNumber(stxData?.availableBalance ?? 0)).toString()}
displayType="text"
thousandSeparator
- renderText={(value: string) => {`${value} STX`} }
+ renderText={(value: string) => (
+
+ {balanceHidden && HIDDEN_BALANCE_LABEL}
+ {!balanceHidden && `${value} STX`}
+
+ )}
/>
@@ -150,33 +171,49 @@ export default function CoinHeader({ currency, fungibleToken }: Props) {
const getDashboardTitle = () => {
if (fungibleToken?.name) {
- return `${fungibleToken.name} ${t('BALANCE')}`;
+ return fungibleToken.name;
}
-
if (!currency) {
return '';
}
-
if (currency === 'STX') {
- return `Stacks ${t('BALANCE')}`;
+ if (new BigNumber(stxData?.locked ?? 0).gt(0)) {
+ return `${commonT('STACKS')} ${commonT('BALANCE')}`;
+ }
+ return commonT('STACKS');
}
if (currency === 'BTC') {
- return `Bitcoin ${t('BALANCE')}`;
+ return commonT('BITCOIN');
}
- return `${currency} ${t('BALANCE')}`;
+ return `${currency}`;
};
const isCrossChainSwapsEnabled = useHasFeature(FeatureId.CROSS_CHAIN_SWAPS);
- const showRunesSwap =
- (currency === 'FT' && fungibleToken?.protocol === 'runes') || currency === 'BTC';
- const showSwaps = isCrossChainSwapsEnabled && showRunesSwap;
+ const isStacksSwapsEnabled = useHasFeature(FeatureId.STACKS_SWAPS);
+
+ const isSwapEligibleCurrency =
+ (currency === 'FT' &&
+ (fungibleToken?.protocol === 'runes' ||
+ (isStacksSwapsEnabled && fungibleToken?.protocol === 'stacks'))) ||
+ currency === 'BTC' ||
+ (currency === 'STX' && isStacksSwapsEnabled);
+ const showSwaps = isCrossChainSwapsEnabled && isSwapEligibleCurrency;
+
+ const fiatValue = getFiatEquivalent(
+ Number(getBalanceAmount(currency, fungibleToken, stxData, btcBalance)),
+ currency,
+ BigNumber(stxBtcRate),
+ BigNumber(btcFiatRate),
+ fungibleToken,
+ );
const navigateToSwaps = () => {
if (!showSwaps) {
return;
}
trackMixPanel(AnalyticsEvents.InitiateSwapFlow, {
- selectedToken: fungibleToken ? fungibleToken.name ?? fungibleToken.principal : currency,
+ selectedToken: fungibleToken ? getTrackingIdentifier(fungibleToken) : currency,
+ principal: isMotherToken(fungibleToken) ? getTrackingIdentifier(fungibleToken) : undefined,
});
navigate(`/swap?from=${fungibleToken ? fungibleToken.principal : currency}`);
};
@@ -194,6 +231,9 @@ export default function CoinHeader({ currency, fungibleToken }: Props) {
handleReceiveModalOpen();
};
+ const toggleHideBalance = () =>
+ dispatch(setBalanceHiddenToggleAction({ toggle: !balanceHidden }));
+
return (
@@ -218,23 +258,27 @@ export default function CoinHeader({ currency, fungibleToken }: Props) {
displayType="text"
thousandSeparator
renderText={(value: string) => (
- {`${value} ${getTokenTicker()}`}
+
+ {balanceHidden && HIDDEN_BALANCE_LABEL}
+ {!balanceHidden && `${value} ${getTokenTicker()}`}
+
)}
/>
- {value} }
- />
+ {fiatValue && (
+ (
+
+ {balanceHidden && HIDDEN_BALANCE_LABEL}
+ {!balanceHidden && value}
+
+ )}
+ />
+ )}
{renderStackingBalances()}
@@ -244,7 +288,7 @@ export default function CoinHeader({ currency, fungibleToken }: Props) {
{showSwaps && (
({
+ display: 'flex',
+ flexDirection: 'row',
+ width: '100%',
+ marginBottom: props.theme.space.m,
+}));
+
+const IconOuterContainer = styled.div((_) => ({
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+}));
+
+const IconContainer = styled.div((_) => ({
+ position: 'relative',
+}));
+
+const TitleContainer = styled.div((props) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ margin: `${props.theme.space.s} ${props.theme.space.m}`,
+}));
+
+const AddressTypeContainer = styled.div((_) => ({
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: '4px',
+}));
+
+const BalanceContainer = styled.div((props) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'flex-end',
+ margin: `${props.theme.space.s} ${props.theme.space.m}`,
+ flexGrow: 1,
+}));
+
+const StarIconContainer = styled.div((props) => ({
+ position: 'absolute',
+ right: '-8px',
+ bottom: '4px',
+ backgroundColor: props.theme.colors.elevation0,
+ borderRadius: '50%',
+ padding: '2.2px',
+ display: 'flex',
+ alignItems: 'center',
+}));
+
+type AddressBalanceProps = {
+ balance: number | undefined;
+ addressType: BtcAddressType | undefined;
+ totalBalance: number | undefined;
+};
+
+export default function AddressBalance({
+ balance,
+ addressType,
+ totalBalance,
+}: AddressBalanceProps) {
+ const { fiatCurrency, btcPaymentAddressType, balanceHidden } = useWalletSelector();
+ const { btcFiatRate } = useSupportedCoinRates();
+
+ if (balance === undefined) {
+ return null;
+ }
+
+ const balancePercentage =
+ balance && totalBalance
+ ? BigNumber(balance).div(totalBalance).multipliedBy(100).toFixed(2)
+ : '0.00';
+
+ const isCurrentPaymentAddress = addressType === btcPaymentAddressType;
+
+ return (
+
+
+
+
+
+ )}
+
+
+
+
+ BTC
+ {addressType &&
+ {`${balancePercentage}%`}
+
+
+
+ {balanceHidden ? HIDDEN_BALANCE_LABEL : satsToBtc(BigNumber(balance)).toString()}
+
+
+ {balanceHidden ? (
+ HIDDEN_BALANCE_LABEL
+ ) : (
+
+
+
+ );
+}
diff --git a/src/app/screens/coinDashboard/coins/btc/balanceBreakdown.tsx b/src/app/screens/coinDashboard/coins/btc/balanceBreakdown.tsx
new file mode 100644
index 000000000..dba37bf35
--- /dev/null
+++ b/src/app/screens/coinDashboard/coins/btc/balanceBreakdown.tsx
@@ -0,0 +1,53 @@
+import useSelectedAccountBtcBalance from '@hooks/queries/useSelectedAccountBtcBalance';
+import useWalletSelector from '@hooks/useWalletSelector';
+import Spinner from '@ui-library/spinner';
+import styled from 'styled-components';
+import { SecondaryContainer } from '../../index.styled';
+import AddressBalance from './addressBalance';
+
+const SpinnerContainer = styled.div`
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`;
+
+export default function BalanceBreakdown() {
+ const { btcPaymentAddressType } = useWalletSelector();
+ const { confirmedPaymentBalance, nativeBalance, nestedBalance, taprootBalance, isLoading } =
+ useSelectedAccountBtcBalance();
+
+ if (isLoading) {
+ return (
+
+
+
+
+ );
+ }
+
+ const showNested = btcPaymentAddressType === 'nested' || nestedBalance?.confirmedBalance !== 0;
+
+ return (
+
+
+ );
+}
diff --git a/src/app/screens/coinDashboard/coins/btc/index.tsx b/src/app/screens/coinDashboard/coins/btc/index.tsx
new file mode 100644
index 000000000..fd8f20044
--- /dev/null
+++ b/src/app/screens/coinDashboard/coins/btc/index.tsx
@@ -0,0 +1,79 @@
+import { GlobalPreferredBtcAddressSheet } from '@components/preferredBtcAddress';
+import BottomBar from '@components/tabBar';
+import TopRow from '@components/topRow';
+import useCanUserSwitchPaymentType from '@hooks/useCanUserSwitchPaymentType';
+import { broadcastResetUserFlow, useResetUserFlow } from '@hooks/useResetUserFlow';
+import useTrackMixPanelPageViewed from '@hooks/useTrackMixPanelPageViewed';
+import { Tabs, type TabProp } from '@ui-library/tabs';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
+import CoinHeader from '../../coinHeader';
+import { Container, FtInfoContainer } from '../../index.styled';
+import TransactionsHistoryList from '../../transactionsHistoryList';
+import BalanceBreakdown from './balanceBreakdown';
+
+export default function CoinDashboard() {
+ const [searchParams] = useSearchParams();
+ const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
+ const fromSecondaryTab = searchParams.get('secondaryTab') === 'true' ? 'secondary' : 'primary';
+
+ const [currentTab, setCurrentTab] = useState<'primary' | 'secondary'>(fromSecondaryTab);
+ const [showPreferredBtcAddressSheet, setShowPreferredBtcAddressSheet] = useState(false);
+
+ useResetUserFlow('/coinDashboard');
+
+ const showBtcAddressTypeSelector = useCanUserSwitchPaymentType();
+
+ const handleGoBack = () => broadcastResetUserFlow();
+ const handleChangeAddressTypeClick = showBtcAddressTypeSelector
+ ? () => setShowPreferredBtcAddressSheet(true)
+ : undefined;
+
+ useTrackMixPanelPageViewed({});
+
+ const onCancelAddressType = () => setShowPreferredBtcAddressSheet(false);
+
+ const tabs: TabProp<'primary' | 'secondary'>[] = [
+ {
+ label: t('TRANSACTIONS'),
+ value: 'primary',
+ },
+ {
+ label: t('BREAKDOWN'),
+ value: 'secondary',
+ },
+ ];
+
+ return (
+ <>
+
+
+ setCurrentTab(tabClicked)}
+ />
+
+ {currentTab === 'primary' && (
+
+ ) => {
+ setShowOptionsDialog(true);
+ setOptionsDialogIndents({
+ top: `${(event.target as HTMLElement).parentElement?.getBoundingClientRect().top}px`,
+ left: `calc(100% - ${SPAM_OPTIONS_WIDTH}px)`,
+ });
+ };
+
+ const closeOptionsDialog = () => setShowOptionsDialog(false);
+
+ return (
+ <>
+
+ {
+ if (!selectedFt) {
+ handleGoBack();
+ return;
+ }
+ // set the visibility to false
+ const payload = {
+ principal: selectedFt.principal,
+ isEnabled: false,
+ };
+ if (protocol === 'runes') {
+ dispatch(setRunesManageTokensAction(payload));
+ } else if (protocol === 'stacks') {
+ dispatch(setSip10ManageTokensAction(payload));
+ } else if (protocol === 'brc-20') {
+ dispatch(setBrc20ManageTokensAction(payload));
+ }
+
+ addToSpamTokens(selectedFt.principal);
+ dispatch(setSpamTokenAction(selectedFt));
+
+ handleGoBack();
+ }}
+ >
+
+ {t('HIDE_AND_REPORT')}
+
+
+
+ )}
+
+
+
+
+
+ )}
+ {showTxHistory && (
+
+ navigator.clipboard.writeText(selectedFt?.principal as string)}
+ >
+
+ {getTruncatedAddress(selectedFt?.principal as string, 20)}
+
+
+
+
+ window.open(getExplorerUrl(selectedFt?.principal as string), '_blank')}
+ >
+ {t('OPEN_FT_CONTRACT_DEPLOYMENT')}
+ {t('STACKS_EXPLORER')}
+
+
+ )}
+ {showRuneBundles && (
+
+
+ {runeUtxos?.map((utxo) => {
+ const fullTxId = getFullTxId(utxo);
+ const runeAmount = utxo.runes?.filter((rune) => rune[0] === selectedFt?.name)[0][1]
+ .amount;
+ return (
+
+
+ )}
+
+ ) => {
- setShowOptionsDialog(true);
-
- setOptionsDialogIndents({
- top: `${(event.target as HTMLElement).parentElement?.getBoundingClientRect().top}px`,
- left: `calc(100% - ${SPAM_OPTIONS_WIDTH}px)`,
- });
- };
-
- const closeOptionsDialog = () => {
- setShowOptionsDialog(false);
- };
-
- const openContractDeployment = () =>
- window.open(getExplorerUrl(selectedFt?.principal as string), '_blank');
-
- const onContractClick = () => setShowFtContractDetails(true);
-
- const handleCopyContractAddress = () =>
- navigator.clipboard.writeText(selectedFt?.principal as string);
-
- const onTransactionsClick = () => setShowFtContractDetails(false);
-
- const formatAddress = (addr: string): string =>
- addr ? `${addr.substring(0, 20)}...${addr.substring(addr.length - 20, addr.length)}` : '';
-
- return (
- <>
-
- {
- if (!selectedFt) {
- handleGoBack();
- return;
- }
- // set the visibility to false
- const payload = {
- principal: selectedFt.principal,
- isEnabled: false,
- };
- if (protocol === 'runes') {
- dispatch(setRunesManageTokensAction(payload));
- } else if (protocol === 'stacks') {
- dispatch(setSip10ManageTokensAction(payload));
- } else if (protocol === 'brc-20') {
- dispatch(setBrc20ManageTokensAction(payload));
- }
-
- addToSpamTokens(selectedFt.principal);
- dispatch(setSpamTokenAction(selectedFt));
-
- handleGoBack();
- }}
- >
-
- {t('HIDE_AND_REPORT')}
-
-
-
- )}
-
-
-
-
-
- )}
- {selectedFt && protocol === 'stacks' && showFtContractDetails && (
-
-
-
- {formatAddress(selectedFt?.principal as string)}
-
-
-
-
-
- {t('OPEN_FT_CONTRACT_DEPLOYMENT')}
- {t('STACKS_EXPLORER')}
-
-
- )}
- {!showFtContractDetails && (
-
-
+
+
+ {satributesArr.map((satribute) => (
+
+
+
+ {balanceHidden ? (
+
+ {HIDDEN_BALANCE_LABEL}
+
+ ) : (
+ (
+
+ {value}
+
+ )}
+ />
+ )}
+
+
+ {`${getTruncatedAddress(txId, 6)}:${vout}`}
+
+
+ (
+
+ {value}
+
+ )}
+ />
+
+
+
+
+ );
+}
+
+export default RuneBundleRow;
diff --git a/src/app/screens/coinDashboard/transactionsHistoryList.tsx b/src/app/screens/coinDashboard/transactionsHistoryList.tsx
index f78c73e08..ccc976e4e 100644
--- a/src/app/screens/coinDashboard/transactionsHistoryList.tsx
+++ b/src/app/screens/coinDashboard/transactionsHistoryList.tsx
@@ -18,7 +18,7 @@ import type {
} from '@stacks/stacks-blockchain-api-types';
import Spinner from '@ui-library/spinner';
import type { CurrencyTypes } from '@utils/constants';
-import { formatDate } from '@utils/date';
+import { formatDate, formatDateKey } from '@utils/date';
import { isLedgerAccount } from '@utils/helper';
import {
isAddressTransactionWithTransfers,
@@ -34,18 +34,18 @@ import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
-const ListItemsContainer = styled.div({
+const ListItemsContainer = styled.div((props) => ({
display: 'flex',
flexDirection: 'column',
flex: 1,
-});
+ marginTop: props.theme.space.l,
+}));
const ListHeader = styled.h1((props) => ({
- marginTop: props.theme.spacing(20),
- marginBottom: props.theme.spacing(12),
- marginLeft: props.theme.spacing(8),
- marginRight: props.theme.spacing(8),
- ...props.theme.headline_s,
+ ...props.theme.typography.headline_xs,
+ margin: props.theme.space.m,
+ marginTop: 0,
+ marginBottom: props.theme.space.l,
}));
const LoadingContainer = styled.div({
@@ -65,7 +65,7 @@ const NoTransactionsContainer = styled.div((props) => ({
}));
const GroupContainer = styled(animated.div)((props) => ({
- marginBottom: props.theme.spacing(8),
+ marginBottom: props.theme.space.m,
}));
const SectionHeader = styled.div((props) => ({
@@ -73,8 +73,8 @@ const SectionHeader = styled.div((props) => ({
flexDirection: 'row',
alignItems: 'center',
marginBottom: props.theme.spacing(7),
- paddingLeft: props.theme.spacing(8),
- paddingRight: props.theme.spacing(8),
+ paddingLeft: props.theme.space.m,
+ paddingRight: props.theme.space.m,
}));
const SectionSeparator = styled.div((props) => ({
@@ -86,87 +86,161 @@ const SectionSeparator = styled.div((props) => ({
const SectionTitle = styled.p((props) => ({
...props.theme.body_xs,
color: props.theme.colors.white_200,
- marginRight: props.theme.spacing(4),
+ marginRight: props.theme.space.xs,
}));
-interface TransactionsHistoryListProps {
- coin: CurrencyTypes;
- stxTxFilter: string | null;
- brc20Token: string | null;
- runeToken: string | null;
- runeSymbol: string | null;
-}
-
-const sortTransactionsByBlockHeight = (transactions: BtcTransactionData[]) =>
- transactions.sort((txA, txB) => {
- if (txB.blockHeight > txA.blockHeight) {
- return 1;
- }
- return -1;
- });
-
const groupBtcTxsByDate = (
transactions: BtcTransactionData[],
-): { [x: string]: BtcTransactionData[] } => {
+): [Date, string, BtcTransactionData[]][] => {
const pendingTransactions: BtcTransactionData[] = [];
const processedTransactions: { [x: string]: BtcTransactionData[] } = {};
transactions.forEach((transaction) => {
- const txDate = formatDate(new Date(transaction.seenTime));
if (transaction.txStatus === 'pending') {
pendingTransactions.push(transaction);
} else {
- if (!processedTransactions[txDate]) processedTransactions[txDate] = [transaction];
- else processedTransactions[txDate].push(transaction);
-
- sortTransactionsByBlockHeight(processedTransactions[txDate]);
+ const txDateKey = formatDateKey(new Date(transaction.seenTime));
+ if (!processedTransactions[txDateKey]) {
+ processedTransactions[txDateKey] = [];
+ }
+ processedTransactions[txDateKey].push(transaction);
}
});
- sortTransactionsByBlockHeight(pendingTransactions);
+
+ const result: [Date, string, BtcTransactionData[]][] = [];
+
if (pendingTransactions.length > 0) {
- const result = { Pending: pendingTransactions, ...processedTransactions };
- return result;
+ result.push([new Date(), 'Pending', pendingTransactions]);
}
- return processedTransactions;
+
+ Object.values(processedTransactions).forEach((grp) => {
+ if (grp.length === 0) {
+ return;
+ }
+
+ grp.sort((txA, txB) => {
+ // sort by block height first
+ const blockHeightDiff = txB.blockHeight - txA.blockHeight;
+ if (blockHeightDiff !== 0) {
+ return blockHeightDiff;
+ }
+
+ // if block height is the same, sort by txid for consistency
+ return txB.txid.localeCompare(txA.txid);
+ });
+
+ result.push([new Date(grp[0].seenTime), formatDate(new Date(grp[0].seenTime)), grp]);
+ });
+
+ result.sort((a, b) => b[0].getTime() - a[0].getTime());
+
+ return result;
};
const groupRuneTxsByDate = (
transactions: GetRunesActivityForAddressEvent[],
-): Record => {
- const mappedTransactions = {};
+): [Date, string, GetRunesActivityForAddressEvent[]][] => {
+ const processedTransactions: { [x: string]: GetRunesActivityForAddressEvent[] } = {};
+
transactions.forEach((transaction) => {
- const txDate = formatDate(new Date(transaction.blockTimestamp));
- if (!mappedTransactions[txDate]) {
- mappedTransactions[txDate] = [transaction];
- } else {
- mappedTransactions[txDate].push(transaction);
+ const txDateKey = formatDateKey(new Date(transaction.blockTimestamp));
+ if (!processedTransactions[txDateKey]) {
+ processedTransactions[txDateKey] = [];
}
+ processedTransactions[txDateKey].push(transaction);
});
- return mappedTransactions;
+
+ const result: [Date, string, GetRunesActivityForAddressEvent[]][] = [];
+
+ Object.values(processedTransactions).forEach((grp) => {
+ if (grp.length === 0) {
+ return;
+ }
+
+ grp.sort((txA, txB) => {
+ // sort by block height first
+ const blockHeightDiff = txB.blockHeight - txA.blockHeight;
+ if (blockHeightDiff !== 0) {
+ return blockHeightDiff;
+ }
+
+ // if block height is the same, sort by txid for consistency
+ return txB.txid.localeCompare(txA.txid);
+ });
+
+ result.push([
+ new Date(grp[0].blockTimestamp),
+ formatDate(new Date(grp[0].blockTimestamp)),
+ grp,
+ ]);
+ });
+
+ result.sort((a, b) => b[0].getTime() - a[0].getTime());
+
+ return result;
};
-const groupedTxsByDateMap = (txs: (AddressTransactionWithTransfers | MempoolTransaction)[]) =>
- txs.reduce(
- (
- all: { [x: string]: (AddressTransactionWithTransfers | Tx)[] },
- transaction: AddressTransactionWithTransfers | Tx,
- ) => {
- const date = formatDate(
- new Date(
- isAddressTransactionWithTransfers(transaction) && transaction.tx?.burn_block_time_iso
- ? transaction.tx.burn_block_time_iso
- : Date.now(),
- ),
- );
- if (!all[date]) {
- all[date] = [transaction];
- } else {
- all[date].push(transaction);
+const groupedTxsByDateMap = (
+ transactions: (AddressTransactionWithTransfers | MempoolTransaction)[],
+): [Date, string, (AddressTransactionWithTransfers | Tx)[]][] => {
+ const getBlockTimestamp = (tx: AddressTransactionWithTransfers | Tx): Date => {
+ let dateStr: string;
+
+ if (isAddressTransactionWithTransfers(tx)) {
+ dateStr = tx.tx.burn_block_time_iso;
+ } else if ('receipt_time_iso' in tx) {
+ dateStr = tx.receipt_time_iso;
+ } else {
+ dateStr = '';
+ }
+
+ return dateStr ? new Date(dateStr) : new Date();
+ };
+
+ const getTxid = (tx: AddressTransactionWithTransfers | Tx): string => {
+ if (isAddressTransactionWithTransfers(tx)) {
+ return tx.tx.tx_id;
+ }
+ return tx.tx_id;
+ };
+
+ const processedTransactions: { [x: string]: (AddressTransactionWithTransfers | Tx)[] } = {};
+
+ transactions.forEach((transaction) => {
+ const txDate = getBlockTimestamp(transaction);
+ const txDateKey = formatDateKey(txDate);
+
+ if (!processedTransactions[txDateKey]) {
+ processedTransactions[txDateKey] = [];
+ }
+ processedTransactions[txDateKey].push(transaction);
+ });
+
+ const result: [Date, string, (AddressTransactionWithTransfers | Tx)[]][] = [];
+
+ Object.values(processedTransactions).forEach((grp) => {
+ if (grp.length === 0) {
+ return;
+ }
+
+ grp.sort((txA, txB) => {
+ // sort by block height first
+ const blockHeightDiff = getBlockTimestamp(txB).getTime() - getBlockTimestamp(txA).getTime();
+ if (blockHeightDiff !== 0) {
+ return blockHeightDiff;
}
- return all;
- },
- {},
- );
+
+ // if block height is the same, sort by txid for consistency
+ return getTxid(txB).localeCompare(getTxid(txA));
+ });
+
+ result.push([getBlockTimestamp(grp[0]), formatDate(new Date(getBlockTimestamp(grp[0]))), grp]);
+ });
+
+ result.sort((a, b) => b[0].getTime() - a[0].getTime());
+
+ return result;
+};
const filterStxTxs = (
txs: (AddressTransactionWithTransfers | MempoolTransaction)[],
@@ -189,13 +263,29 @@ const filterStxTxs = (
);
});
-export default function TransactionsHistoryList(props: TransactionsHistoryListProps) {
- const { coin, stxTxFilter, brc20Token, runeToken, runeSymbol } = props;
+type Props = {
+ coin: CurrencyTypes;
+ stxTxFilter: string | null;
+ brc20Token: string | null;
+ runeToken: string | null;
+ runeSymbol: string | null;
+ withTitle?: boolean;
+};
+
+function TransactionsHistoryList({
+ coin,
+ stxTxFilter,
+ brc20Token,
+ runeToken,
+ runeSymbol,
+ withTitle = true,
+}: Props) {
+ const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
const selectedAccount = useSelectedAccount();
const { network, selectedAccountType } = useWalletSelector();
const btcClient = useBtcClient();
const seedVault = useSeedVault();
- const { data, isLoading, isFetching, error } = useTransactions(
+ const { data, isLoading, error } = useTransactions(
(coin as CurrencyTypes) || 'STX',
brc20Token,
runeToken,
@@ -209,7 +299,6 @@ export default function TransactionsHistoryList(props: TransactionsHistoryListPr
},
});
- const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
const wallet = selectedAccount
? {
...selectedAccount,
@@ -245,20 +334,20 @@ export default function TransactionsHistoryList(props: TransactionsHistoryListPr
return groupedTxsByDateMap(filteredTxs);
}
return groupedTxsByDateMap(data as (AddressTransactionWithTransfers | MempoolTransaction)[]);
- }, [data, isLoading, isFetching]);
+ }, [data, coin, stxTxFilter]);
return (
- {t('TRANSACTION_HISTORY_TITLE')}
+ {withTitle && {t('TRANSACTION_HISTORY_TITLE')} }
{groupedTxs &&
!isLoading &&
- Object.keys(groupedTxs).map((group) => (
+ groupedTxs.map(([, group, items]) => (
{group}
- {groupedTxs[group].map((transaction) => {
+ {items.map((transaction) => {
if (wallet && isRuneTransaction(transaction)) {
return (
);
}
+
+export default TransactionsHistoryList;
diff --git a/src/app/screens/confirmBrc20Transaction/index.tsx b/src/app/screens/confirmBrc20Transaction/index.tsx
index 1439d3ba5..3fe59c373 100644
--- a/src/app/screens/confirmBrc20Transaction/index.tsx
+++ b/src/app/screens/confirmBrc20Transaction/index.tsx
@@ -2,7 +2,7 @@ import InfoContainer from '@components/infoContainer';
import BottomBar from '@components/tabBar';
import TopRow from '@components/topRow';
import TransactionDetailComponent from '@components/transactionDetailComponent';
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
import useBtcFeeRate from '@hooks/useBtcFeeRate';
import useDebounce from '@hooks/useDebounce';
import { useResetUserFlow } from '@hooks/useResetUserFlow';
@@ -53,7 +53,7 @@ function ConfirmBrc20Transaction() {
const { network, fiatCurrency, feeMultipliers } = useWalletSelector();
const selectedAccount = useSelectedAccount();
const { btcAddress, ordinalsAddress } = selectedAccount;
- const { btcFiatRate } = useCoinRates();
+ const { btcFiatRate } = useSupportedCoinRates();
const navigate = useNavigate();
const {
recipientAddress,
diff --git a/src/app/screens/confirmFtTransaction/index.tsx b/src/app/screens/confirmFtTransaction/index.tsx
index 9e9f010ba..0a7efc666 100644
--- a/src/app/screens/confirmFtTransaction/index.tsx
+++ b/src/app/screens/confirmFtTransaction/index.tsx
@@ -1,4 +1,4 @@
-import type { ConfirmStxTransactionState, LedgerTransactionType } from '@common/types/ledger';
+import type { ConfirmStxTransactionState } from '@common/types/ledger';
import ConfirmStxTransactionComponent from '@components/confirmStxTransactionComponent';
import TransferMemoView from '@components/confirmStxTransactionComponent/transferMemoView';
import RecipientComponent from '@components/recipientComponent';
@@ -82,15 +82,13 @@ function ConfirmFtTransaction() {
const handleOnConfirmClick = (txs: StacksTransaction[]) => {
if (isLedgerAccount(selectedAccount)) {
- const type: LedgerTransactionType = 'STX';
const state: ConfirmStxTransactionState = {
unsignedTx: Buffer.from(unsignedTx.serialize()),
- type,
recipients: [{ address: recipientAddress, amountMicrostacks: new BigNumber(amount) }],
fee: new BigNumber(unsignedTx.auth.spendingCondition.fee.toString()),
};
- navigate('/confirm-ledger-tx', { state });
+ navigate('/confirm-ledger-stx-tx', { state });
return;
}
diff --git a/src/app/screens/confirmNftTransaction/index.tsx b/src/app/screens/confirmNftTransaction/index.tsx
index 82e4f3350..3c39993f8 100644
--- a/src/app/screens/confirmNftTransaction/index.tsx
+++ b/src/app/screens/confirmNftTransaction/index.tsx
@@ -1,5 +1,5 @@
import AssetIcon from '@assets/img/transactions/Assets.svg';
-import type { ConfirmStxTransactionState, LedgerTransactionType } from '@common/types/ledger';
+import type { ConfirmStxTransactionState } from '@common/types/ledger';
import AccountHeaderComponent from '@components/accountHeader';
import ConfirmStxTransactionComponent from '@components/confirmStxTransactionComponent';
import RecipientComponent from '@components/recipientComponent';
@@ -21,12 +21,14 @@ import {
type StacksTransaction,
} from '@secretkeylabs/xverse-core';
import { deserializeTransaction } from '@stacks/transactions';
+import { removeAccountAvatarAction } from '@stores/wallet/actions/actionCreators';
import { useMutation } from '@tanstack/react-query';
import { isLedgerAccount } from '@utils/helper';
import { trackMixPanel } from '@utils/mixpanel';
import BigNumber from 'bignumber.js';
import { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
import { useLocation, useNavigate, useParams } from 'react-router-dom';
import styled from 'styled-components';
@@ -71,9 +73,12 @@ const ReviewTransactionText = styled.h1((props) => ({
}));
function ConfirmNftTransaction() {
+ const dispatch = useDispatch();
const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
const isGalleryOpen: boolean = document.documentElement.clientWidth > 360;
const selectedAccount = useSelectedAccount();
+ const { avatarIds, network } = useWalletSelector();
+ const selectedAvatar = avatarIds[selectedAccount.ordinalsAddress];
const [fee, setFee] = useState();
const navigate = useNavigate();
const location = useLocation();
@@ -84,7 +89,6 @@ function ConfirmNftTransaction() {
const { unsignedTx: unsignedTxHex, recipientAddress } = location.state;
const unsignedTx = useMemo(() => deserializeTransaction(unsignedTxHex), [unsignedTxHex]);
- const { network } = useWalletSelector();
const { refetch } = useStxWalletData();
const selectedNetwork = useNetworkSelector();
const {
@@ -107,11 +111,24 @@ function ConfirmNftTransaction() {
isNft: true,
},
});
+
setTimeout(() => {
refetch();
}, 1000);
+
+ if (selectedAvatar?.type === 'stacks' && selectedAvatar.nft?.token_id === nft?.token_id) {
+ dispatch(removeAccountAvatarAction({ address: selectedAccount.ordinalsAddress }));
+ }
}
- }, [stxTxBroadcastData]);
+ }, [
+ dispatch,
+ navigate,
+ refetch,
+ stxTxBroadcastData,
+ selectedAccount.ordinalsAddress,
+ nft,
+ selectedAvatar,
+ ]);
useEffect(() => {
if (txError) {
@@ -128,10 +145,8 @@ function ConfirmNftTransaction() {
const handleOnConfirmClick = (txs: StacksTransaction[]) => {
if (isLedgerAccount(selectedAccount)) {
- const type: LedgerTransactionType = 'STX';
const state: ConfirmStxTransactionState = {
unsignedTx: Buffer.from(unsignedTx.serialize()),
- type,
recipients: [
{
address: recipientAddress,
@@ -148,7 +163,7 @@ function ConfirmNftTransaction() {
),
};
- navigate('/confirm-ledger-tx', { state });
+ navigate('/confirm-ledger-stx-tx', { state });
return;
}
diff --git a/src/app/screens/confirmStxTransaction/index.tsx b/src/app/screens/confirmStxTransaction/index.tsx
index 92efa41af..b85630963 100644
--- a/src/app/screens/confirmStxTransaction/index.tsx
+++ b/src/app/screens/confirmStxTransaction/index.tsx
@@ -1,5 +1,5 @@
import IconStacks from '@assets/img/dashboard/stx_icon.svg';
-import type { ConfirmStxTransactionState, LedgerTransactionType } from '@common/types/ledger';
+import type { ConfirmStxTransactionState } from '@common/types/ledger';
import {
sendInternalErrorMessage,
sendUserRejectionMessage,
@@ -55,6 +55,13 @@ const SpendDelegatedStxWarning = styled(Callout)((props) => ({
marginBottom: props.theme.space.m,
}));
+const Subtitle = styled.p`
+ ${(props) => props.theme.typography.body_medium_m};
+ color: ${(props) => props.theme.colors.white_200};
+ margin-top: ${(props) => props.theme.space.s};
+ margin-bottom: ${(props) => props.theme.space.xs};
+`;
+
function ConfirmStxTransaction() {
const { t } = useTranslation('translation');
const [hasTabClosed, setHasTabClosed] = useState(false);
@@ -211,16 +218,14 @@ function ConfirmStxTransaction() {
const handleConfirmClick = (txs: StacksTransaction[]) => {
if (isLedgerAccount(selectedAccount)) {
- const type: LedgerTransactionType = 'STX';
const fee = new BigNumber(txs[0].auth.spendingCondition.fee.toString());
const state: ConfirmStxTransactionState = {
unsignedTx: Buffer.from(unsignedTx.serialize()),
- type,
recipients: [{ address: recipient, amountMicrostacks: amount }],
fee,
};
- navigate('/confirm-ledger-tx', { state });
+ navigate('/confirm-ledger-stx-tx', { state });
return;
}
const rawTx = buf2hex(txs[0].serialize());
@@ -350,6 +355,7 @@ function ConfirmStxTransaction() {
currencyType="STX"
title={t('CONFIRM_TRANSACTION.AMOUNT')}
/>
+ {t('CONFIRM_TRANSACTION.TRANSACTION_DETAILS')}
diff --git a/src/app/screens/createPassword/index.tsx b/src/app/screens/createPassword/index.tsx
index 572c78b7e..29b01c37e 100644
--- a/src/app/screens/createPassword/index.tsx
+++ b/src/app/screens/createPassword/index.tsx
@@ -101,7 +101,6 @@ function CreatePassword(): JSX.Element {
handleContinue={handleContinuePasswordCreation}
handleBack={handleNewPasswordBack}
checkPasswordStrength
- createPasswordFlow
autoFocus
/>
) : (
diff --git a/src/app/screens/etchRune/index.tsx b/src/app/screens/etchRune/index.tsx
index 9ad6169d9..61eb7ecb9 100644
--- a/src/app/screens/etchRune/index.tsx
+++ b/src/app/screens/etchRune/index.tsx
@@ -67,18 +67,7 @@ function EtchRune() {
{orderTx && orderTx.summary && !etchError && (
- input.extendedUtxo.address !== btcAddress &&
- input.extendedUtxo.address !== ordinalsAddress,
- ),
- }}
+ runeEtchDetails={etchRequest}
feeRate={+feeRate}
confirmText={t('CONFIRM')}
cancelText={t('CANCEL')}
diff --git a/src/app/screens/executeBrc20Transaction/index.tsx b/src/app/screens/executeBrc20Transaction/index.tsx
index b5882c0d6..3bd44db13 100644
--- a/src/app/screens/executeBrc20Transaction/index.tsx
+++ b/src/app/screens/executeBrc20Transaction/index.tsx
@@ -165,7 +165,7 @@ function ExecuteBrc20Transaction() {
loadingPercentage={loadingPercentageAwareOfStatus}
/>
)}
-
+
theme.typography.body_medium_m};
display: flex;
align-items: center;
+ align-self: flex-start;
column-gap: ${({ theme }) => theme.space.xs};
color: ${({ theme }) => theme.colors.white_0};
margin-top: ${({ theme }) => theme.space.s};
@@ -58,7 +59,7 @@ const LoaderContainer = styled.div((props) => ({
flex: 1,
justifyContent: 'center',
alignItems: 'center',
- marginTop: props.theme.spacing(12),
+ marginTop: props.theme.space.l,
}));
function ExploreScreen() {
diff --git a/src/app/screens/forgotPassword/index.tsx b/src/app/screens/forgotPassword/index.tsx
index 93e2c5303..860719d34 100644
--- a/src/app/screens/forgotPassword/index.tsx
+++ b/src/app/screens/forgotPassword/index.tsx
@@ -1,7 +1,7 @@
-import ActionButton from '@components/button';
-import CheckBox from '@components/checkBox';
import TopRow from '@components/topRow';
import useWalletReducer from '@hooks/useWalletReducer';
+import Button from '@ui-library/button';
+import Checkbox from '@ui-library/checkbox';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
@@ -12,14 +12,14 @@ const Container = styled.div((props) => ({
flexDirection: 'column',
height: '100%',
backgroundColor: props.theme.colors.elevation0,
- padding: `0 ${props.theme.spacing(8)}px 0 ${props.theme.spacing(8)}px`,
+ padding: `0 ${props.theme.space.m}`,
}));
const Paragraph = styled.p((props) => ({
- ...props.theme.body_l,
+ ...props.theme.typography.body_l,
color: props.theme.colors.white_200,
textAlign: 'left',
- marginTop: props.theme.spacing(12),
+ marginTop: props.theme.space.l,
}));
const BottomContainer = styled.div((props) => ({
@@ -30,8 +30,8 @@ const ButtonsContainer = styled.div((props) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
- marginTop: props.theme.spacing(16),
- columnGap: props.theme.spacing(8),
+ marginTop: props.theme.space.xl,
+ columnGap: props.theme.space.xs,
}));
const StyledTopRow = styled(TopRow)({
@@ -54,7 +54,7 @@ function ForgotPassword(): JSX.Element {
const handleResetWallet = async () => {
await resetWallet();
- navigate('/');
+ onBack();
};
return (
@@ -63,19 +63,19 @@ function ForgotPassword(): JSX.Element {
{t('PARAGRAPH1')}
{t('PARAGRAPH2')}
-
-
diff --git a/src/app/screens/home/announcementModal/index.tsx b/src/app/screens/home/announcementModal/index.tsx
new file mode 100644
index 000000000..47d2fa1b2
--- /dev/null
+++ b/src/app/screens/home/announcementModal/index.tsx
@@ -0,0 +1,43 @@
+import { useSessionStorage } from '@hooks/useStorage';
+import { markAlertSeen, shouldShowAlert, type AnnouncementKey } from '@utils/alertTracker';
+import { useEffect, useRef, useState } from 'react';
+import NativeSegWit from './nativeSegWit';
+
+const getAnnouncementToShow = () => {
+ if (shouldShowAlert('native_segwit_intro')) {
+ return 'native_segwit_intro';
+ }
+ return undefined;
+};
+
+export default function AnnouncementModal() {
+ const [hasShown, setHasShown] = useSessionStorage('announceShown', false);
+ const stickyShown = useRef(hasShown);
+ const [announcementToShow, setAnnouncementToShow] = useState();
+ const [isVisible, setIsVisible] = useState(true);
+
+ useEffect(() => {
+ setHasShown(true);
+
+ if (stickyShown.current) {
+ // we've already shown the announcement modal on this load, so don't show it again
+ return;
+ }
+
+ const announcement = getAnnouncementToShow();
+ setAnnouncementToShow(announcement);
+ // eslint-disable-next-line react-hooks/exhaustive-deps -- we only want to run this once
+ }, []);
+
+ const onClose = (announcementKey: AnnouncementKey) => () => {
+ setIsVisible(false);
+ markAlertSeen(announcementKey);
+ };
+
+ switch (announcementToShow) {
+ case 'native_segwit_intro':
+ return
+
+ {t('DESCRIPTION_1a')}
+ {t('DESCRIPTION_1b')}
+ {t('DESCRIPTION_1c')}
+
+ {t('DESCRIPTION_2')}
+ {t('DESCRIPTION_3')}
+
+
+
+
+
+ );
+}
diff --git a/src/app/screens/home/balanceCard/index.tsx b/src/app/screens/home/balanceCard/index.tsx
index cf240a745..302eb7d7c 100644
--- a/src/app/screens/home/balanceCard/index.tsx
+++ b/src/app/screens/home/balanceCard/index.tsx
@@ -3,18 +3,21 @@ import { useVisibleBrc20FungibleTokens } from '@hooks/queries/ordinals/useGetBrc
import { useVisibleRuneFungibleTokens } from '@hooks/queries/runes/useRuneFungibleTokensQuery';
import { useVisibleSip10FungibleTokens } from '@hooks/queries/stx/useGetSip10FungibleTokens';
import useAccountBalance from '@hooks/queries/useAccountBalance';
-import useBtcWalletData from '@hooks/queries/useBtcWalletData';
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSelectedAccountBtcBalance from '@hooks/queries/useSelectedAccountBtcBalance';
import useStxWalletData from '@hooks/queries/useStxWalletData';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
import useSelectedAccount from '@hooks/useSelectedAccount';
import useWalletSelector from '@hooks/useWalletSelector';
import { currencySymbolMap } from '@secretkeylabs/xverse-core';
+import { setBalanceHiddenToggleAction } from '@stores/wallet/actions/actionCreators';
import Spinner from '@ui-library/spinner';
-import { LoaderSize } from '@utils/constants';
-import { calculateTotalBalance } from '@utils/helper';
+import { HIDDEN_BALANCE_LABEL, LoaderSize } from '@utils/constants';
+import { calculateTotalBalance, getAccountBalanceKey } from '@utils/helper';
+import BigNumber from 'bignumber.js';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { NumericFormat } from 'react-number-format';
+import { useDispatch } from 'react-redux';
import styled from 'styled-components';
const RowContainer = styled.div((props) => ({
@@ -61,8 +64,10 @@ const BalanceContainer = styled.div((props) => ({
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-start',
+ width: 'fit-content',
alignItems: 'center',
gap: props.theme.spacing(5),
+ cursor: 'pointer',
}));
interface BalanceCardProps {
@@ -73,20 +78,23 @@ interface BalanceCardProps {
function BalanceCard(props: BalanceCardProps) {
const { t } = useTranslation('translation', { keyPrefix: 'DASHBOARD_SCREEN' });
const selectedAccount = useSelectedAccount();
- const { fiatCurrency, hideStx, accountBalances } = useWalletSelector();
- const { data: btcBalance } = useBtcWalletData();
+ const dispatch = useDispatch();
+ const { fiatCurrency, hideStx, accountBalances, balanceHidden } = useWalletSelector();
+ const { confirmedPaymentBalance: btcBalance, isLoading: btcBalanceLoading } =
+ useSelectedAccountBtcBalance();
const { data: stxData } = useStxWalletData();
- const { btcFiatRate, stxBtcRate } = useCoinRates();
+ const { btcFiatRate, stxBtcRate } = useSupportedCoinRates();
const { setAccountBalance } = useAccountBalance();
const { isLoading, isRefetching } = props;
- const oldTotalBalance = accountBalances[selectedAccount.btcAddress];
- const { visible: sip10CoinsList } = useVisibleSip10FungibleTokens();
- const { visible: brc20CoinsList } = useVisibleBrc20FungibleTokens();
- const { visible: runesCoinList } = useVisibleRuneFungibleTokens();
+ // TODO: refactor this into a hook
+ const oldTotalBalance = accountBalances[getAccountBalanceKey(selectedAccount)];
+ const { data: sip10CoinsList } = useVisibleSip10FungibleTokens();
+ const { data: brc20CoinsList } = useVisibleBrc20FungibleTokens();
+ const { data: runesCoinList } = useVisibleRuneFungibleTokens();
const balance = calculateTotalBalance({
- stxBalance: stxData?.balance.toString() ?? '0',
- btcBalance: btcBalance?.toString() ?? '0',
+ stxBalance: BigNumber(stxData?.balance ?? 0).toString(),
+ btcBalance: (btcBalance ?? 0).toString(),
sipCoinsList: sip10CoinsList,
brcCoinsList: brc20CoinsList,
runesCoinList,
@@ -96,14 +104,14 @@ function BalanceCard(props: BalanceCardProps) {
});
useEffect(() => {
- if (!balance || !selectedAccount || isLoading || isRefetching) {
+ if (!balance || !selectedAccount || isLoading || btcBalanceLoading || isRefetching) {
return;
}
if (oldTotalBalance !== balance) {
setAccountBalance(selectedAccount, balance);
}
- }, [balance, oldTotalBalance, selectedAccount, isLoading, isRefetching]);
+ }, [balance, oldTotalBalance, selectedAccount, isLoading, isRefetching, btcBalanceLoading]);
useEffect(() => {
(() => {
@@ -125,6 +133,12 @@ function BalanceCard(props: BalanceCardProps) {
})();
});
+ const onClickBalance = () => dispatch(setBalanceHiddenToggleAction({ toggle: !balanceHidden }));
+
+ const onKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === 'Enter') onClickBalance();
+ };
+
return (
<>
@@ -138,20 +152,29 @@ function BalanceCard(props: BalanceCardProps) {
- (
- {value}
- )}
- />
- {isRefetching && (
-
+ {balanceHidden && (
+
+ {HIDDEN_BALANCE_LABEL}
+
+ )}
+ {!balanceHidden && (
+ <>
+ (
+ {value}
+ )}
+ />
+ {isRefetching && (
+
)}
diff --git a/src/app/screens/home/banner.tsx b/src/app/screens/home/banner.tsx
index bab3a7d79..056493311 100644
--- a/src/app/screens/home/banner.tsx
+++ b/src/app/screens/home/banner.tsx
@@ -1,27 +1,25 @@
-import { XCircle } from '@phosphor-icons/react';
import { AnalyticsEvents, type NotificationBanner } from '@secretkeylabs/xverse-core';
-import { setNotificationBannersAction } from '@stores/wallet/actions/actionCreators';
-import { CrossButton } from '@ui-library/sheet';
import { trackMixPanel } from '@utils/mixpanel';
-import { useDispatch } from 'react-redux';
import styled from 'styled-components';
-import Theme from 'theme';
const Container = styled.div`
position: relative;
width: 100%;
color: ${({ theme }) => theme.colors.white_0};
- padding-top: ${({ theme }) => theme.space.xxs};
- padding-bottom: ${({ theme }) => theme.space.m};
`;
-const BannerContent = styled.div`
+const BannerContent = styled.button`
cursor: pointer;
+ width: 100%;
+ min-height: 60px;
display: flex;
align-items: center;
- column-gap: ${({ theme }) => theme.space.m};
+ column-gap: ${({ theme }) => theme.space.s};
padding-left: ${({ theme }) => theme.space.m};
padding-right: ${({ theme }) => theme.space.m};
+ color: ${({ theme }) => theme.colors.white_0};
+ background-color: transparent;
+ text-align: left;
transition: opacity 0.1s ease;
&:hover {
@@ -52,25 +50,9 @@ const BannerText = styled.div`
overflow: hidden;
`;
-const StyledCrossButton = styled(CrossButton)`
- z-index: 1;
- position: absolute;
- top: -${(props) => props.theme.space.xs};
- right: -${(props) => props.theme.space.xxs};
-`;
-
-function Banner({ id, name, url, icon, description }: NotificationBanner) {
- const dispatch = useDispatch();
-
- const dismissBanner = () => {
- dispatch(setNotificationBannersAction({ id, isDismissed: true }));
- };
-
+function Banner({ name, url, icon, description }: NotificationBanner) {
return (
-
-
{
trackMixPanel(
diff --git a/src/app/screens/home/bannerCarousel.tsx b/src/app/screens/home/bannerCarousel.tsx
new file mode 100644
index 000000000..47d978c99
--- /dev/null
+++ b/src/app/screens/home/bannerCarousel.tsx
@@ -0,0 +1,142 @@
+import { CaretLeft, CaretRight } from '@phosphor-icons/react';
+import type { NotificationBanner } from '@secretkeylabs/xverse-core';
+import { setNotificationBannersAction } from '@stores/wallet/actions/actionCreators';
+import CrossButton from '@ui-library/crossButton';
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import styled from 'styled-components';
+import 'swiper/css';
+import 'swiper/css/pagination';
+import { Navigation, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import Banner from './banner';
+
+const CarouselContainer = styled.div`
+ position: relative;
+ margin-top: ${({ theme }) => theme.space.xxs};
+ margin-bottom: ${({ theme }) => theme.space.xxs};
+
+ .swiper {
+ padding: 0;
+ z-index: 0;
+ }
+
+ .swiper-wrapper {
+ align-items: center;
+ }
+
+ .swiper-pagination {
+ position: absolute;
+ bottom: 0px;
+ }
+
+ .swiper-pagination-bullet {
+ width: 6px;
+ height: 6px;
+ background: ${(props) => props.theme.colors.white_600};
+ opacity: 1;
+ border-radius: 50px;
+ transition: width 0.2s ease, background 0.1s ease;
+ }
+
+ .swiper-pagination-bullet-active {
+ width: 18px;
+ background: ${(props) => props.theme.colors.white_0};
+ }
+`;
+
+const Button = styled.button`
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ background-color: transparent;
+ width: 18px;
+ height: 18px;
+ z-index: 1;
+
+ svg {
+ color: ${({ theme }) => theme.colors.white_0};
+ transition: color 0.1s ease;
+ }
+
+ &:hover {
+ svg {
+ color: ${({ theme }) => theme.colors.white_200};
+ }
+ }
+
+ &:disabled {
+ cursor: default;
+ svg {
+ color: ${({ theme }) => theme.colors.white_600};
+ }
+ }
+
+ &.swiper-button-next {
+ right: -6px;
+ }
+
+ &.swiper-button-prev {
+ left: -8px;
+ }
+`;
+
+const PaginationContainer = styled.div`
+ margin-bottom: -40px;
+ z-index: 1;
+`;
+
+const StyledCrossButton = styled(CrossButton)`
+ top: -8px;
+ right: -6px;
+ z-index: 1;
+`;
+
+type Props = {
+ items: NotificationBanner[];
+};
+
+function BannerCarousel({ items }: Props) {
+ const [activeIndex, setActiveIndex] = useState(0);
+ const dispatch = useDispatch();
+
+ const dismissBanner = () => {
+ dispatch(setNotificationBannersAction({ id: items[activeIndex].id, isDismissed: true }));
+ };
+
+ return (
+
+ {
+ setActiveIndex(swiper.activeIndex);
+ }}
+ allowTouchMove
+ >
+ {items.map((item) => (
+
+
+ ))}
+
+ {items.length > 1 && (
+ <>
+
+
+
+ )}
+
+ );
+}
+
+export default BannerCarousel;
diff --git a/src/app/screens/home/index.styled.ts b/src/app/screens/home/index.styled.ts
index 5f34e3d64..bebc02d64 100644
--- a/src/app/screens/home/index.styled.ts
+++ b/src/app/screens/home/index.styled.ts
@@ -1,4 +1,5 @@
import TokenTile from '@components/tokenTile';
+import Callout from '@ui-library/callout';
import Divider from '@ui-library/divider';
import styled from 'styled-components';
@@ -15,16 +16,13 @@ export const ColumnContainer = styled.div((props) => ({
flexDirection: 'column',
alignItems: 'space-between',
justifyContent: 'space-between',
- gap: props.theme.space.s,
- marginTop: props.theme.space.l,
+ marginTop: props.theme.space.xs,
marginBottom: props.theme.space.s,
}));
export const ReceiveContainer = styled.div((props) => ({
display: 'flex',
flexDirection: 'column',
- marginTop: props.theme.spacing(12),
- marginBottom: props.theme.spacing(16),
gap: props.theme.space.m,
}));
@@ -64,12 +62,12 @@ export const TokenListButtonContainer = styled.div((props) => ({
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
- marginTop: props.theme.spacing(6),
+ marginTop: props.theme.space.s,
marginBottom: props.theme.spacing(22),
}));
export const StyledTokenTile = styled(TokenTile)`
- background-color: ${(props) => props.theme.colors.elevation1};
+ background-color: transparent;
`;
export const Icon = styled.img({
@@ -83,7 +81,7 @@ export const MergedOrdinalsIcon = styled.img({
});
export const VerifyOrViewContainer = styled.div((props) => ({
- marginTop: props.theme.spacing(16),
+ marginTop: props.theme.space.xl,
marginBottom: props.theme.spacing(20),
}));
@@ -92,9 +90,9 @@ export const VerifyButtonContainer = styled.div((props) => ({
}));
export const ModalContent = styled.div((props) => ({
- padding: props.theme.spacing(8),
+ padding: props.theme.space.m,
paddingTop: 0,
- paddingBottom: props.theme.spacing(16),
+ paddingBottom: props.theme.space.xl,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
@@ -106,14 +104,14 @@ export const ModalIcon = styled.img((props) => ({
export const ModalTitle = styled.div((props) => ({
...props.theme.typography.body_bold_l,
- marginBottom: props.theme.spacing(4),
+ marginBottom: props.theme.space.xs,
textAlign: 'center',
}));
export const ModalDescription = styled.div((props) => ({
...props.theme.typography.body_m,
color: props.theme.colors.white_200,
- marginBottom: props.theme.spacing(16),
+ marginBottom: props.theme.space.xl,
textAlign: 'center',
}));
@@ -140,7 +138,7 @@ export const StacksIcon = styled.img({
export const MergedIcon = styled.div((props) => ({
position: 'relative',
- marginBottom: props.theme.spacing(12),
+ marginBottom: props.theme.space.l,
}));
export const IconBackground = styled.div((props) => ({
@@ -157,9 +155,23 @@ export const IconBackground = styled.div((props) => ({
alignItems: 'center',
}));
-export const StyledDivider = styled(Divider)`
+export const StyledDivider = styled(Divider)<{ $noMarginBottom?: boolean }>`
flex: 1 0 auto;
width: calc(100% + ${(props) => props.theme.space.xl});
margin-left: -${(props) => props.theme.space.m};
margin-right: -${(props) => props.theme.space.m};
+ transition: margin-bottom 0.1s ease;
+ ${(props) =>
+ props.$noMarginBottom &&
+ `
+ margin-bottom: 0;
+ `}
`;
+
+export const StyledDividerSingle = styled(StyledDivider)`
+ margin-bottom: 0;
+`;
+
+export const SpacedCallout = styled(Callout)((props) => ({
+ marginTop: props.theme.space.s,
+}));
diff --git a/src/app/screens/home/index.tsx b/src/app/screens/home/index.tsx
index fce35f393..60a78c5e6 100644
--- a/src/app/screens/home/index.tsx
+++ b/src/app/screens/home/index.tsx
@@ -1,32 +1,42 @@
import dashboardIcon from '@assets/img/dashboard-icon.svg';
-import BitcoinToken from '@assets/img/dashboard/bitcoin_token.svg';
import ListDashes from '@assets/img/dashboard/list_dashes.svg';
-import ordinalsIcon from '@assets/img/dashboard/ordinalBRC20.svg';
-import stacksIcon from '@assets/img/dashboard/stx_icon.svg';
import ArrowSwap from '@assets/img/icons/ArrowSwap.svg';
import AccountHeaderComponent from '@components/accountHeader';
import BottomModal from '@components/bottomModal';
-import ReceiveCardComponent from '@components/receiveCardComponent';
-import ShowBtcReceiveAlert from '@components/showBtcReceiveAlert';
-import ShowOrdinalReceiveAlert from '@components/showOrdinalReceiveAlert';
import BottomBar from '@components/tabBar';
-import { useVisibleBrc20FungibleTokens } from '@hooks/queries/ordinals/useGetBrc20FungibleTokens';
-import { useVisibleRuneFungibleTokens } from '@hooks/queries/runes/useRuneFungibleTokensQuery';
-import { useVisibleSip10FungibleTokens } from '@hooks/queries/stx/useGetSip10FungibleTokens';
+import {
+ useGetBrc20FungibleTokens,
+ useVisibleBrc20FungibleTokens,
+} from '@hooks/queries/ordinals/useGetBrc20FungibleTokens';
+import {
+ useRuneFungibleTokensQuery,
+ useVisibleRuneFungibleTokens,
+} from '@hooks/queries/runes/useRuneFungibleTokensQuery';
+import {
+ useGetSip10FungibleTokens,
+ useVisibleSip10FungibleTokens,
+} from '@hooks/queries/stx/useGetSip10FungibleTokens';
import useAppConfig from '@hooks/queries/useAppConfig';
-import useBtcWalletData from '@hooks/queries/useBtcWalletData';
-import useCoinRates from '@hooks/queries/useCoinRates';
import useFeeMultipliers from '@hooks/queries/useFeeMultipliers';
+import useSelectedAccountBtcBalance from '@hooks/queries/useSelectedAccountBtcBalance';
import useSpamTokens from '@hooks/queries/useSpamTokens';
import useStxWalletData from '@hooks/queries/useStxWalletData';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
+import useAvatarCleanup from '@hooks/useAvatarCleanup';
import useHasFeature from '@hooks/useHasFeature';
import useNotificationBanners from '@hooks/useNotificationBanners';
import useSelectedAccount from '@hooks/useSelectedAccount';
import useTrackMixPanelPageViewed from '@hooks/useTrackMixPanelPageViewed';
import useWalletSelector from '@hooks/useWalletSelector';
import { ArrowDown, ArrowUp, Plus } from '@phosphor-icons/react';
+import { animated, useTransition } from '@react-spring/web';
import CoinSelectModal from '@screens/home/coinSelectModal';
-import { AnalyticsEvents, FeatureId, type FungibleToken } from '@secretkeylabs/xverse-core';
+import {
+ AnalyticsEvents,
+ FeatureId,
+ type FungibleToken,
+ type FungibleTokenWithStates,
+} from '@secretkeylabs/xverse-core';
import {
changeShowDataCollectionAlertAction,
setBrc20ManageTokensAction,
@@ -35,13 +45,11 @@ import {
setSpamTokenAction,
} from '@stores/wallet/actions/actionCreators';
import Button from '@ui-library/button';
-import Sheet from '@ui-library/sheet';
import SnackBar from '@ui-library/snackBar';
import type { CurrencyTypes } from '@utils/constants';
import { isInOptions, isLedgerAccount } from '@utils/helper';
import { optInMixPanel, optOutMixPanel, trackMixPanel } from '@utils/mixpanel';
import { sortFtByFiatBalance } from '@utils/tokens';
-import BigNumber from 'bignumber.js';
import { useEffect, useState } from 'react';
import toast from 'react-hot-toast';
import { useTranslation } from 'react-i18next';
@@ -49,88 +57,72 @@ import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { useTheme } from 'styled-components';
import SquareButton from '../../components/squareButton';
+import AnnouncementModal from './announcementModal';
import BalanceCard from './balanceCard';
-import Banner from './banner';
+import BannerCarousel from './bannerCarousel';
import {
ButtonImage,
ButtonText,
ColumnContainer,
Container,
- Icon,
- IconBackground,
- MergedIcon,
- MergedOrdinalsIcon,
ModalButtonContainer,
ModalContent,
ModalControlsContainer,
ModalDescription,
ModalIcon,
ModalTitle,
- ReceiveContainer,
RowButtonContainer,
- StacksIcon,
StyledDivider,
+ StyledDividerSingle,
StyledTokenTile,
TokenListButton,
TokenListButtonContainer,
- VerifyButtonContainer,
- VerifyOrViewContainer,
} from './index.styled';
+import ReceiveSheet from './receiveSheet';
function Home() {
const { t } = useTranslation('translation', {
keyPrefix: 'DASHBOARD_SCREEN',
});
const selectedAccount = useSelectedAccount();
- const { stxAddress, btcAddress, ordinalsAddress } = selectedAccount;
- const {
- showBtcReceiveAlert,
- showOrdinalReceiveAlert,
- showDataCollectionAlert,
- network,
- hideStx,
- spamToken,
- notificationBanners,
- } = useWalletSelector();
+ const { stxAddress, btcAddress } = selectedAccount;
+ const { showDataCollectionAlert, hideStx, spamToken, notificationBanners } = useWalletSelector();
const theme = useTheme();
const navigate = useNavigate();
const dispatch = useDispatch();
const [openReceiveModal, setOpenReceiveModal] = useState(false);
const [openSendModal, setOpenSendModal] = useState(false);
const [openBuyModal, setOpenBuyModal] = useState(false);
- const [isBtcReceiveAlertVisible, setIsBtcReceiveAlertVisible] = useState(false);
- const [isOrdinalReceiveAlertVisible, setIsOrdinalReceiveAlertVisible] = useState(false);
- const [areReceivingAddressesVisible, setAreReceivingAddressesVisible] = useState(
- !isLedgerAccount(selectedAccount),
- );
- const [choseToVerifyAddresses, setChoseToVerifyAddresses] = useState(false);
- const { isInitialLoading: loadingBtcWalletData, isRefetching: refetchingBtcWalletData } =
- useBtcWalletData();
+ const { isLoading: loadingBtcWalletData, isRefetching: refetchingBtcWalletData } =
+ useSelectedAccountBtcBalance();
const { isInitialLoading: loadingStxWalletData, isRefetching: refetchingStxWalletData } =
useStxWalletData();
- const { btcFiatRate, stxBtcRate } = useCoinRates();
- const { data: notificationBannersArr } = useNotificationBanners();
+ const { btcFiatRate, stxBtcRate } = useSupportedCoinRates();
+ const { data: notificationBannersArr, isFetching: isFetchingNotificationBannersArr } =
+ useNotificationBanners();
+
+ const { data: fullSip10CoinsList } = useGetSip10FungibleTokens();
+ const { data: fullBrc20CoinsList } = useGetBrc20FungibleTokens();
+ const { data: fullRunesCoinsList } = useRuneFungibleTokensQuery();
const {
- unfilteredData: fullSip10CoinsList,
- visible: sip10CoinsList,
+ data: sip10CoinsList,
isInitialLoading: loadingStxCoinData,
isRefetching: refetchingStxCoinData,
} = useVisibleSip10FungibleTokens();
const {
- unfilteredData: fullBrc20CoinsList,
- visible: brc20CoinsList,
+ data: brc20CoinsList,
isInitialLoading: loadingBrcCoinData,
isRefetching: refetchingBrcCoinData,
} = useVisibleBrc20FungibleTokens();
const {
- unfilteredData: fullRunesCoinsList,
- visible: runesCoinsList,
+ data: runesCoinsList,
isInitialLoading: loadingRunesData,
isRefetching: refetchingRunesData,
} = useVisibleRuneFungibleTokens();
useFeeMultipliers();
useAppConfig();
+ useAvatarCleanup();
useTrackMixPanelPageViewed();
const { removeFromSpamTokens } = useSpamTokens();
@@ -159,11 +151,23 @@ function Home() {
isEnabled: true,
};
- if (fullRunesCoinsList?.find((ft) => ft.principal === spamToken.principal)) {
+ if (
+ fullRunesCoinsList?.find(
+ (ft: FungibleTokenWithStates) => ft.principal === spamToken.principal,
+ )
+ ) {
dispatch(setRunesManageTokensAction(payload));
- } else if (fullSip10CoinsList?.find((ft) => ft.principal === spamToken.principal)) {
+ } else if (
+ fullSip10CoinsList?.find(
+ (ft: FungibleTokenWithStates) => ft.principal === spamToken.principal,
+ )
+ ) {
dispatch(setSip10ManageTokensAction(payload));
- } else if (fullBrc20CoinsList?.find((ft) => ft.principal === spamToken.principal)) {
+ } else if (
+ fullBrc20CoinsList?.find(
+ (ft: FungibleTokenWithStates) => ft.principal === spamToken.principal,
+ )
+ ) {
dispatch(setBrc20ManageTokensAction(payload));
}
@@ -177,29 +181,23 @@ function Home() {
}
}, [spamToken]);
- const combinedFtList = sip10CoinsList
- .concat(brc20CoinsList)
- .concat(runesCoinsList)
- .sort((a, b) => sortFtByFiatBalance(a, b, stxBtcRate, btcFiatRate));
+ const combinedFtList = (sip10CoinsList ?? [])
+ .concat(brc20CoinsList ?? [])
+ .concat(runesCoinsList ?? [])
+ .sort((a: FungibleTokenWithStates, b: FungibleTokenWithStates) =>
+ sortFtByFiatBalance(a, b, stxBtcRate, btcFiatRate),
+ );
- const showNotificationBanner =
- notificationBannersArr?.length &&
- notificationBannersArr.length > 0 &&
- !notificationBanners[notificationBannersArr[0].id];
+ const filteredNotificationBannersArr = notificationBannersArr
+ ? notificationBannersArr.filter((banner) => !notificationBanners[banner.id])
+ : [];
+ const showBannerCarousel =
+ !isFetchingNotificationBannersArr && !!filteredNotificationBannersArr?.length;
const onReceiveModalOpen = () => {
setOpenReceiveModal(true);
};
- const onReceiveModalClose = () => {
- setOpenReceiveModal(false);
-
- if (isLedgerAccount(selectedAccount)) {
- setAreReceivingAddressesVisible(false);
- setChoseToVerifyAddresses(false);
- }
- };
-
const onSendModalOpen = () => {
setOpenSendModal(true);
};
@@ -240,14 +238,6 @@ function Home() {
navigate('/send-btc');
};
- const onBTCReceiveSelect = () => {
- navigate('/receive/BTC');
- };
-
- const onSTXReceiveSelect = () => {
- navigate('/receive/STX');
- };
-
const onSendFtSelect = async (fungibleToken: FungibleToken) => {
let route = '';
switch (fungibleToken?.protocol) {
@@ -281,22 +271,6 @@ function Home() {
navigate('/buy/BTC');
};
- const onOrdinalReceiveAlertOpen = () => {
- if (showOrdinalReceiveAlert) setIsOrdinalReceiveAlertVisible(true);
- };
-
- const onOrdinalReceiveAlertClose = () => {
- setIsOrdinalReceiveAlertVisible(false);
- };
-
- const onReceiveAlertClose = () => {
- setIsBtcReceiveAlertVisible(false);
- };
-
- const onReceiveAlertOpen = () => {
- if (showBtcReceiveAlert) setIsBtcReceiveAlertVisible(true);
- };
-
const handleTokenPressed = (currency: CurrencyTypes, fungibleToken?: FungibleToken) => {
if (fungibleToken) {
navigate(
@@ -307,99 +281,11 @@ function Home() {
}
};
- const onOrdinalsReceivePress = () => {
- navigate('/receive/ORD');
- };
-
const onSwapPressed = () => {
trackMixPanel(AnalyticsEvents.InitiateSwapFlow, {});
navigate('/swap');
};
- const receiveContent = (
-
-
-
-
-
-
-
- {stxAddress && (
-
-
-
-
-
-
- )}
-
- {isLedgerAccount(selectedAccount) && !stxAddress && (
- }
- title={t('ADD_STACKS_ADDRESS')}
- onClick={async () => {
- if (!isInOptions()) {
- await chrome.tabs.create({
- url: chrome.runtime.getURL(`options.html#/add-stx-address-ledger`),
- });
- } else {
- navigate('/add-stx-address-ledger');
- }
- }}
- />
- )}
-
- );
-
- const verifyOrViewAddresses = (
-
-
-
-
- );
-
const handleDataCollectionDeny = () => {
optOutMixPanel();
dispatch(changeShowDataCollectionAlertAction(false));
@@ -413,15 +299,24 @@ function Home() {
const isCrossChainSwapsEnabled = useHasFeature(FeatureId.CROSS_CHAIN_SWAPS);
const showSwaps = isCrossChainSwapsEnabled;
+ const transitions = useTransition(showBannerCarousel, {
+ from: { maxHeight: '1000px', opacity: 0.5 },
+ enter: { maxHeight: '1000px', opacity: 1 },
+ leave: { maxHeight: '0px', opacity: 0 },
+ config: (item, index, phase) =>
+ phase === 'leave'
+ ? {
+ duration: 300,
+ easing: (progress) => 1 - (1 - progress) ** 4,
+ }
+ : {
+ duration: 200,
+ },
+ });
+
return (
<>
-
+
+
+ ) : (
+
+
+ ),
)}
@@ -478,7 +383,7 @@ function Home() {
onPress={handleTokenPressed}
/>
)}
- {combinedFtList.map((coin) => {
+ {combinedFtList.map((coin: FungibleTokenWithStates) => {
const isLoading = loadingStxCoinData || loadingBrcCoinData || loadingRunesData;
return (
- {areReceivingAddressesVisible ? receiveContent : verifyOrViewAddresses}
-
+
+ setOpenReceiveModal(false)} />
+
new BigNumber(ft.balance).gt(0))}
+ coins={combinedFtList}
title={t('SEND')}
loadingWalletData={loadingStxWalletData || loadingBtcWalletData}
/>
@@ -523,6 +428,7 @@ function Home() {
title={t('BUY')}
loadingWalletData={loadingStxWalletData || loadingBtcWalletData}
/>
+
+
+
+
+
+ }
+ />
+ )}
+
+ {isLedgerAccount(selectedAccount) && !stxAddress && (
+ }
+ title={t('ADD_STACKS_ADDRESS')}
+ onClick={async () => {
+ if (!isInOptions()) {
+ await chrome.tabs.create({
+ url: chrome.runtime.getURL(`options.html#/add-stx-address-ledger`),
+ });
+ } else {
+ navigate('/add-stx-address-ledger');
+ }
+ }}
+ />
+ )}
+
+ );
+
+ const verifyOrViewAddresses = (
+
+
+
+
+ );
+
+ return (
+ <>
+ {isBtcReceiveAlertVisible && (
+
+ {areReceivingAddressesVisible ? receiveContent : verifyOrViewAddresses}
+
+
+ );
+}
+
+export default ReceiveSheet;
diff --git a/src/app/screens/landing/index.tsx b/src/app/screens/landing/index.tsx
index 41e317546..5eb6936cb 100644
--- a/src/app/screens/landing/index.tsx
+++ b/src/app/screens/landing/index.tsx
@@ -131,13 +131,13 @@ const InitialTransitionLandingSectionContainer = styled(LandingSectionContainer)
animation: ${() => slideY} 0.2s ease-out;
`;
-const TransitionLeftLandingSectionContainer = styled(LandingSectionContainer)`
- animation: ${slideLeftAnimation} 0.3s cubic-bezier(0, 0, 0.58, 1) forwards;
-`;
-
-const TransitionRightLandingSectionContainer = styled(LandingSectionContainer)`
- animation: ${() => slideRightAnimation} 0.3s cubic-bezier(0, 0, 0.58, 1) forwards;
-`;
+const TransitionLandingSectionContainer = styled(LandingSectionContainer)<{
+ $direction: 'left' | 'right';
+}>((props) => ({
+ animation: `${
+ props.$direction === 'left' ? slideLeftAnimation : slideRightAnimation
+ } 0.3s cubic-bezier(0, 0, 0.58, 1) forwards`,
+}));
const Logo = styled.img`
width: 135px;
@@ -155,13 +155,13 @@ const OnboardingContainer = styled.div((props) => ({
marginBottom: props.theme.space.l,
}));
-const TransitionLeftOnboardingContainer = styled(OnboardingContainer)`
- animation: ${() => slideLeftAnimation} 0.3s cubic-bezier(0, 0, 0.58, 1) forwards;
-`;
-
-const TransitionRightOnboardingContainer = styled(OnboardingContainer)`
- animation: ${() => slideRightAnimation} 0.3s cubic-bezier(0, 0, 0.58, 1) forwards;
-`;
+const TransitionOnboardingContainer = styled(OnboardingContainer)<{
+ $direction: 'left' | 'right';
+}>((props) => ({
+ animation: `${
+ props.$direction === 'left' ? slideLeftAnimation : slideRightAnimation
+ } 0.3s cubic-bezier(0, 0, 0.58, 1) forwards`,
+}));
const OnBoardingImage = styled.img(() => ({
marginTop: -26,
@@ -201,7 +201,9 @@ const RestoreButton = styled(Button)((props) => ({
function Landing() {
const { t } = useTranslation('translation', { keyPrefix: 'LANDING_SCREEN' });
const [currentStepIndex, setCurrentStepIndex] = useState(0);
- const [animationComplete, setAnimationComplete] = useState(false);
+ const [animationComplete, setAnimationComplete] = useState(
+ process.env.SKIP_ANIMATION_WALLET_STARTUP === 'true',
+ );
const [slideTransitions, setSlideTransitions] = useState(false);
const [transitionDirection, setTransitionDirection] = useState<'left' | 'right'>('right');
const navigate = useNavigate();
@@ -305,24 +307,19 @@ function Landing() {
if (slideTransitions) {
switch (currentStepIndex) {
case 0:
- return transitionDirection === 'left' ? (
-
- {renderLandingSection()}
-
- ) : (
-
+ return (
+
{renderLandingSection()}
-
+
);
default:
- return transitionDirection === 'left' ? (
-
- {renderOnboardingContent(currentStepIndex)}
-
- ) : (
-
+ return (
+
{renderOnboardingContent(currentStepIndex)}
-
+
);
}
} else {
diff --git a/src/app/screens/ledger/addStxAddress/index.tsx b/src/app/screens/ledger/addStxAddress/index.tsx
index 04f6b67e8..4c2b3ee2c 100644
--- a/src/app/screens/ledger/addStxAddress/index.tsx
+++ b/src/app/screens/ledger/addStxAddress/index.tsx
@@ -1,7 +1,7 @@
import stxIcon from '@assets/img/dashboard/stx_icon.svg';
import checkCircleIcon from '@assets/img/ledger/check_circle.svg';
import ledgerConnectStxIcon from '@assets/img/ledger/ledger_import_connect_stx.svg';
-import { delay } from '@common/utils/ledger';
+import { delay } from '@common/utils/promises';
import ActionButton from '@components/button';
import LedgerConnectionView from '@components/ledger/connectLedgerView';
import LedgerFailView from '@components/ledger/failLedgerView';
@@ -56,7 +56,7 @@ function AddStxAddress(): JSX.Element {
const [isAddressRejected, setIsAddressRejected] = useState(false);
const [stacksCredentials, setStacksCredentials] = useState(undefined);
const selectedAccount = useSelectedAccount();
- const { network } = useWalletSelector();
+ const { network, ledgerAccountsList } = useWalletSelector();
const { updateLedgerAccounts } = useWalletReducer();
const { search } = useLocation();
const params = new URLSearchParams(search);
@@ -74,8 +74,14 @@ function AddStxAddress(): JSX.Element {
return;
}
+ const existingAccount = ledgerAccountsList.find((account) => account.id === selectedAccount.id);
+
+ if (!existingAccount) {
+ return;
+ }
+
const ledgerAccount: Account = {
- ...selectedAccount,
+ ...existingAccount,
stxAddress: stacksCreds?.address || '',
stxPublicKey: stacksCreds?.publicKey || '',
};
diff --git a/src/app/screens/ledger/confirmLedgerTransaction/index.styled.ts b/src/app/screens/ledger/confirmLedgerStxTransaction/index.styled.ts
similarity index 77%
rename from src/app/screens/ledger/confirmLedgerTransaction/index.styled.ts
rename to src/app/screens/ledger/confirmLedgerStxTransaction/index.styled.ts
index c2be25a13..ac60de4bd 100644
--- a/src/app/screens/ledger/confirmLedgerTransaction/index.styled.ts
+++ b/src/app/screens/ledger/confirmLedgerStxTransaction/index.styled.ts
@@ -61,22 +61,6 @@ export const ConnectLedgerTitle = styled.h1<{ textAlign?: 'left' | 'center' }>((
marginBottom: props.theme.spacing(6),
}));
-export const ConnectLedgerTextAdvanced = styled.p<{
- isCompleted?: boolean;
-}>((props) => ({
- ...props.theme.body_m,
- display: 'flex',
- alignItems: 'flex-start',
- color: props.isCompleted ? props.theme.colors.white_400 : props.theme.colors.white_200,
- textAlign: 'center',
- marginBottom: props.theme.spacing(16),
-}));
-
-export const InfoContainerWrapper = styled.div((props) => ({
- textAlign: 'left',
- marginTop: props.theme.spacing(8),
-}));
-
export const TxDetails = styled.div((props) => ({
marginTop: props.theme.spacing(36),
width: '100%',
@@ -98,9 +82,3 @@ export const RecipientsWrapper = styled.div({
display: 'flex',
flexDirection: 'column',
});
-
-export const ConfirmTxIconBig = styled.img((props) => ({
- width: 32,
- height: 32,
- marginBottom: props.theme.spacing(8),
-}));
diff --git a/src/app/screens/ledger/confirmLedgerStxTransaction/index.tsx b/src/app/screens/ledger/confirmLedgerStxTransaction/index.tsx
new file mode 100644
index 000000000..6fdcb74cd
--- /dev/null
+++ b/src/app/screens/ledger/confirmLedgerStxTransaction/index.tsx
@@ -0,0 +1,314 @@
+import checkCircleIcon from '@assets/img/ledger/check_circle.svg';
+import ledgerConnectDefaultIcon from '@assets/img/ledger/ledger_connect_default.svg';
+import ledgerConnectStxIcon from '@assets/img/ledger/ledger_import_connect_stx.svg';
+import { delay } from '@common/utils/promises';
+import ActionButton from '@components/button';
+import LedgerConnectionView from '@components/ledger/connectLedgerView';
+import FullScreenHeader from '@components/ledger/fullScreenHeader';
+import useNetworkSelector from '@hooks/useNetwork';
+import useWalletSelector from '@hooks/useWalletSelector';
+import Transport from '@ledgerhq/hw-transport-webusb';
+import { useTransition } from '@react-spring/web';
+import {
+ broadcastSignedTransaction,
+ microstacksToStx,
+ signLedgerStxTransaction,
+ type StacksRecipient,
+} from '@secretkeylabs/xverse-core';
+import { DEFAULT_TRANSITION_OPTIONS } from '@utils/constants';
+import { getStxTxStatusUrl, getTruncatedAddress } from '@utils/helper';
+import BigNumber from 'bignumber.js';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+
+import useSelectedAccount from '@hooks/useSelectedAccount';
+import {
+ Container,
+ OnBoardingContentContainer,
+ RecipientsWrapper,
+ SuccessActionsContainer,
+ TxConfirmedContainer,
+ TxConfirmedDescription,
+ TxConfirmedTitle,
+ TxDetails,
+ TxDetailsRow,
+ TxDetailsTitle,
+} from './index.styled';
+
+enum Steps {
+ ConnectLedger = 0,
+ ConfirmTransaction = 1,
+ TransactionConfirmed = 2,
+}
+
+function ConfirmLedgerStxTransaction(): JSX.Element {
+ const [currentStep, setCurrentStep] = useState(Steps.ConnectLedger);
+ const [txId, setTxId] = useState(undefined);
+
+ const [isButtonDisabled, setIsButtonDisabled] = useState(false);
+ const [isConnectSuccess, setIsConnectSuccess] = useState(false);
+ const [isConnectFailed, setIsConnectFailed] = useState(false);
+ const [isWrongDevice, setIsWrongDevice] = useState(false);
+ const [isFinalTxApproved, setIsFinalTxApproved] = useState(false);
+ const [isTxRejected, setIsTxRejected] = useState(false);
+
+ const { t } = useTranslation('translation', { keyPrefix: 'LEDGER_CONFIRM_TRANSACTION_SCREEN' });
+ const location = useLocation();
+ const selectedNetwork = useNetworkSelector();
+
+ const selectedAccount = useSelectedAccount();
+ const { network } = useWalletSelector();
+
+ const {
+ recipients,
+ unsignedTx,
+ fee,
+ tabId,
+ tabMessageId: messageId,
+ }: {
+ amount: BigNumber;
+ recipients: StacksRecipient[];
+ unsignedTx: Buffer;
+ fee?: BigNumber;
+ messageId?: string;
+ tabId?: number;
+ tabMessageId?: string;
+ } = location.state;
+
+ const transition = useTransition(currentStep, DEFAULT_TRANSITION_OPTIONS);
+
+ const signAndBroadcastStxTx = async (transport: Transport, addressIndex: number) => {
+ try {
+ const result = await signLedgerStxTransaction({
+ transport,
+ transactionBuffer: unsignedTx,
+ addressIndex,
+ });
+ setIsFinalTxApproved(true);
+ await delay(1500);
+ const transactionHash = await broadcastSignedTransaction(result, selectedNetwork);
+ setTxId(transactionHash);
+ setCurrentStep(Steps.TransactionConfirmed);
+ } catch (err) {
+ console.error(err);
+ setIsTxRejected(true);
+ setIsButtonDisabled(false);
+ } finally {
+ transport.close();
+ }
+ };
+
+ const handleConnectAndConfirm = async () => {
+ if (!selectedAccount) {
+ console.error('No account selected');
+ return;
+ }
+
+ try {
+ setIsButtonDisabled(true);
+
+ const transport = await Transport.create();
+
+ if (!transport) {
+ setIsConnectSuccess(false);
+ setIsConnectFailed(true);
+ setIsButtonDisabled(false);
+ return;
+ }
+
+ const addressIndex = selectedAccount.deviceAccountIndex;
+
+ if (addressIndex === undefined) {
+ setIsConnectSuccess(false);
+ setIsConnectFailed(true);
+ setIsWrongDevice(true);
+ setIsButtonDisabled(false);
+ return;
+ }
+
+ setIsConnectSuccess(true);
+ await delay(1500);
+
+ if (currentStep !== Steps.ConfirmTransaction) {
+ setCurrentStep(Steps.ConfirmTransaction);
+ }
+
+ await signAndBroadcastStxTx(transport as Transport, addressIndex);
+ await transport.close();
+ } catch (err) {
+ setIsConnectSuccess(false);
+ setIsConnectFailed(true);
+ } finally {
+ setIsButtonDisabled(false);
+ }
+ };
+
+ const goToConfirmationStep = () => {
+ setCurrentStep(Steps.ConfirmTransaction);
+
+ handleConnectAndConfirm();
+ };
+
+ const handleRetry = async () => {
+ setIsTxRejected(false);
+ setIsConnectSuccess(false);
+ setIsConnectFailed(false);
+ setIsWrongDevice(false);
+ setCurrentStep(Steps.ConnectLedger);
+ };
+
+ const handleClose = () => {
+ if (typeof window !== 'undefined') {
+ window.close();
+ }
+ };
+
+ const handleSeeTransaction = () => {
+ if (!txId) {
+ console.error('No txId found');
+ return;
+ }
+
+ window.open(getStxTxStatusUrl(txId, network), '_blank', 'noopener,noreferrer');
+ };
+
+ const renderTxDetails = () => (
+
+
+ Recipient{recipients.length > 1 ? 's' : ''}
+
+ {recipients.map((recipient) => (
+
+
+
+ {t('AMOUNT')}
+
+ {fee && (
+
+ {t('FEES')}
+
+ )}
+
+ );
+
+ const renderLedgerConfirmationView = () => {
+ switch (currentStep) {
+ case Steps.ConnectLedger:
+ return (
+
+ 
+ {t('SUCCESS.TITLE')}
+ {t('SUCCESS.SUBTITLE')}
+
+ );
+ default:
+ return null;
+ }
+ };
+
+ const renderLedgerConfirmationControls = () => {
+ switch (currentStep) {
+ case Steps.ConfirmTransaction:
+ return (
+
+
+ );
+ case Steps.TransactionConfirmed:
+ return (
+
+
+ );
+ default:
+ return (
+
+
+ );
+ }
+ };
+
+ return (
+
+
+ {renderLedgerConfirmationView()}
+
+ {renderLedgerConfirmationControls()}
+
+ ))}
+
+ );
+}
+
+export default ConfirmLedgerStxTransaction;
diff --git a/src/app/screens/ledger/confirmLedgerTransaction/index.tsx b/src/app/screens/ledger/confirmLedgerTransaction/index.tsx
deleted file mode 100644
index 5b608790c..000000000
--- a/src/app/screens/ledger/confirmLedgerTransaction/index.tsx
+++ /dev/null
@@ -1,575 +0,0 @@
-import InfoIcon from '@assets/img/info.svg';
-import ledgerConfirmBtcIcon from '@assets/img/ledger/btc_icon.svg';
-import checkCircleIcon from '@assets/img/ledger/check_circle.svg';
-import ledgerConnectDefaultIcon from '@assets/img/ledger/ledger_connect_default.svg';
-import ledgerConnectStxIcon from '@assets/img/ledger/ledger_import_connect_stx.svg';
-import ledgerConfirmOrdinalsIcon from '@assets/img/ledger/ordinals_icon_big.svg';
-import { type LedgerTransactionType } from '@common/types/ledger';
-import { delay } from '@common/utils/ledger';
-import ActionButton from '@components/button';
-import InfoContainer from '@components/infoContainer';
-import LedgerConnectionView, {
- ConnectLedgerContainer,
- ConnectLedgerText,
-} from '@components/ledger/connectLedgerView';
-import LedgerFailView from '@components/ledger/failLedgerView';
-import FullScreenHeader from '@components/ledger/fullScreenHeader';
-import Stepper from '@components/stepper';
-import useBtcClient from '@hooks/apiClients/useBtcClient';
-import useNetworkSelector from '@hooks/useNetwork';
-import useWalletSelector from '@hooks/useWalletSelector';
-import Transport from '@ledgerhq/hw-transport-webusb';
-import { useTransition } from '@react-spring/web';
-import {
- broadcastSignedTransaction,
- microstacksToStx,
- satsToBtc,
- signLedgerMixedBtcTransaction,
- signLedgerNativeSegwitBtcTransaction,
- signLedgerStxTransaction,
- type Recipient,
- type StacksRecipient,
- type UTXO,
-} from '@secretkeylabs/xverse-core';
-import { DEFAULT_TRANSITION_OPTIONS } from '@utils/constants';
-import { getBtcTxStatusUrl, getStxTxStatusUrl, getTruncatedAddress } from '@utils/helper';
-import BigNumber from 'bignumber.js';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
-
-import { makeRpcSuccessResponse, sendRpcResponse } from '@common/utils/rpc/helpers';
-import useSelectedAccount from '@hooks/useSelectedAccount';
-import {
- ConfirmTxIconBig,
- ConnectLedgerTextAdvanced,
- ConnectLedgerTitle,
- Container,
- InfoContainerWrapper,
- InfoImage,
- OnBoardingContentContainer,
- RecipientsWrapper,
- SuccessActionsContainer,
- TxConfirmedContainer,
- TxConfirmedDescription,
- TxConfirmedTitle,
- TxDetails,
- TxDetailsRow,
- TxDetailsTitle,
-} from './index.styled';
-
-enum Steps {
- ConnectLedger = 0,
- ExternalInputs = 0.5,
- ConfirmTransaction = 1,
- ConfirmFees = 1.5,
- TransactionConfirmed = 2,
-}
-
-function ConfirmLedgerTransaction(): JSX.Element {
- const [currentStep, setCurrentStep] = useState(Steps.ConnectLedger);
- const [txId, setTxId] = useState(undefined);
-
- const [isButtonDisabled, setIsButtonDisabled] = useState(false);
- const [isConnectSuccess, setIsConnectSuccess] = useState(false);
- const [isConnectFailed, setIsConnectFailed] = useState(false);
- const [isWrongDevice, setIsWrongDevice] = useState(false);
- const [isTxApproved, setIsTxApproved] = useState(false);
- const [isFinalTxApproved, setIsFinalTxApproved] = useState(false);
- const [isTxRejected, setIsTxRejected] = useState(false);
-
- const { t } = useTranslation('translation', { keyPrefix: 'LEDGER_CONFIRM_TRANSACTION_SCREEN' });
- const location = useLocation();
- const selectedNetwork = useNetworkSelector();
-
- const selectedAccount = useSelectedAccount();
- const { network } = useWalletSelector();
-
- const btcClient = useBtcClient();
-
- const {
- recipients,
- type,
- unsignedTx,
- ordinalUtxo,
- feeRateInput,
- fee,
- tabId,
- tabMessageId: messageId,
- }: {
- amount: BigNumber;
- recipients: Recipient[] | StacksRecipient[];
- type: LedgerTransactionType;
- unsignedTx: Buffer;
- ordinalUtxo?: UTXO;
- feeRateInput?: string;
- fee?: BigNumber;
- messageId?: string;
- tabId?: number;
- tabMessageId?: string;
- } = location.state;
-
- const transition = useTransition(currentStep, DEFAULT_TRANSITION_OPTIONS);
-
- const signAndBroadcastOrdinalsTx = async (transport: Transport, addressIndex: number) => {
- try {
- const result = await signLedgerMixedBtcTransaction({
- transport,
- esploraProvider: btcClient,
- network: network.type,
- addressIndex,
- recipients: recipients as Recipient[],
- feeRate: feeRateInput?.toString(),
- ordinalUtxo,
- });
- const { value: psbtCreatedValue } = await result.next();
-
- const { value: taprootSignedValue } = await result.next();
- setIsTxApproved(true);
- setCurrentStep(Steps.ConfirmFees);
-
- const { value: txHex } = await result.next();
- setIsFinalTxApproved(true);
- await delay(1500);
- const transactionId = await btcClient.sendRawTransaction(txHex || taprootSignedValue);
- setTxId(transactionId.tx.hash);
- setCurrentStep(Steps.TransactionConfirmed);
- if (tabId) {
- const response = makeRpcSuccessResponse(messageId, { txid: transactionId.tx.hash });
- sendRpcResponse(tabId, response);
- }
- } catch (err) {
- console.error(err);
- setIsTxRejected(true);
- setIsButtonDisabled(false);
- } finally {
- transport.close();
- }
- };
-
- const signAndBroadcastBtcTx = async (transport: Transport, addressIndex: number) => {
- try {
- const result = await signLedgerNativeSegwitBtcTransaction({
- transport,
- esploraProvider: btcClient,
- network: network.type,
- addressIndex,
- recipients: recipients as Recipient[],
- feeRate: feeRateInput?.toString(),
- });
- setIsFinalTxApproved(true);
- await delay(1500);
- const transactionId = await btcClient.sendRawTransaction(result);
- setTxId(transactionId.tx.hash);
- setCurrentStep(Steps.TransactionConfirmed);
- if (tabId) {
- const response = makeRpcSuccessResponse(messageId, { txid: transactionId.tx.hash });
- sendRpcResponse(tabId, response);
- }
- } catch (err) {
- console.error(err);
- setIsTxRejected(true);
- setIsButtonDisabled(false);
- } finally {
- transport.close();
- }
- };
-
- const signAndBroadcastStxTx = async (transport: Transport, addressIndex: number) => {
- try {
- const result = await signLedgerStxTransaction({
- transport,
- transactionBuffer: unsignedTx,
- addressIndex,
- });
- setIsFinalTxApproved(true);
- await delay(1500);
- const transactionHash = await broadcastSignedTransaction(result, selectedNetwork);
- setTxId(transactionHash);
- setCurrentStep(Steps.TransactionConfirmed);
- } catch (err) {
- console.error(err);
- setIsTxRejected(true);
- setIsButtonDisabled(false);
- } finally {
- transport.close();
- }
- };
-
- const handleConnectAndConfirm = async () => {
- if (!selectedAccount) {
- console.error('No account selected');
- return;
- }
-
- try {
- setIsButtonDisabled(true);
-
- const transport = await Transport.create();
-
- if (!transport) {
- setIsConnectSuccess(false);
- setIsConnectFailed(true);
- setIsButtonDisabled(false);
- return;
- }
-
- const addressIndex = selectedAccount.deviceAccountIndex;
-
- if (addressIndex === undefined) {
- setIsConnectSuccess(false);
- setIsConnectFailed(true);
- setIsWrongDevice(true);
- setIsButtonDisabled(false);
- return;
- }
-
- setIsConnectSuccess(true);
- await delay(1500);
-
- if (
- type === 'ORDINALS' &&
- currentStep !== Steps.ExternalInputs &&
- currentStep !== Steps.ConfirmTransaction
- ) {
- setCurrentStep(Steps.ExternalInputs);
- return;
- }
-
- if (currentStep !== Steps.ConfirmTransaction) {
- setCurrentStep(Steps.ConfirmTransaction);
- }
-
- switch (type) {
- case 'BTC':
- case 'BRC-20':
- await signAndBroadcastBtcTx(transport as Transport, addressIndex);
- break;
- case 'STX':
- await signAndBroadcastStxTx(transport as Transport, addressIndex);
- break;
- case 'ORDINALS':
- await signAndBroadcastOrdinalsTx(transport as Transport, addressIndex);
- break;
- default:
- break;
- }
- await transport.close();
- } catch (err) {
- setIsConnectSuccess(false);
- setIsConnectFailed(true);
- } finally {
- setIsButtonDisabled(false);
- }
- };
-
- const goToConfirmationStep = () => {
- setCurrentStep(Steps.ConfirmTransaction);
-
- handleConnectAndConfirm();
- };
-
- const handleRetry = async () => {
- setIsTxRejected(false);
- setIsConnectSuccess(false);
- setIsConnectFailed(false);
- setIsWrongDevice(false);
- setIsTxApproved(false);
- setCurrentStep(Steps.ConnectLedger);
- };
-
- const handleClose = () => {
- if (typeof window !== 'undefined') {
- window.close();
- }
- };
-
- const handleSeeTransaction = () => {
- if (!txId) {
- console.error('No txId found');
- return;
- }
-
- switch (type) {
- case 'BTC':
- case 'BRC-20':
- window.open(getBtcTxStatusUrl(txId, network), '_blank', 'noopener,noreferrer');
- break;
- case 'STX':
- window.open(getStxTxStatusUrl(txId, network), '_blank', 'noopener,noreferrer');
- break;
- case 'ORDINALS':
- window.open(getBtcTxStatusUrl(txId, network), '_blank', 'noopener,noreferrer');
- break;
- default:
- break;
- }
- };
-
- const renderTxDetails = () => (
-
-
- Recipient{recipients.length > 1 ? 's' : ''}
-
- {recipients.map((recipient) => (
-
-
-
- {ordinalUtxo?.value ? 'Ordinal value' : 'Amount'}
- {type === 'STX' ? (
-
- {fee && (
-
- {t('FEES')}
- {type === 'STX' ? (
-
- )}
-
- );
-
- const renderOrdinalTxDetails = () => (
- <>
-
- {t('CONFIRM.ORDINAL_TX.ORDINAL_TITLE')}
-
- {t('CONFIRM.ORDINAL_TX.ORDINAL_SUBTITLE')}
-
- {renderOrdinalTxDetails()}
-
-
- );
- }
-
- return (
-
- {t('CONFIRM.TITLE')}
-
- {t('CONFIRM.ORDINAL_TX.BTC_SUBTITLE')}
-
- {renderOrdinalTxDetails()}
-
-
- );
- }
- return null;
- case Steps.TransactionConfirmed:
- return (
-
-
- {t('SUCCESS.TITLE')}
- {t('SUCCESS.SUBTITLE')}
- {type === 'BRC-20' && (
-
-
- )}
-
- );
- default:
- return null;
- }
- };
-
- const renderLedgerConfirmationControls = () => {
- switch (currentStep) {
- case Steps.ExternalInputs:
- if (isTxRejected || isConnectFailed) {
- return (
-
-
- );
- }
-
- return (
-
-
- );
- case Steps.ConfirmTransaction:
- case Steps.ConfirmFees:
- if (type === 'ORDINALS' && !isTxRejected && !isConnectFailed) {
- return (
-
-
- );
- }
-
- return (
-
-
- );
- case Steps.TransactionConfirmed:
- return (
-
-
- );
- default:
- return (
-
-
- );
- }
- };
-
- return (
-
-
- {renderLedgerConfirmationView()}
-
- {renderLedgerConfirmationControls()}
-
- ))}
-
- );
-}
-
-export default ConfirmLedgerTransaction;
diff --git a/src/app/screens/ledger/importLedgerAccount/index.tsx b/src/app/screens/ledger/importLedgerAccount/index.tsx
index 8de7969e9..713a2285b 100644
--- a/src/app/screens/ledger/importLedgerAccount/index.tsx
+++ b/src/app/screens/ledger/importLedgerAccount/index.tsx
@@ -1,4 +1,5 @@
-import { delay, getDeviceNewAccountIndex, getNewAccountId } from '@common/utils/ledger';
+import { getDeviceNewAccountIndex, getNewAccountId } from '@common/utils/ledger';
+import { delay } from '@common/utils/promises';
import FullScreenHeader from '@components/ledger/fullScreenHeader';
import useWalletReducer from '@hooks/useWalletReducer';
import useWalletSelector from '@hooks/useWalletSelector';
@@ -200,12 +201,8 @@ function ImportLedger(): JSX.Element {
const ledgerAccount: Account = {
id: newAccountId,
stxAddress: stacksCreds?.address || '',
- btcAddress: btcCreds?.address || '',
- ordinalsAddress: ordinalsCreds?.address || '',
masterPubKey: masterPubKey || masterFingerPrint || '',
stxPublicKey: stacksCreds?.publicKey || '',
- btcPublicKey: btcCreds?.publicKey || '',
- ordinalsPublicKey: ordinalsCreds?.publicKey || '',
accountType: 'ledger',
accountName: `Ledger Account ${newAccountId + 1}`,
deviceAccountIndex: getDeviceNewAccountIndex(
@@ -213,6 +210,16 @@ function ImportLedger(): JSX.Element {
network.type,
masterPubKey || masterFingerPrint,
),
+ btcAddresses: {
+ native: {
+ address: btcCreds?.address || '',
+ publicKey: btcCreds?.publicKey || '',
+ },
+ taproot: {
+ address: ordinalsCreds?.address || '',
+ publicKey: ordinalsCreds?.publicKey || '',
+ },
+ },
};
await addLedgerAccount(ledgerAccount);
await delay(1000);
@@ -224,10 +231,16 @@ function ImportLedger(): JSX.Element {
if (currentAccount && isBitcoinSelected) {
const ledgerAccount: Account = {
...currentAccount,
- btcAddress: btcCreds?.address || '',
- btcPublicKey: btcCreds?.publicKey || '',
- ordinalsAddress: ordinalsCreds?.address || '',
- ordinalsPublicKey: ordinalsCreds?.publicKey || '',
+ btcAddresses: {
+ native: {
+ address: btcCreds?.address || '',
+ publicKey: btcCreds?.publicKey || '',
+ },
+ taproot: {
+ address: ordinalsCreds?.address || '',
+ publicKey: ordinalsCreds?.publicKey || '',
+ },
+ },
};
await updateLedgerAccounts(ledgerAccount);
await delay(1000);
@@ -383,8 +396,8 @@ function ImportLedger(): JSX.Element {
setCurrentStep(ImportLedgerSteps.START);
};
- const handleAssetSelect = (e: React.ChangeEvent) => {
- if (e.target.id === 'stx_select_card') {
+ const handleAssetSelect = (selectedAsset: 'Bitcoin' | 'Stacks') => {
+ if (selectedAsset === 'Stacks') {
setIsStacksSelected(!isStacksSelected);
}
};
diff --git a/src/app/screens/ledger/importLedgerAccount/stepControls.tsx b/src/app/screens/ledger/importLedgerAccount/stepControls.tsx
index 4e7b80a0a..e55085649 100644
--- a/src/app/screens/ledger/importLedgerAccount/stepControls.tsx
+++ b/src/app/screens/ledger/importLedgerAccount/stepControls.tsx
@@ -1,16 +1,16 @@
-import ActionButton from '@components/button';
+import Button from '@ui-library/button';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
import { ImportLedgerSteps } from './types';
-const ButtonContainer = styled.div((props) => ({
- marginLeft: 3,
- marginRight: 3,
- marginTop: props.theme.spacing(4),
+const VerticalButtonContainer = styled.div((props) => ({
+ display: 'flex',
+ gap: props.theme.space.s,
+ flexDirection: 'column',
width: '100%',
}));
-interface Props {
+type Props = {
isBitcoinSelected: boolean;
isStacksSelected: boolean;
isTogglerChecked: boolean;
@@ -29,7 +29,7 @@ interface Props {
isStxAddressRejected: boolean;
accountNameError?: string;
};
-}
+};
function StepControls({
isBitcoinSelected,
@@ -62,63 +62,59 @@ function StepControls({
switch (currentStep) {
case ImportLedgerSteps.START:
- return
-
-
-
-
+
+
+
+
);
case ImportLedgerSteps.ADD_ADDRESS:
case ImportLedgerSteps.ADD_ORDINALS_ADDRESS:
@@ -129,33 +125,40 @@ function StepControls({
isStxAddressRejected
) {
return (
- ((props) => ({
+export const Option = styled.button((props) => ({
+ ...props.theme.typography.body_medium_m,
width: '100%',
- backgroundColor: props.theme.colors.elevation3,
- padding: props.theme.spacing(8),
+ color: props.theme.colors.white_0,
+ backgroundColor: props.theme.colors.elevation1,
+ padding: props.theme.space.m,
paddingTop: props.theme.spacing(7),
paddingBottom: props.theme.spacing(7),
+ marginBottom: props.theme.space.s,
+ border: `1px solid ${props.$selected ? '#7383ff4d' : props.theme.colors.elevation1}`,
borderRadius: props.theme.radius(2),
- fontSize: '0.75rem',
- marginBottom: props.theme.spacing(6),
- border: `1px solid ${props.selected ? props.theme.colors.elevation6 : 'transparent'}`,
cursor: 'pointer',
userSelect: 'none',
display: 'flex',
alignItems: 'center',
transition: 'border 0.2s ease',
+ textAlign: 'left',
}));
// TODO create radio button in ui-library
@@ -196,41 +197,32 @@ export const OptionIcon = styled.div((props) => ({
width: 16,
height: 16,
borderRadius: '50%',
- border: `1px solid ${props.theme.colors.white[0]}`,
+ border: `1px solid ${props.theme.colors.white_0}`,
marginRight: props.theme.spacing(10),
flex: 'none',
'&::after': {
content: '""',
- display: props.selected ? 'block' : 'none',
- width: 10,
- height: 10,
+ display: props.$selected ? 'block' : 'none',
+ width: 8,
+ height: 8,
borderRadius: 100,
- backgroundColor: props.theme.colors.orange_main,
+ backgroundColor: props.theme.colors.white_0,
},
}));
export const ConfirmationStep = styled.div<{
- isCompleted: boolean;
+ $isCompleted: boolean;
}>((props) => ({
width: 32,
height: 4,
- backgroundColor: props.isCompleted ? props.theme.colors.white[0] : props.theme.colors.white[900],
+ backgroundColor: props.$isCompleted ? props.theme.colors.white_0 : props.theme.colors.white_900,
borderRadius: props.theme.radius(1),
transition: 'background-color 0.2s ease',
':first-child': {
- marginRight: props.theme.spacing(4),
+ marginRight: props.theme.space.xs,
},
}));
-// TODO create custom switch in ui-library
-export const CustomSwitch = styled(Switch)`
- .react-switch-handle {
- background-color: ${({ checked }) =>
- checked ? '#FFFFFF' : 'rgba(255, 255, 255, 0.2)'} !important;
- border: ${({ checked }) => (checked ? '' : '4px solid rgba(255, 255, 255, 0.2)')} !important;
- }
-`;
-
export const TogglerContainer = styled.div((props) => ({
display: 'flex',
alignItems: 'center',
@@ -238,7 +230,7 @@ export const TogglerContainer = styled.div((props) => ({
}));
export const TogglerText = styled.p((props) => ({
- marginLeft: props.theme.spacing(8),
+ marginLeft: props.theme.space.m,
fontWeight: 500,
fontSize: '0.875rem',
lineHeight: '140%',
@@ -255,8 +247,8 @@ export const WarningIcon = styled.img({
});
export const LedgerFailViewContainer = styled.div((props) => ({
- paddingLeft: props.theme.spacing(8),
- paddingRight: props.theme.spacing(8),
+ paddingLeft: props.theme.space.m,
+ paddingRight: props.theme.space.m,
margin: 'auto',
}));
@@ -267,6 +259,6 @@ export const LedgerFailButtonsContainer = styled.div((props) => ({
export const ActionButtonContainer = styled.div((props) => ({
'&:not(:last-of-type)': {
- marginBottom: props.theme.spacing(8),
+ marginBottom: props.theme.space.m,
},
}));
diff --git a/src/app/screens/ledger/importLedgerAccount/steps/index.tsx b/src/app/screens/ledger/importLedgerAccount/steps/index.tsx
index f5210b0ea..4a22e8ba0 100644
--- a/src/app/screens/ledger/importLedgerAccount/steps/index.tsx
+++ b/src/app/screens/ledger/importLedgerAccount/steps/index.tsx
@@ -13,10 +13,10 @@ import LedgerAddressComponent from '@components/ledger/ledgerAddressComponent';
import LedgerAssetSelectCard from '@components/ledger/ledgerAssetSelectCard';
import LedgerInput from '@components/ledger/ledgerInput';
import { useTranslation } from 'react-i18next';
-import { useTheme } from 'styled-components';
import LedgerConnectionView from '../../../../components/ledger/connectLedgerView';
import { ImportLedgerSteps, LedgerLiveOptions } from '../types';
+import Toggle from '@ui-library/toggle';
import {
AddAccountNameContainer,
AddAccountNameTitleContainer,
@@ -29,7 +29,6 @@ import {
CreateAnotherAccountContainer,
CreateMultipleAccountsText,
CustomLink,
- CustomSwitch,
EndScreenContainer,
EndScreenTextContainer,
ImportBeforeStartContainer,
@@ -53,11 +52,11 @@ import {
} from './index.styled';
const LINK_TO_LEDGER_ACCOUNT_ISSUE_GUIDE =
- 'https://support.xverse.app/hc/en-us/articles/17901278165773';
+ 'https://support.xverse.app/hc/en-us/articles/17898446492557';
const LINK_TO_LEDGER_PASSPHRASE_GUIDE =
'https://support.xverse.app/hc/en-us/articles/17901278165773';
-interface Props {
+type Props = {
isConnectSuccess: boolean;
isBitcoinSelected: boolean;
isStacksSelected: boolean;
@@ -68,7 +67,7 @@ interface Props {
accountName: string;
accountId: number;
selectedLedgerLiveOption: LedgerLiveOptions | null;
- handleAssetSelect: (event: React.ChangeEvent) => void;
+ handleAssetSelect: (selectedAsset: 'Bitcoin' | 'Stacks') => void;
setSelectedLedgerLiveOption: (option: LedgerLiveOptions) => void;
setIsTogglerChecked: (checked: boolean) => void;
setAccountName: (name: string) => void;
@@ -84,7 +83,7 @@ interface Props {
isStxAddressRejected: boolean;
accountNameError?: string;
};
-}
+};
function Steps({
isConnectSuccess,
@@ -105,7 +104,6 @@ function Steps({
errors,
}: Props) {
const { t } = useTranslation('translation', { keyPrefix: 'LEDGER_IMPORT_SCREEN' });
- const theme = useTheme();
const { bitcoinCredentials, ordinalsCredentials, stacksCredentials } = creds;
const {
isConnectFailed,
@@ -137,18 +135,18 @@ function Steps({
icon={btcOrdinalsIcon}
title={t('LEDGER_IMPORT_2_SELECT.BTC_TITLE')}
text={t('LEDGER_IMPORT_2_SELECT.BTC_SUBTITLE')}
- id="btc_select_card"
+ name="Bitcoin"
isChecked={isBitcoinSelected}
- onChange={handleAssetSelect}
+ onClick={handleAssetSelect}
/>
{t('LEDGER_IMPORT_2_FOOTNOTE')}
@@ -167,16 +165,16 @@ function Steps({
@@ -239,13 +237,9 @@ function Steps({
)}
- setIsTogglerChecked(!isTogglerChecked)}
checked={isTogglerChecked}
- uncheckedIcon={false}
- checkedIcon={false}
/>
{selectedLedgerLiveOption === LedgerLiveOptions.USING ? (
@@ -346,8 +340,8 @@ function Steps({
{t('LEDGER_ADD_ADDRESS.CONFIRM_TO_CONTINUE')}
{isBitcoinSelected && (
-
)}
@@ -385,8 +379,8 @@ function Steps({
{t('LEDGER_ADD_ADDRESS.CONFIRM_TO_CONTINUE')}
-
);
diff --git a/src/app/screens/ledger/verifyLedgerAccountAddress/index.tsx b/src/app/screens/ledger/verifyLedgerAccountAddress/index.tsx
index cf730ec4f..bafacfa91 100644
--- a/src/app/screens/ledger/verifyLedgerAccountAddress/index.tsx
+++ b/src/app/screens/ledger/verifyLedgerAccountAddress/index.tsx
@@ -1,4 +1,4 @@
-import { delay } from '@common/utils/ledger';
+import { delay } from '@common/utils/promises';
import ActionButton from '@components/button';
import InfoContainer from '@components/infoContainer';
import FullScreenHeader from '@components/ledger/fullScreenHeader';
diff --git a/src/app/screens/legal/index.tsx b/src/app/screens/legal/index.tsx
index f4496a08e..80f88ad07 100644
--- a/src/app/screens/legal/index.tsx
+++ b/src/app/screens/legal/index.tsx
@@ -1,8 +1,8 @@
import LinkIcon from '@assets/img/linkIcon.svg';
import Separator from '@components/separator';
import useWalletReducer from '@hooks/useWalletReducer';
-import { CustomSwitch } from '@screens/ledger/importLedgerAccount/steps/index.styled';
import Button from '@ui-library/button';
+import Toggle from '@ui-library/toggle';
import { PRIVACY_POLICY_LINK, TERMS_LINK } from '@utils/constants';
import { saveIsTermsAccepted } from '@utils/localStorage';
import { optInMixPanel, optOutMixPanel } from '@utils/mixpanel';
@@ -116,14 +116,7 @@ function Legal() {
diff --git a/src/app/screens/listRune/index.styled.ts b/src/app/screens/listRune/index.styled.ts
index 3e7e79b35..c9454d423 100644
--- a/src/app/screens/listRune/index.styled.ts
+++ b/src/app/screens/listRune/index.styled.ts
@@ -134,6 +134,7 @@ export const RightAlignStyledP = styled(StyledP)`
text-align: right;
`;
-export const NoItemsContainer = styled.div((props) => ({
- padding: `${props.theme.space.m} ${props.theme.space.s}`,
+export const NoItemsContainer = styled(StyledP)((props) => ({
+ marginTop: props.theme.space.xxxl,
+ textAlign: 'center',
}));
diff --git a/src/app/screens/listRune/index.tsx b/src/app/screens/listRune/index.tsx
index d719c99f0..a405011cb 100644
--- a/src/app/screens/listRune/index.tsx
+++ b/src/app/screens/listRune/index.tsx
@@ -1,10 +1,11 @@
+import RequestsRoutes from '@common/utils/route-urls';
import BottomBar from '@components/tabBar';
import TopRow from '@components/topRow';
-import useRuneFloorPriceQuery from '@hooks/queries/runes/useRuneFloorPriceQuery';
+import useRuneFloorPricePerMarketplaceQuery from '@hooks/queries/runes/useRuneFloorPricePerMarketplaceQuery';
import { useVisibleRuneFungibleTokens } from '@hooks/queries/runes/useRuneFungibleTokensQuery';
-import useRuneSellPsbt from '@hooks/queries/runes/useRuneSellPsbt';
-import useRuneUtxosQuery from '@hooks/queries/runes/useRuneUtxosQuery';
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useRuneSellPsbtPerMarketplace from '@hooks/queries/runes/useRuneSellPsbtPerMarketplace';
+import useRuneUtxosQueryPerMarketplace from '@hooks/queries/runes/useRuneUtxosQueryPerMarketplace';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
import useHasFeature from '@hooks/useHasFeature';
import { useResetUserFlow } from '@hooks/useResetUserFlow';
import useTrackMixPanelPageViewed from '@hooks/useTrackMixPanelPageViewed';
@@ -18,14 +19,17 @@ import {
currencySymbolMap,
getBtcFiatEquivalent,
satsToBtc,
+ type FungibleToken,
+ type GetListedUtxosResponseUtxo,
+ type Marketplace,
} from '@secretkeylabs/xverse-core';
import Button, { LinkButton } from '@ui-library/button';
import { StickyButtonContainer, StyledP } from '@ui-library/common.styled';
import Spinner from '@ui-library/spinner';
import { formatToXDecimalPlaces, ftDecimals } from '@utils/helper';
-import { getFullTxId, getTxIdFromFullTxId, getVoutFromFullTxId } from '@utils/runes';
+import { getTxIdFromFullTxId, getVoutFromFullTxId } from '@utils/runes';
import BigNumber from 'bignumber.js';
-import { useEffect, useReducer } from 'react';
+import { useEffect, useMemo, useReducer, useState } from 'react';
import toast from 'react-hot-toast';
import { useTranslation } from 'react-i18next';
import { NumericFormat } from 'react-number-format';
@@ -52,17 +56,25 @@ import {
TabButtonsContainer,
TabContainer,
} from './index.styled';
+import ListMarketplaceItem from './listMarketplaceItem';
import WrapperComponent from './listRuneWrapper';
import SetCustomPriceModal from './setCustomPriceModal';
+const joinedSelectedMarketplaces = (selectedMarketplaces: Marketplace[]) => {
+ const last = selectedMarketplaces.pop();
+ return [selectedMarketplaces.join(', '), last].filter((s) => s).join(' and ');
+};
+
+const getFullTxId = (item: GetListedUtxosResponseUtxo) => `${item.txid}:${item.vout.toString()}`;
+
export default function ListRuneScreen() {
const { t } = useTranslation('translation', { keyPrefix: 'LIST_RUNE_SCREEN' });
const navigate = useNavigate();
const { runeId } = useParams();
- const { visible: runesCoinsList } = useVisibleRuneFungibleTokens(false);
+ const { data: runesCoinsList } = useVisibleRuneFungibleTokens(false);
const selectedRune = runesCoinsList.find((ft) => ft.principal === runeId);
const { fiatCurrency } = useWalletSelector();
- const { btcFiatRate } = useCoinRates();
+ const { btcFiatRate } = useSupportedCoinRates();
const location = useLocation();
const params = new URLSearchParams(location.search);
const locationFrom = params.get('from');
@@ -76,19 +88,38 @@ export default function ListRuneScreen() {
useTrackMixPanelPageViewed();
const {
- data: listItemsResponse,
+ data,
isInitialLoading: listItemsLoading,
isRefetching: listItemsRefetching,
refetch,
- } = useRuneUtxosQuery(selectedRune?.name ?? '', 'unlisted', false);
+ } = useRuneUtxosQueryPerMarketplace(selectedRune as FungibleToken, false);
+ const listItemsResponse = data?.unlistedItems?.filter((i) => i.runes.length === 1) || [];
+ const supportedMarketplaces: Marketplace[] = ['Unisat', 'Magic Eden', 'OKX'];
const {
- data: runeFloorPrice,
+ data: floorPriceData,
isInitialLoading: floorPriceLoading,
isRefetching: floorPriceRefetching,
- } = useRuneFloorPriceQuery(selectedRune?.name ?? '', false);
+ } = useRuneFloorPricePerMarketplaceQuery(
+ {
+ name: selectedRune?.assetName ?? '',
+ id: selectedRune?.principal ?? '',
+ },
+ supportedMarketplaces,
+ false,
+ );
- const noFloorPrice = runeFloorPrice === 0;
+ const [selectedMarketplaces, setSelectedMarketplaces] = useState(new Set());
+ const runeFloorPrice = useMemo(
+ () =>
+ Math.min(
+ ...(floorPriceData
+ ?.filter((d) => selectedMarketplaces.has(d.marketplace.name))
+ .map((d) => d.floorPrice) || [0]),
+ ),
+ [floorPriceData, selectedMarketplaces],
+ );
+ const noFloorPrice = useMemo(() => runeFloorPrice === 0, [runeFloorPrice]);
const isLoading =
listItemsLoading || listItemsRefetching || floorPriceLoading || floorPriceRefetching;
@@ -112,7 +143,9 @@ export default function ListRuneScreen() {
signPsbtPayload,
loading: psbtLoading,
error: psbtError,
- } = useRuneSellPsbt(selectedRune?.name ?? '', listItemsMap);
+ } = useRuneSellPsbtPerMarketplace(selectedRune as FungibleToken, listItemsMap, [
+ ...selectedMarketplaces,
+ ]);
const selectedListItems = Object.values(listItemsMap).filter((item) => item.selected);
@@ -141,7 +174,7 @@ export default function ListRuneScreen() {
const curAmount = currentItem.amount;
return curAmount > maxAmount ? curAmount : maxAmount;
}, 0);
- const maxGlobalPriceSats = 1_000_000_000 / highestSelectedRuneAmount;
+ const maxGlobalPriceSats = 500_000_000 / highestSelectedRuneAmount; // Unisat's maximum
const invalidListings: boolean = selectedListItems.some(
(item) => item.amount * item.priceSats < 10000 || item.amount * item.priceSats > 1000000000,
@@ -157,8 +190,23 @@ export default function ListRuneScreen() {
if (section === 'SELECT_RUNES') {
navigate(`/coinDashboard/FT?ftKey=${selectedRune?.principal}&protocol=runes`);
- } else {
+ } else if (section === 'SELECT_MARKETPLACES') {
dispatch({ type: 'SET_SECTION', payload: 'SELECT_RUNES' });
+ } else {
+ dispatch({ type: 'SET_SECTION', payload: 'SELECT_MARKETPLACES' });
+ }
+ };
+
+ const getTitle = () => {
+ switch (section) {
+ case 'SELECT_RUNES':
+ return t('SELECT_RUNES');
+ case 'SELECT_MARKETPLACES':
+ return t('SELECT_MARKETPLACES');
+ case 'SET_PRICES':
+ return t('LIST_RUNES');
+ default:
+ return '';
}
};
@@ -166,6 +214,8 @@ export default function ListRuneScreen() {
switch (section) {
case 'SELECT_RUNES':
return t('SELECT_RUNES_SECTION');
+ case 'SELECT_MARKETPLACES':
+ return t('SELECT_MARKETPLACES_SECTION');
case 'SET_PRICES':
return t('SET_PRICES_SECTION');
default:
@@ -181,15 +231,13 @@ export default function ListRuneScreen() {
dispatch({ type: 'UPDATE_ONE_LIST_ITEM', key, payload: updatedSelectedListItem });
if (
Object.values(listItemsMap).filter((listItem) => listItem.selected).length ===
- listItemsResponse?.length ??
- 0
+ listItemsResponse?.length
) {
dispatch({ type: 'SET_SELECT_ALL_TOGGLE', payload: true });
}
if (
Object.values(listItemsMap).filter((listItem) => !listItem.selected).length ===
- listItemsResponse?.length ??
- 0
+ listItemsResponse?.length
) {
dispatch({ type: 'SET_SELECT_ALL_TOGGLE', payload: false });
}
@@ -237,15 +285,16 @@ export default function ListRuneScreen() {
),
});
}
- }, [listItemsResponse, runeFloorPrice, location.state, selectedRune]);
+ }, [listItemsResponse.length, runeFloorPrice, location.state, selectedRune?.decimals]);
useEffect(() => {
if (signPsbtPayload) {
- navigate(`/psbt-signing-request?magicEdenPsbt=true&runeId=${runeId}`, {
+ navigate(RequestsRoutes.RuneListingBatchSigning, {
state: {
payload: signPsbtPayload,
+ utxos: listItemsMap,
+ minPriceSats: Math.min(...Object.values(listItemsMap).map((item) => item.priceSats)),
selectedRune,
- listRunesState,
},
});
}
@@ -278,7 +327,9 @@ export default function ListRuneScreen() {
selectedRuneId={selectedRune?.principal ?? ''}
getDesc={getDesc}
>
- {t('NO_UNLISTED_ITEMS')}
+
+ {t('NO_UNLISTED_ITEMS')}
+
);
}
@@ -293,7 +344,7 @@ export default function ListRuneScreen() {
- {t('LIST_RUNES')}
+ {getTitle()}
{getDesc()}
@@ -361,8 +412,10 @@ export default function ListRuneScreen() {
)}
+ {section === 'SELECT_MARKETPLACES' && (
+ <>
+
+
+
+ {floorPriceData?.map((runeMarketInfo) => {
+ const { name } = runeMarketInfo.marketplace;
+ const selected = selectedMarketplaces.has(name);
+
+ return (
+
+ setSelectedMarketplaces((prev) => {
+ if (selected) {
+ prev.delete(name);
+ } else {
+ prev.add(name);
+ }
+ return new Set([...prev]);
+ })
+ }
+ />
+ );
+ })}
+
+
+
+
+
+
+
+
+ )}
{section === 'SET_PRICES' && (
<>
@@ -418,7 +514,13 @@ export default function ListRuneScreen() {
- dispatch({ type: 'SET_TOGGLE_CUSTOM_PRICE_MODAL', payload: true })
+ dispatch({
+ type: 'SET_TOGGLE_CUSTOM_PRICE_MODAL',
+ payload: {
+ title: t('SET_PRICES'),
+ visible: true,
+ },
+ })
}
variant={
runePriceOption === 'custom' && !individualCustomPriceUsed
@@ -430,9 +532,10 @@ export default function ListRuneScreen() {
{noFloorPrice
? t('NO_FLOOR_PRICE', { symbol: selectedRune?.runeSymbol })
- : t('MAGIC_EDEN_FLOOR_PRICE', {
+ : t('MARKETPLACE_FLOOR_PRICE', {
sats: formatToXDecimalPlaces(runeFloorPrice, 5),
symbol: selectedRune?.runeSymbol,
+ marketplaces: joinedSelectedMarketplaces([...selectedMarketplaces]),
})}
@@ -458,7 +561,13 @@ export default function ListRuneScreen() {
}
handleShowCustomPriceModal={() => {
dispatch({ type: 'SET_INDIVIDUAL_CUSTOM_ITEM', payload: fullTxId });
- dispatch({ type: 'SET_TOGGLE_CUSTOM_PRICE_MODAL', payload: true });
+ dispatch({
+ type: 'SET_TOGGLE_CUSTOM_PRICE_MODAL',
+ payload: {
+ title: t('EDIT_PRICE'),
+ visible: true,
+ },
+ });
}}
/>
))}
@@ -539,8 +648,8 @@ export default function ListRuneScreen() {
{
dispatch({ type: 'SET_INDIVIDUAL_CUSTOM_ITEM', payload: null });
- dispatch({ type: 'SET_TOGGLE_CUSTOM_PRICE_MODAL', payload: false });
+ dispatch({
+ type: 'SET_TOGGLE_CUSTOM_PRICE_MODAL',
+ payload: {
+ ...toggleCustomPriceModal,
+ visible: false,
+ },
+ });
}}
onApplyPrice={(priceSats: number) => {
if (individualCustomItem) {
@@ -565,7 +680,13 @@ export default function ListRuneScreen() {
dispatch({ type: 'SET_RUNE_PRICE_OPTION', payload: 'custom' });
}
dispatch({ type: 'SET_INDIVIDUAL_CUSTOM_ITEM', payload: null });
- dispatch({ type: 'SET_TOGGLE_CUSTOM_PRICE_MODAL', payload: false });
+ dispatch({
+ type: 'SET_TOGGLE_CUSTOM_PRICE_MODAL',
+ payload: {
+ ...toggleCustomPriceModal,
+ visible: false,
+ },
+ });
}}
/>
diff --git a/src/app/screens/listRune/listMarketplaceItem.tsx b/src/app/screens/listRune/listMarketplaceItem.tsx
new file mode 100644
index 000000000..98250941a
--- /dev/null
+++ b/src/app/screens/listRune/listMarketplaceItem.tsx
@@ -0,0 +1,92 @@
+import TokenImage from '@components/tokenImage';
+import type { FungibleToken, ListingProvider } from '@secretkeylabs/xverse-core';
+import Checkbox from '@ui-library/checkbox';
+import { StyledP } from '@ui-library/common.styled';
+import { formatNumber } from '@utils/helper';
+import { useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+import theme from 'theme';
+
+const Container = styled.div<{ $selected: boolean }>`
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ justify-content: space-between;
+ flex: 1;
+ padding: ${(props) => props.theme.space.s};
+ padding-right: ${(props) => props.theme.space.m};
+ border-radius: ${(props) => props.theme.space.xs};
+ border: 1px solid;
+ border-color: ${(props) => (props.$selected ? props.theme.colors.white_900 : 'transparent')};
+ background-color: ${(props) =>
+ props.$selected ? props.theme.colors.elevation2 : props.theme.colors.elevation1};
+ transition: background-color 0.1s ease, border-color 0.1s ease;
+`;
+
+const RowCenter = styled.div({
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+});
+
+const InfoContainer = styled.div`
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ gap: ${(props) => props.theme.space.xxxs};
+`;
+
+const SubtitleContainer = styled.div((props) => ({
+ marginTop: props.theme.space.xxs,
+}));
+
+const CheckBoxContainer = styled.div((props) => ({
+ marginRight: props.theme.space.s,
+}));
+
+type Props = {
+ runeMarketInfo: {
+ floorPrice: number;
+ marketplace: ListingProvider;
+ };
+ rune: FungibleToken;
+ selected: boolean;
+ onToggle: () => void;
+};
+
+function ListMarketplaceItem({ runeMarketInfo, rune, selected, onToggle }: Props) {
+ const { t } = useTranslation('translation', { keyPrefix: 'LIST_RUNE_SCREEN' });
+ const { floorPrice: rawFloorPrice, marketplace } = runeMarketInfo;
+ const floorPrice = formatNumber(rawFloorPrice);
+
+ return (
+
+
+
+
+
+
+ {marketplace.name}
+
+
+
+
+
+ {t('FLOOR_PRICE', {
+ floor_price: floorPrice,
+ symbol: rune.runeSymbol || rune.name,
+ })}
+
+
+
+
+
+ );
+}
+
+export default ListMarketplaceItem;
diff --git a/src/app/screens/listRune/reducer.tsx b/src/app/screens/listRune/reducer.tsx
index 3867f8d45..7796ef994 100644
--- a/src/app/screens/listRune/reducer.tsx
+++ b/src/app/screens/listRune/reducer.tsx
@@ -1,13 +1,18 @@
import type { RuneItem } from '@utils/runes';
+type SupportedSections = 'SELECT_RUNES' | 'SELECT_MARKETPLACES' | 'SET_PRICES';
+
interface ListRunesState {
listItemsMap: Record;
- section: 'SELECT_RUNES' | 'SET_PRICES';
+ section: SupportedSections;
selectAllToggle: boolean;
runePriceOption: 1 | 1.05 | 1.1 | 1.2 | 'custom';
customRunePrice: number | null;
individualCustomItem: string | null;
- toggleCustomPriceModal: boolean;
+ toggleCustomPriceModal: {
+ title: string;
+ visible: boolean;
+ };
}
type Action =
@@ -15,12 +20,12 @@ type Action =
| { type: 'TOGGLE_ALL_LIST_ITEMS'; payload: boolean }
| { type: 'SET_ALL_LIST_ITEMS_PRICES'; payload: number }
| { type: 'UPDATE_ONE_LIST_ITEM'; key: string; payload: RuneItem }
- | { type: 'SET_SECTION'; payload: 'SELECT_RUNES' | 'SET_PRICES' }
+ | { type: 'SET_SECTION'; payload: SupportedSections }
| { type: 'SET_SELECT_ALL_TOGGLE'; payload: boolean }
| { type: 'SET_RUNE_PRICE_OPTION'; payload: 1 | 1.05 | 1.1 | 1.2 | 'custom' }
| { type: 'SET_CUSTOM_RUNE_PRICE'; payload: number | null }
| { type: 'SET_INDIVIDUAL_CUSTOM_ITEM'; payload: string | null }
- | { type: 'SET_TOGGLE_CUSTOM_PRICE_MODAL'; payload: boolean }
+ | { type: 'SET_TOGGLE_CUSTOM_PRICE_MODAL'; payload: { title: string; visible: boolean } }
| { type: 'RESTORE_STATE_FROM_PSBT'; payload: ListRunesState };
export const initialListRunesState: ListRunesState = {
@@ -30,7 +35,10 @@ export const initialListRunesState: ListRunesState = {
runePriceOption: 1,
customRunePrice: null,
individualCustomItem: null,
- toggleCustomPriceModal: false,
+ toggleCustomPriceModal: {
+ title: '',
+ visible: false,
+ },
};
export function ListRunesReducer(state: ListRunesState, action: Action): ListRunesState {
diff --git a/src/app/screens/listRune/setCustomPriceModal.tsx b/src/app/screens/listRune/setCustomPriceModal.tsx
index 09e1853ee..bbd8f094d 100644
--- a/src/app/screens/listRune/setCustomPriceModal.tsx
+++ b/src/app/screens/listRune/setCustomPriceModal.tsx
@@ -4,7 +4,7 @@ import { StyledP } from '@ui-library/common.styled';
import Input from '@ui-library/input';
import Sheet from '@ui-library/sheet';
import { formatToXDecimalPlaces } from '@utils/helper';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
@@ -61,6 +61,17 @@ function SetCustomPriceModal({
const lowError: boolean = priceSats.length !== 0 && Number(priceSats) < minPriceSats;
const highError: boolean = priceSats.length !== 0 && Number(priceSats) > maxPriceSats;
+ const inputFeedback = useMemo(() => {
+ if (lowError || highError) {
+ return [
+ {
+ variant: 'danger' as const,
+ message: '',
+ },
+ ];
+ }
+ }, [highError, lowError]);
+
return (
}
+ feedback={inputFeedback}
hideClear
autoFocus
/>
diff --git a/src/app/screens/listRune/setRunePriceItem.tsx b/src/app/screens/listRune/setRunePriceItem.tsx
index 34e94c65f..67c301c1b 100644
--- a/src/app/screens/listRune/setRunePriceItem.tsx
+++ b/src/app/screens/listRune/setRunePriceItem.tsx
@@ -1,4 +1,4 @@
-import useCoinRates from '@hooks/queries/useCoinRates';
+import useSupportedCoinRates from '@hooks/queries/useSupportedCoinRates';
import useWalletSelector from '@hooks/useWalletSelector';
import { PencilSimple } from '@phosphor-icons/react';
import FloorComparisonLabel from '@screens/listRune/floorComparisonLabel';
@@ -61,6 +61,11 @@ const InfoRowContainer = styled.div`
gap: ${(props) => props.theme.space.xs};
`;
+const RightAlignContainer = styled.div(() => ({
+ display: 'flex',
+ justifyContent: 'end',
+}));
+
type Props = {
runeAmount: number;
runeSymbol: string;
@@ -79,7 +84,7 @@ function SetRunePriceItem({
handleShowCustomPriceModal,
}: Props) {
const { t } = useTranslation('translation');
- const { btcFiatRate } = useCoinRates();
+ const { btcFiatRate } = useSupportedCoinRates();
const { fiatCurrency } = useWalletSelector();
return (
@@ -150,13 +155,15 @@ function SetRunePriceItem({
- 1000000000}
- typography="body_medium_s"
- />
+
+ 1000000000}
+ typography="body_medium_s"
+ />
+
);
}
diff --git a/src/app/screens/login/index.tsx b/src/app/screens/login/index.tsx
index a65047dfb..1cc685dce 100644
--- a/src/app/screens/login/index.tsx
+++ b/src/app/screens/login/index.tsx
@@ -1,7 +1,6 @@
import Eye from '@assets/img/createPassword/Eye.svg';
import EyeSlash from '@assets/img/createPassword/EyeSlash.svg';
import logo from '@assets/img/xverse_logo.svg';
-import useSanityCheck from '@hooks/useSanityCheck';
import useSeedVault from '@hooks/useSeedVault';
import useSeedVaultMigration from '@hooks/useSeedVaultMigration';
import useWalletReducer from '@hooks/useWalletReducer';
@@ -46,7 +45,7 @@ const AppVersion = styled.p((props) => ({
...props.theme.typography.body_s,
color: props.theme.colors.white_0,
textAlign: 'right',
- marginTop: props.theme.spacing(8),
+ marginTop: props.theme.space.m,
}));
const TopSectionContainer = styled.div((props) => ({
@@ -69,10 +68,10 @@ const PasswordInputContainer = styled.div((props) => ({
alignItems: 'center',
width: '100%',
border: `1px solid ${props.theme.colors.elevation3}`,
- paddingLeft: props.theme.spacing(8),
- paddingRight: props.theme.spacing(8),
+ paddingLeft: props.theme.space.m,
+ paddingRight: props.theme.space.m,
borderRadius: props.theme.radius(1),
- marginTop: props.theme.spacing(4),
+ marginTop: props.theme.space.xs,
}));
const PasswordInput = styled.input((props) => ({
@@ -94,7 +93,7 @@ const LandingTitle = styled.h1((props) => ({
}));
const ButtonContainer = styled.div((props) => ({
- marginTop: props.theme.spacing(8),
+ marginTop: props.theme.space.m,
width: '100%',
}));
@@ -102,15 +101,19 @@ const ErrorMessage = styled.h2((props) => ({
...props.theme.typography.body_medium_m,
textAlign: 'left',
color: props.theme.colors.feedback.error,
- marginTop: props.theme.spacing(4),
+ marginTop: props.theme.space.xs,
}));
-const ForgotPasswordButton = styled.a((props) => ({
+const ForgotPasswordButton = styled.button((props) => ({
...props.theme.typography.body_m,
textAlign: 'center',
- marginTop: props.theme.spacing(12),
+ marginTop: props.theme.space.l,
color: props.theme.colors.white_0,
textDecoration: 'underline',
+ backgroundColor: 'transparent',
+ ':hover': {
+ textDecoration: 'none',
+ },
}));
function Login(): JSX.Element {
@@ -118,13 +121,13 @@ function Login(): JSX.Element {
const navigate = useNavigate();
const { unlockWallet } = useWalletReducer();
const { hasSeed } = useSeedVault();
- const { getSanityCheck } = useSanityCheck();
const { migrateCachedStorage, isVaultUpdated } = useSeedVaultMigration();
- const [isPasswordVisible, setIsPasswordVisible] = useState(false);
- const [password, setPassword] = useState('');
- const [error, setError] = useState('');
+ const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+ const [password, setPassword] = useState('');
+ const [error, setError] = useState('');
const [isVerifying, setIsVerifying] = useState(false);
const [showMigration, setShowMigration] = useState(false);
+
const styles = useSpring({
from: {
opacity: 0,
@@ -168,8 +171,7 @@ function Login(): JSX.Element {
// Check for SeedVault Migrations
try {
const hasMigrated = await isVaultUpdated();
- const sanityCheck = await getSanityCheck('X-Current-Version');
- if (!hasMigrated && sanityCheck) {
+ if (!hasMigrated) {
setShowMigration(true);
} else {
setIsVerifying(false);
@@ -194,7 +196,7 @@ function Login(): JSX.Element {
useEffect(() => {
const keyDownHandler = async (event) => {
- if (event.key === 'Enter') {
+ if (event.key === 'Enter' && !!password && document.activeElement?.id === 'password-input') {
event.preventDefault();
await handleVerifyPassword();
}
@@ -214,7 +216,7 @@ function Login(): JSX.Element {
<>
{!showMigration ? (
- Beta
+ {t('BETA_VERSION')}
{t('PASSWORD_INPUT_LABEL')}
- checked ? '#FFFFFF' : 'rgba(255, 255, 255, 0.2)'} !important;
- border: ${({ checked }) => (checked ? '' : '4px solid rgba(255, 255, 255, 0.2)')} !important;
- }
-`;
-
const CoinTitleText = styled.p<{ isEnabled?: boolean }>((props) => ({
...props.theme.typography[props.isEnabled ? 'body_bold_m' : 'body_m'],
color: props.theme.colors[props.isEnabled ? 'white_0' : 'white_400'],
@@ -91,15 +82,7 @@ function CoinItem({
{name}
- (
selectedAccount?.stxAddress ? 'stacks' : 'brc-20',
);
- const showRunes = useHasFeature(FeatureId.RUNES_SUPPORT);
const [showOptionsDialog, setShowOptionsDialog] = useState(false);
const [optionsDialogIndents, setOptionsDialogIndents] = useState<
@@ -193,9 +181,9 @@ function ManageTokens() {
};
const toggled = (isEnabled: boolean, _coinName: string, coinKey: string) => {
- const runeFt = runesList?.find((ft) => ft.principal === coinKey);
- const sip10Ft = sip10List?.find((ft) => ft.principal === coinKey);
- const brc20Ft = brc20List?.find((ft) => ft.principal === coinKey);
+ const runeFt = runesList?.find((ft: FungibleTokenWithStates) => ft.principal === coinKey);
+ const sip10Ft = sip10List?.find((ft: FungibleTokenWithStates) => ft.principal === coinKey);
+ const brc20Ft = brc20List?.find((ft: FungibleTokenWithStates) => ft.principal === coinKey);
const payload = { principal: coinKey, isEnabled };
@@ -211,29 +199,19 @@ function ManageTokens() {
const handleBackButtonClick = () => navigate('/');
const getCoinsList = () => {
- let coins: FungibleToken[];
+ let coins: FungibleTokenWithStates[];
let error: boolean;
switch (selectedProtocol) {
case 'stacks':
- coins = (sip10List ?? []).map((ft) => ({
- ...ft,
- visible:
- sip10ManageTokens[ft.principal] ?? (ft.supported && new BigNumber(ft.balance).gt(0)),
- }));
+ coins = sip10List ?? [];
error = sip10Error;
break;
case 'brc-20':
- coins = (brc20List ?? []).map((ft) => ({
- ...ft,
- visible: brc20ManageTokens[ft.principal] ?? new BigNumber(ft.balance).gt(0),
- }));
+ coins = brc20List ?? [];
error = brc20Error;
break;
case 'runes':
- coins = (runesList ?? []).map((ft) => ({
- ...ft,
- visible: runesManageTokens[ft.principal] ?? new BigNumber(ft.balance).gt(0),
- }));
+ coins = runesList ?? [];
error = runeError;
break;
default:
@@ -246,7 +224,7 @@ function ManageTokens() {
return (
<>
{selectedProtocol === 'stacks' && {t('NO_COINS')} }
@@ -316,15 +294,7 @@ function ManageTokens() {
RUNES
-
- {selectedProtocol === 'runes' && !showRunes ? (
-
-
- ) : (
- getCoinsList()
- )}
-
+ {getCoinsList()}
- input.extendedUtxo.address !== btcAddress &&
- input.extendedUtxo.address !== ordinalsAddress,
- ),
- receipts: [],
- transfers: [],
- mint: {
- runeName: runeInfo.entry.spaced_rune,
- amount: BigInt(runeInfo.entry.terms.amount?.toNumber() ?? 0),
- divisibility: runeInfo.entry.divisibility.toNumber(),
- symbol: runeInfo.entry.symbol,
- inscriptionId: runeInfo.parent ?? '',
- runeIsOpen: runeInfo.mintable,
- runeIsMintable: runeInfo.mintable,
- destinationAddress: mintRequest.destinationAddress,
- repeats: mintRequest.repeats,
- runeSize: RUNE_DISPLAY_DEFAULTS.size,
- },
+ runeMintDetails={{
+ runeId: runeInfo.id,
+ runeName: runeInfo.entry.spaced_rune,
+ amount: BigInt(runeInfo.entry.terms.amount?.toNumber() ?? 0),
+ divisibility: runeInfo.entry.divisibility.toNumber(),
+ symbol: runeInfo.entry.symbol,
+ inscriptionId: runeInfo.parent ?? '',
+ runeIsOpen: runeInfo.mintable,
+ runeIsMintable: runeInfo.mintable,
+ destinationAddress: mintRequest.destinationAddress,
+ repeats: mintRequest.repeats,
+ runeSize: RUNE_DISPLAY_DEFAULTS.size,
}}
feeRate={+feeRate}
confirmText={t('CONFIRM')}
diff --git a/src/app/screens/mintRune/useMintRequest.ts b/src/app/screens/mintRune/useMintRequest.ts
index 52c203847..0c5a2266c 100644
--- a/src/app/screens/mintRune/useMintRequest.ts
+++ b/src/app/screens/mintRune/useMintRequest.ts
@@ -1,4 +1,5 @@
import { makeRPCError, makeRpcSuccessResponse, sendRpcResponse } from '@common/utils/rpc/helpers';
+import useBtcClient from '@hooks/apiClients/useBtcClient';
import useOrdinalsServiceApi from '@hooks/apiClients/useOrdinalsServiceApi';
import useRunesApi from '@hooks/apiClients/useRunesApi';
import useTransactionContext from '@hooks/useTransactionContext';
@@ -40,6 +41,7 @@ const useMintRequest = (): {
const txContext = useTransactionContext();
const ordinalsServiceApi = useOrdinalsServiceApi();
const runesApi = useRunesApi();
+ const btcClient = useBtcClient();
const [mintError, setMintError] = useState<{
code: number | undefined;
@@ -139,11 +141,8 @@ const useMintRequest = (): {
const payAndConfirmMintRequest = async (ledgerTransport?: Transport) => {
try {
setIsExecuting(true);
- const txid = await orderTx?.transaction.broadcast({
- ledgerTransport,
- rbfEnabled: false,
- });
- if (!txid) {
+
+ if (!orderTx) {
const response = makeRPCError(requestId, {
code: RpcErrorCode.INTERNAL_ERROR,
message: 'Failed to broadcast transaction',
@@ -151,6 +150,21 @@ const useMintRequest = (): {
sendRpcResponse(+tabId, response);
return;
}
+
+ // TODO: make enhancedTransaction class use a passed in btcClient and use:
+ /*
+ orderTx.transaction.broadcast({
+ ledgerTransport,
+ rbfEnabled: false,
+ });
+ */
+
+ const { hex: transactionHex, id: txid } = await orderTx.transaction.getTransactionHexAndId({
+ ledgerTransport,
+ rbfEnabled: false,
+ });
+ await btcClient.sendRawTransaction(transactionHex);
+
await ordinalsServiceApi.executeMint(orderId, txid);
const mintRequestResponse = makeRpcSuccessResponse<'runes_mint'>(requestId, {
fundingAddress: txContext.paymentAddress.address,
diff --git a/src/app/screens/nftCollection/index.styled.ts b/src/app/screens/nftCollection/index.styled.ts
new file mode 100644
index 000000000..552e0c923
--- /dev/null
+++ b/src/app/screens/nftCollection/index.styled.ts
@@ -0,0 +1,99 @@
+import { GridContainer } from '@screens/nftDashboard/collectiblesTabs/index.styled';
+import styled from 'styled-components';
+
+interface Props {
+ $isGalleryOpen?: boolean;
+}
+
+export const Container = styled.div((props) => ({
+ ...props.theme.scrollbar,
+ display: 'flex',
+ flexDirection: 'column',
+ flex: 1,
+}));
+
+export const NoCollectiblesText = styled.p((props) => ({
+ ...props.theme.typography.body_bold_m,
+ color: props.theme.colors.white_200,
+ marginTop: props.theme.space.xl,
+ marginBottom: 'auto',
+ textAlign: 'center',
+}));
+
+export const HeadingText = styled.p((props) => ({
+ ...props.theme.typography.body_bold_m,
+ color: props.theme.colors.white_400,
+}));
+
+export const CollectionText = styled.p((props) => ({
+ ...props.theme.typography.headline_s,
+ color: props.theme.colors.white_0,
+ marginTop: props.theme.space.xxxs,
+ marginBottom: props.theme.space.xs,
+ wordBreak: 'break-word',
+}));
+
+export const BottomBarContainer = styled.div({
+ marginTop: 'auto',
+});
+
+export const PageHeader = styled.div`
+ padding: ${(props) => props.theme.space.xs};
+ padding-top: 0;
+ max-width: 1224px;
+ margin-top: ${(props) => (props.$isGalleryOpen ? props.theme.space.xxl : props.theme.space.l)};
+ margin-left: auto;
+ margin-right: auto;
+ width: 100%;
+`;
+
+export const PageHeaderContent = styled.div`
+ display: flex;
+ flex-direction: ${(props) => (props.$isGalleryOpen ? 'row' : 'column')};
+ justify-content: ${(props) => (props.$isGalleryOpen ? 'space-between' : 'initial')};
+ row-gap: ${(props) => props.theme.space.xl};
+`;
+
+export const NftContainer = styled.div`
+ display: flex;
+ flex-direction: ${(props) => (props.$isGalleryOpen ? 'column' : 'row')};
+ justify-content: ${(props) => (props.$isGalleryOpen ? 'space-between' : 'initial')};
+ column-gap: ${(props) => props.theme.space.m};
+`;
+
+export const BackButtonContainer = styled.div((props) => ({
+ display: 'flex',
+ marginBottom: props.theme.space.xxl,
+}));
+
+export const BackButton = styled.button((props) => ({
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'flex-start',
+ alignItems: 'center',
+ background: 'transparent',
+ marginBottom: props.theme.space.l,
+}));
+
+export const AssetDetailButtonText = styled.div((props) => ({
+ ...props.theme.typography.body_m,
+ marginLeft: props.theme.space.xxxs,
+ color: props.theme.colors.white_0,
+ textAlign: 'center',
+}));
+
+export const StyledGridContainer = styled(GridContainer)`
+ margin-top: ${(props) => props.theme.space.s};
+ padding: 0 ${(props) => props.theme.space.xs};
+ padding-bottom: ${(props) => props.theme.space.xl};
+ max-width: 1224px;
+ margin-left: auto;
+ margin-right: auto;
+ width: 100%;
+`;
+
+export const CollectionNameDiv = styled.div`
+ display: flex;
+ align-items: center;
+ gap: ${(props) => props.theme.space.s};
+`;
diff --git a/src/app/screens/nftCollection/index.tsx b/src/app/screens/nftCollection/index.tsx
index 3d4f8a067..5eb7d96f0 100644
--- a/src/app/screens/nftCollection/index.tsx
+++ b/src/app/screens/nftCollection/index.tsx
@@ -1,121 +1,55 @@
import AccountHeaderComponent from '@components/accountHeader';
import CollectibleCollectionGridItem from '@components/collectibleCollectionGridItem';
import CollectibleDetailTile from '@components/collectibleDetailTile';
+import SquareButton from '@components/squareButton';
import BottomTabBar from '@components/tabBar';
import { StyledBarLoader, TilesSkeletonLoader } from '@components/tilesSkeletonLoader';
import TopRow from '@components/topRow';
import WebGalleryButton from '@components/webGalleryButton';
import WrenchErrorMessage from '@components/wrenchErrorMessage';
import useNftDetail from '@hooks/queries/useNftDetail';
-import { ArrowLeft } from '@phosphor-icons/react';
-import { GridContainer } from '@screens/nftDashboard/collectiblesTabs';
+import useSelectedAccount from '@hooks/useSelectedAccount';
+import useWalletSelector from '@hooks/useWalletSelector';
+import { ArchiveTray, ArrowLeft, DotsThreeVertical, Star } from '@phosphor-icons/react';
import Nft from '@screens/nftDashboard/nft';
import NftImage from '@screens/nftDashboard/nftImage';
+import { StyledButton } from '@screens/ordinalsCollection/index.styled';
import type { NonFungibleToken, StacksCollectionData } from '@secretkeylabs/xverse-core';
-import { EMPTY_LABEL } from '@utils/constants';
+import {
+ addToHideCollectiblesAction,
+ addToStarCollectiblesAction,
+ removeAccountAvatarAction,
+ removeFromHideCollectiblesAction,
+ removeFromStarCollectiblesAction,
+} from '@stores/wallet/actions/actionCreators';
+import Sheet from '@ui-library/sheet';
+import SnackBar from '@ui-library/snackBar';
+import { EMPTY_LABEL, LONG_TOAST_DURATION } from '@utils/constants';
import { getFullyQualifiedKey, getNftCollectionsGridItemId, isBnsCollection } from '@utils/nfts';
-import { useRef, type PropsWithChildren } from 'react';
+import { useRef, useState, type PropsWithChildren } from 'react';
import toast from 'react-hot-toast';
import { useTranslation } from 'react-i18next';
import { useIsVisible } from 'react-is-visible';
+import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
+import Theme from 'theme';
+import {
+ AssetDetailButtonText,
+ BackButton,
+ BackButtonContainer,
+ BottomBarContainer,
+ CollectionNameDiv,
+ CollectionText,
+ Container,
+ HeadingText,
+ NftContainer,
+ NoCollectiblesText,
+ PageHeader,
+ PageHeaderContent,
+ StyledGridContainer,
+} from './index.styled';
import useNftCollection from './useNftCollection';
-interface Props {
- isGalleryOpen?: boolean;
-}
-const Container = styled.div((props) => ({
- ...props.theme.scrollbar,
- display: 'flex',
- flexDirection: 'column',
- flex: 1,
-}));
-
-const NoCollectiblesText = styled.p((props) => ({
- ...props.theme.typography.body_bold_m,
- color: props.theme.colors.white_200,
- marginTop: props.theme.spacing(16),
- marginBottom: 'auto',
- textAlign: 'center',
-}));
-
-const HeadingText = styled.p((props) => ({
- ...props.theme.typography.body_bold_m,
- color: props.theme.colors.white_400,
-}));
-
-const CollectionText = styled.p((props) => ({
- ...props.theme.typography.headline_s,
- color: props.theme.colors.white_0,
- marginTop: props.theme.spacing(1),
- marginBottom: props.theme.spacing(4),
- wordBreak: 'break-word',
-}));
-
-const BottomBarContainer = styled.div({
- marginTop: 'auto',
-});
-
-const PageHeader = styled.div`
- padding: ${(props) => props.theme.space.xs};
- padding-top: 0;
- max-width: 1224px;
- margin-top: ${(props) => (props.isGalleryOpen ? props.theme.space.xxl : props.theme.space.l)};
- margin-left: auto;
- margin-right: auto;
- width: 100%;
-`;
-
-const PageHeaderContent = styled.div`
- display: flex;
- flex-direction: ${(props) => (props.isGalleryOpen ? 'row' : 'column')};
- justify-content: ${(props) => (props.isGalleryOpen ? 'space-between' : 'initial')};
- row-gap: ${(props) => props.theme.space.xl};
-`;
-
-const NftContainer = styled.div`
- display: flex;
- flex-direction: ${(props) => (props.isGalleryOpen ? 'column' : 'row')};
- justify-content: ${(props) => (props.isGalleryOpen ? 'space-between' : 'initial')};
- column-gap: ${(props) => props.theme.space.m};
-`;
-
-const BackButtonContainer = styled.div((props) => ({
- display: 'flex',
- flexDirection: 'row',
- width: 800,
- marginTop: props.theme.spacing(40),
-}));
-
-const BackButton = styled.button((props) => ({
- display: 'flex',
- flexDirection: 'row',
- justifyContent: 'flex-start',
- alignItems: 'center',
- background: 'transparent',
- marginBottom: props.theme.spacing(12),
-}));
-
-const AssetDetailButtonText = styled.div((props) => ({
- ...props.theme.typography.body_m,
- fontWeight: 400,
- fontSize: 14,
- marginLeft: 2,
- color: props.theme.colors.white_0,
- textAlign: 'center',
-}));
-
-const StyledGridContainer = styled(GridContainer)`
- margin-top: ${(props) => props.theme.space.s};
- padding: 0 ${(props) => props.theme.space.xs};
- padding-bottom: ${(props) => props.theme.space.xl};
- max-width: 1224px;
- margin-left: auto;
- margin-right: auto;
- width: 100%;
-`;
-
/*
* component to virtualise the grid item if not in window
* placeholder is required to match grid item size, in order to negate scroll jank
@@ -176,6 +110,12 @@ function CollectionGridItemWithData({
function NftCollection() {
const { t } = useTranslation('translation', { keyPrefix: 'COLLECTIBLE_COLLECTION_SCREEN' });
+ const { t: commonT } = useTranslation('translation', { keyPrefix: 'COMMON' });
+ const selectedAccount = useSelectedAccount();
+ const { starredCollectibleIds, hiddenCollectibleIds, avatarIds } = useWalletSelector();
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+ const [isOptionsModalVisible, setIsOptionsModalVisible] = useState(false);
const {
collectionData,
portfolioValue,
@@ -186,37 +126,193 @@ function NftCollection() {
handleBackButtonClick,
openInGalleryView,
} = useNftCollection();
+ const currentAvatar = avatarIds[selectedAccount.btcAddress];
+
+ const openOptionsDialog = () => {
+ setIsOptionsModalVisible(true);
+ };
+
+ const closeOptionsDialog = () => {
+ setIsOptionsModalVisible(false);
+ };
+
+ const collectionStarred = starredCollectibleIds[selectedAccount.stxAddress]?.some(
+ ({ id }) => id === collectionData?.collection_id,
+ );
+ const collectionHidden = Object.keys(hiddenCollectibleIds[selectedAccount.stxAddress] ?? {}).some(
+ (id) => id === collectionData?.collection_id,
+ );
+
+ const handleUnHideCollection = () => {
+ const isLastHiddenItem =
+ Object.keys(hiddenCollectibleIds[selectedAccount.stxAddress] ?? {}).length === 1;
+ dispatch(
+ removeFromHideCollectiblesAction({
+ address: selectedAccount.stxAddress,
+ id: collectionData?.collection_id ?? '',
+ }),
+ );
+ closeOptionsDialog();
+ toast.custom( handleClickUndoHiding(toastId),
+ }}
+ />,
+ { duration: LONG_TOAST_DURATION },
+ );
+ };
+
+ const handleClickUndoStarring = (toastId: string) => {
+ dispatch(
+ removeFromStarCollectiblesAction({
+ address: selectedAccount.stxAddress,
+ id: collectionData?.collection_id ?? '',
+ }),
+ );
+ toast.remove(toastId);
+ toast.custom( handleClickUndoStarring(toastId),
+ }}
+ />,
+ { duration: LONG_TOAST_DURATION },
+ );
+ }
+ };
return (
<>
{isGalleryOpen ? (
-
+
{isGalleryOpen && (
<>
- {t('BACK_TO_GALLERY')}
+ {t(collectionHidden ? 'BACK_TO_HIDDEN_COLLECTIBLES' : 'BACK_TO_GALLERY')}
)}
-
+
{t('COLLECTION')}
-
- {collectionData?.collection_name ||
+
+
+ {collectionData?.collection_name ||
+ {isGalleryOpen && (
+ <>
+ {collectionHidden ? null : (
+
{!isGalleryOpen &&
+
{isEmpty && {t('NO_COLLECTIBLES')} }
{!!isError &&
+
{isLoading ? (
-
- ))
+ collectionData?.all_nfts.map((nft) => (
+
+
+ ))
)}
@@ -266,6 +360,29 @@ function NftCollection() {
+ {collectionHidden ? (
+
+ )}
);
}
diff --git a/src/app/screens/nftCollection/useNftCollection.ts b/src/app/screens/nftCollection/useNftCollection.ts
index 37e64bc07..cf74fa48b 100644
--- a/src/app/screens/nftCollection/useNftCollection.ts
+++ b/src/app/screens/nftCollection/useNftCollection.ts
@@ -1,5 +1,7 @@
import useStacksCollectibles from '@hooks/queries/useStacksCollectibles';
import { useResetUserFlow } from '@hooks/useResetUserFlow';
+import useSelectedAccount from '@hooks/useSelectedAccount';
+import useWalletSelector from '@hooks/useWalletSelector';
import { useMemo } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
@@ -7,12 +9,18 @@ export default function useNftCollection() {
const navigate = useNavigate();
useResetUserFlow('/nft-collection');
- const { id: collectionId } = useParams();
- const { data, isLoading, error } = useStacksCollectibles();
+ const { id: collectionId, from } = useParams();
+ const comesFromHidden = from === 'hidden';
+ const { data, isLoading, error } = useStacksCollectibles(comesFromHidden);
+ const { hiddenCollectibleIds } = useWalletSelector();
+ const { stxAddress } = useSelectedAccount();
const collectionData = data?.results.find(
(collection) => collection.collection_id === collectionId,
);
+ const collectionHidden = Object.keys(hiddenCollectibleIds[stxAddress] ?? {}).some(
+ (id) => id === collectionId,
+ );
const portfolioValue =
collectionData?.floor_price && !Number.isNaN(collectionData?.all_nfts?.length)
@@ -21,13 +29,16 @@ export default function useNftCollection() {
const isGalleryOpen: boolean = useMemo(() => document.documentElement.clientWidth > 360, []);
- const handleBackButtonClick = () => {
- navigate('/nft-dashboard?tab=nfts');
- };
+ const handleBackButtonClick = () =>
+ navigate(`/nft-dashboard${comesFromHidden || collectionHidden ? '/hidden' : ''}?tab=nfts`);
const openInGalleryView = async () => {
await chrome.tabs.create({
- url: chrome.runtime.getURL(`options.html#/nft-dashboard/nft-collection/${collectionId}`),
+ url: chrome.runtime.getURL(
+ `options.html#/nft-dashboard/nft-collection/${collectionId}${
+ comesFromHidden || collectionHidden ? '/hidden' : ''
+ }`,
+ ),
});
};
diff --git a/src/app/screens/nftDashboard/collectiblesTabs/index.styled.ts b/src/app/screens/nftDashboard/collectiblesTabs/index.styled.ts
new file mode 100644
index 000000000..ec0bd8425
--- /dev/null
+++ b/src/app/screens/nftDashboard/collectiblesTabs/index.styled.ts
@@ -0,0 +1,103 @@
+import WrenchErrorMessage from '@components/wrenchErrorMessage';
+import Button from '@ui-library/button';
+import { StyledP, StyledTabList } from '@ui-library/common.styled';
+import styled from 'styled-components';
+
+export const GridContainer = styled.div<{
+ $isGalleryOpen: boolean;
+}>((props) => ({
+ display: 'grid',
+ columnGap: props.$isGalleryOpen ? props.theme.space.xl : props.theme.space.m,
+ rowGap: props.$isGalleryOpen ? props.theme.space.xl : props.theme.space.l,
+ marginTop: props.theme.space.l,
+ gridTemplateColumns: props.$isGalleryOpen
+ ? 'repeat(auto-fill,minmax(220px,1fr))'
+ : 'repeat(auto-fill,minmax(150px,1fr))',
+}));
+
+export const RareSatsTabContainer = styled.div((props) => ({
+ marginTop: props.theme.space.l,
+}));
+
+export const StickyStyledTabList = styled(StyledTabList)`
+ position: sticky;
+ background: ${(props) => props.theme.colors.elevation0};
+ top: -1px;
+ z-index: 1;
+ padding: ${(props) => props.theme.space.m} 0;
+`;
+
+export const StyledTotalItems = styled(StyledP)`
+ margin-top: ${(props) => props.theme.space.s};
+`;
+
+export const NoticeContainer = styled.div((props) => ({
+ marginTop: props.theme.space.m,
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+}));
+
+export const StyledWrenchErrorMessage = styled(WrenchErrorMessage)`
+ margin-top: ${(props) => props.theme.space.xxl};
+`;
+
+export const NoCollectiblesText = styled.div((props) => ({
+ ...props.theme.typography.body_bold_m,
+ color: props.theme.colors.white_200,
+ marginTop: props.theme.space.xl,
+ textAlign: 'center',
+}));
+
+export const LoadMoreButtonContainer = styled.div((props) => ({
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ marginBottom: props.theme.spacing(30),
+ marginTop: props.theme.space.xl,
+ button: {
+ width: 156,
+ },
+}));
+
+export const LoaderContainer = styled.div({
+ display: 'flex',
+ flexDirection: 'column',
+});
+
+export const CountLoaderContainer = styled.div((props) => ({
+ marginTop: props.theme.space.s,
+ marginBottom: props.theme.space.l,
+}));
+
+export const StyledButton = styled(Button)`
+ &.tertiary {
+ color: ${(props) => props.theme.colors.white_200};
+ padding: 0;
+ width: auto;
+ min-height: 20px;
+
+ &:hover:enabled {
+ opacity: 0.8;
+ }
+ }
+`;
+
+export const StyledSheetButton = styled(Button)`
+ &.tertiary {
+ justify-content: flex-start;
+ color: ${(props) => props.theme.colors.white_200};
+ padding-left: 0;
+
+ &:hover:enabled {
+ opacity: 0.8;
+ }
+ }
+`;
+
+export const TopBarContainer = styled.div((props) => ({
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ marginTop: props.theme.space.s,
+}));
diff --git a/src/app/screens/nftDashboard/collectiblesTabs.tsx b/src/app/screens/nftDashboard/collectiblesTabs/index.tsx
similarity index 55%
rename from src/app/screens/nftDashboard/collectiblesTabs.tsx
rename to src/app/screens/nftDashboard/collectiblesTabs/index.tsx
index 41af28166..4a8eec173 100644
--- a/src/app/screens/nftDashboard/collectiblesTabs.tsx
+++ b/src/app/screens/nftDashboard/collectiblesTabs/index.tsx
@@ -1,105 +1,39 @@
-import ActionButton from '@components/button';
-import { StyledBarLoader, TilesSkeletonLoader } from '@components/tilesSkeletonLoader';
-import WrenchErrorMessage from '@components/wrenchErrorMessage';
import useTrackMixPanelPageViewed from '@hooks/useTrackMixPanelPageViewed';
+import { ArchiveTray } from '@phosphor-icons/react';
import { mapRareSatsAPIResponseToBundle, type Bundle } from '@secretkeylabs/xverse-core';
-import { StyledP, StyledTab, StyledTabList } from '@ui-library/common.styled';
+import Button from '@ui-library/button';
+import { StyledP } from '@ui-library/common.styled';
+import { TabItem } from '@ui-library/tabs';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { TabPanel, Tabs } from 'react-tabs';
-import styled from 'styled-components';
-import Notice from './notice';
-import RareSatsTabGridItem from './rareSatsTabGridItem';
-import type { NftDashboardState } from './useNftDashboard';
+import Theme from 'theme';
+import Notice from '../notice';
+import RareSatsTabGridItem from '../rareSatsTabGridItem';
+import type { NftDashboardState } from '../useNftDashboard';
+
+import {
+ LoadMoreButtonContainer,
+ NoCollectiblesText,
+ NoticeContainer,
+ RareSatsTabContainer,
+ StickyStyledTabList,
+ StyledButton,
+ StyledTotalItems,
+ StyledWrenchErrorMessage,
+ TopBarContainer,
+} from './index.styled';
+import SkeletonLoader from './skeletonLoader';
const MAX_SATS_ITEMS_EXTENSION = 5;
const MAX_SATS_ITEMS_GALLERY = 20;
-export const GridContainer = styled.div<{
- isGalleryOpen: boolean;
-}>((props) => ({
- display: 'grid',
- columnGap: props.isGalleryOpen ? props.theme.space.xl : props.theme.space.m,
- rowGap: props.isGalleryOpen ? props.theme.space.xl : props.theme.space.l,
- marginTop: props.theme.space.l,
- gridTemplateColumns: props.isGalleryOpen
- ? 'repeat(auto-fill,minmax(220px,1fr))'
- : 'repeat(auto-fill,minmax(150px,1fr))',
-}));
-
-const RareSatsTabContainer = styled.div<{
- isGalleryOpen: boolean;
-}>((props) => ({
- marginTop: props.theme.space.l,
-}));
-
-const StickyStyledTabList = styled(StyledTabList)`
- position: sticky;
- background: ${(props) => props.theme.colors.elevation0};
- top: -1px;
- z-index: 1;
- padding: ${(props) => props.theme.space.m} 0;
-`;
-
-const StyledTotalItems = styled(StyledP)`
- margin-top: ${(props) => props.theme.space.s};
-`;
-
-const NoticeContainer = styled.div((props) => ({
- marginTop: props.theme.spacing(8),
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
-}));
-
-const StyledWrenchErrorMessage = styled(WrenchErrorMessage)`
- margin-top: ${(props) => props.theme.space.xxl};
-`;
-
-const NoCollectiblesText = styled.div((props) => ({
- ...props.theme.typography.body_bold_m,
- color: props.theme.colors.white_200,
- marginTop: props.theme.spacing(16),
- textAlign: 'center',
-}));
-
-const LoadMoreButtonContainer = styled.div((props) => ({
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- marginBottom: props.theme.spacing(30),
- marginTop: props.theme.space.xl,
- button: {
- width: 156,
- },
-}));
-
-const LoaderContainer = styled.div({
- display: 'flex',
- flexDirection: 'column',
-});
-
-const CountLoaderContainer = styled.div((props) => ({
- marginTop: props.theme.spacing(6),
- marginBottom: props.theme.spacing(12),
-}));
-
-function SkeletonLoader({ isGalleryOpen }: { isGalleryOpen: boolean }) {
- return (
-
-
-
-
- );
-}
-
type TabButton = {
key: string;
label: string;
};
+
const tabs: TabButton[] = [
{
key: 'inscriptions',
@@ -120,21 +54,24 @@ const tabKeyToIndex = (key?: string | null) => {
return tabs.findIndex((tab) => tab.key === key);
};
+type Props = {
+ className?: string;
+ nftListView: React.ReactNode;
+ inscriptionListView: React.ReactNode;
+ nftDashboard: NftDashboardState;
+};
+
export default function CollectiblesTabs({
className,
nftListView,
inscriptionListView,
nftDashboard,
-}: {
- className?: string;
- nftListView: React.ReactNode;
- inscriptionListView: React.ReactNode;
- nftDashboard: NftDashboardState;
-}) {
+}: Props) {
const { t } = useTranslation('translation', { keyPrefix: 'NFT_DASHBOARD_SCREEN' });
const navigate = useNavigate();
const [searchParams, setSearchParams] = useSearchParams();
const [tabIndex, setTabIndex] = useState(tabKeyToIndex(searchParams?.get('tab')));
+
const {
isGalleryOpen,
rareSatsQuery,
@@ -155,18 +92,15 @@ export default function CollectiblesTabs({
[tabIndex],
);
- const handleSelectTab = (index: number) => {
- setTabIndex(index);
- };
+ const handleSelectTab = (index: number) => setTabIndex(index);
useEffect(() => {
setSearchParams({ tab: tabs[tabIndex]?.key });
- }, [tabIndex, setSearchParams]);
+ }, [tabIndex]);
const ordinalBundleCount = rareSatsQuery?.data?.pages?.[0]?.total || 0;
const showNoBundlesNotice =
ordinalBundleCount === 0 && !rareSatsQuery.isLoading && !rareSatsQuery.error;
-
const visibleTabButtons = tabs.filter((tab: TabButton) => {
if (tab.key === 'rareSats' && !hasActivatedRareSatsKey) {
return false;
@@ -179,33 +113,48 @@ export default function CollectiblesTabs({
return (
+ {/* TODO: replace with Tabs component from `src/app/ui-library/tabs.tsx` */}
{visibleTabButtons.length > 1 && (
{visibleTabButtons.map(({ key, label }) => (
- {t(label)}
+ handleSelectTab(tabKeyToIndex(key))}
+ >
+ {t(label)}
+
))}
)}
{hasActivatedOrdinalsKey && (
- {inscriptionsQuery.isInitialLoading ? (
-
- {totalInscriptions === 1
- ? t('TOTAL_ITEMS_ONE')
- : t('TOTAL_ITEMS', { count: totalInscriptions })}
-
- )}
- {inscriptionListView}
-
- )}
+
)}
@@ -214,13 +163,19 @@ export default function CollectiblesTabs({
) : (
<>
{totalNfts > 0 && (
-
- {totalNfts === 1 ? t('TOTAL_ITEMS_ONE') : t('TOTAL_ITEMS', { count: totalNfts })}
-
+
+
+ {totalNfts === 1 ? t('TOTAL_ITEMS_ONE') : t('TOTAL_ITEMS', { count: totalNfts })}
+
+
)}
{nftListView}
@@ -239,7 +194,6 @@ export default function CollectiblesTabs({
: t('TOTAL_ITEMS', { count: ordinalBundleCount })}
)}
-
{!rareSatsQuery.isLoading && showNoticeAlert && (
+
{!rareSatsQuery.error &&
!rareSatsQuery.isLoading &&
rareSatsQuery.data?.pages
@@ -278,12 +232,12 @@ export default function CollectiblesTabs({
)}
{rareSatsQuery.hasNextPage && (
- rareSatsQuery.fetchNextPage()}
+ onClick={() => rareSatsQuery.fetchNextPage()}
/>
)}
diff --git a/src/app/screens/nftDashboard/collectiblesTabs/skeletonLoader.tsx b/src/app/screens/nftDashboard/collectiblesTabs/skeletonLoader.tsx
new file mode 100644
index 000000000..faed4ea84
--- /dev/null
+++ b/src/app/screens/nftDashboard/collectiblesTabs/skeletonLoader.tsx
@@ -0,0 +1,15 @@
+import { StyledBarLoader, TilesSkeletonLoader } from '@components/tilesSkeletonLoader';
+import { CountLoaderContainer, LoaderContainer } from './index.styled';
+
+function SkeletonLoader({ isGalleryOpen }: { isGalleryOpen: boolean }) {
+ return (
+
+
+
+
+ );
+}
+
+export default SkeletonLoader;
diff --git a/src/app/screens/nftDashboard/hidden/index.tsx b/src/app/screens/nftDashboard/hidden/index.tsx
new file mode 100644
index 000000000..abc8942ab
--- /dev/null
+++ b/src/app/screens/nftDashboard/hidden/index.tsx
@@ -0,0 +1,329 @@
+import AccountHeaderComponent from '@components/accountHeader';
+import BottomTabBar from '@components/tabBar';
+import TopRow from '@components/topRow';
+import useSelectedAccount from '@hooks/useSelectedAccount';
+import useWalletSelector from '@hooks/useWalletSelector';
+import { ArrowLeft, TrayArrowUp } from '@phosphor-icons/react';
+import {
+ removeAllFromHideCollectiblesAction,
+ setHiddenCollectiblesAction,
+} from '@stores/wallet/actions/actionCreators';
+import { StyledHeading, StyledP } from '@ui-library/common.styled';
+import Sheet from '@ui-library/sheet';
+import SnackBar from '@ui-library/snackBar';
+import { TabItem } from '@ui-library/tabs';
+import { LONG_TOAST_DURATION } from '@utils/constants';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { TabPanel, Tabs } from 'react-tabs';
+import styled from 'styled-components';
+import Theme from 'theme';
+import {
+ StickyStyledTabList,
+ StyledButton,
+ StyledSheetButton,
+} from '../collectiblesTabs/index.styled';
+import SkeletonLoader from '../collectiblesTabs/skeletonLoader';
+import useNftDashboard from '../useNftDashboard';
+
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ overflow-y: auto;
+ ${(props) => props.theme.scrollbar}
+`;
+
+const PageHeader = styled.div`
+ padding: ${(props) => props.theme.space.s};
+ padding-bottom: ${(props) => props.theme.space.l};
+ border-bottom: 0.5px solid ${(props) => props.theme.colors.elevation3};
+ max-width: 1224px;
+ margin-left: auto;
+ margin-right: auto;
+ width: 100%;
+`;
+
+const CollectiblesContainer = styled.div`
+ padding: 0 ${(props) => props.theme.space.s};
+ padding-bottom: ${(props) => props.theme.space.xl};
+ max-width: 1224px;
+ margin-left: auto;
+ margin-right: auto;
+ width: 100%;
+`;
+
+const RowCenterSpaceBetween = styled.div<{ addMarginBottom?: boolean }>`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: ${(props) => (props.addMarginBottom ? props.theme.space.m : 0)};
+`;
+
+const BackButton = styled.button`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: ${(props) => props.theme.space.xxs};
+ background: transparent;
+ margin-bottom: ${(props) => props.theme.space.xl};
+ color: ${(props) => props.theme.colors.white_0};
+`;
+
+const ItemCountContainer = styled.div<{ $isGalleryOpen: boolean }>`
+ margin-top: ${(props) => (props.$isGalleryOpen ? props.theme.space.l : props.theme.space.m)};
+`;
+
+type TabButton = {
+ key: string;
+ label: string;
+};
+
+const tabs: TabButton[] = [
+ {
+ key: 'inscriptions',
+ label: 'INSCRIPTIONS',
+ },
+ {
+ key: 'nfts',
+ label: 'NFTS',
+ },
+];
+
+const tabKeyToIndex = (key?: string | null) => {
+ if (!key) return 0;
+ return tabs.findIndex((tab) => tab.key === key);
+};
+
+function NftDashboardHidden() {
+ const { t } = useTranslation('translation', { keyPrefix: 'NFT_DASHBOARD_SCREEN' });
+ const { t: tCommon } = useTranslation('translation', { keyPrefix: 'COMMON' });
+ const { t: tCollectibles } = useTranslation('translation', {
+ keyPrefix: 'COLLECTIBLE_COLLECTION_SCREEN',
+ });
+ const [searchParams] = useSearchParams();
+ const tab = searchParams?.get('tab');
+ const {
+ isGalleryOpen,
+ hiddenInscriptionsQuery,
+ totalHiddenInscriptions,
+ HiddenInscriptionListView,
+ hiddenStacksNftsQuery,
+ totalHiddenNfts,
+ HiddenNftListView,
+ hasActivatedOrdinalsKey,
+ } = useNftDashboard();
+ const { ordinalsAddress, stxAddress } = useSelectedAccount();
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+ const { hiddenCollectibleIds } = useWalletSelector();
+ const [isOptionsModalVisible, setIsOptionsModalVisible] = useState(false);
+ const [tabIndex, setTabIndex] = useState(tabKeyToIndex(tab));
+
+ const visibleTabButtons = tabs.filter((tabItem: TabButton) => {
+ if (tabItem.key === 'inscriptions' && !hasActivatedOrdinalsKey) {
+ return false;
+ }
+ return true;
+ });
+
+ const handleBackButtonClick = () => {
+ navigate(`/nft-dashboard?tab=${tab}`);
+ };
+
+ const handleClickUndoHidingAll = ({
+ toastId,
+ currentInscriptionsHidden,
+ currentStacksNftsHidden,
+ }: {
+ toastId: string;
+ currentInscriptionsHidden: Record;
+ currentStacksNftsHidden: Record;
+ }) => {
+ dispatch(
+ setHiddenCollectiblesAction({
+ collectibleIds: {
+ [ordinalsAddress]: currentInscriptionsHidden,
+ [stxAddress]: currentStacksNftsHidden,
+ },
+ }),
+ );
+ toast.remove(toastId);
+ toast.custom(
+ handleClickUndoHidingAll({
+ toastId,
+ currentInscriptionsHidden,
+ currentStacksNftsHidden,
+ }),
+ }}
+ />,
+ { duration: LONG_TOAST_DURATION },
+ );
+ };
+
+ const handleSelectTab = (index: number) => setTabIndex(index);
+
+ const openOptionsDialog = () => {
+ setIsOptionsModalVisible(true);
+ };
+
+ const closeOptionsDialog = () => {
+ setIsOptionsModalVisible(false);
+ };
+
+ return (
+ <>
+ {isGalleryOpen ? (
+ 0 || totalHiddenNfts > 0 ? openOptionsDialog : undefined
+ }
+ />
+ )}
+
+
+ {isGalleryOpen && (
+
+
+ {tCollectibles('BACK_TO_GALLERY')}
+
+
+ )}
+
+
+ {t('HIDDEN_COLLECTIBLES')}
+
+ {isGalleryOpen && (totalHiddenInscriptions > 0 || totalHiddenNfts > 0) ? (
+
+
+
+ {/* TODO: replace with Tabs component from `src/app/ui-library/tabs.tsx` */}
+
+ {visibleTabButtons.length > 1 && (
+
+ {visibleTabButtons.map(({ key, label }) => (
+ handleSelectTab(tabKeyToIndex(key))}
+ >
+ {t(label)}
+
+ ))}
+
+ )}
+ {hasActivatedOrdinalsKey && (
+
+
+ )}
+
+ {hiddenStacksNftsQuery.isInitialLoading ? (
+
+ {totalHiddenNfts > 0 ? (
+
+ {totalHiddenNfts === 1
+ ? t('TOTAL_ITEMS_ONE')
+ : t('TOTAL_ITEMS', { count: totalHiddenNfts })}
+
+ ) : (
+
+ )}
+
+
+
+
+
+ {!isGalleryOpen &&
+
+ )}
+
+ );
+}
+
+export default NftDashboardHidden;
diff --git a/src/app/screens/nftDashboard/index.tsx b/src/app/screens/nftDashboard/index.tsx
index fade3b948..a9b98eac3 100644
--- a/src/app/screens/nftDashboard/index.tsx
+++ b/src/app/screens/nftDashboard/index.tsx
@@ -1,10 +1,10 @@
import FeatureIcon from '@assets/img/nftDashboard/rareSats/NewFeature.svg';
import AccountHeaderComponent from '@components/accountHeader';
-import ActionButton from '@components/button';
import ShowOrdinalReceiveAlert from '@components/showOrdinalReceiveAlert';
import BottomTabBar from '@components/tabBar';
import WebGalleryButton from '@components/webGalleryButton';
import { ArrowDown } from '@phosphor-icons/react';
+import Button from '@ui-library/button';
import { StyledHeading } from '@ui-library/common.styled';
import Dialog from '@ui-library/dialog';
import { useTranslation } from 'react-i18next';
@@ -31,7 +31,7 @@ const PageHeader = styled.div`
width: 100%;
`;
-const StyledCollectiblesTabs = styled(CollectiblesTabs)`
+const CollectiblesContainer = styled.div`
padding: 0 ${(props) => props.theme.space.s};
padding-bottom: ${(props) => props.theme.space.xl};
max-width: 1224px;
@@ -54,7 +54,7 @@ const ReceiveNftContainer = styled.div((props) => ({
}));
const CollectibleContainer = styled.div((props) => ({
- marginBottom: props.theme.spacing(12),
+ marginBottom: props.theme.space.l,
}));
const ButtonContainer = styled.div({
@@ -90,7 +90,6 @@ function NftDashboard() {
onActivateRareSatsAlertEnablePress,
isGalleryOpen,
} = nftDashboard;
-
return (
<>
{isOrdinalReceiveAlertVisible && (
@@ -124,10 +123,10 @@ function NftDashboard() {
-
{openReceiveModal && (
@@ -142,11 +141,13 @@ function NftDashboard() {
)}
-
+
{!isGalleryOpen && ) => {
+ const isItemHidden = Object.keys(hiddenCollectibleIds[ordinalsAddress] ?? {}).some(
+ (id) => id === getCollectionKey(collection),
+ );
+
+ const handleClickCollection = (e: React.MouseEvent) => {
const collectionId = e.currentTarget.value;
- navigate(`/nft-dashboard/ordinals-collection/${collectionId}`);
+ navigate(`/nft-dashboard/ordinals-collection/${collectionId}/${isItemHidden ? 'hidden' : ''}`);
};
- const handleClickInscriptionId = (e: React.MouseEvent) => {
+ const handleClickInscription = (e: React.MouseEvent) => {
const inscriptionId = e.currentTarget.value;
- navigate(`/nft-dashboard/ordinal-detail/${inscriptionId}`);
+ navigate(`/nft-dashboard/ordinal-detail/${inscriptionId}/${isItemHidden ? 'hidden' : ''}`);
};
const itemId = getInscriptionsTabGridItemId(collection);
@@ -66,7 +95,7 @@ function InscriptionsTabGridItem({ item: collection }: { item: InscriptionCollec
data-testid="inscription-container"
type="button"
value={getCollectionKey(collection)}
- onClick={isCollection(collection) ? handleClickCollectionId : handleClickInscriptionId}
+ onClick={isCollection(collection) ? handleClickCollection : handleClickInscription}
>
{!collection.thumbnail_inscriptions ? ( // eslint-disable-line no-nested-ternary
-
- {itemId}
-
+
+ {(collectionStarred || standaloneInscriptionStarred) && (
+
+ {itemId}
+
+
+
((props) => ({
+const NftImageContainer = styled.div<{
+ $isGalleryView: boolean;
+}>((props) => ({
display: 'flex',
justifyContent: 'center',
alignItems: 'flex-start',
@@ -25,7 +19,7 @@ const NftImageContainer = styled.div((props) => ({
'> img': {
width: '100%',
},
- flexGrow: props.isGalleryView ? 1 : 'initial',
+ flexGrow: props.$isGalleryView ? 1 : 'initial',
}));
const GridItemContainer = styled.div((props) => ({
@@ -43,11 +37,17 @@ const BnsImage = styled.img({
height: '100%',
});
+type Props = {
+ asset: NonFungibleToken;
+ isGalleryOpen: boolean;
+};
+
function Nft({ asset, isGalleryOpen }: Props) {
const { data } = useNftDetail(asset.identifier);
+
return (
-
+
{isBnsContract(asset?.asset_identifier) ? (
);
}
+
export default Nft;
diff --git a/src/app/screens/nftDashboard/nftImage.tsx b/src/app/screens/nftDashboard/nftImage.tsx
index 07aa50521..c3249d26e 100644
--- a/src/app/screens/nftDashboard/nftImage.tsx
+++ b/src/app/screens/nftDashboard/nftImage.tsx
@@ -94,6 +94,10 @@ function NftImage({ metadata, isInCollage = false }: Props) {
playsInline
controls
preload="auto"
+ onClick={(event) => {
+ // Prevent playback when clicking anywhere other than the controls
+ event.preventDefault();
+ }}
/>
);
}
diff --git a/src/app/screens/nftDashboard/nftTabGridItem.tsx b/src/app/screens/nftDashboard/nftTabGridItem.tsx
index ee3ee663f..5fd1c8c15 100644
--- a/src/app/screens/nftDashboard/nftTabGridItem.tsx
+++ b/src/app/screens/nftDashboard/nftTabGridItem.tsx
@@ -1,9 +1,13 @@
import CollectibleCollage from '@components/collectibleCollage/collectibleCollage';
+import useSelectedAccount from '@hooks/useSelectedAccount';
+import useWalletSelector from '@hooks/useWalletSelector';
+import { Star } from '@phosphor-icons/react';
import type { StacksCollectionData } from '@secretkeylabs/xverse-core';
import { StyledP } from '@ui-library/common.styled';
import { getNftsTabGridItemSubText } from '@utils/nfts';
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';
+import Theme from 'theme';
import Nft from './nft';
import NftImage from './nftImage';
@@ -24,6 +28,12 @@ const InfoContainer = styled.div`
width: 100%;
`;
+const TitleContainer = styled.div`
+ display: flex;
+ gap: 4px;
+ width: 100%;
+`;
+
const StyledItemId = styled(StyledP)`
text-align: left;
text-wrap: nowrap;
@@ -40,17 +50,32 @@ const StyledItemSub = styled(StyledP)`
width: 100%;
`;
-function NftTabGridItem({
- item: collection,
- isLoading = false,
-}: {
+const StyledStar = styled(Star)`
+ margin-top: ${(props) => props.theme.space.xxxs};
+`;
+
+type Props = {
item: StacksCollectionData;
isLoading?: boolean;
-}) {
+};
+
+function NftTabGridItem({ item: collection, isLoading = false }: Props) {
const navigate = useNavigate();
+ const { stxAddress } = useSelectedAccount();
+ const { hiddenCollectibleIds, starredCollectibleIds } = useWalletSelector();
+
+ const isItemHidden = Object.keys(hiddenCollectibleIds[stxAddress] ?? {}).some(
+ (id) => id === collection.collection_id,
+ );
+
+ const collectionStarred = starredCollectibleIds[stxAddress]?.some(
+ ({ id }) => id === collection.collection_id,
+ );
const handleClickCollection = () => {
- navigate(`nft-collection/${collection.collection_id}`);
+ navigate(
+ `/nft-dashboard/nft-collection/${collection.collection_id}/${isItemHidden ? 'hidden' : ''}`,
+ );
};
const itemId = collection.collection_name;
@@ -68,9 +93,12 @@ function NftTabGridItem({
)}
-
- {itemId}
-
+
+ {collectionStarred &&
+ {itemId}
+
+
{itemSubText}
diff --git a/src/app/screens/nftDashboard/receiveNft/index.tsx b/src/app/screens/nftDashboard/receiveNft/index.tsx
index 9d7d72432..16a5d4c91 100644
--- a/src/app/screens/nftDashboard/receiveNft/index.tsx
+++ b/src/app/screens/nftDashboard/receiveNft/index.tsx
@@ -3,24 +3,26 @@ import plusIcon from '@assets/img/dashboard/plus.svg';
import stacksIcon from '@assets/img/dashboard/stx_icon.svg';
import ordinalsIcon from '@assets/img/nftDashboard/ordinals_icon.svg';
import ActionButton from '@components/button';
-import UpdatedBottomModal from '@components/updatedBottomModal';
+import ReceiveCardComponent from '@components/receiveCardComponent';
import useSelectedAccount from '@hooks/useSelectedAccount';
import useWalletSelector from '@hooks/useWalletSelector';
import { Plus } from '@phosphor-icons/react';
+import Sheet from '@ui-library/sheet';
import { isInOptions, isLedgerAccount } from '@utils/helper';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';
-import ReceiveCardComponent from '../../../components/receiveCardComponent';
+
+const GalleryModalContainer = styled.div((props) => ({
+ padding: `0 ${props.theme.space.m}`,
+}));
const ColumnContainer = styled.div((props) => ({
display: 'flex',
flexDirection: 'column',
marginTop: props.theme.space.l,
marginBottom: props.theme.space.xl,
- paddingLeft: props.theme.space.m,
- paddingRight: props.theme.space.m,
gap: props.theme.space.m,
}));
@@ -80,12 +82,12 @@ const VerifyButtonContainer = styled.div((props) => ({
marginBottom: props.theme.spacing(6),
}));
-interface Props {
+type Props = {
visible: boolean;
onClose: () => void;
setOrdinalReceiveAlert: () => void;
isGalleryOpen: boolean;
-}
+};
function ReceiveNftModal({ visible, onClose, isGalleryOpen, setOrdinalReceiveAlert }: Props) {
const { t } = useTranslation('translation', { keyPrefix: 'NFT_DASHBOARD_SCREEN' });
@@ -140,14 +142,15 @@ function ReceiveNftModal({ visible, onClose, isGalleryOpen, setOrdinalReceiveAle
onQrAddressClick={onOrdinalsReceivePress}
showVerifyButton={choseToVerifyAddresses}
currency="ORD"
- >
-
-
-
-
-
+ icon={
+
+
+
+
+ }
+ />
)}
{stxAddress && (
@@ -157,14 +160,15 @@ function ReceiveNftModal({ visible, onClose, isGalleryOpen, setOrdinalReceiveAle
onQrAddressClick={onReceivePress}
showVerifyButton={choseToVerifyAddresses}
currency="STX"
- >
-
-
-
-
-
+ icon={
+
+
+
+
+ }
+ />
)}
{isLedgerAccount(selectedAccount) && !stxAddress && (
@@ -214,16 +218,14 @@ function ReceiveNftModal({ visible, onClose, isGalleryOpen, setOrdinalReceiveAle
- {isReceivingAddressesVisible ? receiveContent : verifyOrViewAddresses}
+
+ {isReceivingAddressesVisible ? receiveContent : verifyOrViewAddresses}
+
) : (
-
+
{isReceivingAddressesVisible ? receiveContent : verifyOrViewAddresses}
-
+
);
}
diff --git a/src/app/screens/nftDashboard/useNftDashboard.tsx b/src/app/screens/nftDashboard/useNftDashboard.tsx
index b2cbd6971..67427cb19 100644
--- a/src/app/screens/nftDashboard/useNftDashboard.tsx
+++ b/src/app/screens/nftDashboard/useNftDashboard.tsx
@@ -1,5 +1,4 @@
-import ActionButton from '@components/button';
-import useAddressInscriptionCollections from '@hooks/queries/ordinals/useAddressInscriptionCollections';
+import useAddressInscriptions from '@hooks/queries/ordinals/useAddressInscriptions';
import { useAddressRareSats } from '@hooks/queries/ordinals/useAddressRareSats';
import useStacksCollectibles from '@hooks/queries/useStacksCollectibles';
import useWalletSelector from '@hooks/useWalletSelector';
@@ -10,6 +9,7 @@ import {
ChangeActivateRareSatsAction,
SetRareSatsNoticeDismissedAction,
} from '@stores/wallet/actions/actionCreators';
+import Button from '@ui-library/button';
import { getCollectionKey } from '@utils/inscriptions';
import { InvalidParamsError } from '@utils/query';
import { useCallback, useEffect, useMemo, useRef, useState, type PropsWithChildren } from 'react';
@@ -17,27 +17,27 @@ import { useTranslation } from 'react-i18next';
import { useIsVisible } from 'react-is-visible';
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
-import { GridContainer } from './collectiblesTabs';
+import { GridContainer } from './collectiblesTabs/index.styled';
import InscriptionsTabGridItem from './inscriptionsTabGridItem';
import NftTabGridItem from './nftTabGridItem';
const NoCollectiblesText = styled.h1((props) => ({
...props.theme.typography.body_bold_m,
color: props.theme.colors.white_200,
- marginTop: props.theme.spacing(16),
+ marginTop: props.theme.space.xl,
marginBottom: 'auto',
textAlign: 'center',
}));
const ErrorContainer = styled.div((props) => ({
- marginTop: props.theme.spacing(20),
+ marginTop: props.theme.space.xxl,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}));
const ErrorTextContainer = styled.div((props) => ({
- marginTop: props.theme.spacing(8),
+ marginTop: props.theme.space.m,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
@@ -75,7 +75,9 @@ export type NftDashboardState = {
showNewFeatureAlert: boolean;
isOrdinalReceiveAlertVisible: boolean;
stacksNftsQuery: ReturnType;
- inscriptionsQuery: ReturnType;
+ inscriptionsQuery: ReturnType;
+ hiddenInscriptionsQuery: ReturnType;
+ hiddenStacksNftsQuery: ReturnType;
rareSatsQuery: ReturnType;
openInGalleryView: () => void;
onReceiveModalOpen: () => void;
@@ -83,7 +85,9 @@ export type NftDashboardState = {
onOrdinalReceiveAlertOpen: () => void;
onOrdinalReceiveAlertClose: () => void;
InscriptionListView: () => JSX.Element;
+ HiddenInscriptionListView: () => JSX.Element;
NftListView: () => JSX.Element;
+ HiddenNftListView: () => JSX.Element;
onActivateRareSatsAlertCrossPress: () => void;
onActivateRareSatsAlertDenyPress: () => void;
onActivateRareSatsAlertEnablePress: () => void;
@@ -93,7 +97,9 @@ export type NftDashboardState = {
hasActivatedRareSatsKey?: boolean;
showNoticeAlert?: boolean;
totalNfts: number;
+ totalHiddenNfts: number;
totalInscriptions: number;
+ totalHiddenInscriptions: number;
};
const useNftDashboard = (): NftDashboardState => {
@@ -106,11 +112,16 @@ const useNftDashboard = (): NftDashboardState => {
const [showNoticeAlert, setShowNoticeAlert] = useState(false);
const [isOrdinalReceiveAlertVisible, setIsOrdinalReceiveAlertVisible] = useState(false);
const stacksNftsQuery = useStacksCollectibles();
- const inscriptionsQuery = useAddressInscriptionCollections();
+ const hiddenStacksNftsQuery = useStacksCollectibles(true);
+ const inscriptionsQuery = useAddressInscriptions();
+ const hiddenInscriptionsQuery = useAddressInscriptions(true);
const rareSatsQuery = useAddressRareSats();
const totalInscriptions = inscriptionsQuery.data?.pages?.[0]?.total_inscriptions ?? 0;
+ const totalHiddenInscriptions = hiddenInscriptionsQuery.data?.pages?.[0]?.total_inscriptions ?? 0;
+
const totalNfts = stacksNftsQuery.data?.total_nfts ?? 0;
+ const totalHiddenNfts = hiddenStacksNftsQuery.data?.total_nfts ?? 0;
const isGalleryOpen: boolean = useMemo(() => document.documentElement.clientWidth > 360, []);
@@ -168,7 +179,7 @@ const useNftDashboard = (): NftDashboardState => {
return (
<>
-
+
{inscriptionsQuery.data?.pages
?.map((page) => page?.results)
.flat()
@@ -178,12 +189,12 @@ const useNftDashboard = (): NftDashboardState => {
{inscriptionsQuery.hasNextPage && (
- inscriptionsQuery.fetchNextPage()}
+ onClick={() => inscriptionsQuery.fetchNextPage()}
/>
)}
@@ -191,6 +202,51 @@ const useNftDashboard = (): NftDashboardState => {
);
}, [inscriptionsQuery, isGalleryOpen, totalInscriptions, t]);
+ const HiddenInscriptionListView = useCallback(() => {
+ if (
+ hiddenInscriptionsQuery.error &&
+ !(hiddenInscriptionsQuery.error instanceof InvalidParamsError)
+ ) {
+ return (
+
+
+ {t('ERROR_RETRIEVING')}
+ {t('TRY_AGAIN')}
+
+
+ );
+ }
+
+ if (totalHiddenInscriptions === 0) {
+ return {t('NO_COLLECTIBLES')} ;
+ }
+
+ return (
+ <>
+
+ {hiddenInscriptionsQuery.data?.pages
+ ?.map((page) => page?.results)
+ .flat()
+ .map((collection: InscriptionCollectionsData) => (
+
+ {hiddenInscriptionsQuery.hasNextPage && (
+
+
+ )}
+
+ );
+ }, [hiddenInscriptionsQuery, isGalleryOpen, totalHiddenInscriptions, t]);
+
const NftListView = useCallback(() => {
if (stacksNftsQuery.error && !(stacksNftsQuery.error instanceof InvalidParamsError)) {
return (
@@ -209,7 +265,7 @@ const useNftDashboard = (): NftDashboardState => {
}
return (
-
+
{stacksNftsQuery.data?.results.map((collection: StacksCollectionData) => (
+
+ {t('ERROR_RETRIEVING')}
+ {t('TRY_AGAIN')}
+
+
+ );
+ }
+
+ if (totalHiddenNfts === 0) {
+ return {t('NO_COLLECTIBLES')} ;
+ }
+
+ return (
+
+ {hiddenStacksNftsQuery.data?.results.map((collection: StacksCollectionData) => (
+
+
+ ))}
+
+ );
+ }, [hiddenStacksNftsQuery, isGalleryOpen, totalHiddenNfts, t]);
+
const onActivateRareSatsAlertCrossPress = () => {
setShowNewFeatureAlert(false);
};
@@ -245,14 +332,18 @@ const useNftDashboard = (): NftDashboardState => {
showNewFeatureAlert,
isOrdinalReceiveAlertVisible,
stacksNftsQuery,
+ hiddenStacksNftsQuery,
inscriptionsQuery,
+ hiddenInscriptionsQuery,
openInGalleryView,
onReceiveModalOpen,
onReceiveModalClose,
onOrdinalReceiveAlertOpen,
onOrdinalReceiveAlertClose,
InscriptionListView,
+ HiddenInscriptionListView,
NftListView,
+ HiddenNftListView,
onActivateRareSatsAlertCrossPress,
onActivateRareSatsAlertDenyPress,
onActivateRareSatsAlertEnablePress,
@@ -263,7 +354,9 @@ const useNftDashboard = (): NftDashboardState => {
showNoticeAlert,
rareSatsQuery,
totalNfts,
+ totalHiddenNfts,
totalInscriptions,
+ totalHiddenInscriptions,
};
};
diff --git a/src/app/screens/nftDetail/index.styled.ts b/src/app/screens/nftDetail/index.styled.ts
index 19be80ec7..49865ab83 100644
--- a/src/app/screens/nftDetail/index.styled.ts
+++ b/src/app/screens/nftDetail/index.styled.ts
@@ -1,22 +1,19 @@
-import { BetterBarLoader } from '@components/barLoader';
-import Separator from '@components/separator';
import { Tooltip } from 'react-tooltip';
import styled from 'styled-components';
+interface DetailSectionProps {
+ $isGallery: boolean;
+}
+
export const ExtensionContainer = styled.div((props) => ({
...props.theme.scrollbar,
display: 'flex',
flexDirection: 'column',
- marginTop: props.theme.spacing(4),
+ marginTop: props.theme.space.xs,
alignItems: 'center',
flex: 1,
- paddingLeft: props.theme.spacing(4),
- paddingRight: props.theme.spacing(4),
-}));
-
-export const GalleryReceiveButtonContainer = styled.div((props) => ({
- marginRight: props.theme.spacing(3),
- width: '100%',
+ paddingLeft: props.theme.space.xs,
+ paddingRight: props.theme.space.xs,
}));
export const BackButtonContainer = styled.div((props) => ({
@@ -32,8 +29,8 @@ export const ButtonContainer = styled.div((props) => ({
justifyContent: 'center',
columnGap: props.theme.spacing(11),
paddingBottom: props.theme.spacing(16),
- marginBottom: props.theme.spacing(4),
- marginTop: props.theme.spacing(4),
+ marginBottom: props.theme.space.xs,
+ marginTop: props.theme.space.xs,
width: '100%',
borderBottom: `1px solid ${props.theme.colors.elevation3}`,
}));
@@ -52,7 +49,7 @@ export const NftContainer = styled.div((props) => ({
justifyContent: 'flex-start',
alignItems: 'flex-start',
borderRadius: 8,
- marginBottom: props.theme.spacing(12),
+ marginBottom: props.theme.space.l,
}));
export const ExtensionNftContainer = styled.div((props) => ({
@@ -63,13 +60,14 @@ export const ExtensionNftContainer = styled.div((props) => ({
justifyContent: 'center',
alignItems: 'center',
borderRadius: 8,
- marginBottom: props.theme.spacing(12),
+ marginBottom: props.theme.space.l,
}));
export const NftTitleText = styled.h1((props) => ({
...props.theme.typography.headline_m,
color: props.theme.colors.white_0,
textAlign: 'center',
+ wordBreak: 'break-word',
}));
export const CollectibleText = styled.p((props) => ({
@@ -81,7 +79,7 @@ export const CollectibleText = styled.p((props) => ({
export const NftGalleryTitleText = styled.h1((props) => ({
...props.theme.typography.headline_l,
color: props.theme.colors.white_0,
- marginBottom: props.theme.spacing(4),
+ marginBottom: props.theme.space.xs,
}));
export const NftOwnedByText = styled.p((props) => ({
@@ -109,20 +107,15 @@ export const GridContainer = styled.div((props) => ({
display: 'grid',
width: '100%',
marginTop: props.theme.spacing(6),
- columnGap: props.theme.spacing(4),
- rowGap: props.theme.spacing(4),
+ columnGap: props.theme.space.xs,
+ rowGap: props.theme.space.xs,
gridTemplateColumns: 'repeat(auto-fit,minmax(150px,1fr))',
- marginBottom: props.theme.spacing(8),
-}));
-
-export const ShareButtonContainer = styled.div((props) => ({
- marginLeft: props.theme.spacing(3),
- width: '100%',
+ marginBottom: props.theme.space.m,
}));
export const DescriptionContainer = styled.div((props) => ({
display: 'flex',
- marginLeft: props.theme.spacing(20),
+ marginLeft: props.theme.space.xxl,
flexDirection: 'column',
marginBottom: props.theme.spacing(30),
}));
@@ -140,8 +133,8 @@ export const WebGalleryButton = styled.button((props) => ({
borderRadius: props.theme.radius(1),
backgroundColor: 'transparent',
width: '100%',
- marginTop: props.theme.spacing(4),
- marginBottom: props.theme.spacing(12),
+ marginTop: props.theme.space.xs,
+ marginBottom: props.theme.space.l,
}));
export const WebGalleryButtonText = styled.div((props) => ({
@@ -162,20 +155,12 @@ export const BackButton = styled.button((props) => ({
justifyContent: 'flex-start',
alignItems: 'center',
background: 'transparent',
- marginBottom: props.theme.spacing(12),
+ marginBottom: props.theme.space.l,
}));
-export const ExtensionLoaderContainer = styled.div({
- height: '100%',
- display: 'flex',
- flexDirection: 'column',
- justifyContent: 'space-around',
- alignItems: 'center',
-});
-
export const SeeDetailsButtonContainer = styled.div((props) => ({
marginBottom: props.theme.spacing(27),
- marginTop: props.theme.spacing(4),
+ marginTop: props.theme.space.xs,
}));
export const Button = styled.button((props) => ({
@@ -184,7 +169,7 @@ export const Button = styled.button((props) => ({
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent',
- width: props.isGallery ? 400 : 328,
+ width: props.$isGallery ? 400 : 328,
height: 44,
padding: 12,
borderRadius: 12,
@@ -220,19 +205,19 @@ export const GalleryScrollContainer = styled.div((props) => ({
export const ButtonHiglightedText = styled.p((props) => ({
...props.theme.typography.body_m,
color: props.theme.colors.white_0,
- marginLeft: props.theme.spacing(2),
- marginRight: props.theme.spacing(2),
+ marginLeft: props.theme.space.xxs,
+ marginRight: props.theme.space.xxs,
}));
export const GalleryRowContainer = styled.div<{
- withGap?: boolean;
+ $withGap?: boolean;
}>((props) => ({
display: 'flex',
alignItems: 'flex-start',
- marginTop: props.theme.spacing(8),
- marginBottom: props.theme.spacing(12),
+ marginTop: props.theme.space.m,
+ marginBottom: props.theme.space.l,
flexDirection: 'row',
- columnGap: props.withGap ? props.theme.spacing(20) : 0,
+ columnGap: props.$withGap ? props.theme.space.m : 0,
}));
export const StyledTooltip = styled(Tooltip)`
@@ -245,14 +230,6 @@ export const StyledTooltip = styled(Tooltip)`
}
`;
-export const StyledBarLoader = styled(BetterBarLoader)<{
- withMarginBottom?: boolean;
-}>((props) => ({
- padding: 0,
- borderRadius: props.theme.radius(1),
- marginBottom: props.withMarginBottom ? props.theme.spacing(6) : 0,
-}));
-
export const GalleryContainer = styled.div({
marginLeft: 'auto',
marginRight: 'auto',
@@ -264,57 +241,20 @@ export const GalleryContainer = styled.div({
maxWidth: 1224,
});
-export const ActionButtonLoader = styled.div((props) => ({
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- rowGap: props.theme.spacing(4),
-}));
-
-export const ActionButtonsLoader = styled.div((props) => ({
- display: 'flex',
- justifyContent: 'center',
- columnGap: props.theme.spacing(11),
-}));
-
-export const GalleryLoaderContainer = styled.div({
- display: 'flex',
- flexDirection: 'column',
-});
-
-export const StyledSeparator = styled(Separator)`
- width: 100%;
-`;
-
-export const TitleLoader = styled.div`
- display: flex;
- flex-direction: column;
-`;
-interface DetailSectionProps {
- isGallery: boolean;
-}
-
export const NftDetailsContainer = styled.div((props) => ({
display: 'flex',
alignItems: 'flex-start',
flexDirection: 'column',
wordBreak: 'break-all',
whiteSpace: 'pre-wrap',
- width: props.isGallery ? 400 : '100%',
- marginTop: props.theme.spacing(8),
+ width: props.$isGallery ? 400 : '100%',
+ marginTop: props.theme.space.m,
}));
export const DetailSection = styled.div((props) => ({
display: 'flex',
- flexDirection: !props.isGallery ? 'row' : 'column',
+ flexDirection: !props.$isGallery ? 'row' : 'column',
justifyContent: 'center',
width: '100%',
- columnGap: props.theme.spacing(8),
-}));
-
-export const InfoContainer = styled.div((props) => ({
- width: '100%',
- display: 'flex',
- justifyContent: 'space-between',
- padding: `0 ${props.theme.spacing(8)}px`,
+ columnGap: props.theme.space.m,
}));
diff --git a/src/app/screens/nftDetail/index.tsx b/src/app/screens/nftDetail/index.tsx
index c4b4b3ec0..9b19f7d60 100644
--- a/src/app/screens/nftDetail/index.tsx
+++ b/src/app/screens/nftDetail/index.tsx
@@ -1,18 +1,44 @@
import SquaresFour from '@assets/img/nftDashboard/squares_four.svg';
import AccountHeaderComponent from '@components/accountHeader';
-import ActionButton from '@components/button';
import CollectibleDetailTile from '@components/collectibleDetailTile';
import SquareButton from '@components/squareButton';
import BottomTabBar from '@components/tabBar';
import TopRow from '@components/topRow';
-import { ArrowLeft, ArrowUp, Share } from '@phosphor-icons/react';
+import useOptionsSheet from '@hooks/useOptionsSheet';
+import useSelectedAccount from '@hooks/useSelectedAccount';
+import useWalletSelector from '@hooks/useWalletSelector';
+import {
+ ArrowLeft,
+ ArrowUp,
+ DotsThreeVertical,
+ Share,
+ Star,
+ UserCircleCheck,
+ UserCircleMinus,
+} from '@phosphor-icons/react';
import NftImage from '@screens/nftDashboard/nftImage';
+import { StyledButton } from '@screens/ordinalsCollection/index.styled';
import type { Attribute } from '@secretkeylabs/xverse-core';
-import { EMPTY_LABEL } from '@utils/constants';
+import {
+ addToStarCollectiblesAction,
+ removeAccountAvatarAction,
+ removeFromStarCollectiblesAction,
+ setAccountAvatarAction,
+} from '@stores/wallet/actions/actionCreators';
+import ActionButton from '@ui-library/button';
+import Sheet from '@ui-library/sheet';
+import SnackBar from '@ui-library/snackBar';
+import { EMPTY_LABEL, LONG_TOAST_DURATION } from '@utils/constants';
+import { useCallback } from 'react';
+import toast from 'react-hot-toast';
import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import Theme from '../../../theme';
+import { ExtensionLoader, GalleryLoader } from './loaders';
+import NftAttribute from './nftAttribute';
+import useNftDetailScreen from './useNftDetail';
+
import {
- ActionButtonLoader,
- ActionButtonsLoader,
AssetDeatilButtonText,
AttributeText,
BackButton,
@@ -28,16 +54,12 @@ import {
DescriptionContainer,
DetailSection,
ExtensionContainer,
- ExtensionLoaderContainer,
ExtensionNftContainer,
GalleryCollectibleText,
GalleryContainer,
- GalleryLoaderContainer,
- GalleryReceiveButtonContainer,
GalleryRowContainer,
GalleryScrollContainer,
GridContainer,
- InfoContainer,
NftContainer,
NftDetailsContainer,
NftGalleryTitleText,
@@ -46,18 +68,16 @@ import {
OwnerAddressText,
RowContainer,
SeeDetailsButtonContainer,
- ShareButtonContainer,
- StyledBarLoader,
- StyledSeparator,
StyledTooltip,
- TitleLoader,
WebGalleryButton,
WebGalleryButtonText,
} from './index.styled';
-import NftAttribute from './nftAttribute';
-import useNftDetailScreen from './useNftDetail';
function NftDetailScreen() {
+ const dispatch = useDispatch();
+ const optionsSheet = useOptionsSheet();
+ const { t: optionsDialogT } = useTranslation('translation', { keyPrefix: 'OPTIONS_DIALOG' });
+ const { t: commonT } = useTranslation('translation', { keyPrefix: 'COMMON' });
const { t } = useTranslation('translation', { keyPrefix: 'NFT_DETAIL_SCREEN' });
const {
nft,
@@ -74,6 +94,99 @@ function NftDetailScreen() {
handleOnSendClick,
galleryTitle,
} = useNftDetailScreen();
+ const { ordinalsAddress } = useSelectedAccount();
+ const { avatarIds, hiddenCollectibleIds, starredCollectibleIds } = useWalletSelector();
+ const selectedAvatar = avatarIds[ordinalsAddress];
+ const isNftSelectedAsAvatar =
+ selectedAvatar?.type === 'stacks' && selectedAvatar.nft.token_id === nftData?.token_id;
+
+ const handleSetAvatar = useCallback(() => {
+ if (ordinalsAddress && nftData?.token_id) {
+ dispatch(
+ setAccountAvatarAction({
+ address: ordinalsAddress,
+ avatar: { type: 'stacks', nft: nftData },
+ }),
+ );
+
+ const toastId = toast.custom(
+ {
+ if (selectedAvatar?.type) {
+ dispatch(
+ setAccountAvatarAction({ address: ordinalsAddress, avatar: selectedAvatar }),
+ );
+ } else {
+ dispatch(removeAccountAvatarAction({ address: ordinalsAddress }));
+ }
+
+ toast.remove(toastId);
+ toast.custom( handleClickUndoStarring(toastId),
+ }}
+ />,
+ { duration: LONG_TOAST_DURATION },
+ );
+ }
+ };
const nftAttributes = nftData?.nft_token_attributes?.length !== 0 && (
<>
@@ -90,9 +203,9 @@ function NftDetailScreen() {
);
const nftDetails = (
-
+
{collection?.collection_name && (
-
+
)}
{!isGalleryOpen && nftAttributes}
-
+
-
-
-
-
-
-
-
-
-
-
-
+
{t('COLLECTIBLE')}
@@ -182,11 +267,11 @@ function NftDetailScreen() {
{nftDetails}
-
{t('FT_CONTRACT_PREFIX')}
+{t('FT_CONTRACT_PREFIX')}
-
-
+
+
+ )}
+
)}
-
+
{getTruncatedAddress(recipient.address)}
+ ))}
+
+ {microstacksToStx((recipients[0] as StacksRecipient).amountMicrostacks).toString()} STX
+
+ {microstacksToStx(fee).toString()} STX
+
+
+ );
+ case Steps.ConfirmTransaction:
+ return (
+
+
+ );
+ case Steps.TransactionConfirmed:
+ return (
+ {getTruncatedAddress(recipient.address)}
- ))}
-
- {microstacksToStx((recipients[0] as StacksRecipient).amountMicrostacks).toString()} STX
-
- ) : (
-
- {ordinalUtxo?.value
- ? satsToBtc(new BigNumber(ordinalUtxo?.value)).toString()
- : satsToBtc((recipients[0] as Recipient).amountSats).toString()}{' '}
- BTC
-
- )}
- {microstacksToStx(fee).toString()} STX
- ) : (
- {satsToBtc(fee).toString()} BTC
- )}
-
-
- );
- case Steps.ExternalInputs:
- if (isTxRejected || isConnectFailed) {
- return (
-
-
- {t('EXTERNAL_INPUTS.TITLE')}
- {t('EXTERNAL_INPUTS.SUBTITLE')}
-
-
- );
- case Steps.ConfirmTransaction:
- if (type === 'ORDINALS') {
- if (isTxRejected || isConnectFailed) {
- return (
-
-
- );
- case Steps.ConfirmFees:
- if (type === 'ORDINALS') {
- if (isTxRejected || isConnectFailed) {
- return (
- {t('AUTHORIZE_DATA_COLLECTION.TITLE')}
-
+
+
+ {inscriptionsQuery.isInitialLoading ? (
+
+
+ {totalInscriptions === 1
+ ? t('TOTAL_ITEMS_ONE')
+ : t('TOTAL_ITEMS', { count: totalInscriptions })}
+
+
+ )}
+ {inscriptionListView}
+
+ )}
+
+
+
+ {hiddenInscriptionsQuery.isInitialLoading ? (
+
+ {totalHiddenInscriptions > 0 ? (
+
+ {totalHiddenInscriptions === 1
+ ? t('TOTAL_ITEMS_ONE')
+ : t('TOTAL_ITEMS', { count: totalHiddenInscriptions })}
+
+ ) : (
+
+ )}
+
+
+
-
-
-
-