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

…-extension into abdulhaseeb/eng-2551-updated-functions-for-ordinal-transactions

.eslintrc.json

@@ -23,6 +23,7 @@
   "plugins": ["react", "prettier", "eslint-plugin-no-inline-styles", "@tanstack/query"],
   "rules": {
     "no-inline-styles/no-inline-styles": 2,
+    "import/prefer-default-export": 1,
     "react/react-in-jsx-scope": "off",
     "no-param-reassign": "off",
     "react/require-default-props": "off",

package.json

@@ -1,13 +1,13 @@
 {
   "name": "xverse-web-extension",
   "description": "A Bitcoin wallet for Web3",
-  "version": "0.16.0",
+  "version": "0.17.0",
   "private": true,
   "dependencies": {
     "@ledgerhq/hw-transport-webusb": "^6.27.13",
     "@phosphor-icons/react": "^2.0.10",
     "@react-spring/web": "^9.6.1",
-    "@secretkeylabs/xverse-core": "^1.6.1-5278e17",
+    "@secretkeylabs/xverse-core": "1.6.5",
     "@stacks/connect": "^6.10.2",
     "@stacks/encryption": "4.3.5",
     "@stacks/stacks-blockchain-api-types": "^6.1.1",

src/app/components/confirmBtcTransactionComponent/inputOutputComponent.tsx

@@ -14,15 +14,14 @@ import { getTruncatedAddress } from '@utils/helper';
 const Container = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'column',
+  justifyContent: 'center',
   background: props.theme.colors.background.elevation1,
   borderRadius: 12,
-  paddingTop: 12,
-  paddingLeft: 16,
-  paddingRight: 16,
-  paddingBottom: 12,
-  justifyContent: 'center',
-  marginBottom: 12,
   overflowY: 'auto',
+  padding: props.theme.spacing(6),
+  paddingLeft: props.theme.spacing(8),
+  paddingRight: props.theme.spacing(8),
+  marginBottom: props.theme.spacing(6),
 }));
 
 const TransferDetailContainer = styled.div((props) => ({
@@ -50,14 +49,14 @@ const TxIdText = styled.h1((props) => ({
   ...props.theme.body_m,
   fontSize: 12,
   color: props.theme.colors.white[0],
-  marginLeft: 4,
+  marginLeft: props.theme.spacing(2),
 }));
 
 const YourAddressText = styled.h1((props) => ({
   ...props.theme.body_m,
   fontSize: 12,
   color: props.theme.colors.white[0],
-  marginRight: 4,
+  marginRight: props.theme.spacing(2),
 }));
 
 const RowContainer = styled.div({

src/app/components/confirmScreen/index.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import styled from 'styled-components';
-import { MoonLoader } from 'react-spinners';
+import ActionButton from '@components/button';
 
 const MainContainer = styled.div`
   display: flex;
@@ -30,35 +30,9 @@ const ButtonsContainer = styled.div((props) => ({
   marginRight: 16,
 }));
 
-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.background.elevation0,
-  width: '50%',
-  height: 44,
-  marginLeft: 6,
-  ':disabled': {
-    opacity: 0.6,
-    cursor: 'initial',
-  },
-}));
-
-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,
+const ConfirmButtonContainer = styled.div((props) => ({
+  width: '100%',
+  marginLeft: props.theme.spacing(3),
 }));
 
 type Props = {
@@ -86,10 +60,15 @@ function ConfirmScreen({
         <ContentContainer>{children}</ContentContainer>
       </MainContainer>
       <ButtonsContainer>
-        <CancelButton onClick={onCancel}>{cancelText}</CancelButton>
-        <ConfirmButton onClick={onConfirm} disabled={disabled}>
-          {loading ? <MoonLoader color="white" size={20} /> : confirmText}
-        </ConfirmButton>
+        <ActionButton onPress={onCancel} text={cancelText} transparent />
+        <ConfirmButtonContainer>
+          <ActionButton
+            onPress={onConfirm}
+            disabled={disabled}
+            processing={loading}
+            text={confirmText}
+          />
+        </ConfirmButtonContainer>
       </ButtonsContainer>
     </>
   );

src/app/components/ledger/connectLedgerView/index.tsx

@@ -24,6 +24,10 @@ export const ConnectLedgerText = styled.p((props) => ({
   ...props.theme.body_m,
   color: props.theme.colors.white[200],
   textAlign: 'center',
+  marginTop: props.theme.spacing(4),
+  marginBottom: props.theme.spacing(4),
+  paddingLeft: props.theme.spacing(6),
+  paddingRight: props.theme.spacing(6),
 }));
 
 interface LedgerConnectionProps {

src/app/components/transactions/transactionAmount.tsx

@@ -60,11 +60,15 @@ export default function TransactionAmount(props: TransactionAmountProps): JSX.El
       }
     }
   } else if (coin === 'BTC') {
-    const prefix = transaction.incoming ? '' : '-';
-    if (!new BigNumber(transaction.amount).isEqualTo(0)) {
+    const btcTransaction = transaction as BtcTransactionData;
+    const prefix = btcTransaction.incoming ? '' : '-';
+    if (btcTransaction.isOrdinal && btcTransaction.txStatus === 'pending') {
+      return null;
+    }
+    if (!new BigNumber(btcTransaction.amount).isEqualTo(0)) {
       return (
         <NumericFormat
-          value={satsToBtc(BigNumber(transaction.amount)).toString()}
+          value={satsToBtc(BigNumber(btcTransaction.amount)).toString()}
           displayType="text"
           thousandSeparator
           prefix=""

src/app/components/transactions/transactionStatusIcon.tsx

@@ -35,12 +35,12 @@ function TransactionStatusIcon(props: TransactionStatusIconPros) {
   }
   if (currency === 'BTC') {
     const tx = transaction as BtcTransactionData;
-    if (tx.isOrdinal) {
-      return <img src={OrdinalsIcon} alt="ordinals-transfer" />;
-    }
     if (tx.txStatus === 'pending') {
       return <img src={PendingIcon} alt="pending" />;
     }
+    if (tx.isOrdinal) {
+      return <img src={OrdinalsIcon} alt="ordinals-transfer" />;
+    }
     if (tx.incoming) {
       return <img src={ReceiveIcon} alt="received" />;
     }

src/app/components/transactions/transactionTitle.tsx

@@ -5,7 +5,6 @@ import {
   TransactionData,
 } from '@secretkeylabs/xverse-core';
 import { SEND_MANY_TOKEN_TRANSFER_CONTRACT_PRINCIPAL } from '@utils/constants';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
@@ -16,6 +15,7 @@ interface TransactionTitleProps {
 const TransactionTitleText = styled.p((props) => ({
   ...props.theme.body_bold_m,
   color: props.theme.colors.white[0],
+  textAlign: 'left',
 }));
 
 export default function TransactionTitle(props: TransactionTitleProps) {
@@ -30,6 +30,18 @@ export default function TransactionTitle(props: TransactionTitleProps) {
     return tx.incoming ? t('TRANSACTION_RECEIVED') : t('TRANSACTION_SENT');
   };
 
+  const getBtcTokenTransferTitle = (tx: BtcTransactionData): string => {
+    if (tx.txStatus === 'pending') {
+      if (tx.isOrdinal) {
+        return tx.incoming
+          ? t('ORDINAL_TRANSACTION_PENDING_RECEIVING')
+          : t('ORDINAL_TRANSACTION_PENDING_SENDING');
+      }
+      return tx.incoming ? t('TRANSACTION_PENDING_RECEIVING') : t('TRANSACTION_PENDING_SENDING');
+    }
+    return tx.incoming ? t('TRANSACTION_RECEIVED') : t('TRANSACTION_SENT');
+  };
+
   const getFtName = (tx: TransactionData): string => {
     const coinDisplayName = coins?.find(
       (coin) => coin.contract === tx.contractCall?.contract_id,
@@ -74,7 +86,7 @@ export default function TransactionTitle(props: TransactionTitleProps) {
       case 'poison_microblock':
         return t('TRANSACTION_POISON_MICRO_BLOCK');
       case 'bitcoin':
-        return getTokenTransferTitle(transaction);
+        return getBtcTokenTransferTitle(transaction as BtcTransactionData);
       default:
         return t('TRANSACTION_STATUS_UNKNOWN');
     }

src/app/screens/accountList/index.tsx

@@ -1,18 +1,18 @@
+import ConnectLedger from '@assets/img/dashboard/connect_ledger.svg';
+import Plus from '@assets/img/dashboard/plus.svg';
 import AccountRow from '@components/accountRow';
+import Separator from '@components/separator';
 import TopRow from '@components/topRow';
+import { useResetUserFlow } from '@hooks/useResetUserFlow';
+import useWalletReducer from '@hooks/useWalletReducer';
+import useWalletSelector from '@hooks/useWalletSelector';
+import { Account } from '@secretkeylabs/xverse-core/types';
+import { selectAccount } from '@stores/wallet/actions/actionCreators';
+import React, { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
-import Plus from '@assets/img/dashboard/plus.svg';
-import ConnectLedger from '@assets/img/dashboard/connect_ledger.svg';
-import { useDispatch } from 'react-redux';
-import { selectAccount } from '@stores/wallet/actions/actionCreators';
-import Separator from '@components/separator';
-import { Account } from '@secretkeylabs/xverse-core/types';
-import useWalletSelector from '@hooks/useWalletSelector';
-import useWalletReducer from '@hooks/useWalletReducer';
-import React, { useEffect, useMemo } from 'react';
-import { useResetUserFlow } from '@hooks/useResetUserFlow';
 
 const Container = styled.div`
   display: flex;
@@ -114,15 +114,15 @@ function AccountList(): JSX.Element {
       ),
     );
     broadcastResetUserFlow();
-    navigate('/');
+    navigate(-1);
   };
 
   const isAccountSelected = (account: Account) =>
     account.btcAddress === selectedAccount?.btcAddress &&
     account.stxAddress === selectedAccount?.stxAddress;
 
   const handleBackButtonClick = () => {
-    navigate('/');
+    navigate(-1);
   };
 
   const onCreateAccount = async () => {

src/app/screens/authenticationRequest/index.tsx

@@ -52,13 +52,13 @@ const TopImage = styled.img({
 const FunctionTitle = styled.h1((props) => ({
   ...props.theme.headline_s,
   color: props.theme.colors.white['0'],
-  marginTop: 16,
+  marginTop: props.theme.spacing(8),
 }));
 
 const DappTitle = styled.h2((props) => ({
   ...props.theme.body_l,
   color: props.theme.colors.white['400'],
-  marginTop: 4,
+  marginTop: props.theme.spacing(2),
 }));
 
 const InfoContainerWrapper = styled.div((props) => ({
@@ -69,12 +69,12 @@ const InfoContainerWrapper = styled.div((props) => ({
 function AuthenticationRequest() {
   const [loading, setLoading] = useState(false);
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const [currentStepIndex, setCurrentStepIndex] = useState<number>(0);
-  const [isButtonDisabled, setIsButtonDisabled] = useState<boolean>(false);
-  const [isConnectSuccess, setIsConnectSuccess] = useState<boolean>(false);
-  const [isConnectFailed, setIsConnectFailed] = useState<boolean>(false);
-  const [isTxApproved, setIsTxApproved] = useState<boolean>(false);
-  const [isTxRejected, setIsTxRejected] = useState<boolean>(false);
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  const [isButtonDisabled, setIsButtonDisabled] = useState(false);
+  const [isConnectSuccess, setIsConnectSuccess] = useState(false);
+  const [isConnectFailed, setIsConnectFailed] = useState(false);
+  const [isTxApproved, setIsTxApproved] = useState(false);
+  const [isTxRejected, setIsTxRejected] = useState(false);
   const { t } = useTranslation('translation', { keyPrefix: 'AUTH_REQUEST_SCREEN' });
 
   const { search } = useLocation();
@@ -203,12 +203,12 @@ function AuthenticationRequest() {
         <DappTitle>{`${t('REQUEST_TOOLTIP')} ${authRequest.payload.appDetails?.name}`}</DappTitle>
         {isHardwareAccount(selectedAccount) && (
           <InfoContainerWrapper>
-            <InfoContainer bodyText="Message signing is not yet supported on a Ledger account. Switch to a different account to sign transactions from the application." />
+            <InfoContainer bodyText="The selected account does not support Stacks authentication. Switch to a different account to authenticate with Stacks." />
           </InfoContainerWrapper>
         )}
       </MainContainer>
       <BottomModal header="" visible={isModalVisible} onClose={() => setIsModalVisible(false)}>
-        {currentStepIndex === 0 ? (
+        {currentStepIndex === 0 && (
           <LedgerConnectionView
             title={t('LEDGER.CONNECT.TITLE')}
             text={t('LEDGER.CONNECT.SUBTITLE')}
@@ -218,7 +218,8 @@ function AuthenticationRequest() {
             isConnectSuccess={isConnectSuccess}
             isConnectFailed={isConnectFailed}
           />
-        ) : currentStepIndex === 1 ? (
+        )}
+        {currentStepIndex === 1 && (
           <LedgerConnectionView
             title={t('LEDGER.CONFIRM.TITLE')}
             text={t('LEDGER.CONFIRM.SUBTITLE')}
@@ -228,7 +229,7 @@ function AuthenticationRequest() {
             isConnectSuccess={isTxApproved}
             isConnectFailed={isTxRejected}
           />
-        ) : null}
+        )}
         <SuccessActionsContainer>
           <ActionButton
             onPress={isTxRejected || isConnectFailed ? handleRetry : handleConnectAndConfirm}