solrengine-ui 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 197b6db92ceb99c4cc092b2d7696a5017c4d25d2550c66eb7194288ca5bfb4d9
-  data.tar.gz: 44240c5b4f42f3ca739fd7710da5e62e9344a1482cb36a59aadd709db8e55034
+  metadata.gz: 917bd58960b2d08fd11f97503c709abd8a292f51b3950b7eadfabdbd9f1b0a9e
+  data.tar.gz: 20458d17c03fda602eca17f7d5461d930b444e89463a8e736742200a4b8a9212
 SHA512:
-  metadata.gz: 627316c5de0fdad3ecd9df1238d0382d8190455bffa8fac3b4a6a7b3d1e0fcc3a167d25defe1f2c8e40f740c9f64c7a365f97fdf45de1e9272352997a96948dd
-  data.tar.gz: 1fe9f7f7678ef3d99fd1efc9a2e3965f8b7a015dfb6b13f196ad4c56b20fd5b59c041ebb248d02419f65af51944cd9d723502147cc92bf631000b7448a91d8d1
+  metadata.gz: 3e9c5fe51239d9aeba8c3cfdb5b943d880e47d6e1d1e9e6072614a67b4f3f43ade1a3b3c1aceaf84123f933b272ef763fba04c067a06d5862f55c804bee4c824
+  data.tar.gz: 95cb035aa44e7060cbeda754d9bfee8c8c1167148122dd986763849918e261679c765905b09fee63d97f85b720482a64c7f4d1e8a728b8f0bfd073ef9c6ea963

data/app/components/solrengine/ui/airdrop_button_component.html.erb

@@ -0,0 +1,14 @@
+<% if devnet? %>
+  <form action="<%= action_url %>" method="post" class="inline">
+    <input type="hidden" name="address" value="<%= address %>" />
+    <input type="hidden" name="network" value="<%= network %>" />
+    <button type="submit" class="inline-flex items-center gap-2 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-medium rounded-lg text-sm transition-colors cursor-pointer">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+      </svg>
+      Airdrop 1 SOL
+    </button>
+  </form>
+<% else %>
+  <span class="text-xs text-gray-400 dark:text-gray-500">Airdrop available on devnet/testnet only</span>
+<% end %>

data/app/components/solrengine/ui/airdrop_button_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Solrengine
+  module Ui
+    class AirdropButtonComponent < ViewComponent::Base
+      attr_reader :address, :network, :action_url
+
+      def initialize(address:, network: "devnet", action_url: "/airdrop")
+        @address = address
+        @network = network
+        @action_url = action_url
+      end
+
+      def devnet?
+        network == "devnet" || network == "testnet"
+      end
+    end
+  end
+end

data/app/components/solrengine/ui/card_component.html.erb

@@ -0,0 +1,17 @@
+<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl overflow-hidden">
+  <% if header? %>
+    <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-800">
+      <%= header %>
+    </div>
+  <% end %>
+  <% if body? %>
+    <div class="<%= 'px-5 py-4' if padding %>">
+      <%= body %>
+    </div>
+  <% end %>
+  <% if footer? %>
+    <div class="px-5 py-3 border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-950">
+      <%= footer %>
+    </div>
+  <% end %>
+</div>

data/app/components/solrengine/ui/card_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Solrengine
+  module Ui
+    class CardComponent < ViewComponent::Base
+      renders_one :header
+      renders_one :body
+      renders_one :footer
+
+      attr_reader :padding
+
+      def initialize(padding: true)
+        @padding = padding
+      end
+    end
+  end
+end

data/app/components/solrengine/ui/collapse_component.html.erb

@@ -0,0 +1,8 @@
+<div data-controller="sui-collapse" data-sui-collapse-expanded-value="<%= expanded %>">
+  <button data-action="click->sui-collapse#toggle" class="w-full cursor-pointer">
+    <%= trigger %>
+  </button>
+  <div data-sui-collapse-target="content" class="<%= 'hidden' unless expanded %> overflow-hidden">
+    <%= content %>
+  </div>
+</div>

data/app/components/solrengine/ui/collapse_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Solrengine
+  module Ui
+    class CollapseComponent < ViewComponent::Base
+      renders_one :trigger
+      renders_one :content
+
+      attr_reader :expanded
+
+      def initialize(expanded: false)
+        @expanded = expanded
+      end
+    end
+  end
+end

data/app/components/solrengine/ui/dropdown_component.html.erb

@@ -0,0 +1,10 @@
+<div data-controller="sui-dropdown" class="relative inline-block">
+  <div data-action="click->sui-dropdown#toggle">
+    <%= trigger %>
+  </div>
+  <div data-sui-dropdown-target="menu" class="hidden absolute z-40 <%= align_class %> mt-2 w-48 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg shadow-lg py-1">
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  </div>
+</div>

data/app/components/solrengine/ui/dropdown_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Solrengine
+  module Ui
+    class DropdownComponent < ViewComponent::Base
+      renders_one :trigger
+      renders_many :items
+
+      attr_reader :align
+
+      def initialize(align: :right)
+        @align = align
+      end
+
+      def align_class
+        align == :left ? "left-0" : "right-0"
+      end
+    end
+  end
+end

data/app/components/solrengine/ui/footer_component.html.erb

@@ -0,0 +1,16 @@
+<footer class="border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-950 px-6 py-8">
+  <div class="max-w-7xl mx-auto">
+    <% if links.any? %>
+      <div class="flex flex-wrap gap-6 justify-center mb-4">
+        <% links.each do |link| %>
+          <%= link %>
+        <% end %>
+      </div>
+    <% end %>
+    <% if powered_by? %>
+      <div class="text-center text-sm text-gray-500 dark:text-gray-400">
+        <%= powered_by %>
+      </div>
+    <% end %>
+  </div>
+</footer>

data/app/components/solrengine/ui/footer_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module Solrengine
+  module Ui
+    class FooterComponent < ViewComponent::Base
+      renders_one :powered_by
+      renders_many :links
+    end
+  end
+end

data/app/components/solrengine/ui/modal_component.html.erb

@@ -0,0 +1,27 @@
+<div data-controller="sui-modal" class="hidden fixed inset-0 z-50">
+  <div data-sui-modal-target="backdrop" data-action="click->sui-modal#backdropClick" class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
+  <div class="relative flex items-center justify-center min-h-screen p-4">
+    <div data-sui-modal-target="panel" class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl shadow-xl w-full <%= size_class %>">
+      <% if title %>
+        <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-gray-800">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white"><%= title %></h3>
+          <button data-action="click->sui-modal#close" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      <% end %>
+      <% if body? %>
+        <div class="px-5 py-4">
+          <%= body %>
+        </div>
+      <% end %>
+      <% if actions? %>
+        <div class="px-5 py-3 border-t border-gray-200 dark:border-gray-800 flex justify-end gap-2">
+          <%= actions %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/components/solrengine/ui/modal_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Solrengine
+  module Ui
+    class ModalComponent < ViewComponent::Base
+      renders_one :body
+      renders_one :actions
+
+      attr_reader :title, :size
+
+      SIZES = {
+        sm: "max-w-sm",
+        md: "max-w-md",
+        lg: "max-w-lg",
+        xl: "max-w-xl"
+      }.freeze
+
+      def initialize(title: nil, size: :md)
+        @title = title
+        @size = size
+      end
+
+      def size_class
+        SIZES.fetch(size, SIZES[:md])
+      end
+    end
+  end
+end

data/app/components/solrengine/ui/send_transaction_form_component.html.erb

@@ -0,0 +1,27 @@
+<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl p-5">
+  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Send SOL</h3>
+  <% if connected? %>
+    <form action="<%= action_url %>" method="post" class="space-y-4">
+      <div>
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">From</label>
+        <div class="text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-3 py-2 rounded-lg">
+          <%= wallet_address %>
+        </div>
+      </div>
+      <div>
+        <label for="sui-send-recipient" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Recipient</label>
+        <input type="text" name="recipient" id="sui-send-recipient" placeholder="Solana address" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" required />
+      </div>
+      <div>
+        <label for="sui-send-amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Amount (SOL)</label>
+        <input type="number" name="amount" id="sui-send-amount" step="0.000000001" min="0" placeholder="0.0" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" required />
+      </div>
+      <input type="hidden" name="network" value="<%= network %>" />
+      <button type="submit" class="w-full py-2.5 px-4 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg text-sm transition-colors cursor-pointer">
+        Send Transaction
+      </button>
+    </form>
+  <% else %>
+    <p class="text-sm text-gray-500 dark:text-gray-400 text-center py-4">Connect your wallet to send SOL</p>
+  <% end %>
+</div>

data/app/components/solrengine/ui/send_transaction_form_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Solrengine
+  module Ui
+    class SendTransactionFormComponent < ViewComponent::Base
+      attr_reader :wallet_address, :network, :action_url
+
+      def initialize(wallet_address: nil, network: "devnet", action_url: "/transfers")
+        @wallet_address = wallet_address
+        @network = network
+        @action_url = action_url
+      end
+
+      def connected?
+        wallet_address.present?
+      end
+    end
+  end
+end

data/app/components/solrengine/ui/token_icon_component.html.erb

@@ -0,0 +1,7 @@
+<% if uri %>
+  <img src="<%= uri %>" alt="<%= symbol %>" class="<%= size_class %> rounded-full" loading="lazy" />
+<% else %>
+  <div class="<%= size_class %> rounded-full bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-400 flex items-center justify-center text-sm font-bold">
+    <%= fallback_letter %>
+  </div>
+<% end %>

data/app/components/solrengine/ui/token_icon_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Solrengine
+  module Ui
+    class TokenIconComponent < ViewComponent::Base
+      SIZES = {
+        sm: "h-6 w-6",
+        md: "h-8 w-8",
+        lg: "h-10 w-10"
+      }.freeze
+
+      attr_reader :uri, :symbol, :size
+
+      def initialize(symbol:, uri: nil, size: :md)
+        @uri = uri
+        @symbol = symbol
+        @size = size
+      end
+
+      def size_class
+        SIZES.fetch(size, SIZES[:md])
+      end
+
+      def fallback_letter
+        symbol&.first&.upcase || "?"
+      end
+    end
+  end
+end

data/app/components/solrengine/ui/token_list_component.html.erb

@@ -0,0 +1,11 @@
+<div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-xl overflow-hidden divide-y divide-gray-200 dark:divide-gray-800">
+  <% if tokens.empty? %>
+    <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400 text-sm">
+      No tokens found
+    </div>
+  <% else %>
+    <% tokens.each do |token| %>
+      <%= render Solrengine::Ui::TokenRowComponent.new(token: token) %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/solrengine/ui/token_list_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Solrengine
+  module Ui
+    class TokenListComponent < ViewComponent::Base
+      attr_reader :tokens
+
+      # tokens: array of { symbol:, name:, balance:, icon_uri:, usd_value: }
+      def initialize(tokens:)
+        @tokens = tokens
+      end
+    end
+  end
+end

data/app/components/solrengine/ui/token_row_component.html.erb

@@ -0,0 +1,17 @@
+<div class="flex items-center justify-between py-3 px-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
+  <div class="flex items-center gap-3">
+    <%= render Solrengine::Ui::TokenIconComponent.new(symbol: symbol, uri: icon_uri, size: :md) %>
+    <div>
+      <div class="font-medium text-gray-900 dark:text-white text-sm"><%= symbol %></div>
+      <% if name %>
+        <div class="text-xs text-gray-500 dark:text-gray-400"><%= name %></div>
+      <% end %>
+    </div>
+  </div>
+  <div class="text-right">
+    <div class="font-medium text-gray-900 dark:text-white text-sm"><%= balance %></div>
+    <% if usd_value %>
+      <div class="text-xs text-gray-500 dark:text-gray-400">$<%= usd_value %></div>
+    <% end %>
+  </div>
+</div>

data/app/components/solrengine/ui/token_row_component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Solrengine
+  module Ui
+    class TokenRowComponent < ViewComponent::Base
+      attr_reader :token
+
+      # token: { symbol:, name:, balance:, icon_uri:, usd_value: }
+      def initialize(token:)
+        @token = token
+      end
+
+      def symbol
+        token[:symbol]
+      end
+
+      def name
+        token[:name]
+      end
+
+      def balance
+        token[:balance]
+      end
+
+      def icon_uri
+        token[:icon_uri]
+      end
+
+      def usd_value
+        token[:usd_value]
+      end
+    end
+  end
+end

data/app/components/solrengine/ui/transaction_status_component.html.erb

@@ -0,0 +1,9 @@
+<div class="inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium <%= status_config[:classes] %>">
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="<%= status_config[:icon] %>" />
+  </svg>
+  <span><%= status_config[:label] %></span>
+  <% if explorer_url %>
+    <a href="<%= explorer_url %>" target="_blank" rel="noopener noreferrer" class="underline hover:opacity-80">View</a>
+  <% end %>
+</div>

data/app/components/solrengine/ui/transaction_status_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Solrengine
+  module Ui
+    class TransactionStatusComponent < ViewComponent::Base
+      STATUSES = {
+        pending: { label: "Pending", icon: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z", classes: "text-yellow-600 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/20" },
+        confirmed: { label: "Confirmed", icon: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z", classes: "text-green-600 dark:text-green-400 bg-green-50 dark:bg-green-900/20" },
+        failed: { label: "Failed", icon: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z", classes: "text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20" },
+        processing: { label: "Processing", icon: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15", classes: "text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20" }
+      }.freeze
+
+      attr_reader :status, :signature, :network
+
+      def initialize(status:, signature: nil, network: "mainnet-beta")
+        @status = status.to_sym
+        @signature = signature
+        @network = network
+      end
+
+      def status_config
+        STATUSES.fetch(status, STATUSES[:pending])
+      end
+
+      def explorer_url
+        return unless signature
+        if network == "mainnet-beta"
+          "https://solscan.io/tx/#{signature}"
+        else
+          "https://explorer.solana.com/tx/#{signature}?cluster=#{network}"
+        end
+      end
+    end
+  end
+end

data/lib/solrengine/ui/version.rb

@@ -2,6 +2,6 @@
 
 module Solrengine
   module Ui
-    VERSION = "0.1.1"
+    VERSION = "0.2.0"
   end
 end

data/previews/solrengine/ui/airdrop_button_component_preview.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class Solrengine::Ui::AirdropButtonComponentPreview < Lookbook::Preview
+  # @label Devnet
+  def devnet
+    render(Solrengine::Ui::AirdropButtonComponent.new(
+      address: "7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU",
+      network: "devnet"
+    ))
+  end
+
+  # @label Mainnet (disabled)
+  def mainnet
+    render(Solrengine::Ui::AirdropButtonComponent.new(
+      address: "7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU",
+      network: "mainnet-beta"
+    ))
+  end
+end

data/previews/solrengine/ui/card_component_preview.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class Solrengine::Ui::CardComponentPreview < Lookbook::Preview
+  # @label Default
+  def default
+    render(Solrengine::Ui::CardComponent.new) do |c|
+      c.with_header { "<h3 class='font-semibold text-gray-900 dark:text-white'>Account Overview</h3>".html_safe }
+      c.with_body { "<p class='text-gray-600 dark:text-gray-300'>Your wallet balance and recent activity.</p>".html_safe }
+      c.with_footer { "<span class='text-sm text-gray-500'>Last updated: just now</span>".html_safe }
+    end
+  end
+
+  # @label Body Only
+  def body_only
+    render(Solrengine::Ui::CardComponent.new) do |c|
+      c.with_body { "<p class='text-gray-600 dark:text-gray-300'>A simple card with just body content.</p>".html_safe }
+    end
+  end
+
+  # @label No Padding
+  def no_padding
+    render(Solrengine::Ui::CardComponent.new(padding: false)) do |c|
+      c.with_body { "<div class='h-32 bg-gradient-to-br from-purple-500 to-blue-600'></div>".html_safe }
+    end
+  end
+end

data/previews/solrengine/ui/collapse_component_preview.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class Solrengine::Ui::CollapseComponentPreview < Lookbook::Preview
+  # @label Collapsed
+  def collapsed
+    render(Solrengine::Ui::CollapseComponent.new) do |c|
+      c.with_trigger { "<div class='flex items-center justify-between py-2 text-gray-900 dark:text-white font-medium'>Transaction Details <span class='text-gray-400'>+</span></div>".html_safe }
+      c.with_content { "<div class='py-2 text-sm text-gray-600 dark:text-gray-300'>Signature: abc123...<br>Block: 12345678<br>Fee: 0.000005 SOL</div>".html_safe }
+    end
+  end
+
+  # @label Expanded
+  def expanded
+    render(Solrengine::Ui::CollapseComponent.new(expanded: true)) do |c|
+      c.with_trigger { "<div class='flex items-center justify-between py-2 text-gray-900 dark:text-white font-medium'>Transaction Details <span class='text-gray-400'>-</span></div>".html_safe }
+      c.with_content { "<div class='py-2 text-sm text-gray-600 dark:text-gray-300'>Signature: abc123...<br>Block: 12345678<br>Fee: 0.000005 SOL</div>".html_safe }
+    end
+  end
+end

data/previews/solrengine/ui/dropdown_component_preview.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+class Solrengine::Ui::DropdownComponentPreview < Lookbook::Preview
+  # @label Default
+  def default
+    render(Solrengine::Ui::DropdownComponent.new) do |c|
+      c.with_trigger { "<button class='px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg text-sm'>Options</button>".html_safe }
+      c.with_item { "<a href='#' class='block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'>View on Explorer</a>".html_safe }
+      c.with_item { "<a href='#' class='block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'>Copy Address</a>".html_safe }
+      c.with_item { "<a href='#' class='block px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-800'>Disconnect</a>".html_safe }
+    end
+  end
+
+  # @label Left Aligned
+  def left_aligned
+    render(Solrengine::Ui::DropdownComponent.new(align: :left)) do |c|
+      c.with_trigger { "<button class='px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg text-sm'>Menu</button>".html_safe }
+      c.with_item { "<a href='#' class='block px-4 py-2 text-sm text-gray-700 dark:text-gray-300'>Item 1</a>".html_safe }
+      c.with_item { "<a href='#' class='block px-4 py-2 text-sm text-gray-700 dark:text-gray-300'>Item 2</a>".html_safe }
+    end
+  end
+end

data/previews/solrengine/ui/footer_component_preview.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class Solrengine::Ui::FooterComponentPreview < Lookbook::Preview
+  # @label Default
+  def default
+    render(Solrengine::Ui::FooterComponent.new) do |c|
+      c.with_link { "<a href='#' class='text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'>Docs</a>".html_safe }
+      c.with_link { "<a href='#' class='text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'>GitHub</a>".html_safe }
+      c.with_link { "<a href='#' class='text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'>Twitter</a>".html_safe }
+      c.with_powered_by { "Built with <strong>SolRengine</strong> on Solana".html_safe }
+    end
+  end
+end

data/previews/solrengine/ui/modal_component_preview.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class Solrengine::Ui::ModalComponentPreview < Lookbook::Preview
+  # @label Default
+  def default
+    render(Solrengine::Ui::ModalComponent.new(title: "Confirm Transaction")) do |c|
+      c.with_body { "<p class='text-gray-600 dark:text-gray-300'>Send 1.5 SOL to 7xKX...AsU?</p>".html_safe }
+      c.with_actions { "<button class='px-4 py-2 bg-purple-600 text-white rounded-lg text-sm'>Confirm</button>".html_safe }
+    end
+  end
+
+  # @label Large
+  def large
+    render(Solrengine::Ui::ModalComponent.new(title: "Select Wallet", size: :lg)) do |c|
+      c.with_body { "<p class='text-gray-600 dark:text-gray-300'>Choose a wallet to connect.</p>".html_safe }
+    end
+  end
+end

data/previews/solrengine/ui/send_transaction_form_component_preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class Solrengine::Ui::SendTransactionFormComponentPreview < Lookbook::Preview
+  # @label Connected
+  def connected
+    render(Solrengine::Ui::SendTransactionFormComponent.new(
+      wallet_address: "7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU",
+      network: "devnet"
+    ))
+  end
+
+  # @label Disconnected
+  def disconnected
+    render(Solrengine::Ui::SendTransactionFormComponent.new)
+  end
+end

data/previews/solrengine/ui/token_icon_component_preview/sizes.html.erb

@@ -0,0 +1,5 @@
+<div class="flex items-center gap-4">
+  <%= render Solrengine::Ui::TokenIconComponent.new(symbol: "SOL", size: :sm) %>
+  <%= render Solrengine::Ui::TokenIconComponent.new(symbol: "SOL", size: :md) %>
+  <%= render Solrengine::Ui::TokenIconComponent.new(symbol: "SOL", size: :lg) %>
+</div>

data/previews/solrengine/ui/token_icon_component_preview.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class Solrengine::Ui::TokenIconComponentPreview < Lookbook::Preview
+  # @label With Image
+  def with_image
+    render(Solrengine::Ui::TokenIconComponent.new(
+      symbol: "SOL",
+      uri: "https://raw.githubusercontent.com/solana-labs/token-list/main/assets/mainnet/So11111111111111111111111111111111111111112/logo.png"
+    ))
+  end
+
+  # @label Fallback
+  def fallback
+    render(Solrengine::Ui::TokenIconComponent.new(symbol: "BONK"))
+  end
+
+  # @label Sizes
+  def sizes
+    render_with_template(template: "solrengine/ui/token_icon_component_preview/sizes")
+  end
+end

data/previews/solrengine/ui/token_list_component_preview.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class Solrengine::Ui::TokenListComponentPreview < Lookbook::Preview
+  # @label Default
+  def default
+    tokens = [
+      { symbol: "SOL", name: "Solana", balance: "12.500", icon_uri: nil, usd_value: "1,875.00" },
+      { symbol: "USDC", name: "USD Coin", balance: "500.00", icon_uri: nil, usd_value: "500.00" },
+      { symbol: "BONK", name: "Bonk", balance: "1,000,000", icon_uri: nil, usd_value: "12.50" }
+    ]
+
+    render(Solrengine::Ui::TokenListComponent.new(tokens: tokens))
+  end
+
+  # @label Empty
+  def empty
+    render(Solrengine::Ui::TokenListComponent.new(tokens: []))
+  end
+end

data/previews/solrengine/ui/token_row_component_preview.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class Solrengine::Ui::TokenRowComponentPreview < Lookbook::Preview
+  # @label With USD Value
+  def with_usd
+    render(Solrengine::Ui::TokenRowComponent.new(token: {
+      symbol: "SOL", name: "Solana", balance: "12.500", icon_uri: nil, usd_value: "1,875.00"
+    }))
+  end
+
+  # @label Without USD Value
+  def without_usd
+    render(Solrengine::Ui::TokenRowComponent.new(token: {
+      symbol: "BONK", name: "Bonk", balance: "1,000,000"
+    }))
+  end
+end

data/previews/solrengine/ui/transaction_status_component_preview.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class Solrengine::Ui::TransactionStatusComponentPreview < Lookbook::Preview
+  # @label Pending
+  def pending
+    render(Solrengine::Ui::TransactionStatusComponent.new(status: :pending))
+  end
+
+  # @label Confirmed
+  def confirmed
+    render(Solrengine::Ui::TransactionStatusComponent.new(
+      status: :confirmed,
+      signature: "5UfDuX7hXbGRYb1gQMFJGZJqAFBPY4CGeh6Lh5PzVH1x4Kz2REPnMZJjALFqwHNBWPPHcGr2jQfhtYdMwA1jDqN"
+    ))
+  end
+
+  # @label Failed
+  def failed
+    render(Solrengine::Ui::TransactionStatusComponent.new(status: :failed))
+  end
+
+  # @label Processing
+  def processing
+    render(Solrengine::Ui::TransactionStatusComponent.new(status: :processing))
+  end
+end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: solrengine-ui
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.0
 platform: ruby
 authors:
 - Jose Ferrer
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-04-13 00:00:00.000000000 Z
+date: 2026-04-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component
@@ -65,20 +65,42 @@ files:
 - README.md
 - app/components/solrengine/ui/address_component.html.erb
 - app/components/solrengine/ui/address_component.rb
+- app/components/solrengine/ui/airdrop_button_component.html.erb
+- app/components/solrengine/ui/airdrop_button_component.rb
 - app/components/solrengine/ui/app_bar_component.html.erb
 - app/components/solrengine/ui/app_bar_component.rb
 - app/components/solrengine/ui/badge_component.html.erb
 - app/components/solrengine/ui/badge_component.rb
 - app/components/solrengine/ui/balance_component.html.erb
 - app/components/solrengine/ui/balance_component.rb
+- app/components/solrengine/ui/card_component.html.erb
+- app/components/solrengine/ui/card_component.rb
+- app/components/solrengine/ui/collapse_component.html.erb
+- app/components/solrengine/ui/collapse_component.rb
+- app/components/solrengine/ui/dropdown_component.html.erb
+- app/components/solrengine/ui/dropdown_component.rb
 - app/components/solrengine/ui/explorer_link_component.html.erb
 - app/components/solrengine/ui/explorer_link_component.rb
+- app/components/solrengine/ui/footer_component.html.erb
+- app/components/solrengine/ui/footer_component.rb
+- app/components/solrengine/ui/modal_component.html.erb
+- app/components/solrengine/ui/modal_component.rb
 - app/components/solrengine/ui/network_badge_component.html.erb
 - app/components/solrengine/ui/network_badge_component.rb
 - app/components/solrengine/ui/notification_component.html.erb
 - app/components/solrengine/ui/notification_component.rb
+- app/components/solrengine/ui/send_transaction_form_component.html.erb
+- app/components/solrengine/ui/send_transaction_form_component.rb
 - app/components/solrengine/ui/theme_toggle_component.html.erb
 - app/components/solrengine/ui/theme_toggle_component.rb
+- app/components/solrengine/ui/token_icon_component.html.erb
+- app/components/solrengine/ui/token_icon_component.rb
+- app/components/solrengine/ui/token_list_component.html.erb
+- app/components/solrengine/ui/token_list_component.rb
+- app/components/solrengine/ui/token_row_component.html.erb
+- app/components/solrengine/ui/token_row_component.rb
+- app/components/solrengine/ui/transaction_status_component.html.erb
+- app/components/solrengine/ui/transaction_status_component.rb
 - app/components/solrengine/ui/wallet_button_component.html.erb
 - app/components/solrengine/ui/wallet_button_component.rb
 - lib/generators/solrengine/ui/install_generator.rb
@@ -86,13 +108,25 @@ files:
 - lib/solrengine/ui/engine.rb
 - lib/solrengine/ui/version.rb
 - previews/solrengine/ui/address_component_preview.rb
+- previews/solrengine/ui/airdrop_button_component_preview.rb
 - previews/solrengine/ui/app_bar_component_preview.rb
 - previews/solrengine/ui/badge_component_preview.rb
 - previews/solrengine/ui/balance_component_preview.rb
+- previews/solrengine/ui/card_component_preview.rb
+- previews/solrengine/ui/collapse_component_preview.rb
+- previews/solrengine/ui/dropdown_component_preview.rb
 - previews/solrengine/ui/explorer_link_component_preview.rb
+- previews/solrengine/ui/footer_component_preview.rb
+- previews/solrengine/ui/modal_component_preview.rb
 - previews/solrengine/ui/network_badge_component_preview.rb
 - previews/solrengine/ui/notification_component_preview.rb
+- previews/solrengine/ui/send_transaction_form_component_preview.rb
 - previews/solrengine/ui/theme_toggle_component_preview.rb
+- previews/solrengine/ui/token_icon_component_preview.rb
+- previews/solrengine/ui/token_icon_component_preview/sizes.html.erb
+- previews/solrengine/ui/token_list_component_preview.rb
+- previews/solrengine/ui/token_row_component_preview.rb
+- previews/solrengine/ui/transaction_status_component_preview.rb
 - previews/solrengine/ui/wallet_button_component_preview.rb
 homepage: https://github.com/solrengine/ui
 licenses: