RubyGems - solrengine-ui - Versions diffs - 0.3.0 → 0.4.0 - Mend

solrengine-ui 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

checksums.yaml +4 -4
data/README.md +14 -3
data/app/components/solrengine/ui/address_component.html.erb +2 -2
data/app/components/solrengine/ui/send_transaction_form_component.html.erb +16 -5
data/app/components/solrengine/ui/send_transaction_form_component.rb +22 -4
data/lib/generators/solrengine/ui/install_generator.rb +1 -1
data/lib/solrengine/ui/version.rb +1 -1
metadata +2 -2

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 40d6862af5f3d7e2de41af4a22869bee41980a29b41fbc379236c382bb6edba0
-  data.tar.gz: 6f15fcb3346415498c6a92097b7f3075dea9f85fcd71fef8ab56853a7e699f57
+  metadata.gz: 7f581b398d242514e6c5d1d6ff9fe3b3fc55e90c2d26e403010418ec14896b13
+  data.tar.gz: 49039f57c9bb07e2a671e7657ead45116e8444ac86a8edd2d9ca2f5cf32b751f
 SHA512:
-  metadata.gz: c5ddc1dd79116f4e73dadec1dc16999080da5caad99f650cf28534ef4e5a9ee22f6b0764a44dbff432b1f937894fd62206490300210f59416a60fbf259f76ea5
-  data.tar.gz: a07e6b55a7a3c4c35fe424044354603cfa0ec72de7ba68d55e9b66243b67b67777da6b5b74a11e749773c7751d4c300b7e99462295189c5ff78f25efd132f6c1
+  metadata.gz: 29a2a90fcd48d82aab8694d09ecf1b09a4e77a4bf9b776a5278a19390526a99a3c89ed9603bd1717c1f99b17cb76139985666fb0efcec0c53564f1e1eb09bb7b
+  data.tar.gz: 4104e55638cdfab3659969782b8d29e85f177195494fd5ef666daf08c40d65aecf312c56a71defd180132fbd704cf6a358e76d9a15f278a6a3db9986e2755ce8

data/README.md CHANGED Viewed

@@ -1,13 +1,13 @@
 # SolRengine UI
-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.
+A ViewComponent library for Solana dApps built with Ruby on Rails and [SolRengine](https://github.com/solrengine). Ships 20 ready-to-use components styled with Tailwind CSS, with built-in dark/light mode support and Lookbook previews for every component.
 ## Installation
 Add the gem to your Gemfile:
 ```ruby
-gem "solrengine-ui", github: "solrengine/ui"
+gem "solrengine-ui"
 group :development do
   gem "lookbook", ">= 2.0"
@@ -60,6 +60,17 @@ yarn add @solrengine/ui
 | `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 |
+| `CardComponent` | `padding: true`, slots: `header`, `body`, `footer` | Container card with optional header/footer |
+| `ModalComponent` | `title: nil`, `size: :md`, slots: `body`, `actions` | Modal dialog with backdrop and close button |
+| `DropdownComponent` | `align: :right`, slots: `trigger`, `items` | Dropdown menu with click-outside close |
+| `CollapseComponent` | `expanded: false`, slots: `collapse_header`, `collapse_body` | Collapsible content section |
+| `FooterComponent` | slots: `links`, `powered_by` | Page footer with links and branding |
+| `TokenListComponent` | `tokens:` (array) | List of token rows with empty state |
+| `TokenRowComponent` | `token:` (hash with symbol, name, balance, icon_uri, usd_value) | Single token row with icon and balance |
+| `TokenIconComponent` | `symbol:`, `uri: nil`, `size: :md` | Token icon image or fallback letter |
+| `TransactionStatusComponent` | `status:`, `signature: nil`, `network:` | Status badge (pending/confirmed/failed/processing) with explorer link |
+| `SendTransactionFormComponent` | `wallet_address: nil`, `network:`, `action_url:` | SOL transfer form with recipient and amount |
+| `AirdropButtonComponent` | `address:`, `network:`, `action_url:` | Airdrop button (devnet/testnet only) |
 ## Usage Examples
@@ -175,7 +186,7 @@ All components include `dark:` Tailwind variants out of the box. Add the `dark`
 ## 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.
+After running the install generator, visit `/lookbook` in development to browse every component with live previews. The gem ships Lookbook preview classes for all 20 components.
 To add Lookbook manually (without the generator):

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

@@ -1,7 +1,7 @@
 <span class="inline-flex items-center gap-1.5">
   <% if copyable %>
-    <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 data-controller="sui-clipboard" data-sui-clipboard-text-value="<%= address %>" data-action="click->sui-clipboard#copy" 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">
+      <span data-sui-clipboard-target="label"><%= truncated_address %></span>
     </button>
   <% else %>
     <span 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">

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

@@ -1,7 +1,12 @@
 <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">
+    <form class="space-y-4"
+          data-controller="send-transaction"
+          data-send-transaction-wallet-address-value="<%= wallet_address %>"
+          data-send-transaction-rpc-url-value="<%= rpc_url %>"
+          data-send-transaction-chain-value="<%= chain %>"
+          data-action="submit->send-transaction#send">
       <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">
@@ -10,16 +15,22 @@
       </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 />
+        <input type="text" name="recipient" id="sui-send-recipient" placeholder="Solana address" required
+               data-send-transaction-target="recipient"
+               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" />
       </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 />
+        <input type="number" name="amount" id="sui-send-amount" step="0.000000001" min="0" placeholder="0.0" required
+               data-send-transaction-target="amount"
+               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" />
       </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">
+      <button type="submit"
+              data-send-transaction-target="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 disabled:opacity-60 disabled:cursor-not-allowed">
         Send Transaction
       </button>
+      <div data-send-transaction-target="status" class="hidden"></div>
     </form>
   <% else %>
     <p class="text-sm text-gray-500 dark:text-gray-400 text-center py-4">Connect your wallet to send SOL</p>

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

@@ -3,17 +3,35 @@
 module Solrengine
   module Ui
     class SendTransactionFormComponent < ViewComponent::Base
-      attr_reader :wallet_address, :network, :action_url
+      PUBLIC_RPC_URLS = {
+        "mainnet-beta" => "https://api.mainnet-beta.solana.com",
+        "mainnet"      => "https://api.mainnet-beta.solana.com",
+        "devnet"       => "https://api.devnet.solana.com",
+        "testnet"      => "https://api.testnet.solana.com"
+      }.freeze
-      def initialize(wallet_address: nil, network: "devnet", action_url: "/transfers")
+      CHAIN_IDS = {
+        "mainnet-beta" => "solana:mainnet",
+        "mainnet"      => "solana:mainnet",
+        "devnet"       => "solana:devnet",
+        "testnet"      => "solana:testnet"
+      }.freeze
+      attr_reader :wallet_address, :network, :rpc_url
+      def initialize(wallet_address: nil, network: "devnet", rpc_url: nil, **)
         @wallet_address = wallet_address
-        @network = network
-        @action_url = action_url
+        @network = network.to_s
+        @rpc_url = rpc_url || PUBLIC_RPC_URLS.fetch(@network, PUBLIC_RPC_URLS["devnet"])
       end
       def connected?
         wallet_address.present?
       end
+      def chain
+        CHAIN_IDS.fetch(network, "solana:devnet")
+      end
     end
   end
 end

data/lib/generators/solrengine/ui/install_generator.rb CHANGED Viewed

@@ -56,7 +56,7 @@ module Solrengine
         layout_path = "app/views/layouts/lookbook_preview.html.erb"
         return if File.exist?(layout_path)
-        copy_file "lookbook_preview.html.erb", layout_path
+        template "lookbook_preview.html.erb", layout_path
       end
       def configure_lookbook_preview_layout

data/lib/solrengine/ui/version.rb CHANGED Viewed

@@ -2,6 +2,6 @@
 module Solrengine
   module Ui
-    VERSION = "0.3.0"
+    VERSION = "0.4.0"
   end
 end

metadata CHANGED Viewed

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: solrengine-ui
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - Jose Ferrer
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-04-14 00:00:00.000000000 Z
+date: 2026-04-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component