Skip to content

Commit 36641e0

Browse files
SwepoolSwepool
committed
fix(app2): asset selection fixes
1 parent 8058cf4 commit 36641e0

File tree

4 files changed

+86
-69
lines changed

4 files changed

+86
-69
lines changed

‎app2/src/lib/components/Transfer/ChainAsset/AssetSelector.svelte

+43-43
Original file line numberDiff line numberDiff line change
@@ -66,51 +66,51 @@ function selectAsset(token: Token) {
6666
}
6767
</script>
6868

69-
<div class="border-t border-zinc-700">
70-
<div class="p-4 sticky top-0 z-10 border-b border-zinc-700">
71-
<!-- Search Bar -->
72-
<Input
73-
type="text"
74-
placeholder="Search assets..."
75-
disabled={!Option.isSome(transfer.sourceChain)}
76-
value={searchQuery}
77-
oninput={(e) => (searchQuery = (e.currentTarget as HTMLInputElement).value)}
78-
/>
79-
</div>
69+
<div class="p-4 border-y border-zinc-700">
70+
<!-- Search Bar -->
71+
<Input
72+
type="text"
73+
placeholder="Search assets..."
74+
disabled={!Option.isSome(transfer.sourceChain)}
75+
value={searchQuery}
76+
oninput={(e) => (searchQuery = (e.currentTarget as HTMLInputElement).value)}
77+
/>
78+
</div>
8079

81-
<div class="overflow-y-auto max-h-full">
82-
{#if Option.isNone(transfer.sourceChain)}
83-
<div class="flex items-center justify-center text-zinc-500 p-8">
84-
Please select a source chain first
85-
</div>
86-
{:else if Option.isNone(transfer.baseTokens)}
87-
<div>
88-
{#each Array(5) as _, i}
89-
<div class="flex items-center w-full px-4 py-2 border-b border-zinc-700">
90-
<div class="flex-1 min-w-0">
91-
<div class="mb-1">
92-
<Skeleton class="h-4 w-24" randomWidth={true}/>
80+
<div class="overflow-y-scroll mb-12">
81+
<div class="w-full h-full">
82+
{#if Option.isNone(transfer.sourceChain)}
83+
<div class="flex items-center justify-center text-zinc-500 p-8">
84+
Please select a source chain first
85+
</div>
86+
{:else if Option.isNone(transfer.baseTokens)}
87+
<div>
88+
{#each Array(5) as _, i}
89+
<div class="flex items-center w-full px-4 py-2 border-b border-zinc-700">
90+
<div class="flex-1 min-w-0">
91+
<div class="mb-1">
92+
<Skeleton class="h-4 w-24" randomWidth={true}/>
93+
</div>
94+
<Skeleton class="h-3 w-32" randomWidth={true}/>
95+
</div>
96+
<div class="ml-2">
97+
<Skeleton class="h-4 w-4"/>
9398
</div>
94-
<Skeleton class="h-3 w-32" randomWidth={true}/>
95-
</div>
96-
<div class="ml-2">
97-
<Skeleton class="h-4 w-4"/>
9899
</div>
99-
</div>
100-
{/each}
101-
</div>
102-
{:else if filteredTokens.length === 0}
103-
<div class="flex items-center justify-center text-zinc-500 p-8">
104-
{searchQuery ? `No assets found matching "${searchQuery}"` : "No tokens found for this chain"}
105-
</div>
106-
{:else}
107-
<div>
108-
{#each filteredTokens as token}
109-
{#key token.denom}
110-
<TransferAsset {token} {selectAsset} />
111-
{/key}
112-
{/each}
113-
</div>
114-
{/if}
100+
{/each}
101+
</div>
102+
{:else if filteredTokens.length === 0}
103+
<div class="flex items-center justify-center text-zinc-500 p-8">
104+
{searchQuery ? `No assets found matching "${searchQuery}"` : "No tokens found for this chain"}
105+
</div>
106+
{:else}
107+
<div>
108+
{#each filteredTokens as token}
109+
{#key token.denom}
110+
<TransferAsset {token} {selectAsset} />
111+
{/key}
112+
{/each}
113+
</div>
114+
{/if}
115115
</div>
116116
</div>

‎app2/src/lib/components/Transfer/ChainAsset/TransferAsset.svelte

+40-24
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import type { Token } from "$lib/schema/token.ts"
55
import { Option } from "effect"
66
import Skeleton from "$lib/components/ui/Skeleton.svelte"
77
import { formatUnits } from "viem"
8+
import type { Chain } from "$lib/schema/chain.ts"
9+
import { chains } from "$lib/stores/chains.svelte.ts"
10+
import SharpArrowLeft from "$lib/components/icons/SharpArrowLeft.svelte"
811
912
type Props = {
1013
token: Token
@@ -35,38 +38,51 @@ let displayAmount = $derived.by(() => {
3538
})
3639
3740
let isLoading = $derived(Option.isSome(transfer.sortedBalances) && Option.isNone(tokenBalance))
41+
$effect(() => {
42+
console.log(token)
43+
})
44+
45+
export const toDisplayName = (
46+
chain_id: string | undefined | null,
47+
chains: ReadonlyArray<Chain>
48+
): string => chains.find(c => c.chain_id === chain_id)?.display_name ?? chain_id ?? "unknown chain"
3849
</script>
3950

4051
<button
4152
class={cn(
42-
"flex items-center w-full px-4 py-2 text-left hover:bg-zinc-700 transition-colors border-b border-zinc-700 cursor-pointer",
53+
"flex flex-col items-start w-full overflow-x-scroll px-4 py-2 text-left hover:bg-zinc-700 transition-colors border-b border-zinc-700 cursor-pointer",
4354
isSelected ? "bg-zinc-700 text-white" : "text-zinc-300"
4455
)}
45-
onclick={() => selectAsset(token)}
56+
onclick={() => {
57+
console.log(token)
58+
selectAsset(token)
59+
}}
4660
>
47-
<div class="flex-1 min-w-0">
48-
<div class="font-medium text-sm truncate">
49-
{token.representations[0]?.name ?? token.denom}
50-
</div>
51-
{#if token.representations[0]?.name}
52-
<div class="text-xs text-zinc-400 truncate w-24 truncate">
53-
{token.denom}
61+
<div class="flex items-center flex gap-1 items-center overflow-x-scroll text-xs text-zinc-200">
62+
<div class="mr-1">
63+
{#if isLoading}
64+
<Skeleton class="h-3 w-16"/>
65+
{:else if Option.isSome(tokenBalance) && Option.isSome(tokenBalance.value.error)}
66+
<span class="text-red-400">Error</span>
67+
{:else}
68+
{displayAmount}
69+
{/if}
5470
</div>
55-
{/if}
56-
</div>
57-
<div class="ml-2 text-right flex items-center">
58-
<div class="text-xs text-zinc-400 mr-2">
59-
{#if isLoading}
60-
<Skeleton class="h-3 w-16"/>
61-
{:else if Option.isSome(tokenBalance) && Option.isSome(tokenBalance.value.error)}
62-
<span class="text-red-400">Error</span>
63-
{:else}
64-
{displayAmount}
71+
<div class="font-medium">
72+
{token.representations[0]?.symbol ?? token.denom}
73+
</div>
74+
</div>
75+
<div class="text-zinc-400 text-nowrap text-xs flex items-center gap-1">
76+
{#if Option.isSome(chains.data)}
77+
{#each token.wrapping as wrapping, i}
78+
{#if i !== 0}
79+
<SharpArrowLeft class="text-sky-300"/>
80+
{/if}
81+
{toDisplayName(
82+
wrapping.unwrapped_chain.universal_chain_id,
83+
chains.data.value,
84+
)}
85+
{/each}
6586
{/if}
6687
</div>
67-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
68-
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
69-
<polyline points="9 18 15 12 9 6"></polyline>
70-
</svg>
71-
</div>
7288
</button>

‎app2/src/lib/components/Transfer/ChainAsset/index.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function onAssetSelected() {
3131
<div class="absolute inset-0 bg-zinc-900 z-40 flex" transition:fade={{ duration: 300 }}>
3232
<div class="w-full h-auto max-h-full flex flex-col overflow-hidden" transition:fly={{ y: 30, duration: 300, opacity: 0 }}>
3333
<!-- Header with close button -->
34-
<div class="p-4 border-b border-zinc-700 flex justify-between items-center">
34+
<div class="p-4 border-b border-zinc-700 flex justify-between items-center h-12">
3535
<h3 class="text-sm font-medium text-zinc-400">Select {type.charAt(0).toUpperCase() + type.slice(1)}</h3>
3636
<button
3737
class="text-zinc-400 hover:text-white"
@@ -46,7 +46,7 @@ function onAssetSelected() {
4646
</div>
4747

4848
<!-- Modal Content with proper scrolling -->
49-
<div class="flex-1 flex flex-col overflow-hidden">
49+
<div class="flex flex-col h-full">
5050
<!-- Chains Section -->
5151
<ChainSelector {type} onSelect={onChainSelected} />
5252

‎app2/src/lib/components/icons/SharpArrowLeft.svelte

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...$$props}><!-- Icon from Google Material Icons by Material Design Authors - https://github.com/material-icons/material-icons/blob/master/LICENSE --><path fill="currentColor" d="m14 7l-5 5l5 5z"/></svg>

0 commit comments

Comments
 (0)