add dates to frontend

src/frontend/src/app/app.component.html

@@ -114,9 +114,14 @@
           <div class="card">
             <h3 class="card-header">
               {{shout.title}} 
-              <a [href]="'https://testnet.xrpl.org/transactions/'+shout.hash+'/detailed'" target="_blank">
-                <cds-icon shape="link"></cds-icon>
-              </a>
+              <span class="p3">
+                <br />
+                ({{shout.date}}
+                <a [href]="'https://testnet.xrpl.org/transactions/'+shout.hash+'/detailed'" target="_blank">
+                  <cds-icon shape="link"></cds-icon>
+                </a>
+                )
+              </span>
             </h3>            
             <div class="card-block">
               <div class="card-text">

src/frontend/src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, NgZone, OnInit } from '@angular/core';
 import { ShoutboxDataService } from './services/ShoutboxData.service';
 import { makeTestnetWallet } from './util/TestnetUtils';
 
@@ -19,7 +19,8 @@ export class AppComponent implements OnInit {
     title: "",
     body: "",
     from: "",
-    hash: ""
+    hash: "",
+    date: "",
   }
   userWallet = {
     address: "",
@@ -31,7 +32,8 @@ export class AppComponent implements OnInit {
   }
 
   constructor(
-    private dataService: ShoutboxDataService
+    private dataService: ShoutboxDataService,
+    private zone: NgZone
   ) {
     this.contractAddress = dataService.getContractAddress()
   }
@@ -44,7 +46,8 @@ export class AppComponent implements OnInit {
           title: "",
           body: "",
           from: "",
-          hash: ""
+          hash: "",
+          date: "",
         }
         this.lastMessageHash = hash
       })
@@ -56,15 +59,18 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit() {
-    Promise.all([makeTestnetWallet(), makeTestnetWallet()]).then(([userWallet, drainWallet]) => {
-      console.log(userWallet, drainWallet)
-      this.userWallet = userWallet
-      this.drainWallet = drainWallet
+    Promise.all([makeTestnetWallet(), makeTestnetWallet()])
+      .then(async ([userWallet, drainWallet]) => {
+        this.userWallet = userWallet
+        this.drainWallet = drainWallet
 
-      this.dataService.initialize((shout: any) => {
-        this.shouts.unshift(shout)
+        await this.dataService.initialize((shout: any) => {
+          this.zone.run(_ => {
+            this.shouts.unshift(shout)
+            console.log(shout)
+          })
+        }, userWallet, drainWallet)
         this.initializing = false
-      }, userWallet, drainWallet)
-    })
+      })
   }
 }

src/frontend/src/app/services/ShoutboxData.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from "@angular/core";
+import { ChangeDetectorRef, Injectable, NgZone } from "@angular/core";
 import { z } from 'zod';
 
 declare const RJSVM: any;
@@ -11,16 +11,18 @@ const listeningAddress = "rMBYWyxGx1b5zEjJKF18TTwF5X3vP2WyjR"
 @Injectable()
 export class ShoutboxDataService {
 
-    public history: any[] = []
     private dataWriter = undefined as any
 
+    constructor(
+    ) { }
+
     public submitShout = async (shout: any) => {
         return await this.dataWriter.callEndpoint('submit', shout, 10)
     }
 
     public getContractAddress = () => listeningAddress
 
-    initialize = async (onData:Function, userWallet?:any, drainWallet?:any) => {
+    initialize = async (onData: Function, userWallet?: any, drainWallet?: any) => {
 
         this.dataWriter = new Datawriter({
             receiveAddress: drainWallet.address,
@@ -33,70 +35,69 @@ export class ShoutboxDataService {
             title: z.string(),
             body: z.string(),
             from: z.string(),
+            hash: z.optional(z.string()),
+            date: z.optional(z.string()),
             id: z.optional(z.string())
         })
-        //type Shout = z.infer<typeof shoutSchema>
-    
-        type State = {
-            shouts: any[]
-        }
-    
+        type Shout = z.infer<typeof shoutSchema>
+
+        type State = {}
+
         // #########################
         // Define endpoints
         // #########################
-    
+
         type RJSVM_Endpoints = {
-            submit: (data: any) => void
+            submit: (data: Shout) => void
         }
-    
+
         // #########################
         // Define init state
         // #########################
-    
+
         abstract class RJSVM_Base
             extends RJSVM<State, RJSVM_Endpoints>
-            {
-            
+        {
+
             owner = userWallet.address
-    
-            state: State = {
-                shouts: []
-            }
+
+            state: State = {}
         }
-    
+
         // #########################
         // Implement logic
         // #########################
-    
+
         const RJSVM_Contract = {
             submit: {
-                implementation: function (env:any, shout: any) {
+                implementation: function (env: any, shout: Shout) {
                     shout.hash = env.hash;
-                    (this as any).state.shouts.unshift(shout)
+                    const d = new Date("2000-01-01");
+                    d.setSeconds(d.getSeconds() + env.date)
+                    shout.date = d.toLocaleString("de-DE")
                 },
                 visibility: 'public',
                 fee: 10,
                 parameterSchema: shoutSchema
             }
         }
-    
+
         // #########################
         // Build and connect
         // #########################
-    
+
         const Rjsvm = RJSVM_Builder.from(RJSVM_Base, RJSVM_Contract);
-    
+
         const conf = {
             listeningAddress: listeningAddress,
             rippleNode: xrpNode
         }
-    
+
         const rjsvm = new Rjsvm(conf)
         await rjsvm.connect()
 
         rjsvm.on('error', console.log)
         rjsvm.on('submit', onData)
 
-        this.history = rjsvm.state.shouts
     }
 }