Tipping example of Tour is nearly done, blocked by daemon issues

helpers/fetch-metadata.js

@@ -25,9 +25,10 @@ loadLanguages(["json"]);
 module.exports = exports = (data, socket) => {
   let dataDetails = "";
 
-  if (data.step === 1 && !data.claim || !data.method) return;
+  if (data.example === 1 && !data.claim || !data.method) return;
-  if (data.step === 2 && !data.data) return;
+  if (data.example === 2 && !data.data) return;
-  if (data.step === 2) dataDetails = data.data; // file upload
+  if (data.example === 2) dataDetails = data.data; // file upload
+  if (data.example === 3 && !data.claim || !data.method) return;
 
   const allowedMethods = [
     "publish",
@@ -49,10 +50,9 @@ module.exports = exports = (data, socket) => {
 
   body.access_token = process.env.LBRY_DAEMON_ACCESS_TOKEN;
   body.method = resolveMethod;
-  if (data.step === 1) body.uri = claimAddress;
 
   if (resolveMethod === "publish") {
-    body.bid = 0.001; // Hardcoded publish amount
+    // body.bid = 0.001; // Hardcoded publish amount
     body.description = dataDetails.description;
     body.file_path = process.env.LBRY_DAEMON_IMAGES_PATH + dataDetails.file_path; // TODO: Fix the internal image path in daemon (original comment, check to see if still true)
     body.language = dataDetails.language;
@@ -102,6 +102,15 @@ module.exports = exports = (data, socket) => {
     });
   }
 
+  if (resolveMethod === "resolve") {
+    body.uri = claimAddress;
+  }
+
+  if (resolveMethod === "wallet_send") {
+    body.amount = "0.001"; // Hardcoded tip amount
+    body.claim_id = claimAddress;
+  }
+
   return new Promise((resolve, reject) => { // eslint-disable-line
     request({
       url: "http://daemon.lbry.tech",
@@ -122,8 +131,8 @@ module.exports = exports = (data, socket) => {
       if (body.error && typeof body.error !== "undefined") {
         logSlackError(
           "\n" +
-          "> *DAEMON ERROR:* ```" + JSON.parse(JSON.stringify(body.error)) + "```" + "\n" +
+          "> *DAEMON ERROR:* ```" + JSON.parse(JSON.stringify(body.error.message)) + "```" + "\n" +
-          "> _Cause: Someone is going through the Tour_\n"
+          "> _Cause: Someone is going through the Tour after a response has been parsed_\n"
         );
 
         return resolve(body.error);
@@ -138,7 +147,7 @@ module.exports = exports = (data, socket) => {
             <pre><code class="language-json">${renderedCode}</code></pre>
           `),
           "message": "updated html",
-          "selector": "#step1-result"
+          "selector": `#example${data.example}-result`
         }));
       }
 

sass/pages/_tour.scss

@@ -20,7 +20,7 @@
   vertical-align: top;
 }
 
-.tour__sidebar__step {
+.tour__sidebar__example {
   cursor: pointer;
 
   &:not(:last-of-type) {

server.js

@@ -100,8 +100,8 @@ fastify.ready(err => {
 
           break;
 
-        case "landed on tour":
+        case "landed on tour" || "request for tour, example 1":
-          generateStep1OfTour(result => {
+          generateTrendingContent(1, result => {
             socket.send(JSON.stringify({
               "html": result,
               "message": "updated html",
@@ -111,6 +111,19 @@ fastify.ready(err => {
 
           break;
 
+        /*
+        case "request for tour, example 3":
+          generateTrendingContent(3, result => {
+            socket.send(JSON.stringify({
+              "html": result,
+              "message": "updated html",
+              "selector": "#tour-loader"
+            }));
+          });
+
+          break;
+        */
+
         case "subscribe":
           newsletterSubscribe(data, socket);
           break;
@@ -121,7 +134,10 @@ fastify.ready(err => {
       }
     });
 
-    socket.on("close", () => socket.terminate());
+    socket.on("close", () => {
+      // console.log(socket);
+      return socket.terminate();
+    });
   });
 });
 
@@ -187,6 +203,62 @@ function generateGitHubFeed(displayGitHubFeed) {
   }
 }
 
+function generateTrendingContent(exampleNumber, displayTrendingContent) {
+  return getTrendingContent().then(response => {
+    if (!response || !response.success || response.success !== true || !response.data) return "";
+
+    const rawContentCollection = [];
+    const renderedContentCollection = [];
+    const trendingContentData = response.data;
+
+    for (const data of trendingContentData) {
+      rawContentCollection.push(fetchMetadata({ claim: data.url, method: "resolve", example: exampleNumber }));
+
+      /*
+      if (exampleNumber === 1) {
+        rawContentCollection.push(fetchMetadata({ claim: data.url, method: "resolve", example: exampleNumber }));
+      }
+
+      if (exampleNumber === 3) {
+        rawContentCollection.push(fetchMetadata({ claim: data.url, method: "wallet_send", example: exampleNumber }));
+      }
+      */
+    }
+
+    Promise.all(rawContentCollection).then(collection => {
+      for (const part of collection) {
+        if (!part.value.stream.metadata.nsfw && part.value.stream.metadata.thumbnail) {
+          renderedContentCollection.push(`
+            <figure class="tour__content__trend">
+              <img alt="${part.name}" data-action="choose claim" data-claim-id="${exampleNumber === 1 ? part.name : part.claim_id}" src="${part.value.stream.metadata.thumbnail}"/>
+
+              <figcaption data-action="choose claim" data-claim-id="${exampleNumber === 1 ? part.name : part.claim_id}">
+                ${part.value.stream.metadata.title}
+                <span>${part.channel_name}</span>
+              </figcaption>
+            </figure>
+          `);
+        }
+      }
+
+      displayTrendingContent(renderedContentCollection.join(""));
+    });
+  });
+}
+
+function getTrendingContent() {
+  return new Promise((resolve, reject) => {
+    request({
+      method: "GET",
+      url: "https://api.lbry.io/file/list_trending"
+    }, (error, response, body) => {
+      if (error) reject(error);
+      body = JSON.parse(body);
+      resolve(body);
+    });
+  });
+}
+
 function newsletterSubscribe(data, socket) {
   const email = data.email;
 
@@ -281,48 +353,3 @@ function validateEmail(email) {
   const re = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\\.,;:\s@"]{2,})$/i;
   return re.test(String(email));
 }
-
-
-
-function generateStep1OfTour(displayTrendingContent) {
-  return getTrendingContent().then(response => {
-    if (!response || !response.success || response.success !== true || !response.data) return "";
-    const trendingContentData = response.data;
-
-    const rawContentCollection = [];
-    const renderedContentCollection = [];
-    for (const data of trendingContentData) rawContentCollection.push(fetchMetadata({ claim: data.url, method: "resolve", step: 1 }));
-
-    Promise.all(rawContentCollection).then(collection => {
-      for (const part of collection) {
-        if (!part.value.stream.metadata.nsfw && part.value.stream.metadata.thumbnail) {
-          renderedContentCollection.push(`
-            <figure class="tour__content__trend">
-              <img alt="${part.name}" data-action="choose claim" data-claim-id="${part.name}" src="${part.value.stream.metadata.thumbnail}"/>
-
-              <figcaption data-action="choose claim" data-claim-id="${part.name}">
-                ${part.value.stream.metadata.title}
-                <span>${part.channel_name}</span>
-              </figcaption>
-            </figure>
-          `);
-        }
-      }
-
-      displayTrendingContent(renderedContentCollection.join(""));
-    });
-  });
-}
-
-function getTrendingContent() {
-  return new Promise((resolve, reject) => {
-    request({
-      method: "GET",
-      url: "https://api.lbry.io/file/list_trending"
-    }, (error, response, body) => {
-      if (error) reject(error);
-      body = JSON.parse(body);
-      resolve(body);
-    });
-  });
-}

views/partials/tour-scripts.js

@@ -15,57 +15,63 @@ if (window.location.href.search && window.location.href.split("?url=")[1]) { //
 
 $("body").on("click", "[data-action]", event => {
   event.preventDefault();
+
+  let exampleNumber;
   const data = event.currentTarget.dataset;
 
+  if (!parseInt($(".tour__sidebar__example.active")[0].dataset.example)) return;
+  exampleNumber = parseInt($(".tour__sidebar__example.active")[0].dataset.example);
+
   switch(data.action) {
     case "choose claim":
-      fetchMetadata(1, data.claimId);
+      fetchMetadata(exampleNumber, data.claimId);
       break;
 
     case "execute claim":
       if (!$("#fetch-claim-uri").val()) return;
-      fetchMetadata(1, $("#fetch-claim-uri").val());
+      fetchMetadata(exampleNumber, $("#fetch-claim-uri").val());
       break;
 
-    case "tour, step 1":
+    case "tour, example 1":
-      $(".tour__sidebar__step").removeClass("active");
+      $(".tour__sidebar__example").removeClass("active");
-      $(".tour__sidebar__step:nth-child(1)").addClass("active");
+      $(".tour__sidebar__example:nth-child(1)").addClass("active");
 
-      $("#tour-loader").show();
+      $("#tour-loader").html("");
-      $("#tour-results").hide();
+      $("#tour-results").html("");
+
+      send(JSON.stringify({
+        "message": `request for ${data.action}`
+      }));
 
-      /*
-      $("#step1-page").show();
-      $("#step2-page").hide();
-      $("#step3-page").hide();
-      */
       break;
 
-    case "tour, step 2":
+    case "tour, example 2":
-      $(".tour__sidebar__step").removeClass("active");
+      $(".tour__sidebar__example").removeClass("active");
-      $(".tour__sidebar__step:nth-child(2)").addClass("active");
+      $(".tour__sidebar__example:nth-child(2)").addClass("active");
 
       /*
-      $("#step1-page").hide();
+      $("#example1-page").hide();
-      $("#step2-page").show();
+      $("#example2-page").show();
       $(".hook__page__content__meme__thumbnail").click(); // preload canvas
-      $("#step3-page").hide();
+      $("#example3-page").hide();
       */
       break;
 
-    case "tour, step 3":
+    case "tour, example 3":
-      $(".tour__sidebar__step").removeClass("active");
+      $(".tour__sidebar__example").removeClass("active");
-      $(".tour__sidebar__step:nth-child(3)").addClass("active");
+      $(".tour__sidebar__example:nth-child(3)").addClass("active");
+
+      $("#tour-loader").html("");
+      $("#tour-results").html("");
+
+      send(JSON.stringify({
+        "message": `request for ${data.action}`
+      }));
 
-      /*
-      $("#step1-page").hide();
-      $("#step2-page").hide();
-      $("#step3-page").show();
-      */
       break;
 
     case "upload image":
-      fetchMetadata(2, getMemeInfo());
+      fetchMetadata(exampleNumber, getMemeInfo());
       break;
 
     default:
@@ -112,7 +118,7 @@ function detectLanguageAndUpdate() {
 
 function initializeTour() {
   $("#fetch-claim-uri").val("").focus(); // reset
-  $(".tour__sidebar__step:nth-child(1)").addClass("active");
+  $(".tour__sidebar__example:nth-child(1)").addClass("active");
 
   send(JSON.stringify({
     "message": "landed on tour"
@@ -129,19 +135,19 @@ function initializeTour() {
 
 
 
-function fetchMetadata(stepNumber, data) {
+function fetchMetadata(exampleNumber, data) {
-  if (!stepNumber) return;
+  if (!exampleNumber) return;
 
-  switch(stepNumber) {
+  switch(exampleNumber) {
     case 1:
       send(JSON.stringify({
         "claim": data,
         "message": "fetch metadata",
         "method": "resolve",
-        "step": stepNumber
+        "example": exampleNumber
       }));
 
-      if (!$("#fetch-claim-uri").val()) $("#fetch-claim-uri").val(data);
+      $("#fetch-claim-uri").val(data); // if (!$("#fetch-claim-uri").val()) $("#fetch-claim-uri").val(data);
 
       $("#tour-results").html(`
         <pre><code class="language-bash">
@@ -150,7 +156,7 @@ curl "http://localhost:5279" --data "{ 'method': 'resolve', 'params': { 'uri': '
         </code></pre>
 
         <div class="loader" id="temp-loader"></div>
-        <div id="step1-result"></div>
+        <div id="example1-result"></div>
       `);
 
       $("#tour-loader").hide();
@@ -161,19 +167,51 @@ curl "http://localhost:5279" --data "{ 'method': 'resolve', 'params': { 'uri': '
         "data": data,
         "message": "fetch metadata",
         "method": "publish",
-        "step": stepNumber
+        "example": exampleNumber
       }));
 
       break;
 
+    case 3:
+      send(JSON.stringify({
+        "claim": data,
+        "message": "fetch metadata",
+        "method": "wallet_send",
+        "example": exampleNumber
+      }));
+
+      $("#fetch-claim-uri").val(data);
+
+      $("#tour-results").html(`
+        <pre><code class="language-bash">
+<span class="token comment"># If you have the LBRY desktop app, you can run this in your Terminal</span>
+curl "http://localhost:5279" --data "{ 'method': 'wallet_send', 'params': { 'claim_id': '${data}', 'amount': '0.01' } }"
+        </code></pre>
+
+        <div class="loader" id="temp-loader"></div>
+        <div id="example3-result"></div>
+      `);
+
+      $("#tour-loader").hide();
+      break;
+
     default:
       break;
   }
 }
 
 function getMemeInfo() { // TODO: Error handling
-  const info = {};
+  const info = {
+    description: $("#meme-description").val(),
+    file_path: $("#meme-canvas")[0].toDataURL("image/jpeg", 0.6),
+    language: $("#meme-language").val(),
+    license: $("#meme-license").val(),
+    name: $("#meme-title").val(),
+    nsfw: $("#meme-nsfw-flag")[0].checked,
+    title: $("#meme-title").val()
+  };
 
+  /*
   info.description = $("#meme-description").val();
   info.file_path = $("#meme-canvas")[0].toDataURL("image/jpeg", 0.6);
   info.language = $("#meme-language").val();
@@ -181,6 +219,7 @@ function getMemeInfo() { // TODO: Error handling
   info.name = $("#meme-title").val();
   info.nsfw = $("#meme-nsfw-flag")[0].checked;
   info.title = $("#meme-title").val();
+  */
 
   return info;
 }

views/partials/tour.js

@@ -17,7 +17,7 @@ module.exports = exports = () => dedent`
     <ul class="tour__sidebar">
       ${raw(sidebar())}
     </ul>
-    <section class="tour__content">${raw(step1())}</section>
+    <section class="tour__content">${raw(example1())}</section>
   </section>
 `;
 
@@ -25,17 +25,17 @@ module.exports = exports = () => dedent`
 
 function sidebar() { // TODO: Save tutorial position to localStorage
   return dedent`
-    <li class="tour__sidebar__step" data-action="tour, step 1" data-step="1">
+    <li class="tour__sidebar__example" data-action="tour, example 1" data-example="1">
       <button type="button">Resolve a claim</button>
       <span>Get details of media (aka, "claim" metadata)</span>
     </li>
 
-    <li class="tour__sidebar__step" data-action="tour, step 2" data-step="2">
+    <li class="tour__sidebar__example" data-action="tour, example 2" data-example="2">
       <button type="button">Publish content</button>
       <span>Create a meme and upload it to the LBRY blockchain</span>
     </li>
 
-    <li class="tour__sidebar__step" data-action="tour, step 3" data-step="3">
+    <li class="tour__sidebar__example" data-action="tour, example 3" data-example="3">
       <button type="button">Support with LBC</button>
       <span>Support creators on LBRY with a tip, on us!</span>
     </li>
@@ -44,7 +44,7 @@ function sidebar() { // TODO: Save tutorial position to localStorage
 
 
 
-function step1() {
+function example1() {
   return html`
     <div class="tour__content__urlbar">
       <span>lbry://</span><input id="fetch-claim-uri" placeholder="&thinsp;Enter a LBRY address or select an example below" type="text"/>