BSC tokens and update ui kit format amount (#961)

* update ui kit format amount * update ui kit * update cypress with new format amount * wip: add bsc tokens * add addresses * fix test: asset on buildnet
massalabs · Jul 8, 2024 · 846ab8e · 846ab8e
1 parent 4a10fc9
commit 846ab8e
Show file tree

Hide file tree

Showing 18 changed files with 51 additions and 77 deletions.
diff --git a/internal/handler/wallet/get_all_assets_test.go b/internal/handler/wallet/get_all_assets_test.go
@@ -73,7 +73,7 @@ func getExpectedAssetsCount(t *testing.T) int {
 	counter := 0
 
 	for _, asset := range defaultAssets {
-		if asset.ChainID == 77658377 {
+		if asset.ChainID == 77658366 {
 			counter += 1
 		}
 	}

diff --git a/pkg/assets/default_assets.go b/pkg/assets/default_assets.go
@@ -174,23 +174,21 @@ const AssetsJSON = `[
 		"decimals": 18,
 		"MEXCSymbol": "USD",
 		"ChainID": 77658366
+	},
+	{
+		"address": "AS125oPLYRTtfVjpWisPZVTLjBhCFfQ1jDsi75XNtRm1NZux54eCj",
+		"name": "Wrapped Ether",
+		"symbol": "WETH.b",
+		"decimals": 18,
+		"MEXCSymbol": "ETHUSDT",
+		"ChainID": 77658377
+	},
+	{
+		"address": "AS12LKs9txoSSy8JgFJgV96m8k5z9pgzjYMYSshwN67mFVuj3bdUV",
+		"name": "Wrapped Binance USD",
+		"symbol": "USDT.b",
+		"decimals": 18,
+		"MEXCSymbol": "USD",
+		"ChainID": 77658377
 	}
 ]`
-
-// TODO: add the following assets with the addresses
-// {
-// 	"address": "",
-// 	"name": "Wrapped Ether",
-// 	"symbol": "WETH.b",
-// 	"decimals": 18,
-// 	"MEXCSymbol": "ETHUSDT",
-// 	"ChainID": 77658377
-// },
-// {
-// 	"address": "",
-// 	"name": "Wrapped Binance USD",
-// 	"symbol": "USDT.b",
-// 	"decimals": 18,
-// 	"MEXCSymbol": "USD",
-// 	"ChainID": 77658377
-// },
diff --git a/wails-frontend/package-lock.json b/wails-frontend/package-lock.json
diff --git a/wails-frontend/src/pages/PasswordPromptHandler/BuySellRoll/BuySellRoll.tsx b/wails-frontend/src/pages/PasswordPromptHandler/BuySellRoll/BuySellRoll.tsx
@@ -1,4 +1,4 @@
-import { formatStandard } from '@massalabs/react-ui-kit';
+import { formatAmount } from '@massalabs/react-ui-kit';
 import { massaToken } from '@massalabs/react-ui-kit/src/lib/massa-react/const';
 
 import { OPER_BUY_ROLL } from '@/const/operations';
@@ -42,7 +42,7 @@ export function BuySellRoll(props: SignBodyProps) {
       <div className="flex w-full items-center justify-between">
         <p>{Intl.t(label)}</p>
         <p>
-          {formatStandard(Coins)} {massaToken}
+          {formatAmount(Coins).full} {massaToken}
         </p>
       </div>
 

diff --git a/wails-frontend/src/pages/PasswordPromptHandler/CallSC/FTTransferInfo.tsx b/wails-frontend/src/pages/PasswordPromptHandler/CallSC/FTTransferInfo.tsx
@@ -1,5 +1,5 @@
 import { Args } from '@massalabs/massa-web3';
-import { formatFTAmount } from '@massalabs/react-ui-kit';
+import { formatAmount } from '@massalabs/react-ui-kit';
 import { maskAddress } from '@massalabs/react-ui-kit/src/lib/massa-react/utils';
 import { LogPrint } from '@wailsjs/runtime/runtime';
 
@@ -34,8 +34,7 @@ export function FTTransferInfo(props: FTTransferInfoProps) {
   return (
     <>
       <AmountBox>
-        {formatFTAmount(amount, asset.decimals).amountFormattedFull}{' '}
-        {asset.symbol}
+        {formatAmount(amount, asset.decimals).full} {asset.symbol}
       </AmountBox>
 
       <div className="flex justify-between w-full">

diff --git a/wails-frontend/src/pages/PasswordPromptHandler/ExecuteSC.tsx/ExecuteSc.tsx b/wails-frontend/src/pages/PasswordPromptHandler/ExecuteSC.tsx/ExecuteSc.tsx
@@ -1,4 +1,4 @@
-import { Tooltip, formatStandard } from '@massalabs/react-ui-kit';
+import { Tooltip, formatAmount } from '@massalabs/react-ui-kit';
 import { massaToken } from '@massalabs/react-ui-kit/src/lib/massa-react/const';
 import { FiAlertTriangle, FiInfo } from 'react-icons/fi';
 
@@ -82,7 +82,7 @@ export function ExecuteSC(props: SignBodyProps) {
           <p>{Intl.t('password-prompt.sign.max-coins')}</p>
         </div>
         <p>
-          {formatStandard(MaxCoins)} {massaToken}
+          {formatAmount(MaxCoins).full} {massaToken}
         </p>
       </div>
 

diff --git a/wails-frontend/src/pages/PasswordPromptHandler/SignComponentUtils/OperationCost.tsx b/wails-frontend/src/pages/PasswordPromptHandler/SignComponentUtils/OperationCost.tsx
@@ -7,7 +7,7 @@ import {
   InlineMoney,
   Tooltip,
 } from '@massalabs/react-ui-kit';
-import { formatStandard } from '@massalabs/react-ui-kit';
+import { formatAmount } from '@massalabs/react-ui-kit';
 import { massaToken } from '@massalabs/react-ui-kit/src/lib/massa-react/const';
 import BigNumber from 'bignumber.js';
 import {
@@ -132,7 +132,7 @@ export function OperationCost(props: OperationCostProps) {
       <div className="flex w-full justify-between pb-2">
         <p>{Intl.t('password-prompt.sign.operation-const')}</p>
         <p>
-          {formatStandard(operationCost)} {massaToken}
+          {formatAmount(operationCost).full} {massaToken}
         </p>
       </div>
 
@@ -200,7 +200,7 @@ export function OperationCost(props: OperationCostProps) {
                   <InlineMoney
                     customClass="mas-caption"
                     disabled
-                    value={formatStandard(coins)}
+                    value={formatAmount(coins).full}
                   />
                 </div>
               )}

diff --git a/wails-frontend/src/pages/PasswordPromptHandler/Transaction/Transaction.tsx b/wails-frontend/src/pages/PasswordPromptHandler/Transaction/Transaction.tsx
@@ -1,4 +1,4 @@
-import { formatStandard } from '@massalabs/react-ui-kit';
+import { formatAmount } from '@massalabs/react-ui-kit';
 import { massaToken } from '@massalabs/react-ui-kit/src/lib/massa-react/const';
 
 import Intl from '@/i18n/i18n';
@@ -43,7 +43,7 @@ export function Transaction(props: SignBodyProps) {
       </div>
 
       <AmountBox>
-        {formatStandard(Amount)} {massaToken}
+        {formatAmount(Amount).full} {massaToken}
       </AmountBox>
 
       <hr className="h-0.25 bg-neutral opacity-40 w-full" />

diff --git a/web-frontend/cypress/e2e/acceptance/home/send.cy.tsx b/web-frontend/cypress/e2e/acceptance/home/send.cy.tsx
@@ -113,7 +113,7 @@ describe('E2E | Acceptance | Home | Send', () => {
 
     it('should render balance and amount should equal account balance', () => {
       navigateToSendForm();
-      cy.get('[data-testid="available-amount"]').contains('1,000.000000000');
+      cy.get('[data-testid="available-amount"]').contains('1,000');
     });
 
     it('should send coins to address', () => {
@@ -136,7 +136,7 @@ describe('E2E | Acceptance | Home | Send', () => {
 
       cy.get('[data-testid="send-confirmation"]').should(
         'contain',
-        '550.123400000 MAS',
+        '550.1234 MAS',
       );
 
       cy.get('[data-testid="send-confirmation-recipient"]').contains(
@@ -153,28 +153,16 @@ describe('E2E | Acceptance | Home | Send', () => {
       navigateToSendForm();
 
       cy.get('[data-testid="send-percent-25"]').click();
-      cy.get('[data-testid="money-field"]').should(
-        'have.value',
-        '250.000000000',
-      );
+      cy.get('[data-testid="money-field"]').should('have.value', '250');
 
       cy.get('[data-testid="send-percent-50"]').click();
-      cy.get('[data-testid="money-field"]').should(
-        'have.value',
-        '500.000000000',
-      );
+      cy.get('[data-testid="money-field"]').should('have.value', '500');
 
       cy.get('[data-testid="send-percent-75"]').click();
-      cy.get('[data-testid="money-field"]').should(
-        'have.value',
-        '750.000000000',
-      );
+      cy.get('[data-testid="money-field"]').should('have.value', '750');
 
       cy.get('[data-testid="send-percent-100"]').click();
-      cy.get('[data-testid="money-field"]').should(
-        'have.value',
-        '999.990000000',
-      );
+      cy.get('[data-testid="money-field"]').should('have.value', '999.99');
       server.trackRequest = false;
     });
 

diff --git a/web-frontend/package-lock.json b/web-frontend/package-lock.json
diff --git a/web-frontend/src/pages/AccountSelect/AccountSelect.tsx b/web-frontend/src/pages/AccountSelect/AccountSelect.tsx
@@ -32,7 +32,7 @@ export default function AccountSelect() {
   }, [accounts, navigate, hasAccounts, error, isLoading]);
 
   function getFormattedBalance(account: AccountObject): string {
-    return formatAmount(account.candidateBalance).amountFormattedFull;
+    return formatAmount(account.candidateBalance).full;
   }
 
   return (

diff --git a/web-frontend/src/pages/Home/Home.tsx b/web-frontend/src/pages/Home/Home.tsx
@@ -47,9 +47,7 @@ export default function Home() {
 
   const unformattedBalance = account?.candidateBalance ?? '0';
   const balance = parseInt(unformattedBalance);
-  const formattedBalance = formatAmount(
-    balance.toString(),
-  ).amountFormattedPreview;
+  const formattedBalance = formatAmount(balance.toString()).preview;
 
   return (
     <WalletLayout menuItem={MenuItem.Home}>

diff --git a/web-frontend/src/pages/TransferCoins/ReceiveCoins/GenerateLink.tsx b/web-frontend/src/pages/TransferCoins/ReceiveCoins/GenerateLink.tsx
@@ -41,8 +41,7 @@ function GenerateLink(props: GenerateLinkProps) {
   const [selectedAsset, setSelectedAsset] = useState<Asset | undefined>();
 
   const formattedBalance = selectedAsset
-    ? formatAmount(selectedAsset.balance || '', selectedAsset.decimals)
-        .amountFormattedFull
+    ? formatAmount(selectedAsset.balance || '', selectedAsset.decimals).full
     : '';
 
   function validate(formObject: MoneyForm) {

diff --git a/web-frontend/src/pages/TransferCoins/SendCoins/AssetSelector.tsx b/web-frontend/src/pages/TransferCoins/SendCoins/AssetSelector.tsx
@@ -42,7 +42,7 @@ export function AssetSelector(props: AssetSelectorProps) {
       const formattedBalance = formatAmount(
         asset.balance || '',
         asset.decimals,
-      ).amountFormattedFull;
+      ).full;
       return {
         itemPreview: asset.symbol,
         item: (

diff --git a/web-frontend/src/pages/TransferCoins/SendCoins/ContactList.tsx b/web-frontend/src/pages/TransferCoins/SendCoins/ContactList.tsx
@@ -50,10 +50,7 @@ function AccountSelect(props: ContactListProps) {
               posIcon={<MassaLogo size={24} />}
               content={maskNickname(filteredAccount.nickname)}
               variant="secondary"
-              amount={
-                formatAmount(filteredAccount.candidateBalance)
-                  .amountFormattedFull
-              }
+              amount={formatAmount(filteredAccount.candidateBalance).full}
               onClick={() => handleSetRecipient(filteredAccount)}
             />
           ))}

diff --git a/web-frontend/src/pages/TransferCoins/SendCoins/SendConfirmation.tsx b/web-frontend/src/pages/TransferCoins/SendCoins/SendConfirmation.tsx
@@ -2,7 +2,7 @@ import {
   Balance,
   Button,
   Tooltip,
-  formatFTAmount,
+  formatAmount,
   parseAmount,
   Clipboard,
   Mns,
@@ -43,11 +43,11 @@ export function SendConfirmation(props: SendConfirmationProps) {
   const formattedRecipientAddress = maskAddress(recipientAddress);
   // amount is the value given by the Money input component
   // we convert to the smallest unit with parseAmount
-  // and then format it with formatFTAmount
-  const formattedAmount = formatFTAmount(
+  // and then format it with formatAmount
+  const formattedAmount = formatAmount(
     parseAmount(amount, data.asset.decimals),
     decimals,
-  ).amountFormattedFull;
+  ).full;
 
   let selectedFees;
 

diff --git a/web-frontend/src/pages/TransferCoins/SendCoins/SendForm.tsx b/web-frontend/src/pages/TransferCoins/SendCoins/SendForm.tsx
@@ -167,12 +167,7 @@ export function SendForm(props: SendFormProps) {
   }
 
   const formattedBalance = selectedAsset?.balance ? (
-    <u>
-      {
-        formatAmount(selectedAsset.balance, selectedAsset.decimals)
-          .amountFormattedFull
-      }
-    </u>
+    <u>{formatAmount(selectedAsset.balance, selectedAsset.decimals).full}</u>
   ) : (
     <Spinner size={12} customClass="inline-block" />
   );

diff --git a/web-frontend/src/utils/math.ts b/web-frontend/src/utils/math.ts
@@ -22,5 +22,5 @@ export function handlePercent(
     }
   }
 
-  return formatAmount(newAmount.toString(), decimals).amountFormattedFull;
+  return formatAmount(newAmount.toString(), decimals).full;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,5 +22,5 @@ export function handlePercent( @@
         }
       }
-      return formatAmount(newAmount.toString(), decimals).amountFormattedFull;
+      return formatAmount(newAmount.toString(), decimals).full;
     }