(feat): add a new transactions screen

src/app/modules/monetization/revenue/console.component.html

@@ -16,11 +16,13 @@
 
  <a
  class="m-page--sidebar--navigation--item"
- routerLink="/wallet/usd/earnings"
+ routerLink="/wallet/usd/transactions"
  routerLinkActive="m-page--sidebar--navigation--item-active"
  >
  <i class="material-icons">history</i>
- <span i18n="@@MONETIZATION__REVENUE__CONSOLE__EARNINGS">Earnings</span>
+ <span i18n="@@MONETIZATION__REVENUE__CONSOLE__EARNINGS"
+ >Transactions</span
+ >
  </a>
 
  <a

src/app/modules/wallet/usd/transactions.component.html

+<table class="m-walletUsdTransactions__table m-border">
+ <tr>
+ <td>Date</td>
+ <td>User</td>
+ <td>Gross</td>
+ <td>Net</td>
+ </tr>
+
+ <tr *ngFor="let transaction of transactions">
+ <td>{{ transaction.timestamp * 1000 | date: 'medium' }}</td>
+ <td>
+ <a
+ *ngIf="transaction.customer_user"
+ [routerLink]="['/', transaction.customer_user.username]"
+ >
+ <span>@</span>{{ transaction.customer_user.username }}
+ </a>
+ </td>
+ <td>{{ transaction.gross / 100 | number: '1.2-2' }} USD</td>
+ <td>
+ {{ transaction.net / 100 | number: '1.2-2' }}
+ {{ transaction.currency | uppercase }}
+ </td>
+ </tr>
+</table>

src/app/modules/wallet/usd/transactions.component.scss

+.m-walletUsdTransactions__table {
+ width: 100%;
+
+ @include m-theme() {
+ background-color: themed($m-white);
+ }
+
+ > tr:first-of-type() {
+ font-weight: bold;
+ }
+
+ td {
+ padding: $minds-padding * 2;
+ font-size: 13px;
+
+ @include m-theme() {
+ border-bottom: 1px solid themed($m-grey-50);
+ }
+ }
+}

src/app/modules/wallet/usd/transactions.component.ts

+import { Component, ViewChild, ComponentFactoryResolver } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { DynamicHostDirective } from '../../../common/directives/dynamic-host.directive';
+import { RevenueLedgerComponent } from '../../monetization/revenue/ledger.component';
+import { Session } from '../../../services/session';
+import { Client } from '../../../services/api/client';
+
+@Component({
+ selector: 'm-walletUsd__transactions',
+ templateUrl: './transactions.component.html',
+})
+export class WalletUSDTransactionsComponent {
+ transactions = [];
+
+ constructor(
+ private router: Router,
+ private session: Session,
+ private client: Client
+ ) {}
+
+ ngOnInit() {
+ this.load();
+ }
+
+ async load() {
+ const { transactions } = <any>(
+ await this.client.get('api/v2/payments/stripe/transactions')
+ );
+ this.transactions = transactions;
+ }
+}

src/app/modules/wallet/wallet.module.ts

@@ -33,6 +33,7 @@ import { WalletBalanceTokensComponent } from './balances/tokens/balance.componen
 import { WalletBalanceRewardsComponent } from './balances/rewards/balance.component';
 import { WalletUSDComponent } from './usd/usd.component';
 import { WalletUSDEarningsComponent } from './usd/earnings.component';
+import { WalletUSDTransactionsComponent } from './usd/transactions.component';
 import { WalletUSDPayoutsComponent } from './usd/payouts.component';
 import { WalletUSDSettingsComponent } from './usd/settings.component';
 import { WalletUSDOnboardingComponent } from './usd/onboarding/onboarding.component';
@@ -87,6 +88,7 @@ const walletRoutes: Routes = [
  component: WalletUSDComponent,
  children: [
  { path: '', redirectTo: 'earnings', pathMatch: 'full' },
+ { path: 'transactions', component: WalletUSDTransactionsComponent },
  { path: 'earnings', component: WalletUSDEarningsComponent },
  { path: 'payouts', component: WalletUSDPayoutsComponent },
  { path: 'settings', component: WalletUSDSettingsComponent },
@@ -140,6 +142,7 @@ const walletRoutes: Routes = [
  WalletBalanceRewardsComponent,
  WalletUSDComponent,
  WalletUSDEarningsComponent,
+ WalletUSDTransactionsComponent,
  WalletUSDPayoutsComponent,
  WalletUSDSettingsComponent,
  WalletUSDOnboardingComponent,