From 6742a63f8b0ec60651563c39c2a04936871cbf53 Mon Sep 17 00:00:00 2001 From: Mahmoud Date: Mon, 20 Mar 2023 14:44:15 +0200 Subject: [PATCH 1/3] show disclaimer psbt sign no broadcast --- src/app/screens/signPsbtRequest/index.tsx | 22 +++++++++++++++------- src/locales/en.json | 3 ++- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/app/screens/signPsbtRequest/index.tsx b/src/app/screens/signPsbtRequest/index.tsx index 25375e785..0fbdc9d01 100644 --- a/src/app/screens/signPsbtRequest/index.tsx +++ b/src/app/screens/signPsbtRequest/index.tsx @@ -13,6 +13,7 @@ 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,7 +51,7 @@ 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', })); @@ -61,7 +62,9 @@ function SignPsbtRequest() { const navigate = useNavigate(); const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' }); const [expandInputOutputView, setExpandInputOutputView] = useState(false); - const { payload, confirmSignPsbt, cancelSignPsbt, getSigningAddresses } = useSignPsbtTx(); + const { + payload, confirmSignPsbt, cancelSignPsbt, getSigningAddresses, + } = useSignPsbtTx(); const [isSigning, setIsSigning] = useState(false); const parsedPsbt = useMemo(() => parsePsbt( @@ -152,6 +155,9 @@ function SignPsbtRequest() { {t('REVIEW_TRNSACTION')} + {!payload.broadcast ? ( + + ) : null} - + {payload.broadcast ? ( + + ) : null} diff --git a/src/locales/en.json b/src/locales/en.json index 31d6ce806..d6f0dfb65 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -105,7 +105,8 @@ "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." }, "TX_ERRORS": { "INSUFFICIENT_BALANCE": "Insufficient balance", From b90c8a918b488ba1549de46b403d8996ed85724b Mon Sep 17 00:00:00 2001 From: Mahmoud Date: Mon, 20 Mar 2023 17:19:53 +0200 Subject: [PATCH 2/3] invalid psbt and network error handling --- .../screens/btcSelectAddressScreen/index.tsx | 32 ++------------ src/app/screens/signPsbtRequest/index.tsx | 43 +++++++++++++------ src/app/screens/transactionStatus/index.tsx | 9 +++- src/locales/en.json | 8 +++- 4 files changed, 45 insertions(+), 47 deletions(-) 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 0fbdc9d01..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,7 +10,6 @@ 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'; @@ -56,34 +58,46 @@ const ReviewTransactionText = styled.h1((props) => ({ })); 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 { 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, }, @@ -132,6 +146,7 @@ function SignPsbtRequest() { state: { txid: '', currency: 'BTC', + errorTitle: !payload.broadcast ? t('PSBT_CANT_SIGN_ERROR_TITLE') : '', error: err.message, browserTx: true, }, 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 d6f0dfb65..35aa1d18d 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -106,7 +106,10 @@ "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.", - "PSBT_NO_BROADCAST_DISCLAIMER": "This transaction will not be broadcasted from your wallet." + "PSBT_NO_BROADCAST_DISCLAIMER": "This transaction will not be broadcasted from your wallet.", + "PSBT_CANT_PARSE_ERROR_TITLE": "Transaction Error", + "PSBT_CANT_PARSE_ERROR_DESCRIPTION": "The PSBT is invalid and cannot be processed please contact the developer of the Dapp for support", + "PSBT_CANT_SIGN_ERROR_TITLE": "Failed to sign transaction" }, "TX_ERRORS": { "INSUFFICIENT_BALANCE": "Insufficient balance", @@ -464,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." } } From b31a90d2807e39b8893e64cd48bb8e03eb1fa598 Mon Sep 17 00:00:00 2001 From: Yukan Date: Tue, 21 Mar 2023 01:00:22 +0800 Subject: [PATCH 3/3] copy changes --- src/locales/en.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/locales/en.json b/src/locales/en.json index 35aa1d18d..937079d05 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -106,9 +106,9 @@ "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.", - "PSBT_NO_BROADCAST_DISCLAIMER": "This transaction will not be broadcasted from your wallet.", + "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 PSBT is invalid and cannot be processed please contact the developer of the Dapp for support", + "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": {