0.4.0

Reviewed-on: #66

.drone.yml

@@ -29,9 +29,6 @@ steps:
       - yarn install
       - rake css:build
       - rake spec
-    when:
-      branch:
-        - master
   - name: rebuild-cache
     image: drillster/drone-volume-cache
     volumes:

app/assets/stylesheets/components/base.css

@@ -1,11 +1,12 @@
 @layer base {
   body {
-    @apply leading-none
+    @apply leading-none bg-cover bg-fixed;
+    background-image: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(13,79,153,0.8) 100%), url('/img/bg-1.jpg');
   }
 
-  /* h1, h2, h3 { */
+  body#admin {
-  /*   @apply font-light; */
+    background-image: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(153,12,14,0.9) 100%), url('/img/bg-1.jpg');
-  /* } */
+  }
 
   h1 {
     @apply text-3xl uppercase;
@@ -26,4 +27,16 @@
   main section:first-of-type {
     @apply pt-0;
   }
+
+  main p {
+    @apply mb-4 leading-6;
+  }
+
+  main ul {
+    @apply mb-6;
+  }
+
+  main ul li {
+    @apply leading-6;
+  }
 }

app/assets/stylesheets/legacy.sass.scss

@@ -1,2 +0,0 @@
-@import "legacy/layout";
-@import "legacy/main_nav";

app/assets/stylesheets/legacy/_layout.scss

@@ -1,58 +0,0 @@
-@import "variables";
-@import "mediaqueries";
-
-body {
-  background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(13,79,153,0.8) 100%),
-              url('/img/bg-1.jpg');
-  background-size: cover;
-  background-attachment: fixed;
-}
-
-body#admin {
-  background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(153,12,14,0.9) 100%),
-              url('/img/bg-1.jpg');
-  background-size: cover;
-  background-attachment: fixed;
-}
-
-.ks-site-icon {
-  svg {
-    display: inline-block;
-    height: 1.875rem;
-    vertical-align: top;
-    width: auto;
-  }
-}
-
-main {
-  p {
-    line-height: 1.5rem;
-    margin-bottom: 1rem;
-
-    &.notice {
-      text-align: center;
-    }
-  }
-
-  ul {
-    margin-bottom: 1.5rem;
-
-    li {
-      line-height: 1.5rem;
-    }
-  }
-}
-
-.grid {
-  display: grid;
-
-  &.services {
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-row-gap: 1rem;
-    grid-column-gap: 2rem;
-
-    @include media-max(small) {
-      grid-template-columns: 1fr;
-    }
-  }
-}

app/assets/stylesheets/legacy/_main_nav.scss

@@ -1,54 +0,0 @@
-@import "variables";
-@import "mediaqueries";
-
-#main-nav {
-  width: 100%;
-  text-align: center;
-  background-color: #efefef;
-
-  .wrapper {
-    width: $content-width;
-    max-width: $content-max-width;
-    margin: 0 auto;
-  }
-
-  ul {
-    @include media-max(large) {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-    }
-
-    li {
-      @include media-min(large) {
-        display: inline;
-      }
-
-      @include media-max(large) {
-        display: block;
-      }
-
-      a {
-        display: inline-block;
-        padding: 1.5rem 2rem;
-        text-decoration: none;
-        color: $text-color-discreet;
-
-        @include media-max(large) {
-          display: block;
-          text-align: center;
-          padding-left: 0;
-          padding-right: 0;
-        }
-
-        @include media-max(small) {
-          font-size: 0.85rem;
-        }
-
-        &.active {
-          color: $text-color-body;
-          border-bottom: 2px solid #4ea2df;
-        }
-      }
-    }
-  }
-}

app/assets/stylesheets/legacy/_mediaqueries.scss

@@ -1,33 +0,0 @@
-$breakpoints-max: (
-  small: 600px,
-  medium: 960px,
-  large: 1280px
-);
-
-$breakpoints-min: (
-  small: 601px,
-  medium: 961px,
-  large: 1281px
-);
-
-@mixin media-max($screen-size) {
-  @if map-has-key($breakpoints-max, $screen-size) {
-    @media (max-width: map-get($breakpoints-max, $screen-size)) {
-      @content;
-    }
-  } @else {
-    // Debugging
-    @warn "'#{$screen-size}' has not been declared as a breakpoint."
-  }
-}
-
-@mixin media-min($screen-size) {
-  @if map-has-key($breakpoints-min, $screen-size) {
-    @media (min-width: map-get($breakpoints-min, $screen-size)) {
-      @content;
-    }
-  } @else {
-    // Debugging
-    @warn "'#{$screen-size}' has not been declared as a breakpoint."
-  }
-}

app/assets/stylesheets/legacy/_variables.scss

@@ -1,13 +0,0 @@
-$content-width: 800px;
-$content-max-width: 100%;
-
-$text-color-body: #222;
-$text-color-discreet: #888;
-
-$background-color-notice: #efffc4;
-$background-color-alert: #fff4c2;
-
-$color-blue: #0d4f99;
-$color-purple: #8955a0;
-$color-red-bright: #c00;
-$color-red-dark: #990c0e;

app/controllers/wallet_controller.rb

@@ -23,7 +23,7 @@ class WalletController < ApplicationController
   end
 
   def transactions
-
+    @transactions = fetch_transactions
   end
 
   private
@@ -41,13 +41,41 @@ class WalletController < ApplicationController
     # TODO add exception tracking
   end
 
+  def set_current_section
+    @current_section = :wallet
+  end
+
   def fetch_balance
     lndhub = Lndhub.new
     data = lndhub.balance @ln_auth_token
     @balance = data["BTC"]["AvailableBalance"] rescue nil
   end
 
-  def set_current_section
+  def fetch_transactions
-    @current_section = :wallet
+    lndhub = Lndhub.new
+    txs = lndhub.gettxs @ln_auth_token
+    invoices = lndhub.getuserinvoices(@ln_auth_token).select{|i| i["ispaid"]}
+
+    process_transactions(txs + invoices)
+  end
+
+  def process_transactions(txs)
+    txs.collect do |tx|
+      if tx["type"] == "bitcoind_tx"
+        tx["amount_sats"] = (tx["amount"] * 100000000).to_i
+        tx["datetime"] = Time.at(tx["time"].to_i)
+        tx["title"] = "Received"
+        tx["description"] = "On-chain topup"
+        tx["received"] = true
+      else
+        tx["amount_sats"] = tx["value"] || tx["amt"]
+        tx["datetime"] = Time.at(tx["timestamp"].to_i)
+        tx["title"] = tx["type"] == "paid_invoice" ? "Sent" : "Received"
+        tx["description"] = tx["memo"] || tx["description"]
+        tx["received"] = tx["type"] == "user_invoice"
+      end
+    end
+
+    txs.sort{ |a,b| b["datetime"] <=> a["datetime"] }
   end
 end

app/services/lndhub.rb

@@ -46,6 +46,14 @@ class Lndhub
     get "balance", user_token || auth_token
   end
 
+  def gettxs(user_token)
+    get "gettxs", user_token || auth_token
+  end
+
+  def getuserinvoices(user_token)
+    get "getuserinvoices", user_token || auth_token
+  end
+
   def addinvoice(payload)
     invoice = post "addinvoice", {
       amt: payload[:amount],

app/views/dashboard/index.html.erb

@@ -6,7 +6,7 @@
       Your Kosmos account and password currently give you access to these
       services:
     </p>
-    <div class="grid services mt-12">
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 services mt-12">
       <div>
         <h3 class="mb-3.5">
           <%= link_to "Chat", "https://wiki.kosmos.org/Services:Chat", class: "ks-text-link" %>

app/views/icons/_link-2.html.erb

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link-2"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link-2 <%= custom_class %>"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>

app/views/icons/_link.html.erb

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link <%= custom_class %>"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>

app/views/icons/_zap.html.erb

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap <%= custom_class %>"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>

app/views/layouts/application.html.erb

@@ -6,7 +6,6 @@
     <%= csp_meta_tag %>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://assets.kosmos.org/fonts/open-sans/open-sans.css" rel="stylesheet">
-    <%= stylesheet_link_tag 'legacy', "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag 'application', "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
   </head>
@@ -18,7 +17,7 @@
             <div class="flex items-center justify-between h-16 px-4 sm:px-0">
               <div class="flex items-center">
                 <div class="ks-site-icon flex-shrink-0">
-                  <%= render partial: "shared/icons/comet" %>
+                  <%= render partial: "shared/icons/comet", locals: { custom_class: "inline-block align-top w-auto h-7" } %>
                 </div>
                 <% if user_signed_in? && current_user.confirmed? %>
                   <div class="hidden md:block">

app/views/shared/icons/_comet.html.erb

@@ -1 +1 @@
-<svg id="icon-comet" width="65.364" height="55.773" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 65.364 55.773" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g id="layer1" transform="translate(28.868 20.259)" fill="#fff"><path id="path2" d="m22.81-9.2546-0.0137-0.0072c-0.0445-0.0196-0.0895-0.04052-0.13335-0.06078l-23.822-10.937s2.0034 9.219 2.914 11.778c0 0-27.292-8.1582-30.623-8.9354 1.0916 4.2618 20.006 40.848 20.006 40.848 3.8225 7.7608 12.677 12.083 21.912 12.083 12.949 0 23.446-10.497 23.446-23.446 6.6e-4 -9.4655-5.609-17.62-13.685-21.323z" fill="#fff" stroke-width=".65365"/></g></svg>
+<svg id="icon-comet" class="<%= custom_class %>" width="65.364" height="55.773" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 65.364 55.773" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g id="layer1" transform="translate(28.868 20.259)" fill="#fff"><path id="path2" d="m22.81-9.2546-0.0137-0.0072c-0.0445-0.0196-0.0895-0.04052-0.13335-0.06078l-23.822-10.937s2.0034 9.219 2.914 11.778c0 0-27.292-8.1582-30.623-8.9354 1.0916 4.2618 20.006 40.848 20.006 40.848 3.8225 7.7608 12.677 12.083 21.912 12.083 12.949 0 23.446-10.497 23.446-23.446 6.6e-4 -9.4655-5.609-17.62-13.685-21.323z" fill="#fff" stroke-width=".65365"/></g></svg>

app/views/wallet/index.html.erb

@@ -3,6 +3,15 @@
 <%= render MainSimpleComponent.new do %>
   <%= render WalletSummaryComponent.new(balance: @balance) %>
 
+  <section>
+    <div class="border-b border-gray-200">
+      <nav class="-mb-px flex" aria-label="Tabs">
+        <%= link_to "Info", wallet_path, class: "border-indigo-500 text-indigo-600 w-1/2 py-4 px-1 text-center border-b-2", "aria-current": "page" %>
+        <%= link_to "Transactions", wallet_transactions_path, class: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 w-1/2 py-4 px-1 text-center border-b-2" %>
+      </nav>
+    </div>
+  </section>
+
   <section>
     <h3>Lightning Address</h3>
     <p>

app/views/wallet/transactions.html.erb

@@ -4,8 +4,54 @@
   <%= render WalletSummaryComponent.new(balance: @balance) %>
 
   <section>
-    <h3>Transactions</h3>
+    <div class="border-b border-gray-200">
+      <nav class="-mb-px flex" aria-label="Tabs">
+        <%= link_to "Info", wallet_path, class: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 w-1/2 py-4 px-1 text-center border-b-2" %>
+        <%= link_to "Transactions", wallet_transactions_path, class: "border-indigo-500 text-indigo-600 w-1/2 py-4 px-1 text-center border-b-2", "aria-current": "page" %>
+      </nav>
+    </div>
+  </section>
 
-    <p>Foo</p>
+  <section>
+    <h3 class="hidden">Transactions</h3>
+
+    <% if @transactions.any? %>
+      <ul class="list-none">
+        <% @transactions.each do |tx| %>
+          <li class="py-4 md:py-4 grid gap-y-1 gap-x-2 grid-cols-4 border-b border-dotted border-gray-300">
+            <h3 class="col-span-2 md:col-span-3 mb-0">
+              <% if tx["type"] == "bitcoind_tx" %>
+                <span class="inline-block">
+                  <%= render partial: "icons/link-2", locals: { custom_class: "text-emerald-500 h-4 w-4 mr-0.5" } %>
+                </span>
+              <% else %>
+                <span class="inline-block">
+                  <%= render partial: "icons/zap", locals: { custom_class: "text-amber-500 h-4 w-4 mr-0.5" } %>
+                </span>
+              <% end %>
+              <%= tx["title"] %>
+            </h3>
+            <p class="col-span-2 md:col-span-1 mb-0 text-right">
+              <span class="text-xl font-mono <%= tx["received"] ? "text-emerald-600" : "" %>">
+                <%= tx["received"] ? "+" : "" %><%= number_with_delimiter tx["amount_sats"]  %>
+                <span class="hidden md:inline">sats</span>
+              </span>
+            </p>
+            <p class="col-span-4 md:col-span-3 mb-0 text-gray-500">
+              <%= tx["description"].present? ? tx["description"] : raw("<span class='text-gray-400'>No memo</span>") %>
+            </p>
+            <p class="col-span-4 md:col-span-1 md:text-right mb-0">
+              <span class="col-span-2 md:col-span-1 text-sm text-gray-500">
+                <%= tx["datetime"].strftime("%B %e, %H:%M") %>
+              </span>
+            </p>
+          </li>
+        <% end %>
+      </ul>
+    <% else %>
+      <p class="text-gray-500">
+        No transactions yet. As soon as you start receiving sats, you will find some entries here.
+      </p>
+    <% end %>
   </section>
 <% end %>

package.json

@@ -9,13 +9,11 @@
     "postcss-import": "^14.0.2",
     "postcss-nested": "^5.0.6",
     "postcss-preset-env": "^7.3.1",
-    "sass": "^1.49.7",
     "tailwindcss": "^3.0.22"
   },
-  "version": "0.3.0",
+  "version": "0.4.0",
   "scripts": {
-    "build:css:sass": "sass ./app/assets/stylesheets/legacy.sass.scss ./app/assets/builds/legacy.css --no-source-map --load-path=node_modules",
     "build:css:tailwind": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css",
-    "build:css": "yarn run build:css:sass && yarn run build:css:tailwind"
+    "build:css": "yarn run build:css:tailwind"
   }
 }

yarn.lock

@@ -202,7 +202,7 @@ chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
+chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -398,11 +398,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-immutable@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
-  integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
-
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
@@ -890,16 +885,7 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-sass@^1.49.7:
+source-map-js@^1.0.2:
-  version "1.49.7"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.7.tgz#22a86a50552b9b11f71404dfad1b9ff44c6b0c49"
-  integrity sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==
-  dependencies:
-    chokidar ">=3.0.0 <4.0.0"
-    immutable "^4.0.0"
-    source-map-js ">=0.6.2 <2.0.0"
-
-"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==