nitowa/tur-shoutbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend work

Browse Source
This commit is contained in:
nitowa
2024-10-13 14:45:00 +02:00
parent 9d64d43230
commit ec746cd1a2
9 changed files with 135 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+7 -7
View File
@@ -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
+1 -1
View File
@@ -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
Generated
+7 -7
View File
@@ -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
+1 -1
View File
@@ -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
+70 -11
View File
@@ -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
+41 -19
View File
@@ -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
+2 -1
View File
@@ -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
+5 -9
View File
@@ -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
+1 -1
View File
@@ -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>