Merge branch 'develop' into YW-164/ada-handles

Author: Nebyt

packages/e2e-tests/helpers/portfolioHelper.js

@@ -12,8 +12,8 @@ export const Columns = Object.freeze({
   Day: '24h',
   Week: '1W',
   Month: '1M',
+  Percentage: 'portfolioPercentage',
   Total: 'totalAmount',
-  Percentage: 'portfolioPercents',
 });
 export const RedirectionButtons = Object.freeze({
   Receive: 'receive',

packages/e2e-tests/test/extension/portfolio/Portfolio_09_sorting.test.js

@@ -45,12 +45,6 @@ describe('Portfolio Sorting columns', function () {
 
   for (const columnName in Columns) {
     it(`Sort by column ${columnName} and check sorting`, async function () {
-      if (Columns[columnName] === Columns.Percentage) {
-        console.warn(
-          'Skipping sorting check on Percentage column until the issue https://emurgo.atlassian.net/browse/YOEXT-2289 is fixed'
-        );
-        this.skip();
-      }
       await portfolioMainPage.sortBy(Columns[columnName]);
       const arrowSortingDirection = await portfolioMainPage.getSortingArrowDirection(Columns[columnName]);
       const columnsRawValues = await portfolioMainPage.getColumnValues(Columns[columnName]);

packages/yoroi-extension/app/UI/features/airdrop/useCases/Redeem.tsx

@@ -1,7 +1,7 @@
 import Dialog from '../../../../components/widgets/Dialog';
 import { Typography, Box, Button } from '@mui/material';
 import { useEffect, useState, useRef } from 'react';
-import { getCollateralUtxos, getRedemptionTransaction } from '../../../../api/ada/midnight';
+import { getRedemptionUtxos, getRedemptionTransaction } from '../../../../api/ada/midnight';
 import { useStrings } from '../common/hooks/useStrings';
 import LoadingSpinner from '../../../../components/widgets/LoadingSpinner';
 import { formatNumberExactly } from '../../../../api/ada/midnightRedemption';
@@ -23,7 +23,7 @@ export default function Redeem(props: {
   const abort = useRef(false);
 
   const updateCollateralUtxos = async (reorgTxId?: string) => {
-    const result = await getCollateralUtxos(props.wallet);
+    const result = await getRedemptionUtxos(props.wallet);
     setGetCollateralUtxosResult(result);
     if (result.state === 'exist') {
       // we just submitted the re-org tx, wait for it to be confirmed
@@ -44,8 +44,8 @@ export default function Redeem(props: {
             props.address,
             props.endpoint,
             result.fundingUtxoAddr,
-            result.collateralUtxos,
-            [result.fundingUtxo]
+            [],
+            result.fundingUtxos
           );
           if (abort.current) {
             return;

packages/yoroi-extension/app/UI/features/portfolio/common/hooks/usePortfolioTokenChart.ts

@@ -1,6 +1,5 @@
 import { isRight } from '@yoroi/common';
 import { useQuery, UseQueryOptions } from '@tanstack/react-query';
-// import { useLanguage } from '../../../kernel/i18n';
 import { supportedCurrencies, time } from '../../../../utils/constants';
 import { fetchPtPriceActivity } from '../../../../utils/usePrimaryTokenActivity';
 import { usePortfolio } from '../../module/PortfolioContextProvider';
@@ -20,11 +19,10 @@ type TokenChartData = {
 type TokenChartQueryKey = ['useGetPortfolioTokenChart', string, TokenChartInterval, string | undefined];
 
 export const useGetPortfolioTokenChart = (
-  timeInterval = TOKEN_CHART_INTERVAL.DAY as TokenChartInterval,
   tokenInfo: any,
+  timeInterval = TOKEN_CHART_INTERVAL.DAY as TokenChartInterval,
   options: Omit<UseQueryOptions<TokenChartData[], Error, TokenChartData[], TokenChartQueryKey>, 'queryKey' | 'queryFn'> = {}
 ) => {
-  // const { currency } = useCurrencyPairing();
   const { unitOfAccount, primaryTokenInfo } = usePortfolio();
 
   const currency = unitOfAccount;

packages/yoroi-extension/app/UI/features/portfolio/common/hooks/useTableSort.ts

@@ -19,18 +19,36 @@ const useTableSort = ({ order, orderBy, setSortState, headCells, data }: Props)
     name: 'desc',
     price: 'desc',
     totalAmount: 'desc',
-    portfolioPercents: 'desc',
+    portfolioPercentage: 'desc',
     '24h': 'desc',
     '1W': 'desc',
     '1M': 'desc',
   };
 
+  const _compAB = (valueA: string | number, valueB: string | number) => {
+    if (valueA === valueB) return 0;
+    return valueA < valueB ? -1 : 1;
+  };
+
+  const _checkForWeirdSymbols = (tokenAName: string, tokenBName: string) => {
+    const startsWithSymbolOrNumber = (str: string) => /^[^a-zA-Z]/.test(str);
+
+    const aIsWeird = startsWithSymbolOrNumber(tokenAName);
+    const bIsWeird = startsWithSymbolOrNumber(tokenBName);
+
+    if (aIsWeird && !bIsWeird) return 1;
+    if (!aIsWeird && bIsWeird) return -1;
+    return undefined;
+  };
+
   const compareValues = (a: any, b: any, sortType: TableSortType, sortOrder: 'asc' | 'desc', sortKey: string): number => {
-    const isInvalid = (val: any) => isNaN(Number(val));
+    const isInvalid = (val: any) => Number.isNaN(Number(val));
+    const valueA = a[sortKey];
+    const valueB = b[sortKey];
 
-    if (['price', 'portfolio', 'totalAmount', '24h', '1W', '1M'].includes(sortKey)) {
-      const aInvalid = isInvalid(a[sortKey]);
-      const bInvalid = isInvalid(b[sortKey]);
+    if (['price', 'portfolioPercentage', 'totalAmount', '24h', '1W', '1M'].includes(sortKey)) {
+      const aInvalid = isInvalid(valueA);
+      const bInvalid = isInvalid(valueB);
 
       if (aInvalid && !bInvalid) return 1;
       if (!aInvalid && bInvalid) return -1;
@@ -41,30 +59,21 @@ const useTableSort = ({ order, orderBy, setSortState, headCells, data }: Props)
 
     switch (sortType) {
       case 'numeric': {
-        const aValue = Number(a[sortKey]);
-        const bValue = Number(b[sortKey]);
-        comparison = aValue === bValue ? 0 : aValue < bValue ? -1 : 1;
+        comparison = _compAB(Number(valueA), Number(valueB));
         break;
       }
       case 'character': {
         const aName = String(a.info?.[sortKey] ?? '');
         const bName = String(b.info?.[sortKey] ?? '');
 
-        const startsWithSymbolOrNumber = (str: string) => /^[^a-zA-Z]/.test(str);
-
-        const aIsWeird = startsWithSymbolOrNumber(aName);
-        const bIsWeird = startsWithSymbolOrNumber(bName);
-
-        if (aIsWeird && !bIsWeird) return 1;
-        if (!aIsWeird && bIsWeird) return -1;
+        const checkResult = _checkForWeirdSymbols(aName, bName);
+        if (checkResult) return checkResult;
 
         comparison = aName.localeCompare(bName, undefined, { sensitivity: 'base' });
         break;
       }
       default: {
-        const aVal = a[sortKey];
-        const bVal = b[sortKey];
-        comparison = aVal === bVal ? 0 : aVal < bVal ? -1 : 1;
+        comparison = _compAB(valueA, valueB);
       }
     }
 
@@ -80,7 +89,12 @@ const useTableSort = ({ order, orderBy, setSortState, headCells, data }: Props)
 
   const handleRequestSort = (property: string) => {
     const defaultDirection = defaultSortDirections[property] ?? 'asc';
-    const newOrder = property !== orderBy ? defaultDirection : order === 'asc' ? 'desc' : 'asc';
+    let newOrder: 'asc' | 'desc';
+    if (property === orderBy) {
+      newOrder = order === 'asc' ? 'desc' : 'asc';
+    } else {
+      newOrder = defaultDirection;
+    }
 
     setSortState({ order: newOrder, orderBy: property });
   };

packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/ChartDetails/TokenChartInterval.tsx

@@ -64,7 +64,7 @@ export const TokenChartInterval = ({ tokenInfo, pathId = '' }: Props): React.Rea
 
   // Fetch data based on the selected interval
   const [timeInterval, setTimeInterval] = useState<any>(TOKEN_CHART_INTERVAL.DAY);
-  const { data, isFetching } = useGetPortfolioTokenChart(timeInterval, tokenInfo);
+  const { data, isFetching } = useGetPortfolioTokenChart(tokenInfo, timeInterval);
 
   const handlePeriodChange = (id: string) => {
     setTimeInterval(TOKEN_CHART_INTERVAL[id]);
@@ -119,7 +119,7 @@ export const TokenChartInterval = ({ tokenInfo, pathId = '' }: Props): React.Rea
               height: '160px',
             }}
           >
-            {!data ? null : (
+            {data && (
               <ResponsiveContainer width={'100%'} height="100%">
                 <LineChart
                   margin={{ top: 10, left: -16, right: 0, bottom: 0 }}

packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/StatsTable.tsx

@@ -59,7 +59,7 @@ const StatsTable = ({ data, stores }: Props): React.ReactNode => {
     { id: '1W', label: strings['1W'], align: 'left', sortType: 'numeric' },
     { id: '1M', label: strings['1M'], align: 'left', sortType: 'numeric' },
     {
-      id: 'portfolioPercents',
+      id: 'portfolioPercentage',
       label: `${strings.portfolio} %`,
       align: 'left',
       sortType: 'numeric',
@@ -137,7 +137,7 @@ const StatsTable = ({ data, stores }: Props): React.ReactNode => {
           </STableCell>
 
           <STableCell sx={{ padding: '16.8px 1rem' }}>
-            <TokenProcentage procentage={row.percentage} pathId={tokenPathId(rowIndex)} />
+            <TokenProcentage procentage={row.portfolioPercentage} pathId={tokenPathId(rowIndex)} />
           </STableCell>
 
           <STableCell sx={{ padding: '16.8px 1rem' }}>

packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/TableColumnsChip.tsx

@@ -66,7 +66,7 @@ export const TokenPriceChangeChip = ({
   timeInterval,
   pathId,
 }: TokenPriceChangeChipProps) => {
-  const { data: ptTokenDataInterval, isFetching } = useGetPortfolioTokenChart(timeInterval, { info: { id: '' } });
+  const { data: ptTokenDataInterval, isFetching } = useGetPortfolioTokenChart({ info: { id: '' } }, timeInterval);
   const pathIdInterval = timeInterval ? timeInterval.replace(' ', '') : '24h';
   const fullPathId = `${pathId}-${pathIdInterval}_priceChanges-text`;
 
@@ -79,13 +79,9 @@ export const TokenPriceChangeChip = ({
     return <Skeleton variant="text" width="60px" height="30px" />;
   }
 
-  const tokenPriceClose = isPrimaryToken
-    ? primaryTokenActivity?.close
-    : secondaryTokenActivity && secondaryTokenActivity[1].price?.close;
+  const tokenPriceClose = isPrimaryToken ? primaryTokenActivity?.close : secondaryTokenActivity?.[1]?.price?.close;
 
-  const tokenPriceOpen = isPrimaryToken
-    ? primaryTokenActivity?.open
-    : secondaryTokenActivity && secondaryTokenActivity[1].price?.open;
+  const tokenPriceOpen = isPrimaryToken ? primaryTokenActivity?.open : secondaryTokenActivity?.[1]?.price?.open;
 
   const { changePercent, variantPnl } = priceChange(tokenPriceOpen, tokenPriceClose);
 
@@ -183,7 +179,7 @@ export const TokenPriceTotal = observer(({ token, secondaryToken24Activity, stor
     ptActivity: { close: ptPrice },
   } = useCurrencyPairing();
 
-  const tokenPrice = secondaryToken24Activity && secondaryToken24Activity[1].price?.close;
+  const tokenPrice = secondaryToken24Activity?.[1]?.price?.close;
   const tokenQuantityAsBigInt = bigNumberToBigInt(token.quantity);
 
   const showingAda = accountPair?.from.name === primaryTokenInfo.name;
@@ -234,10 +230,10 @@ export const TokenPriceTotal = observer(({ token, secondaryToken24Activity, stor
 export const TokenPrice = ({ secondaryToken24Activity, ptActivity, token, pathId }) => {
   const { unitOfAccount } = usePortfolio();
   const isPrimaryToken = token.id === '-';
-  const tokenPrice = secondaryToken24Activity && secondaryToken24Activity[1].price?.close;
+  const tokenPrice = secondaryToken24Activity?.[1]?.price?.close;
   const ptPrice = ptActivity?.close;
   const ptUnitPrice = tokenPrice * ptPrice;
-  const priceDisplay = parseFloat(isPrimaryToken ? ptPrice : ptUnitPrice).toFixed(4);
+  const priceDisplay = Number.parseFloat(isPrimaryToken ? ptPrice : ptUnitPrice).toFixed(4);
 
   const noDataToDisplay = priceDisplay === 'NaN';
 
@@ -254,7 +250,7 @@ export const TokenProcentage = ({ procentage, pathId }) => {
 
   return (
     <Typography variant="body2" color="ds.text_gray_medium" id={`${pathId}-percentage-text`}>
-      {showWelcomeBanner ? 0 : parseFloat(procentage).toFixed(2)}%
+      {showWelcomeBanner ? 0 : Number.parseFloat(procentage).toFixed(2)}%
     </Typography>
   );
 };

packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/useProcentage.tsx

@@ -10,12 +10,18 @@ import { bigNumberToBigInt } from './TableColumnsChip';
 
 export const useProcessedTokenData = ({ data, ptActivity, data24h, data7d, data30d }) => {
   const { primaryTokenInfo } = usePortfolio();
-  const { data: ptTokenDataInterval7d } = useGetPortfolioTokenChart(TOKEN_CHART_INTERVAL.WEEK, {
-    info: { id: '' },
-  });
-  const { data: ptTokenDataInterval1M } = useGetPortfolioTokenChart(TOKEN_CHART_INTERVAL.MONTH, {
-    info: { id: '' },
-  });
+  const { data: ptTokenDataInterval7d } = useGetPortfolioTokenChart(
+    {
+      info: { id: '' },
+    },
+    TOKEN_CHART_INTERVAL.WEEK
+  );
+  const { data: ptTokenDataInterval1M } = useGetPortfolioTokenChart(
+    {
+      info: { id: '' },
+    },
+    TOKEN_CHART_INTERVAL.MONTH
+  );
 
   // Helper to calculate fiat value and unit price for a token
   const calculateTotalFiatForToken = token => {
@@ -33,10 +39,10 @@ export const useProcessedTokenData = ({ data, ptActivity, data24h, data7d, data3
       .times(new BigNumber(ptActivity?.close.toString() || 1))
       .toNumber();
 
-    const unitPrice = parseFloat((tokenPrice * ptActivity?.close || 1).toFixed(4));
+    const unitPrice = Number.parseFloat((tokenPrice * ptActivity?.close || 1).toFixed(4));
     const primaryTokenFiatTotalAmount = formatValue(primaryTokenInfo.quantity.multipliedBy(String(ptActivity?.close)));
 
-    const tokenValueDisplay = secondaryToken24Activity && secondaryToken24Activity[0] === 500 ? 0 : totalValue;
+    const tokenValueDisplay = secondaryToken24Activity?.[0] === 500 ? 0 : totalValue;
     return { totalValue: isPrimaryToken ? primaryTokenFiatTotalAmount : tokenValueDisplay, unitPrice };
   };
 
@@ -63,7 +69,7 @@ export const useProcessedTokenData = ({ data, ptActivity, data24h, data7d, data3
     return data
       .map(token => {
         const { totalValue, unitPrice } = tokenFiatValues[token.info.id] || {};
-        const percentage = totalPortfolioValue ? (totalValue / Number(totalPortfolioValue)) * 100 : 0;
+        const portfolioPercentage = totalPortfolioValue ? (totalValue / Number(totalPortfolioValue)) * 100 : 0;
         const isPrimaryToken = token.id === '-';
 
         const { open: open24, close: close24 } = getTokenActivityChange(token.info.id, data24h, isPrimaryToken);
@@ -76,7 +82,7 @@ export const useProcessedTokenData = ({ data, ptActivity, data24h, data7d, data3
 
         return {
           ...token,
-          percentage,
+          portfolioPercentage,
           totalAmount: totalValue,
           price: totalValue === 0 ? 0 : unitPrice,
           '24h': changePercent24,
@@ -86,22 +92,16 @@ export const useProcessedTokenData = ({ data, ptActivity, data24h, data7d, data3
         };
       })
       .sort((a, b) => {
-        // If both tokens have special names, sort them by percentage
-        if (a.isSpecialName && b.isSpecialName) {
-          return Number(b.percentage) - Number(a.percentage);
+        // Handle case when both tokens have special names and 0 portfolioPercentage
+        // They should be considered equal to maintain comparator antisymmetry
+        if (a.isSpecialName && a.portfolioPercentage === 0 && b.isSpecialName && b.portfolioPercentage === 0) {
+          return 0;
         }
-        // If only one token has a special name but has percentage > 0, still sort it normally
-        if (a.isSpecialName && a.percentage > 0 && !b.isSpecialName) {
-          return Number(b.percentage) - Number(a.percentage);
-        }
-        if (b.isSpecialName && b.percentage > 0 && !a.isSpecialName) {
-          return Number(b.percentage) - Number(a.percentage);
-        }
-        // Move tokens with special names and 0 percentage to the bottom
-        if (a.isSpecialName && a.percentage === 0) return 1;
-        if (b.isSpecialName && b.percentage === 0) return -1;
-        // Default sorting by percentage
-        return Number(b.percentage) - Number(a.percentage);
+        // Move tokens with special names and 0 portfolioPercentage to the bottom
+        if (a.isSpecialName && a.portfolioPercentage === 0) return 1;
+        if (b.isSpecialName && b.portfolioPercentage === 0) return -1;
+        // Default sorting by portfolioPercentage
+        return Number(b.portfolioPercentage) - Number(a.portfolioPercentage);
       });
   }, [data, ptActivity, data24h, data7d, data30d, primaryTokenInfo, ptTokenDataInterval7d, ptTokenDataInterval1M]);