Prefill transfers and clean up transfer submission flow (#3524)

- **feat(app): show prefilled transfer data** - **fix(app): incomplete packet path connection/channel styling** - **feat(app): cleanup confirm screen**
unionlabs · Jan 16, 2025 · 5f9b75e · 5f9b75e
2 parents 6205307 + 6076029
commit 5f9b75e
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 111 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
@@ -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<TransferState> = writable({ kind: "PRE_TRANSFER" })
 
+let confirmed = false
+
 const transfer = async () => {
+  confirmed = true
   if (!$validation.isValid) return
 
   let parsedAmount = parseUnits(
@@ -384,30 +388,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
     })
@@ -635,35 +635,19 @@ let stepperSteps = derived(
 </script>
 
 <div class="h-full w-full flex flex-col justify-between p-4 overflow-y-scroll">
-  {#if $validation.isValid}
+  {#if $validation.isValid && !confirmed}
     <div>
       <div class="flex justify-between">
-        <span>RPC_TYPE:</span>
-        <span>{$validation.transfer.sourceChain.rpc_type}</span>
-      </div>
-      <div class="flex justify-between">
-        <span>SENDER:</span>
-        <span>{truncateAddress({address: $validation.transfer.sender})}</span>
-      </div>
-      <div class="flex justify-between">
-        <span>SOURCE:</span>
         <span>{$validation.transfer.sourceChain.display_name}</span>
+        <Truncate value={$validation.transfer.sender} type="address"/>
       </div>
       <div class="flex justify-between">
-        <span>DESTINATION:</span>
         <span>{$validation.transfer.destinationChain.display_name}</span>
+        <Truncate value={$validation.transfer.receiver} type="address"/>
       </div>
       <div class="flex justify-between">
-        <span>ASSET:</span>
-        <span>{truncate($validation.transfer.asset.metadata.denom, 6)}</span>
-      </div>
-      <div class="flex justify-between">
-        <span>AMOUNT:</span>
         <span>{$validation.transfer.amount}</span>
-      </div>
-      <div class="flex justify-between">
-        <span>RECEIVER:</span>
-        <span>{truncateAddress({address: $validation.transfer.receiver})}</span>
+        <Truncate value={$validation.transfer.asset.metadata.denom} type="address"/>
       </div>
     </div>
   {/if}
@@ -683,8 +667,10 @@ let stepperSteps = derived(
     />
   {/if}
 
+  {#if !confirmed}
   <div class="flex flex-col gap-2">
     <Button on:click={transfer}>Confirm</Button>
     <Button variant="outline" on:click={() => rotateTo("intentFace")}>CANCEL</Button>
   </div>
+  {/if}
 </div>
diff --git 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<Chain>
 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
 }
 </script>
 
@@ -28,30 +28,23 @@ export let packet: {
 
       {packet.source_chain_id}
     </a>
-
-    <a
-      href={`/explorer/packets/${packet.source_chain_id}/${packet.source_connection_id}`}
-      class={cn(
-        "px-2 black text-sm underline",
-        packet.source_connection_id
-          ? "text-muted-foreground"
-          : "text-transparent"
-      )}
-    >
-      {packet.source_connection_id}
-    </a>
+    {#if packet.source_connection_id}
+      <a
+        href={`/explorer/packets/${packet.source_chain_id}/${packet.source_connection_id}`}
+        class="px-2 black text-sm underline text-muted-foreground"
+      >
+        {packet.source_connection_id}
+      </a>
 
-    <a
-      href={`/explorer/packets/${packet.source_chain_id}/${packet.source_connection_id}/${packet.source_channel_id}`}
-      class={cn(
-        "pl-2 text-sm block underline",
-        packet.source_channel_id
-          ? "text-muted-foreground"
-          : "text-transparent"
-      )}
-    >
-      {packet.source_channel_id}
-    </a>
+      {#if packet.source_channel_id}
+        <a
+          href={`/explorer/packets/${packet.source_chain_id}/${packet.source_connection_id}/${packet.source_channel_id}`}
+          class="pl-2 text-sm block underline text-muted-foreground"
+        >
+          {packet.source_channel_id}
+        </a>
+      {/if}
+    {/if}
     </div>
   </div>
   <div class="flex items-center justify-center px-8">
@@ -70,28 +63,22 @@ export let packet: {
 
       {packet.destination_chain_id}
     </a>
-    <a
-      href={`/explorer/packets/${packet.destination_chain_id}/${packet.destination_connection_id}`}
-      class={cn(
-        "px-2 text-sm block underline",
-        packet.destination_connection_id
-          ? "text-muted-foreground"
-          : "text-transparent"
-      )}
-    >
-      {packet.destination_connection_id}
-    </a>
-    <a
-      href={`/explorer/packets/${packet.destination_chain_id}/${packet.destination_connection_id}/${packet.destination_channel_id}`}
-      class={cn(
-        "pl-2 text-sm block underline",
-        packet.destination_channel_id
-          ? "text-muted-foreground"
-          : "text-transparent"
-      )}
-    >
-      {packet.destination_channel_id}
-    </a>
+    {#if packet.destination_connection_id}
+      <a
+        href={`/explorer/packets/${packet.destination_chain_id}/${packet.destination_connection_id}`}
+        class="px-2 text-sm block underline text-muted-foreground"
+      >
+        {packet.destination_connection_id}
+      </a>
+      {#if packet.destination_channel_id}
+        <a
+          href={`/explorer/packets/${packet.destination_chain_id}/${packet.destination_connection_id}/${packet.destination_channel_id}`}
+          class="pl-2 text-sm block underline text-muted-foreground"
+        >
+        {packet.destination_channel_id}
+      </a>
+      {/if}
+    {/if}
     </div>
   </div>
 </section>
diff --git 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<Chain>
@@ -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<Array<Array<Step>> | null> = derived(
     if (!$processedTransfers) return null
 
     return $processedTransfers.map(transfer => {
-      const traces = transfer.traces
+      let traces: Exclude<UnwrapReadable<typeof transfers>["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<Array<Array<Step>> | 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<Array<Array<Step>> | 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}
 
       <!--
     <pre>{JSON.stringify($transfers.data, null, 2)}</pre>
@@ -245,31 +251,38 @@ let tracesSteps: Readable<Array<Array<Step>> | null> = derived(
           <section class="flex justify-between">
             <div>
             <h2 class="font-supermolot uppercase md:font-expanded text-2xl font-extrabold text-foreground whitespace-nowrap">
+              {#if transfer.base_amount}
+              {@const base_amount = BigInt(transfer.base_amount)}
+                <Truncate
+                  value={("base_token_details" in transfer && transfer.base_token_details?.decimals) ? formatUnits(base_amount, transfer.base_token_details.decimals) : base_amount}
+                  type="full"
+                />
+              {/if}
               <Truncate
-                value={transfer.base_token_details ? formatUnits(transfer.base_amount, transfer.base_token_details.decimals) : transfer.base_amount}
-                type="full"
-              />
-              <Truncate
-                value={(transfer.base_token_details && transfer.base_token_details.display_symbol) ? transfer.base_token_details.display_symbol : transfer.base_token}
+                value={("base_token_details" in transfer && transfer.base_token_details?.display_symbol) ? transfer.base_token_details.display_symbol : transfer.base_token}
                 type="address"
               />
             </h2>
             <p class="text-muted-foreground text-sm break-words">
             <Truncate
               value={transfer.base_token}
               type="address"
-            /> | {#if transfer.base_token_details}{transfer.base_token_details?.origin}{:else}NO DETAILS{/if}
+            /> | {#if "base_token_details" in transfer && transfer.base_token_details}{transfer.base_token_details?.origin}{:else}NO DETAILS{/if}
             </p>
 
             </div>
 
 
             <div class="flex flex-col items-end">
+            {#if "quote_token" in transfer}
             <h2 class="font-supermolot uppercase md:font-expanded text-2xl font-extrabold text-foreground whitespace-nowrap">
-            <Truncate
-              value={transfer.quote_token_details ? formatUnits(transfer.quote_amount, transfer.quote_token_details.decimals) : transfer.quote_amount}
-              type="full"
-            />
+              {#if "quote_amount" in transfer && transfer.quote_amount}
+              {@const quote_amount = BigInt(transfer.quote_amount)}
+                <Truncate
+                  value={("quote_token_details" in transfer && transfer.quote_token_details?.decimals) ? formatUnits(quote_amount, transfer.quote_token_details.decimals) : quote_amount}
+                  type="full"
+                />
+              {/if}
             <Truncate
                 value={(transfer.quote_token_details && transfer.quote_token_details.display_symbol) ? transfer.quote_token_details.display_symbol : transfer.quote_token}
               type="address"
@@ -279,14 +292,16 @@ let tracesSteps: Readable<Array<Array<Step>> | null> = derived(
             <Truncate
               value={transfer.quote_token}
               type="address"
-            /> | {#if transfer.quote_token_details}{transfer.quote_token_details?.origin}{:else}NO DETAILS{/if}
+            /> | {#if  "quote_token_details" in transfer && "quote_token_details" in transfer && transfer.quote_token_details}{transfer.quote_token_details?.origin}{:else}NO DETAILS{/if}
 
             </p>
+            {/if}
             </div>
 
           </section>
 
           <section>
+            <!-- typescript is stupid here, as source_chain_id and destination_chain_id have already established not to be null. !-->
             <PacketPath packet={transfer} {chains}/>
           </section>
           <section class="flex flex-col lg:flex-row gap-8">
@@ -305,7 +320,7 @@ let tracesSteps: Readable<Array<Array<Step>> | null> = derived(
               <p
                 class={cn(
                   "text-[10px] break-words",
-                  transfer.normalized_sender
+                  "normalized_sender" in transfer && transfer.normalized_sender
                     ? "text-black dark:text-muted-foreground"
                     : "text-transparent"
                 )}
@@ -327,7 +342,7 @@ let tracesSteps: Readable<Array<Array<Step>> | null> = derived(
               <p
                 class={cn(
                   "text-[10px] break-words",
-                  transfer.normalized_receiver
+                  "normalized_receiver" in transfer && transfer.normalized_receiver
                     ? "text-black dark:text-muted-foreground"
                     : "text-transparent"
                 )}
@@ -356,6 +371,7 @@ let tracesSteps: Readable<Array<Array<Step>> | null> = derived(
         {#if !(source.slice(0, 2) === "0x")}0x{/if}{source.toLowerCase()}
       </div>
       !-->
+      {/if}
     {/each}
   </div>
 {:else if $transfers.isLoading}

diff --git 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"
 </script>
 
 {#if value}
-<Tooltip.Root><Tooltip.Trigger {...$$restProps}>{type === "full" ? value : truncate(value, type === "address" ? 8 : 12)}</Tooltip.Trigger><Tooltip.Content>{value}</Tooltip.Content></Tooltip.Root>
+<Tooltip.Root><Tooltip.Trigger {...$$restProps}>{type === "full" ? value : truncate(value.toString(), type === "address" ? 8 : 12)}</Tooltip.Trigger><Tooltip.Content>{value}</Tooltip.Content></Tooltip.Root>
 {:else}
 INVALID TRUNCATION
 {/if}