Skip to content

Commit

Permalink
fix(app): asset selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@cor
cor committed Jun 8, 2024
1 parent bea4986 commit ca6fb64
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 58 deletions.
34 changes: 8 additions & 26 deletions app/src/routes/transfer/(components)/assets-dialog.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,16 @@ import * as Dialog from "$lib/components/ui/dialog"
import type { Asset } from "$lib/constants/assets.js"
import { Input } from "$lib/components/ui/input/index.js"
import { Button } from "$lib/components/ui/button/index.js"
import { truncate } from "svelte-ux"
import { truncate } from "$lib/utilities/format"
export let dialogOpen = false
export let assetSearchResults: Array<{
export let assets: Array<{
address: string
balance: string
decimals: number
symbol: string
}>
export let handleAssetSelect: (asset: string) => void
export let handleAssetSearch: (event: InputEvent) => void
export let onAssetSelect: (asset: string) => void
</script>

<Dialog.Root
Expand All @@ -31,21 +30,8 @@ export let handleAssetSearch: (event: InputEvent) => void
<Dialog.Title class="font-extrabold text-2xl pl-3 -mt-2">Select a token</Dialog.Title>
</Dialog.Header>
<Dialog.Description class="size-full">
<div class="relative mr-auto flex-1 w-full">
<Search class="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
<Input
type="search"
pattern="[a-z]"
autocorrect="off"
spellcheck="false"
placeholder="OSMO…"
autocapitalize="off"
on:input={handleAssetSearch}
class="w-full rounded-none bg-current/95 pl-8 self-stretch lowercase border-x-0 focus-visible:ring-0"
/>
</div>
<ul class="my-3 mx-2 space-y-1">
{#each assetSearchResults as { address, symbol, decimals, balance }, index}
{#each assets as { address, symbol, decimals, balance }, index}
<li
class={cn(
'pb-2 dark:text-accent-foreground flex flex-col h-full justify-start align-middle space-x-3.5',
Expand All @@ -54,16 +40,12 @@ export let handleAssetSearch: (event: InputEvent) => void
<Button
variant="ghost"
class={cn(
'w-full flex justify-start space-x-4 p-2 rounded-none pl-3 h-[55px] my-auto',
'w-full flex justify-start space-x-4 p-2 rounded-none pl-3',
)}
on:click={() => handleAssetSelect(symbol)}
on:click={() => {onAssetSelect(symbol); dialogOpen = false }}
>
<div class="size-full mr-auto flex flex-col items-start">
<span
class="my-auto text-md font-extrabold mr-auto w-full text-left justify-between text-foreground"
>
{symbol}
</span>
<div class="size-full flex flex-col items-start">
{truncate(symbol, 12)}
</div>
<p class="mb-auto text-lg font-black">{balance}</p>
</Button>
Expand Down
46 changes: 14 additions & 32 deletions app/src/routes/transfer/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import CardSectionHeading from "./(components)/card-section-heading.svelte"
import { cosmosBalancesQuery, evmBalancesQuery } from "$lib/queries/balance"
import { derived } from "svelte/store"
import { chainsQuery } from "$lib/queries/chains.ts"
import { truncate } from "$lib/utilities/format.ts";
export let data: PageData
Expand Down Expand Up @@ -82,7 +83,7 @@ const queryParams = queryParameters(
defaultValue: "11155111"
},
recipient: { encode: v => v?.toString(), decode: v => v, defaultValue: "" },
"asset-id": { encode: v => v?.toString(), decode: v => v, defaultValue: "" }
"asset": { encode: v => v?.toString(), decode: v => v, defaultValue: "" }
},
{ debounceHistory: 500, showDefaults: true, sort: false }
)
Expand Down Expand Up @@ -121,12 +122,6 @@ onMount(() => {
let dialogOpenToken = false
let dialogOpenToChain = false
let dialogOpenFromChain = false
function handleAssetSelect(id: string) {
// $queryParams["asset-id"] = assetSearchResults.find(asset => asset.symbol === id)?.address ?? ""
// dialogOpenToken = false
}
const amountRegex = /[^0-9.]|\.(?=\.)|(?<=\.\d+)\./g
Expand All @@ -140,7 +135,7 @@ $: {
let sendableBalances: null | Readable<Array<{balance: bigint, address: string, symbol: string, decimals: number}>> = null;
$: if (evmBalances !== null && cosmosBalances !== null && $cosmosChains !== null) {
$: if (queryParams && evmBalances && cosmosBalances && evmBalances !== null && cosmosBalances !== null && $cosmosChains !== null) {
sendableBalances = derived([queryParams, evmBalances, cosmosBalances], ([$queryParams, $evmBalances, $cosmosBalances]) => {
const fromChain = $queryParams["from-chain-id"];
if (fromChain === "11155111") {
Expand All @@ -167,13 +162,6 @@ function swapChainsClick(_event: MouseEvent) {
const [fromChain, toChain] = [$queryParams["from-chain-id"], $queryParams["to-chain-id"]]
$queryParams["from-chain-id"] = toChain
$queryParams["to-chain-id"] = fromChain
// selectedFromChain = data.chains.find(
// chain => chain.name.toLowerCase() === $queryParams["from-chain-id"].toLowerCase()
// )
// selectedToChain = data.chains.find(
// chain => chain.name.toLowerCase() === $queryParams["to-chain-id"].toLowerCase()
// )
}
let buttonText = "Transfer" satisfies
Expand Down Expand Up @@ -215,14 +203,9 @@ let buttonText = "Transfer" satisfies
{#if sendableBalances !== null}
<div>{JSON.stringify($sendableBalances)}</div>
{/if}
<Button variant="outline" on:click={() => (dialogOpenToken = !dialogOpenToken)}>
<Button class="size-full" variant="outline" on:click={() => (dialogOpenToken = !dialogOpenToken)}>
<div class="flex-1 text-left">{truncate($queryParams['asset'], 12)}</div>

<!--
<div class="text-2xl font-bold flex-1 text-left">
{assetSearchResults.find(i => i.address === $queryParams['asset-id'])?.symbol ||
'Select an asset'}
</div>
!-->
<Chevron />
</Button>

Expand All @@ -248,7 +231,7 @@ let buttonText = "Transfer" satisfies
disabled={false}
on:click={async event => {
event.preventDefault()
const assetId = $queryParams['asset-id']
const assetId = $queryParams['asset']
if (!assetId) return toast.error('Please select an asset')
toast.info(
`Sending transaction from ${$queryParams['from-chain-id']} to ${$queryParams['to-chain-id']}`,
Expand Down Expand Up @@ -331,13 +314,12 @@ let buttonText = "Transfer" satisfies
bind:dialogOpen={dialogOpenToChain}
/>

<!-- token dialog -->
<!--
<AssetsDialog
{handleAssetSearch}
{handleAssetSelect}
{assetSearchResults}
bind:dialogOpen={dialogOpenToken}
/>
!-->
<!-- token dialog -->
{#if $sendableBalances}
<AssetsDialog
assets={$sendableBalances}
onAssetSelect={(newSelectedAsset) => {$queryParams["asset"] = newSelectedAsset}}
bind:dialogOpen={dialogOpenToken}
/>
{/if}
{/if}

0 comments on commit ca6fb64

Please sign in to comment.