diff --git a/src/app/screens/btcSelectAddressScreen/index.tsx b/src/app/screens/btcSelectAddressScreen/index.tsx
index 0294d1593..47fadec93 100644
--- a/src/app/screens/btcSelectAddressScreen/index.tsx
+++ b/src/app/screens/btcSelectAddressScreen/index.tsx
@@ -149,19 +149,6 @@ const AccountListRow = styled.div((props) => ({
},
}));
-const ConfirmButton = styled.button((props) => ({
- display: 'flex',
- flexDirection: 'row',
- justifyContent: 'center',
- alignItems: 'center',
- borderRadius: props.theme.radius(1),
- backgroundColor: props.theme.colors.action.classic,
- color: props.theme.colors.white['0'],
- width: '50%',
- height: 44,
- marginLeft: 6,
-}));
-
const TransparentButtonContainer = styled.div((props) => ({
marginLeft: props.theme.spacing(2),
marginRight: props.theme.spacing(2),
@@ -174,20 +161,6 @@ const OrdinalImage = styled.img({
marginRight: 8,
});
-const CancelButton = styled.button((props) => ({
- display: 'flex',
- flexDirection: 'row',
- justifyContent: 'center',
- alignItems: 'center',
- borderRadius: props.theme.radius(1),
- backgroundColor: props.theme.colors.background.elevation0,
- border: `1px solid ${props.theme.colors.background.elevation2}`,
- color: props.theme.colors.white['0'],
- width: '50%',
- height: 44,
- marginRight: 6,
-}));
-
function BtcSelectAddressScreen() {
const [loading, setLoading] = useState(false);
const [showAccountList, setShowAccountList] = useState(false);
@@ -258,8 +231,9 @@ function BtcSelectAddressScreen() {
navigate('/tx-status', {
state: {
txid: '',
- currency: 'STX',
- error: t('NETWORK_MISMATCH'),
+ currency: 'BTC',
+ errorTitle: t('NETWORK_MISMATCH_ERROR_TITLE'),
+ error: t('NETWORK_MISMATCH_ERROR_DESCRIPTION'),
browserTx: true,
},
});
diff --git a/src/app/screens/signPsbtRequest/index.tsx b/src/app/screens/signPsbtRequest/index.tsx
index 25375e785..3aa758681 100644
--- a/src/app/screens/signPsbtRequest/index.tsx
+++ b/src/app/screens/signPsbtRequest/index.tsx
@@ -1,3 +1,6 @@
+import {
+ useCallback, useEffect, useMemo, useState,
+} from 'react';
import ActionButton from '@components/button';
import useSignPsbtTx from '@hooks/useSignPsbtTx';
import useWalletSelector from '@hooks/useWalletSelector';
@@ -7,12 +10,12 @@ import IconBitcoin from '@assets/img/dashboard/bitcoin_icon.svg';
import styled from 'styled-components';
import { getBtcFiatEquivalent, satsToBtc } from '@secretkeylabs/xverse-core';
import BigNumber from 'bignumber.js';
-import { useEffect, useMemo, useState } from 'react';
import InputOutputComponent from '@components/confirmBtcTransactionComponent/inputOutputComponent';
import TransactionDetailComponent from '@components/transactionDetailComponent';
import AccountHeaderComponent from '@components/accountHeader';
import BtcRecipientComponent from '@components/confirmBtcTransactionComponent/btcRecipientComponent';
import { useNavigate } from 'react-router-dom';
+import InfoContainer from '@components/infoContainer';
const OuterContainer = styled.div`
display: flex;
@@ -50,37 +53,51 @@ const TransparentButtonContainer = styled.div((props) => ({
const ReviewTransactionText = styled.h1((props) => ({
...props.theme.headline_s,
color: props.theme.colors.white[0],
- marginBottom: props.theme.spacing(16),
+ marginBottom: props.theme.spacing(12),
textAlign: 'left',
}));
function SignPsbtRequest() {
- const {
- btcAddress, ordinalsAddress, selectedAccount, network, btcFiatRate,
- } = useWalletSelector();
+ const { btcAddress, ordinalsAddress, selectedAccount, network, btcFiatRate } =
+ useWalletSelector();
const navigate = useNavigate();
const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
const [expandInputOutputView, setExpandInputOutputView] = useState(false);
const { payload, confirmSignPsbt, cancelSignPsbt, getSigningAddresses } = useSignPsbtTx();
const [isSigning, setIsSigning] = useState(false);
- const parsedPsbt = useMemo(() => parsePsbt(
- selectedAccount!,
- payload.inputsToSign,
- payload.psbtBase64,
- ), [selectedAccount, payload.psbtBase64]);
+ const handlePsbtParsing = useCallback(() => {
+ try {
+ return parsePsbt(selectedAccount!, payload.inputsToSign, payload.psbtBase64);
+ } catch (err) {
+ return '';
+ }
+ }, [selectedAccount, payload.psbtBase64]);
+
+ const parsedPsbt = useMemo(() => handlePsbtParsing(), [handlePsbtParsing]);
const signingAddresses = useMemo(
() => getSigningAddresses(payload.inputsToSign),
- [payload.inputsToSign],
+ [payload.inputsToSign]
);
const checkIfMismatch = () => {
+ if (!parsedPsbt) {
+ navigate('/tx-status', {
+ state: {
+ txid: '',
+ currency: 'BTC',
+ errorTitle: t('PSBT_CANT_PARSE_ERROR_TITLE'),
+ error: t('PSBT_CANT_PARSE_ERROR_DESCRIPTION'),
+ browserTx: true,
+ },
+ });
+ }
if (payload.network.type !== network.type) {
navigate('/tx-status', {
state: {
txid: '',
- currency: 'STX',
+ currency: 'BTC',
error: t('NETWORK_MISMATCH'),
browserTx: true,
},
@@ -129,6 +146,7 @@ function SignPsbtRequest() {
state: {
txid: '',
currency: 'BTC',
+ errorTitle: !payload.broadcast ? t('PSBT_CANT_SIGN_ERROR_TITLE') : '',
error: err.message,
browserTx: true,
},
@@ -152,6 +170,9 @@ function SignPsbtRequest() {
{t('REVIEW_TRNSACTION')}
+ {!payload.broadcast ? (
+
+ ) : null}
-
+ {payload.broadcast ? (
+
+ ) : null}
diff --git a/src/app/screens/transactionStatus/index.tsx b/src/app/screens/transactionStatus/index.tsx
index 429971521..1ad740950 100644
--- a/src/app/screens/transactionStatus/index.tsx
+++ b/src/app/screens/transactionStatus/index.tsx
@@ -11,6 +11,8 @@ import useWalletSelector from '@hooks/useWalletSelector';
const TxStatusContainer = styled.div({
background: 'rgba(25, 25, 48, 0.5)',
+ display: 'flex',
+ flexDirection: 'column',
height: '100%',
});
@@ -39,6 +41,9 @@ const TransactionIDContainer = styled.div((props) => ({
}));
const ButtonContainer = styled.div((props) => ({
+ flex: 1,
+ display: 'flex',
+ alignItems: 'flex-end',
marginTop: props.theme.spacing(15),
marginBottom: props.theme.spacing(32),
marginLeft: props.theme.spacing(8),
@@ -121,7 +126,7 @@ function TransactionStatus() {
const location = useLocation();
const { network } = useWalletSelector();
const {
- txid, currency, error, sponsored, browserTx, isOrdinal, isNft,
+ txid, currency, error, sponsored, browserTx, isOrdinal, isNft, errorTitle,
} = location.state;
const renderTransactionSuccessStatus = (
@@ -135,7 +140,7 @@ function TransactionStatus() {
const renderTransactionFailureStatus = (
- {t('FAILED')}
+ {errorTitle || t('FAILED')}
{error}
);
diff --git a/src/locales/en.json b/src/locales/en.json
index 31d6ce806..937079d05 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -105,7 +105,11 @@
"RECIPIENT": "Recipient",
"ASSET": "Asset",
"NETWORK_MISMATCH": "There’s a mismatch between your active network and the network you’re logged with.",
- "ADDRESS_MISMATCH": "There’s a mismatch between your signing address and the address you’re logged with."
+ "ADDRESS_MISMATCH": "There’s a mismatch between your signing address and the address you’re logged with.",
+ "PSBT_NO_BROADCAST_DISCLAIMER": "This transaction will not be broadcasted from your wallet. It may be broadcasted later by a third party.",
+ "PSBT_CANT_PARSE_ERROR_TITLE": "Transaction Error",
+ "PSBT_CANT_PARSE_ERROR_DESCRIPTION": "The requested transaction is invalid and cannot be processed please contact the developer of the requesting app for support",
+ "PSBT_CANT_SIGN_ERROR_TITLE": "Failed to sign transaction"
},
"TX_ERRORS": {
"INSUFFICIENT_BALANCE": "Insufficient balance",
@@ -463,6 +467,7 @@
"CANCEL_BUTTON": "Dismiss",
"BITCOIN_ADDRESS": "Bitcoin address",
"ORDINAL_ADDRESS": "Ordinal address",
- "NETWORK_MISMATCH": "There’s a mismatch between your active network and the network you’re logged with."
+ "NETWORK_MISMATCH_ERROR_TITLE": "Mismatched Network",
+ "NETWORK_MISMATCH_ERROR_DESCRIPTION": "The app is requesting your wallet address for a different network. You may have to switch your active network in wallet settings."
}
}