Use delivered_amount in JS browser wallet tutorial (Fix #2075)

content/_code-samples/build-a-wallet/js/src/transaction-history/transaction-history.js

@@ -29,7 +29,7 @@ header.innerHTML = `
     <th>Account</th>
     <th>Destination</th>
     <th>Fee (XRP)</th>
-    <th>Amount</th>
+    <th>Amount delivered</th>
     <th>Transaction Type</th>
     <th>Result</th>
     <th>Link</th>
@@ -37,14 +37,40 @@ header.innerHTML = `
 txHistoryElement.appendChild(header);
 
 // Converts the hex value to a string
-const getTokenName = (value) => (value.length === 40 ? convertHexToString(value).replaceAll('\u0000', '') : value);
+function getTokenName(currencyCode) {
+    if (!currencyCode) return "";
+    if (currencyCode.length === 3 && currencyCode.trim().toLowerCase() !== 'xrp') {
+        // "Standard" currency code
+        return currencyCode.trim();
+    }
+    if (currencyCode.match(/^[a-fA-F0-9]{40}$/)) {
+        // Hexadecimal currency code
+        const text_code = convertHexToString(value).replaceAll('\u0000', '')
+        if (text_code.match(/[a-zA-Z0-9]{3,}/) && text_code.trim().toLowerCase() !== 'xrp') {
+            // ASCII or UTF-8 encoded alphanumeric code, 3+ characters long
+            return text_code;
+        }
+        // Other hex format, return as-is.
+        // For parsing other rare formats, see https://github.com/XRPLF/xrpl-dev-portal/blob/master/content/_code-samples/normalize-currency-codes/js/normalize-currency-code.js
+        return currencyCode;
+    }
+    return "";
+}
 
-function renderTokenValueColumn(value) {
-    return value.Amount
-        ? `<td>${
-              typeof value.Amount === 'object' ? `${value.Amount.value} ${getTokenName(value.Amount.currency)}` : `${dropsToXrp(value.Amount)} XRP`
-          }</td>`
-        : '-';
+function renderAmount(delivered) {
+    if (delivered === 'unavailable') {
+        // special case for pre-2014 partial payments
+        return 'unavailable';
+    } else if (typeof delivered === 'string') {
+        // It's an XRP amount in drops. Convert to decimal.
+        return `${dropsToXrp(delivered)} XRP`;
+    } else if (typeof delivered === 'object') {
+        // It's a token amount.
+        return `${delivered.value} ${getTokenName(delivered.currency)}.${delivered.issuer}`;
+    } else {
+        // Could be undefined -- not all transactions deliver value
+        return "-"
+    }
 }
 
 // Fetches the transaction history from the ledger
@@ -73,7 +99,7 @@ async function fetchTxHistory() {
         const { result } = await client.request(payload);
 
         const { transactions, marker: nextMarker } = result;
-        
+
         // Add the transactions to the table
         const values = transactions.map((transaction) => {
             const { meta, tx } = transaction;
@@ -81,10 +107,10 @@ async function fetchTxHistory() {
                 Account: tx.Account,
                 Destination: tx.Destination,
                 Fee: tx.Fee,
-                Amount: tx.Amount,
                 Hash: tx.hash,
                 TransactionType: tx.TransactionType,
                 result: meta?.TransactionResult,
+                delivered: meta?.delivered_amount
             };
         });
 
@@ -108,7 +134,7 @@ async function fetchTxHistory() {
                 ${value.Account ? `<td>${value.Account}</td>` : '-'}
                 ${value.Destination ? `<td>${value.Destination}</td>` : '-'}
                 ${value.Fee ? `<td>${dropsToXrp(value.Fee)}</td>` : '-'}
-                ${renderTokenValueColumn(value)}
+                ${renderAmount(value.delivered)}
                 ${value.TransactionType ? `<td>${value.TransactionType}</td>` : '-'}
                 ${value.result ? `<td>${value.result}</td>` : '-'}
                 ${value.Hash ? `<td><a href="https://${process.env.EXPLORER_NETWORK}.xrpl.org/transactions/${value.Hash}" target="_blank">View</a></td>` : '-'}`;

content/tutorials/build-apps/build-a-browser-wallet-in-js.md

@@ -32,7 +32,7 @@ This application can:
 
 - Show updates to the XRP Ledger in real-time.
 - View any XRP Ledger account's activity, including showing how much XRP was delivered by each transaction.
-- Show how much XRP is set aside for the account's [reserve requirement](reserves.html). 
+- Show how much XRP is set aside for the account's [reserve requirement](reserves.html).
 - Send [direct XRP payments](direct-xrp-payments.html), and provide feedback about the intended destination address, including:
     - Displaying your account's available balance
     - Verifying that the destination address is valid
@@ -59,7 +59,7 @@ yarn create vite simple-xrpl-wallet --template vanilla
 {{ include_code("_code-samples/build-a-wallet/js/package.json", language="js") }}
 
    - Alternatively you can also do `yarn add <package-name>` for each individual package to add them to your `package.json` file.
-  
+
 4. Install dependencies:
 
 ```bash
@@ -124,7 +124,7 @@ To make that happen, we need to connect to the XRP Ledger and look up the accoun
 
 7. In the `helpers` folder, add [render-xrpl-logo.js]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/js/src/helpers/render-xrpl-logo.js) to handle displaying a logo.
 
-8. Finally create a new folder named `assets` in the `src/` directory and add the file [`xrpl.svg`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/js/src/assets/xrpl.svg) there. 
+8. Finally create a new folder named `assets` in the `src/` directory and add the file [`xrpl.svg`]({{target.github_forkurl}}/tree/{{target.github_branch}}/content/_code-samples/build-a-wallet/js/src/assets/xrpl.svg) there.
 
 These files are used to render the XRPL logo for aesthetic purposes.
 
@@ -170,19 +170,21 @@ Destination Tag: (Not usually necessary unless you're paying an account tied to
 
 ### 4. Create the Transactions Page
 
-Now that we have created the home page and the send XRP page, let's create the transactions page that will display the transaction history of the account. In order to see what's happening on the ledger, we're going to display the following fields: 
+Now that we have created the home page and the send XRP page, let's create the transactions page that will display the transaction history of the account. In order to see what's happening on the ledger, we're going to display the following fields:
 
   - Account: The account that sent the transaction.
   - Destination: The account that received the transaction.
-  - Amount: The amount of XRP sent in the transaction.
   - Transaction Type: The type of transaction.
   - Result: The result of the transaction.
+  - Delivered amount: The amount of XRP or tokens delivered by the transaction, if applicable.
   - Link: A link to the transaction on the XRP Ledger Explorer.
 
+**Caution:** When displaying how much money a transaction delivered, always use the `delivered_amount` field from the metadata, not the `Amount` field from the transaction instructions. [Partial Payments](partial-payments.html) can deliver much less than the stated `Amount` and still be successful.
+
 ![Transactions Page Screenshot](img/js-wallet-transaction.png)
 
 1. Create a folder named `transaction-history` in the src directory.
-2. Create a file named `transaction-history.js` and copy the code written below. 
+2. Create a file named `transaction-history.js` and copy the code written below.
 
 {{ include_code("_code-samples/build-a-wallet/js/src/transaction-history/transaction-history.js", language="js") }}