From 7c9b6d886a17f29eba8fac3b7f1f0cc0cdcd2c47 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Thu, 2 Jan 2025 22:40:08 +0100
Subject: [PATCH] chore(app): pre commit

---
 .../components/ChainDialog.svelte             |  28 ++---
 .../components/Cube/FaceWrapper.svelte        |  10 +-
 .../components/Cube/faces/Assets.svelte       |  49 ++++----
 .../components/Cube/faces/Chains.svelte       |  50 ++++----
 .../components/Cube/faces/Intent.svelte       |  36 +++---
 .../components/Cube/faces/Transfer.svelte     |  32 ++---
 .../TransferFrom/components/Cube/index.svelte | 119 ++++++++++--------
 .../components/DebugBox/index.svelte          |  36 +++---
 .../TransferFrom/components/Direction.svelte  |  28 ++---
 .../components/SelectedAsset.svelte           |  24 ++--
 .../lib/components/TransferFrom/index.svelte  |  26 ++--
 .../TransferFrom/transfer/context.ts          |   4 +-
 .../components/TransferFrom/transfer/index.ts |  14 ++-
 .../TransferFrom/transfer/intents.ts          |   2 +-
 .../TransferFrom/transfer/validation.ts       |  69 +++++-----
 app/src/lib/components/TransferFrom/types.ts  |  12 +-
 app/src/lib/queries/balance/index.ts          |   6 +-
 17 files changed, 282 insertions(+), 263 deletions(-)

diff --git a/app/src/lib/components/TransferFrom/components/ChainDialog.svelte b/app/src/lib/components/TransferFrom/components/ChainDialog.svelte
index 3cabf2c08c..366c35d37b 100644
--- a/app/src/lib/components/TransferFrom/components/ChainDialog.svelte
+++ b/app/src/lib/components/TransferFrom/components/ChainDialog.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-  import type {Readable} from "svelte/store";
-  import type {ContextStore} from "$lib/components/TransferFrom/transfer/context.ts";
+import type { Readable } from "svelte/store"
+import type { ContextStore } from "$lib/components/TransferFrom/transfer/context.ts"
 
-  interface Props {
-    context: Readable<ContextStore>
-    kind: "source" | "destination"
-    dialogOpen: boolean
-    onChainSelect: (type: 'source' | 'destination', chain: string) => void
-    onClose: () => void
-  }
+interface Props {
+  context: Readable<ContextStore>
+  kind: "source" | "destination"
+  dialogOpen: boolean
+  onChainSelect: (type: "source" | "destination", chain: string) => void
+  onClose: () => void
+}
 
-  export let context: Props["context"]
-  export let kind: Props["kind"]
-  export let dialogOpen: Props["dialogOpen"]
-  export let onChainSelect: Props["onChainSelect"]
-  export let onClose: Props["onClose"]
+export let context: Props["context"]
+export let kind: Props["kind"]
+export let dialogOpen: Props["dialogOpen"]
+export let onChainSelect: Props["onChainSelect"]
+export let onClose: Props["onClose"]
 </script>
 
 {#if dialogOpen && $context?.chains}
diff --git a/app/src/lib/components/TransferFrom/components/Cube/FaceWrapper.svelte b/app/src/lib/components/TransferFrom/components/Cube/FaceWrapper.svelte
index 531d6b86f9..93e983774e 100644
--- a/app/src/lib/components/TransferFrom/components/Cube/FaceWrapper.svelte
+++ b/app/src/lib/components/TransferFrom/components/Cube/FaceWrapper.svelte
@@ -1,9 +1,9 @@
 <script>
-  export let visible = true;
-  export let width = 0; // Pixel value
-  export let height = 0; // Pixel value
-  export let translateZ = 0;
-  export let rotateY = "0deg";
+export let visible = true
+export let width = 0 // Pixel value
+export let height = 0 // Pixel value
+export let translateZ = 0
+export let rotateY = "0deg"
 </script>
 
 <div
diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Assets.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Assets.svelte
index d5a8a1be72..7e940db975 100644
--- a/app/src/lib/components/TransferFrom/components/Cube/faces/Assets.svelte
+++ b/app/src/lib/components/TransferFrom/components/Cube/faces/Assets.svelte
@@ -1,34 +1,33 @@
 <script lang="ts">
-  import type {IntentStore} from "$lib/components/TransferFrom/transfer/intents.ts";
-  import type {ValidationStoreAndMethods} from "$lib/components/TransferFrom/transfer/validation.ts";
-  import type {Readable} from "svelte/store";
-  import type {ContextStore} from "$lib/components/TransferFrom/transfer/context.ts";
-  import type {CubeFaces} from "$lib/components/TransferFrom/types.ts";
-  import {showUnsupported} from "$lib/stores/user.ts";
-  import {getSupportedAsset} from "$lib/utilities/helpers.ts";
-  import {truncate} from "$lib/utilities/format.ts";
-  import {formatUnits} from "viem";
-  import {Button} from "$lib/components/ui/button";
+import type { IntentStore } from "$lib/components/TransferFrom/transfer/intents.ts"
+import type { ValidationStoreAndMethods } from "$lib/components/TransferFrom/transfer/validation.ts"
+import type { Readable } from "svelte/store"
+import type { ContextStore } from "$lib/components/TransferFrom/transfer/context.ts"
+import type { CubeFaces } from "$lib/components/TransferFrom/types.ts"
+import { showUnsupported } from "$lib/stores/user.ts"
+import { getSupportedAsset } from "$lib/utilities/helpers.ts"
+import { truncate } from "$lib/utilities/format.ts"
+import { formatUnits } from "viem"
+import { Button } from "$lib/components/ui/button"
 
-  interface Props {
-    stores: {
-      intents: IntentStore
-      validation: ValidationStoreAndMethods
-      context: Readable<ContextStore>
-    }
-    rotateTo: (face: CubeFaces) => void
+interface Props {
+  stores: {
+    intents: IntentStore
+    validation: ValidationStoreAndMethods
+    context: Readable<ContextStore>
   }
+  rotateTo: (face: CubeFaces) => void
+}
 
-  export let stores: Props["stores"]
-  export let rotateTo: Props["rotateTo"]
+export let stores: Props["stores"]
+export let rotateTo: Props["rotateTo"]
 
-  let {intents, validation, context} = stores
-
-  function setAsset(address: string) {
-    intents.updateField('asset', address)
-    rotateTo("intentFace")
-  }
+let { intents, validation, context } = stores
 
+function setAsset(address: string) {
+  intents.updateField("asset", address)
+  rotateTo("intentFace")
+}
 </script>
 
 <div class="flex flex-col justify-between h-full w-full p-4">
diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Chains.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Chains.svelte
index 5ab242b4af..f61a5d9c68 100644
--- a/app/src/lib/components/TransferFrom/components/Cube/faces/Chains.svelte
+++ b/app/src/lib/components/TransferFrom/components/Cube/faces/Chains.svelte
@@ -1,34 +1,34 @@
 <script lang="ts">
-  import type {IntentStore} from "$lib/components/TransferFrom/transfer/intents.ts";
-  import type {ValidationStoreAndMethods} from "$lib/components/TransferFrom/transfer/validation.ts";
-  import type {Readable} from "svelte/store";
-  import type {ContextStore} from "$lib/components/TransferFrom/transfer/context.ts";
-  import type {CubeFaces} from "$lib/components/TransferFrom/types.ts";
-  import {Button} from "$lib/components/ui/button";
-  import {truncate} from "$lib/utilities/format.ts";
-  import {formatUnits} from "viem";
+import type { IntentStore } from "$lib/components/TransferFrom/transfer/intents.ts"
+import type { ValidationStoreAndMethods } from "$lib/components/TransferFrom/transfer/validation.ts"
+import type { Readable } from "svelte/store"
+import type { ContextStore } from "$lib/components/TransferFrom/transfer/context.ts"
+import type { CubeFaces } from "$lib/components/TransferFrom/types.ts"
+import { Button } from "$lib/components/ui/button"
+import { truncate } from "$lib/utilities/format.ts"
+import { formatUnits } from "viem"
 
-  interface Props {
-    stores: {
-      intents: IntentStore
-      validation: ValidationStoreAndMethods
-      context: Readable<ContextStore>
-    }
-    rotateTo: (face: CubeFaces) => void
-    selected: "source" | "destination"
+interface Props {
+  stores: {
+    intents: IntentStore
+    validation: ValidationStoreAndMethods
+    context: Readable<ContextStore>
   }
+  rotateTo: (face: CubeFaces) => void
+  selected: "source" | "destination"
+}
 
-  export let stores: Props["stores"];
-  export let rotateTo: Props["rotateTo"];
-  export let selected: Props["selected"];
+export let stores: Props["stores"]
+export let rotateTo: Props["rotateTo"]
+export let selected: Props["selected"]
 
-  $: ({intents, validation, context} = stores);
+$: ({ intents, validation, context } = stores)
 
-  function setChain(selected: "source" | "destination", chainId: string) {
-    intents.updateField(selected, chainId);
-    console.log(selected, chainId);
-    rotateTo("intentFace");
-  }
+function setChain(selected: "source" | "destination", chainId: string) {
+  intents.updateField(selected, chainId)
+  console.log(selected, chainId)
+  rotateTo("intentFace")
+}
 </script>
 
 <div class="flex h-full justify-between flex-col gap-4 p-4">
diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Intent.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Intent.svelte
index 77597a5df9..e8aa8a96d1 100644
--- a/app/src/lib/components/TransferFrom/components/Cube/faces/Intent.svelte
+++ b/app/src/lib/components/TransferFrom/components/Cube/faces/Intent.svelte
@@ -1,26 +1,26 @@
 <script lang="ts">
-  import Direction from "$lib/components/TransferFrom/components/Direction.svelte";
-  import SelectedAsset from "$lib/components/TransferFrom/components/SelectedAsset.svelte";
-  import type {Readable} from "svelte/store";
-  import type {IntentStore} from "$lib/components/TransferFrom/transfer/intents.ts";
-  import type {ValidationStoreAndMethods} from "$lib/components/TransferFrom/transfer/validation.ts";
-  import type {ContextStore} from "$lib/components/TransferFrom/transfer/context.ts";
-  import type {CubeFaces} from "$lib/components/TransferFrom/types.ts";
-  import {Button} from "$lib/components/ui/button";
+import Direction from "$lib/components/TransferFrom/components/Direction.svelte"
+import SelectedAsset from "$lib/components/TransferFrom/components/SelectedAsset.svelte"
+import type { Readable } from "svelte/store"
+import type { IntentStore } from "$lib/components/TransferFrom/transfer/intents.ts"
+import type { ValidationStoreAndMethods } from "$lib/components/TransferFrom/transfer/validation.ts"
+import type { ContextStore } from "$lib/components/TransferFrom/transfer/context.ts"
+import type { CubeFaces } from "$lib/components/TransferFrom/types.ts"
+import { Button } from "$lib/components/ui/button"
 
-  interface Props {
-    stores: {
-      intents: IntentStore
-      validation: ValidationStoreAndMethods
-      context: Readable<ContextStore>
-    }
-    rotateTo: (face: CubeFaces) => void
+interface Props {
+  stores: {
+    intents: IntentStore
+    validation: ValidationStoreAndMethods
+    context: Readable<ContextStore>
   }
+  rotateTo: (face: CubeFaces) => void
+}
 
-  export let stores: Props["stores"]
-  export let rotateTo: Props["rotateTo"]
+export let stores: Props["stores"]
+export let rotateTo: Props["rotateTo"]
 
-  let {intents, validation, context} = stores
+let { intents, validation, context } = stores
 </script>
 
 <div class="flex flex-col justify-between w-full h-full p-4">
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 0c0da73b37..9b50fbd530 100644
--- a/app/src/lib/components/TransferFrom/components/Cube/faces/Transfer.svelte
+++ b/app/src/lib/components/TransferFrom/components/Cube/faces/Transfer.svelte
@@ -1,24 +1,24 @@
 <script lang="ts">
-  import type {IntentStore} from "$lib/components/TransferFrom/transfer/intents.ts";
-  import type {ValidationStoreAndMethods} from "$lib/components/TransferFrom/transfer/validation.ts";
-  import type {Readable} from "svelte/store";
-  import type {ContextStore} from "$lib/components/TransferFrom/transfer/context.ts";
-  import type {CubeFaces} from "$lib/components/TransferFrom/types.ts";
-  import {Button} from "$lib/components/ui/button";
+import type { IntentStore } from "$lib/components/TransferFrom/transfer/intents.ts"
+import type { ValidationStoreAndMethods } from "$lib/components/TransferFrom/transfer/validation.ts"
+import type { Readable } from "svelte/store"
+import type { ContextStore } from "$lib/components/TransferFrom/transfer/context.ts"
+import type { CubeFaces } from "$lib/components/TransferFrom/types.ts"
+import { Button } from "$lib/components/ui/button"
 
-  interface Props {
-    stores: {
-      intents: IntentStore
-      validation: ValidationStoreAndMethods
-      context: Readable<ContextStore>
-    }
-    rotateTo: (face: CubeFaces) => void
+interface Props {
+  stores: {
+    intents: IntentStore
+    validation: ValidationStoreAndMethods
+    context: Readable<ContextStore>
   }
+  rotateTo: (face: CubeFaces) => void
+}
 
-  export let stores: Props["stores"]
-  export let rotateTo: Props["rotateTo"]
+export let stores: Props["stores"]
+export let rotateTo: Props["rotateTo"]
 
-  $: ({intents, validation, context} = stores)
+$: ({ intents, validation, context } = stores)
 </script>
 
 <div class="h-full w-full flex flex-col justify-between p-4">
diff --git a/app/src/lib/components/TransferFrom/components/Cube/index.svelte b/app/src/lib/components/TransferFrom/components/Cube/index.svelte
index c31e7a920d..864a4824f9 100644
--- a/app/src/lib/components/TransferFrom/components/Cube/index.svelte
+++ b/app/src/lib/components/TransferFrom/components/Cube/index.svelte
@@ -1,61 +1,70 @@
 <script lang="ts">
-  import type {CubeFaces} from "$lib/components/TransferFrom/types.ts";
-  import FaceWrapper from "$lib/components/TransferFrom/components/Cube/FaceWrapper.svelte";
-  import {deviceWidth} from "$lib/utilities/device.ts";
-
-  let currentRotation = {x: 0, y: 0};
-
-  const facePositions = {
-    intentFace: 0,
-    chainsFace: -90,
-    verifyFace: -180,
-    assetsFace: -270,
-    sourceFace: -90,
-    destinationFace: -90,
-  } as const;
-
-  let currentVisibleFace: "source" | "destination" = "source";
-  $: currentVisibleFace = "source";
-
-  function findShortestRotation(current: number, target: number): number {
-    const revolution = Math.floor(current / 360) * 360;
-    const normalizedTarget = target + revolution;
-
-    let diff = normalizedTarget - current;
-    if (Math.abs(diff) > 180) {
-      diff = diff > 0 ? diff - 360 : diff + 360;
-    }
-    return current + diff;
+import type { CubeFaces } from "$lib/components/TransferFrom/types.ts"
+import FaceWrapper from "$lib/components/TransferFrom/components/Cube/FaceWrapper.svelte"
+import { deviceWidth } from "$lib/utilities/device.ts"
+
+let currentRotation = { x: 0, y: 0 }
+
+const facePositions = {
+  intentFace: 0,
+  chainsFace: -90,
+  verifyFace: -180,
+  assetsFace: -270,
+  sourceFace: -90,
+  destinationFace: -90
+} as const
+
+let currentVisibleFace: "source" | "destination" = "source"
+$: currentVisibleFace = "source"
+
+function findShortestRotation(current: number, target: number): number {
+  const revolution = Math.floor(current / 360) * 360
+  const normalizedTarget = target + revolution
+
+  let diff = normalizedTarget - current
+  if (Math.abs(diff) > 180) {
+    diff = diff > 0 ? diff - 360 : diff + 360
   }
-
-  function rotateTo(face: CubeFaces) {
-    console.log('rotate to: ', face)
-    const targetRotation = facePositions[face];
-
-    // Calculate the new Y rotation
-    const newY = findShortestRotation(currentRotation.y, targetRotation);
-    currentRotation = {x: 0, y: newY};
-
-    // Update visibility state
-    if (face === "sourceFace") {
-      currentVisibleFace = "source";
-    } else if (face === "destinationFace") {
-      currentVisibleFace = "destination";
-    }
+  return current + diff
+}
+
+function rotateTo(face: CubeFaces) {
+  console.log("rotate to: ", face)
+  const targetRotation = facePositions[face]
+
+  // Calculate the new Y rotation
+  const newY = findShortestRotation(currentRotation.y, targetRotation)
+  currentRotation = { x: 0, y: newY }
+
+  // Update visibility state
+  if (face === "sourceFace") {
+    currentVisibleFace = "source"
+  } else if (face === "destinationFace") {
+    currentVisibleFace = "destination"
   }
-
-  //If we want to be specific we can set each w
-  $: width =
-    $deviceWidth >= 1536 ? 400 : // 2xl breakpoint
-      $deviceWidth >= 1280 ? 400 : // xl breakpoint
-        $deviceWidth >= 1024 ? 400 : // lg breakpoint
-          $deviceWidth >= 768 ? 400 :  // md breakpoint
-            $deviceWidth >= 640 ? 400 :  // sm breakpoint
-              300; // Default for smaller screens
-
-  $: height = width * 1.5;
-  $: translateZ = width / 2;
-
+}
+
+//If we want to be specific we can set each w
+$: width =
+  $deviceWidth >= 1536
+    ? 400
+    : // 2xl breakpoint
+      $deviceWidth >= 1280
+      ? 400
+      : // xl breakpoint
+        $deviceWidth >= 1024
+        ? 400
+        : // lg breakpoint
+          $deviceWidth >= 768
+          ? 400
+          : // md breakpoint
+            $deviceWidth >= 640
+            ? 400
+            : // sm breakpoint
+              300 // Default for smaller screens
+
+$: height = width * 1.5
+$: translateZ = width / 2
 </script>
 
 <div class="h-screen w-full flex items-center justify-center bg-black perspective-[2000px]">
diff --git a/app/src/lib/components/TransferFrom/components/DebugBox/index.svelte b/app/src/lib/components/TransferFrom/components/DebugBox/index.svelte
index 0798537de5..18daf287df 100644
--- a/app/src/lib/components/TransferFrom/components/DebugBox/index.svelte
+++ b/app/src/lib/components/TransferFrom/components/DebugBox/index.svelte
@@ -1,26 +1,26 @@
 <script lang="ts">
-  import * as Drawer from "$lib/components/ui/drawer";
-  import type {Readable} from "svelte/store"
-  import type {IntentStore} from "../../transfer/intents.ts"
-  import type {ValidationStoreAndMethods} from "../../transfer/validation.ts"
-  import type {ContextStore} from "../../transfer/context.ts"
-  import CollapsibleDisplay from "./CollapsibleDisplay.svelte"
-  import CopyUrlButton from "./CopyUrlButton.svelte";
-  import ResetButton from "./ResetButton.svelte";
-  import {Button} from "$lib/components/ui/button";
-  import {ScrollArea} from "$lib/components/ui/scroll-area";
+import * as Drawer from "$lib/components/ui/drawer"
+import type { Readable } from "svelte/store"
+import type { IntentStore } from "../../transfer/intents.ts"
+import type { ValidationStoreAndMethods } from "../../transfer/validation.ts"
+import type { ContextStore } from "../../transfer/context.ts"
+import CollapsibleDisplay from "./CollapsibleDisplay.svelte"
+import CopyUrlButton from "./CopyUrlButton.svelte"
+import ResetButton from "./ResetButton.svelte"
+import { Button } from "$lib/components/ui/button"
+import { ScrollArea } from "$lib/components/ui/scroll-area"
 
-  interface Props {
-    stores: {
-      intents: IntentStore
-      validation: ValidationStoreAndMethods
-      context: Readable<ContextStore>
-    }
+interface Props {
+  stores: {
+    intents: IntentStore
+    validation: ValidationStoreAndMethods
+    context: Readable<ContextStore>
   }
+}
 
-  export let stores: Props["stores"]
+export let stores: Props["stores"]
 
-  $: ({intents, validation, context} = stores)
+$: ({ intents, validation, context } = stores)
 </script>
 
 <Drawer.Root>
diff --git a/app/src/lib/components/TransferFrom/components/Direction.svelte b/app/src/lib/components/TransferFrom/components/Direction.svelte
index 0049b4feba..8f3adad492 100644
--- a/app/src/lib/components/TransferFrom/components/Direction.svelte
+++ b/app/src/lib/components/TransferFrom/components/Direction.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-  import type {IntentStore} from "../transfer/intents.ts";
-  import type {ContextStore} from "$lib/components/TransferFrom/transfer/context.ts";
-  import type {Readable} from "svelte/store";
-  import {Button} from "$lib/components/ui/button";
+import type { IntentStore } from "../transfer/intents.ts"
+import type { ContextStore } from "$lib/components/TransferFrom/transfer/context.ts"
+import type { Readable } from "svelte/store"
+import { Button } from "$lib/components/ui/button"
 
-  interface Props {
-    intents: IntentStore
-    context: Readable<ContextStore>
-    getSourceChain: () => void
-    getDestinationChain: () => void
-  }
+interface Props {
+  intents: IntentStore
+  context: Readable<ContextStore>
+  getSourceChain: () => void
+  getDestinationChain: () => void
+}
 
-  export let intents: Props["intents"]
-  export let context: Props["context"]
-  export let getSourceChain: Props["getSourceChain"]
-  export let getDestinationChain: Props["getDestinationChain"]
+export let intents: Props["intents"]
+export let context: Props["context"]
+export let getSourceChain: Props["getSourceChain"]
+export let getDestinationChain: Props["getDestinationChain"]
 </script>
 
 <div class="flex flex-col gap-1">
diff --git a/app/src/lib/components/TransferFrom/components/SelectedAsset.svelte b/app/src/lib/components/TransferFrom/components/SelectedAsset.svelte
index 03beabf2ef..db5cb9cbb6 100644
--- a/app/src/lib/components/TransferFrom/components/SelectedAsset.svelte
+++ b/app/src/lib/components/TransferFrom/components/SelectedAsset.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-  import type {IntentStore} from "$lib/components/TransferFrom/transfer/intents.ts";
-  import type {Readable} from "svelte/store";
-  import type {ContextStore} from "$lib/components/TransferFrom/transfer/context.ts";
-  import {Button} from "$lib/components/ui/button";
+import type { IntentStore } from "$lib/components/TransferFrom/transfer/intents.ts"
+import type { Readable } from "svelte/store"
+import type { ContextStore } from "$lib/components/TransferFrom/transfer/context.ts"
+import { Button } from "$lib/components/ui/button"
 
-  interface Props {
-    intents: IntentStore
-    context: Readable<ContextStore>
-    onSelectAsset: () => void
-  }
+interface Props {
+  intents: IntentStore
+  context: Readable<ContextStore>
+  onSelectAsset: () => void
+}
 
-  export let intents: Props["intents"]
-  export let context: Props["context"]
-  export let onSelectAsset: Props["onSelectAsset"]
+export let intents: Props["intents"]
+export let context: Props["context"]
+export let onSelectAsset: Props["onSelectAsset"]
 </script>
 
 <Button type="button"
diff --git a/app/src/lib/components/TransferFrom/index.svelte b/app/src/lib/components/TransferFrom/index.svelte
index 00f3b065b1..924e472e84 100644
--- a/app/src/lib/components/TransferFrom/index.svelte
+++ b/app/src/lib/components/TransferFrom/index.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-  import DebugBox from "$lib/components/TransferFrom/components/DebugBox/index.svelte";
-  import {TRANSFER_DEBUG} from "$lib/components/TransferFrom/transfer/config.ts";
-  import {createTransferStore } from "$lib/components/TransferFrom/transfer";
-  import Intent from "$lib/components/TransferFrom/components/Cube/faces/Intent.svelte";
-  import Chains from "$lib/components/TransferFrom/components/Cube/faces/Chains.svelte";
-  import Assets from "$lib/components/TransferFrom/components/Cube/faces/Assets.svelte";
-  import Transfer from "$lib/components/TransferFrom/components/Cube/faces/Transfer.svelte";
-  import Cube from "$lib/components/TransferFrom/components/Cube/index.svelte";
-
-  const stores = createTransferStore()
-  let {context} = stores
-
-  $: console.log($context)
+import DebugBox from "$lib/components/TransferFrom/components/DebugBox/index.svelte"
+import { TRANSFER_DEBUG } from "$lib/components/TransferFrom/transfer/config.ts"
+import { createTransferStore } from "$lib/components/TransferFrom/transfer"
+import Intent from "$lib/components/TransferFrom/components/Cube/faces/Intent.svelte"
+import Chains from "$lib/components/TransferFrom/components/Cube/faces/Chains.svelte"
+import Assets from "$lib/components/TransferFrom/components/Cube/faces/Assets.svelte"
+import Transfer from "$lib/components/TransferFrom/components/Cube/faces/Transfer.svelte"
+import Cube from "$lib/components/TransferFrom/components/Cube/index.svelte"
+
+const stores = createTransferStore()
+let { context } = stores
+
+$: console.log($context)
 </script>
 
 <Cube>
diff --git a/app/src/lib/components/TransferFrom/transfer/context.ts b/app/src/lib/components/TransferFrom/transfer/context.ts
index 883f96f2d0..9f43a1feb6 100644
--- a/app/src/lib/components/TransferFrom/transfer/context.ts
+++ b/app/src/lib/components/TransferFrom/transfer/context.ts
@@ -15,7 +15,7 @@ type BalanceRecord = {
   symbol: string
 }
 
-type BalancesList = BalanceRecord[]
+type BalancesList = Array<BalanceRecord>
 
 export interface ContextStore {
   chains: Array<Chain>
@@ -98,4 +98,4 @@ export function createContextStore(intents: IntentStore): Readable<ContextStore>
       assetInfo: $assetInfo
     })
   )
-}
\ No newline at end of file
+}
diff --git a/app/src/lib/components/TransferFrom/transfer/index.ts b/app/src/lib/components/TransferFrom/transfer/index.ts
index 15db72c431..96bb6851d8 100644
--- a/app/src/lib/components/TransferFrom/transfer/index.ts
+++ b/app/src/lib/components/TransferFrom/transfer/index.ts
@@ -1,7 +1,13 @@
-import { type Readable } from "svelte/store"
+import type { Readable } from "svelte/store"
 import { createIntentStore, type IntentStore } from "./intents.ts"
-import { type ContextStore, createContextStore} from "$lib/components/TransferFrom/transfer/context.ts"
-import { createValidationStore, type ValidationStoreAndMethods } from "$lib/components/TransferFrom/transfer/validation.ts"
+import {
+  type ContextStore,
+  createContextStore
+} from "$lib/components/TransferFrom/transfer/context.ts"
+import {
+  createValidationStore,
+  type ValidationStoreAndMethods
+} from "$lib/components/TransferFrom/transfer/validation.ts"
 
 export interface TransferStore {
   intents: IntentStore
@@ -19,4 +25,4 @@ export function createTransferStore(): TransferStore {
     context,
     validation
   }
-}
\ No newline at end of file
+}
diff --git a/app/src/lib/components/TransferFrom/transfer/intents.ts b/app/src/lib/components/TransferFrom/transfer/intents.ts
index 3b37fdac30..1cebfcf901 100644
--- a/app/src/lib/components/TransferFrom/transfer/intents.ts
+++ b/app/src/lib/components/TransferFrom/transfer/intents.ts
@@ -121,4 +121,4 @@ export function createIntentStore(): IntentStore {
       set(defaultParams)
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/src/lib/components/TransferFrom/transfer/validation.ts b/app/src/lib/components/TransferFrom/transfer/validation.ts
index e9451dfe06..47c8993f57 100644
--- a/app/src/lib/components/TransferFrom/transfer/validation.ts
+++ b/app/src/lib/components/TransferFrom/transfer/validation.ts
@@ -1,6 +1,6 @@
 import type { Readable } from "svelte/store"
 import { derived } from "svelte/store"
-import type { IntentStore, FormFields, RawTransferIntents } from "./intents.ts"
+import type { IntentStore, FormFields } from "./intents.ts"
 import type { Chain } from "$lib/types"
 import type { Balance, ContextStore } from "$lib/components/TransferFrom/transfer/context"
 import { transferSchema } from "./schema.ts"
@@ -29,39 +29,36 @@ export function createValidationStore(
   intents: IntentStore,
   context: Readable<ContextStore>
 ): ValidationStoreAndMethods {
-  const store = derived(
-    [intents, context],
-    ([$intents, $context]) => {
-      const errors = validateAll({
-        formFields: {
-          source: $intents.source,
-          destination: $intents.destination,
-          asset: $intents.asset,
-          receiver: $intents.receiver,
-          amount: $intents.amount
-        },
-        balances: $context.balances,
-        sourceChain: $context.sourceChain,
-        destinationChain: $context.destinationChain,
-        assetInfo: $context.assetInfo,
-        chains: $context.chains
-      })
+  const store = derived([intents, context], ([$intents, $context]) => {
+    const errors = validateAll({
+      formFields: {
+        source: $intents.source,
+        destination: $intents.destination,
+        asset: $intents.asset,
+        receiver: $intents.receiver,
+        amount: $intents.amount
+      },
+      balances: $context.balances,
+      sourceChain: $context.sourceChain,
+      destinationChain: $context.destinationChain,
+      assetInfo: $context.assetInfo,
+      chains: $context.chains
+    })
 
-      return {
-        errors,
-        isValid: Object.keys(errors).length === 0
-      }
+    return {
+      errors,
+      isValid: Object.keys(errors).length === 0
     }
-  )
+  })
 
   function validateAll({
-                         formFields,
-                         balances,
-                         sourceChain,
-                         destinationChain,
-                         assetInfo,
-                         chains
-                       }: {
+    formFields,
+    balances,
+    sourceChain,
+    destinationChain,
+    assetInfo,
+    chains
+  }: {
     formFields: FormFields
     balances: Array<Balance>
     sourceChain: Chain | undefined
@@ -105,13 +102,17 @@ export function createValidationStore(
     })
   }
 
-  function validateBusinessRules(formFields: FormFields, context: ValidationContext): FieldErrors {
+  function validateBusinessRules(formFields: FormFields, _context: ValidationContext): FieldErrors {
     if (Object.values(formFields).every(value => !value)) {
       return {}
     }
     const errors: FieldErrors = {}
 
-    if (formFields.source && formFields.destination && formFields.source === formFields.destination) {
+    if (
+      formFields.source &&
+      formFields.destination &&
+      formFields.source === formFields.destination
+    ) {
       errors.destination = "Source and destination chains must be different"
     }
 
@@ -126,10 +127,10 @@ export function createValidationStore(
         const unsubscribe = store.subscribe(value => {
           currentState = value
         })
-        const isValid = currentState!.isValid
+        const isValid = currentState?.isValid
         unsubscribe()
         resolve(isValid)
       })
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/src/lib/components/TransferFrom/types.ts b/app/src/lib/components/TransferFrom/types.ts
index 397e5eb703..aa64b220f8 100644
--- a/app/src/lib/components/TransferFrom/types.ts
+++ b/app/src/lib/components/TransferFrom/types.ts
@@ -1,7 +1,7 @@
 export type CubeFaces =
-  'intentFace' |
-  'chainsFace' |
-  'verifyFace' |
-  'assetsFace' |
-  "sourceFace" |
-  "destinationFace"
\ No newline at end of file
+  | "intentFace"
+  | "chainsFace"
+  | "verifyFace"
+  | "assetsFace"
+  | "sourceFace"
+  | "destinationFace"
diff --git a/app/src/lib/queries/balance/index.ts b/app/src/lib/queries/balance/index.ts
index bf355cf543..28e4fceaad 100644
--- a/app/src/lib/queries/balance/index.ts
+++ b/app/src/lib/queries/balance/index.ts
@@ -9,7 +9,11 @@ import type { Chain, UserAddresses } from "$lib/types.ts"
 import { getBalancesFromAlchemy } from "./evm/alchemy.ts"
 import { getBalancesFromRoutescan } from "./evm/routescan.ts"
 
-export function userBalancesQuery({userAddr, chains, connected = true}: { userAddr: UserAddresses, chains: Array<Chain>, connected?: boolean }) {
+export function userBalancesQuery({
+  userAddr,
+  chains,
+  connected = true
+}: { userAddr: UserAddresses; chains: Array<Chain>; connected?: boolean }) {
   return createQueries({
     queries: chains.map(chain => ({
       queryKey: [