chore: improve activity UI

packages/common/src/utils/DateUtil.ts

@@ -30,5 +30,9 @@ export const DateUtil = {
 
   getRelativeDateFromNow(date: string | number) {
     return dayjs(date).fromNow(true)
+  },
+
+  formatDate(date: string | number, format = 'DD MMM') {
+    return dayjs(date).format(format)
   }
 }

packages/common/tests/DateUtil.test.ts

@@ -25,4 +25,8 @@ describe('DateUtil', () => {
 
     expect(DateUtil.getRelativeDateFromNow(fakeDateTimeOneHourAgo.getTime())).toEqual('1 hr')
   })
+
+  it('should format date correctly', () => {
+    expect(DateUtil.formatDate(fakeDateTime.toDateString())).toEqual('01 Feb')
+  })
 })

packages/core/src/controllers/TransactionsController.ts

@@ -6,7 +6,8 @@ import { EventsController } from './EventsController.js'
 import { SnackController } from './SnackController.js'
 
 // -- Types --------------------------------------------- //
-type TransactionByYearMap = Record<number, Transaction[]>
+type TransactionByMonthMap = Record<number, Transaction[]>
+type TransactionByYearMap = Record<number, TransactionByMonthMap>
 
 export interface TransactionsControllerState {
   transactions: Transaction[]
@@ -54,7 +55,7 @@ export const TransactionsController = {
 
       state.loading = false
       state.transactions = filteredTransactions
-      state.transactionsByYear = this.groupTransactionsByYear(
+      state.transactionsByYear = this.groupTransactionsByYearAndMonth(
         state.transactionsByYear,
         nonSpamTransactions
       )
@@ -76,18 +77,22 @@ export const TransactionsController = {
     }
   },
 
-  groupTransactionsByYear(
+  groupTransactionsByYearAndMonth(
     transactionsMap: TransactionByYearMap = {},
     transactions: Transaction[] = []
   ) {
     const grouped: TransactionByYearMap = transactionsMap
 
     transactions.forEach(transaction => {
       const year = new Date(transaction.metadata.minedAt).getFullYear()
-      if (!grouped[year]) {
-        grouped[year] = []
+      const month = new Date(transaction.metadata.minedAt).getMonth()
+      const yearTransactions = grouped[year] ?? {}
+      const monthTransactions = yearTransactions[month] ?? []
+
+      grouped[year] = {
+        ...yearTransactions,
+        [month]: [...monthTransactions, transaction]
       }
-      grouped[year]?.push(transaction)
     })
 
     return grouped

packages/scaffold/src/views/w3m-transactions-view/index.ts

@@ -96,27 +96,35 @@ export class W3mTransactionsView extends LitElement {
     return sortedYearKeys.map((year, index) => {
       const isLastGroup = index === sortedYearKeys.length - 1
       const yearInt = parseInt(year, 10)
-      const groupTitle = TransactionUtil.getTransactionGroupTitle(yearInt)
-      const transactions = this.transactionsByYear[yearInt]
 
-      if (!transactions) {
-        return null
-      }
-
-      return html`
-        <wui-flex flexDirection="column" gap="s">
-          <wui-flex
-            alignItems="center"
-            flexDirection="row"
-            .padding=${['xs', 's', 's', 's'] as const}
-          >
-            <wui-text variant="paragraph-500" color="fg-200">${groupTitle}</wui-text>
+      const sortedMonthIndexes = new Array(12)
+        .fill(null)
+        .map((_, idx) => idx)
+        .reverse()
+
+      return sortedMonthIndexes.map(month => {
+        const groupTitle = TransactionUtil.getTransactionGroupTitle(yearInt, month)
+        const transactions = this.transactionsByYear[yearInt]?.[month]
+
+        if (!transactions) {
+          return null
+        }
+
+        return html`
+          <wui-flex flexDirection="column">
+            <wui-flex
+              alignItems="center"
+              flexDirection="row"
+              .padding=${['xs', 's', 's', 's'] as const}
+            >
+              <wui-text variant="paragraph-500" color="fg-200">${groupTitle}</wui-text>
+            </wui-flex>
+            <wui-flex flexDirection="column" gap="xs">
+              ${this.templateTransactions(transactions, isLastGroup)}
+            </wui-flex>
           </wui-flex>
-          <wui-flex flexDirection="column" gap="xs">
-            ${this.templateTransactions(transactions, isLastGroup)}
-          </wui-flex>
-        </wui-flex>
-      `
+        `
+      })
     })
   }
 
@@ -247,7 +255,7 @@ export class W3mTransactionsView extends LitElement {
   }
 
   private getTransactionListItemProps(transaction: Transaction) {
-    const date = DateUtil.getRelativeDateFromNow(transaction?.metadata?.minedAt)
+    const date = DateUtil.formatDate(transaction?.metadata?.minedAt)
     const descriptions = TransactionUtil.getTransactionDescriptions(transaction)
 
     const transfers = transaction?.transfers

packages/ui/src/utils/TransactionUtil.ts

@@ -9,10 +9,19 @@ const plusTypes: TransactionType[] = ['receive', 'deposit', 'borrow', 'claim']
 const minusTypes: TransactionType[] = ['withdraw', 'repay', 'burn']
 
 export const TransactionUtil = {
-  getTransactionGroupTitle(year: number) {
+  getMonthName(monthNumber: number) {
+    const date = new Date()
+    date.setMonth(monthNumber)
+
+    return date.toLocaleString('en-US', {
+      month: 'long'
+    })
+  },
+  getTransactionGroupTitle(year: number, month: number) {
     const currentYear = DateUtil.getYear()
+    const monthName = this.getMonthName(month)
     const isCurrentYear = year === currentYear
-    const groupTitle = isCurrentYear ? 'This Year' : year
+    const groupTitle = isCurrentYear ? monthName : `${monthName} ${year}`
 
     return groupTitle
   },

scripts/coverage.js

@@ -12,15 +12,17 @@ const __dirname = path.dirname(__filename)
 /**
  * Reads the coverage-summary.{XXX}.json file and returns the parsed JSON object
  * @param {*} pathToReport
- * @returns
+ * @returns {Object | null} parsed JSON object
  */
 function readPreviousCoverageSummary(pathToReport) {
   if (!pathToReport) {
     console.warn('Previous coverage results were not provided.')
-    return
+
+    return null
   }
   // Read the JSON file
   const prevCoverage = JSON.parse(fs.readFileSync(pathToReport, 'utf8'))
+
   return prevCoverage
 }
 
@@ -29,7 +31,8 @@ function readPreviousCoverageSummary(pathToReport) {
  * an object with the paths to the coverage-summary.json files
  * @param {*} pathToReport
  * @returns
- * */
+ *
+ */
 function getAllPathsForPackagesSummaries() {
   const getDirectories = source =>
     fs
@@ -40,22 +43,24 @@ function getAllPathsForPackagesSummaries() {
   const appsPath = path.join(__dirname, '..', 'apps')
   const appsNames = getDirectories(appsPath)
 
-  const appsSummaries = appsNames.reduce((summary, appName) => {
-    return {
+  const appsSummaries = appsNames.reduce(
+    (summary, appName) => ({
       ...summary,
       [appName]: path.join(appsPath, appName, 'coverage', 'coverage-summary.json')
-    }
-  }, {})
+    }),
+    {}
+  )
 
   const packagesPath = path.join(__dirname, '..', 'packages')
   const packageNames = getDirectories(packagesPath)
 
-  const packagesSummaries = packageNames.reduce((summary, packageName) => {
-    return {
+  const packagesSummaries = packageNames.reduce(
+    (summary, packageName) => ({
       ...summary,
       [packageName]: path.join(packagesPath, packageName, 'coverage', 'coverage-summary.json')
-    }
-  }, {})
+    }),
+    {}
+  )
 
   return { ...appsSummaries, ...packagesSummaries }
 }
@@ -65,7 +70,8 @@ function getAllPathsForPackagesSummaries() {
  * an object with the total coverage for each package and the total coverage
  * @param {*} packagesSummaryPaths
  * @returns
- * */
+ *
+ */
 function readSummaryPerPackageAndCreateJoinedSummaryReportWithTotal(packagesSummaryPaths) {
   return Object.keys(packagesSummaryPaths).reduce(
     (summary, packageName) => {
@@ -85,6 +91,7 @@ function readSummaryPerPackageAndCreateJoinedSummaryReportWithTotal(packagesSumm
             total[key] = { ...report.total[key] }
           }
         })
+
         return { ...summary, [packageName]: report.total, total }
       }
 
@@ -99,7 +106,8 @@ function readSummaryPerPackageAndCreateJoinedSummaryReportWithTotal(packagesSumm
  * an object with the additional field pctDiff
  * @param {*} packagesSummaryPaths
  * @returns
- * */
+ *
+ */
 function creteDiffCoverageReport(currCoverage, prevCoverage = {}) {
   return Object.keys(currCoverage).reduce((summary, packageName) => {
     const currPackageCoverage = currCoverage[packageName]
@@ -116,6 +124,7 @@ function creteDiffCoverageReport(currCoverage, prevCoverage = {}) {
         }
       })
     }
+
     return { ...summary, [packageName]: currPackageCoverage }
   }, {})
 }
@@ -132,6 +141,7 @@ function appendDiff(ptc, ptcDiff) {
   if (!ptcDiff || ptcDiff === ptc) {
     return ptc
   }
+
   return `${ptc} (${ptcDiff > 0 ? '+' : ''}${ptcDiff}%)`
 }
 
@@ -141,17 +151,19 @@ function appendDiff(ptc, ptcDiff) {
  * for the visual representation in a console table
  * @param {*} coverageReport
  * @returns
- * */
+ *
+ */
 function createCoverageReportForVisualRepresentation(coverageReport) {
   return Object.keys(coverageReport).reduce((report, packageName) => {
     const { lines, statements, functions, branches } = coverageReport[packageName]
+
     return {
       ...report,
       [packageName]: {
-        lines: formatPtcWithDiff(lines.pct, lines.pctDiff),
-        statements: formatPtcWithDiff(statements.pct, statements.pctDiff),
-        functions: formatPtcWithDiff(functions.pct, functions.pctDiff),
-        branches: formatPtcWithDiff(branches.pct, branches.pctDiff)
+        lines: formatPtcWithDiff(lines?.pct, lines?.pctDiff),
+        statements: formatPtcWithDiff(statements?.pct, statements?.pctDiff),
+        functions: formatPtcWithDiff(functions?.pct, functions?.pctDiff),
+        branches: formatPtcWithDiff(branches?.pct, branches?.pctDiff)
       }
     }
   }, {})
@@ -160,6 +172,7 @@ function createCoverageReportForVisualRepresentation(coverageReport) {
 function writeCoverageReportToFile(coverageReport) {
   function createDateTimeSuffix() {
     const date = new Date()
+
     return `${date.getFullYear()}-${
       date.getMonth() + 1
     }-${date.getDate()}_${date.getHours()}-${date.getMinutes()}`
@@ -177,8 +190,10 @@ function writeCoverageReportToFile(coverageReport) {
   )
 }
 
-// Execution Stages
-// 0. Read previous coverage-total.{XXX}.json file
+/*
+ * Execution Stages
+ * 0. Read previous coverage-total.{XXX}.json file
+ */
 const prevCoverageReport = readPreviousCoverageSummary(pathToPreviousReport)
 // 1. Read all coverage-total.json files && Merge them into one object
 const packagesSummaryPaths = getAllPathsForPackagesSummaries()