pool+mobx: add RegisterSidecar RPC and mobx state

Author: jamaljsr

app/src/api/pool.ts

@@ -271,6 +271,17 @@ class PoolApi extends BaseApi<PoolEvents> {
     return res.toObject();
   }
 
+  /**
+   * call the pool `RegisterSidecar` RPC and return the response
+   */
+  async registerSidecar(ticket: string): Promise<POOL.SidecarTicket.AsObject> {
+    const req = new POOL.RegisterSidecarRequest();
+    req.setTicket(ticket);
+    req.setAutoNegotiate(true);
+    const res = await this._grpc.request(Trader.RegisterSidecar, req, this._meta);
+    return res.toObject();
+  }
+
   //
   // Utility functions to convert user-facing units to API units
   //

app/src/store/store.ts

@@ -26,6 +26,7 @@ import {
   FundNewAccountView,
   OrderFormView,
   OrderListView,
+  RegisterSidecarView,
   RenewAccountView,
 } from './views';
 
@@ -61,6 +62,7 @@ export class Store {
   orderFormView = new OrderFormView(this);
   orderListView = new OrderListView(this);
   batchesView = new BatchesView(this);
+  registerSidecarView = new RegisterSidecarView(this);
 
   /** the backend api services to be used by child stores */
   api: {

app/src/store/stores/accountStore.ts

@@ -252,4 +252,17 @@ export default class AccountStore {
       this._store.appView.handleError(error, 'Unable to withdraw funds');
     }
   }
+
+  /**
+   * submits a sidecar ticket registration to the pool api
+   */
+  async registerSidecar(ticket: string) {
+    try {
+      this._store.log.info('registering sidecar ticket');
+
+      await this._store.api.pool.registerSidecar(ticket);
+    } catch (error) {
+      this._store.appView.handleError(error, 'Unable to register sidecar ticket');
+    }
+  }
 }

app/src/store/views/index.ts

@@ -9,3 +9,4 @@ export { default as OrderFormView } from './orderFormView';
 export { default as OrderListView } from './orderListView';
 export { default as LeaseView } from './leaseView';
 export { default as BatchesView } from './batchesView';
+export { default as RegisterSidecarView } from './registerSidecarView';

app/src/store/views/registerSidecarView.ts

@@ -0,0 +1,125 @@
+import { makeAutoObservable, toJS } from 'mobx';
+import { SidecarRegisterSteps } from 'types/state';
+import { Store } from 'store';
+
+// an artificial delay to allow the user to abort a ticket registration before it executed
+export const TICKET_ABORT_DELAY = 2000;
+
+export default class RegisterSidecarView {
+  private _store: Store;
+
+  /** the current step of the wizard to display */
+  currentStep = SidecarRegisterSteps.Closed;
+
+  // the the sidecar ticket
+  ticket = '';
+
+  /** the reference to the timeout used to allow aborting */
+  processingTimeout?: NodeJS.Timeout;
+
+  constructor(store: Store) {
+    makeAutoObservable(this, {}, { deep: false, autoBind: true });
+
+    this._store = store;
+  }
+
+  //
+  // Computed properties
+  //
+
+  /** determines whether to show the wizard UI */
+  get showWizard(): boolean {
+    return [
+      SidecarRegisterSteps.EnterTicket,
+      SidecarRegisterSteps.ConfirmTicket,
+      SidecarRegisterSteps.Processing,
+      SidecarRegisterSteps.Complete,
+    ].includes(this.currentStep);
+  }
+
+  //
+  // Actions
+  //
+
+  /**
+   * Show the first screen of the Sidecar Wizard
+   */
+  startRegister() {
+    this.currentStep = SidecarRegisterSteps.EnterTicket;
+  }
+
+  /**
+   * Navigate to the next step in the wizard
+   */
+  goToNextStep() {
+    if (this.currentStep === SidecarRegisterSteps.ConfirmTicket) {
+      this.registerTicket();
+    }
+    this.currentStep++;
+    this._store.log.info(`updated registerSidecarView.currentStep`, this.currentStep);
+  }
+
+  /**
+   * Navigate to the previous step in the wizard
+   */
+  goToPrevStep() {
+    if (this.currentStep === SidecarRegisterSteps.Processing) {
+      // if back is clicked on the processing step
+      this.abort();
+    }
+    if (this.currentStep === SidecarRegisterSteps.Complete) {
+      this.cancel();
+      return;
+    }
+    this.currentStep--;
+    this._store.log.info(`updated registerSidecarView.currentStep`, this.currentStep);
+  }
+
+  /**
+   * hide the sidecar wizard
+   */
+  cancel() {
+    this.currentStep = SidecarRegisterSteps.Closed;
+    this.ticket = '';
+    this._store.log.info(`reset registerSidecarView`, toJS(this));
+  }
+
+  /**
+   * sets the value of the ticket
+   */
+  setTicket(ticket: string) {
+    this.ticket = ticket;
+  }
+
+  /**
+   * submit a request to the Pool API to perform the ticket registration
+   */
+  registerTicket() {
+    const delay =
+      process.env.NODE_ENV === 'test'
+        ? 1 // use a 1 ms delay for unit tests
+        : TICKET_ABORT_DELAY;
+
+    this.processingTimeout = setTimeout(async () => {
+      try {
+        this._store.log.info(`registering sidecar ticket`, toJS(this.ticket));
+        const res = await this._store.api.pool.registerSidecar(this.ticket);
+        this.goToNextStep();
+        this._store.log.info(`registered ticket successfully`, toJS(res.ticket));
+      } catch (error) {
+        this._store.appView.handleError(error, `Unable to register ticket`);
+        this.goToPrevStep();
+      }
+    }, delay);
+  }
+
+  /**
+   * abort a register that has been submitted
+   */
+  abort() {
+    if (this.processingTimeout) {
+      clearTimeout(this.processingTimeout);
+      this.processingTimeout = undefined;
+    }
+  }
+}

app/src/types/state.ts

@@ -32,6 +32,14 @@ export enum BuildSwapSteps {
   Processing = 4,
 }
 
+export enum SidecarRegisterSteps {
+  Closed = 0,
+  EnterTicket = 1,
+  ConfirmTicket = 2,
+  Processing = 3,
+  Complete = 4,
+}
+
 export interface Alert {
   id: number;
   type: 'info' | 'success' | 'warning' | 'error' | 'default';