refactor(app): changes to approach

unionlabs · Dec 11, 2024 · c6d2fc9 · c6d2fc9
1 parent e5b9e56
commit c6d2fc9
Show file tree

Hide file tree

Showing 9 changed files with 403 additions and 247 deletions.
diff --git a/app/src/lib/components/TransferFrom/components/DebugBox.svelte b/app/src/lib/components/TransferFrom/components/DebugBox.svelte
@@ -1,29 +1,29 @@
-<!-- Debug.svelte -->
 <script lang="ts">
-import CopyUrlButton from "$lib/components/TransferFrom/components/CopyUrlButton.svelte"
-import ResetButton from "$lib/components/TransferFrom/components/ResetButton.svelte"
-import type { IntentStore } from "./intents.ts"
-import type { Chain, UserAddresses } from "$lib/types"
-import type { Readable } from "svelte/store"
-import type { Balance } from "./transfer.ts" // Assuming you have Balance type exported
+  import CopyUrlButton from "$lib/components/TransferFrom/components/CopyUrlButton.svelte"
+  import ResetButton from "$lib/components/TransferFrom/components/ResetButton.svelte"
+  import type { IntentStore } from "../transfer/intents.ts"
+  import type { ValidationStore } from "../transfer/validation.ts"
+  import type { ContextStore } from "../transfer/context.ts"
 
-interface DebugProps {
-  intents: IntentStore
-  chains: Array<Chain>
-  userAddress: Readable<UserAddresses>
-  sourceChain: Readable<Chain | undefined>
-  destinationChain: Readable<Chain | undefined>
-  balances: Readable<Array<Balance>>
-  assetInfo: Readable<Balance | undefined>
-}
+  interface DebugProps {
+    intents: IntentStore
+    validation: ValidationStore
+    context: ContextStore
+  }
 
-export let intents: DebugProps["intents"]
-export let chains: DebugProps["chains"]
-export let userAddress: DebugProps["userAddress"]
-export let sourceChain: DebugProps["sourceChain"]
-export let destinationChain: DebugProps["destinationChain"]
-export let balances: DebugProps["balances"]
-export let assetInfo: DebugProps["assetInfo"]
+  export let intents: DebugProps["intents"]
+  export let validation: DebugProps["validation"]
+  export let context: DebugProps["context"]
+
+  // Destructure the context for easier access to stores
+  const {
+    userAddress,
+    sourceChain,
+    destinationChain,
+    balances,
+    assetInfo,
+    chains
+  } = context
 </script>
 
 <div class="p-4 w-full">
@@ -38,15 +38,13 @@ export let assetInfo: DebugProps["assetInfo"]
     <div class="summary mb-4">
       <h3 class="text-union-accent-500">Raw Intents</h3>
       {#each Object.entries($intents) as [key, value]}
-        {#if key !== "errors" && key !== "isValid"}
-          <p class="text-sm">{key}: "{value}"</p>
-        {/if}
+        <p class="text-sm">{key}: "{value}"</p>
       {/each}
     </div>
 
     <div class="summary mb-4">
-      <h3 class="text-red-500">Errors:</h3>
-      {#each Object.entries($intents.errors) as [key, value]}
+      <h3 class="text-red-500">Validation Errors:</h3>
+      {#each Object.entries($validation) as [key, value]}
         <p class="text-sm">{key}: "{value}"</p>
       {/each}
     </div>

diff --git a/app/src/lib/components/TransferFrom/config.ts b/app/src/lib/components/TransferFrom/config.ts
@@ -1 +1,12 @@
+import type { RawTransferIntents } from "$lib/components/TransferFrom/transfer/intents.ts";
+
 export const TRANSFER_DEBUG = true
+
+export const defaultParams: RawTransferIntents = {
+  source: "union-testnet-8",
+  destination: "11155111",
+  asset: "",
+  receiver: "",
+  amount: "",
+  isValid: false
+}
diff --git a/app/src/lib/components/TransferFrom/index.svelte b/app/src/lib/components/TransferFrom/index.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import {TRANSFER_DEBUG} from "$lib/components/TransferFrom/config.ts"
-  import CopyUrlButton from "$lib/components/TransferFrom/components/CopyUrlButton.svelte"
-  import ResetButton from "$lib/components/TransferFrom/components/ResetButton.svelte"
-  import {createTransferStore} from "$lib/components/TransferFrom/transfer.ts"
+  import {createTransferStore} from "$lib/components/TransferFrom/transfer"
   import DebugBox from "$lib/components/TransferFrom/components/DebugBox.svelte"
 
-  const {intents, chains, userAddress, sourceChain, destinationChain, balances, assetInfo} =
-    createTransferStore()
+  const {
+    intents,
+    validation,
+    context
+  } = createTransferStore()
 </script>
 
 <form
@@ -24,12 +25,12 @@
               id="source"
               name="source"
               placeholder="Enter source chain"
-              class="w-[300px] p-1 {$intents.errors.source ? 'border-red-500' : ''}"
+              class="w-[300px] p-1 {$validation.source ? 'border-red-500' : ''}"
               value={$intents.source}
               on:input={event => intents.updateField('source', event)}
       />
-      {#if $intents.errors.source}
-        <span class="text-red-500 text-sm">{$intents.errors.source}</span>
+      {#if $validation.source}
+        <span class="text-red-500 text-sm">{$validation.source}</span>
       {/if}
     </div>
 
@@ -40,12 +41,12 @@
               id="destination"
               name="destination"
               placeholder="Enter destination chain"
-              class="w-[300px] p-1 {$intents.errors.destination ? 'border-red-500' : ''}"
+              class="w-[300px] p-1 {$validation.destination ? 'border-red-500' : ''}"
               value={$intents.destination}
               on:input={event => intents.updateField('destination', event)}
       />
-      {#if $intents.errors.destination}
-        <span class="text-red-500 text-sm">{$intents.errors.destination}</span>
+      {#if $validation.destination}
+        <span class="text-red-500 text-sm">{$validation.destination}</span>
       {/if}
     </div>
 
@@ -56,12 +57,12 @@
               id="asset"
               name="asset"
               placeholder="Enter asset"
-              class="w-[300px] p-1 {$intents.errors.asset ? 'border-red-500' : ''}"
+              class="w-[300px] p-1 {$validation.asset ? 'border-red-500' : ''}"
               value={$intents.asset}
               on:input={event => intents.updateField('asset', event)}
       />
-      {#if $intents.errors.asset}
-        <span class="text-red-500 text-sm">{$intents.errors.asset}</span>
+      {#if $validation.asset}
+        <span class="text-red-500 text-sm">{$validation.asset}</span>
       {/if}
     </div>
 
@@ -83,12 +84,12 @@
               data-field="amount"
               autocapitalize="none"
               pattern="^[0-9]*[.,]?[0-9]*$"
-              class="w-[300px] p-1 {$intents.errors.amount ? 'border-red-500' : ''}"
+              class="w-[300px] p-1 {$validation.amount ? 'border-red-500' : ''}"
               value={$intents.amount}
               on:input={event => intents.updateField('amount', event)}
       />
-      {#if $intents.errors.amount}
-        <span class="text-red-500 text-sm">{$intents.errors.amount}</span>
+      {#if $validation.amount}
+        <span class="text-red-500 text-sm">{$validation.amount}</span>
       {/if}
     </div>
 
@@ -104,18 +105,22 @@
               spellcheck="false"
               autocomplete="off"
               data-field="receiver"
-              class="w-[300px] p-1 disabled:bg-black/30 {$intents.errors.receiver ? 'border-red-500' : ''}"
+              class="w-[300px] p-1 disabled:bg-black/30 {$validation.receiver ? 'border-red-500' : ''}"
               placeholder="Enter destination address"
               value={$intents.receiver}
               on:input={event => intents.updateField('receiver', event)}
       />
-      {#if $intents.errors.receiver}
-        <span class="text-red-500 text-sm">{$intents.errors.receiver}</span>
+      {#if $validation.receiver}
+        <span class="text-red-500 text-sm">{$validation.receiver}</span>
       {/if}
     </div>
   </div>
 </form>
 
 {#if TRANSFER_DEBUG}
-  <DebugBox {intents} {chains} {userAddress} {sourceChain} {destinationChain} {balances} {assetInfo}/>
+  <DebugBox
+          {intents}
+          {validation}
+          context={context}
+  />
 {/if}
diff --git a/app/src/lib/components/TransferFrom/intents.ts b/app/src/lib/components/TransferFrom/intents.ts