SolRengine Starter · solrengine-ui v0.4.0
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<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">
  <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">
      <div class="h-8 w-8 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">
        S
      </div>
      <div>
        <div class="font-medium text-gray-900 dark:text-white text-sm">SOL</div>
        <div class="text-xs text-gray-500 dark:text-gray-400">Solana</div>
      </div>
    </div>
    <div class="text-right">
      <div class="font-medium text-gray-900 dark:text-white text-sm">12.500</div>
      <div class="text-xs text-gray-500 dark:text-gray-400">$1,875.00</div>
    </div>
  </div>
  <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">
      <div class="h-8 w-8 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">
        U
      </div>
      <div>
        <div class="font-medium text-gray-900 dark:text-white text-sm">USDC</div>
        <div class="text-xs text-gray-500 dark:text-gray-400">USD Coin</div>
      </div>
    </div>
    <div class="text-right">
      <div class="font-medium text-gray-900 dark:text-white text-sm">500.00</div>
      <div class="text-xs text-gray-500 dark:text-gray-400">$500.00</div>
    </div>
  </div>
  <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">
      <div class="h-8 w-8 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">
        B
      </div>
      <div>
        <div class="font-medium text-gray-900 dark:text-white text-sm">BONK</div>
        <div class="text-xs text-gray-500 dark:text-gray-400">Bonk</div>
      </div>
    </div>
    <div class="text-right">
      <div class="font-medium text-gray-900 dark:text-white text-sm">1,000,000</div>
      <div class="text-xs text-gray-500 dark:text-gray-400">$12.50</div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
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))

No notes provided.

No params configured.