simple view

2 files changed, 89 insertions, 20 deletions

diff --git a/pages/confirm-create-reserve.html b/pages/confirm-create-reserve.html
index 32a29b9f7..1612340e8 100644
--- a/pages/confirm-create-reserve.html
+++ b/pages/confirm-create-reserve.html
@@ -56,6 +56,11 @@
       padding: 0.3em;
     }
 
+    span.spacer {
+      padding-left: 0.5em;
+      padding-right: 0.5em;
+    }
+
   </style>
 </head>
 
diff --git a/pages/confirm-create-reserve.tsx b/pages/confirm-create-reserve.tsx
index 2c959429f..f490451ca 100644
--- a/pages/confirm-create-reserve.tsx
+++ b/pages/confirm-create-reserve.tsx
@@ -76,31 +76,38 @@ class Controller {
   callbackUrl: string;
   wtTypes: string[];
   detailCollapsed = m.prop<boolean>(true);
+  suggestedExchangeUrl: string;
+  complexViewRequested = false;
+  urlOkay = false;
 
-  constructor(initialExchangeUrl: string,
+  constructor(suggestedExchangeUrl: string,
               amount: AmountJson,
               callbackUrl: string,
               wt_types: string[]) {
     console.log("creating main controller");
+    this.suggestedExchangeUrl = suggestedExchangeUrl;
     this.amount = amount;
     this.callbackUrl = callbackUrl;
     this.wtTypes = wt_types;
     this.timer = new DelayTimer(800, () => this.update());
-    this.url(initialExchangeUrl);
+    this.url(suggestedExchangeUrl);
     this.update();
   }
 
   private update() {
     this.timer.stop();
     const doUpdate = () => {
+      this.reserveCreationInfo = null;
       if (!this.url()) {
-        this.statusString = i18n`Please enter a URL`;
+        this.statusString = i18n`Error: URL is empty`;
+        m.redraw(true);
         return;
       }
       this.statusString = null;
       let parsedUrl = URI(this.url());
       if (parsedUrl.is("relative")) {
-        this.statusString = i18n`The URL you've entered is not valid (must be absolute)`;
+        this.statusString = i18n`Error: URL may not be relative`;
+        m.redraw(true);
         return;
       }
 
@@ -114,16 +121,15 @@ class Controller {
           this.isValidExchange = true;
           this.reserveCreationInfo = r;
           console.dir(r);
-          this.statusString = "The exchange base URL is valid!";
           m.endComputation();
         })
         .catch((e) => {
           console.log("get exchange info rejected");
           if (e.hasOwnProperty("httpStatus")) {
-            this.statusString = `request failed with status ${this.request.status}`;
+            this.statusString = `Error: request failed with status ${this.request.status}`;
           } else if (e.hasOwnProperty("errorResponse")) {
             let resp = e.errorResponse;
-            this.statusString = `error: ${resp.error} (${resp.hint})`;
+            this.statusString = `Error: ${resp.error} (${resp.hint})`;
           }
           m.endComputation();
         });
@@ -131,7 +137,7 @@ class Controller {
 
     doUpdate();
 
-    console.log("got update");
+    console.log("got update", this.url());
   }
 
   reset() {
@@ -188,8 +194,7 @@ class Controller {
   }
 }
 
-
-function view(ctrl: Controller) {
+function view(ctrl: Controller): any {
   let controls = [];
   let mx = (x, ...args) => controls.push(m(x, ...args));
 
@@ -197,16 +202,55 @@ function view(ctrl: Controller) {
      i18n.parts`You are about to withdraw ${m("strong", amountToPretty(
        ctrl.amount))} from your bank account into your wallet.`);
 
-  mx("input",
-     {
-       className: "url",
-       type: "text",
-       spellcheck: false,
-       value: ctrl.url(),
-       oninput: m.withAttr("value", ctrl.onUrlChanged.bind(ctrl)),
-     });
+  if (ctrl.complexViewRequested || !ctrl.suggestedExchangeUrl) {
+    return controls.concat(viewComplex(ctrl));
+  }
 
-  mx("br");
+  return controls.concat(viewSimple(ctrl));
+}
+
+function viewSimple(ctrl: Controller) {
+  let controls = [];
+  let mx = (x, ...args) => controls.push(m(x, ...args));
+
+  if (ctrl.statusString) {
+    mx("p", "Error: ", ctrl.statusString);
+    mx("button.linky", {
+      onclick: () => {
+        ctrl.complexViewRequested = true;
+      }
+    }, "advanced options");
+  }
+  else if (ctrl.reserveCreationInfo) {
+    mx("button.accept", {
+         onclick: () => ctrl.confirmReserve(ctrl.reserveCreationInfo,
+                                            ctrl.url(),
+                                            ctrl.amount,
+                                            ctrl.callbackUrl),
+         disabled: !ctrl.isValidExchange
+       },
+       "Accept fees and withdraw");
+    mx("span.spacer");
+    mx("button.linky", {
+      onclick: () => {
+        ctrl.complexViewRequested = true;
+      }
+    }, "advanced options");
+    let totalCost = Amounts.add(ctrl.reserveCreationInfo.overhead,
+                                ctrl.reserveCreationInfo.withdrawFee).amount;
+    mx("p", `Withdraw cost: ${amountToPretty(totalCost)}`);
+  } else {
+    mx("p", "Please wait ...");
+  }
+
+
+  return controls;
+}
+
+
+function viewComplex(ctrl: Controller) {
+  let controls = [];
+  let mx = (x, ...args) => controls.push(m(x, ...args));
 
   mx("button.accept", {
        onclick: () => ctrl.confirmReserve(ctrl.reserveCreationInfo,
@@ -216,10 +260,30 @@ function view(ctrl: Controller) {
        disabled: !ctrl.isValidExchange
      },
      "Accept fees and withdraw");
+  mx("span.spacer");
+  mx("button.linky", {
+    onclick: () => {
+      ctrl.complexViewRequested = false;
+    }
+  }, "back to simple view");
+
+  mx("br");
+
+
+  mx("input",
+     {
+       className: "url",
+       type: "text",
+       spellcheck: false,
+       value: ctrl.url(),
+       oninput: m.withAttr("value", ctrl.onUrlChanged.bind(ctrl)),
+     });
+
+  mx("br");
 
   if (ctrl.statusString) {
     mx("p", ctrl.statusString);
-  } else {
+  } else if (!ctrl.reserveCreationInfo) {
     mx("p", "Checking URL, please wait ...");
   }