Merge pull request #262 from lbryio/developer-program

Developer Program

app/components/client/devprogram-scripts.js

@@ -1,4 +1,4 @@
-"use strict"; /* global document, history, send, window */
+"use strict"; /* global document, fetch, history, send, window */
 
 
 
@@ -12,7 +12,7 @@ document.getElementById("get-started").onclick = event => {
 
 if (window.location.search.includes("?code=")) {
   document.querySelector("developer-program").innerHTML = `
-    <form>
+    <form onsubmit="return false;">
       <input-submit>
         <input id="walletAddress" placeholder="Your LBRY wallet address" type="text"/>
         <input id="oauthCode" type="hidden" value="${window.location.search.split("?code=").pop()}"/>
@@ -34,13 +34,56 @@ if (window.location.search.includes("?code=")) {
 }
 
 if (document.getElementById("creditsAcquire")) {
+  document.getElementById("walletAddress").addEventListener("keyup", event => {
+    const key = event.keyCode ? event.keyCode : event.which;
+
+    if (key === 13)
+      document.getElementById("creditsAcquire").click();
+  });
+
   document.getElementById("creditsAcquire").onclick = () => {
     send({
       address: document.getElementById("walletAddress").value,
       code: document.getElementById("oauthCode").value,
-      message: "verify github auth"
+      message: "verify github token"
     });
 
     document.querySelector("developer-program").innerHTML = "<p><em>Awaiting response from LBRY server...</em></p>";
   };
 }
+
+function syncWithApi(data) { // eslint-disable-line no-unused-vars
+  const address = data.address;
+  const code = data.code;
+
+  if (code === null)
+    document.querySelector("developer-program").innerHTML =
+      "<p><strong>There was an issue with accessing GitHub's API. Please try again later.</strong></p>";
+
+  fetch(`https://api.lbry.io/reward/new?github_token=${code}&reward_type=github_developer&wallet_address=${address}`)
+    .then(response => response.json())
+    .then(result => {
+      switch(true) {
+        case !result.success:
+        case result.error === "this reward is limited to 1 per person":
+          document.querySelector("developer-program").innerHTML =
+            "<p>You have already claimed this reward. This reward is limited to <strong>ONE</strong> per person. Your enthusiasm is appreciated.</p>";
+          break;
+
+        case result.success:
+          result = result.data;
+          document.querySelector("developer-program").innerHTML =
+            `<p><strong>Success!</strong> Your wallet has been credited with ${result.reward_amount} LBC.</p><p>We have a great reference for the <a href="/api/sdk">LBRY SDK here</a> to help you get started.</p><p>You can see proof of this transaction on <a href="https://explorer.lbry.io/tx/${result.transaction_id}">our Blockain Explorer</a>.</p>`;
+          break;
+
+        default:
+          console.log(data); // eslint-disable-line no-console
+          break;
+      }
+    })
+    .catch(() => {
+      // Idk what the error would be (probably a 500) so let's just have this message
+      document.querySelector("developer-program").innerHTML =
+        "<p><strong>LBRY API is down. Please try again later.</strong></p>";
+    });
+}

app/components/playground.js

@@ -42,7 +42,7 @@ function example1() {
   `;
 }
 
-function navigation() { // TODO: Save tutorial position to localStorage
+function navigation() {
   return dedent`
     <li
       class="playground-navigation__example"

app/dist/scripts/sockets.js

@@ -22,9 +22,14 @@ function initializeWebSocketConnection() {
   // ws.onopen = () => console.log("WebSocket connection established"); // eslint-disable-line no-console
 
   ws.onmessage = socket => {
-    const data = JSON.parse(socket.data);
+    let data = JSON.parse(socket.data);
 
     switch(true) {
+      case data.message === "github token status":
+        data = data.data;
+        syncWithApi(data); // eslint-disable-line no-undef
+        break;
+
       case data.message === "notification": // TODO: Make work with appending so multiple notifications can be sent
         document.getElementById("flash-container").innerHTML =
           `<div class="flash active${data.type ? " " + data.type : ""}">${data.details}</div>`;

app/sockets.js

@@ -13,9 +13,13 @@ import fetchMetadata from "@helper/fetch-metadata";
 import { generateGitHubFeed } from "@helper/github";
 import messageSlack from "@helper/slack";
 
-let apiUrl = process.env.REWARD_URL;
-let githubAppId = process.env.GITHUB_APP_ID;
-let githubAppSecret = process.env.GITHUB_APP_SECRET;
+const githubAppId = process.env.GITHUB_APP_ID;
+const githubAppSecret = process.env.GITHUB_APP_SECRET;
+
+// const githubAppId = process.env.GITHUB_APP_ID_TEST;
+// const githubAppSecret = process.env.GITHUB_APP_SECRET_TEST;
+
+
 
 //  P R O G R A M
 
@@ -28,8 +32,8 @@ export default (socket, action) => {
       getGitHubUserToken(socket);
       break;
 
-    case action.message === "verify github auth":
-      syncWithApi(action, socket);
+    case action.message === "verify github token":
+      verifyGitHubToken(action, socket);
       break;
 
     case action.message === "fetch metadata":
@@ -418,79 +422,33 @@ export function send(transport, data) {
   return transport.send(JSON.stringify(data));
 }
 
-async function syncWithApi(data, socket) {
-  const tokenResponse = await verifyGitHubToken(data.code);
-
-  if (tokenResponse === null) {
-    return send(socket, {
-      html: "<p><strong>There was an issue with accessing GitHub's API. Please try again later.</strong></p>",
-      message: "updated html",
-      selector: "developer-program"
-    });
-  }
-
-  try {
-    let result = await got(`https://${apiUrl}/reward/new?github_token=${tokenResponse}&reward_type=github_developer&wallet_address=${data.address}`, { json: true });
-
-    // TEMPORARY
-    messageSlack({
-      message: tokenResponse,
-      title: "DEVELOPER PROGRAM TOKEN RESPONSE"
-    });
-
-    messageSlack({
-      message: data.address,
-      title: "DEVELOPER PROGRAM ADDRESS"
-    });
-    // TEMPORARY
-
-    result = result.body.data;
-
-    return send(socket, {
-      html: `<p><strong>Success!</strong> Your wallet has been credited with ${result.reward_amount} LBC.</p><p>We have a great reference for the <a href="/api/sdk">LBRY SDK here</a> to help you get started.</p><p>You can see proof of this transaction on <a href="https://explorer.lbry.io/tx/${result.transaction_id}">our Blockain Explorer</a>.</p>`,
-      message: "updated html",
-      selector: "developer-program"
-    });
-  } catch(error) {
-    if (!error.body) {
-      return send(socket, {
-        html: "<p><strong>LBRY API is down. Please try again later.</strong></p>",
-        message: "updated html",
-        selector: "developer-program"
-      });
-    }
-
-    console.log(error); // eslint-disable-line no-console
-    const err = error.body;
-
-    // TEMPORARY
-    messageSlack({
-      message: JSON.stringify(err),
-      title: "DEVELOPER PROGRAM ERROR"
-    });
-    // TEMPORARY
-
-    return send(socket, {
-      html: "<p>You have already claimed this reward. This reward is limited to <strong>ONE</strong> per person. Your enthusiasm is appreciated.</p>",
-      message: "updated html",
-      selector: "developer-program"
-    });
-  }
-}
-
 function validateEmail(email) {
   const emailRegex = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\\.,;:\s@"]{2,})$/i;
   return emailRegex.test(String(email)); // eslint-disable-line padding-line-between-statements
 }
 
-async function verifyGitHubToken(code) {
+async function verifyGitHubToken(data, socket) {
+  const code = data.code;
+
   try {
     let result = await got.post(`https://github.com/login/oauth/access_token?client_id=${githubAppId}&client_secret=${githubAppSecret}&code=${code}`, { json: true });
 
-    result = result.body;
-    return result.access_token;
+    const response = {
+      address: data.address,
+      code: result.body.access_token
+    };
+
+    return send(socket, {
+      data: response,
+      message: "github token status"
+    });
   } catch(verificationError) {
     console.log(verificationError.body); // eslint-disable-line no-console
-    return null;
+
+    return send(socket, {
+      details: verificationError.body,
+      message: "notification",
+      type: "error"
+    });
   }
 }

documents/developer-program.md

@@ -9,4 +9,5 @@ To qualify you must:
 - have a GitHub account that is at least 90 days old and
 - have an active commit history
 
-This program will be active soon. Stay tuned!
+### Claim LBC
+<DeveloperProgram/>