Only whitelisted content can be tipped via the URL bar now, and other fixes

README.md

@@ -22,6 +22,10 @@
 - [lbry/web-daemon](https://github.com/lbryio/web-daemon)
 - [Node](https://nodejs.org) (version >= 10)
 
+## Notes
+- **This repo will not run locally if you do not also have the LBRY app/daemon and the [web-daemon](https://github.com/lbryio/web-daemon) running.**
+- When running locally and completing the tipping example in Playground, the LBC donated to a creator comes from _your_ LBC balance. Otherwise, the example will fail. On production, the donated LBC comes from LBRY.
+
 ## Installation
 `npm i`
 

app/components/client/tour-scripts.js

@@ -36,10 +36,21 @@ document.querySelector("body").addEventListener("click", event => {
 document.getElementById("fetch-claim-uri").addEventListener("keyup", event => {
   const key = event.keyCode ? event.keyCode : event.which;
 
+  switch(true) {
+    case (document.querySelector("[data-example='1']").classList.contains("active")):
       if (
         key === 13 &&
         document.getElementById("fetch-claim-uri").value.length > 0
       ) fetchMetadata(1, document.getElementById("fetch-claim-uri").value);
+      break;
+
+    case (document.querySelector("[data-example='3']").classList.contains("active")):
+      if (
+        key === 13 &&
+        document.getElementById("fetch-claim-uri").value.length > 0
+      ) fetchMetadata(3, document.getElementById("fetch-claim-uri").value);
+      break;
+  }
 });
 
 document.querySelector("body").addEventListener("keyup", event => {

app/components/playground.js

@@ -73,7 +73,7 @@ function navigation() { // TODO: Save tutorial position to localStorage
       data-action="tour, example 3"
       data-description="In the LBRY app, you can financially support your favorite creators by donating LBRY Coin (LBC). In this example, we are donating LBC in your stead."
       data-example="3"
-      data-success="<strong>Kudos</strong> You've just supported a creator with LBC (or, LBRY credits) with our own stash of LBC (you'd use your own IRL). You're basically saying, \"thanks for this great content, please continue!\" and that's awesome. You're awesome."
+      data-success="<strong>Kudos</strong> You've just supported a creator with LBC (or, LBRY credits) with our own stash of LBC (you'd use your own IRL). You're basically saying, 'thanks for this great content, please continue!' and that's awesome. You're awesome."
     >
       <button type="button">Support</button>
       <span>Support creators on LBRY with a tip, on us!</span>

app/helpers/fetch-metadata.js

@@ -92,8 +92,6 @@ module.exports = exports = (data, socket) => {
       body.file_path = uploadResponse.filename;
 
       return publishMeme(body).then(publishResponse => {
-        // let explorerNotice = "";
-
         if (publishResponse.error) {
           socket.send(JSON.stringify({
             "details": "Meme publish failed",
@@ -112,22 +110,12 @@ module.exports = exports = (data, socket) => {
           return;
         }
 
-        /*
-        if (
-          publishResponse.result &&
-          publishResponse.result.txid
-        ) explorerNotice = `
-          <p>If you want proof of the tip you just gave, <a href="https://explorer.lbry.io/tx/${publishResponse.result.txid}" target="_blank" title="Your tip, on our blockchain explorer" rel="noopener noreferrer">check it out</a> on our blockchain explorer!</p>
-        `;
-        */
-
         const renderedCode = prism.highlight(stringifyObject(publishResponse, { indent: "  ", singleQuotes: false }), prism.languages.json, "json");
 
         return socket.send(JSON.stringify({
           "example": data.example,
           "html": raw(`
             <h3>Response</h3>
-            <!--/ explorerNotice /-->
             <pre><code class="language-json">${renderedCode}</code></pre>
           `),
           "message": "updated html",
@@ -143,6 +131,30 @@ module.exports = exports = (data, socket) => {
   }
 
   if (resolveMethod === "wallet_send") {
+    const approvedIds = [
+      "3db81c073f82fd1bb670c65f526faea3b8546720",
+      "173412f5b1b7aa63a752e8832406aafd9f1ecb4e",
+      "d81bac6d49b1f92e58c37a5f633a27a45b43405e",
+      "b4668c0bd096317b44c40738c099b6618095e75f",
+      "007789cc45cbb4255cf02ba77cbf84ca8e3d7561",
+      "1ac47b8b3def40a25850dc726a09ce23d09e7009",
+      "784b3c215a6f06b663fc1aa292bcb19f29c489bb",
+      "758dd6497cdfc401ae1f25984738d024d47b50af",
+      "8a7401b88d5ed0376d98f16808194d4dcb05b284"
+    ];
+
+    if (!approvedIds.includes(claimAddress)) {
+      return socket.send(JSON.stringify({
+        "example": data.example,
+        "html": raw(`
+          <h3>Response</h3>
+          <pre><code class="language-text">Tipping creators not in the whitelist for this example is not allowed.</code></pre>
+        `),
+        "message": "updated html",
+        "selector": `#example${data.example}-result`
+      }));
+    }
+
     apiRequestMethod = "POST";
 
     body.amount = "0.01"; // Hardcoded tip amount
@@ -150,8 +162,6 @@ module.exports = exports = (data, socket) => {
   }
 
   return new Promise((resolve, reject) => { // eslint-disable-line
-    // let explorerNotice = "";
-
     request({
       body: body,
       json: true,
@@ -198,7 +208,6 @@ module.exports = exports = (data, socket) => {
           "example": data.example,
           "html": raw(`
             <h3>Response</h3>
-            <!--/ explorerNotice /-->
             <pre><code class="language-json">${renderedCode}</code></pre>
           `),
           "message": "updated html",

app/sass/pages/_tour.scss

@@ -166,6 +166,11 @@
     }
   }
 
+  h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+  }
+
   pre {
     font-size: 1rem;
   }

app/sockets.js

@@ -105,9 +105,9 @@ function generateContent(exampleNumber, displayTrendingContent) {
           try {
             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}"/>
+                <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="${exampleNumber === 1 ? part.name : part.claim_id}">
+                <figcaption data-action="choose claim" data-claim-id="${part.name}">
                   ${part.value.stream.metadata.title}
                   <span>${part.channel_name}</span>
                 </figcaption>
@@ -120,7 +120,7 @@ function generateContent(exampleNumber, displayTrendingContent) {
 
         renderedContentCollection.push(`
           <script>
-            document.getElementById("tour-example-description").textContent = document.querySelector("[data-action='tour, example 1']").dataset.description
+            document.getElementById("tour-example-description").innerHTML = document.querySelector("[data-action='tour, example 1']").dataset.description
           </script>
         `);
 
@@ -133,7 +133,7 @@ function generateContent(exampleNumber, displayTrendingContent) {
     const approvedUrls = [
       "LBRY#3db81c073f82fd1bb670c65f526faea3b8546720",
       "correlation-can-imply-causation#173412f5b1b7aa63a752e8832406aafd9f1ecb4e",
-      "thanos-is-the-protagonist-how-infinity#2a7f5db2678177435b1dee6c9e38e035ead450b6nyte",
+      "thanos-is-the-protagonist-how-infinity#2a7f5db2678177435b1dee6c9e38e035ead450b6",
       "epic-arcade-mode-duos-nickatnyte-molt#d81bac6d49b1f92e58c37a5f633a27a45b43405e",
       "political-correctness-a-force-for-good-a#b4668c0bd096317b44c40738c099b6618095e75f",
       "10-secrets-hidden-inside-famous-logos#007789cc45cbb4255cf02ba77cbf84ca8e3d7561",
@@ -150,27 +150,29 @@ function generateContent(exampleNumber, displayTrendingContent) {
       rawContentCollection.push(fetchMetadata({ claim: url, method: "resolve", example: exampleNumber }));
     }
 
-    Promise.all(rawContentCollection).then(collection => {
+    return Promise.all(rawContentCollection).then(collection => {
       for (const part of collection) {
-        try {
+        if (
+          part &&
+          part.value &&
+          part.value.stream.metadata.thumbnail &&
+          part.channel_name
+        ) {
           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}"/>
+              <img alt="${part.name}" data-action="choose claim" data-claim-id="${part.claim_id}" src="${part.value.stream.metadata.thumbnail}"/>
-
+              <figcaption data-action="choose claim" data-claim-id="${part.claim_id}">
-              <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>
           `);
-        } catch (err) {
-          return; // TODO: Return nice error message
         }
       }
 
       renderedContentCollection.push(`
         <script>
-          document.getElementById("tour-example-description").textContent = document.querySelector("[data-action='tour, example 3']").dataset.description
+          document.getElementById("tour-example-description").innerHTML = document.querySelector("[data-action='tour, example 3']").dataset.description
         </script>
       `);
 
@@ -296,7 +298,7 @@ function generateMemeCreator(socket) {
       detectLanguageAndUpdate();
       initCanvas();
 
-      document.getElementById("tour-example-description").textContent = document.querySelector("[data-action='tour, example 2']").dataset.description;
+      document.getElementById("tour-example-description").innerHTML = document.querySelector("[data-action='tour, example 2']").dataset.description;
 
       setTimeout(() => {
         document.querySelector(".tour__content__meme__canvas__thumbnail").click();