GIX-2154: Set mockCkETHToken to 18 decimals (#3935)

# Motivation

`TokenAmount` only accepts 8 decimals so to be able to upgrade ic-js, we
set the number of decimals on `mockCkETHToken` temporarily to 8.
Now we want to set it back to 18 which is allowed by using
`TokenAmountV2`.
This means we have to accept `TokenAmountV2` in many places.

This PR is not enough to make ENABLE_CKETH work again, but it's big
enough already.

# Changes

1. Make some components accept `TokenAmountV2` and some component both
`TokenAmount | TokenAmountV2` to limit the spread of the change.
2. Add `formatTokenV2` which accepts both `TokenAmount | TokenAmountV2`
but truncates decimals > 8 (for now?) and then calls `formatToken` with
a correctly scaled amount.
3. Add `toTokenAmountV2` which accepts both `TokenAmount |
TokenAmountV2` and return `TokenAmountV2`.
4. Make `numberToUlps` use `TokenAmountV2` as commented in a TODO.

# Tests

1. Updated unit tests that failed because of the changes.
2. Added tests for `formatTokenV2` and `toTokenAmountV2`.
3. Enabled tests for `numberToUlps` that were previously failing.

# Todos

- [ ] Add entry to changelog (if necessary).
not necessary

frontend/src/lib/components/accounts/AccountCard.svelte

@@ -5,7 +5,7 @@
   import IdentifierHash from "$lib/components/ui/IdentifierHash.svelte";
   import AccountBadge from "./AccountBadge.svelte";
   import { nonNullish } from "@dfinity/utils";
-  import { TokenAmount, type Token } from "@dfinity/utils";
+  import { TokenAmountV2, type Token } from "@dfinity/utils";
   import { buildWalletUrl } from "$lib/utils/navigation.utils";
   import { pageStore } from "$lib/derived/page.derived";
 
@@ -14,9 +14,9 @@
   export let role: "button" | "link" = "link";
 
   let identifier: string;
-  let balanceE8s: bigint;
+  let balanceUlps: bigint;
 
-  $: ({ identifier, balanceE8s } = account);
+  $: ({ identifier, balanceE8s: balanceUlps } = account);
 
   let href: string | undefined;
   $: href =
@@ -40,8 +40,8 @@
   {#if nonNullish(token)}
     <AmountDisplay
       title
-      amount={TokenAmount.fromE8s({
-        amount: balanceE8s,
+      amount={TokenAmountV2.fromUlps({
+        amount: balanceUlps,
         token,
       })}
     />

frontend/src/lib/components/accounts/IcrcWalletPage.svelte

@@ -6,7 +6,7 @@
   import { debugSelectedAccountStore } from "$lib/derived/debug.derived";
   import { findAccount, hasAccounts } from "$lib/utils/accounts.utils";
   import { icrcAccountsStore } from "$lib/stores/icrc-accounts.store";
-  import { TokenAmount, isNullish, nonNullish } from "@dfinity/utils";
+  import { TokenAmountV2, isNullish, nonNullish } from "@dfinity/utils";
   import { syncAccounts as syncWalletAccounts } from "$lib/services/wallet-accounts.services";
   import { toastsError } from "$lib/stores/toasts.store";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
@@ -134,7 +134,7 @@
           <WalletPageHeading
             accountName={$selectedAccountStore.account.name ??
               $i18n.accounts.main}
-            balance={TokenAmount.fromE8s({
+            balance={TokenAmountV2.fromUlps({
               amount: $selectedAccountStore.account.balanceE8s,
               token,
             })}

frontend/src/lib/components/accounts/WalletPageHeading.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { nonNullish, type TokenAmount } from "@dfinity/utils";
+  import { nonNullish, type TokenAmount, TokenAmountV2 } from "@dfinity/utils";
   import PageHeading from "../common/PageHeading.svelte";
   import { SkeletonText } from "@dfinity/gix-components";
   import AmountDisplay from "../ic/AmountDisplay.svelte";
@@ -9,19 +9,19 @@
   import type { IntersectingDetail } from "$lib/types/intersection.types";
   import { layoutTitleStore } from "$lib/stores/layout.store";
   import { i18n } from "$lib/stores/i18n";
-  import { formatToken } from "$lib/utils/token.utils";
+  import { formatTokenV2 } from "$lib/utils/token.utils";
   import IdentifierHash from "../ui/IdentifierHash.svelte";
   import Tooltip from "../ui/Tooltip.svelte";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
 
-  export let balance: TokenAmount | undefined = undefined;
+  export let balance: TokenAmount | TokenAmountV2 | undefined = undefined;
   export let accountName: string;
   export let principal: Principal | undefined = undefined;
 
   let detailedAccountBalance: string | undefined;
   $: detailedAccountBalance = nonNullish(balance)
-    ? formatToken({
-        value: balance.toE8s(),
+    ? formatTokenV2({
+        value: balance,
         detailed: true,
       })
     : undefined;
@@ -36,8 +36,8 @@
       header:
         intersecting && nonNullish(balance)
           ? $i18n.wallet.title
-          : `${accountName} - ${formatToken({
-              value: balance?.toE8s() ?? 0n,
+          : `${accountName} - ${formatTokenV2({
+              value: balance,
             })} ${balance?.token.symbol}`,
     });
   };

frontend/src/lib/components/ic/AmountDisplay.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import type { TokenAmount } from "@dfinity/utils";
-  import { formatToken } from "$lib/utils/token.utils";
+  import type { TokenAmount, TokenAmountV2 } from "@dfinity/utils";
+  import { formatTokenV2 } from "$lib/utils/token.utils";
   import { Copy } from "@dfinity/gix-components";
 
   // TODO: should we expose two properties - an amount in bigint and a token Token - and build the TokenAmount.fromE8s in this component?
-  export let amount: TokenAmount;
+  export let amount: TokenAmount | TokenAmountV2;
   export let label: string | undefined = undefined;
   export let inline = false;
   export let singleLine = false;
@@ -31,12 +31,12 @@
     data-tid="token-value"
     class="value"
     class:tabular-num={detailed === "height_decimals"}
-    >{`${sign}${formatToken({ value: amount.toE8s(), detailed })}`}</span
+    >{`${sign}${formatTokenV2({ value: amount, detailed })}`}</span
   >
   <span class="label">{label !== undefined ? label : amount.token.symbol}</span
   >{#if copy}
     {" "}
-    <Copy value={formatToken({ value: amount.toE8s(), detailed: true })} />
+    <Copy value={formatTokenV2({ value: amount, detailed: true })} />
   {/if}
 </div>
 

frontend/src/lib/components/transaction/TransactionForm.svelte

@@ -8,10 +8,13 @@
     invalidAddress,
     isAccountHardwareWallet,
   } from "$lib/utils/accounts.utils";
-  import { getMaxTransactionAmount } from "$lib/utils/token.utils";
+  import {
+    getMaxTransactionAmount,
+    toTokenAmountV2,
+  } from "$lib/utils/token.utils";
   import AmountInput from "$lib/components/ui/AmountInput.svelte";
   import SelectDestinationAddress from "$lib/components/accounts/SelectDestinationAddress.svelte";
-  import { TokenAmount, type Token } from "@dfinity/utils";
+  import { TokenAmount, TokenAmountV2, type Token } from "@dfinity/utils";
   import { NotEnoughAmountError } from "$lib/types/common.errors";
   import type { Principal } from "@dfinity/principal";
   import { translate } from "$lib/utils/i18n.utils";
@@ -34,7 +37,7 @@
   export let amount: number | undefined = undefined;
   export let disableContinue = false;
   export let token: Token;
-  export let transactionFee: TokenAmount;
+  export let transactionFee: TokenAmountV2 | TokenAmount;
   // TODO: Handle min and max validations inline: https://dfinity.atlassian.net/browse/L2-798
   export let maxAmount: bigint | undefined = undefined;
   export let skipHardwareWallets = false;
@@ -62,7 +65,7 @@
   let max = 0;
   $: max = getMaxTransactionAmount({
     balance: selectedAccount?.balanceE8s,
-    fee: transactionFee.toE8s(),
+    fee: toTokenAmountV2(transactionFee).toUlps(),
     maxAmount,
   });
   const addMax = () => (amount = max);
@@ -89,10 +92,10 @@
       return;
     }
     try {
-      const tokens = TokenAmount.fromNumber({ amount, token });
+      const tokens = TokenAmountV2.fromNumber({ amount, token });
       assertEnoughAccountFunds({
         account: selectedAccount,
-        amountE8s: tokens.toE8s() + transactionFee.toE8s(),
+        amountE8s: tokens.toUlps() + toTokenAmountV2(transactionFee).toUlps(),
       });
       errorMessage = validateAmount({ amount, selectedAccount });
     } catch (error: unknown) {

frontend/src/lib/components/transaction/TransactionFormFee.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { i18n } from "$lib/stores/i18n";
   import AmountDisplay from "$lib/components/ic/AmountDisplay.svelte";
-  import type { TokenAmount } from "@dfinity/utils";
+  import type { TokenAmount, TokenAmountV2 } from "@dfinity/utils";
 
-  export let transactionFee: TokenAmount;
+  export let transactionFee: TokenAmount | TokenAmountV2;
 </script>
 
 <div data-tid="transaction-form-fee">

frontend/src/lib/components/transaction/TransactionFromAccount.svelte

@@ -5,7 +5,7 @@
   import AmountDisplay from "$lib/components/ic/AmountDisplay.svelte";
   import type { Account } from "$lib/types/account";
   import type { Principal } from "@dfinity/principal";
-  import { TokenAmount, type Token } from "@dfinity/utils";
+  import { TokenAmountV2, type Token } from "@dfinity/utils";
   import { nonNullish } from "@dfinity/utils";
 
   export let rootCanisterId: Principal;
@@ -34,7 +34,7 @@
       {#if nonNullish(selectedAccount)}
         <AmountDisplay
           singleLine
-          amount={TokenAmount.fromE8s({
+          amount={TokenAmountV2.fromUlps({
             amount: selectedAccount.balanceE8s,
             token,
           })}

frontend/src/lib/components/transaction/TransactionReceivedAmount.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { TokenAmount, type Token } from "@dfinity/utils";
+  import { TokenAmountV2, type Token } from "@dfinity/utils";
   import TransactionReceivedTokenAmount from "$lib/components/transaction/TransactionReceivedTokenAmount.svelte";
 
   export let amount: number;
   export let token: Token;
 
-  let tokenAmount: TokenAmount;
-  $: tokenAmount = TokenAmount.fromNumber({
+  let tokenAmount: TokenAmountV2;
+  $: tokenAmount = TokenAmountV2.fromNumber({
     amount,
     token,
   });

frontend/src/lib/components/transaction/TransactionReceivedTokenAmount.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import type { TokenAmount } from "@dfinity/utils";
+  import type { TokenAmountV2, TokenAmount } from "@dfinity/utils";
   import { i18n } from "$lib/stores/i18n";
   import AmountDisplay from "$lib/components/ic/AmountDisplay.svelte";
 
-  export let amount: TokenAmount;
+  export let amount: TokenAmountV2 | TokenAmount;
   export let estimation = false;
   export let testId: string | undefined = undefined;
 </script>

frontend/src/lib/components/transaction/TransactionReview.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { TokenAmount, Token } from "@dfinity/utils";
+  import type { TokenAmountV2, TokenAmount, Token } from "@dfinity/utils";
   import { createEventDispatcher } from "svelte";
   import { busy } from "@dfinity/gix-components";
   import { i18n } from "$lib/stores/i18n";
@@ -13,7 +13,7 @@
 
   export let transaction: NewTransaction;
   export let disableSubmit: boolean;
-  export let transactionFee: TokenAmount;
+  export let transactionFee: TokenAmountV2 | TokenAmount;
   export let token: Token;
   export let selectedNetwork: TransactionNetwork | undefined = undefined;
   export let showLedgerFee = true;

frontend/src/lib/components/transaction/TransactionSource.svelte

@@ -3,13 +3,13 @@
   import AmountDisplay from "$lib/components/ic/AmountDisplay.svelte";
   import { KeyValuePair } from "@dfinity/gix-components";
   import type { Account } from "$lib/types/account";
-  import { TokenAmount, type Token } from "@dfinity/utils";
+  import { TokenAmountV2, type Token } from "@dfinity/utils";
 
   export let account: Account;
   export let token: Token;
 
-  let amount: TokenAmount;
-  $: amount = TokenAmount.fromE8s({
+  let amount: TokenAmountV2;
+  $: amount = TokenAmountV2.fromUlps({
     amount: account.balanceE8s,
     token,
   });

frontend/src/lib/components/transaction/TransactionSummary.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
-  import { TokenAmount, type Token } from "@dfinity/utils";
+  import { TokenAmount, TokenAmountV2, type Token } from "@dfinity/utils";
   import { i18n } from "$lib/stores/i18n";
   import { IconSouth, KeyValuePair } from "@dfinity/gix-components";
   import AmountDisplay from "$lib/components/ic/AmountDisplay.svelte";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
+  import { toTokenAmountV2 } from "$lib/utils/token.utils";
 
   export let amount: number;
   export let token: Token;
-  export let transactionFee: TokenAmount;
+  export let transactionFee: TokenAmount | TokenAmountV2;
   export let showLedgerFee = true;
 
   // If we made it this far, the number is valid.
-  let tokenAmount: TokenAmount;
-  $: tokenAmount = TokenAmount.fromNumber({
+  let tokenAmount: TokenAmountV2;
+  $: tokenAmount = TokenAmountV2.fromNumber({
     amount,
     token,
   });
@@ -26,10 +27,11 @@
   );
 
   let totalDeducted: bigint;
-  $: totalDeducted = tokenAmount.toE8s() + transactionFee.toE8s();
+  $: totalDeducted =
+    tokenAmount.toUlps() + toTokenAmountV2(transactionFee).toUlps();
 
-  let tokenTotalDeducted: TokenAmount;
-  $: tokenTotalDeducted = TokenAmount.fromE8s({
+  let tokenTotalDeducted: TokenAmountV2;
+  $: tokenTotalDeducted = TokenAmountV2.fromUlps({
     amount: totalDeducted,
     token,
   });

frontend/src/lib/modals/accounts/IcrcTokenAccountsModals.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { TokenAmount } from "@dfinity/utils";
+  import { TokenAmountV2 } from "@dfinity/utils";
   import IcrcTokenTransactionModal from "./IcrcTokenTransactionModal.svelte";
   import type { IcrcTokenModalProps } from "$lib/types/icrc-accounts.modal";
 
@@ -23,7 +23,7 @@
     on:nnsClose={closeModal}
     ledgerCanisterId={modal.data.universeId}
     token={modal.data.token}
-    transactionFee={TokenAmount.fromE8s({
+    transactionFee={TokenAmountV2.fromUlps({
       amount: modal.data.token.fee,
       token: modal.data.token,
     })}

frontend/src/lib/modals/accounts/IcrcTokenTransactionModal.svelte

@@ -10,7 +10,7 @@
   import type { Account } from "$lib/types/account";
   import type { WizardStep } from "@dfinity/gix-components";
   import type { TransactionInit } from "$lib/types/transaction";
-  import { TokenAmount, nonNullish } from "@dfinity/utils";
+  import { TokenAmountV2, nonNullish } from "@dfinity/utils";
   import type { Principal } from "@dfinity/principal";
   import { icrcTransferTokens } from "$lib/services/icrc-accounts.services";
   import type { IcrcTokenMetadata } from "$lib/types/icrc";
@@ -20,7 +20,7 @@
   export let selectedAccount: Account | undefined = undefined;
   export let ledgerCanisterId: Principal;
   export let token: IcrcTokenMetadata;
-  export let transactionFee: TokenAmount;
+  export let transactionFee: TokenAmountV2;
   export let reloadSourceAccount: (() => void) | undefined = undefined;
 
   let transactionInit: TransactionInit = {

frontend/src/lib/modals/transaction/TransactionModal.svelte

@@ -11,7 +11,12 @@
   import type { Account } from "$lib/types/account";
   import TransactionForm from "$lib/components/transaction/TransactionForm.svelte";
   import TransactionReview from "$lib/components/transaction/TransactionReview.svelte";
-  import { TokenAmount, ICPToken, type Token } from "@dfinity/utils";
+  import {
+    TokenAmount,
+    TokenAmountV2,
+    ICPToken,
+    type Token,
+  } from "@dfinity/utils";
   import type { Principal } from "@dfinity/principal";
   import type {
     TransactionInit,
@@ -43,7 +48,7 @@
   export let rootCanisterId: Principal;
   export let currentStep: WizardStep | undefined = undefined;
   export let token: Token = ICPToken;
-  export let transactionFee: TokenAmount;
+  export let transactionFee: TokenAmount | TokenAmountV2;
   export let disableContinue = false;
   export let disableSubmit = false;
   // Max amount accepted by the transaction without fees

frontend/src/lib/types/account.ts

@@ -22,6 +22,7 @@ export interface Account {
   identifier: AccountIdentifierText;
   // Main and HardwareWallet accounts have Principal
   principal?: Principal;
+  // TODO: GIX-2154 Rename E8s to Ulps.
   balanceE8s: bigint;
   // Subaccounts and HardwareWallets have name and subAccount
   name?: string;