solrengine-ui 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e2bc2bd3aeb36e1145142d929300a08d854a330cd65c71d68dfece9c1767e018
-  data.tar.gz: 80de3bf17e3233c33a9fded9bbc729862e04d0df498c7c4f112b7f2cc27e92de
+  metadata.gz: 917bd58960b2d08fd11f97503c709abd8a292f51b3950b7eadfabdbd9f1b0a9e
+  data.tar.gz: 20458d17c03fda602eca17f7d5461d930b444e89463a8e736742200a4b8a9212
 SHA512:
-  metadata.gz: b2ff1de5ef92fcb51ff9f6fdaffb62c1537acb5d93807c6474fce68555213d0adab10559469477b11515a0cc65c27c41aec72f6ffe5b6b6986160630451bf469
-  data.tar.gz: 2961bafc62c4c0174dfa678f579de14276805a97d4607da9906caa343d6ff271bbc88c6c292ef91ce027c21f7edfc182dd32d9323c85b22ffc7c29fc62259d67
+  metadata.gz: 3e9c5fe51239d9aeba8c3cfdb5b943d880e47d6e1d1e9e6072614a67b4f3f43ade1a3b3c1aceaf84123f933b272ef763fba04c067a06d5862f55c804bee4c824
+  data.tar.gz: 95cb035aa44e7060cbeda754d9bfee8c8c1167148122dd986763849918e261679c765905b09fee63d97f85b720482a64c7f4d1e8a728b8f0bfd073ef9c6ea963

data/README.md

@@ -1,35 +1,200 @@
-# Solrengine::Ui
+# SolRengine UI
 
-TODO: Delete this and the text below, and describe your gem
-
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/solrengine/ui`. To experiment with that code, run `bin/console` for an interactive prompt.
+A ViewComponent library for Solana dApps built with Ruby on Rails and [SolRengine](https://github.com/solrengine). Ships 9 ready-to-use components styled with Tailwind CSS, with built-in dark/light mode support and Lookbook previews for every component.
 
 ## Installation
 
-TODO: Replace `UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG` with your gem name right after releasing it to RubyGems.org. Please do not do it earlier due to security reasons. Alternatively, replace this section with instructions to install your gem from git if you don't plan to release to RubyGems.org.
+Add the gem to your Gemfile:
+
+```ruby
+gem "solrengine-ui", github: "solrengine/ui"
+
+group :development do
+  gem "lookbook", ">= 2.0"
+end
+```
 
-Install the gem and add to the application's Gemfile by executing:
+Run the install generator:
 
 ```bash
-bundle add UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG
+bundle install
+bin/rails generate solrengine:ui:install
 ```
 
-If bundler is not being used to manage dependencies, install the gem by executing:
+Install the JavaScript package for Stimulus controllers:
 
 ```bash
-gem install UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG
+yarn add @solrengine/ui
+```
+
+## Quick Example
+
+```erb
+<%= render Solrengine::Ui::AppBarComponent.new do |bar| %>
+  <% bar.with_logo do %>
+    <span class="text-xl font-bold">My dApp</span>
+  <% end %>
+  <% bar.with_network_badge do %>
+    <%= render Solrengine::Ui::NetworkBadgeComponent.new(network: "devnet") %>
+  <% end %>
+  <% bar.with_wallet_button do %>
+    <%= render Solrengine::Ui::WalletButtonComponent.new(current_user: current_user) %>
+  <% end %>
+<% end %>
+
+<%= render Solrengine::Ui::BalanceComponent.new(lamports: 1_500_000_000, size: :lg) %>
+
+<%= render Solrengine::Ui::AddressComponent.new(address: "So1R...xYz9", copyable: true) %>
+```
+
+## Component Reference
+
+| Component | Props | Description |
+|-----------|-------|-------------|
+| `AddressComponent` | `address:`, `copyable: true`, `explorer: false`, `network: "mainnet-beta"` | Truncated wallet address with copy and explorer link |
+| `AppBarComponent` | slots: `logo`, `wallet_button`, `network_badge`, `nav_links` | Top navigation bar with slots for logo, wallet, and nav |
+| `BadgeComponent` | `text:`, `variant: :info` | Colored label badge (`:success`, `:warning`, `:error`, `:info`, `:purple`) |
+| `BalanceComponent` | `lamports: nil`, `sol: nil`, `show_symbol: true`, `size: :md` | SOL balance display with auto-conversion from lamports |
+| `ExplorerLinkComponent` | `value:`, `type: :address`, `network: "mainnet-beta"`, `truncate: true` | Link to Solscan/Solana Explorer for addresses or transactions |
+| `NetworkBadgeComponent` | `network:` | Colored dot + label for mainnet-beta, devnet, or testnet |
+| `NotificationComponent` | `message:`, `type: :info`, `dismissible: true`, `explorer_url: nil` | Flash-style notification with icon and optional explorer link |
+| `ThemeToggleComponent` | _(none)_ | Dark/light mode toggle button |
+| `WalletButtonComponent` | `current_user: nil`, `login_path: "/auth/login"`, `logout_path: "/auth/logout"` | Connect/disconnect wallet button with truncated address |
+
+## Usage Examples
+
+### AddressComponent
+
+```erb
+<%= render Solrengine::Ui::AddressComponent.new(
+  address: "7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU",
+  copyable: true,
+  explorer: true,
+  network: "devnet"
+) %>
+```
+
+### AppBarComponent
+
+```erb
+<%= render Solrengine::Ui::AppBarComponent.new do |bar| %>
+  <% bar.with_logo do %>
+    <span class="font-bold">My dApp</span>
+  <% end %>
+  <% bar.with_nav_link do %>
+    <%= link_to "Dashboard", dashboard_path %>
+  <% end %>
+  <% bar.with_nav_link do %>
+    <%= link_to "Transactions", transactions_path %>
+  <% end %>
+  <% bar.with_network_badge do %>
+    <%= render Solrengine::Ui::NetworkBadgeComponent.new(network: "devnet") %>
+  <% end %>
+  <% bar.with_wallet_button do %>
+    <%= render Solrengine::Ui::WalletButtonComponent.new(current_user: current_user) %>
+  <% end %>
+<% end %>
 ```
 
-## Usage
+### BadgeComponent
+
+```erb
+<%= render Solrengine::Ui::BadgeComponent.new(text: "Confirmed", variant: :success) %>
+<%= render Solrengine::Ui::BadgeComponent.new(text: "Pending", variant: :warning) %>
+```
+
+### BalanceComponent
+
+```erb
+<%# From lamports %>
+<%= render Solrengine::Ui::BalanceComponent.new(lamports: 2_500_000_000, size: :lg) %>
+
+<%# From SOL %>
+<%= render Solrengine::Ui::BalanceComponent.new(sol: 1.5, show_symbol: false, size: :sm) %>
+```
 
-TODO: Write usage instructions here
+### ExplorerLinkComponent
 
-## Development
+```erb
+<%# Address link %>
+<%= render Solrengine::Ui::ExplorerLinkComponent.new(
+  value: "7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU",
+  type: :address
+) %>
+
+<%# Transaction link %>
+<%= render Solrengine::Ui::ExplorerLinkComponent.new(
+  value: "5UfDuX...",
+  type: :tx,
+  network: "devnet"
+) %>
+```
+
+### NetworkBadgeComponent
+
+```erb
+<%= render Solrengine::Ui::NetworkBadgeComponent.new(network: "mainnet-beta") %>
+<%= render Solrengine::Ui::NetworkBadgeComponent.new(network: "devnet") %>
+```
+
+### NotificationComponent
+
+```erb
+<%= render Solrengine::Ui::NotificationComponent.new(
+  message: "Transaction confirmed!",
+  type: :success,
+  explorer_url: "https://solscan.io/tx/5UfDuX..."
+) %>
+
+<%= render Solrengine::Ui::NotificationComponent.new(
+  message: "Insufficient balance",
+  type: :error,
+  dismissible: false
+) %>
+```
+
+### ThemeToggleComponent
+
+```erb
+<%= render Solrengine::Ui::ThemeToggleComponent.new %>
+```
+
+### WalletButtonComponent
+
+```erb
+<%= render Solrengine::Ui::WalletButtonComponent.new(
+  current_user: current_user,
+  login_path: "/auth/login",
+  logout_path: "/auth/logout"
+) %>
+```
+
+## Dark / Light Mode
+
+All components include `dark:` Tailwind variants out of the box. Add the `dark` class to your `<html>` element to activate dark mode, or use the `ThemeToggleComponent` to let users switch. No extra configuration needed.
+
+## Lookbook
+
+After running the install generator, visit `/lookbook` in development to browse every component with live previews. The gem ships Lookbook preview classes for all 9 components.
+
+To add Lookbook manually (without the generator):
+
+```ruby
+# config/routes.rb
+mount Lookbook::Engine, at: "/lookbook" if Rails.env.development?
+
+# config/application.rb
+config.lookbook.preview_paths << File.join(
+  Gem.loaded_specs["solrengine-ui"].full_gem_path, "previews"
+) if defined?(Lookbook)
+```
 
-After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+## Links
 
-To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+- [SolRengine](https://github.com/solrengine) -- the framework for building Solana dApps with Ruby on Rails
+- [Source](https://github.com/solrengine/ui)
+- [Changelog](https://github.com/solrengine/ui/blob/main/CHANGELOG.md)
 
-## Contributing
+## License
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/solrengine-ui.
+MIT

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

@@ -1,6 +1,6 @@
 <span class="inline-flex items-center gap-1.5">
   <% if copyable %>
-    <button data-controller="clipboard" data-clipboard-text-value="<%= address %>" class="text-gray-400 dark:text-gray-400 text-xs font-mono bg-gray-100 dark:bg-gray-800 px-2.5 py-1.5 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors cursor-pointer">
+    <button data-controller="sui-clipboard" data-sui-clipboard-text-value="<%= address %>" class="text-gray-400 dark:text-gray-400 text-xs font-mono bg-gray-100 dark:bg-gray-800 px-2.5 py-1.5 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors cursor-pointer">
       <%= truncated_address %>
     </button>
   <% else %>

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/notification_component.html.erb

@@ -1,4 +1,4 @@
-<div data-controller="notification" class="p-4 rounded-xl border text-sm flex items-start gap-3 <%= variant_classes %>">
+<div data-controller="sui-notification" class="p-4 rounded-xl border text-sm flex items-start gap-3 <%= variant_classes %>">
   <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
     <path stroke-linecap="round" stroke-linejoin="round" d="<%= icon_path %>" />
   </svg>
@@ -11,7 +11,7 @@
     <% end %>
   </div>
   <% if dismissible %>
-    <button data-action="click->notification#dismiss" class="shrink-0 mt-0.5 hover:opacity-70 transition-opacity cursor-pointer">
+    <button data-action="click->sui-notification#dismiss" class="shrink-0 mt-0.5 hover:opacity-70 transition-opacity 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="M6 18L18 6M6 6l12 12" />
       </svg>

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/theme_toggle_component.html.erb

@@ -1,4 +1,4 @@
-<button data-controller="theme" data-action="click->theme#toggle" class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer">
+<button data-controller="sui-theme" data-action="click->sui-theme#toggle" class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors cursor-pointer">
   <%# Sun icon — visible in dark mode %>
   <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 hidden dark:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
     <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />

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