Merge branch 'develop' into fix/yoext-1545/dark-level-complexity

Emurgo · Dec 20, 2024 · cdaafac · cdaafac
2 parents e4bf670 + 5727865
commit cdaafac
Show file tree

Hide file tree

Showing 14 changed files with 177 additions and 112 deletions.
diff --git a/packages/yoroi-extension/app/UI/features/portfolio/module/PortfolioContextProvider.tsx b/packages/yoroi-extension/app/UI/features/portfolio/module/PortfolioContextProvider.tsx
@@ -10,6 +10,20 @@ import {
   defaultPortfolioState,
 } from './state';
 
+export const PortfolioDetailsTab = {
+  Performance: 'Performance',
+  Overview: 'Overview',
+  Transactions: 'Transactions',
+} as const;
+export type PortfolioDetailsTab = typeof PortfolioDetailsTab[keyof typeof PortfolioDetailsTab];
+
+export const PortfolioListTab = {
+  Wallet: 'Wallet',
+  Dapps: 'Dapps',
+} as const;
+
+export type PortfolioListTab = typeof PortfolioListTab[keyof typeof PortfolioListTab];
+
 import BuySellDialog from '../../../../components/buySell/BuySellDialog';
 import { DEFAULT_FIAT_PAIR } from '../common/helpers/constants';
 

diff --git a/...sion/app/UI/features/portfolio/useCases/TokenDetails/ChartDetails/MarketPriceOverview.tsx b/...sion/app/UI/features/portfolio/useCases/TokenDetails/ChartDetails/MarketPriceOverview.tsx
@@ -27,21 +27,18 @@ export const TokenMarketPriceOverview = ({ chartData, detailInfo, tokenInfo, isD
   // Fetch data based on the selected interval
 
   const ptActivity = useCurrencyPairing().ptActivity;
-  const { changeValue, changePercent } = priceChange(ptActivity.open, ptActivity.close);
+  const { changeValue, changePercent } = priceChange(ptActivity.open, ptActivity?.close);
 
   const {
     tokenActivity: { data24h },
   } = usePortfolioTokenActivity();
 
-  const deltaPriceChange =
-    !isPrimaryToken &&
-    !isEmpty(data24h) &&
-    data24h[tokenInfo?.info?.id][1].price.close - data24h[tokenInfo?.info?.id][1].price.open;
+  const deltaPriceChange = !isPrimaryToken && !isEmpty(data24h) && data24h[tokenInfo?.info?.id][1].price?.change;
 
   const priceChangeProcent = isPrimaryToken ? detailInfo?.changePercent || changePercent : !isEmpty(data24h) && deltaPriceChange;
   const priceChangeValue = isPrimaryToken
     ? detailInfo?.changeValue || changeValue
-    : !isEmpty(data24h) && data24h[tokenInfo?.info?.id][1].price.close;
+    : !isEmpty(data24h) && data24h[tokenInfo?.info?.id][1].price?.close - data24h[tokenInfo?.info?.id][1].price?.open;
   return (
     <Stack
       direction="row"
@@ -80,14 +77,18 @@ export const TokenMarketPriceOverview = ({ chartData, detailInfo, tokenInfo, isD
 };
 
 const TokenPrice = ({ isPrimaryToken, unitOfAccount, secondaryTokenActivity, ptActivity, detailInfo, isDragging }) => {
-  const tokenPrice = isPrimaryToken ? ptActivity.close : secondaryTokenActivity && secondaryTokenActivity[1].price.close;
+  const tokenPrice = isPrimaryToken ? ptActivity.close : secondaryTokenActivity && secondaryTokenActivity[1].price?.close;
 
-  const sPrice = secondaryTokenActivity && secondaryTokenActivity[1].price.close;
+  const sPrice = secondaryTokenActivity && secondaryTokenActivity[1].price?.close;
 
   const ptPrice = isDragging ? detailInfo.value : ptActivity.close;
 
   const ptUnitPrice = sPrice * ptPrice;
 
+  if (!isPrimaryToken && isNaN(ptUnitPrice)) {
+    return <Typography variant="caption">-</Typography>;
+  }
+
   if (tokenPrice == null) return <Skeleton variant="text" width="50px" height="30px" />;
 
   return (
@@ -102,6 +103,8 @@ const TokenPrice = ({ isPrimaryToken, unitOfAccount, secondaryTokenActivity, ptA
 
 const PriceChangeChip = ({ value }: { value: number }) => {
   const theme: any = useTheme();
+  const valueToDisplay = value >= 0 ? formatNumber(value) : formatNumber(-1 * value);
+
   return (
     <>
       <Chip
@@ -114,7 +117,7 @@ const PriceChangeChip = ({ value }: { value: number }) => {
               <Icon.ChipArrowDown fill={theme.palette.ds.sys_magenta_700} />
             ) : null}
             {/* @ts-ignore */}
-            <Typography variant="caption1">{value >= 0 ? formatNumber(value) : formatNumber(-1 * value)}%</Typography>
+            <Typography variant="caption1">{valueToDisplay === 'NaN' ? '-' : valueToDisplay}%</Typography>
           </Stack>
         }
       />
@@ -129,7 +132,7 @@ const PriceValueChip = ({ value, unitOfAccount }: { value: number; unitOfAccount
         label={
           <Typography variant="caption">
             {value > 0 && '+'}
-            {formatNumber(value)} {unitOfAccount}
+            {formatNumber(value) === 'NaN' ? '-' : formatNumber(value)} {unitOfAccount}
           </Typography>
         }
       />

diff --git a/.../yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/HeaderDetails/Header.tsx b/.../yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/HeaderDetails/Header.tsx
@@ -35,10 +35,14 @@ const HeaderSection = ({ tokenInfo }: Props): JSX.Element => {
 
   const totaPriceCalc = React.useMemo(() => {
     if (!isPrimaryToken && !isEmpty(data24h)) {
-      const tokenPrice = data24h && data24h[tokenInfo.info.id][1]?.price.close;
+      const tokenPrice = data24h && data24h[tokenInfo.info.id][1]?.price?.close;
       const tokenQuantityAsBigInt = bigNumberToBigInt(new BigNumber(tokenInfo.quantity));
       const tokenDecimals = !isPrimaryToken && tokenInfo.info.numberOfDecimals;
 
+      if (tokenPrice === undefined && !isPrimaryToken) {
+        return '-';
+      }
+
       const totaPrice = atomicBreakdown(tokenQuantityAsBigInt, tokenDecimals)
         .bn.times(tokenPrice ?? 1)
         .times(String(ptPrice))

diff --git a/...n/app/UI/features/portfolio/useCases/TokenDetails/OverviewPerformanceDetails/Overview.tsx b/...n/app/UI/features/portfolio/useCases/TokenDetails/OverviewPerformanceDetails/Overview.tsx
@@ -28,6 +28,10 @@ const Overview = ({ tokenInfo }: Props): JSX.Element => {
           }}
           component="img"
           src={tokenInfo.info.image || tokenPng}
+          onError={e => {
+            // @ts-ignore
+            e.target.src = tokenPng;
+          }}
         ></Box>
 
         <Typography fontWeight="500" color="ds.gray_900">

diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/TokenDetails.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokenDetails/TokenDetails.tsx
@@ -1,10 +1,12 @@
 import { Box, Divider, Stack } from '@mui/material';
 import { styled, useTheme } from '@mui/material/styles';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { ampli } from '../../../../../../ampli';
 import { BackButton, Card } from '../../../../components';
 import NavigationButton from '../../common/components/NavigationButton';
 import { useNavigateTo } from '../../common/hooks/useNavigateTo';
 import { useStrings } from '../../common/hooks/useStrings';
+import { PortfolioDetailsTab } from '../../module/PortfolioContextProvider';
 import { TokenChartInterval } from './ChartDetails/TokenChartInterval';
 import HeaderSection from './HeaderDetails/Header';
 import OverviewPerformance from './OverviewPerformanceDetails/OverviewPerformance';
@@ -28,6 +30,10 @@ const TokenDetails = ({ tokenInfo }: Props): JSX.Element => {
   const strings = useStrings();
   const isPrimaryToken: boolean = tokenInfo.id === '-';
 
+  useEffect(() => {
+    ampli.portfolioTokenDetails({ token_details_tab: PortfolioDetailsTab.Overview });
+  }, []);
+
   return (
     <Box sx={{ width: '100%' }}>
       <Header>

diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/TableColumnsChip.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/TableColumnsChip.tsx
@@ -179,7 +179,10 @@ export const TokenPriceTotal = ({ token, secondaryToken24Activity }) => {
       .toFormat(decimals);
 
   const totalTicker = isPrimary && showingAda ? accountPair?.to.name : accountPair?.from.name;
-  const totalTokenPrice = isPrimary && showingAda ? '' : `${totaPrice} ${totalTicker || DEFAULT_FIAT_PAIR}`;
+  const totalTokenPrice =
+    isPrimary && showingAda
+      ? ''
+      : `${isPrimary ? totaPrice : tokenPrice !== undefined ? totaPrice : '-'} ${totalTicker || DEFAULT_FIAT_PAIR}`;
 
   return (
     <Stack direction="row" spacing={theme.spacing(1.5)} sx={{ float: 'right' }}>

diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/useProcentage.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/TokensTable/useProcentage.tsx
@@ -36,7 +36,8 @@ export const useProcessedTokenData = ({ data, ptActivity, data24h, data7d, data3
     const unitPrice = parseFloat((tokenPrice * ptActivity?.close || 1).toFixed(4));
     const primaryTokenFiatTotalAmount = formatValue(primaryTokenInfo.quantity.multipliedBy(String(ptActivity?.close)));
 
-    return { totalValue: isPrimaryToken ? primaryTokenFiatTotalAmount : totalValue, unitPrice };
+    const tokenValueDisplay = secondaryToken24Activity && secondaryToken24Activity[0] === 500 ? 0 : totalValue;
+    return { totalValue: isPrimaryToken ? primaryTokenFiatTotalAmount : tokenValueDisplay, unitPrice };
   };
 
   const getTokenActivityChange = (tokenId, activityData, isPrimaryToken) => {
@@ -81,9 +82,15 @@ export const useProcessedTokenData = ({ data, ptActivity, data24h, data7d, data3
           '24h': changePercent24,
           '1W': isPrimaryToken ? ptTokenDataInterval7d?.[167]?.changePercent : changePercent7d,
           '1M': isPrimaryToken ? ptTokenDataInterval1M?.[179]?.changePercent : changePercent30d,
+          isSpecialName: /^[^a-zA-Z]/.test(token.info.name), // Flag for names starting with numbers or weird characters
         };
       })
-      .sort((a, b) => b.percentage - a.percentage);
+      .sort((a, b) => {
+        // Move tokens with special names to the end
+        if (a.isSpecialName && !b.isSpecialName) return 1;
+        if (!a.isSpecialName && b.isSpecialName) return -1;
+        return b.percentage - a.percentage;
+      });
   }, [data, ptActivity, data24h, data7d, data30d, primaryTokenInfo, ptTokenDataInterval7d, ptTokenDataInterval1M]);
 
   return processedData;

diff --git a/packages/yoroi-extension/app/UI/features/portfolio/useCases/Wallet/PortfolioWallet.tsx b/packages/yoroi-extension/app/UI/features/portfolio/useCases/Wallet/PortfolioWallet.tsx
@@ -1,12 +1,18 @@
 import { Stack, Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import React, { useEffect, useState } from 'react';
+import { ampli } from '../../../../../../ampli/index';
 import PortfolioHeader from '../../common/components/PortfolioHeader';
 import WelcomeBanner from '../../common/components/WelcomeBanner';
 import { useStrings } from '../../common/hooks/useStrings';
-import { usePortfolio } from '../../module/PortfolioContextProvider';
+import { PortfolioListTab, usePortfolio } from '../../module/PortfolioContextProvider';
 import StatsTable from '../TokensTable/StatsTable';
 
+const tabs = {
+  [PortfolioListTab.Wallet]: 'Wallet Token',
+  [PortfolioListTab.Dapps]: 'Dapps Token',
+} as const;
+
 const PortfolioWallet = (): JSX.Element => {
   const theme = useTheme();
   const strings = useStrings();
@@ -16,6 +22,10 @@ const PortfolioWallet = (): JSX.Element => {
   const [isLoading, _] = useState<boolean>(false);
   const [tokenList, setTokenList] = useState(ftAssetList);
 
+  useEffect(() => {
+    ampli.portfolioTokensListPageViewed({ tokens_tab: tabs[PortfolioListTab.Wallet] });
+  }, []);
+
   useEffect(() => {
     if (!keyword || showWelcomeBanner) {
       setTokenList(ftAssetList);
@@ -35,6 +45,18 @@ const PortfolioWallet = (): JSX.Element => {
     } else {
       setTokenList([]);
     }
+
+    let timeout: ReturnType<typeof setTimeout> | undefined;
+    const sendMetrics = () => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        ampli.portfolioTokensListSearchActivated({ search_term: lowercaseKeyword });
+      }, 500); // 0.5s requirement
+    };
+
+    if (lowercaseKeyword.length > 0) sendMetrics();
+
+    return () => clearTimeout(timeout);
   }, [keyword]);
 
   return (

diff --git a/packages/yoroi-extension/app/components/transfer/BaseTransferPage.js b/packages/yoroi-extension/app/components/transfer/BaseTransferPage.js
@@ -55,7 +55,6 @@ export default class BaseTransferPage extends Component<Props> {
         actions={actions}
         closeOnOverlayClick={false}
         onClose={onBack}
-        className={undefined}
         backButton={<DialogBackButton onBack={onBack} />}
       >
         <Box>

diff --git a/packages/yoroi-extension/app/components/transfer/cards/TransferTypeSelect.js b/packages/yoroi-extension/app/components/transfer/cards/TransferTypeSelect.js
@@ -23,6 +23,10 @@ const messages = defineMessages({
     id: 'wallet.transfer.subInstruction',
     defaultMessage: '!!!Learn more about Byron and Shelley eras and how to claim ADA on our',
   },
+  faqAbbreviation: {
+    id: 'settings.support.faq.abbreviation',
+    defaultMessage: '!!!FAQ',
+  }
 });
 
 @observer
@@ -39,7 +43,7 @@ export default class TransferTypeSelect extends Component<Props> {
         onClick={event => handleExternalLinkClick(event)}
         id="settings:support-faq-link"
       >
-        FAQ
+        {intl.formatMessage(messages.faqAbbreviation)}
       </Link>
     );