Skip to content

Commit

Permalink
feat(app): show display names in transfer page
Browse files Browse the repository at this point in the history
  • Loading branch information
@cor
cor committed Jun 8, 2024
1 parent 58cafdd commit c875d94
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 84 deletions.
2 changes: 1 addition & 1 deletion app/src/routes/transfer/(components)/chain-button.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export let selectedChainId: string
<div class="flex items-center space-x-1.5 flex-1">
<div class="flex flex-col items-start">
<div class="font-bold text-md mr-auto w-full text-left">
{selectedChainId}
<slot/>
</div>
</div>
</div>
Expand Down
20 changes: 9 additions & 11 deletions app/src/routes/transfer/(components)/chain-dialog.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import type { Writable } from "svelte/store"
export let kind: "from" | "to"
export let dialogOpen = false
export let onChainSelect: (newSelectedChain: string) => void
export let chains: Array<{ chain_id: string }>
export let chains: Array<{ chain_id: string, display_name: string }>
export let selectedChain: string
$: document.body.style.overflow = dialogOpen ? "hidden" : "auto"
Expand Down Expand Up @@ -49,26 +49,24 @@ $: document.body.style.overflow = dialogOpen ? "hidden" : "auto"
/>
</div>
!-->
<ul class="my-3 space-y-1 px-2">
<ul class="flex flex-col">
{#each chains as chain, index}
<li
class={cn(
'pb-2 dark:text-accent-foreground flex flex-col h-full justify-start align-middle space-x-3.5',
'dark:text-accent-foreground flex flex-col',
)}
>
<Button
variant={selectedChain === chain.chain_id ? 'secondary' : 'ghost'}
on:click={() => {onChainSelect(chain.chain_id); dialogOpen = false}}
class={cn('w-full flex justify-start space-x-4 p-2 pl-3 h-[55px] my-auto rounded-sm')}
class={cn('size-full px-4 py-2 w-full rounded-none flex flex-col items-start')}
>
<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"
<div
class="text-lg font-bold"
>
{name}
</span>
<span class="text-xs text-muted-foreground">{chain.chain_id}</span>
</div>
{chain.display_name}
</div>
<div class="text-xs text-muted-foreground">{chain.chain_id}</div>
</Button>
</li>
{/each}
Expand Down
31 changes: 3 additions & 28 deletions app/src/routes/transfer/(components)/recipient-field.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,43 +9,18 @@ import LockOpenIcon from "virtual:icons/lucide/lock-open"
import { Input } from "$lib/components/ui/input/index.ts"
import Button from "$lib/components/ui/button/button.svelte"
import { isValidCosmosAddress, isValidEvmAddress } from "$lib/wallet/utilities/validate.ts"
import type { Writable } from "svelte/store";
const queryParams = queryParameters({
"to-chain-id": {
encode: v => v?.toString(),
decode: (v: string | null) => (typeof v === "string" ? v : null)
},
recipient: {
encode: v => v?.toString(),
decode: (v: string | null) => (typeof v === "string" ? v : null)
}
})
export let recipient: string = $queryParams["recipient"]
$: $queryParams.recipient = recipient
export let recipient: Writable<string>;
let recipientInputState: "locked" | "unlocked" | "invalid" = "unlocked"
const recipientAddressByChainId = (chainId?: string | null) => {
if (!chainId) return ""
if (chainId === "11155111") return $sepoliaStore.address
return $cosmosStore.address
return $cosmosStore.rawAddress
}
onMount(() => {
recipient = recipientAddressByChainId($queryParams["to-chain-id"]) || recipient
})
$: {
if (isValidEvmAddress(recipient) || isValidCosmosAddress(recipient)) {
recipientInputState = "locked"
} else recipientInputState = "unlocked"
}
queryParams.subscribe(newQueryParams => {
recipient = recipientAddressByChainId(newQueryParams["to-chain-id"]) || recipient
})
const onUnlockClick = (_event: MouseEvent) => {
if (recipientInputState === "locked") {
recipient = ""
Expand Down
110 changes: 66 additions & 44 deletions app/src/routes/transfer/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,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"
import { truncate } from "$lib/utilities/format.ts";
export let data: PageData
Expand Down Expand Up @@ -66,18 +66,38 @@ $: if (
})
}
// CURRENT FORM STATE
let fromChainId = writable("union-testnet-8")
let toChainId = writable("11155111")
let recipient = writable("")
let asset = writable("")
let fromChainId = writable("union-testnet-8");
let toChainId = writable("11155111");
let recipient = writable("");
let asset = writable("");
let unionClient: UnionClient
let toChain = derived([chains, toChainId], ([$chains, $toChainId]) => {
if (!$chains.isSuccess) {
return null;
}
return $chains.data.find((chain) => chain.chain_id === $toChainId) ?? null;
});
let fromChain = derived([chains, fromChainId], ([$chains, $fromChainId]) => {
if (!$chains.isSuccess) {
return null;
}
return $chains.data.find((chain) => chain.chain_id === $fromChainId) ?? null;
});
onMount(() => {
fromChainId.subscribe(fromChain => {
asset.set("")
})
fromChainId.subscribe((fromChain) => {
asset.set("");
});
const cosmosOfflineSigner = (
$cosmosStore.connectedWallet === "keplr"
Expand Down Expand Up @@ -106,12 +126,13 @@ onMount(() => {
// rpcUrl: 'https://rpc.testnet.bonlulu.uno',
rpcUrl: "https://union-testnet-rpc.polkachu.com"
})
})
let dialogOpenToken = false
let dialogOpenToChain = false
let dialogOpenFromChain = false
const amountRegex = /[^0-9.]|\.(?=\.)|(?<=\.\d+)\./g
let amount = ""
Expand All @@ -120,43 +141,36 @@ $: {
amount = amount.replaceAll(amountRegex, "")
}
let sendableBalances: null | Readable<
Array<{ balance: bigint; address: string; symbol: string; decimals: number }>
> = null
$: if (
evmBalances &&
cosmosBalances &&
evmBalances !== null &&
cosmosBalances !== null &&
$cosmosChains !== null
) {
sendableBalances = derived(
[fromChainId, evmBalances, cosmosBalances],
([$fromChainId, $evmBalances, $cosmosBalances]) => {
if ($fromChainId === "11155111") {
if (!$evmBalances.isSuccess) {
console.error("trying to send from evm but no balances fetched yet")
return []
}
return $evmBalances.data
}
const chainIndex = $cosmosChains.findIndex(c => c.chain_id === $fromChainId)
const cosmosBalance = $cosmosBalances[chainIndex]
if (!cosmosBalance?.isSuccess || cosmosBalance.data instanceof Error) {
console.error("trying to send from evm but no balances fetched yet")
return []
}
return cosmosBalance.data.map(balance => ({ ...balance, balance: BigInt(balance.balance) }))
}
)
let sendableBalances: null | Readable<Array<{balance: bigint, address: string, symbol: string, decimals: number}>> = null;
$: if (evmBalances && cosmosBalances && evmBalances !== null && cosmosBalances !== null && $cosmosChains !== null) {
sendableBalances = derived([fromChainId, evmBalances, cosmosBalances], ([$fromChainId, $evmBalances, $cosmosBalances]) => {
if ($fromChainId === "11155111") {
if (!$evmBalances.isSuccess) {
console.error('trying to send from evm but no balances fetched yet');
return [];
}
return $evmBalances.data;
}
const chainIndex = $cosmosChains.findIndex(c => c.chain_id === $fromChainId);
const cosmosBalance = $cosmosBalances[chainIndex]
if (!cosmosBalance?.isSuccess || cosmosBalance.data instanceof Error) {
console.error('trying to send from evm but no balances fetched yet');
return [];
}
return cosmosBalance.data.map((balance) => ({ ...balance, balance: BigInt(balance.balance)}))
});
}
function swapChainsClick(_event: MouseEvent) {
const [fromChain, toChain] = [$fromChainId, $toChainId]
toChainId.set(fromChain)
fromChainId.set(toChain)
toChainId.set(fromChain);
fromChainId.set(toChain);
}
let buttonText = "Transfer" satisfies
Expand All @@ -182,7 +196,10 @@ let buttonText = "Transfer" satisfies
<Card.Content>
<div data-transfer-from-section>
<CardSectionHeading>From</CardSectionHeading>
<ChainButton bind:selectedChainId={$fromChainId} bind:dialogOpen={dialogOpenFromChain} />
<ChainButton bind:selectedChainId={$fromChainId} bind:dialogOpen={dialogOpenFromChain} >
{$fromChain?.display_name}
</ChainButton>


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

<CardSectionHeading>To</CardSectionHeading>
<ChainButton bind:selectedChainId={$toChainId} bind:dialogOpen={dialogOpenToChain} />
<ChainButton bind:selectedChainId={$toChainId} bind:dialogOpen={dialogOpenToChain}>
{$toChain?.display_name}
</ChainButton>
</div>
<!-- asset -->
<CardSectionHeading>Asset</CardSectionHeading>
Expand All @@ -218,7 +237,6 @@ let buttonText = "Transfer" satisfies
/>
<CardSectionHeading>Recipient</CardSectionHeading>

<!--<RecipientField recipient={$queryParams.recipient} />!-->
</Card.Content>
<Card.Footer>
<Button
Expand All @@ -228,6 +246,10 @@ let buttonText = "Transfer" satisfies
event.preventDefault()
const assetId = $asset
if (!assetId) return toast.error('Please select an asset')
if (!$fromChainId) return toast.error('Please select a from chain')
if (!$toChainId) return toast.error('Please select a to chain')
if (!amount) return toast.error('Please select an amount')

toast.info(
`Sending transaction from ${$fromChainId} to ${$fromChainId}`,
)
Expand Down

0 comments on commit c875d94

Please sign in to comment.