Merge pull request #320 from secretkeylabs/enhancement/psbt-sign-not-…

…broadcasted show disclaimer psbt sign no broadcast
secretkeylabs · Mar 20, 2023 · 7825e88 · 7825e88
2 parents 98892e4 + b31a90d
commit 7825e88
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 50 deletions.
diff --git 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
@@ -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() {
       <OuterContainer>
         <Container>
           <ReviewTransactionText>{t('REVIEW_TRNSACTION')}</ReviewTransactionText>
+          {!payload.broadcast ? (
+            <InfoContainer bodyText={t('PSBT_NO_BROADCAST_DISCLAIMER')} />
+          ) : null}
           <BtcRecipientComponent
             value={`${satsToBtc(new BigNumber(parsedPsbt?.netAmount))
               .toString()
@@ -169,11 +190,13 @@ function SignPsbtRequest() {
           />
 
           <TransactionDetailComponent title={t('NETWORK')} value={network.type} />
-          <TransactionDetailComponent
-            title={t('FEES')}
-            value={`${parsedPsbt?.fees.toString()} ${t('SATS')}`}
-            subValue={getBtcFiatEquivalent(new BigNumber(parsedPsbt?.fees), btcFiatRate)}
-          />
+          {payload.broadcast ? (
+            <TransactionDetailComponent
+              title={t('FEES')}
+              value={`${parsedPsbt?.fees.toString()} ${t('SATS')}`}
+              subValue={getBtcFiatEquivalent(new BigNumber(parsedPsbt?.fees), btcFiatRate)}
+            />
+          ) : null}
         </Container>
       </OuterContainer>
       <ButtonContainer>

diff --git 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 = (
     <Container>
       <Image src={Failure} />
-      <HeadingText>{t('FAILED')}</HeadingText>
+      <HeadingText>{errorTitle || t('FAILED')}</HeadingText>
       <BodyText>{error}</BodyText>
     </Container>
   );

diff --git 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",
@@ -462,6 +466,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."
   }
 }