Merge pull request #986 from PayButton/feat/format-amount-payments

feat: format numbers payments

Author: chedieck

pages/payments/index.tsx

@@ -11,7 +11,7 @@ import XECIcon from 'assets/xec-logo.png'
 import BCHIcon from 'assets/bch-logo.png'
 import EyeIcon from 'assets/eye-icon.png'
 import { formatQuoteValue, compareNumericString, removeUnserializableFields } from 'utils/index'
-import { XEC_NETWORK_ID, BCH_TX_EXPLORER_URL, XEC_TX_EXPLORER_URL, NETWORK_TICKERS_FROM_ID } from 'constants/index'
+import { XEC_NETWORK_ID, BCH_TX_EXPLORER_URL, XEC_TX_EXPLORER_URL, NETWORK_TICKERS_FROM_ID, DECIMALS } from 'constants/index'
 import moment from 'moment-timezone'
 import TopBar from 'components/TopBar'
 import { fetchUserWithSupertokens, UserWithSupertokens } from 'services/userService'
@@ -144,10 +144,26 @@ export default function Payments ({ user, userId }: PaybuttonsProps): React.Reac
       },
       {
         Header: () => (<div style={{ textAlign: 'right' }}>Amount</div>),
+        accessor: 'amount',
+        sortType: compareNumericString,
+        Cell: (cellProps) => {
+          const { networkId, amount } = cellProps.cell.row.original
+          const networkTicker = NETWORK_TICKERS_FROM_ID[networkId]
+          const formattedAmount = Number(amount).toLocaleString(undefined, {
+            minimumFractionDigits: DECIMALS[networkTicker],
+            maximumFractionDigits: DECIMALS[networkTicker]
+          })
+
+          return <div style={{ textAlign: 'right', fontWeight: '600' }}>{formattedAmount}</div>
+        }
+      },
+      {
+        Header: () => (<div style={{ textAlign: 'right' }}>Value</div>),
         accessor: 'values',
         sortType: compareNumericString,
+        disableSortBy: true,
         Cell: (cellProps) => {
-          return <div style={{ textAlign: 'right', fontWeight: '600' }}> {cellProps.cell.value.amount} (${formatQuoteValue(cellProps.cell.value.values, user.userProfile.preferredCurrencyId)})</div>
+          return <div style={{ textAlign: 'right', fontWeight: '600' }}> ${formatQuoteValue(cellProps.cell.value, user.userProfile.preferredCurrencyId)}</div>
         }
       },
       {

redis/dashboardCache.ts

@@ -69,14 +69,14 @@ export const getButtonPaymentData = (n: number, periodString: string, paymentLis
           },
           total: {
             payments: 1,
-            revenue: p.values.values
+            revenue: p.values
           }
         }
         buttonPaymentData[b.id] = newEntry
         return
       }
       prevObj.total.payments += 1
-      prevObj.total.revenue = sumQuoteValues(prevObj.total.revenue, p.values.values)
+      prevObj.total.revenue = sumQuoteValues(prevObj.total.revenue, p.values)
       prevObj.displayData.isXec = prevObj.displayData.isXec === true || (p.networkId === XEC_NETWORK_ID)
       prevObj.displayData.isBch = prevObj.displayData.isBch === true || (p.networkId === BCH_NETWORK_ID)
       const lastPayment = prevObj.displayData.lastPayment as number
@@ -100,8 +100,8 @@ export const sumPaymentsValue = function (paymentList: Payment[]): QuoteValues {
   }
 
   for (const p of paymentList) {
-    ret.usd = ret.usd.plus(p.values.values.usd)
-    ret.cad = ret.cad.plus(p.values.values.cad)
+    ret.usd = ret.usd.plus(p.values.usd)
+    ret.cad = ret.cad.plus(p.values.cad)
   }
   return ret
 }
@@ -161,11 +161,11 @@ const generateDashboardDataFromStream = async function (
           if (paybuttonIds !== undefined && paybuttonIds.length > 0) {
             const paymentButtonIds = payment.buttonDisplayDataList.map(b => b.id)
             if (paymentButtonIds.some(item => paybuttonIds.includes(item))) {
-              revenueAccumulators[period][index] = sumQuoteValues(revenueAccumulators[period][index], payment.values.values)
+              revenueAccumulators[period][index] = sumQuoteValues(revenueAccumulators[period][index], payment.values)
               paymentCounters[period][index] += 1
             }
           } else {
-            revenueAccumulators[period][index] = sumQuoteValues(revenueAccumulators[period][index], payment.values.values)
+            revenueAccumulators[period][index] = sumQuoteValues(revenueAccumulators[period][index], payment.values)
             paymentCounters[period][index] += 1
           }
         }
@@ -315,13 +315,13 @@ function processButtonData (
             lastPayment: payment.timestamp
           },
           total: {
-            revenue: payment.values.values,
+            revenue: payment.values,
             payments: 1
           }
         }
       } else {
         const buttonData = buttonDataAccumulators[period][button.id]
-        buttonData.total.revenue = sumQuoteValues(buttonData.total.revenue, payment.values.values)
+        buttonData.total.revenue = sumQuoteValues(buttonData.total.revenue, payment.values)
         buttonData.total.payments += 1
         buttonData.displayData.lastPayment = Math.max(
           buttonData.displayData.lastPayment ?? 0,

redis/paymentCache.ts

@@ -81,10 +81,8 @@ export const generatePaymentFromTx = async (tx: TransactionsWithPaybuttonsAndPri
   }
   return {
     timestamp: tx.timestamp,
-    values: {
-      values,
-      amount: tx.amount
-    },
+    values,
+    amount: tx.amount,
     networkId: tx.address.networkId,
     hash: tx.hash,
     buttonDisplayDataList,
@@ -112,7 +110,7 @@ export const generateAndCacheGroupedPaymentsAndInfoForAddress = async (address:
     paymentCount
   }
 
-  paymentList = paymentList.filter((p) => p.values.values.usd > new Prisma.Decimal(0))
+  paymentList = paymentList.filter((p) => p.values.usd > new Prisma.Decimal(0))
   const groupedPayments = getPaymentsByWeek(address.address, paymentList)
   return {
     groupedPayments,
@@ -196,7 +194,7 @@ export const cacheManyTxs = async (txs: TransactionsWithPaybuttonsAndPrices[]):
   const zero = new Prisma.Decimal(0)
   for (const tx of txs.filter(tx => tx.amount > zero)) {
     const payment = await generatePaymentFromTx(tx)
-    if (payment.values.values.usd !== new Prisma.Decimal(0)) {
+    if (payment.values.usd !== new Prisma.Decimal(0)) {
       const paymentsGroupedByKey = getPaymentsByWeek(tx.address.address, [payment])
       void await cacheGroupedPaymentsAppend(paymentsGroupedByKey)
     }

redis/types.ts

@@ -46,14 +46,11 @@ export interface ButtonDisplayData {
   lastPayment?: number
   providerUserId?: string
 }
-export interface AmountData {
-  values: QuoteValues
-  amount: Decimal
-}
 
 export interface Payment {
   timestamp: number
-  values: AmountData
+  values: QuoteValues
+  amount?: Decimal
   networkId: number
   hash: string
   buttonDisplayDataList: ButtonDisplayData[]

services/transactionService.ts

@@ -151,11 +151,10 @@ export async function fetchTransactionsByAddressListWithPagination (
   pageSize: number,
   orderBy?: string,
   orderDesc = true,
-  networkIdsListFilter?: number[],
+  networkIdsListFilter?: number[]
 ): Promise<TransactionsWithPaybuttonsAndPrices[]> {
-
   const orderDescString: Prisma.SortOrder = orderDesc ? 'desc' : 'asc'
-  
+
   // Get query for orderBy that works with nested properties (e.g. `address.networkId`)
   let orderByQuery
   if (orderBy !== undefined && orderBy !== '') {
@@ -192,7 +191,7 @@ export async function fetchTransactionsByAddressListWithPagination (
     include: includePaybuttonsAndPrices,
     orderBy: orderByQuery,
     skip: page * pageSize,
-    take: pageSize,
+    take: pageSize
   })
 }
 
@@ -578,7 +577,7 @@ export async function fetchTransactionsByPaybuttonIdWithPagination (
     pageSize,
     orderBy,
     orderDesc,
-    networkIds);
+    networkIds)
 
   if (transactions.length === 0) {
     throw new Error(RESPONSE_MESSAGES.NO_TRANSACTION_FOUND_404.message)
@@ -705,11 +704,9 @@ export async function getPaymentsByUserIdOrderedByButtonName (
     })
     if (tx.amount > 0) {
       payments.push({
+        amount: tx.amount,
         timestamp: tx.timestamp,
-        values: {
-          values: ret,
-          amount: tx.amount
-        },
+        values: ret,
         networkId: tx.networkId,
         hash: tx.hash,
         buttonDisplayDataList