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

…on into denys/eng-2473-regression-issues-v0140-rc1

package.json

@@ -1,7 +1,7 @@
 {
   "name": "xverse-web-extension",
   "description": "A Bitcoin wallet for Web3",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "private": true,
   "dependencies": {
     "@ledgerhq/hw-transport-webusb": "^6.27.13",

src/app/screens/home/balanceCard/index.tsx

@@ -15,20 +15,20 @@ const RowContainer = styled.div((props) => ({
   marginTop: props.theme.spacing(11),
 }));
 
-const BalanceHeadingText = styled.h1((props) => ({
+const BalanceHeadingText = styled.h3((props) => ({
   ...props.theme.headline_category_s,
   color: props.theme.colors.white['200'],
   textTransform: 'uppercase',
   opacity: 0.7,
 }));
 
-const CurrencyText = styled.h1((props) => ({
+const CurrencyText = styled.label((props) => ({
   ...props.theme.headline_category_s,
   color: props.theme.colors.white['0'],
   fontSize: 13,
 }));
 
-const BalanceAmountText = styled.h1((props) => ({
+const BalanceAmountText = styled.p((props) => ({
   ...props.theme.headline_xl,
   color: props.theme.colors.white['0'],
 }));
@@ -88,15 +88,13 @@ function BalanceCard(props: BalanceCardProps) {
           <BarLoader loaderSize={LoaderSize.LARGE} />
         </BarLoaderContainer>
       ) : (
-        <BalanceAmountText>
-          <NumericFormat
-            value={calculateTotalBalance()}
-            displayType="text"
-            prefix={`${currencySymbolMap[fiatCurrency]}`}
-            thousandSeparator
-            renderText={(value: string) => <BalanceAmountText>{value}</BalanceAmountText>}
-          />
-        </BalanceAmountText>
+        <NumericFormat
+          value={calculateTotalBalance()}
+          displayType="text"
+          prefix={`${currencySymbolMap[fiatCurrency]}`}
+          thousandSeparator
+          renderText={(value: string) => <BalanceAmountText>{value}</BalanceAmountText>}
+        />
       )}
     </>
   );

src/app/screens/home/index.tsx

@@ -363,6 +363,8 @@ function Home() {
     </VerifyOrViewContainer>
   );
 
+  const showSwaps = !isLedgerAccount(selectedAccount);
+
   return (
     <>
       <AccountHeaderComponent />
@@ -384,7 +386,7 @@ function Home() {
         <RowButtonContainer>
           <SquareButton src={ArrowUpRight} text={t('SEND')} onPress={onSendModalOpen} />
           <SquareButton src={ArrowDownLeft} text={t('RECEIVE')} onPress={onReceiveModalOpen} />
-          {/* <SquareButton src={Swap} text={t('SWAP')} onPress={onSwapPressed} /> */}
+          {showSwaps && <SquareButton src={Swap} text={t('SWAP')} onPress={onSwapPressed} />}
           <SquareButton src={CreditCard} text={t('BUY')} onPress={onBuyModalOpen} />
         </RowButtonContainer>
 

src/app/screens/sendOrdinal/index.tsx

@@ -1,28 +1,28 @@
-import styled from 'styled-components';
-import { useTranslation } from 'react-i18next';
-import { useEffect, useMemo, useState } from 'react';
-import { useMutation } from '@tanstack/react-query';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { ErrorCodes, ResponseError, UTXO } from '@secretkeylabs/xverse-core/types';
-import { validateBtcAddress } from '@secretkeylabs/xverse-core/wallet';
-import {
-  SignedBtcTx,
-  signOrdinalSendTransaction,
-} from '@secretkeylabs/xverse-core/transactions/btc';
-import useWalletSelector from '@hooks/useWalletSelector';
+import ArrowLeft from '@assets/img/dashboard/arrow_left.svg';
+import AccountHeaderComponent from '@components/accountHeader';
 import SendForm from '@components/sendForm';
-import TopRow from '@components/topRow';
 import BottomBar from '@components/tabBar';
-import AccountHeaderComponent from '@components/accountHeader';
-import OrdinalImage from '@screens/ordinals/ordinalImage';
-import ArrowLeft from '@assets/img/dashboard/arrow_left.svg';
-import { getBtcFiatEquivalent } from '@secretkeylabs/xverse-core/currency';
+import TopRow from '@components/topRow';
 import useNftDataSelector from '@hooks/stores/useNftDataSelector';
 import useBtcClient from '@hooks/useBtcClient';
+import { useResetUserFlow } from '@hooks/useResetUserFlow';
 import useTextOrdinalContent from '@hooks/useTextOrdinalContent';
-import { isLedgerAccount } from '@utils/helper';
+import useWalletSelector from '@hooks/useWalletSelector';
+import OrdinalImage from '@screens/ordinals/ordinalImage';
 import { isOrdinalOwnedByAccount } from '@secretkeylabs/xverse-core/api';
-import { useResetUserFlow } from '@hooks/useResetUserFlow';
+import { getBtcFiatEquivalent } from '@secretkeylabs/xverse-core/currency';
+import {
+  SignedBtcTx,
+  signOrdinalSendTransaction,
+} from '@secretkeylabs/xverse-core/transactions/btc';
+import { ErrorCodes, ResponseError, UTXO } from '@secretkeylabs/xverse-core/types';
+import { validateBtcAddress } from '@secretkeylabs/xverse-core/wallet';
+import { useMutation } from '@tanstack/react-query';
+import { isLedgerAccount } from '@utils/helper';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
 
 const ScrollContainer = styled.div`
   display: flex;
@@ -124,7 +124,9 @@ function SendOrdinal() {
   } = useMutation<SignedBtcTx, ResponseError, string>({
     mutationFn: async (recipient) => {
       const addressUtxos = await btcClient.getUnspentUtxos(ordinalsAddress);
-      const ordUtxo = addressUtxos.find((utx) => utx.txid === selectedOrdinal?.tx_id);
+      const ordUtxo = addressUtxos.find(
+        (utx) => `${utx.txid}:${utx.vout}` === selectedOrdinal?.output,
+      );
       setOrdinalUtxo(ordUtxo);
       if (ordUtxo) {
         const signedTx = await signOrdinalSendTransaction(

src/app/screens/swap/swapConfirmation/stxInfoBlock/index.tsx

@@ -151,7 +151,7 @@ export default function StxInfoBlock({ type, swap }: StxInfoCardProps) {
             </SpaceBetweenContainer>
             <EstimateUSDText>{` ~ $${token.fiatAmount} USD`}</EstimateUSDText>
           </AmountContainer>
-          <DescriptionText>{t('TO')}</DescriptionText>
+          <DescriptionText>{type === 'transfer' ? t('FROM') : t('TO')}</DescriptionText>
           <SpaceBetweenContainer>
             <ItemsCenterContainer>
               <AddressImg src={AddressIcon} />

src/app/screens/swap/swapTokenBlock/index.tsx

@@ -16,17 +16,17 @@ export const RowContainer = styled.div({
   alignItems: 'center',
 });
 
-const TitleText = styled.h1((props) => ({
+const TitleText = styled.h3((props) => ({
   ...props.theme.body_medium_m,
   flex: 1,
   display: 'flex',
 }));
 
-const Text = styled.h1((props) => ({
+const Text = styled.p((props) => ({
   ...props.theme.body_medium_m,
 }));
 
-const BalanceText = styled.h1((props) => ({
+const BalanceText = styled.label((props) => ({
   ...props.theme.body_medium_m,
   color: props.theme.colors.white['400'],
   marginRight: props.theme.spacing(2),
@@ -90,7 +90,7 @@ const CoinText = styled.div((props) => ({
   color: props.theme.colors.white['0'],
 }));
 
-export const EstimateUSDText = styled.h1((props) => ({
+export const EstimateUSDText = styled.p((props) => ({
   ...props.theme.body_medium_m,
   color: props.theme.colors.white['400'],
   marginLeft: 'auto',

src/app/screens/swap/useSwap.tsx

@@ -121,8 +121,11 @@ export function useSwap(): UseSwap {
   } = useWalletSelector();
   const { isSponsored } = useSponsoredTransaction(XVERSE_SPONSOR_2_URL);
 
-  const acceptableCoinList =
-    coinsList?.filter((c) => alexSDK.getCurrencyFrom(c.principal) != null) ?? [];
+  const acceptableCoinList = (coinsList || [])
+    .filter((c) => alexSDK.getCurrencyFrom(c.principal) != null)
+    // TODO tim: remove this once alexsdk fix issue here
+    // https://github.com/alexgo-io/alex-sdk/issues/2
+    .filter((c) => c.assetName !== 'brc20-db20');
 
   const [inputAmount, setInputAmount] = useState('');
   const [slippage, setSlippage] = useState(0.04);

src/locales/en.json

@@ -808,6 +808,7 @@
     "YOU_WILL_RECEIVE": "You will receive",
     "AMOUNT": "Amount",
     "LESS_THAN_OR_EQUAL_TO": "Less than or equal to",
+    "FROM": "From",
     "TO": "To",
     "YOUR_ADDRESS": "Your address",
     "CANCEL": "Cancel",