Refacto handle percent fn

massalabs · Oct 25, 2023 · d4103dd · d4103dd
1 parent 3dfd408
commit d4103dd
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 39 deletions.
diff --git a/web-frontend/cypress/e2e/acceptance/home/send.cy.tsx b/web-frontend/cypress/e2e/acceptance/home/send.cy.tsx
@@ -8,7 +8,7 @@ import {
   formatStandard,
   maskAddress,
 } from '../../../../src/utils/massaFormat';
-import { compareSnapshot } from '../../../compareSnapshot';
+import { handlePercent } from '../../../../src/utils/math';
 
 describe('E2E | Acceptance | Home', () => {
   let server: Server;
@@ -78,18 +78,6 @@ describe('E2E | Acceptance | Home', () => {
       }
     }
 
-    // mimics handlepercent fn in sendForm.tsx
-    // TODO: refactor handlePercent to be a util function
-    function handlePercent(amount = 0, percent: number, fees, balance) {
-      let newAmount = amount * percent;
-      const feesAsNumber = Number(fees);
-
-      if (newAmount > balance - feesAsNumber)
-        newAmount = Math.max(balance - feesAsNumber, 0);
-
-      return toMASS(newAmount);
-    }
-
     // standardize percent testing
     function performPercentAction(percentValue, account, fees) {
       const balance = Number(account?.candidateBalance);
@@ -126,8 +114,6 @@ describe('E2E | Acceptance | Home', () => {
               cy.get('[data-testid="loading"]').should('not.exist');
             });
         });
-
-      compareSnapshot(cy, 'wallet-loading');
     });
 
     it('should land on send page when send CTA is clicked', () => {
@@ -139,8 +125,6 @@ describe('E2E | Acceptance | Home', () => {
       cy.get('[data-testid="send-coins"]').should('be.visible');
       cy.get('[data-testid="receive-coins"]').should('not.be.visible');
       cy.get('[data-testid="send-coins"]').should('exist');
-
-      compareSnapshot(cy, 'send-page');
     });
 
     it('should navigate to /transfer-coins when accessing it by the side-menu', () => {
@@ -150,7 +134,6 @@ describe('E2E | Acceptance | Home', () => {
       cy.get('[data-testid="side-menu"]').click();
       cy.get('[data-testid="side-menu-sendreceive-icon"]').click();
       cy.url().should('eq', `${baseUrl}/${account.nickname}/transfer-coins`);
-      compareSnapshot(cy, 'send-page');
     });
 
     it('should render balance and amount should equal account balance', () => {
@@ -162,7 +145,6 @@ describe('E2E | Acceptance | Home', () => {
         'contain',
         getBalance(account),
       );
-      compareSnapshot(cy, 'send-page');
     });
 
     it('should send coins to address', () => {
@@ -196,14 +178,10 @@ describe('E2E | Acceptance | Home', () => {
         maskAddress(recipientAccount.address),
       );
 
-      compareSnapshot(cy, 'send-confirmation-page');
-
       cy.get('[data-testid="button"]')
         .contains('Confirm and sign with password')
         .click();
       cy.url().should('eq', `${baseUrl}/${account.nickname}/home`);
-
-      compareSnapshot(cy, 'home-page');
     });
 
     it('should process any % as input', () => {
@@ -226,8 +204,6 @@ describe('E2E | Acceptance | Home', () => {
       const randomIndex = Math.floor(Math.random() * mockedAccounts.length);
       const selectedAccount = mockedAccounts.at(randomIndex);
 
-      console.log(mockedAccounts);
-
       navigateToTransfercoins(2);
 
       cy.get('[data-testid="transfer-between-accounts"]')

diff --git a/web-frontend/src/pages/TransferCoins/SendCoins/SendForm.tsx b/web-frontend/src/pages/TransferCoins/SendCoins/SendForm.tsx
@@ -16,6 +16,7 @@ import {
   reverseFormatStandard,
   fetchAccounts,
 } from '@/utils';
+import { handlePercent } from '@/utils/math';
 
 interface InputsErrors {
   amount?: string;
@@ -51,16 +52,6 @@ export function SendForm({ ...props }) {
     setRecipient(to);
   }, []);
 
-  function handlePercent(amount = 0, percent: number) {
-    let newAmount = amount * percent;
-    const feesAsNumber = Number(fees);
-
-    if (newAmount > balance - feesAsNumber)
-      newAmount = Math.max(balance - feesAsNumber, 0);
-
-    setAmount(toMASS(newAmount));
-  }
-
   function validate(formObject: IForm) {
     const { amount, recipient } = formObject;
 
@@ -137,28 +128,36 @@ export function SendForm({ ...props }) {
           <ul className="flex flex-row mas-body2">
             <li
               data-testid="send-percent-25"
-              onClick={() => handlePercent(balance, 0.25)}
+              onClick={() =>
+                setAmount(handlePercent(balance, 0.25, fees, balance))
+              }
               className="mr-3.5 hover:cursor-pointer"
             >
               25%
             </li>
             <li
               data-testid="send-percent-50"
-              onClick={() => handlePercent(balance, 0.5)}
+              onClick={() =>
+                setAmount(handlePercent(balance, 0.5, fees, balance))
+              }
               className="mr-3.5 hover:cursor-pointer"
             >
               50%
             </li>
             <li
               data-testid="send-percent-75"
-              onClick={() => handlePercent(balance, 0.75)}
+              onClick={() =>
+                setAmount(handlePercent(balance, 0.75, fees, balance))
+              }
               className="mr-3.5 hover:cursor-pointer"
             >
               75%
             </li>
             <li
               data-testid="send-percent-100"
-              onClick={() => handlePercent(balance, 1)}
+              onClick={() =>
+                setAmount(handlePercent(balance, 1, fees, balance))
+              }
               className="mr-3.5 hover:cursor-pointer"
             >
               Max

diff --git a/web-frontend/src/utils/math.ts b/web-frontend/src/utils/math.ts
@@ -0,0 +1,16 @@
+import { toMASS } from './massaFormat';
+
+export function handlePercent(
+  amount = 0,
+  percent: number,
+  fees: string,
+  balance: number,
+) {
+  let newAmount = amount * percent;
+  const feesAsNumber = Number(fees);
+
+  if (newAmount > balance - feesAsNumber)
+    newAmount = Math.max(balance - feesAsNumber, 0);
+
+  return toMASS(newAmount);
+}