Update Amount formatting

GemWallet · Oct 11, 2023 · 4893926 · 4893926
1 parent 7270d82
commit 4893926
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 82 deletions.
diff --git a/packages/extension/cypress/e2e/NFT.cy.ts b/packages/extension/cypress/e2e/NFT.cy.ts
@@ -130,9 +130,8 @@ describe('Mint', () => {
     cy.get('h1[data-testid="page-title"]').should('have.text', 'Create NFT Offer');
 
     cy.contains('NFT Token ID').next().should('have.text', this.NFTokenID);
-    cy.contains('Amount')
-      .next()
-      .should('have.text', '0.4 SOLO\nIssuer: rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
+    cy.contains('Amount').next().should('have.text', '0.4 SOLO');
+    cy.contains('Trustline').next().should('have.text', 'rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
     cy.contains('Memo').next().should('have.text', 'Test memo');
     cy.contains('Flags').next().should('have.text', 'Offer type: Sell offer');
 
@@ -165,9 +164,8 @@ describe('Mint', () => {
     cy.get('h1[data-testid="page-title"]').should('have.text', 'Create NFT Offer');
 
     cy.contains('NFT Token ID').next().should('have.text', this.NFTokenID);
-    cy.contains('Amount')
-      .next()
-      .should('have.text', '0.4 SOLO\nIssuer: rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
+    cy.contains('Amount').next().should('have.text', '0.4 SOLO');
+    cy.contains('Trustline').next().should('have.text', 'rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
     cy.contains('Memo').next().should('have.text', 'Test memo');
     cy.contains('Flags').next().should('have.text', 'Offer type: Sell offer');
 
@@ -248,9 +246,8 @@ describe('Mint', () => {
 
     cy.contains('NFT Token Sell Offer').next().should('have.text', this.OfferID);
 
-    cy.contains('NFT Token Broker Fee')
-      .next()
-      .should('have.text', '0.1 SOLO\nIssuer: rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
+    cy.contains('NFT Token Broker Fee').next().should('have.text', '0.1 SOLO');
+    cy.contains('Trustline').next().should('have.text', 'rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
 
     // Confirm
     cy.contains('button', 'Submit').click();
@@ -277,9 +274,8 @@ describe('Mint', () => {
 
     cy.contains('NFT Token Sell Offer').next().should('have.text', this.OfferID);
 
-    cy.contains('NFT Token Broker Fee')
-      .next()
-      .should('have.text', '0.1 SOLO\nIssuer: rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
+    cy.contains('NFT Token Broker Fee').next().should('have.text', '0.1 SOLO');
+    cy.contains('Trustline').next().should('have.text', 'rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
 
     // Confirm
     cy.contains('button', 'Submit').click();

diff --git a/packages/extension/cypress/e2e/offers.cy.ts b/packages/extension/cypress/e2e/offers.cy.ts
@@ -27,9 +27,8 @@ describe('Offers', () => {
     cy.get('h1[data-testid="page-title"]').should('have.text', 'Create Offer');
 
     cy.contains('Taker Gets').next().should('have.text', '10 XRP');
-    cy.contains('Taker Pays')
-      .next()
-      .should('have.text', '0.1 ETH\nIssuer: rnm76Qgz4G9G4gZBJVuXVvkbt7gVD7szey');
+    cy.contains('Taker Pays').next().should('have.text', '0.1 ETH');
+    cy.contains('Trustline').next().should('have.text', 'rnm76Qgz4G9G4gZBJVuXVvkbt7gVD7szey');
     cy.contains('Network fees').next().should('have.text', '0.000199 XRP (MANUAL)');
     cy.contains('Memo').next().should('have.text', 'Test memo');
     cy.contains('Flags').next().should('have.text', 'Passive');
@@ -62,9 +61,8 @@ describe('Offers', () => {
     cy.get('h1[data-testid="page-title"]').should('have.text', 'Create Offer');
 
     cy.contains('Taker Gets').next().should('have.text', '10 XRP');
-    cy.contains('Taker Pays')
-      .next()
-      .should('have.text', '0.1 SOLO\nIssuer: rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
+    cy.contains('Taker Pays').next().should('have.text', '0.1 SOLO');
+    cy.contains('Trustline').next().should('have.text', 'rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
     cy.contains('Network fees').next().should('have.text', '0.000199 XRP (MANUAL)');
     cy.contains('Memo').next().should('have.text', 'Test memo');
     cy.contains('Flags').next().should('have.text', 'Passive');
@@ -97,9 +95,8 @@ describe('Offers', () => {
     cy.get('h1[data-testid="page-title"]').should('have.text', 'Create Offer');
 
     cy.contains('Taker Pays').next().should('have.text', '10 XRP');
-    cy.contains('Taker Gets')
-      .next()
-      .should('have.text', '0.1 SOLO\nIssuer: rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
+    cy.contains('Taker Gets').next().should('have.text', '0.1 SOLO');
+    cy.contains('Trustline').next().should('have.text', 'rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
     cy.contains('Network fees').next().should('have.text', '0.000199 XRP (MANUAL)');
     cy.contains('Memo').next().should('have.text', 'Test memo');
     cy.contains('Flags').next().should('have.text', 'Passive');
@@ -132,9 +129,8 @@ describe('Offers', () => {
     cy.get('h1[data-testid="page-title"]').should('have.text', 'Create Offer');
 
     cy.contains('Taker Gets').next().should('have.text', '10 XRP');
-    cy.contains('Taker Pays')
-      .next()
-      .should('have.text', '0.1 SOLO\nIssuer: rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
+    cy.contains('Taker Pays').next().should('have.text', '0.1 SOLO');
+    cy.contains('Trustline').next().should('have.text', 'rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
     cy.contains('Network fees').next().should('have.text', '0.000199 XRP (MANUAL)');
     cy.contains('Memo').next().should('have.text', 'Test memo');
     cy.contains('Flags').next().should('have.text', 'Passive');
@@ -167,9 +163,8 @@ describe('Offers', () => {
     cy.get('h1[data-testid="page-title"]').should('have.text', 'Create Offer');
 
     cy.contains('Taker Pays').next().should('have.text', '10 XRP');
-    cy.contains('Taker Gets')
-      .next()
-      .should('have.text', '0.1 SOLO\nIssuer: rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
+    cy.contains('Taker Gets').next().should('have.text', '0.1 SOLO');
+    cy.contains('Trustline').next().should('have.text', 'rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
     cy.contains('Network fees').next().should('have.text', '0.000199 XRP (MANUAL)');
     cy.contains('Memo').next().should('have.text', 'Test memo');
     cy.contains('Flags').next().should('have.text', 'Passive');

diff --git a/packages/extension/cypress/e2e/payments.cy.ts b/packages/extension/cypress/e2e/payments.cy.ts
@@ -168,9 +168,8 @@ describe('Make payment - ETH', () => {
 
     // Should have the proper information
     cy.contains('Destination').next().should('have.text', DESTINATION_ADDRESS);
-    cy.contains('Amount')
-      .next()
-      .should('have.text', `${VALUE} ${TOKEN}\nIssuer: ${DESTINATION_ADDRESS}`);
+    cy.contains('Amount').next().should('have.text', `${VALUE} ${TOKEN}`);
+    cy.contains('Trustline').next().should('have.text', DESTINATION_ADDRESS);
 
     // Confirm the payment
     cy.contains('button', 'Submit').click();
@@ -197,9 +196,8 @@ describe('Make payment - ETH', () => {
 
     // Should have the proper information
     cy.contains('Destination').next().should('have.text', DESTINATION_ADDRESS);
-    cy.contains('Amount')
-      .next()
-      .should('have.text', `${VALUE} ${TOKEN}\nIssuer: ${DESTINATION_ADDRESS}`);
+    cy.contains('Amount').next().should('have.text', `${VALUE} ${TOKEN}`);
+    cy.contains('Trustline').next().should('have.text', DESTINATION_ADDRESS);
 
     // Reject the payment
     cy.contains('button', 'Reject').click();
@@ -269,9 +267,8 @@ describe('Make payment - SOLO', () => {
 
     // Should have the proper information
     cy.contains('Destination').next().should('have.text', DESTINATION_ADDRESS);
-    cy.contains('Amount')
-      .next()
-      .should('have.text', `${VALUE} ${TOKEN}\nIssuer: ${DESTINATION_ADDRESS}`);
+    cy.contains('Amount').next().should('have.text', `${VALUE} ${TOKEN}`);
+    cy.contains('Trustline').next().should('have.text', DESTINATION_ADDRESS);
   });
 
   it('Check the payment information (hex)', () => {
@@ -318,9 +315,8 @@ describe('Make payment - SOLO', () => {
 
     // Should have the proper information
     cy.contains('Destination').next().should('have.text', DESTINATION_ADDRESS);
-    cy.contains('Amount')
-      .next()
-      .should('have.text', `${VALUE} SOLO\nIssuer: ${DESTINATION_ADDRESS}`);
+    cy.contains('Amount').next().should('have.text', `${VALUE} SOLO`);
+    cy.contains('Trustline').next().should('have.text', DESTINATION_ADDRESS);
   });
 });
 

diff --git a/packages/extension/cypress/e2e/sign_transaction.cy.ts b/packages/extension/cypress/e2e/sign_transaction.cy.ts
@@ -67,9 +67,8 @@ describe('Sign Transaction', () => {
     );
 
     cy.contains('Transaction Type').next().should('have.text', 'TrustSet');
-    cy.contains('Limit Amount')
-      .next()
-      .should('have.text', '10,000,000 SOLO\nIssuer: rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
+    cy.contains('Limit Amount').next().should('have.text', '10,000,000 SOLO');
+    cy.contains('Issuer').next().should('have.text', 'rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
     cy.contains('Memo').next().should('have.text', 'Test memo');
     cy.contains('Network fees').next().should('have.text', '0.000199 XRP (MANUAL)');
 

diff --git a/packages/extension/cypress/e2e/submit_transaction.cy.ts b/packages/extension/cypress/e2e/submit_transaction.cy.ts
@@ -81,9 +81,8 @@ describe('Submit Transaction', () => {
     );
 
     cy.contains('Transaction Type').next().should('have.text', 'TrustSet');
-    cy.contains('Limit Amount')
-      .next()
-      .should('have.text', '10,000,000 SOLO\nIssuer: rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
+    cy.contains('Limit Amount').next().should('have.text', '10,000,000 SOLO');
+    cy.contains('Trustline').next().should('have.text', 'rHZwvHEs56GCmHupwjA4RY7oPA3EoAJWuN');
     cy.contains('Memo').next().should('have.text', 'Test memo');
     cy.contains('Network fees').next().should('have.text', '0.000199 XRP (MANUAL)');
 

diff --git a/packages/extension/cypress/e2e/trustlines.cy.ts b/packages/extension/cypress/e2e/trustlines.cy.ts
@@ -98,9 +98,8 @@ describe('Trustline', () => {
     cy.get('h1[data-testid="page-title"]').should('have.text', 'Set Trustline');
 
     // Should have the proper information
-    cy.contains('Limit Amount')
-      .next()
-      .should('have.text', `10,000,000 ${CURRENCY}\nIssuer: ${DESTINATION_ADDRESS}`);
+    cy.contains('Limit Amount').next().should('have.text', `10,000,000 ${CURRENCY}`);
+    cy.contains('Trustline').next().should('have.text', DESTINATION_ADDRESS);
 
     // Confirm the trustline
     cy.contains('button', 'Reject').click();
@@ -216,9 +215,8 @@ describe('Trustline', () => {
     cy.contains('button', 'Continue').click();
 
     // Check values in the confirmation page
-    cy.contains('Limit Amount')
-      .next()
-      .should('have.text', `${newLimit} ${CURRENCY}\nIssuer: ${DESTINATION_ADDRESS}`);
+    cy.contains('Limit Amount').next().should('have.text', `${newLimit} ${CURRENCY}`);
+    cy.contains('Trustline').next().should('have.text', DESTINATION_ADDRESS);
 
     cy.contains('button', 'Submit').click();
 
@@ -290,9 +288,8 @@ const validateTrustlineTx = (destinationAddress: string, currency: string, limit
   cy.get('h1[data-testid="page-title"]').should('have.text', 'Set Trustline');
 
   // Should have the proper information
-  cy.contains('Limit Amount')
-    .next()
-    .should('have.text', `${limit} ${currency}\nIssuer: ${destinationAddress}`);
+  cy.contains('Limit Amount').next().should('have.text', `${limit} ${currency}`);
+  cy.contains('Trustline').next().should('have.text', destinationAddress);
 
   // Confirm the trustline
   cy.contains('button', 'Submit').click();

diff --git a/packages/extension/src/components/molecules/XRPLTransaction/XRPLTransaction.tsx b/packages/extension/src/components/molecules/XRPLTransaction/XRPLTransaction.tsx
@@ -6,7 +6,7 @@ import { Amount, Memo, Signer } from 'xrpl/dist/npm/models/common';
 import { GlobalFlags } from 'xrpl/dist/npm/models/transactions/common';
 
 import { useWallet } from '../../../contexts';
-import { formatAmount, formatFlags, formatTransferFee } from '../../../utils';
+import { formatFlags, formatTransferFee, parseAmountObject } from '../../../utils';
 
 type XRPLTxProps = {
   tx: Transaction;
@@ -136,8 +136,7 @@ export const XRPLTransaction: FC<XRPLTxProps> = ({
       renderAmount({
         title: 'Limit Amount',
         value: value as Amount,
-        useLegacy,
-        hasTooltip: true
+        useLegacy
       }),
     NFTokenSellOffer: (value?: string) =>
       value !== undefined
@@ -203,21 +202,29 @@ export const XRPLTransaction: FC<XRPLTxProps> = ({
   const renderAmount = (params: {
     title: string;
     value: Amount;
-    showIssuer?: boolean;
-    hasTooltip?: boolean;
     valueTypographyProps?: TypographyProps;
     useLegacy: boolean;
   }) => {
-    const { title, value, valueTypographyProps, showIssuer = true, hasTooltip, useLegacy } = params;
-
+    const { title, value, valueTypographyProps, useLegacy } = params;
+    const res = parseAmountObject(value);
     return (
-      <KeyValueDisplay
-        keyName={title}
-        value={formatAmount(value, showIssuer)}
-        valueTypographyProps={valueTypographyProps}
-        hasTooltip={hasTooltip}
-        useLegacy={useLegacy}
-      />
+      <>
+        <KeyValueDisplay
+          keyName={title}
+          value={`${res.amount} ${res.currency}`}
+          valueTypographyProps={valueTypographyProps}
+          useLegacy={useLegacy}
+        />
+        {res.issuer ? (
+          <KeyValueDisplay
+            keyName="Trustline"
+            value={res.issuer}
+            valueTypographyProps={valueTypographyProps}
+            hasTooltip={true}
+            useLegacy={useLegacy}
+          />
+        ) : null}
+      </>
     );
   };
 

diff --git a/packages/extension/src/utils/format.test.ts b/packages/extension/src/utils/format.test.ts
@@ -6,7 +6,8 @@ import {
   formatFlags,
   formatFlagsToNumber,
   formatToken,
-  formatTransferFee
+  formatTransferFee,
+  parseAmountObject
 } from './format';
 
 describe('Format util', () => {
@@ -358,3 +359,42 @@ describe('formatCurrencyName', () => {
     expect(formattedCurrency).toEqual('ETH');
   });
 });
+
+describe('parseAmountObject', () => {
+  it('should correctly parse XRP amount when input is a string', () => {
+    const amount = '1000000';
+    const result = parseAmountObject(amount);
+    expect(result).toEqual({
+      amount: '1',
+      currency: 'XRP'
+    });
+  });
+
+  it('should correctly parse issued currency amount when input is an object', () => {
+    const amount = {
+      value: '100',
+      currency: 'USD',
+      issuer: 'rB3gZey7VWHYRqJHLoHDEJXJ2pEPNieKiS'
+    };
+    const result = parseAmountObject(amount);
+    expect(result).toEqual({
+      amount: '100',
+      currency: 'USD',
+      issuer: 'rB3gZey7VWHYRqJHLoHDEJXJ2pEPNieKiS'
+    });
+  });
+
+  it('should correctly convert hex currency to string if currency is in hex', () => {
+    const amount = {
+      value: '200',
+      currency: '534F4C4F00000000000000000000000000000000',
+      issuer: 'rB3gZey7VWHYRqJHLoHDEJXJ2pEPNieKiS'
+    };
+    const result = parseAmountObject(amount);
+    expect(result).toEqual({
+      amount: '200',
+      currency: 'SOLO',
+      issuer: 'rB3gZey7VWHYRqJHLoHDEJXJ2pEPNieKiS'
+    });
+  });
+});
diff --git a/packages/extension/src/utils/format.ts b/packages/extension/src/utils/format.ts
@@ -46,27 +46,40 @@ export const formatCurrencyName = (currency: string) => {
   return currency.toUpperCase();
 };
 
-export const formatAmount = (amount: Amount | IssuedCurrencyAmount, showIssuer?: boolean) => {
+export const formatAmount = (amount: Amount | IssuedCurrencyAmount) => {
+  const res = parseAmountObject(amount);
+  return `${res.amount} ${res.currency}`;
+};
+
+export const parseAmountObject = (
+  amount: Amount | IssuedCurrencyAmount
+): {
+  amount: string;
+  currency: string;
+  issuer?: string;
+} => {
   let value: number;
   let currency: string;
-  let issuer: string | undefined;
 
   if (typeof amount === 'string') {
     value = Number(dropsToXrp(amount));
-    currency = 'XRP';
+    return {
+      amount: formatValue(value),
+      currency: 'XRP'
+    };
+  }
+
+  if (amount.currency.length === 40) {
+    // Hex representation of currency
+    currency = convertHexCurrencyString(amount.currency);
   } else {
-    if (amount.currency.length === 40) {
-      // Hex representation of currency
-      currency = convertHexCurrencyString(amount.currency);
-    } else {
-      currency = amount.currency;
-    }
-    value = Number(amount.value);
-    issuer = amount.issuer;
+    currency = amount.currency;
   }
 
-  const formattedValue = `${formatValue(value)} ${currency.toUpperCase()}`;
-  return showIssuer && issuer ? `${formattedValue}\nIssuer: ${issuer}` : formattedValue;
+  value = Number(amount.value);
+  const issuer = amount.issuer;
+
+  return { amount: formatValue(value), issuer: issuer, currency: currency };
 };
 
 export const formatToken = (value: number, currency: string = 'XRP', isDrops = false) => {