mobx: Created addSessionView, added support for custom sessions

Author: itsrachelfish

app/src/store/store.ts

@@ -20,6 +20,7 @@ import {
 } from './stores';
 import {
   AccountSectionView,
+  AddSessionView,
   AppView,
   BatchesView,
   BuildSwapView,
@@ -66,6 +67,7 @@ export class Store {
   orderListView = new OrderListView(this);
   batchesView = new BatchesView(this);
   registerSidecarView = new RegisterSidecarView(this);
+  addSessionView = new AddSessionView(this);
 
   /** the backend api services to be used by child stores */
   api: {

app/src/store/views/addSessionView.ts

@@ -0,0 +1,149 @@
+import { makeAutoObservable, observable } from 'mobx';
+import { Store } from 'store';
+import * as LIT from 'types/generated/lit-sessions_pb';
+import { MAX_DATE } from 'util/constants';
+
+export default class AddSessionView {
+  private _store: Store;
+
+  label = '';
+  permissionType = 'admin';
+  editing = false;
+  permissions: { [key: string]: boolean } = {
+    openChannel: false,
+    closeChannel: false,
+    setFees: false,
+    loop: false,
+    pool: false,
+    viewActivity: false,
+    send: false,
+    receive: false,
+  };
+  expiration = 'never';
+  expirationDate = '';
+  showAdvanced = false;
+  proxy = '';
+
+  constructor(store: Store) {
+    makeAutoObservable(
+      this,
+      {
+        permissions: observable.deep,
+      },
+      { deep: false, autoBind: true },
+    );
+
+    this._store = store;
+  }
+
+  //
+  // Private helper functions
+  //
+
+  private setAllPermissions(value: boolean) {
+    Object.keys(this.permissions).forEach(permissionName => {
+      this.permissions[permissionName] = value;
+    });
+  }
+
+  //
+  // Actions
+  //
+
+  setLabel(label: string) {
+    this.label = label;
+  }
+
+  setExpiration(expiration: string) {
+    this.expiration = expiration;
+  }
+
+  setExpirationDate(expirationDate: string) {
+    this.expirationDate = expirationDate;
+  }
+
+  setProxy(proxy: string) {
+    this.proxy = proxy;
+  }
+
+  setPermissionType(permissionType: string) {
+    this.permissionType = permissionType;
+
+    switch (permissionType) {
+      case 'admin':
+        this.setAllPermissions(true);
+        break;
+
+      case 'read-only':
+        this.setAllPermissions(false);
+        this.permissions.viewActivity = true;
+        break;
+
+      case 'liquidity':
+        this.setAllPermissions(false);
+        this.permissions.setFees = true;
+        this.permissions.loop = true;
+        this.permissions.pool = true;
+        break;
+
+      case 'payments':
+        this.setAllPermissions(false);
+        this.permissions.send = true;
+        this.permissions.receive = true;
+        break;
+
+      case 'custom':
+        // We don't need to change anything, let the user customize permissions how they want
+        break;
+    }
+  }
+
+  togglePermission(permission: string) {
+    this.setPermissionType('custom');
+    this.permissions[permission] = !this.permissions[permission];
+  }
+
+  toggleEditing() {
+    this.editing = !this.editing;
+  }
+
+  toggleAdvanced() {
+    this.showAdvanced = !this.showAdvanced;
+  }
+
+  cancel() {
+    this.label = '';
+    this.permissionType = 'admin';
+    this.editing = false;
+    this.setAllPermissions(false);
+    this.expiration = 'never';
+    this.showAdvanced = false;
+  }
+
+  //
+  // Async Actions
+  //
+
+  async handleSubmit() {
+    if (this.permissionType === 'custom') {
+      this._store.settingsStore.sidebarVisible = false;
+      this._store.router.push('/connect/custom');
+    } else {
+      const sessionType =
+        this.permissionType === 'admin'
+          ? LIT.SessionType.TYPE_MACAROON_ADMIN
+          : LIT.SessionType.TYPE_MACAROON_READONLY;
+
+      const session = await this._store.sessionStore.addSession(
+        this.label,
+        sessionType,
+        MAX_DATE,
+        true,
+      );
+
+      if (session) {
+        this.cancel();
+      }
+    }
+  }
+}

app/src/store/views/index.ts

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