Merge branch 'develop' of https://github.com/secretkeylabs/xverse-web…

…-extension into imamahzafar/feat/stx-tx-screen

src/app/components/confirmBtcTransactionComponent/index.tsx

@@ -20,11 +20,13 @@ import {
 import {
   BtcUtxoDataResponse,
   ErrorCodes,
+  getBtcFiatEquivalent,
   ResponseError,
   satsToBtc,
 } from '@secretkeylabs/xverse-core';
 import RecipientComponent from '@components/recipientComponent';
 import TransferFeeView from '@components/transferFeeView';
+import { NumericFormat } from 'react-number-format';
 import TransactionDetailComponent from '../transactionDetailComponent';
 
 const OuterContainer = styled.div`
@@ -143,6 +145,7 @@ function ConfirmBtcTransactionComponent({
   const [currentFee, setCurrentFee] = useState(fee);
   const [error, setError] = useState('');
   const [signedTx, setSignedTx] = useState(signedTxHex);
+  const [total, setTotal] = useState<BigNumber>(new BigNumber(0));
   const {
     isLoading,
     data,
@@ -215,6 +218,19 @@ function ConfirmBtcTransactionComponent({
     }
   }, [ordinalData]);
 
+  useEffect(() => {
+    const totalAmount: BigNumber = new BigNumber(0);
+    let sum: BigNumber = new BigNumber(0);
+    if (recipients) {
+      recipients.map((recipient) => {
+        sum = totalAmount.plus(recipient.amountSats);
+        return sum;
+      });
+      sum = sum?.plus(currentFee);
+    }
+    setTotal(sum);
+  }, [recipients]);
+
   useEffect(() => {
     if (signedNonOrdinalBtcSend) {
       setCurrentFee(signedNonOrdinalBtcSend.fee);
@@ -246,6 +262,15 @@ function ConfirmBtcTransactionComponent({
     onConfirmClick(signedTx);
   };
 
+  const getAmountString = (amount: BigNumber, currency: string) => (
+    <NumericFormat
+      value={amount.toString()}
+      displayType="text"
+      thousandSeparator
+      suffix={` ${currency}`}
+    />
+  );
+
   useEffect(() => {
     if (recipients && txError) {
       setOpenTransactionSettingModal(false);
@@ -307,12 +332,18 @@ function ConfirmBtcTransactionComponent({
               totalRecipient={recipients?.length}
               currencyType="BTC"
               title={t('CONFIRM_TRANSACTION.AMOUNT')}
+              showSenderAddress={isRestoreFundFlow}
             />
           ))
         )}
 
         <TransactionDetailComponent title={t('CONFIRM_TRANSACTION.NETWORK')} value={network.type} />
         <TransferFeeView fee={currentFee} currency={t('SATS')} />
+        <TransactionDetailComponent
+          title={t('CONFIRM_TRANSACTION.TOTAL')}
+          value={getAmountString(satsToBtc(total), t('BTC'))}
+          subValue={getBtcFiatEquivalent(total, btcFiatRate)}
+        />
         <Button onClick={onAdvancedSettingClick}>
           <>
             <ButtonImage src={SettingIcon} />

src/app/components/recipientComponent/index.tsx

@@ -1,5 +1,7 @@
 import TransferDetailView from '@components/transferDetailView';
 import OutputIcon from '@assets/img/transactions/output.svg';
+import ArrowIcon from '@assets/img/transactions/ArrowDown.svg';
+import WalletIcon from '@assets/img/transactions/wallet.svg';
 import { currencySymbolMap } from '@secretkeylabs/xverse-core/types/currency';
 import BigNumber from 'bignumber.js';
 import { useTranslation } from 'react-i18next';
@@ -32,11 +34,11 @@ const RowContainer = styled.div({
   display: 'flex',
   flexDirection: 'row',
   width: '100%',
-  alignItems: 'center',
+  alignItems: 'flex-start',
 });
 
 const AddressContainer = styled.div({
-  marginTop: 22,
+  marginTop: 12,
 });
 
 const Icon = styled.img((props) => ({
@@ -46,9 +48,19 @@ const Icon = styled.img((props) => ({
   borderRadius: 30,
 }));
 
+const DownArrowIcon = styled.img((props) => ({
+  width: 16,
+  height: 16,
+  marginTop: props.theme.spacing(4),
+  marginLeft: props.theme.spacing(4),
+  marginBottom: props.theme.spacing(4),
+}));
+
 const TitleText = styled.h1((props) => ({
   ...props.theme.body_medium_m,
   color: props.theme.colors.white[200],
+  textAlign: 'center',
+  marginTop: 5,
 }));
 
 const ValueText = styled.h1((props) => ({
@@ -68,6 +80,12 @@ const ColumnContainer = styled.div({
   flex: 1,
   justifyContent: 'flex-end',
   alignItems: 'flex-end',
+  paddingTop: 5,
+});
+
+const MultipleAddressContainer = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
 });
 
 const TokenContainer = styled.div({
@@ -84,15 +102,16 @@ interface Props {
   icon?: string;
   fungibleToken?: FungibleToken;
   heading?: string;
+  showSenderAddress?: boolean;
 
 }
 function RecipientComponent({
-  recipientIndex, address, value, totalRecipient, title, fungibleToken, icon, currencyType, heading,
+  recipientIndex, address, value, totalRecipient, title, fungibleToken, icon, currencyType, heading, showSenderAddress,
 } : Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
   const [fiatAmount, setFiatAmount] = useState<string | undefined>('0');
   const {
-    stxBtcRate, btcFiatRate, fiatCurrency,
+    stxBtcRate, btcFiatRate, fiatCurrency, ordinalsAddress
   } = useWalletSelector();
 
   useEffect(() => {
@@ -135,10 +154,13 @@ function RecipientComponent({
 
   return (
     <Container>
-      {recipientIndex && totalRecipient && (
-        <RecipientTitleText>{`${t(
-          'RECIPIENT'
-        )} ${recipientIndex}/${totalRecipient}`}</RecipientTitleText>
+      {recipientIndex && totalRecipient && totalRecipient !== 1 && (
+        <RecipientTitleText>
+          {`${t(
+            'RECIPIENT',
+          )} ${recipientIndex}/${totalRecipient}`}
+
+        </RecipientTitleText>
       )}
       {heading && <RecipientTitleText>{heading}</RecipientTitleText>}
       <RowContainer>
@@ -173,7 +195,15 @@ function RecipientComponent({
       </RowContainer>
       {address && (
         <AddressContainer>
-          <TransferDetailView icon={OutputIcon} title={t('RECIPIENT')} address={address} />
+          {showSenderAddress
+            ? (
+              <MultipleAddressContainer>
+                <TransferDetailView icon={WalletIcon} title={t('FROM')} address={ordinalsAddress} />
+                <DownArrowIcon src={ArrowIcon} />
+                <TransferDetailView icon={WalletIcon} title={t('To')} address={address} />
+              </MultipleAddressContainer>
+            )
+            : <TransferDetailView icon={OutputIcon} title={t('RECIPIENT')} address={address} />}
         </AddressContainer>
       )}
     </Container>

src/app/screens/confirmBtcTransaction/index.tsx

@@ -131,6 +131,7 @@ function ConfirmBtcTransaction() {
         recipients={recipient}
         loadingBroadcastedTx={isLoading}
         signedTxHex={signedTxHex}
+        isRestoreFundFlow={isRestoreFundFlow}
         onConfirmClick={handleOnConfirmClick}
         onCancelClick={goBackToScreen}
         onBackButtonClick={goBackToScreen}

src/app/screens/transactionStatus/index.tsx

@@ -164,7 +164,7 @@ function TransactionStatus() {
     if (browserTx) window.close();
     else if (isOrdinal) navigate(-4);
     else if (isNft) navigate(-3);
-    else navigate(-2);
+    else navigate(-3);
   };
 
   const renderLink = (

src/locales/en.json

@@ -111,6 +111,7 @@
     "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",
+    "To": "To",
     "YOU_WILL_TRANSFER": "You will transfer",
     "YOU_WILL_RECEIVE": "You will receive"
   },