Tour is now connected with daemon

package.json

@@ -28,11 +28,10 @@
     "fastify-ws": "^1.0.0",
     "front-matter": "^2.3.0",
     "fs-exists-sync": "^0.1.0",
-    "got": "^8.3.2",
     "graceful-fs": "^4.1.11",
     "heroku-ssl-redirect": "0.0.4",
     "make-promises-safe": "^1.1.0",
-    "markdown-it": "^8.4.1",
+    "markdown-it": "^8.4.2",
     "markdown-it-anchor": "^5.0.2",
     "markdown-it-sup": "^1.0.0",
     "markdown-it-wikilinks": "^1.0.1",
@@ -41,19 +40,20 @@
     "request-promise-native": "^1.0.5",
     "slack-node": "^0.2.0",
     "socket.io": "^2.1.1",
-    "turbocolor": "^2.3.0",
+    "stringify-object": "^3.2.2",
+    "turbocolor": "~2.3.3",
     "ws": "^5.2.2"
   },
   "devDependencies": {
     "babel-preset-env": "^1.7.0",
     "babel-preset-stage-2": "^6.24.1",
     "choo-devtools": "^2.5.1",
-    "nodemon": "^1.18.2",
+    "nodemon": "^1.18.3",
     "npm-run-all": "^4.1.3",
     "sass": "^1.9.2",
     "snazzy": "^7.1.1",
     "standardx": "^2.1.0",
-    "updates": "^3.2.2"
+    "updates": "^3.2.3"
   },
   "peerDependencies": {
     "request": "^2.87.0"

sass/init/_base.scss

@@ -52,7 +52,7 @@ button {
   }
 
   &:active {
-    top: 2px;
+    // top: 2px;
   }
 }
 

server.js

@@ -15,11 +15,12 @@ const fastify = require("fastify")({
   }
 });
 
-const got = require("got");
 const html = require("choo-async/html");
+const local = require("app-root-path").require;
 const octokit = require("@octokit/rest")();
 const redis = require("redis");
-const local = require("app-root-path").require;
+const request = require("request-promise-native");
+const stringifyObject = require("stringify-object");
 
 //  V A R I A B L E S
 
@@ -181,7 +182,11 @@ function fetchMetadata(claimAddress, resolveMethod, socket) {
     "5b7c7a202201033d99e1be2930d290c127c0f4fe",
     "a1372cf5523885f5923237bfe522f02f5f054362",
     "de7f7fa33e8d879b2bae7238d2bdf827a39f9301",
-    "fbdcd44a97810522d23d5f1335b8ca04be9d776c"
+    "fbdcd44a97810522d23d5f1335b8ca04be9d776c",
+    "fortnite-top-stream-moments-nickatnyte",
+    "itsadisaster",
+    "six",
+    "unbubbled1-1"
   ];
 
   const allowedMethods = [
@@ -202,29 +207,48 @@ function fetchMetadata(claimAddress, resolveMethod, socket) {
     "details": "Invalid claim ID for tutorial"
   }));
 
-  /*
+  const body = {};
-  component.$http.post("https://lbry.tech/forward", {
-    method: "resolve",
-    uri: component.address
-  }).then(response => {
-    component.isLoading = false;
-    component.jsonData = JSON.stringify(response.body, null, "  ");
-  }).catch(error => {
-    component.isLoading = false;
-    component.jsonData = JSON.stringify(error, null, "  ");
-    log("Error retrieving metadata for a claim:\n", error);
-  });
-  */
 
-  got.post("https://lbry.tech/forward", {
+  if (resolveMethod === "publish") {
-    //
+    body.bid = 0.001; // Hardcode the publish amount
-  });
 
-  return html`
+    // Fix the internal image path in daemon
-    <pre><code class="bash">
+    // body.file_path = process.env.LBRY_DAEMON_IMAGES_PATH + body.file_path; // TODO: needed for step 2, check for `file_path`
-      <span v-html="highlight('bash', exampleCode)"></span>
+  }
-      # Example code using the daemon
+
-      curl "http://localhost:5279" --data "{ 'method': 'resolve', 'params': { 'uri': '${claimAddress}' } }"
+  body.method = resolveMethod;
-    </code></pre>
+  body.access_token = process.env.LBRY_DAEMON_ACCESS_TOKEN;
-  `;
+  body.uri = claimAddress;
+
+  return new Promise((resolve, reject) => {
+    request({
+      url: "http://daemon.lbry.tech",
+      qs: body
+    }, (error, response, body) => {
+      if (error) {
+        reject(error);
+        logSlackError("[daemon error]\n", "```" + JSON.stringify(error) + "```");
+        return;
+      }
+
+      body = JSON.parse(body);
+
+      if (typeof body.error !== "undefined") {
+        reject(body.error);
+        logSlackError("[daemon error]\n", "```" + JSON.stringify(body.error) + "```");
+        return;
+      }
+
+      socket.send(JSON.stringify({
+        "message": "updated html",
+        "html": html`
+          <p style="text-align: center;">Success! Here is the response for <strong>lbry://${claimAddress}</strong>:</p>
+          <pre><code class="json">${stringifyObject(body, { indent: "  ", singleQuotes: false })}</code></pre>
+          <button data-action="tour, step two" class="__button-black" type="button">Go to next step</button>
+          <script>$('#temp-loader').remove();</script>
+        `,
+        "selector": "#step1-result"
+      }));
+    });
+  });
 }

views/pages/tour.js

@@ -59,7 +59,8 @@ function step1() {
       <a href="#" class="__button-black" data-action="go to step 2" title="Proceed to step two">Go to next step</a>
 
     - TODO:
-      Create message for error
+      [✓] Create message for error
+      [ ] Scroll to top of page when selecting a claim
   */
 
   return html`
@@ -78,7 +79,7 @@ function step1() {
 
       <div class="hook__page__content inner-wrap" id="step1-placeholder"></div>
 
-      <div class="hook__page__content inner-wrap" id="step1-selections"> <!--/ Hide when "isLoading" || "jsonData" is active /-->
+      <div class="hook__page__content inner-wrap" id="step1-selections">
         <p style="text-align: center;">&hellip;or select a live example from below</p>
 
         <div class="hook__page__content__card">

views/partials/tour-scripts.js

@@ -13,20 +13,11 @@ $("[data-action]").on("click", event => {
   switch(data.action) {
     case "fetch metadata":
       if (!$("#fetch-claim-uri").val()) return;
-
+      fetchMetadata($("#fetch-claim-uri").val());
-      send(JSON.stringify({
-        "claim": $("#fetch-claim-uri").val(),
-        "message": "fetch metadata",
-        "method": "resolve"
-      }));
-
-      $("#step1-placeholder").html("<div class=\"loader\"></div>");
-      $("#step1-selections").hide();
-
       break;
 
     case "choose claim":
-      console.log(data.claimId);
+      fetchMetadata(data.claimId);
       break;
 
     default:
@@ -34,6 +25,36 @@ $("[data-action]").on("click", event => {
   }
 });
 
+
+
+function fetchMetadata(metadataId) {
+  send(JSON.stringify({
+    "claim": metadataId,
+    "message": "fetch metadata",
+    "method": "resolve"
+  }));
+
+  if (!$("#fetch-claim-uri").val()) $("#fetch-claim-uri").val(metadataId);
+
+  /**
+    TODO:
+    [ ] Style code with highlightjs
+    [ ] Add copy to explain that the lbry app has to be running in order to follow example
+  */
+
+  $("#step1-placeholder").html(`
+<pre><code class="bash">
+  # Example code using the daemon
+  curl "http://localhost:5279" --data "{ 'method': 'resolve', 'params': { 'uri': '${metadataId}' } }"
+</code></pre>
+
+<div class="loader" id="temp-loader"></div>
+<div id="step1-result"></div>
+  `);
+
+  $("#step1-selections").hide();
+}
+
 send(JSON.stringify({
   "message": "Landed on Tour"
 }));