Merge pull request #296 from secretkeylabs/imamahzafar/feat/stx-tx-sc…

…reen Update STX confirmation screen UI
secretkeylabs · Apr 27, 2023 · ad4d0fd · ad4d0fd
2 parents ca40461 + 93a8375
commit ad4d0fd
Show file tree

Hide file tree

Showing 30 changed files with 7,135 additions and 3,204 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/components/confirmBtcTransactionComponent/index.tsx b/src/app/components/confirmBtcTransactionComponent/index.tsx
@@ -8,7 +8,6 @@ import AssetIcon from '@assets/img/transactions/Assets.svg';
 import SettingIcon from '@assets/img/dashboard/faders_horizontal.svg';
 import TransactionSettingAlert from '@components/transactionSetting';
 import { useSelector } from 'react-redux';
-import IconBitcoin from '@assets/img/dashboard/bitcoin_icon.svg';
 import { StoreState } from '@stores/index';
 import { signBtcTransaction } from '@secretkeylabs/xverse-core/transactions';
 import { useMutation } from '@tanstack/react-query';
@@ -25,9 +24,10 @@ import {
   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';
-import BtcRecipientComponent from './btcRecipientComponent';
 
 const OuterContainer = styled.div`
   display: flex;
@@ -305,75 +305,66 @@ function ConfirmBtcTransactionComponent({
   }, [errorSigningNonOrdial]);
 
   return (
-    <>
-      <OuterContainer>
-        {!isGalleryOpen && (
+    <OuterContainer>
+      {!isGalleryOpen && (
         <TopRow title={t('CONFIRM_TRANSACTION.SEND')} onClick={onBackButtonClick} />
-        )}
-        <Container>
-          {children}
-          <ReviewTransactionText isOridnalTx={!!ordinalTxUtxo}>
-            {t('CONFIRM_TRANSACTION.REVIEW_TRNSACTION')}
-          </ReviewTransactionText>
+      )}
+      <Container>
+        {children}
+        <ReviewTransactionText isOridnalTx={!!ordinalTxUtxo}>
+          {t('CONFIRM_TRANSACTION.REVIEW_TRNSACTION')}
+        </ReviewTransactionText>
 
-          {ordinalTxUtxo ? (
-            <BtcRecipientComponent
-              address={recipients[0]?.address}
-              value={assetDetail!}
-              icon={AssetIcon}
-              title={t('CONFIRM_TRANSACTION.ASSET')}
+        {ordinalTxUtxo ? (
+          <RecipientComponent
+            address={recipients[0]?.address}
+            value={assetDetail!}
+            icon={AssetIcon}
+            currencyType="Ordinal"
+            title={t('CONFIRM_TRANSACTION.ASSET')}
+          />
+        ) : (
+          recipients?.map((recipient, index) => (
+            <RecipientComponent
+              recipientIndex={index + 1}
+              address={recipient?.address}
+              value={satsToBtc(recipient?.amountSats).toString()}
+              totalRecipient={recipients?.length}
+              currencyType="BTC"
+              title={t('CONFIRM_TRANSACTION.AMOUNT')}
+              showSenderAddress={isRestoreFundFlow}
             />
-          ) : (
-            recipients?.map((recipient, index) => (
-              <BtcRecipientComponent
-                recipientIndex={index + 1}
-                address={recipient?.address}
-                value={satsToBtc(recipient?.amountSats).toString()}
-                totalRecipient={recipients?.length}
-                icon={IconBitcoin}
-                showSenderAddress={isRestoreFundFlow}
-                title={t('CONFIRM_TRANSACTION.AMOUNT')}
-                subValue={getBtcFiatEquivalent(
-                  recipient?.amountSats,
-                  btcFiatRate,
-                )}
-              />
-            ))
-          )}
+          ))
+        )}
 
-          <TransactionDetailComponent title={t('CONFIRM_TRANSACTION.NETWORK')} value={network.type} />
-          <TransactionDetailComponent
-            title={t('CONFIRM_TRANSACTION.FEES')}
-            value={getAmountString(currentFee, t('SATS'))}
-            subValue={getBtcFiatEquivalent(new BigNumber(currentFee), btcFiatRate)}
-          />
-          <TransactionDetailComponent
-            title={t('CONFIRM_TRANSACTION.TOTAL')}
-            value={getAmountString(satsToBtc(total), t('BTC'))}
-            subValue={getBtcFiatEquivalent(total, btcFiatRate)}
-          />
-          <Button onClick={onAdvancedSettingClick}>
-            <>
-              <ButtonImage src={SettingIcon} />
-              <ButtonText>{t('CONFIRM_TRANSACTION.EDIT_FEES')}</ButtonText>
-            </>
-          </Button>
-          <TransactionSettingAlert
-            visible={openTransactionSettingModal}
-            fee={currentFee.toString()}
-            type={ordinalTxUtxo ? 'Ordinals' : 'BTC'}
-            btcRecipients={recipients}
-            onApplyClick={onApplyClick}
-            onCrossClick={closeTransactionSettingAlert}
-            nonOrdinalUtxos={nonOrdinalUtxos}
-            loading={loading}
-            isRestoreFlow={isRestoreFundFlow}
-          />
-        </Container>
-        <ErrorContainer>
-          <ErrorText>{error}</ErrorText>
-        </ErrorContainer>
-      </OuterContainer>
+        <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} />
+            <ButtonText>{t('CONFIRM_TRANSACTION.EDIT_FEES')}</ButtonText>
+          </>
+        </Button>
+        <TransactionSettingAlert
+          visible={openTransactionSettingModal}
+          fee={currentFee.toString()}
+          type={ordinalTxUtxo ? 'Ordinals' : 'BTC'}
+          btcRecipients={recipients}
+          onApplyClick={onApplyClick}
+          onCrossClick={closeTransactionSettingAlert}
+          nonOrdinalUtxos={nonOrdinalUtxos}
+          loading={loading}
+          isRestoreFlow={isRestoreFundFlow}
+        />
+      </Container>
+      <ErrorContainer>
+        <ErrorText>{error}</ErrorText>
+      </ErrorContainer>
       <ButtonContainer>
         <TransparentButtonContainer>
           <ActionButton
@@ -396,7 +387,7 @@ function ConfirmBtcTransactionComponent({
           onPress={handleOnConfirmClick}
         />
       </ButtonContainer>
-    </>
+    </OuterContainer>
   );
 }
 

diff --git a/src/app/components/confirmBtcTransactionComponent/inputOutputComponent.tsx b/src/app/components/confirmBtcTransactionComponent/inputOutputComponent.tsx
@@ -115,7 +115,7 @@ function InputOutputComponent({
     from: { opacity: 0, height: 0 },
     to: {
       opacity: isExpanded ? 1 : 0,
-      height: isExpanded ? 250 : 0,
+      height: isExpanded ? 'auto' : 0,
     },
   });
 

diff --git a/src/app/components/confirmStxTransactionComponent/index.tsx b/src/app/components/confirmStxTransactionComponent/index.tsx
@@ -1,8 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
-import {
-  ReactNode, useEffect, useState,
-} from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import BigNumber from 'bignumber.js';
 import ActionButton from '@components/button';
 import SettingIcon from '@assets/img/dashboard/faders_horizontal.svg';
@@ -11,7 +9,11 @@ import { microstacksToStx, stxToMicrostacks } from '@secretkeylabs/xverse-core/c
 import { StacksTransaction } from '@secretkeylabs/xverse-core/types';
 import TransferFeeView from '@components/transferFeeView';
 import {
-  setFee, setNonce, getNonce, signMultiStxTransactions, signTransaction,
+  setFee,
+  setNonce,
+  getNonce,
+  signMultiStxTransactions,
+  signTransaction,
 } from '@secretkeylabs/xverse-core';
 import useWalletSelector from '@hooks/useWalletSelector';
 import useNetworkSelector from '@hooks/useNetwork';
@@ -32,7 +34,7 @@ const Container = styled.div`
 const ButtonContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'row',
-  marginBottom: props.theme.spacing(20),
+  marginBottom: props.theme.spacing(12),
   marginTop: props.theme.spacing(12),
   marginLeft: props.theme.spacing(8),
   marginRight: props.theme.spacing(8),
@@ -60,10 +62,6 @@ const ButtonText = styled.div((props) => ({
   textAlign: 'center',
 }));
 
-const TransferFeeContainer = styled.div((props) => ({
-  marginBottom: props.theme.spacing(12),
-}));
-
 const ButtonImage = styled.img((props) => ({
   marginRight: props.theme.spacing(3),
   alignSelf: 'center',
@@ -75,29 +73,50 @@ const SponsoredInfoText = styled.h1((props) => ({
   color: props.theme.colors.white['400'],
 }));
 
+const ReviewTransactionText = styled.h1((props) => ({
+  ...props.theme.headline_s,
+  color: props.theme.colors.white[0],
+  textAlign: 'left',
+}));
+
+const RequestedByText = styled.h1((props) => ({
+  ...props.theme.body_medium_m,
+  color: props.theme.colors.white[400],
+  marginTop: props.theme.spacing(4),
+  textAlign: 'left',
+}));
+
+const TitleContainer = styled.div((props) => ({
+  marginBottom: props.theme.spacing(16),
+}));
+
 interface Props {
   initialStxTransactions: StacksTransaction[];
   loading: boolean;
   onCancelClick: () => void;
   onConfirmClick: (transactions: StacksTransaction[]) => void;
   children: ReactNode;
   isSponsored?: boolean;
+  isAsset?: boolean;
+  title?: string;
+  subTitle?: string;
+
 }
 
 function ConfirmStxTransationComponent({
   initialStxTransactions,
   loading,
   isSponsored,
   children,
+  isAsset,
+  title,
+  subTitle,
   onConfirmClick,
   onCancelClick,
 }: Props) {
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
   const selectedNetwork = useNetworkSelector();
-  const {
-    selectedAccount,
-    seedPhrase,
-  } = useWalletSelector();
+  const { selectedAccount, seedPhrase } = useWalletSelector();
   const [openTransactionSettingModal, setOpenTransactionSettingModal] = useState(false);
   const [buttonLoading, setButtonLoading] = useState(loading);
 
@@ -160,21 +179,28 @@ function ConfirmStxTransationComponent({
   return (
     <>
       <Container>
+        <TitleContainer>
+          {!isAsset && <ReviewTransactionText>{title ?? t('REVIEW_TRNSACTION')}</ReviewTransactionText>}
+          {subTitle && <RequestedByText>{subTitle}</RequestedByText>}
+        </TitleContainer>
         {children}
-        <TransferFeeContainer>
+        <TransferFeeView fee={microstacksToStx(getFee())} currency="STX" />
+        {initialStxTransactions[0]?.payload?.amount && (
           <TransferFeeView
-            fee={microstacksToStx(getFee())}
+            fee={microstacksToStx(
+              getFee().plus(new BigNumber(initialStxTransactions[0]?.payload.amount?.toString(10))),
+            )}
             currency="STX"
+            title={t('TOTAL')}
           />
-        </TransferFeeContainer>
-
+        )}
         {!isSponsored && (
-        <Button onClick={onAdvancedSettingClick}>
-          <>
-            <ButtonImage src={SettingIcon} />
-            <ButtonText>{t('ADVANCED_SETTING')}</ButtonText>
-          </>
-        </Button>
+          <Button onClick={onAdvancedSettingClick}>
+            <>
+              <ButtonImage src={SettingIcon} />
+              <ButtonText>{t('ADVANCED_SETTING')}</ButtonText>
+            </>
+          </Button>
         )}
         {isSponsored && <SponsoredInfoText>{t('SPONSORED_TX_INFO')}</SponsoredInfoText>}
         <TransactionSettingAlert

diff --git a/src/app/components/confirmStxTransactionComponent/transferMemoView/index.tsx b/src/app/components/confirmStxTransactionComponent/transferMemoView/index.tsx
@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+import { useTranslation } from 'react-i18next';
+
+const Container = styled.div((props) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  background: props.theme.colors.background.elevation1,
+  borderRadius: 12,
+  padding: '12px 16px',
+  justifyContent: 'center',
+  marginBottom: 12,
+}));
+
+const TitleText = styled.h1((props) => ({
+  ...props.theme.body_medium_m,
+  color: props.theme.colors.white[200],
+}));
+
+const DescriptionText = styled.h1((props) => ({
+  ...props.theme.body_medium_m,
+  marginTop: props.theme.spacing(2),
+  color: props.theme.colors.white[0],
+}));
+
+const RowContainer = styled.div({
+  display: 'flex',
+  flexDirection: 'row',
+  width: '100%',
+  alignItems: 'center',
+});
+
+interface Props {
+  memo: string;
+}
+
+function TransferMemoView({
+  memo,
+}: Props) {
+  const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
+
+  return (
+    <Container>
+      <RowContainer>
+        <TitleText>{t('MEMO')}</TitleText>
+      </RowContainer>
+      <DescriptionText>{ memo}</DescriptionText>
+    </Container>
+  );
+}
+
+export default TransferMemoView;
diff --git a/src/app/components/postCondition/ftPostConditionCard.tsx b/src/app/components/postCondition/ftPostConditionCard.tsx
@@ -17,6 +17,7 @@ function FtPostConditionCard({ postCondition, ftMetaData }: Props) {
     <PostConditionsView
       postCondition={postCondition}
       amount={amount}
+      icon={ftMetaData?.image}
     />
   );
 }

diff --git a/src/app/components/postCondition/nftPostConditionCard.tsx b/src/app/components/postCondition/nftPostConditionCard.tsx
@@ -1,4 +1,5 @@
 import { PostCondition } from '@stacks/transactions';
+import AssetIcon from '@assets/img/transactions/Assets.svg';
 import PostConditionsView from './postConditionView';
 import { getAmountFromPostCondition } from './postConditionView/helper';
 
@@ -11,6 +12,7 @@ function NftPostConditionCard({ postCondition }: Props) {
     <PostConditionsView
       postCondition={postCondition}
       amount={amount}
+      icon={AssetIcon}
     />
   );
 }