Feat/4.8.0 (#129)

* 4.7.1

* 4.8.0

* 4.8.0

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## v4.8.0 (January 7, 2024)
+
+### Changed
+
+-  Added relative timestamps for each transaction on the Account page
+
 ## v4.7.1 (January 6, 2024)
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "thebananostand",
-  "version": "4.7.1",
+  "version": "4.8.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --open --host 0.0.0.0",

src/app/pages/account/components/transaction/transaction.component.ts

@@ -73,8 +73,21 @@ import { AppStateService } from '@app/services/app-state.service';
                                 </button>
                             </div>
                         </div>
-                        <span *ngIf="!vp.sm" [style.marginLeft.px]="32" class="mat-body-1">
-                            tx #{{ util.numberWithCommas(item.height) }}
+                        <span
+                            *ngIf="!vp.md && !vp.sm"
+                            [style.marginLeft.px]="16"
+                            class="mat-body-1"
+                            style="min-width: 140px; text-align:right"
+                        >
+                            {{ item.relativeTime }}
+                        </span>
+                        <span
+                            *ngIf="!vp.sm"
+                            [style.marginLeft.px]="16"
+                            class="mat-body-1"
+                            style="min-width: 100px; text-align:right"
+                        >
+                            tx #{{ item.height | appComma }}
                         </span>
                     </div>
                 </div>

src/app/pages/account/datasource.ts

@@ -85,6 +85,7 @@ export class MyDataSource extends DataSource<ConfirmedTx | undefined> {
                 this.firstPageLoaded = true;
                 data.map((tx) => {
                     tx.amount = this._util.numberWithCommas(tx.amount, 6);
+                    tx.relativeTime = this._util.getRelativeTime(tx.timestamp);
                     this._lowestLoadedHeight = tx.height;
                     if (this._isFilterApplied) {
                         this.filteredTransactions.push(tx);

src/app/services/util.service.ts

@@ -105,4 +105,44 @@ export class UtilService {
     clipboardCopy(text: string): void {
         copy(text);
     }
+
+    /** Given a number of days, returns a string representation of time (e.g 3 weeks ago). */
+    getRelativeTime(timestamp: number): string {
+        const currentDate = new Date().getTime() / 1000;
+        const oneDay = 24 * 60 * 60; // hours*minutes*seconds*milliseconds
+        const days = timestamp ? (currentDate - timestamp) / oneDay : undefined;
+        if (!days) {
+            return '';
+        }
+
+        if (days > 365) {
+            const years = Math.round(days / 365);
+            return `${years} year${years > 1 ? 's' : ''} ago`;
+        }
+        if (days > 30) {
+            const months = Math.round(days / 30);
+            return `${months} month${months > 1 ? 's' : ''} ago`;
+        }
+        if (days > 7) {
+            const weeks = Math.round(days / 7);
+            return `${weeks} week${weeks > 1 ? 's' : ''} ago`;
+        }
+        if (days >= 1) {
+            const rounded = Math.round(days);
+            return `${rounded} day${rounded > 1 ? 's' : ''} ago`;
+        }
+        if (days < 1) {
+            const hours = days * 24;
+            if (hours > 1) {
+                const roundedHours = Math.round(hours);
+                return `${roundedHours} hour${roundedHours > 1 ? 's' : ''} ago`;
+            }
+            const roundedMinutes = Math.round(hours * 60);
+            if (roundedMinutes >= 1) {
+                return `${roundedMinutes} min${roundedMinutes > 1 ? 's' : ''} ago`;
+            }
+            const seconds = Math.round(days * 24 * 60 * 60);
+            return `${seconds} sec ago`;
+        }
+    }
 }

src/app/types/ConfirmedTx.ts

@@ -10,4 +10,5 @@ export type ConfirmedTx = {
     type: string;
     hover: boolean;
     showCopiedIcon: boolean;
+    relativeTime?: string;
 };