Work after api break

package.json

     "buffer": "^6.0.3",
     "chai": "^4.3.4",
     "node-fetch": "^2.6.1",
-    "xrpio": "^0.2.1",
+    "rjsvm": "^0.3.0",
+    "xrpio": "^0.3.0",
     "xrpl": "^2.7.0"
   },
   "devDependencies": {

src/Configuration.ts

 
 export const config = {
   "oracle": true,
-  "secret": "sEdVwoxNkoxvRxRDaShXwWzVUkrgztd",
-  "treasuryAddress": "rnhVAr4ri5aTBUfoEzi4PPgc5yVo7jrAa5",
-  "contractAddress": "rakoA9cbkj9SbArhsQAiYFqm1fYYeWvrji", //pk: sEdVYHB7KJuK8jB1HF6Q8HQq62izZ9f
+  "secret": "sEd7WCM4AD8r19eyPfiG7nx6Vkx1bbU",
+  "treasuryAddress": "rhfkTrKqRNKFyY3wWqaHLSxgwfc1eMfvWz",
+  "contractAddress": "rrha5qSA3KUxwLYCBtm1z13KMPwsPFpvQ3", //pk: sEdVr3HmJooxVApTdqCKp4gVHrBBqUr
   "rippleNode": "wss://s.altnet.rippletest.net:51233",
 }

src/frontend/package.json

     "@cds/core": "6.6.2",
     "@clr/angular": "^15.12.0",
     "@clr/ui": "^15.12.0",
+    "axios": "^1.7.7",
     "buffer": "^6.0.3",
     "modern-normalize": "^1.1.0",
     "process": "^0.11.10",
+    "rjsvm": "^0.3.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
+    "xrpio": "^0.3.0",
     "zod": "^3.22.4",
     "zone.js": "~0.11.4"
   },

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

 
               <div class="card-block">
                 <clr-input-container>
-                  <input clrInput [disabled]="sending"  required placeholder="Title" type="text" [(ngModel)]="newShout.title" name="title" />
+                  <input clrInput [disabled]="sending" required placeholder="Title" type="text"
+                    [(ngModel)]="newShout.title" name="title" />
                 </clr-input-container>
-                <textarea clrTextarea [disabled]="sending" required placeholder="Shout Body" type="text" [(ngModel)]="newShout.body"
-                  name="body"></textarea>
+                <textarea clrTextarea [disabled]="sending" required placeholder="Shout Body" type="text"
+                  [(ngModel)]="newShout.body" name="body"></textarea>
                 <clr-input-container>
-                  <input clrInput [disabled]="sending" required placeholder="Your Name" type="text" [(ngModel)]="newShout.from" name="from" />
+                  <input clrInput [disabled]="sending" required placeholder="Your Name" type="text"
+                    [(ngModel)]="newShout.from" name="from" />
                 </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>
+                  [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>
               </div>
             </form>
           </div>
         </div>
       </div>
 
+      <div class="clr-row" *ngIf="initializing">
+        <div class="clr-col-lg-5 clr-col-md-8 clr-col-12">
+          <div class="card">
+            <h3 class="card-header">Syncing application state</h3>
+            <div class="card-block">
+              <div class="card-text">
+                <span class="spinner spinner-inline">Loading...</span>
+                <span>Loading...</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </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="card">

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

   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent implements OnInit{
+  initializing = true
+  waiting = false
   title = 'httXrp Shoutbox';
   shouts: any[] = []
   sending = false
     })
     .finally(() => {
       this.sending = false
+      this.waiting = true
+      setTimeout(() => {this.waiting = false}, 20000)
     })
   }
 
   ngOnInit(){
-    this.shouts = this.dataService.history
+    this.dataService.initialize((shout:any) => {
+      this.shouts.unshift(shout)
+      this.initializing = false
+    })
   }
 }

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

 import { ClarityModule } from '@clr/angular';
 
 import { ClarityIcons, homeIcon } from '@cds/core/icon';
-import { ShoutboxDataService, initShoutboxSvc } from './services/ShoutboxData.service';
+import { ShoutboxDataService } from './services/ShoutboxData.service';
 import { FormsModule } from '@angular/forms';
 
 @NgModule({
   ],
   providers: [
     ShoutboxDataService,
-    {
-      provide: APP_INITIALIZER,
-      useFactory: initShoutboxSvc,
-      deps: [ShoutboxDataService],
-      multi: true
-    }
   ],
   bootstrap: [AppComponent],
 })

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

 declare const Datawriter: any;
 
 const xrpNode = "wss://s.altnet.rippletest.net:51233"
-const listeningAddress = "rB4v4taosTUvuup8prxj2wbrBMbmvmxgXx"
+const listeningAddress = "rMBYWyxGx1b5zEjJKF18TTwF5X3vP2WyjR"
 
 @Injectable()
 export class ShoutboxDataService {
     }
 
 
-    initialize = async () => {
+    initialize = async (onData:Function) => {
 
         const [userWallet, drainWallet] = await Promise.all([makeTestnetWallet(), makeTestnetWallet()])
+
+        console.log(userWallet, drainWallet)
+
         this.dataWriter = new Datawriter({
             receiveAddress: drainWallet.address,
             sendWallet: userWallet,
         const RJSVM_Contract = {
             submit: {
                 implementation: function (env:any, shout:any) {
+                    console.log(shout);
                     (this as any).state.shouts.unshift(shout)
                 },
                 visibility: 'public',
         await rjsvm.connect()
 
         rjsvm.on('error', console.log)
-        rjsvm.on('submit', console.log)
+        rjsvm.on('submit', onData)
 
         this.history = rjsvm.state.shouts
     }
-}
-
-export function initShoutboxSvc(svc: ShoutboxDataService): () => Promise<any> {
-    return svc.initialize;
 }

src/frontend/src/app/util/TestnetUtils.ts

-export const makeTestnetWallet = () : Promise<{ secret: string, address: string }> => fetch('https://faucet.altnet.rippletest.net/accounts', {
-    method: 'POST',
-    headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
-    },
-}).then((raw:any) => {
-    return raw.json().then((content:any) => {
-        return({
-            secret: content.account.secret,
-            address: content.account.address
-        });
-    })
-});
+import axios from 'axios';
+
+export const makeTestnetWallet = async () : Promise<any> => {
+    try{
+        const response = await axios.post('https://faucet.altnet.rippletest.net/accounts', {})
+        return ({
+            secret: response.data.seed,
+            address: response.data.account.address
+        })
+    
+    }catch(e){
+        console.log(e)
+    }
+}

src/frontend/src/index.html

   <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.2.5/lib/browser/rjsvm.browser.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/rjsvm@0.3.1/lib/browser/rjsvm.browser.js"></script>
 </head>
 <body cds-text="body" cds-theme="dark">
   <app-root></app-root>