Merge pull request 'Various front-end improvements and bugfixes' (#78) from feature/frontend_improvements into master

Reviewed-on: #78
Reviewed-by: galfert <garret.alfert@gmail.com>
Reviewed-by: bumi <bumi@noreply.kosmos.org>

app/assets/stylesheets/components/buttons.css

@@ -6,12 +6,16 @@
 
   .btn-md {
     @apply btn;
-    @apply py-2.5 px-5 shadow-md;
+    @apply py-3 px-6;
   }
 
   .btn-sm {
     @apply btn;
-    @apply py-1 px-2 text-sm shadow-sm;
+    @apply py-1 px-2 text-sm;
+  }
+
+  .btn-icon {
+    @apply px-3;
   }
 
   .btn-gray {
@@ -28,4 +32,8 @@
     @apply bg-red-600 hover:bg-red-700 text-white
            focus:ring-red-500 focus:ring-opacity-75;
   }
+
+  input[type=text]:disabled {
+    @apply text-gray-700;
+  }
 }

app/components/main_simple_component.html.erb

@@ -1,5 +1,5 @@
 <main class="w-full max-w-6xl mx-auto pb-12 px-4 md:px-6 lg:px-8">
-  <div class="bg-white rounded-lg shadow px-6 sm:px-12 py-8 sm:py-12">
+  <div class="md:min-h-[50vh] bg-white rounded-lg shadow px-6 sm:px-12 py-8 sm:py-12">
     <%= content %>
   </div>
 </main>

app/components/main_with_sidenav_component.html.erb

@@ -1,6 +1,6 @@
 <main class="w-full max-w-6xl mx-auto pb-12 px-4 md:px-6 lg:px-8">
   <div class="bg-white rounded-lg shadow">
-    <div class="divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x">
+    <div class="md:min-h-[50vh] divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x">
       <aside class="py-6 sm:py-8 lg:col-span-3">
         <nav class="space-y-1">
           <%= render partial: @sidenav_partial %>

app/components/main_with_tabnav_component.html.erb

@@ -0,0 +1,10 @@
+<main class="w-full max-w-6xl mx-auto pb-12 px-4 md:px-6 lg:px-8">
+  <div class="bg-white rounded-lg shadow">
+    <div class="px-6 sm:px-12 pt-2 sm:pt-4">
+      <%= render partial: @tabnav_partial %>
+    </div>
+    <div class="px-6 sm:px-12 py-8 sm:py-12">
+      <%= content %>
+    </div>
+  </div>
+</main>

app/components/main_with_tabnav_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class MainWithTabnavComponent < ViewComponent::Base
+  def initialize(tabnav_partial:)
+    @tabnav_partial = tabnav_partial
+  end
+end

app/components/sidenav_link_component.html.erb

@@ -1,4 +1,4 @@
-<%= link_to @path, class: @link_class do %>
+<%= link_to @path, class: @link_class, title: (@disabled ? "Coming soon" : nil) do %>
   <%= render partial: "icons/#{@icon}", locals: { custom_class: @icon_class } %>
   <span class="truncate"><%= @name %></span>
 <% end %>

app/components/tabnav_link_component.html.erb

@@ -0,0 +1,3 @@
+<%= link_to @path, class: @link_class do %>
+  <%= @name %>
+<% end %>

app/components/tabnav_link_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class TabnavLinkComponent < ViewComponent::Base
+  def initialize(name:, path:, active: false, disabled: false)
+    @name = name
+    @path = path
+    @active = active
+    @disabled = disabled
+    @link_class = class_names_link(path)
+  end
+
+  def class_names_link(path)
+    if @active
+      "border-indigo-500 text-indigo-600 w-1/2 py-4 px-1 text-center border-b-2"
+    elsif @disabled
+      "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"
+    else
+      "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"
+    end
+  end
+end

app/controllers/account_controller.rb

@@ -0,0 +1,7 @@
+class AccountController < ApplicationController
+  before_action :require_user_signed_in
+
+  def index
+    @current_section = :account
+  end
+end

app/controllers/contributions/donations_controller.rb

@@ -1,4 +1,4 @@
-class DonationsController < ApplicationController
+class Contributions::DonationsController < ApplicationController
   before_action :require_user_signed_in
 
   # GET /donations

app/controllers/contributions/projects_controller.rb

@@ -0,0 +1,8 @@
+class Contributions::ProjectsController < ApplicationController
+  before_action :require_user_signed_in
+
+  # GET /contributions
+  def index
+    @current_section = :contributions
+  end
+end

app/controllers/security_controller.rb

@@ -1,7 +0,0 @@
-class SecurityController < ApplicationController
-  before_action :require_user_signed_in
-
-  def index
-    @current_section = :security
-  end
-end

app/controllers/settings/account_controller.rb

@@ -0,0 +1,13 @@
+class Settings::AccountController < SettingsController
+
+  def index
+  end
+
+  def reset_password
+    current_user.send_reset_password_instructions
+    sign_out current_user
+    msg = "We have sent you an email with a link to reset your password."
+    redirect_to check_your_email_path, notice: msg
+  end
+
+end

app/controllers/settings/profile_controller.rb

@@ -0,0 +1,11 @@
+class Settings::ProfileController < SettingsController
+
+  def index
+    @user = current_user
+  end
+
+  def update
+
+  end
+
+end

app/controllers/settings_controller.rb

@@ -1,13 +1,13 @@
 class SettingsController < ApplicationController
   before_action :require_user_signed_in
+  before_action :set_current_section
 
   def index
   end
 
-  def reset_password
-    current_user.send_reset_password_instructions
-    sign_out current_user
-    msg = "We have sent you an email with a link to reset your password."
-    redirect_to check_your_email_path, notice: msg
+  private
+
+  def set_current_section
+    @current_section = :settings
   end
 end

app/controllers/turbo_controller.rb

@@ -0,0 +1,18 @@
+class TurboController < ApplicationController
+  class Responder < ActionController::Responder
+    def to_turbo_stream
+      controller.render(options.merge(formats: :html))
+    rescue ActionView::MissingTemplate => error
+      if get?
+        raise error
+      elsif has_errors? && default_action
+        render rendering_options.merge(formats: :html, status: :unprocessable_entity)
+      else
+        redirect_to navigation_location
+      end
+    end
+  end
+
+  self.responder = Responder
+  respond_to :html, :turbo_stream
+end

app/controllers/users/devise_controller.rb

@@ -0,0 +1,18 @@
+class Users::DeviseController < ApplicationController
+  class Responder < ActionController::Responder
+    def to_turbo_stream
+      controller.render(options.merge(formats: :html))
+    rescue ActionView::MissingTemplate => error
+      if get?
+        raise error
+      elsif has_errors? && default_action
+        render rendering_options.merge(formats: :html, status: :unprocessable_entity)
+      else
+        redirect_to navigation_location
+      end
+    end
+  end
+
+  self.responder = Responder
+  respond_to :html, :turbo_stream
+end

app/javascript/controllers/clipboard_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["source", "trigger"]
+
+  copy (event) {
+    event.preventDefault();
+    navigator.clipboard.writeText(this.sourceTarget.value);
+    this.triggerTarget.querySelector('.content-initial').classList.add('hidden');
+    this.triggerTarget.querySelector('.content-active').classList.remove('hidden');
+    setTimeout(() => {
+      this.triggerTarget.querySelector('.content-initial').classList.remove('hidden');
+      this.triggerTarget.querySelector('.content-active').classList.add('hidden');
+    }, 2000)
+  }
+}

app/views/admin/invitations/index.html.erb

@@ -17,6 +17,7 @@
           <tr>
             <th>Token</th>
             <th>Accepted</th>
+            <th>Inviter</th>
             <th>Invited user</th>
           </tr>
         </thead>
@@ -24,7 +25,8 @@
           <% @invitations_used.each do |invitation| %>
             <tr>
               <td class="overflow-ellipsis font-mono"><%= invitation.token %></td>
-              <td><%= invitation.used_at.strftime("%Y-%m-%d") %></td>
+              <td><%= invitation.used_at.strftime("%Y-%m-%d (%H:%M UTC)") %></td>
+              <td><%= invitation.user.address %></td>
               <td><%= User.find(invitation.invited_user_id).address %></td>
             </tr>
           <% end %>

app/views/contributions/donations/index.html.erb

@@ -1,12 +1,12 @@
-<%= render HeaderComponent.new(title: "Donations") %>
+<%= render HeaderComponent.new(title: "Contributions") %>
 
-<%= render MainSimpleComponent.new do %>
+<%= render MainWithTabnavComponent.new(tabnav_partial: "shared/tabnav_contributions") do %>
   <section>
-    <p class="mb-12">
-      Your financial contributions to the development and upkeep of Kosmos
-      software and services.
-    </p>
     <% if @donations.any? %>
+      <p class="mb-12">
+        Your financial contributions to the development and upkeep of Kosmos
+        software and services.
+      </p>
       <ul class="list-none">
         <% @donations.each do |donation| %>
           <li class="mb-8 grid gap-y-2 gap-x-8 grid-cols-2 items-center">
@@ -33,9 +33,19 @@
         <% end %>
       </ul>
     <% else %>
-      <p class="text-gray-500">
-        No donations to show.
-      </p>
+      <div class="text-center">
+        <p class="mt-8 mb-12 inline-flex align-center items-center">
+          <%= image_tag("/img/illustrations/undraw_savings_re_eq4w.svg", class: 'h-48') %>
+        </p>
+        <h3>
+          No donations yet
+        </h3>
+        <p class="text-gray-500">
+          The donation process is not automated yet.<br>Please
+          <a href="https://wiki.kosmos.org/Main_Page#Community_.2F_Getting_in_touch_.2F_Getting_involved" class="ks-text-link" target="_blank">contact us</a>
+          if you'd like to contribute this way right now.
+        </p>
+      </div>
     <% end %>
   </section>
 <% end %>

app/views/contributions/projects/index.html.erb

@@ -0,0 +1,49 @@
+<%= render HeaderComponent.new(title: "Contributions") %>
+
+<%= render MainWithTabnavComponent.new(tabnav_partial: "shared/tabnav_contributions") do %>
+  <section>
+    <p class="mb-8">
+      Project contributions are how we develop and run all Kosmos software and
+      services. Everything we create and provide is free and open-source
+      software, even the page you're looking at right now!
+    </p>
+    <h3>Start contributing</h3>
+    <p>
+      Check out our
+      <a href="https://kosmos.org/projects/" target="_blank" class="ks-text-link">projects page</a>
+      for some (but not all) potential places that can use your help.
+    </p>
+    <p>
+      There's something to do for everyone, especially non-programmers! For
+      example, we need more help with graphics, UI/UX design, and
+      content/copywriting. We also need moderators for social media. And beta
+      testers for our software. The list doesn't end there.
+    </p>
+    <p>
+      A good way to get started is to join one of our
+      <a href="https://community.kosmos.org/t/kosmos-weekly-call/36" target="_blank" class="ks-text-link">weekly calls</a>
+      and introduce yourself. Alternatively, you can also ping us on any other
+      medium, or even just grab an open issue on
+      <a href="https://github.com/67P/" target="_blank" class="ks-text-link">GitHub</a>
+      or our
+      <a href="https://gitea.kosmos.org/kosmos/" target="_blank" class="ks-text-link">Gitea</a>
+      and dive right in (be sure to comment first, to prevent double efforts).
+    </p>
+    <p class="mb-8">
+      Last but not least, if you want to help by proposing new features or
+      services, head over to the
+      <a href="https://community.kosmos.org/" target="_blank" class="ks-text-link">community forums</a>,
+      where you can do just that.
+    </p>
+    <h3>Open Source Grants</h3>
+    <p>
+      Money coming in from financial contributions is first used to pay for our
+      bills. Additional funds are being paid out directly to our contributors,
+      including you, according to their rough share of contributions.
+    </p>
+    <p>
+      We have run two 6-month trials so far, with the next trial period
+      starting sometime in Q1 2023. Watch your email for notifications about it!
+    </p>
+  </section>
+<% end %>

app/views/devise/shared/_error_messages.html.erb

@@ -2,7 +2,7 @@
   <div id="error_explanation">
     <ul>
       <% resource.errors.full_messages.each do |message| %>
-        <li><%= message %></li>
+        <li class="text-red-600"><%= message %></li>
       <% end %>
     </ul>
   </div>

app/views/donations/index.json.jbuilder

@@ -1 +0,0 @@
-json.array! @donations, partial: "donations/donation", as: :donation

app/views/icons/_check.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-check"><polyline points="20 6 9 17 4 12"></polyline></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-check <%= custom_class %>"><polyline points="20 6 9 17 4 12"></polyline></svg>

app/views/icons/_copy.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-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></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-copy <%= custom_class %>"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>

app/views/icons/_user.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-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></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-user <%= custom_class %>"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>

app/views/invitations/index.html.erb

@@ -3,28 +3,41 @@
 <%= render MainSimpleComponent.new do %>
   <section>
     <% if @invitations_unused.any? %>
-      <p>
+      <p class="mb-8">
         Invite your friends to a Kosmos account by sharing an invitation URL with them:
       </p>
-      <table class="mt-12">
-        <thead>
-          <tr>
-            <th>URL</th>
-          </tr>
-        </thead>
-        <tbody>
-          <% @invitations_unused.each do |invitation| %>
-            <tr>
-              <td class="font-mono"><%= invitation_url(invitation.token) %></td>
-            </tr>
-          <% end %>
-        </tbody>
-      </table>
+      <ul>
+        <% @invitations_unused.each do |invitation| %>
+          <li class="font-mono mb-1 flex gap-1 md:block"
+              data-controller="clipboard">
+            <input type="text" disabled class="md:w-3/4 flex-1"
+                   value="<%= invitation_url(invitation.token) %>"
+                   data-clipboard-target="source" />
+            <button id="copy-user-address" class="btn-md btn-icon btn-blue flex-none w-auto"
+                    data-clipboard-target="trigger" data-action="clipboard#copy"
+                    title="Copy to clipboard">
+              <span class="content-initial">
+                <%= render partial: "icons/copy", locals: { custom_class: "text-white h-4 w-4 inline" } %>
+              </span>
+              <span class="content-active hidden">
+                <%= render partial: "icons/check", locals: { custom_class: "text-white h-4 w-4 inline" } %>
+              </span>
+            </button>
+          </li>
+        <% end %>
+      </ul>
     <% else %>
-      <p>
-        You do not have any invitations to give away yet. All good
-        things come in time.
-      </p>
+      <div class="text-center">
+        <p class="my-12 inline-flex align-center items-center">
+          <%= image_tag("/img/illustrations/undraw_loading_re_5axr.svg", class: 'h-48') %>
+        </p>
+        <h3>
+          No invitations available yet
+        </h3>
+        <p class="text-gray-500">
+          We will notify you, as soon as you can invite others.
+        </p>
+      </div>
     <% end %>
   </section>
 

app/views/settings/account/index.html.erb

@@ -3,7 +3,7 @@
 <%= render MainWithSidenavComponent.new(sidenav_partial: 'shared/sidenav_settings') do %>
   <section>
     <h3>Password</h3>
-    <p class="mb-12">Use the following button to request an email with a password reset link:</p>
+    <p class="mb-8">Use the following button to request an email with a password reset link:</p>
     <p>
       <%= form_with(url: settings_reset_password_path, method: :post) do %>
         <%= submit_tag("Send me a password reset link", class: 'btn-md btn-gray w-full sm:w-auto') %>

app/views/settings/index.html.erb

@@ -1 +0,0 @@
-<h2>Settings</h2>

app/views/settings/profile/index.html.erb

@@ -0,0 +1,34 @@
+<%= render HeaderComponent.new(title: "Settings") %>
+
+<%= render MainWithSidenavComponent.new(sidenav_partial: 'shared/sidenav_settings') do %>
+  <section>
+    <h3>Profile</h3>
+    <p class="mb-1">
+      <%= label :user_address, 'User address', class: 'font-bold' %>
+    </p>
+    <p data-controller="clipboard" class="flex gap-1 mb-2 sm:block">
+      <input type="text" id="user_address" class="flex-1 sm:w-3/5"
+             value=<%= @user.address %> disabled="disabled"
+             data-clipboard-target="source" />
+      <button id="copy-user-address" class="btn-md btn-icon btn-blue flex-none w-auto"
+              data-clipboard-target="trigger" data-action="clipboard#copy"
+              title="Copy to clipboard">
+        <span class="content-initial">
+          <%= render partial: "icons/copy", locals: { custom_class: "text-white h-4 w-4 inline" } %>
+        </span>
+        <span class="content-active hidden">
+          <%= render partial: "icons/check", locals: { custom_class: "text-white h-4 w-4 inline" } %>
+        </span>
+      </button>
+    </p>
+    <p class="text-sm text-gray-500">
+      Your user address for Chat and Lightning Network.
+    </p>
+
+    <%# <%= form_for(@user, as: "profile", url: settings_profile_path) do |f| %>
+    <%#   <p class="mt-8">
+    <%#     <%= f.submit "Save changes", class: 'btn-md btn-blue w-full sm:w-auto' %>
+    <%#   </p>
+    <%# <% end %>
+  </section>
+<% end %>

app/views/shared/_main_nav.html.erb

@@ -1,10 +1,10 @@
 <%= link_to "Services", root_path,
       class: main_nav_class(@current_section, :dashboard) %>
+<%= link_to "Contributions", contributions_donations_path,
+      class: main_nav_class(@current_section, :contributions) %>
 <%= link_to "Invitations", invitations_path,
       class: main_nav_class(@current_section, :invitations) %>
-<%= link_to "Donations", donations_path,
-      class: main_nav_class(@current_section, :contributions) %>
 <%= link_to "Wallet", wallet_path,
       class: main_nav_class(@current_section, :wallet) %>
-<%= link_to "Settings", security_path,
-      class: main_nav_class(@current_section, :security) %>
+<%= link_to "Settings", settings_profile_path,
+      class: main_nav_class(@current_section, :settings) %>

app/views/shared/_sidenav_settings.html.erb

@@ -1,9 +1,10 @@
 <%= render SidenavLinkComponent.new(
-  name: "Account", path: "#", icon: "settings", disabled: true
+  name: "Profile", path: settings_profile_path, icon: "user",
+  active: current_page?(settings_profile_path)
 ) %>
 <%= render SidenavLinkComponent.new(
-  name: "Password", path: security_path, icon: "key",
-  active: current_page?(security_path)
+  name: "Account", path: settings_account_path, icon: "key",
+  active: current_page?(settings_account_path)
 ) %>
 <%= render SidenavLinkComponent.new(
   name: "Security", path: "#", icon: "shield", disabled: true

app/views/shared/_tabnav_contributions.html.erb

@@ -0,0 +1,12 @@
+<div class="border-b border-gray-200">
+  <nav class="-mb-px flex" aria-label="Tabs">
+    <%= render TabnavLinkComponent.new(
+      name: "Donations", path: contributions_donations_path,
+      active: current_page?(contributions_donations_path)
+    ) %>
+    <%= render TabnavLinkComponent.new(
+      name: "Projects", path: contributions_projects_path,
+      active: current_page?(contributions_projects_path)
+    ) %>
+  </nav>
+</div>

app/views/shared/_tabnav_wallet.html.erb

@@ -0,0 +1,14 @@
+<section>
+  <div class="border-b border-gray-200">
+    <nav class="-mb-px flex" aria-label="Tabs">
+      <%= render TabnavLinkComponent.new(
+        name: "Info", path: wallet_path,
+        active: current_page?(wallet_path)
+      ) %>
+      <%= render TabnavLinkComponent.new(
+        name: "Transactions", path: wallet_transactions_path,
+        active: current_page?(wallet_transactions_path)
+      ) %>
+    </nav>
+  </div>
+</section>

app/views/wallet/index.html.erb

@@ -3,14 +3,7 @@
 <%= 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>
+  <%= render partial: "shared/tabnav_wallet" %>
 
   <section>
     <h3>Lightning Address</h3>
@@ -33,8 +26,14 @@
       accounts should be able to add/import your account using our setup
       code/URL:
     </p>
-    <p class="my-6 text-center md:text-left">
-      <button id="copy-setup-code" class="btn-md btn-blue w-full sm:w-auto">Copy setup code/URL</button>
+    <p data-controller="clipboard" class="my-6 text-center md:text-left">
+      <input type="text" disabled class="hidden" aria-hidden=true
+             value="<%= @wallet_url%>" data-clipboard-target="source" />
+      <button id="copy-setup-code" class="btn-md btn-blue w-full sm:w-auto"
+              data-action="clipboard#copy" data-clipboard-target="trigger">
+        <span class="content-initial">Copy setup code/URL</span>
+        <span class="content-active hidden">Copied ✔</span>
+      </button>
       <span class="mx-2 my-2 md:my-0 block md:inline">or</span>
       <button id="show-setup-code" class="btn-md btn-blue w-full sm:w-auto">Show setup QR code</button>
       <button id="hide-setup-code" class="hidden btn-md btn-blue w-full sm:w-auto">Hide setup QR code</button>
@@ -48,19 +47,6 @@
     <h3>Recommended Apps</h3>
     <div class="w-full grid grid-cols-1 gap-y-4 md:grid-cols-12
                 md:gap-y-6 md:gap-x-4 md:items-center">
-      <h4 class="md:col-span-3">
-        <a href="https://bluewallet.io" class="ks-text-link text-xl"
-           title="Blue Wallet" target="_blank">
-          <%= image_tag("/img/logos/bluewallet.svg", class: 'h-16') %>
-        </a>
-      </h4>
-      <p class="md:col-span-4 mb-0 text-gray-500">
-        Android / iOS / macOS
-      </p>
-      <p class="md:col-span-5 mb-0">
-        When adding a wallet, choose "Import wallet" on the bottom of the screen,
-        then scan the setup QR code.
-      </p>
       <h4 class="md:col-span-3">
         <a href="https://getalby.com/" class="ks-text-link text-xl"
            title="Alby" target="_blank">
@@ -74,6 +60,32 @@
         Choose "LNDHub (Bluewallet)" in the connect dialog and paste the setup
         URL in the "LNDHub Export URI" field.
       </p>
+      <h4 class="md:col-span-3 mt-4 mb:mt-0">
+        <a href="https://bluewallet.io" class="ks-text-link text-xl"
+           title="Blue Wallet" target="_blank">
+          <%= image_tag("/img/logos/bluewallet.svg", class: 'h-16') %>
+        </a>
+      </h4>
+      <p class="md:col-span-4 mb-0 text-gray-500">
+        Android / iOS / macOS
+      </p>
+      <p class="md:col-span-5 mb-0">
+        When adding a wallet, choose "Import wallet" on the bottom of the screen,
+        then scan the setup QR code.
+      </p>
+      <h4 class="md:col-span-3 mt-4 mb:mt-0">
+        <a href="https://zeusln.app" class="ks-text-link text-xl"
+           title="Zeus" target="_blank">
+          <%= image_tag("/img/logos/zeus.svg", class: 'h-16') %>
+        </a>
+      </h4>
+      <p class="md:col-span-4 mb-0 text-gray-500">
+        Android / iOS
+      </p>
+      <p class="md:col-span-5 mb-0">
+        On first launch, tap "Scan node config" and scan the setup QR code.
+        Add your Lightning address as a nickname, then "Save node config".
+      </p>
     </div>
   </section>
 <% end %>
@@ -82,7 +94,6 @@
   (function () {
     const buttonShow = document.querySelector('#show-setup-code');
     const buttonHide = document.querySelector('#hide-setup-code');
-    const buttonCopy = document.querySelector('#copy-setup-code');
     const setupCode = document.querySelector('#setup-code');
 
     buttonShow.addEventListener('click', function(ev) {
@@ -100,16 +111,5 @@
       buttonHide.classList.add('hidden');
       buttonShow.classList.remove('hidden');
     });
-
-    buttonCopy.addEventListener('click', function(ev) {
-      ev.preventDefault();
-      navigator.clipboard.writeText('<%= @wallet_url %>').then(() => {
-        const buttonText = buttonCopy.innerText;
-        buttonCopy.innerText = 'Copied ✔';
-        setTimeout(() => {
-          buttonCopy.innerText = buttonText;
-        }, 2000);
-      });
-    });
   })();
 </script>

app/views/wallet/transactions.html.erb

@@ -3,14 +3,7 @@
 <%= 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-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>
+  <%= render partial: "shared/tabnav_wallet" %>
 
   <section>
     <h3 class="hidden">Transactions</h3>
@@ -49,9 +42,17 @@
         <% 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>
+      <div class="text-center">
+        <p class="mt-4 mb-12 inline-flex align-center items-center">
+          <%= image_tag("/img/illustrations/undraw_digital_currency_qpak.svg", class: 'h-48') %>
+        </p>
+        <h3>
+          No transactions yet
+        </h3>
+        <p class="text-gray-500">
+          As soon as you start receiving sats, you will find some entries here.
+        </p>
+      </div>
     <% end %>
   </section>
 <% end %>