First version watch banano extension!

andrecrjr · Jun 19, 2020 · 835e556 · 835e556
commit 835e556
Show file tree

Hide file tree

Showing 7 changed files with 227 additions and 0 deletions.
diff --git a/banano.css b/banano.css
@@ -0,0 +1,81 @@
+body {
+  width: 320px;
+  max-width: 660px;
+  height: 330px;
+  background: url(https://banano.cc/assets/bg-faucet.svg);
+  font-family: "Tahoma", sans-serif;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-repeat: repeat;
+  background-size: cover;
+  color: white;
+}
+
+.img--main {
+  width: 150px;
+  align-self: center;
+}
+
+.banano__title-error {
+  display: none;
+}
+.banano__title-error.open {
+  display: block;
+  text-align: center;
+  width: 200px;
+  padding-bottom: 10px;
+  color: yellow;
+  font-weight: bold;
+  margin: 0 auto;
+}
+
+/* banano user */
+.banano__title {
+  font-size: 1rem;
+  text-size: center;
+}
+.banano__user {
+  transition: all 400ms;
+}
+.banano__user.close {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.banano__user.close.none {
+  display: none;
+}
+
+p {
+  margin: 5px 0;
+}
+h1 {
+  margin: 10px 0;
+}
+
+/* buttons*/
+
+.remove.close {
+  display: none;
+  height: 0;
+}
+
+.remove {
+  display: block;
+}
+
+input {
+  border-radius: 16px;
+  background: lightgoldenrodyellow;
+  border: 0;
+  height: 25px;
+  padding: 3px;
+}
+
+button {
+  height: 20px;
+  border-radius: 5px;
+  border: 0;
+}
diff --git a/banano.html b/banano.html
@@ -0,0 +1,27 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Banano Miner Viewer</title>
+  </head>
+  <link rel="stylesheet" href="banano.css" />
+  <body>
+    <main>
+      <section class="banano__input-section">
+        <h2 class="banano__title">Banano Miner Payments</h2>
+        <span class="banano__title-error"
+          >Whoops not find your id, please try again!</span
+        >
+        <input
+          type="text"
+          class="banano__input"
+          placeholder="Your banano mine id:"
+        />
+        <button class="getBanano">Find me!</button>
+      </section>
+      <section class="banano__user close"></section>
+      <button class="remove close">Remove account</button>
+    </main>
+    <script src="./banano.js"></script>
+  </body>
+</html>
diff --git a/banano.js b/banano.js
@@ -0,0 +1,105 @@
+let bananoSection = document.querySelector(".banano__user");
+let body = document.querySelector("body");
+let button = document.querySelector(".getBanano");
+let remove = document.querySelector(".remove");
+const user_input = document.querySelector(".banano__input");
+let error = document.querySelector(".banano__title-error");
+
+body.onload = () => {
+  if (localStorage.getItem("template") && localStorage.getItem("user_id")) {
+    user_input.value = localStorage.getItem("user_id");
+    updateData();
+  }
+};
+//get banano async
+async function getBanano() {
+  let user = user_input.value;
+
+  try {
+    //found API in the discord, thanks https://discord.com/channels/415935345075421194/566268199210057728/721405574863912991
+    const response = await fetch(`https://bananominer.com/user_name/${user}`, {
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+    });
+    const data = await response.json();
+    if (data) {
+      error.classList.remove("open");
+      localStorage.setItem("user_id", user);
+      renderUser(data);
+    }
+  } catch (e) {
+    error.classList.add("open");
+    console.log("errei");
+  }
+}
+//remove screen
+remove.addEventListener("click", function () {
+  removeData();
+});
+//button render screen
+button.addEventListener("click", async function (e) {
+  e.preventDefault();
+  await getBanano();
+});
+
+//render user screen
+const renderUser = (data) => {
+  let template = ``;
+
+  template += `<h3>Last update: ${
+    new Date().getMonth() + 1
+  }/${new Date().getDate()} - ${new Date().getHours()}:${
+    10 > new Date().getMinutes()
+      ? `0${new Date().getMinutes()}`
+      : new Date().getMinutes()
+  }</h3>`;
+  template += `<p>User: ${data.user.id}</p>`;
+  template += `<p>BAN Address: ${data.user.name.substring(0, 15)}...</p>`;
+  template += `<p>Account created at: ${
+    new Date(data.user.created_at).getMonth() + 1
+  }/${new Date(data.user.created_at).getDate()}/${new Date(
+    data.user.created_at
+  ).getFullYear()}</p>`;
+
+  if (data.payments) {
+    let totalAmount = 0;
+    let totalWorkUnits = 0;
+    //script that i saw in the discord: https://discord.com/channels/415935345075421194/566268199210057728/723358892297551973 :)
+    data.payments.forEach((el) => {
+      totalAmount += el.amount;
+      totalWorkUnits += el.work_units;
+    });
+    template += `<h3><b>Total Amount</b>: ${totalAmount}</h3>`;
+    template += `<h3><b>Total Work units worked</b>: ${totalWorkUnits}</h3>`;
+  } else {
+    template += `None payments done yet! Wait about 12 hours!`;
+  }
+  localStorage.setItem("template", template);
+  if (template) {
+    updateData();
+    return true;
+  }
+};
+
+const updateData = (legenda = "Update!") => {
+  button.innerText = legenda;
+  bananoSection.classList.remove("close");
+  bananoSection.classList.remove("none");
+  remove.classList.remove("close");
+  bananoSection.innerHTML = localStorage.getItem("template");
+};
+
+const removeData = () => {
+  button.innerText = "Find me!";
+  bananoSection.classList.add("close");
+  localStorage.clear();
+  setTimeout(() => {
+    bananoSection.classList.add("none");
+  }, 550);
+  while (bananoSection.children > 0) {
+    bananoSection.removeChild();
+  }
+  remove.classList.add("close");
+};
diff --git a/icon.png b/icon.png
diff --git a/icon128.png b/icon128.png
diff --git a/icon48.png b/icon48.png
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,14 @@
+{
+  "name": "Banano Miner Viewer!",
+  "version": "1.0",
+  "description": "Better way to watch your payments with Banano mining! :)",
+  "icons": {
+    "48": "icon48.png",
+    "128": "icon128.png"
+  },
+  "browser_action": {
+    "default_popup": "banano.html",
+    "default_icon": "icon.png"
+  },
+  "manifest_version": 2
+}