Fix 'too many decimals' error when sending XRP payments (#245)

* Fix error with too many decimal during sending XRP * Add cypress tests --------- Co-authored-by: thibautbremand <thibaut.bremand@gmail.com>
GemWallet · Aug 16, 2023 · 454bdec · 454bdec
1 parent 43596d1
commit 454bdec
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 5 deletions.
diff --git a/packages/extension/cypress/e2e/payments.cy.ts b/packages/extension/cypress/e2e/payments.cy.ts
@@ -4,11 +4,14 @@ import { xrpToDrops } from 'xrpl';
 
 import { Network, NETWORK } from '@gemwallet/constants';
 
+const HOME_URL = 'http://localhost:3000';
+const PASSWORD = 'SECRET_PASSWORD';
+const DESTINATION_ADDRESS = 'rNvFCZXpDtGeQ3bVas95wGLN6N2stGmA9o';
+
 describe('Make payment - XRP', () => {
   // deepcode ignore NoHardcodedPasswords: password used for testing purposes
   const PASSWORD = 'SECRET_PASSWORD';
   const AMOUNT = '0.01';
-  const DESTINATION_ADDRESS = 'rNvFCZXpDtGeQ3bVas95wGLN6N2stGmA9o';
   beforeEach(() => {
     // Mock the localStorage with a wallet already loaded
     cy.window().then((win) => {
@@ -312,3 +315,88 @@ describe('Make payment - SOLO', () => {
     cy.contains('Amount:').next().should('have.text', `${VALUE} SOLO`);
   });
 });
+
+const navigate = (url: string, password: string) => {
+  cy.visit(url, {
+    onBeforeLoad(win) {
+      (win as any).chrome = (win as any).chrome || {};
+      (win as any).chrome.runtime = {
+        sendMessage(message, cb) {}
+      };
+
+      (win as any).chrome.storage = {
+        local: {
+          get(key, cb) {},
+          set(obj, cb) {
+            if (cb) cb();
+          }
+        }
+      };
+
+      cy.stub((win as any).chrome.runtime, 'sendMessage').resolves({});
+
+      // Login
+      cy.get('input[name="password"]').type(PASSWORD);
+      cy.contains('button', 'Unlock').click();
+    }
+  });
+};
+
+describe('Make payment from the UI', () => {
+  beforeEach(() => {
+    // Mock the localStorage with a wallet already loaded
+    cy.window().then((win) => {
+      win.localStorage.setItem(
+        'wallets',
+        'U2FsdGVkX19VA07d7tVhAAtUbt+YVbw0xQY7OZMykOW4YI4nRZK9iZ7LT3+xHvrj4kwlPKEcRg0S1GjbIWSFaMzg3Mw8fklZrZLL9QZvnbF821SeDB5lBBj/F9PBg8A07uZhYz1p4sTDsWAOFvrnKJjmlWIqXzN5MFFbWBb3os2xGtAGTslFVUXuTp6eM9X9'
+      );
+      win.localStorage.setItem(
+        'network',
+        JSON.stringify({
+          name: NETWORK[Network.TESTNET].name
+        })
+      );
+    });
+  });
+
+  it('Should fill in the payment details and submit', () => {
+    navigate(HOME_URL, PASSWORD);
+
+    cy.contains('button', 'Send').click();
+
+    // Input recipient's address
+    cy.get('#recipient-address').type(DESTINATION_ADDRESS);
+
+    // Input wrong amount
+    cy.get('#amount').type('0.0000001');
+
+    // Button should be disabled
+    cy.get('button').contains('Send Payment').should('be.disabled');
+
+    // Input amount
+    cy.get('#amount').clear().type('0.01').should('not.have.class', 'Mui-error');
+
+    // Input memo (optional)
+    cy.get('#memo').type('Some memo here...').should('not.have.class', 'Mui-error');
+
+    // Input destination tag (optional)
+    cy.get('#destination-tag').type('12345').should('not.have.class', 'Mui-error');
+
+    // Click on the Send Payment button
+    cy.get('button').contains('Send Payment').click();
+
+    // Confirm the payment
+    cy.contains('button', 'Confirm').click();
+
+    cy.get('h1[data-testid="transaction-title"]').should('have.text', 'Transaction in progress');
+    cy.get('p[data-testid="transaction-subtitle"]').should(
+      'have.text',
+      'We are processing your transactionPlease wait'
+    );
+
+    cy.get('h1[data-testid="transaction-title"]').contains('Transaction accepted', {
+      timeout: 10000
+    });
+    cy.get('p[data-testid="transaction-subtitle"]').should('have.text', 'Transaction Successful');
+  });
+});
diff --git a/packages/extension/src/components/pages/SendPayment/PreparePayment/PreparePayment.tsx b/packages/extension/src/components/pages/SendPayment/PreparePayment/PreparePayment.tsx
@@ -85,10 +85,11 @@ export const PreparePayment: FC<PreparePaymentProps> = ({ onSendPaymentClick })
       isValidAddress(address) &&
       amount !== '' &&
       errorAddress === '' &&
+      errorAmount === '' &&
       errorMemo === '' &&
       errorDestinationTag === ''
     );
-  }, [address, amount, errorAddress, errorDestinationTag, errorMemo]);
+  }, [address, amount, errorAddress, errorAmount, errorDestinationTag, errorMemo]);
 
   const reserve = useMemo(() => {
     return ownerCount * RESERVE_PER_OWNER + baseReserve;
@@ -215,15 +216,18 @@ export const PreparePayment: FC<PreparePaymentProps> = ({ onSendPaymentClick })
     (e: FocusEvent<HTMLInputElement>) => {
       // Int and decimal numbers only
       const isValidNumber = /^\d*\.?\d*$/.test(e.target.value);
+      const [, fractionalPart] = e.target.value.split('.');
 
-      if (Number(e.target.value) <= 0 && e.target.value !== '' && isValidNumber) {
+      if (isValidNumber && Number(e.target.value) <= 0 && e.target.value !== '') {
         setErrorAmount('You can only send an amount greater than zero');
       } else if (
+        isValidNumber &&
         Number(e.target.value) &&
-        !hasEnoughFunds(e.target.value, tokenRef.current?.value ?? '') &&
-        isValidNumber
+        !hasEnoughFunds(e.target.value, tokenRef.current?.value ?? '')
       ) {
         setErrorAmount('You do not have enough funds to send this amount');
+      } else if (isValidNumber && /^\d*\.?\d*$/.test(fractionalPart) && fractionalPart.length > 6) {
+        setErrorAmount('Fractional part should have at most 6 digits');
       } else if (isValidNumber) {
         setErrorAmount('');
       }