feat(app): save progress

unionlabs · Jan 2, 2025 · d641f27 · d641f27
1 parent e1bf513
commit d641f27
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 75 deletions.
diff --git a/app/src/lib/components/TransferFrom/components/Cube/FaceWrapper.svelte b/app/src/lib/components/TransferFrom/components/Cube/FaceWrapper.svelte
@@ -1,14 +1,17 @@
 <script>
-  export let visible = true
+  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
-        class="absolute bg-neutral-900 flex flex-col items-center p-4 border-2 {visible ? 'opacity-100' : 'opacity-0 pointer-events-none'}}"
-        style={`width: ${width}px; height: ${height}px; transform: rotateY(${rotateY}) translateZ(${translateZ}px);;`}
+        class="absolute bg-neutral-900 flex flex-col items-center border-2"
+        class:opacity-100={visible}
+        class:opacity-0={!visible}
+        class:pointer-events-none={!visible}
+        style={`width: ${width}px; height: ${height}px; transform: rotateY(${rotateY}) translateZ(${translateZ}px);`}
 >
   <slot />
-</div>
+</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
@@ -4,6 +4,11 @@
   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: {
@@ -17,7 +22,41 @@
   export let stores: Props["stores"]
   export let rotateTo: Props["rotateTo"]
 
-  $: ({intents, validation, context} = stores)
+  let {intents, validation, context} = stores
+
+  function setAsset(address: string) {
+    intents.updateField('asset', address)
+    rotateTo("intentFace")
+  }
+
 </script>
 
-<button class="font-supermolot font-bold text-lg mb-4" on:click={() => rotateTo("intentFace")}>Select asset</button>
+<div class="flex flex-col h-full w-full">
+  <div class="flex-1 overflow-y-auto">
+    {#each $context.balances as asset}
+      {@const supportedAsset = getSupportedAsset($context.sourceChain, asset.address)}
+      {#if $showUnsupported || supportedAsset}
+        <div class="pb-2 flex flex-col justify-start">
+          <Button
+                  variant="ghost"
+                  class="px-4 py-2 w-full rounded-none flex justify-between items-center"
+                  on:click={() => setAsset(asset.address)}
+          >
+            <div class:opacity-30={!supportedAsset}>
+              {truncate((supportedAsset?.display_symbol || asset?.symbol || ''), 6) || 'Unknown symbol'}
+            </div>
+            <p class="text-lg font-black" class:opacity-30={!supportedAsset}>
+              {formatUnits(asset.balance, supportedAsset?.decimals ?? 0)}
+            </p>
+          </Button>
+        </div>
+      {/if}
+    {/each}
+  </div>
+
+  <div class="mt-4">
+    <Button on:click={() => rotateTo("intentFace")} class="w-full">
+      Back
+    </Button>
+  </div>
+</div>
diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Chains.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Chains.svelte
@@ -4,6 +4,9 @@
   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: {
@@ -12,17 +15,31 @@
       context: Readable<ContextStore>
     }
     rotateTo: (face: CubeFaces) => void
-    select: "source" | "destination"
+    selected: "source" | "destination"
   }
 
-  export let stores: Props["stores"]
-  export let rotateTo: Props["rotateTo"]
-  export let select: Props["select"]
+  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");
+  }
 </script>
 
-<h2 class="font-supermolot font-bold text-lg mb-4">Select chain</h2>
-{#each $context.chains as chain}
-  <button on:click={() => rotateTo("intentFace")}>{chain.display_name}</button>
-{/each}
+<div class="flex h-full justify-between flex-col gap-4">
+  <div class="flex flex-col gap-2">
+    {#each $context.chains as chain}
+      <Button variant="ghost"
+              class="px-4 py-2 w-full rounded-none flex justify-between items-center"
+              on:click={() => setChain(selected, chain.chain_id)}
+      >{chain.display_name}
+      </Button>
+    {/each}
+  </div>
+  <Button on:click={() => rotateTo("intentFace")}>Back</Button>
+</div>
diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Intent.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Intent.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import Direction from "$lib/components/TransferFrom/components/Direction.svelte";
-  import AssetDialog from "$lib/components/TransferFrom/components/AssetDialog.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";
@@ -20,22 +20,13 @@
   export let stores: Props["stores"]
   export let rotateTo: Props["rotateTo"]
 
-  $: ({intents, validation, context} = stores)
+  let {intents, validation, context} = stores
 </script>
 
 <div class="flex flex-col justify-between w-full h-full">
   <div class="flex flex-col gap-4">
-    <Direction
-            {context}
-            {intents}
-            getSourceChain={() => rotateTo("sourceFace")}
-            getDestinationChain={() => rotateTo("destinationFace")}
-    />
-    <AssetDialog
-            {context}
-            {intents}
-            onSelectAsset={() => rotateTo("assetsFace")}
-    />
+    <Direction {context} {intents} getSourceChain={() => rotateTo("sourceFace")} getDestinationChain={() => rotateTo("destinationFace")}/>
+    <SelectedAsset {context} {intents} onSelectAsset={() => rotateTo("assetsFace")}/>
     <div class="flex flex-col gap-1">
       <input
               id="amount"
@@ -44,7 +35,7 @@
               minlength={1}
               maxlength={64}
               required={true}
-              disabled={false}
+              disabled={!$context.assetInfo}
               autocorrect="off"
               placeholder="0.00"
               spellcheck="false"
@@ -68,7 +59,7 @@
               id="receiver"
               name="receiver"
               required={true}
-              disabled={false}
+              disabled={!$context.destinationChain}
               autocorrect="off"
               spellcheck="false"
               autocomplete="off"

diff --git a/app/src/lib/components/TransferFrom/components/Direction.svelte b/app/src/lib/components/TransferFrom/components/Direction.svelte
@@ -22,7 +22,7 @@
           variant="outline"
           type="button"
           size="sm"
-          class="border-2 border-white  min-w-[150px] font-bold"
+          class="border-2 border-white font-bold"
           on:click={getSourceChain}
   >
     {$context?.sourceChain?.display_name.split(" ")[0]}
@@ -31,9 +31,9 @@
           variant="outline"
           type="button"
           size="sm"
-          class="border-2 border-white min-w-[150px] font-bold"
+          class="border-2 border-white font-bold"
           on:click={getDestinationChain}
   >
-    {$context?.destinationChain?.display_name.split(" ")[0] ?? "To"}
+    {$context?.destinationChain?.display_name.split(" ")[0] ?? "To chain"}
   </Button>
 </div>
diff --git a/...ransferFrom/components/AssetDialog.svelte → ...nsferFrom/components/SelectedAsset.svelte b/...ransferFrom/components/AssetDialog.svelte → ...nsferFrom/components/SelectedAsset.svelte
@@ -15,12 +15,10 @@
   export let onSelectAsset: Props["onSelectAsset"]
 </script>
 
-<Button
-        type="button"
+<Button type="button"
         size="sm"
         variant="outline"
-        class="border-2 border-white min-w-[150px]"
-        on:click={onSelectAsset}
->
-  {$context?.assetInfo ?? "Select asset"}
+        class="border-2 border-white font-bold"
+        on:click={onSelectAsset}>
+  {$context?.assetInfo ?? "Select Asset"}
 </Button>
diff --git a/app/src/lib/components/TransferFrom/index.svelte b/app/src/lib/components/TransferFrom/index.svelte
@@ -1,14 +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 {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>
@@ -17,11 +20,11 @@
   </div>
 
   <div slot="source" let:rotateTo class="w-full h-full">
-    <Chains {stores} {rotateTo} select="source"/>
+    <Chains {stores} {rotateTo} selected="source" />
   </div>
 
   <div slot="destination" let:rotateTo class="w-full h-full">
-    <Chains {stores} {rotateTo} select="source"/>
+    <Chains {stores} {rotateTo} selected="destination" />
   </div>
 
   <div slot="assets" let:rotateTo class="w-full h-full">

diff --git a/app/src/lib/components/TransferFrom/transfer/context.ts b/app/src/lib/components/TransferFrom/transfer/context.ts
@@ -8,32 +8,24 @@ import type { Chain, UserAddresses } from "$lib/types"
 import { useQueryClient } from "@tanstack/svelte-query"
 import type { Address } from "$lib/wallet/types"
 
-export type AddressBalance = {
+type BalanceRecord = {
   balance: bigint
   gasToken: boolean
   address: Address
   symbol: string
 }
 
-export type NamedBalance = {
-  balance: bigint
-  address: string
-  name: string | null
-  symbol: string
-  gasToken: boolean
-}
-
-export type EmptyBalance = {}
-
-export type Balance = AddressBalance | NamedBalance | EmptyBalance
+type BalancesList = BalanceRecord[]
 
 export interface ContextStore {
   chains: Array<Chain>
   userAddress: UserAddresses
-  sourceChain: Chain | undefined
+  sourceChain: Chain
   destinationChain: Chain | undefined
-  balances: Array<Balance>
-  assetInfo: Balance | undefined
+  // Changed from Array<BalancesStore> to just BalancesList
+  balances: BalancesList
+  // Changed from BalancesStore to single BalanceRecord
+  assetInfo: BalanceRecord | undefined
 }
 
 export function createContextStore(intents: IntentStore): Readable<ContextStore> {
@@ -47,19 +39,20 @@ export function createContextStore(intents: IntentStore): Readable<ContextStore>
     return (filter ? data.filter(filter) : data) as T
   }
 
-  // Chain data
   const chains = queryData<Array<Chain>>(["chains"], chain => chain.enabled_staging)
 
-  // User address data
   const userAddress = derived(
     [userAddrCosmos, userAddrEvm, userAddressAptos],
     ([cosmos, evm, aptos]) => ({ evm, aptos, cosmos })
   ) as Readable<UserAddresses>
 
-  // Chain selections
-  const sourceChain = derived(intents, intentsValue =>
-    chains.find(chain => chain.chain_id === intentsValue.source)
-  )
+  const sourceChain = derived(intents, intentsValue => {
+    const chain = chains.find(chain => chain.chain_id === intentsValue.source)
+    if (!chain) {
+      throw new Error(`No chain found for source ${intentsValue.source}`)
+    }
+    return chain
+  })
 
   const destinationChain = derived(intents, intentsValue =>
     chains.find(chain => chain.chain_id === intentsValue.destination)
@@ -88,7 +81,7 @@ export function createContextStore(intents: IntentStore): Readable<ContextStore>
         balance: BigInt(balance.balance)
       }))
     }
-  )
+  ) as Readable<BalancesList>
 
   const assetInfo = derived([balances, intents], ([balancesValue, intentsValue]) =>
     balancesValue.find(x => x?.address === intentsValue.asset)
@@ -105,4 +98,4 @@ export function createContextStore(intents: IntentStore): Readable<ContextStore>
       assetInfo: $assetInfo
     })
   )
-}
+}
diff --git a/app/src/lib/components/TransferFrom/transfer/validation.ts b/app/src/lib/components/TransferFrom/transfer/validation.ts
@@ -111,7 +111,6 @@ export function createValidationStore(
     }
     const errors: FieldErrors = {}
 
-    //Example
     if (formFields.source && formFields.destination && formFields.source === formFields.destination) {
       errors.destination = "Source and destination chains must be different"
     }

diff --git a/app/src/lib/queries/balance/index.ts b/app/src/lib/queries/balance/index.ts
@@ -9,15 +9,7 @@ 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: [