Release v0.15.0 (#544)

* bump version to v0.15.0

* Switch to alex sdk & url for sponsoring service

Inspect error code and show sponsoring service info block

feat: move alex sponsored transaction hook to new file

revert: changes to useSponsoredTransaction hook for future use

fix: sponsor transaction switch should toggle userOverrideSponsorValue

feat: add a try again button on failed swaps due to sponsor error

* feat: add warning texts to explain why a swap cannot be sponsored (#553)

* fix: enforce width on swap number input (#554)

* Fix swap screen fee update issue (#555)

* Use correct value for fee card component

* Fix fee state management

* Dont show fee block when sponsored

* chore: bump xverse-core to 1.5.1 to include fetchStxPendingTxData fix

* Fix ui glitch on the login screen (#556)

* Remove css transition code

* Add hover and active state

* fix: use :disabled css pseudo class instead of props on buttons

---------

Co-authored-by: Tim Man <tim@secretkeylabs.com>

* Fix swaps tx history (#557)

* Use ft transfer array to show token specific history

* Add filter to only show specific token history

* Refactor txTransfers file to reuse code

* Use token ticker

* Update variable name

* Use correct decimal places for fungible token (#559)

* Use ftDecimals function for fungible token amount

* fix undefined check

---------

Co-authored-by: Tim Man <tim@secretkeylabs.com>
Co-authored-by: Imamah-Zafar <imamah.zafar@tintash.com>
Co-authored-by: Tim Man <timothyc.man@gmail.com>
Co-authored-by: Imamah-Zafar <88320460+Imamah-Zafar@users.noreply.github.com>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "xverse-web-extension",
   "description": "A Bitcoin wallet for Web3",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "private": true,
   "dependencies": {
     "@ledgerhq/hw-transport-webusb": "^6.27.13",
@@ -18,7 +18,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "alex-sdk": "^0.1.14",
+    "alex-sdk": "^0.1.18",
     "argon2-browser": "^1.18.0",
     "axios": "^1.1.3",
     "bignumber.js": "^9.1.0",

src/app/components/button/index.tsx

@@ -18,33 +18,31 @@ const Button = styled.button<ButtonProps>((props) => ({
   width: '100%',
   height: 44,
   transition: 'all 0.1s ease',
-  ...(props.disabled
-    ? {
-        cursor: 'not-allowed',
-        opacity: 0.4,
-      }
-    : {
-        ':hover': { opacity: 0.8 },
-        ':active': { opacity: 0.6 },
-      }),
+  ':disabled': {
+    opacity: 0.4,
+    cursor: 'not-allowed',
+  },
+  ':hover:enabled': {
+    opacity: 0.8,
+  },
+  ':active:enabled': {
+    opacity: 0.6,
+  },
 }));
 
 const TransparentButton = styled(Button)((props) => ({
   border: `1px solid ${props.theme.colors.background.elevation6}`,
   backgroundColor: 'transparent',
-  ...(props.disabled
-    ? {
-        cursor: 'not-allowed',
-        opacity: 0.4,
-      }
-    : {
-        ':hover': {
-          backgroundColor: props.theme.colors.background.elevation6_800,
-        },
-        ':active': {
-          backgroundColor: props.theme.colors.background.elevation6_600,
-        },
-      }),
+  ':disabled': {
+    cursor: 'not-allowed',
+    opacity: 0.4,
+  },
+  ':hover:enabled': {
+    backgroundColor: props.theme.colors.background.elevation6_800,
+  },
+  ':active:enabled': {
+    backgroundColor: props.theme.colors.background.elevation6_600,
+  },
 }));
 
 interface TextProps {

src/app/components/transactions/stxTransaction.tsx

@@ -30,10 +30,11 @@ import StxTransferTransaction from './stxTransferTransaction';
 interface TransactionHistoryItemProps {
   transaction: AddressTransactionWithTransfers | Tx;
   transactionCoin: CurrencyTypes;
+  txFilter: string | null;
 }
 
 export default function StxTransactionHistoryItem(props: TransactionHistoryItemProps) {
-  const { transaction, transactionCoin } = props;
+  const { transaction, transactionCoin, txFilter } = props;
   const { selectedAccount } = useWalletSelector();
   // const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
   if (!isAddressTransactionWithTransfers(transaction)) {
@@ -68,7 +69,7 @@ export default function StxTransactionHistoryItem(props: TransactionHistoryItemP
   }
   return (
     <>
-      <TxTransfers transaction={transaction} coin={transactionCoin} />
+      <TxTransfers transaction={transaction} coin={transactionCoin} txFilter={txFilter} />
       <StxTransferTransaction
         transaction={parseStxTransactionData({
           responseTx: transaction.tx,

src/app/components/transactions/txTransfers.tsx

@@ -9,6 +9,8 @@ import { NumericFormat } from 'react-number-format';
 import { microstacksToStx } from '@secretkeylabs/xverse-core';
 import BigNumber from 'bignumber.js';
 import { useTranslation } from 'react-i18next';
+import { getFtTicker } from '@utils/tokens';
+import { ftDecimals } from '@utils/helper';
 
 const TransactionContainer = styled.div((props) => ({
   display: 'flex',
@@ -51,11 +53,12 @@ const TransactionValue = styled.p((props) => ({
 interface TxTransfersProps {
   transaction: AddressTransactionWithTransfers;
   coin: CurrencyTypes;
+  txFilter: string | null;
 }
 
 export default function TxTransfers(props: TxTransfersProps) {
-  const { transaction, coin } = props;
-  const { selectedAccount } = useWalletSelector();
+  const { transaction, coin, txFilter } = props;
+  const { selectedAccount, coinsList } = useWalletSelector();
   const { t } = useTranslation('translation', { keyPrefix: 'COIN_DASHBOARD_SCREEN' });
 
   function formatAddress(addr: string): string {
@@ -73,28 +76,49 @@ export default function TxTransfers(props: TxTransfersProps) {
     selectedAccount?.stxAddress === transfer.recipient
       ? t('TRANSACTION_RECEIVED')
       : t('TRANSACTION_SENT');
-  return (
-    <>
-      {transaction.stx_transfers.map((stxTransfer) => (
+
+  function renderTransaction(transactionList) {
+    return transactionList.map((transfer) => {
+      const isFT = coin === 'FT';
+      const ft = coinsList?.find((ftCoin) => ftCoin.principal === txFilter!.split('::')[0]);
+      const isSentTransaction = selectedAccount?.stxAddress !== transfer.recipient;
+      if (isFT && transfer.asset_identifier !== txFilter) {
+        return null;
+      }
+
+      return (
         <TransactionContainer key={nanoid()}>
-          {renderTransactionIcon(stxTransfer)}
+          {renderTransactionIcon(transfer)}
           <TransactionInfoContainer>
             <TransactionRow>
-              <TransactionTitleText>{getTokenTransferTitle(stxTransfer)}</TransactionTitleText>
+              <TransactionTitleText>{getTokenTransferTitle(transfer)}</TransactionTitleText>
               <NumericFormat
-                value={microstacksToStx(BigNumber(stxTransfer.amount)).toString()}
+                value={
+                  isFT
+                    ? ftDecimals(BigNumber(transfer.amount), ft?.decimals ?? 0)
+                    : microstacksToStx(BigNumber(transfer.amount)).toString()
+                }
                 displayType="text"
                 thousandSeparator
-                prefix={selectedAccount?.stxAddress === stxTransfer.recipient ? '' : '-'}
+                prefix={isSentTransaction ? '-' : ''}
                 renderText={(value: string) => (
-                  <TransactionValue>{`${value} ${coin}`}</TransactionValue>
+                  <TransactionValue>
+                    {`${value} ${isFT && ft ? getFtTicker(ft) : coin}`}
+                  </TransactionValue>
                 )}
               />
             </TransactionRow>
-            <RecipientAddress>{formatAddress(stxTransfer.recipient as string)}</RecipientAddress>
+            <RecipientAddress>{formatAddress(transfer.recipient as string)}</RecipientAddress>
           </TransactionInfoContainer>
         </TransactionContainer>
-      ))}
+      );
+    });
+  }
+  return (
+    <>
+      {coin === 'FT' && transaction.ft_transfers
+        ? renderTransaction(transaction.ft_transfers)
+        : renderTransaction(transaction.stx_transfers)}
     </>
   );
 }

src/app/screens/coinDashboard/transactionsHistoryList.tsx

@@ -200,6 +200,7 @@ export default function TransactionsHistoryList(props: TransactionsHistoryListPr
                   transaction={transaction}
                   transactionCoin={coin}
                   key={transaction.tx_id}
+                  txFilter={txFilter}
                 />
               );
             })}

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

@@ -40,7 +40,7 @@ export function AdvanceSettings({ swap }: Props) {
 
   const onApplyClick = useCallback(({ fee, nonce }: { fee: string; nonce?: string }) => {
     const settingFee = BigInt(stxToMicrostacks(new BigNumber(fee) as any).toString());
-    swap.unsignedTx.setFee(settingFee);
+    swap.onFeeUpdate(settingFee);
     if (nonce != null) {
       swap.unsignedTx.setNonce(BigInt(nonce));
     }

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

@@ -12,14 +12,15 @@ import { useCallback, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useConfirmSwap } from '@screens/swap/swapConfirmation/useConfirmSwap';
 import { AdvanceSettings } from '@screens/swap/swapConfirmation/advanceSettings';
-import { useSponsoredTransaction } from '@hooks/useSponsoredTransaction';
 import SponsoredTransactionIcon from '@assets/img/transactions/CircleWavyCheck.svg';
+import InfoContainer from '@components/infoContainer';
+import { SUPPORT_URL_TAB_TARGET, SWAP_SPONSOR_DISABLED_SUPPORT_URL } from '@utils/constants';
 
 const TitleText = styled.div((props) => ({
   fontSize: 21,
   fontWeight: 700,
   color: props.theme.colors.white['0'],
-  marginBottom: props.theme.spacing(16),
+  marginBottom: props.theme.spacing(12),
   marginTop: props.theme.spacing(12),
 }));
 
@@ -53,12 +54,15 @@ const Icon = styled.img((props) => ({
   height: 24,
 }));
 
+const StyledInfoContainer = styled.div((props) => ({
+  marginBottom: props.theme.spacing(4),
+}));
+
 export default function SwapConfirmation() {
   const { t } = useTranslation('translation', { keyPrefix: 'SWAP_CONFIRM_SCREEN' });
   const location = useLocation();
   const navigate = useNavigate();
   const swap = useConfirmSwap(location.state);
-  const { isSponsored } = useSponsoredTransaction(swap.isSponsorOptionSelected);
 
   const onCancel = useCallback(() => {
     navigate('/swap');
@@ -72,21 +76,37 @@ export default function SwapConfirmation() {
     });
   }, [swap]);
 
+  const handleClickLearnMore = () => {
+    window.open(SWAP_SPONSOR_DISABLED_SUPPORT_URL, SUPPORT_URL_TAB_TARGET, 'noreferrer noopener');
+  };
+
   return (
     <>
       <AccountHeaderComponent disableMenuOption disableAccountSwitch />
       <Container>
         <TitleText>{t('TOKEN_SWAP')}</TitleText>
+        {swap.isSponsorDisabled && (
+          <StyledInfoContainer>
+            <InfoContainer
+              bodyText={t('SWAP_TRANSACTION_CANNOT_BE_SPONSORED')}
+              type="Info"
+              redirectText={t('LEARN_MORE')}
+              onClick={handleClickLearnMore}
+            />
+          </StyledInfoContainer>
+        )}
         <StxInfoBlock type="transfer" swap={swap} />
         <StxInfoBlock type="receive" swap={swap} />
         <FunctionBlock name={swap.functionName} />
         <RouteBlock swap={swap} />
-        <FeesBlock
-          lpFee={swap.lpFeeAmount}
-          lpFeeFiatAmount={swap.lpFeeFiatAmount}
-          currency={swap.fromToken.name}
-        />
-        {isSponsored ? (
+        {!swap.isSponsored && (
+          <FeesBlock
+            lpFee={swap.lpFeeAmount}
+            lpFeeFiatAmount={swap.lpFeeFiatAmount}
+            currency={swap.fromToken.name}
+          />
+        )}
+        {swap.isSponsored ? (
           <SponsoredTransactionText>
             <Icon src={SponsoredTransactionIcon} />
             {t('THIS_IS_A_SPONSORED_TRANSACTION')}