Skip to content

Commit 7be9b08

Browse files
kenkunzkenkunz
committed
Simplify top vaults table template
- replace MultiValCell with multiVal snippet - move VaultCell inline - remove unneeded :global() wrappers from CSS - simplify / modularize CSS classes
1 parent 1cd2a97 commit 7be9b08

6 files changed

Lines changed: 85 additions & 139 deletions

File tree

‎src/lib/top-vaults/DepositEventsCell.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,13 @@
2828
});
2929
</script>
3030

31-
<div>
31+
<div class="deposit-events-cell">
3232
<span>{number}</span>
3333
<span class="unit">{unit}</span>
3434
</div>
3535

3636
<style>
37-
div {
37+
.deposit-events-cell {
3838
display: inline-flex;
3939
gap: 0.5ex;
4040
}

‎src/lib/top-vaults/FeesCell.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
let { mgmt_fee, perf_fee }: Props = $props();
1111
</script>
1212

13-
<div class="fees">
13+
<div class="fees-cell">
1414
<Tooltip>
1515
<div class="multiline" slot="trigger">
1616
{#if !isNumber(mgmt_fee) && !isNumber(perf_fee)}
@@ -34,7 +34,7 @@
3434
</div>
3535

3636
<style>
37-
.fees {
37+
.fees-cell {
3838
display: contents;
3939
4040
:global(.popup) {

‎src/lib/top-vaults/MultiValCell.svelte‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎src/lib/top-vaults/RiskCell.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
const riskClass = risk?.toLowerCase().replace(/ /g, '-') ?? 'unknown';
1111
</script>
1212

13-
<span class={['risk', riskClass]}>
13+
<span class="risk-cell {riskClass}">
1414
<Tooltip>
1515
<svelte:fragment slot="trigger">
1616
{risk ?? 'Unknown'}
@@ -23,7 +23,7 @@
2323
</span>
2424

2525
<style>
26-
.risk {
26+
.risk-cell {
2727
font: var(--f-ui-xs-medium);
2828
letter-spacing: 0.02em;
2929

‎src/lib/top-vaults/TopVaultsTable.svelte‎

Lines changed: 79 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@
88
import Timestamp from '$lib/components/Timestamp.svelte';
99
import TopVaultsOptIn from './TopVaultsOptIn.svelte';
1010
import ChainCell from './ChainCell.svelte';
11-
import VaultCell from './VaultCell.svelte';
12-
import MultiValCell from './MultiValCell.svelte';
1311
import FeesCell from './FeesCell.svelte';
1412
import DepositEventsCell from './DepositEventsCell.svelte';
1513
import RiskCell from './RiskCell.svelte';
@@ -22,12 +20,19 @@
2220
2321
const { topVaults, chain }: Props = $props();
2422
25-
const formatReturn = (v: number | null) => formatPercent(v, 2);
26-
const formatTvl = (v: number | null) => formatDollar(v, 2);
23+
const formatReturn = (v: MaybeNumber) => formatPercent(v, 2);
24+
const formatTvl = (v: MaybeNumber) => formatDollar(v, 2);
2725
2826
let filterValue = $state('');
2927
</script>
3028

29+
{#snippet multiVal<T = MaybeNumber>(values: [T, T], formatter: Formatter<T>)}
30+
<div class="multiline multival">
31+
<span class="primary">{formatter(values[0])}</span>
32+
<span class="secondary">{formatter(values[1])}</span>
33+
</div>
34+
{/snippet}
35+
3136
<div class="top-vaults">
3237
<TopVaultsOptIn />
3338

@@ -74,42 +79,44 @@
7479
<ChainCell {chain} label={chain?.name ?? `Chain ${vault.chain_id}`} />
7580
</td>
7681
<td class="vault">
77-
<VaultCell name={vault.name} protocol={vault.protocol} />
82+
<div class="multiline">
83+
<strong>{vault.name}</strong>
84+
{#if vault.protocol}
85+
<span class="secondary">{vault.protocol}</span>
86+
{/if}
87+
</div>
7888
</td>
79-
<td class="one_month_return_ann">
80-
<MultiValCell values={[vault.one_month_cagr_net, vault.one_month_cagr]} formatter={formatReturn} />
89+
<td class="one_month_return_ann right">
90+
{@render multiVal([vault.one_month_cagr_net, vault.one_month_cagr], formatReturn)}
8191
</td>
82-
<td class="three_months_return_ann">
83-
<MultiValCell
84-
values={[vault.three_months_cagr_net, vault.three_months_cagr]}
85-
formatter={formatReturn}
86-
/>
92+
<td class="three_months_return_ann right">
93+
{@render multiVal([vault.three_months_cagr_net, vault.three_months_cagr], formatReturn)}
8794
</td>
88-
<td class="lifetime_return_ann">
89-
<MultiValCell values={[vault.cagr_net, vault.cagr]} formatter={formatReturn} />
95+
<td class="lifetime_return_ann right">
96+
{@render multiVal([vault.cagr_net, vault.cagr], formatReturn)}
9097
</td>
91-
<td class="lifetime_return_abs">
92-
<MultiValCell values={[vault.lifetime_return_net, vault.lifetime_return]} formatter={formatReturn} />
98+
<td class="lifetime_return_abs right">
99+
{@render multiVal([vault.lifetime_return_net, vault.lifetime_return], formatReturn)}
93100
</td>
94-
<td class="three_months_sharpe">
101+
<td class="three_months_sharpe right">
95102
{formatNumber(vault.three_months_sharpe, 1)}
96103
</td>
97-
<td class="three_months_volatility">
104+
<td class="three_months_volatility right">
98105
{formatPercent(vault.three_months_volatility, 1)}
99106
</td>
100-
<td class="denomination">
107+
<td class="denomination center">
101108
{formatValue(vault.denomination)}
102109
</td>
103-
<td class="tvl">
104-
<MultiValCell values={[vault.current_nav, vault.peak_nav]} formatter={formatTvl} />
110+
<td class="tvl right">
111+
{@render multiVal([vault.current_nav, vault.peak_nav], formatTvl)}
105112
</td>
106-
<td class="age">
113+
<td class="age right">
107114
{formatNumber(vault.years, 1)}
108115
</td>
109-
<td class="fees">
116+
<td class="fees right">
110117
<FeesCell mgmt_fee={vault.mgmt_fee} perf_fee={vault.perf_fee} />
111118
</td>
112-
<td class="event_count">
119+
<td class="event_count right">
113120
<DepositEventsCell value={vault.event_count} />
114121
</td>
115122
<td class="risk">
@@ -127,8 +134,6 @@
127134
{/each}
128135
</tbody>
129136
</table>
130-
131-
<!-- <DataTable class="top-vaults-table" {tableViewModel} /> -->
132137
</div>
133138
{/if}
134139
</div>
@@ -175,7 +180,7 @@
175180
}
176181
}
177182

178-
:global(.top-vaults-table) {
183+
.top-vaults-table {
179184
position: relative;
180185
width: 100%;
181186
border-collapse: collapse;
@@ -194,11 +199,11 @@
194199
font-size: 14px;
195200
}
196201

197-
:global(:is(td, th)) {
202+
:is(td, th) {
198203
vertical-align: top;
199204
}
200205

201-
:global(th) {
206+
th {
202207
position: sticky;
203208
top: 0px;
204209
z-index: 1;
@@ -214,40 +219,40 @@
214219
text-align: left;
215220
}
216221

217-
:global(th.sorted) {
222+
th.sorted {
218223
padding-right: 1.125rem;
219224

220-
:global(svg) {
225+
svg {
221226
position: absolute;
222227
top: 0.5rem;
223228
right: 0.25rem;
224229
}
225230
}
226231

227232
/* no background on index column */
228-
:global(th.index) {
233+
th.index {
229234
background: var(--c-body);
230235
}
231236

232237
/* custom alignment for chain sort indicator (no header label) */
233-
:global(th.chain.sorted svg) {
238+
th.chain.sorted svg {
234239
right: 0.5rem;
235240
}
236241

237-
:global(td.chain) {
242+
td.chain {
238243
width: 1.875rem;
239244
}
240245

241-
:global(td.vault) {
246+
td.vault {
242247
min-width: 12rem;
243248
}
244249

245250
/* flip the sort indicator on columns that use inverted sort */
246-
:global(:is(th.chain, th.vault, th.denomination, th.fees, th.risk) svg) {
251+
:is(th.chain, th.vault, th.denomination, th.fees, th.risk) svg {
247252
rotate: 180deg;
248253
}
249254

250-
:global(td) {
255+
td {
251256
border-block: 1px solid var(--c-text-ultra-light);
252257
padding: 0.25em 0.5em;
253258

@@ -262,10 +267,18 @@
262267
&:nth-child(odd) {
263268
background-color: var(--c-col-b);
264269
}
270+
271+
&.right {
272+
text-align: right;
273+
}
274+
275+
&.center {
276+
text-align: center;
277+
}
265278
}
266279

267280
/* reverse column colors if chain col is present */
268-
:global(:where(tr:has(.chain)) td) {
281+
:where(tr:has(.chain)) td {
269282
&:nth-child(odd) {
270283
background-color: var(--c-col-a);
271284
}
@@ -275,16 +288,39 @@
275288
}
276289
}
277290

278-
:global(td:has(.tooltip)) {
291+
td:global(:has(.tooltip)) {
279292
position: relative;
280293
}
281294

282295
:global(.multiline) {
283296
display: grid;
284-
gap: 0.125rem;
297+
gap: 0.5rem;
298+
}
299+
300+
:global(.secondary) {
301+
opacity: 0.7;
302+
}
303+
304+
.multival {
305+
> ::before {
306+
content: '(';
307+
}
308+
309+
> ::after {
310+
content: ')';
311+
}
312+
313+
.primary {
314+
font-weight: 600;
315+
316+
&::before,
317+
&::after {
318+
visibility: hidden;
319+
}
320+
}
285321
}
286322

287-
:global(td.index) {
323+
td.index {
288324
text-align: center;
289325
vertical-align: middle;
290326
background-color: var(--c-col-b);
@@ -295,7 +331,7 @@
295331
}
296332
}
297333

298-
:global(td.chain) {
334+
td.chain {
299335
vertical-align: middle;
300336
text-align: center;
301337
padding-right: 0.25rem;
@@ -311,31 +347,10 @@
311347
font: var(--f-ui-xs-roman);
312348
letter-spacing: var(--ls-ui-xs, normal);
313349

314-
:global(a):not(:hover) {
350+
:global(a:not(:hover)) {
315351
text-decoration: none;
316352
}
317353
}
318-
319-
:global(
320-
:is(
321-
td.one_month_return_ann,
322-
td.lifetime_return_abs,
323-
td.lifetime_return_ann,
324-
td.three_months_return_ann,
325-
td.three_months_sharpe,
326-
td.three_months_volatility,
327-
td.tvl,
328-
td.age,
329-
td.fees,
330-
td.event_count
331-
)
332-
) {
333-
text-align: right;
334-
}
335-
336-
:global(td.denomination) {
337-
text-align: center;
338-
}
339354
}
340355
}
341356
</style>

0 commit comments

Comments
 (0)