[CCDWA-167] EURO conversion on CCD token detail screen

Author: Ivan-Mahda

packages/browser-wallet/src/popup/popupX/pages/MainPage/MainPage.tsx

@@ -11,7 +11,7 @@ import { useFlattenedAccountTokens } from '@popup/pages/Account/Tokens/utils';
 import { getMetadataUnique } from '@shared/utils/token-helpers';
 import { contractBalancesFamily } from '@popup/store/token';
 import { useBlockChainParameters } from '@popup/shared/BlockChainParametersProvider';
-import { formatTokenAmount } from '@popup/popupX/shared/utils/helpers';
+import { displayCcdAsEur, formatTokenAmount } from '@popup/popupX/shared/utils/helpers';
 import Page from '@popup/popupX/shared/Page';
 import Text from '@popup/popupX/shared/Text';
 import Button from '@popup/popupX/shared/Button';
@@ -46,21 +46,6 @@ function AccountTokenBalance({ decimals, tokenId, contractAddress, accountAddres
     return <span>{balance}</span>;
 }
 
-/** Convert and display an amount of CCD to EUR using an exchange rate. */
-function displayCcdAsEur(microCcdPerEur: Ratio, microCcd: bigint, decimals: number, eurPostfix?: boolean) {
-    const eur = Number(microCcdPerEur.denominator * microCcd) / Number(microCcdPerEur.numerator);
-    const eurFormatter = new Intl.NumberFormat(undefined, {
-        style: eurPostfix ? undefined : 'currency',
-        currency: 'EUR',
-        maximumFractionDigits: decimals,
-    });
-    if (eurPostfix) {
-        return `${eurFormatter.format(eur)} EUR`;
-    }
-
-    return eurFormatter.format(eur);
-}
-
 function mainPageCcdDisplay(microCcdAmount: bigint) {
     return formatTokenAmount(microCcdAmount, 6, 2, 2);
 }

packages/browser-wallet/src/popup/popupX/pages/TokenDetails/TokenDetails.scss

@@ -3,6 +3,10 @@
         font-family: $t-font-family-ibm;
     }
 
+    .token-balance__exchange-rate {
+        margin-top: rem(4px);
+    }
+
     &__stake {
         display: flex;
         flex-direction: column;

packages/browser-wallet/src/popup/popupX/pages/TokenDetails/TokenDetailsCcd.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { AccountAddress } from '@concordium/web-sdk';
+import { AccountAddress, Ratio } from '@concordium/web-sdk';
 import { absoluteRoutes, sendFundsRoute } from '@popup/popupX/constants/routes';
 import Page from '@popup/popupX/shared/Page';
 import Text from '@popup/popupX/shared/Text';
@@ -16,6 +16,8 @@ import Clock from '@assets/svgX/clock.svg';
 import Percent from '@assets/svgX/percent.svg';
 import ConcordiumLogo from '@assets/svgX/concordium-logo.svg';
 import { TokenPickerVariant } from '@popup/popupX/shared/Form/TokenAmount/View';
+import { displayCcdAsEur } from '@popup/popupX/shared/utils/helpers';
+import { useBlockChainParameters } from '@popup/shared/BlockChainParametersProvider';
 
 const zeroBalance: Omit<PublicAccountAmounts, 'scheduled'> = {
     total: 0n,
@@ -43,6 +45,7 @@ function useCcdInfo(credential: WalletCredential) {
                 atDisposal: displayAsCcd(balances.atDisposal, false, true),
                 staked: displayAsCcd(balances.staked, false, true),
                 cooldown: displayAsCcd(balances.cooldown, false, true),
+                microCcdAmount: balances.total,
             };
         }
         return { total: null, atDisposal: null };
@@ -51,11 +54,24 @@ function useCcdInfo(credential: WalletCredential) {
     return tokenDetails;
 }
 
+function TokenExchange({ microCcdPerEur, balanceBase }: { microCcdPerEur?: Ratio; balanceBase?: bigint }) {
+    const isNoExchange = microCcdPerEur === undefined || balanceBase === undefined;
+
+    return isNoExchange ? null : (
+        <div className="token-balance__exchange-rate">
+            <Text.Capture>{displayCcdAsEur(microCcdPerEur, balanceBase, 2)}</Text.Capture>
+        </div>
+    );
+}
+
 function TokenDetailsCcd({ credential }: { credential: WalletCredential }) {
     const { t } = useTranslation('x', { keyPrefix: 'tokenDetails' });
 
     const tokenDetails = useCcdInfo(credential);
 
+    const chainParameters = useBlockChainParameters();
+    const microCcdPerEur = chainParameters?.microGTUPerEuro;
+
     const nav = useNavigate();
     const navToSend = () =>
         nav(sendFundsRoute(AccountAddress.fromBase58(credential.address)), {
@@ -72,6 +88,7 @@ function TokenDetailsCcd({ credential }: { credential: WalletCredential }) {
                 <Text.DynamicSize baseFontSize={32} baseTextLength={17} className="heading_big">
                     {tokenDetails.total}
                 </Text.DynamicSize>
+                <TokenExchange microCcdPerEur={microCcdPerEur} balanceBase={tokenDetails.microCcdAmount} />
                 <div className="token-details-x__stake">
                     <div className="token-details-x__stake_group">
                         <Text.Capture>{t('earning')}</Text.Capture>

packages/browser-wallet/src/popup/popupX/shared/utils/helpers.ts

@@ -1,4 +1,4 @@
-import { CcdAmount } from '@concordium/web-sdk';
+import { CcdAmount, Ratio } from '@concordium/web-sdk';
 import { CCD_METADATA } from '@shared/constants/token-metadata';
 import { useLocation } from 'react-router-dom';
 import { displayUrl } from '@popup/shared/utils/string-helpers';
@@ -60,3 +60,18 @@ export function useUrlDisplay() {
     }
     return [displayUrl(url), url];
 }
+
+/** Convert and display an amount of CCD to EUR using an exchange rate. */
+export function displayCcdAsEur(microCcdPerEur: Ratio, microCcd: bigint, decimals: number, eurPostfix?: boolean) {
+    const eur = Number(microCcdPerEur.denominator * microCcd) / Number(microCcdPerEur.numerator);
+    const eurFormatter = new Intl.NumberFormat(undefined, {
+        style: eurPostfix ? undefined : 'currency',
+        currency: 'EUR',
+        maximumFractionDigits: decimals,
+    });
+    if (eurPostfix) {
+        return `${eurFormatter.format(eur)} EUR`;
+    }
+
+    return eurFormatter.format(eur);
+}