refactor(app): refactor domino

unionlabs · Jan 9, 2025 · c49ee67 · c49ee67
1 parent 8227641
commit c49ee67
Show file tree

Hide file tree

Showing 13 changed files with 244 additions and 325 deletions.
diff --git a/app/src/generated/graphql-env.d.ts b/app/src/generated/graphql-env.d.ts
diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Assets.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Assets.svelte
@@ -1,37 +1,29 @@
 <script lang="ts">
-import type { Readable } from "svelte/store"
-import type { ContextStore } from "$lib/components/TransferFrom/transfer/context.ts"
-import { truncate } from "$lib/utilities/format.ts"
-import { formatUnits } from "viem"
-import { Button } from "$lib/components/ui/button"
-import type { CubeFaces } from "$lib/components/TransferFrom/components/Cube/types.ts"
-import type { RawIntentsStore } from "$lib/components/TransferFrom/transfer/raw-intents.ts"
-import type { IntentsStore } from "$lib/components/TransferFrom/transfer/intents.ts"
+  import type { Readable } from "svelte/store"
+  import { truncate } from "$lib/utilities/format.ts"
+  import { formatUnits } from "viem"
+  import { Button } from "$lib/components/ui/button"
+  import type { CubeFaces } from "$lib/components/TransferFrom/components/Cube/types.ts"
+  import type { RawIntentsStore } from "$lib/components/TransferFrom/transfer/raw-intents.ts"
+  import type { IntentsStore, AssetListItem } from "$lib/components/TransferFrom/transfer/intents.ts"
 
-interface Props {
-  stores: {
-    rawIntents: RawIntentsStore
-    intents: Readable<IntentsStore>
+  interface Props {
+    stores: {
+      rawIntents: RawIntentsStore
+      intents: Readable<IntentsStore>
+    }
+    rotateTo: (face: CubeFaces) => void
   }
-  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 { rawIntents, intents } = stores
+  let { rawIntents, intents } = stores
 
-$: sortedAssets = [...($intents.sourceAssets ?? [])].sort((a, b) => {
-  if (a.isSupported !== b.isSupported) {
-    return a.isSupported ? -1 : 1
+  function setAsset(denom: string) {
+    rawIntents.updateField("asset", denom)
+    rotateTo("intentFace")
   }
-  return Number(b.balance.balance - a.balance.balance)
-})
-
-function setAsset(address: string) {
-  rawIntents.updateField("asset", address)
-  rotateTo("intentFace")
-}
 </script>
 
 <div class="flex flex-col h-full w-full">
@@ -44,20 +36,20 @@ function setAsset(address: string) {
     </button>
   </div>
 
-  {#if sortedAssets.length}
+  {#if $intents.sourceAssets.length}
     <div class="flex-1 overflow-y-auto">
-      {#each sortedAssets as asset}
+      {#each $intents.sourceAssets as asset (asset.metadata.denom)}
         <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.balance.address)}
+                  on:click={() => setAsset(asset.metadata.denom)}
           >
-            <div class:opacity-30={!asset.isSupported}>
-              {truncate(asset.symbol, 6)}
+            <div class:opacity-30={asset.metadata.metadata_level === "none"}>
+              {truncate(asset.metadata.display_symbol || asset.metadata.denom, 6)}
             </div>
-            <p class:opacity-30={!asset.isSupported}>
-              {formatUnits(asset.balance.balance, asset.supportedAsset?.decimals ?? 0)}
+            <p class:opacity-30={asset.metadata.metadata_level === "none"}>
+              {formatUnits(BigInt(asset.balance), asset.metadata.decimals ?? 0)}
             </p>
           </Button>
         </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
@@ -1,37 +1,37 @@
 <!-- ChainSelector.svelte -->
 <script lang="ts">
-import type { Readable } from "svelte/store"
-import type { ContextStore } from "$lib/components/TransferFrom/transfer/context.ts"
-import type { RawIntentsStore } from "$lib/components/TransferFrom/transfer/raw-intents.ts"
-import type { CubeFaces } from "$lib/components/TransferFrom/components/Cube/types.ts"
-import { Button } from "$lib/components/ui/button"
-import { TRANSFER_DEBUG } from "$lib/components/TransferFrom/transfer/config.ts"
+  import type { Readable } from "svelte/store"
+  import type { ContextStore } from "$lib/components/TransferFrom/transfer/context.ts"
+  import type { RawIntentsStore } from "$lib/components/TransferFrom/transfer/raw-intents.ts"
+  import type { CubeFaces } from "$lib/components/TransferFrom/components/Cube/types.ts"
+  import { Button } from "$lib/components/ui/button"
+  import { TRANSFER_DEBUG } from "$lib/components/TransferFrom/transfer/config.ts"
 
-interface Props {
-  stores: {
-    rawIntents: RawIntentsStore
-    context: Readable<ContextStore>
+  interface Props {
+    stores: {
+      rawIntents: RawIntentsStore
+      context: Readable<ContextStore>
+    }
+    rotateTo: (face: CubeFaces) => void
+    selected: "source" | "destination"
   }
-  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"]
 
-let expandedChainId: string | null = null
+  let expandedChainId: string | null = null
 
-let { rawIntents, context } = stores
+  let { rawIntents, context } = stores
 
-function setChain(selected: "source" | "destination", chainId: string) {
-  rawIntents.updateField(selected, chainId)
-  rotateTo("intentFace")
-}
+  function setChain(selected: "source" | "destination", chainId: string) {
+    rawIntents.updateField(selected, chainId)
+    rotateTo("intentFace")
+  }
 
-function toggleExpand(chainId: string) {
-  expandedChainId = expandedChainId === chainId ? null : chainId
-}
+  function toggleExpand(chainId: string) {
+    expandedChainId = expandedChainId === chainId ? null : chainId
+  }
 </script>
 
 <div class="flex flex-col h-full w-full">
@@ -100,5 +100,4 @@ function toggleExpand(chainId: string) {
       {/each}
     </div>
   </div>
-
 </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
@@ -4,9 +4,7 @@ import SelectedAsset from "$lib/components/TransferFrom/components/SelectedAsset
 import type { Readable } from "svelte/store"
 import type {
   ValidationStore,
-  ValidationStoreAndMethods
 } from "$lib/components/TransferFrom/transfer/validation.ts"
-import type { ContextStore } from "$lib/components/TransferFrom/transfer/context.ts"
 import { Button } from "$lib/components/ui/button"
 import type { IntentsStore } from "$lib/components/TransferFrom/transfer/intents.ts"
 import type { CubeFaces } from "$lib/components/TransferFrom/components/Cube/types.ts"
@@ -46,7 +44,7 @@ let { rawIntents, intents, validation } = stores
                 minlength={1}
                 maxlength={64}
                 required={true}
-                disabled={!$intents.selectedAsset.address}
+                disabled={!$intents.selectedAsset?.metadata.denom}
                 autocorrect="off"
                 placeholder="0.00"
                 spellcheck="false"

diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Transfer.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Transfer.svelte
@@ -50,7 +50,7 @@ let transferState: Writable<TransferState> = writable({ kind: "PRE_TRANSFER" })
 const transfer = async () => {
   if (!$validation.isValid) return
 
-  let parsedAmount = parseUnits($validation.transfer.amount, $validation.transfer.asset.decimals)
+  let parsedAmount = parseUnits($validation.transfer.amount, $validation.transfer.asset.metadata.decimals)
 
   /** --- APTOS START --- */
   if ($validation.transfer.sourceChain.rpc_type === "aptos") {
@@ -109,7 +109,7 @@ const transfer = async () => {
           receiver: $validation.transfer.receiver,
           amount: parsedAmount,
           authAccess: "wallet",
-          denomAddress: $validation.transfer.asset.address,
+          denomAddress: $validation.transfer.asset?.balance,
           destinationChainId: $validation.transfer.destinationChain.chain_id as ChainId
         } satisfies TransferAssetsParameters<"2">
 
@@ -201,18 +201,18 @@ const transfer = async () => {
           account: cosmosOfflineSigner,
           transport: http(`https://${rpcUrl}`),
           chainId: $validation.transfer.sourceChain.chain_id as CosmosChainId,
-          gasPrice: { amount: "0.0025", denom: $validation.transfer.asset.address }
+          gasPrice: { amount: "0.0025", denom: $validation.transfer.asset.metadata.denom }
         })
 
         const transfer = await unionClient.transferAsset({
           autoApprove: true,
           receiver: $validation.transfer.receiver,
           amount: parsedAmount,
-          denomAddress: $validation.transfer.asset.address,
+          denomAddress: $validation.transfer.asset.metadata.denom,
           account: cosmosOfflineSigner,
           // TODO: verify chain id is correct
           destinationChainId: $validation.transfer.destinationChain.chain_id as ChainId,
-          gasPrice: { amount: "0.0025", denom: $validation.transfer.asset.address }
+          gasPrice: { amount: "0.0025", denom: $validation.transfer.asset.metadata.denom }
         })
         if (transfer.isErr()) throw transfer.error
         transferState.set({ kind: "TRANSFERRING", transferHash: transfer.value })
@@ -273,7 +273,7 @@ const transfer = async () => {
         const approve = await unionClient.approveTransaction({
           amount: parsedAmount,
           receiver: $validation.transfer.receiver,
-          denomAddress: getAddress($validation.transfer.asset.address),
+          denomAddress: getAddress($validation.transfer.asset.metadata.denom),
           // TODO: verify chain id is correct
           destinationChainId: $validation.transfer.destinationChain.chain_id as ChainId
         })
@@ -334,7 +334,7 @@ const transfer = async () => {
           autoApprove: false,
           amount: parsedAmount,
           receiver: $validation.transfer.receiver,
-          denomAddress: getAddress($validation.transfer.asset.address),
+          denomAddress: getAddress($validation.transfer.asset.metadata.denom),
           destinationChainId: $validation.transfer.destinationChain.chain_id as ChainId
         })
         if (transfer.isErr()) throw transfer.error
@@ -387,10 +387,10 @@ const transfer = async () => {
         transfer_day: toIsoString(new Date(Date.now())).split("T")[0],
         receiver: $validation.transfer?.receiver,
         assets: {
-          [$validation.transfer?.asset.address]: {
+          [$validation.transfer?.asset.metadata.denom]: {
             info:
               $validation.transfer?.sourceChain?.assets?.find(
-                d => d.denom === $validation.transfer?.asset.address
+                d => d.denom === $validation.transfer?.asset.metadata.denom
               ) ?? null,
             amount: parsedAmount
           }
@@ -643,7 +643,7 @@ let stepperSteps = derived(
       </div>
       <div class="flex justify-between">
         <span>ASSET:</span>
-        <span>{truncate($validation.transfer.asset.address, 6)}</span>
+        <span>{truncate($validation.transfer.asset.metadata.denom, 6)}</span>
       </div>
       <div class="flex justify-between">
         <span>AMOUNT:</span>

diff --git a/app/src/lib/components/TransferFrom/components/SelectedAsset.svelte b/app/src/lib/components/TransferFrom/components/SelectedAsset.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-import type { Readable } from "svelte/store"
-import { Button } from "$lib/components/ui/button"
-import { truncate } from "$lib/utilities/format.ts"
-import type { IntentsStore } from "$lib/components/TransferFrom/transfer/intents.ts"
-import type { ValidationStore } from "$lib/components/TransferFrom/transfer/validation.ts"
-import type { RawIntentsStore } from "$lib/components/TransferFrom/transfer/raw-intents.ts"
+  import type { Readable } from "svelte/store"
+  import { Button } from "$lib/components/ui/button"
+  import { truncate } from "$lib/utilities/format.ts"
+  import type { IntentsStore } from "$lib/components/TransferFrom/transfer/intents.ts"
+  import type { ValidationStore } from "$lib/components/TransferFrom/transfer/validation.ts"
+  import type { RawIntentsStore } from "$lib/components/TransferFrom/transfer/raw-intents.ts"
 
-interface Props {
-  rawIntents: RawIntentsStore
-  intents: Readable<IntentsStore>
-  validation: Readable<ValidationStore>
-  onSelectAsset: () => void
-}
+  interface Props {
+    rawIntents: RawIntentsStore
+    intents: Readable<IntentsStore>
+    validation: Readable<ValidationStore>
+    onSelectAsset: () => void
+  }
 
-export let rawIntents: Props["rawIntents"]
-export let intents: Props["intents"]
-export let validation: Props["validation"]
-export let onSelectAsset: Props["onSelectAsset"]
+  export let rawIntents: Props["rawIntents"]
+  export let intents: Props["intents"]
+  export let validation: Props["validation"]
+  export let onSelectAsset: Props["onSelectAsset"]
 </script>
 
 <div class="flex flex-col w-full gap-2">
@@ -28,10 +28,13 @@ export let onSelectAsset: Props["onSelectAsset"]
           class="border-2 font-bold"
           on:click={onSelectAsset}
   >
-    {$intents.selectedAsset.symbol ?
-      truncate($intents.selectedAsset.symbol, 18) :
-      $rawIntents.asset ? truncate($rawIntents.asset, 6) :
-        "Select Asset"}
+    {#if $intents.selectedAsset}
+      {truncate($intents.selectedAsset.metadata.display_symbol || $intents.selectedAsset.metadata.denom, 18)}
+    {:else if $rawIntents.asset}
+      {truncate($rawIntents.asset, 6)}
+    {:else}
+      Select Asset
+    {/if}
   </Button>
   {#if $validation.errors.asset}
     <p class="text-red-500 text-sm">{$validation.errors.asset}</p>

diff --git a/app/src/lib/components/TransferFrom/index.svelte b/app/src/lib/components/TransferFrom/index.svelte
@@ -7,18 +7,14 @@ import Chains from "$lib/components/TransferFrom/components/Cube/faces/Chains.sv
 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"
-import type { Chain, UserAddresses } from "$lib/types.ts"
-import { userBalancesQuery } from "$lib/queries/balance"
+import type { Chain } from "$lib/types.ts"
+import { allChainBalances } from "$lib/queries/balance"
 import { balanceStore, userAddress } from "$lib/components/TransferFrom/transfer/balances.ts"
 
 export let chains: Array<Chain>
 
-$: userBalancesQuery({
-  chains,
-  userAddr: $userAddress,
-  connected: true
-}).subscribe(x => {
-  balanceStore.set(x)
+$: allChainBalances(chains, userAddress).subscribe(data => {
+  balanceStore.set(data)
 })
 
 const stores = createTransferStore(chains)
@@ -34,7 +30,7 @@ const stores = createTransferStore(chains)
   </div>
 
   <div slot="destination" let:rotateTo class="w-full h-full">
-    <Chains {stores} {rotateTo} selected="destination" />
+    <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/balances.ts b/app/src/lib/components/TransferFrom/transfer/balances.ts
@@ -1,10 +1,11 @@
-import { derived, type Readable, writable } from "svelte/store"
+
 import type { UserAddresses } from "$lib/types.ts"
 import { userAddrCosmos } from "$lib/wallet/cosmos"
 import { userAddrEvm } from "$lib/wallet/evm"
 import { userAddressAptos } from "$lib/wallet/aptos"
 import type { QueryObserverResult } from "@tanstack/query-core"
-import type { BalanceResult } from "$lib/queries/balance"
+import type {BalanceData} from "$lib/queries/balance";
+import {derived, type Readable, writable} from "svelte/store";
 
 export let userAddress: Readable<UserAddresses> = derived(
   [userAddrCosmos, userAddrEvm, userAddressAptos],
@@ -15,4 +16,4 @@ export let userAddress: Readable<UserAddresses> = derived(
   })
 )
 
-export const balanceStore = writable<Array<QueryObserverResult<Array<BalanceResult>, Error>>>()
+export const balanceStore = writable<BalanceData[][]>([])