From cb53674b3190db59214bc49d45019296d494e879 Mon Sep 17 00:00:00 2001 From: cor Date: Thu, 16 Jan 2025 00:38:56 +0000 Subject: [PATCH 1/3] feat(app): show prefilled transfer data --- .../components/Cube/faces/Transfer.svelte | 38 ++++++-------- app/src/lib/components/packet-path.svelte | 8 +-- .../lib/components/transfer-details.svelte | 52 ++++++++++++------- app/src/lib/components/truncate.svelte | 4 +- app/src/lib/stores/submitted-transfers.ts | 18 ++++++- 5 files changed, 74 insertions(+), 46 deletions(-) diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Transfer.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Transfer.svelte index 8530e252fe..d4570dc07a 100644 --- a/app/src/lib/components/TransferFrom/components/Cube/faces/Transfer.svelte +++ b/app/src/lib/components/TransferFrom/components/Cube/faces/Transfer.svelte @@ -384,30 +384,26 @@ const transfer = async () => { if ($transferState.kind === "TRANSFERRING") { await sleep(REDIRECT_DELAY_MS) + + const transfer = $validation.transfer + if (!transfer) { + console.error("submitted invalid transfer. this should never happen") + console.error("submitted invalid transfer. this should never happen. please contact the devs") + goto(`/explorer/transfers/${$transferState.transferHash}`) + return + } + submittedTransfers.update(ts => { - // @ts-ignore ts[$transferState.transferHash] = { - source_chain_id: $validation.transfer?.sourceChain.chain_id, - destination_chain_id: $validation.transfer?.destinationChain?.chain_id, - source_transaction_hash: $transferState.transferHash, - hop_chain_id: $validation.transfer?.destinationChain?.chain_id, - sender: $validation.transfer?.sender, - normalized_sender: - $validation.transfer?.sourceChain?.rpc_type === "cosmos" - ? $userAddrCosmos?.normalized - : $userAddrEvm?.normalized, + _is_submitted_transfer: true, + source_chain_id: transfer.sourceChain.chain_id, + destination_chain_id: transfer.destinationChain.chain_id, + packet_send_transaction_hash: $transferState.transferHash, + sender: transfer.sender, transfer_day: toIsoString(new Date(Date.now())).split("T")[0], - receiver: $validation.transfer?.receiver, - assets: { - [$validation.transfer?.asset.metadata.denom]: { - info: - $validation.transfer?.sourceChain?.assets?.find( - d => d.denom === $validation.transfer?.asset.metadata.denom - ) ?? null, - amount: parsedAmount - } - }, - amount: parsedAmount + receiver: transfer.receiver, + base_token: transfer.asset.metadata.denom, + base_amount: parsedAmount } return ts }) diff --git a/app/src/lib/components/packet-path.svelte b/app/src/lib/components/packet-path.svelte index fe5acb7e88..987ed65147 100644 --- a/app/src/lib/components/packet-path.svelte +++ b/app/src/lib/components/packet-path.svelte @@ -6,11 +6,11 @@ import MoveRightIcon from "virtual:icons/lucide/move-right" export let chains: Array export let packet: { source_chain_id: string - source_connection_id: number - source_channel_id: number + source_connection_id?: number | null + source_channel_id?: number | null destination_chain_id: string - destination_connection_id: number - destination_channel_id: number + destination_connection_id?: number | null + destination_channel_id?: number | null } diff --git a/app/src/lib/components/transfer-details.svelte b/app/src/lib/components/transfer-details.svelte index ed6669411f..e82290e80c 100644 --- a/app/src/lib/components/transfer-details.svelte +++ b/app/src/lib/components/transfer-details.svelte @@ -12,7 +12,7 @@ import { URLS } from "$lib/constants" import * as Card from "$lib/components/ui/card/index.ts" import { toIsoString } from "$lib/utilities/date" import LoadingLogo from "$lib/components/loading-logo.svelte" -import { derived, readable, type Readable } from "svelte/store" +import { derived, get, readable, type Readable } from "svelte/store" import { toDisplayName } from "$lib/utilities/chains.ts" import { raise } from "$lib/utilities" import type { Step } from "$lib/stepper-types.ts" @@ -24,6 +24,7 @@ import { cn } from "$lib/utilities/shadcn" import Truncate from "$lib/components/truncate.svelte" import { formatUnits } from "viem" import PacketPath from "./packet-path.svelte" +import type { UnwrapReadable } from "$lib/utilities/types" const source = $page.params.source export let chains: Array @@ -52,11 +53,9 @@ let processedTransfers = derived( [transfers, submittedTransfers], ([$transfers, $submittedTransfers]) => { if ($transfers.data === undefined || $transfers.data.length === 0) { - // @ts-expect-error if ($submittedTransfers[source] === undefined) { return null } - // @ts-expect-error return [$submittedTransfers[source]] } return $transfers.data.map(transfer => { @@ -78,7 +77,13 @@ let tracesSteps: Readable> | null> = derived( if (!$processedTransfers) return null return $processedTransfers.map(transfer => { - const traces = transfer.traces + let traces: Exclude["data"], undefined>[number]["traces"] = + [] + + if (!("_is_submitted_transfer" in transfer) && Array.isArray(transfer?.traces)) { + traces = transfer.traces + } + const onSourceTrace = (eventType: string) => traces.find(t => t.type === eventType && t.chain?.chain_id === transfer.source_chain_id) const onSource = (eventType: string) => onSourceTrace(eventType) !== undefined @@ -102,7 +107,7 @@ let tracesSteps: Readable> | null> = derived( ?.explorers?.at(0) const sourceChainName = toDisplayName(transfer.source_chain_id, chains) - const hopChainName = toDisplayName(transfer.hop_chain_id, chains) + //const hopChainName = toDisplayName(transfer.hop_chain_id, chains) const destinationChainName = toDisplayName(transfer.destination_chain_id, chains) const traceDetails = (eventType: string, c: "source" | "hop" | "destination") => { @@ -225,6 +230,7 @@ let tracesSteps: Readable> | null> = derived( {@const destinationExplorer = chains .find((c) => c.chain_id === transfer.destination_chain_id) ?.explorers?.at(0)} + {#if transfer.source_chain_id !== null && transfer.destination_chain_id !== null}
@@ -305,7 +320,7 @@ let tracesSteps: Readable> | null> = derived(

> | null> = derived(

> | null> = derived( {#if !(source.slice(0, 2) === "0x")}0x{/if}{source.toLowerCase()} !--> + {/if} {/each} {:else if $transfers.isLoading} diff --git a/app/src/lib/components/truncate.svelte b/app/src/lib/components/truncate.svelte index afee5d1d3f..d9d4a81fd9 100644 --- a/app/src/lib/components/truncate.svelte +++ b/app/src/lib/components/truncate.svelte @@ -2,12 +2,12 @@ import * as Tooltip from "$lib/components/ui/tooltip" import { truncate } from "$lib/utilities/format" -export let value: string +export let value: string | bigint | null export let type: "address" | "hash" | "full" {#if value} -{type === "full" ? value : truncate(value, type === "address" ? 8 : 12)}{value} +{type === "full" ? value : truncate(value.toString(), type === "address" ? 8 : 12)}{value} {:else} INVALID TRUNCATION {/if} diff --git a/app/src/lib/stores/submitted-transfers.ts b/app/src/lib/stores/submitted-transfers.ts index c3c7253b55..9a757bf925 100644 --- a/app/src/lib/stores/submitted-transfers.ts +++ b/app/src/lib/stores/submitted-transfers.ts @@ -1,3 +1,19 @@ import { persisted } from "svelte-persisted-store" -export const submittedTransfers = persisted("submittedTransfers", {}) +export const submittedTransfers = persisted< + Record< + string, + { + // type marker hack + _is_submitted_transfer: true + source_chain_id: string + destination_chain_id: string + packet_send_transaction_hash: string + sender: string + transfer_day: string + receiver: string + base_token: string + base_amount: bigint + } + > +>("submittedTransfers", {}) From 126fc604b37b3b849f592d64d866aa28cfdd7dd6 Mon Sep 17 00:00:00 2001 From: cor Date: Thu, 16 Jan 2025 00:46:20 +0000 Subject: [PATCH 2/3] fix(app): incomplete packet path connection/channel styling --- app/src/lib/components/packet-path.svelte | 77 ++++++++++------------- 1 file changed, 32 insertions(+), 45 deletions(-) diff --git a/app/src/lib/components/packet-path.svelte b/app/src/lib/components/packet-path.svelte index 987ed65147..9b5d978067 100644 --- a/app/src/lib/components/packet-path.svelte +++ b/app/src/lib/components/packet-path.svelte @@ -28,30 +28,23 @@ export let packet: { {packet.source_chain_id} - - - {packet.source_connection_id} - + {#if packet.source_connection_id} + + {packet.source_connection_id} + - - {packet.source_channel_id} - + {#if packet.source_channel_id} + + {packet.source_channel_id} + + {/if} + {/if}

@@ -70,28 +63,22 @@ export let packet: { {packet.destination_chain_id} - - {packet.destination_connection_id} - - - {packet.destination_channel_id} - + {#if packet.destination_connection_id} + + {packet.destination_connection_id} + + {#if packet.destination_channel_id} + + {packet.destination_channel_id} + + {/if} + {/if}
From 60760294254189484de5ddc18b5a933e2441c97c Mon Sep 17 00:00:00 2001 From: cor Date: Thu, 16 Jan 2025 01:02:47 +0000 Subject: [PATCH 3/3] feat(app): cleanup confirm screen --- .../components/Cube/faces/Transfer.svelte | 30 +++++++------------ 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Transfer.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Transfer.svelte index d4570dc07a..aba6a20376 100644 --- a/app/src/lib/components/TransferFrom/components/Cube/faces/Transfer.svelte +++ b/app/src/lib/components/TransferFrom/components/Cube/faces/Transfer.svelte @@ -30,6 +30,7 @@ import { goto } from "$app/navigation" import type { CubeFaces } from "$lib/components/TransferFrom/components/Cube/types.ts" import Stepper from "$lib/components/stepper.svelte" import type { Step } from "$lib/stepper-types.ts" +import Truncate from "$lib/components/truncate.svelte" interface Props { stores: { @@ -47,7 +48,10 @@ let { validation, context } = stores const REDIRECT_DELAY_MS = 5000 let transferState: Writable = writable({ kind: "PRE_TRANSFER" }) +let confirmed = false + const transfer = async () => { + confirmed = true if (!$validation.isValid) return let parsedAmount = parseUnits( @@ -631,35 +635,19 @@ let stepperSteps = derived(
- {#if $validation.isValid} + {#if $validation.isValid && !confirmed}
- RPC_TYPE: - {$validation.transfer.sourceChain.rpc_type} -
-
- SENDER: - {truncateAddress({address: $validation.transfer.sender})} -
-
- SOURCE: {$validation.transfer.sourceChain.display_name} +
- DESTINATION: {$validation.transfer.destinationChain.display_name} +
- ASSET: - {truncate($validation.transfer.asset.metadata.denom, 6)} -
-
- AMOUNT: {$validation.transfer.amount} -
-
- RECEIVER: - {truncateAddress({address: $validation.transfer.receiver})} +
{/if} @@ -679,8 +667,10 @@ let stepperSteps = derived( /> {/if} + {#if !confirmed}
+ {/if}