frontend work

package-lock.json

@@ -12,7 +12,7 @@
         "buffer": "^6.0.3",
         "chai": "^4.3.4",
         "node-fetch": "^2.6.1",
-        "rjsvm": "^0.3.0",
+        "rjsvm": "^0.3.2",
         "xrpio": "^0.3.0",
         "xrpl": "^2.7.0"
       },
@@ -3119,9 +3119,9 @@
       }
     },
     "node_modules/rjsvm": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/rjsvm/-/rjsvm-0.3.0.tgz",
-      "integrity": "sha512-BQSOA7ao2feNl5dyhaAH3A2LJkj7zr3fIsWktlGFbICOa9NZGuZiwLIehf/YaeMhDCOzYe10troHlhU8BCis7w==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/rjsvm/-/rjsvm-0.3.2.tgz",
+      "integrity": "sha512-plaK9+hlTUlEA9W7fZo1wOjnIrwxC0oiFPogvScW/vcHEMsVHJ8Vlmk8hMbhA29X6DA0+VezDtnQ9XFIdLLMSg==",
       "dependencies": {
         "axios": "^1.7.7",
         "stream-http": "^3.2.0",
@@ -6618,9 +6618,9 @@
       }
     },
     "rjsvm": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/rjsvm/-/rjsvm-0.3.0.tgz",
-      "integrity": "sha512-BQSOA7ao2feNl5dyhaAH3A2LJkj7zr3fIsWktlGFbICOa9NZGuZiwLIehf/YaeMhDCOzYe10troHlhU8BCis7w==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/rjsvm/-/rjsvm-0.3.2.tgz",
+      "integrity": "sha512-plaK9+hlTUlEA9W7fZo1wOjnIrwxC0oiFPogvScW/vcHEMsVHJ8Vlmk8hMbhA29X6DA0+VezDtnQ9XFIdLLMSg==",
       "requires": {
         "axios": "^1.7.7",
         "stream-http": "^3.2.0",

package.json

@@ -21,7 +21,7 @@
     "buffer": "^6.0.3",
     "chai": "^4.3.4",
     "node-fetch": "^2.6.1",
-    "rjsvm": "^0.3.0",
+    "rjsvm": "^0.3.2",
     "xrpio": "^0.3.0",
     "xrpl": "^2.7.0"
   },

src/frontend/package-lock.json

@@ -26,7 +26,7 @@
         "buffer": "^6.0.3",
         "modern-normalize": "^1.1.0",
         "process": "^0.11.10",
-        "rjsvm": "^0.3.0",
+        "rjsvm": "^0.3.2",
         "rxjs": "~7.5.0",
         "tslib": "^2.3.0",
         "xrpio": "^0.3.0",
@@ -11639,9 +11639,9 @@
       }
     },
     "node_modules/rjsvm": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/rjsvm/-/rjsvm-0.3.0.tgz",
-      "integrity": "sha512-BQSOA7ao2feNl5dyhaAH3A2LJkj7zr3fIsWktlGFbICOa9NZGuZiwLIehf/YaeMhDCOzYe10troHlhU8BCis7w==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/rjsvm/-/rjsvm-0.3.2.tgz",
+      "integrity": "sha512-plaK9+hlTUlEA9W7fZo1wOjnIrwxC0oiFPogvScW/vcHEMsVHJ8Vlmk8hMbhA29X6DA0+VezDtnQ9XFIdLLMSg==",
       "dependencies": {
         "axios": "^1.7.7",
         "stream-http": "^3.2.0",
@@ -22544,9 +22544,9 @@
       }
     },
     "rjsvm": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/rjsvm/-/rjsvm-0.3.0.tgz",
-      "integrity": "sha512-BQSOA7ao2feNl5dyhaAH3A2LJkj7zr3fIsWktlGFbICOa9NZGuZiwLIehf/YaeMhDCOzYe10troHlhU8BCis7w==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/rjsvm/-/rjsvm-0.3.2.tgz",
+      "integrity": "sha512-plaK9+hlTUlEA9W7fZo1wOjnIrwxC0oiFPogvScW/vcHEMsVHJ8Vlmk8hMbhA29X6DA0+VezDtnQ9XFIdLLMSg==",
       "requires": {
         "axios": "^1.7.7",
         "stream-http": "^3.2.0",

src/frontend/package.json

@@ -30,7 +30,7 @@
     "buffer": "^6.0.3",
     "modern-normalize": "^1.1.0",
     "process": "^0.11.10",
-    "rjsvm": "^0.3.0",
+    "rjsvm": "^0.3.2",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "xrpio": "^0.3.0",

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

@@ -1,19 +1,66 @@
 <div class="main-container">
   <header class="header-2">
     <div class="branding">
-      <a class="nav-link">
+      <a class="nav-link" target="_blank" [href]="'https://testnet.xrpl.org/accounts/'+contractAddress">
         <cds-icon shape="home" size="lg"></cds-icon>
-        <span class="title">httXrp</span>
+        <span class="title">{{contractAddress}}</span>
       </a>
     </div>
     <div class="header-nav">
       <a class="active nav-link nav-text">Shoutbox</a>
     </div>
   </header>
+
   <div class="content-container">
     <div class="content-area">
       <div class="clr-row">
-        <div class="clr-col-lg-5 clr-col-md-8 clr-col-12">
+        <div class="clr-col-lg-6 clr-col-md-8 clr-col-12">
+          <div class="card">
+            <h3 class="card-header">Wallets in use</h3>
+
+            <div class="clr-row">
+
+              <div class="clr-col-lg-6 clr-col-md-8 clr-col-12">
+      
+
+            <div class="card-block">
+              <clr-input-container>
+                <label>User Wallet 1 Address</label>
+                <input clrInput [disabled]="true" required type="text" [(ngModel)]="userWallet.address"
+                  name="title" size="29" />
+              </clr-input-container>
+              <clr-input-container>
+                <label>Secret</label>
+                <input clrInput [disabled]="true" required type="text" [(ngModel)]="userWallet.secret"
+                  name="title" size="29" />
+              </clr-input-container>
+            </div>
+
+            </div>
+            <div class="clr-col-lg-6 clr-col-md-8 clr-col-12">
+
+
+            <div class="card-block">
+              <clr-input-container>
+                <label>User Wallet 2 Address</label>
+                <input clrInput [disabled]="true" required type="text" [(ngModel)]="drainWallet.address"
+                  name="title" size="29" />
+              </clr-input-container>
+              <clr-input-container>
+                <label>Secret</label>
+                <input clrInput [disabled]="true" required type="text" [(ngModel)]="drainWallet.secret"
+                  name="title" size="29" />
+              </clr-input-container>
+            </div>
+          </div>
+
+          </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="clr-row">
+        <div class="clr-col-lg-6 clr-col-md-8 clr-col-12">
           <div class="card">
             <h3 class="card-header">Shout Something</h3>
             <form clrForm #loginForm="ngForm">
@@ -21,20 +68,27 @@
               <div class="card-block">
                 <clr-input-container>
                   <input clrInput [disabled]="sending" required placeholder="Title" type="text"
-                    [(ngModel)]="newShout.title" name="title" />
+                    [(ngModel)]="newShout.title" name="title"  size="45" />
                 </clr-input-container>
                 <textarea clrTextarea [disabled]="sending" required placeholder="Shout Body" type="text"
-                  [(ngModel)]="newShout.body" name="body"></textarea>
+                  [(ngModel)]="newShout.body" name="body" cols="43" rows="15"></textarea>
                 <clr-input-container>
                   <input clrInput [disabled]="sending" required placeholder="Your Name" type="text"
-                    [(ngModel)]="newShout.from" name="from" />
+                    [(ngModel)]="newShout.from" name="from" size="45" />
                 </clr-input-container>
               </div>
               <div class="card-footer">
                 <button class="btn btn-success" (click)="submitShout()"
                   [disabled]="!loginForm.form.valid || sending">Shout</button>
-                  <span *ngIf="sending">Sending...</span>
-                  <span *ngIf="waiting">It may take up to 30 seconds for the new entry to persist</span>
+                  
+                <span *ngIf="sending">Sending...</span>
+                <span *ngIf="waiting">
+                  TX <a [href]="'https://testnet.xrpl.org/transactions/'+lastMessageHash+'/detailed'" target="_blank">
+                    <cds-icon shape="link"></cds-icon>
+                  </a>
+                  <br />
+                  It may take up to 30 seconds for the new entry to persist
+                </span>
               </div>
             </form>
           </div>
@@ -42,7 +96,7 @@
       </div>
 
       <div class="clr-row" *ngIf="initializing">
-        <div class="clr-col-lg-5 clr-col-md-8 clr-col-12">
+        <div class="clr-col-lg-6 clr-col-md-8 clr-col-12">
           <div class="card">
             <h3 class="card-header">Syncing application state</h3>
             <div class="card-block">
@@ -56,9 +110,14 @@
       </div>
 
       <div class="clr-row" *ngFor="let shout of shouts">
-        <div class="clr-col-lg-5 clr-col-md-8 clr-col-12">
+        <div class="clr-col-lg-6 clr-col-md-8 clr-col-12">
           <div class="card">
-            <h3 class="card-header">{{shout.title}}</h3>
+            <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>
+            </h3>            
             <div class="card-block">
               <div class="card-text">
                 {{shout.body}}

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

@@ -1,12 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 import { ShoutboxDataService } from './services/ShoutboxData.service';
+import { makeTestnetWallet } from './util/TestnetUtils';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent implements OnInit{
+export class AppComponent implements OnInit {
+  lastMessageHash = ""
+  contractAddress = "";
   initializing = true
   waiting = false
   title = 'httXrp Shoutbox';
@@ -15,34 +18,53 @@ export class AppComponent implements OnInit{
   newShout = {
     title: "",
     body: "",
-    from: ""
+    from: "",
+    hash: ""
+  }
+  userWallet = {
+    address: "",
+    secret: ""
+  }
+  drainWallet = {
+    address: "",
+    secret: ""
   }
 
   constructor(
     private dataService: ShoutboxDataService
-  ){}
+  ) {
+    this.contractAddress = dataService.getContractAddress()
+  }
 
   submitShout = () => {
     this.sending = true
     this.dataService.submitShout(this.newShout)
-    .then(() => {
-      this.newShout = {
-        title: "",
-        body: "",
-        from: ""
-      }
-    })
-    .finally(() => {
-      this.sending = false
-      this.waiting = true
-      setTimeout(() => {this.waiting = false}, 20000)
-    })
+      .then((hash) => {
+        this.newShout = {
+          title: "",
+          body: "",
+          from: "",
+          hash: ""
+        }
+        this.lastMessageHash = hash
+      })
+      .finally(() => {
+        this.sending = false
+        this.waiting = true
+        setTimeout(() => { this.waiting = false }, 20000)
+      })
   }
 
-  ngOnInit(){
-    this.dataService.initialize((shout:any) => {
-      this.shouts.unshift(shout)
-      this.initializing = false
+  ngOnInit() {
+    Promise.all([makeTestnetWallet(), makeTestnetWallet()]).then(([userWallet, drainWallet]) => {
+      console.log(userWallet, drainWallet)
+      this.userWallet = userWallet
+      this.drainWallet = drainWallet
+
+      this.dataService.initialize((shout: any) => {
+        this.shouts.unshift(shout)
+        this.initializing = false
+      }, userWallet, drainWallet)
     })
   }
 }

src/frontend/src/app/app.module.ts

@@ -6,7 +6,7 @@ import { AppComponent } from './app.component';
 import { CdsModule } from '@cds/angular';
 import { ClarityModule } from '@clr/angular';
 
-import { ClarityIcons, homeIcon } from '@cds/core/icon';
+import { ClarityIcons, homeIcon, linkIcon } from '@cds/core/icon';
 import { ShoutboxDataService } from './services/ShoutboxData.service';
 import { FormsModule } from '@angular/forms';
 
@@ -27,5 +27,6 @@ import { FormsModule } from '@angular/forms';
 export class AppModule {
   constructor() {
     ClarityIcons.addIcons(homeIcon);
+    ClarityIcons.addIcons(linkIcon);
   }
 }

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

@@ -1,5 +1,4 @@
 import { Injectable } from "@angular/core";
-import { makeTestnetWallet } from "../util/TestnetUtils";
 import { z } from 'zod';
 
 declare const RJSVM: any;
@@ -16,15 +15,12 @@ export class ShoutboxDataService {
     private dataWriter = undefined as any
 
     public submitShout = async (shout: any) => {
-        await this.dataWriter.callEndpoint('submit', shout, 10)
+        return await this.dataWriter.callEndpoint('submit', shout, 10)
     }
 
+    public getContractAddress = () => listeningAddress
 
-    initialize = async (onData:Function) => {
-
-        const [userWallet, drainWallet] = await Promise.all([makeTestnetWallet(), makeTestnetWallet()])
-
-        console.log(userWallet, drainWallet)
+    initialize = async (onData:Function, userWallet?:any, drainWallet?:any) => {
 
         this.dataWriter = new Datawriter({
             receiveAddress: drainWallet.address,
@@ -74,8 +70,8 @@ export class ShoutboxDataService {
     
         const RJSVM_Contract = {
             submit: {
-                implementation: function (env:any, shout:any) {
-                    console.log(shout);
+                implementation: function (env:any, shout: any) {
+                    shout.hash = env.hash;
                     (this as any).state.shouts.unshift(shout)
                 },
                 visibility: 'public',

src/frontend/src/index.html

@@ -11,7 +11,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 
-  <script src="https://cdn.jsdelivr.net/npm/rjsvm@0.3.1/lib/browser/rjsvm.browser.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/rjsvm@0.3.2/lib/browser/rjsvm.browser.js"></script>
 </head>
 <body cds-text="body" cds-theme="dark">
   <app-root></app-root>