Skip to content

Commit

Permalink
fix(app): broken chain selector
Browse files Browse the repository at this point in the history
  • Loading branch information
@cor
cor committed Jun 8, 2024
1 parent 35ba347 commit fe4fa28
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 48 deletions.
10 changes: 2 additions & 8 deletions app/src/routes/transfer/(components)/chain-button.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { Button } from "$lib/components/ui/button/index.ts"
import Chevron from "./chevron.svelte"
import type { PageData } from "../$types.ts"
export let selectedChain: PageData["chains"][number] | undefined
export let dialogOpen: boolean
export let selectedChainId: string
</script>

<Button
Expand All @@ -14,16 +14,10 @@ export let dialogOpen: boolean
class="flex flex-row items-center size-full"
>
<div class="flex items-center space-x-1.5 flex-1">
<img
src={selectedChain?.icon}
alt={`${selectedChain?.name} logo`}
class="size-9 invert dark:invert-0"
/>
<div class="flex flex-col items-start">
<div class="font-bold text-md mr-auto w-full text-left">
{selectedChain?.name}
{selectedChainId}
</div>
<div class="text-xs font-mono text-muted-foreground">{selectedChain?.id}</div>
</div>
</div>
<Chevron/>
Expand Down
25 changes: 10 additions & 15 deletions app/src/routes/transfer/(components)/chain-dialog.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,13 @@ import * as Dialog from "$lib/components/ui/dialog"
import { Input } from "$lib/components/ui/input/index.js"
import { Button } from "$lib/components/ui/button/index.js"
import type { LooseAutocomplete } from "$lib/utilities/types.ts"
import type { Writable } from "svelte/store";
export let kind: "from" | "to"
export let dialogOpen = false
export let chainSearchResults: Array<{ name: string; id: string; icon: string; live: boolean }>
export let handleChainSearch: (event: InputEvent) => void
export let handleChainSelect: (name: string, target: "from-chain-id" | "to-chain-id") => void
export let queryParams: LooseAutocomplete<{
"from-chain-id": string
"to-chain-id": string
}>
export let onChainSelect: (newSelectedChain: string) => void
export let chains: Array<{ chain_id: string;}>
export let selectedChain: string;
$: document.body.style.overflow = dialogOpen ? "hidden" : "auto"
</script>
Expand All @@ -37,6 +34,7 @@ $: document.body.style.overflow = dialogOpen ? "hidden" : "auto"
</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
Expand All @@ -50,29 +48,26 @@ $: document.body.style.overflow = dialogOpen ? "hidden" : "auto"
class="w-full bg-current/95 pl-8 self-stretch lowercase focus-visible:ring-0 rounded-none focus-visible:outline-none border-x-0"
/>
</div>
!-->
<ul class="my-3 space-y-1 px-2">
{#each chainSearchResults as { name, id: chainId, icon, live }, index}
{#each chains as chain, index}
<li
class={cn(
live ? 'cursor-pointer' : 'cursor-not-allowed',
'pb-2 dark:text-accent-foreground flex flex-col h-full justify-start align-middle space-x-3.5',
)}
>
<Button
disabled={!live}
variant={queryParams[`${kind}-chain-id`] === chainId ? 'secondary' : 'ghost'}
on:click={() =>
handleChainSelect(chainId, kind === 'from' ? 'from-chain-id' : 'to-chain-id')}
variant={selectedChain === chain.chain_id ? 'secondary' : 'ghost'}
on:click={() => onChainSelect(chain.chain_id)}
class={cn('w-full flex justify-start space-x-4 p-2 pl-3 h-[55px] my-auto rounded-sm')}
>
<img src={icon} alt={`${name} logo`} class="size-10 my-auto mr-auto" />
<div class="size-full mr-auto flex flex-col items-start">
<span
class="my-auto text-[22px] font-extrabold mr-auto w-full text-left justify-between"
>
{name}
</span>
<span class="text-xs text-muted-foreground">{chainId}</span>
<span class="text-xs text-muted-foreground">{chain.chain_id}</span>
</div>
</Button>
</li>
Expand Down
45 changes: 20 additions & 25 deletions app/src/routes/transfer/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,9 @@ import RecipientField from "./(components)/recipient-field.svelte"
import { isValidCosmosAddress } from "$lib/wallet/utilities/validate.ts"
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 { derived } from "svelte/store";
import { chainsQuery } from "$lib/queries/chains.ts";
import AlphaNotice from "$lib/components/alpha-notice.svelte";
export let data: PageData
Expand Down Expand Up @@ -137,10 +138,10 @@ let [chainSearch, chainSearchResults] = ["", chains]
// )
// }
// let selectedFromChain = chains.find(chain => chain.id === $queryParams["from-chain-id"])
// $: selectedFromChain = chains.find(chain => chain.id === $queryParams["from-chain-id"])
// queryParams["from-chain-id"]
// $: selectedFromChkain = chains.find(chain => chain.id === $queryParams["from-chain-id"])
// let selectedToChain = chains.find(chain => chain.id === $queryParams["to-chain-id"])
// queryParams["to-chain-id"]
// $: selectedToChain = chains.find(chain => chain.id === $queryParams["to-chain-id"])
Expand All @@ -165,15 +166,17 @@ $: sepoliaAssets = $evmBalances?.data ?? []
// }
const handleChainSelect = (name: string, target: "from-chain-id" | "to-chain-id") =>
debounce(() => {
{
console.log('chain name', name);
$queryParams[target] = name
;[dialogOpenFromChain, dialogOpenToChain, dialogOpenToken, dialogOpenSettings] = [
false,
false,
false,
false
]
}, 200)()
}
function handleAssetSelect(id: string) {
// $queryParams["asset-id"] = assetSearchResults.find(asset => asset.symbol === id)?.address ?? ""
Expand Down Expand Up @@ -214,6 +217,7 @@ let buttonText = "Transfer" satisfies
<title>Union | Send</title>
</svelte:head>

{#if $chains && $chains.isSuccess }
<main
class="overflow-scroll flex justify-center size-full items-start px-0 sm:px-3 max-h-full sm:py-8"
>
Expand Down Expand Up @@ -242,9 +246,7 @@ let buttonText = "Transfer" satisfies
<Card.Content>
<div data-transfer-from-section>
<CardSectionHeading>From</CardSectionHeading>
<!--
<ChainButton bind:selectedChain={selectedFromChain} bind:dialogOpen={dialogOpenFromChain} />
!-->
<ChainButton bind:selectedChainId={$queryParams["from-chain-id"]} bind:dialogOpen={dialogOpenFromChain} />

<div class="flex flex-col items-center pt-4">
<Button size="icon" variant="outline" on:click={swapChainsClick}>
Expand All @@ -253,9 +255,7 @@ let buttonText = "Transfer" satisfies
</div>

<CardSectionHeading>To</CardSectionHeading>
<!--
<ChainButton bind:selectedChain={selectedToChain} bind:dialogOpen={dialogOpenToChain} />
!-->
<ChainButton bind:selectedChainId={$queryParams["to-chain-id"]} bind:dialogOpen={dialogOpenToChain} />
</div>
<!-- asset -->
<CardSectionHeading>Asset</CardSectionHeading>
Expand Down Expand Up @@ -367,28 +367,22 @@ let buttonText = "Transfer" satisfies
!-->

<!-- from-dialog -->
<!--
<ChainDialog
kind="from"
{handleChainSearch}
{handleChainSelect}
{chainSearchResults}
queryParams={$queryParams}
chains={$chains.data}
selectedChain={$queryParams["from-chain-id"]}
onChainSelect={(newSelectedChain) => {$queryParams["from-chain-id"] = newSelectedChain}}
bind:dialogOpen={dialogOpenFromChain}
/>
!-->

<!-- to-dialog -->
<!--
<ChainDialog
kind="to"
{handleChainSearch}
{handleChainSelect}
{chainSearchResults}
queryParams={$queryParams}
chains={$chains.data}
selectedChain={$queryParams["to-chain-id"]}
onChainSelect={(newSelectedChain) => {$queryParams["to-chain-id"] = newSelectedChain}}
bind:dialogOpen={dialogOpenToChain}
/>
!-->

<!-- token dialog -->
<!--
Expand All @@ -399,3 +393,4 @@ let buttonText = "Transfer" satisfies
bind:dialogOpen={dialogOpenToken}
/>
!-->
{/if}

0 comments on commit fe4fa28

Please sign in to comment.