TruncateAddress pipe + Multiple fixes

src/app/app.module.ts

@@ -20,12 +20,14 @@ import { TableModule } from 'primeng/table';
 import { TagModule } from 'primeng/tag';
 import { TooltipModule } from 'primeng/tooltip';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { TruncateAddressPipe } from './truncate-address.pipe';
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
     HomeComponent,
+    TruncateAddressPipe,
   ],
   imports: [
     BrowserModule,

src/app/home/home.component.html

@@ -78,10 +78,10 @@
             <ul class="list-none p-0 m-0" style="max-height: 500px; overflow-y: auto;">
                 <li *ngFor="let transaction of recentTransactions" class="flex align-items-end p-3 mb-3 border-bottom-1 surface-border">
                     <div class="flex flex-column">
-                      <span class="text-xl font-medium text-900 mb-1">{{ transaction.sender }}</span>
+                      <span class="text-xl font-medium text-900 mb-1" [pTooltip]="transaction.sender" [autoHide]="false">{{ transaction.sender | truncateAddress }}</span>
                       <div class="ml-1">
                           <i class="pi pi-arrow-down-right text-primary"></i>
-                          <span class="text-sm font-medium text-900 mb-1 ml-1">{{ transaction.recipient }}</span>
+                          <span class="text-sm font-medium text-900 mb-1 ml-1" [pTooltip]="transaction.recipient" [autoHide]="false">{{ transaction.recipient | truncateAddress}}</span>
                       </div>
                     </div>
                     <span class="text-xl text-900 ml-auto font-semibold">{{ transaction.amount }} XCOIN</span>

src/app/home/home.component.ts

@@ -159,7 +159,7 @@ export class HomeComponent implements OnInit {
             ),
         }).pipe(
             tap(({ transactionHistory, xWalletBalance, operatedTotalValueRes, hashRateRes, totalSupply }) => {
-                this.recentTransactions = transactionHistory.slice(0, 10);
+                this.recentTransactions = transactionHistory.slice(-10).reverse();
                 this.transactionsHistory = transactionHistory;
                 this.xWalletBalance = xWalletBalance.balance;
                 this.operatedTotalValue = operatedTotalValueRes.totalValueOperated;

src/app/truncate-address.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { TruncateAddressPipe } from './truncate-address.pipe';
+
+describe('TruncateAddressPipe', () => {
+  it('create an instance', () => {
+    const pipe = new TruncateAddressPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/truncate-address.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'truncateAddress'
+})
+export class TruncateAddressPipe implements PipeTransform {
+
+  transform(value: string): string {
+    if (!value) return '';
+    return `${value.substring(0, 6)}...${value.substring(value.length - 4)}`;
+  }
+
+}