From d0288206530fe2c9f409179042ec5468c300daa7 Mon Sep 17 00:00:00 2001
From: Imamah-Zafar <88320460+Imamah-Zafar@users.noreply.github.com>
Date: Tue, 21 Mar 2023 11:25:46 +0500
Subject: [PATCH 1/2] add restore fund ui in btc confirmation screen
---
.../btcRecipientComponent.tsx | 40 ++++++++++++++++---
.../confirmBtcTransactionComponent/index.tsx | 3 ++
.../screens/confrimBtcTransaction/index.tsx | 1 +
src/assets/img/transactions/ArrowDown.svg | 4 ++
src/assets/img/transactions/wallet.svg | 4 ++
src/locales/en.json | 3 +-
6 files changed, 48 insertions(+), 7 deletions(-)
create mode 100644 src/assets/img/transactions/ArrowDown.svg
create mode 100644 src/assets/img/transactions/wallet.svg
diff --git a/src/app/components/confirmBtcTransactionComponent/btcRecipientComponent.tsx b/src/app/components/confirmBtcTransactionComponent/btcRecipientComponent.tsx
index 3ef0c39f3..1af73143f 100644
--- a/src/app/components/confirmBtcTransactionComponent/btcRecipientComponent.tsx
+++ b/src/app/components/confirmBtcTransactionComponent/btcRecipientComponent.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 { StoreState } from '@stores/index';
import BigNumber from 'bignumber.js';
@@ -42,6 +44,14 @@ 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],
@@ -66,6 +76,11 @@ const ColumnContainer = styled.div({
alignItems: 'flex-end',
});
+const MultipleAddressContainer = styled.div({
+ display: 'flex',
+ flexDirection: 'column',
+});
+
interface Props {
recipientIndex?: number;
address?: string;
@@ -75,6 +90,7 @@ interface Props {
icon: string;
title: string;
heading?: string;
+ showSenderAddress?: string;
}
function BtcRecipientComponent({
recipientIndex,
@@ -85,9 +101,10 @@ function BtcRecipientComponent({
icon,
title,
heading,
+ showSenderAddress,
}: Props) {
const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
- const { fiatCurrency } = useSelector((state: StoreState) => state.walletState);
+ const { fiatCurrency, ordinalsAddress } = useSelector((state: StoreState) => state.walletState);
const getFiatAmountString = (fiatAmount: BigNumber) => {
if (fiatAmount) {
@@ -110,10 +127,13 @@ function BtcRecipientComponent({
return (
- {recipientIndex && totalRecipient && (
- {`${t(
- 'RECIPIENT'
- )} ${recipientIndex}/${totalRecipient}`}
+ {recipientIndex && totalRecipient && totalRecipient !== 1 && (
+
+ {`${t(
+ 'RECIPIENT',
+ )} ${recipientIndex}/${totalRecipient}`}
+
+
)}
{heading && {heading}}
@@ -126,7 +146,15 @@ function BtcRecipientComponent({
{address && (
-
+ {showSenderAddress
+ ? (
+
+
+
+
+
+ )
+ : }
)}
diff --git a/src/app/components/confirmBtcTransactionComponent/index.tsx b/src/app/components/confirmBtcTransactionComponent/index.tsx
index 607e8d5e8..b60e4bcc5 100644
--- a/src/app/components/confirmBtcTransactionComponent/index.tsx
+++ b/src/app/components/confirmBtcTransactionComponent/index.tsx
@@ -110,6 +110,7 @@ interface Props {
recipients: Recipient[];
children?: ReactNode;
assetDetail?: string;
+ isRestoreFundFlow?: string;
onConfirmClick: (signedTxHex: string) => void;
onCancelClick: () => void;
onBackButtonClick: () => void;
@@ -123,6 +124,7 @@ function ConfirmBtcTransactionComponent({
recipients,
children,
assetDetail,
+ isRestoreFundFlow,
onConfirmClick,
onCancelClick,
onBackButtonClick,
@@ -261,6 +263,7 @@ function ConfirmBtcTransactionComponent({
value={satsToBtc(recipient?.amountSats).toString()}
totalRecipient={recipients?.length}
icon={IconBitcoin}
+ showSenderAddress={isRestoreFundFlow}
title={t('CONFIRM_TRANSACTION.AMOUNT')}
subValue={getBtcFiatEquivalent(
recipient?.amountSats,
diff --git a/src/app/screens/confrimBtcTransaction/index.tsx b/src/app/screens/confrimBtcTransaction/index.tsx
index bb2e47b91..cb7e05db6 100644
--- a/src/app/screens/confrimBtcTransaction/index.tsx
+++ b/src/app/screens/confrimBtcTransaction/index.tsx
@@ -132,6 +132,7 @@ function ConfirmBtcTransaction() {
recipients={recipient}
loadingBroadcastedTx={isLoading}
signedTxHex={signedTxHex}
+ isRestoreFundFlow={isRestoreFundFlow}
onConfirmClick={handleOnConfirmClick}
onCancelClick={goBackToScreen}
onBackButtonClick={goBackToScreen}
diff --git a/src/assets/img/transactions/ArrowDown.svg b/src/assets/img/transactions/ArrowDown.svg
new file mode 100644
index 000000000..35a86bdeb
--- /dev/null
+++ b/src/assets/img/transactions/ArrowDown.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/img/transactions/wallet.svg b/src/assets/img/transactions/wallet.svg
new file mode 100644
index 000000000..c97859d45
--- /dev/null
+++ b/src/assets/img/transactions/wallet.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/locales/en.json b/src/locales/en.json
index 61e2a3edd..3df2d5759 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -109,7 +109,8 @@
"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"
+ "PSBT_CANT_SIGN_ERROR_TITLE": "Failed to sign transaction",
+ "To": "To"
},
"TX_ERRORS": {
"INSUFFICIENT_BALANCE": "Insufficient balance",
From 46669e6b5bbf9502b634a8ddfe762bafaa8a41d1 Mon Sep 17 00:00:00 2001
From: Imamah-Zafar
Date: Thu, 27 Apr 2023 00:51:57 +0500
Subject: [PATCH 2/2] fix ui & navigation
---
.../btcRecipientComponent.tsx | 7 +++--
.../confirmBtcTransactionComponent/index.tsx | 31 ++++++++++++++++++-
src/app/screens/transactionStatus/index.tsx | 2 +-
3 files changed, 36 insertions(+), 4 deletions(-)
diff --git a/src/app/components/confirmBtcTransactionComponent/btcRecipientComponent.tsx b/src/app/components/confirmBtcTransactionComponent/btcRecipientComponent.tsx
index 79455d0f1..3b7311b72 100644
--- a/src/app/components/confirmBtcTransactionComponent/btcRecipientComponent.tsx
+++ b/src/app/components/confirmBtcTransactionComponent/btcRecipientComponent.tsx
@@ -30,11 +30,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) => ({
@@ -55,6 +55,8 @@ const DownArrowIcon = styled.img((props) => ({
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) => ({
@@ -74,6 +76,7 @@ const ColumnContainer = styled.div({
flex: 1,
justifyContent: 'flex-end',
alignItems: 'flex-end',
+ paddingTop: 5,
});
const MultipleAddressContainer = styled.div({
diff --git a/src/app/components/confirmBtcTransactionComponent/index.tsx b/src/app/components/confirmBtcTransactionComponent/index.tsx
index 3bfe95c90..251748306 100644
--- a/src/app/components/confirmBtcTransactionComponent/index.tsx
+++ b/src/app/components/confirmBtcTransactionComponent/index.tsx
@@ -25,6 +25,7 @@ import {
ResponseError,
satsToBtc,
} from '@secretkeylabs/xverse-core';
+import { NumericFormat } from 'react-number-format';
import TransactionDetailComponent from '../transactionDetailComponent';
import BtcRecipientComponent from './btcRecipientComponent';
@@ -144,6 +145,7 @@ function ConfirmBtcTransactionComponent({
const [currentFee, setCurrentFee] = useState(fee);
const [error, setError] = useState('');
const [signedTx, setSignedTx] = useState(signedTxHex);
+ const [total, setTotal] = useState(new BigNumber(0));
const {
isLoading,
data,
@@ -216,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);
@@ -247,6 +262,15 @@ function ConfirmBtcTransactionComponent({
onConfirmClick(signedTx);
};
+ const getAmountString = (amount: BigNumber, currency: string) => (
+
+ );
+
useEffect(() => {
if (recipients && txError) {
setOpenTransactionSettingModal(false);
@@ -320,9 +344,14 @@ function ConfirmBtcTransactionComponent({
+