Handle Tour errors

public/scripts/sockets.js

@@ -14,6 +14,15 @@ ws.onmessage = socket => {
       $(data.selector).html(data.html);
       break;
 
+    case data.message === "notification": // TODO: Make work with appending so multiple notifications can be sent
+      $("#flash-container").html(`<div class="flash active${data.type ? " " + data.type : ""}">${data.details}</div>`);
+
+      setTimeout(() => {
+        $("#flash-container").html("");
+      }, 2100);
+
+      break;
+
     default:
       log(data);
       break;

sass/partials/_animation.scss

@@ -2,3 +2,10 @@
   0% { transform: rotate(0deg); }
   to { transform: rotate(1turn); }
 }
+
+@keyframes slide-down {
+  0%    { transform: translateY(-4rem); }
+  10%   { transform: translateY(2rem); }
+  90%   { transform: translateY(2rem); }
+  100%  { transform: translateY(-4rem); }
+}

sass/partials/_flash.scss

@@ -0,0 +1,46 @@
+.flashes {
+  top: 4rem; right: 0;
+
+  position: absolute;
+  width: 100%;
+  z-index: 9;
+}
+
+.flash {
+  border: 2px solid;
+  border-radius: 3px;
+  font-size: 1rem;
+  line-height: 1.33;
+  padding: 0.5rem 1rem;
+  position: absolute;
+  right: 2rem;
+
+  &:not(.error):not(.info):not(.warning) {
+    background-color: mix($white, $teal, 90%);
+    border-color: $teal;
+  }
+
+  &:not(.active) {
+    transform: translateY(-4rem);
+  }
+
+  &.active {
+    animation: slide-down 2s linear;
+    transform: translateY(-4rem);
+  }
+
+  &.error {
+    background-color: mix($white, $red, 90%);
+    border-color: $red;
+  }
+
+  &.info {
+    background-color: mix($white, $gray, 90%);
+    border-color: $gray;
+  }
+
+  &.warning {
+    background-color: mix($white, $yellow, 90%);
+    border-color: $yellow;
+  }
+}

sass/style.scss

@@ -12,11 +12,12 @@
   "partials/ecosystem",
   "partials/email-subscribe",
   "partials/feature-links",
+  "partials/flash",
+  "partials/footer",
   "partials/github-feed",
   "partials/navigation",
   "partials/mission-statement",
   "partials/modal",
-  "partials/footer",
 
   "layout",
 

server.js

@@ -76,7 +76,10 @@ fastify.ready(err => {
   if (err) throw err;
 
   fastify.ws.on("connection", socket => {
-    socket.send(JSON.stringify({ "message": "welcome" }));
+    socket.send(JSON.stringify({
+      "message": "notification",
+      "details": "Welcome"
+    }));
 
     socket.on("message", data => {
       data = JSON.parse(data);
@@ -94,7 +97,7 @@ fastify.ready(err => {
           break;
 
         case "fetch metadata":
-          fetchMetadata(data.claim, data.method);
+          fetchMetadata(data.claim, data.method, socket);
           break;
 
         default:
@@ -171,8 +174,15 @@ function generateGitHubFeed(displayGitHubFeed) {
 
 
 
-function fetchMetadata(claimAddress, resolveMethod) {
+function fetchMetadata(claimAddress, resolveMethod, socket) {
-  if (!claimAddress || !resolveMethod)  return;
+  if (!claimAddress || !resolveMethod) return;
+
+  const allowedClaims = [
+    "5b7c7a202201033d99e1be2930d290c127c0f4fe",
+    "a1372cf5523885f5923237bfe522f02f5f054362",
+    "de7f7fa33e8d879b2bae7238d2bdf827a39f9301",
+    "fbdcd44a97810522d23d5f1335b8ca04be9d776c"
+  ];
 
   const allowedMethods = [
     "publish",
@@ -180,7 +190,17 @@ function fetchMetadata(claimAddress, resolveMethod) {
     "wallet_send"
   ];
 
-  if (!allowedMethods.includes(resolveMethod)) return;
+  if (!allowedMethods.includes(resolveMethod)) return socket.send(JSON.stringify({
+    "message": "notification",
+    "type": "error",
+    "details": "Unallowed resolve method for tutorial"
+  }));
+
+  if (!allowedClaims.includes(claimAddress)) return socket.send(JSON.stringify({
+    "message": "notification",
+    "type": "error",
+    "details": "Invalid claim ID for tutorial"
+  }));
 
   /*
   component.$http.post("https://lbry.tech/forward", {
@@ -197,7 +217,7 @@ function fetchMetadata(claimAddress, resolveMethod) {
   */
 
   got.post("https://lbry.tech/forward", {
-
+    //
   });
 
   return html`

views/components/layout.js

@@ -23,6 +23,7 @@ module.exports = exports = children => (state, emit) => html`
     </noscript>
 
     ${navigation(state, emit)}
+    <aside class="flashes" id="flash-container"></aside>
     ${children(state, emit)}
     ${footer(state, emit)}
   </main>