Transfer submission state machine and encoding fixes

app2/app2.nix

@@ -28,7 +28,7 @@ _: {
             ../typescript-sdk
             ../ts-sdk
           ];
-          hash = "sha256-5ha02SZhT3J7I+KFphc1KdcpMbJb5UHa3oUlyiXduqU=";
+          hash = "sha256-v5h5l2fwD01PlcrSzKWIk6swc3m6wqgjDzbti3DnAxI=";
           buildInputs = deps;
           nativeBuildInputs = buildInputs;
           pnpmWorkspaces = [

app2/src/app.css

@@ -20,6 +20,7 @@
 
 @theme {
   --color-zinc-925: oklch(0.1755 0.0055 285.854);
+  --color-babylon-orange: #cf6533;
   --color-union: oklch(0.84 0.1281 215.6);
   --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;

app2/src/lib/components/Transfer/ChainAsset/AssetSelector.svelte

@@ -103,7 +103,7 @@ async function toggleSearch() {
         <div class="flex flex-col gap-1 p-2 pb-16">
           {#each filteredTokens as token}
             {#key token.denom}
-              <TransferAsset {token} {selectAsset} />
+              <TransferAsset chain={transfer.sourceChain.value} {token} {selectAsset} />
             {/key}
           {/each}
         </div>
@@ -145,4 +145,4 @@ async function toggleSearch() {
       </button>
     </div>
   </div>
-</div>
+</div>

app2/src/lib/components/Transfer/ChainAsset/ChainSelector.svelte

@@ -6,6 +6,7 @@ import { tokensStore } from "$lib/stores/tokens.svelte.ts"
 import { transfer } from "$lib/components/Transfer/transfer.svelte.ts"
 import type { Chain } from "@unionlabs/sdk/schema"
 import { chainLogoMap } from "$lib/constants/chain-logos.ts"
+import { Array as Arr } from "effect"
 
 type Props = {
   type: "source" | "destination"
@@ -29,12 +30,26 @@ function selectChain(chain: Chain) {
 
   onSelect()
 }
+
+// For btc.union.build, only show bitcoin chains
+const filteredChains = $derived(
+  chains.data.pipe(
+    Option.map(
+      Arr.filter(c =>
+        ["corn.21000001", "bob.60808", "bob.808813", "babylon.bbn-test-5"].includes(
+          c.universal_chain_id
+        )
+      )
+    )
+  )
+)
 </script>
 
 <div class="p-4">
-  {#if Option.isSome(chains.data)}
+  {#if Option.isSome(filteredChains)}
+  {@const chainss = filteredChains.value}
     <div class="grid grid-cols-3 gap-2">
-      {#each chains.data.value as chain}
+      {#each chainss as chain}
         {@const isSelected = (type === "source" && transfer.raw.source === chain.chain_id) ||
         (type === "destination" && transfer.raw.destination === chain.chain_id)}
         {@const isDisabled = type === "destination" && transfer.raw.source === chain.chain_id}
@@ -63,7 +78,7 @@ function selectChain(chain: Chain) {
           <span class="text-xs text-center truncate w-fit">{chain.display_name}</span>
 
           {#if isDisabled}
-            <span class="text-xs text-sky-400">From chain</span>
+            <span class="text-xs text-sky-400 -mt-2">From Chain</span>
           {/if}
         </button>
       {/each}
@@ -73,4 +88,4 @@ function selectChain(chain: Chain) {
       <span class="inline-block animate-pulse">Loading chains...</span>
     </div>
   {/if}
-</div>
+</div>

app2/src/lib/components/Transfer/ChainAsset/TransferAsset.svelte

@@ -1,19 +1,20 @@
 <script lang="ts">
 import { cn } from "$lib/utils/index.js"
 import { transfer } from "$lib/components/Transfer/transfer.svelte.js"
-import type { Chain, Token } from "@unionlabs/sdk/schema"
+import { TokenRawAmount, type Chain, type Token } from "@unionlabs/sdk/schema"
 import { Option } from "effect"
 import Skeleton from "$lib/components/ui/Skeleton.svelte"
-import { formatUnits } from "viem"
 import { chains } from "$lib/stores/chains.svelte.ts"
 import SharpArrowLeft from "$lib/components/icons/SharpArrowLeft.svelte"
+import TokenComponent from "$lib/components/model/TokenComponent.svelte"
 
 type Props = {
   token: Token
+  chain: Chain
   selectAsset: (token: Token) => void
 }
 
-let { token, selectAsset }: Props = $props()
+let { token, chain, selectAsset }: Props = $props()
 
 let isSelected = $derived(transfer.raw.asset === token.denom)
 
@@ -23,19 +24,6 @@ let tokenBalance = $derived.by(() => {
   return found ? Option.some(found) : Option.none()
 })
 
-let displayAmount = $derived.by(() => {
-  if (Option.isNone(tokenBalance)) return "0.00"
-
-  const balanceInfo = tokenBalance.value
-
-  if (Option.isNone(balanceInfo.balance)) return "0.00"
-
-  const decimals = balanceInfo.decimals || token.representations[0]?.decimals || 0
-
-  const balanceValue = Option.getOrElse(balanceInfo.balance, () => "0")
-  return formatUnits(BigInt(balanceValue), decimals)
-})
-
 let isLoading = $derived(Option.isSome(transfer.sortedBalances) && Option.isNone(tokenBalance))
 
 export const toDisplayName = (
@@ -54,31 +42,19 @@ export const toDisplayName = (
          selectAsset(token)
         }}
 >
-    <div class="flex items-center flex gap-1 items-center overflow-x-scroll text-sm text-zinc-200">
+    <div class="flex items-center gap-1 overflow-x-scroll text-sm text-zinc-200">
       <div class="mr-1">
         {#if isLoading}
           <Skeleton class="h-3 w-16"/>
         {:else if Option.isSome(tokenBalance) && Option.isSome(tokenBalance.value.error)}
           <span class="text-red-400">Error</span>
-        {:else}
-          {displayAmount}
+        {:else if Option.isSome(tokenBalance)}
+          {#if Option.isSome(tokenBalance.value.balance)}
+            <TokenComponent {chain} denom={token.denom} amount={tokenBalance.value.balance.value} />
+          {:else}
+            <TokenComponent {chain} denom={token.denom} amount={TokenRawAmount.make(0n)} />
+          {/if}
         {/if}
       </div>
-      <div class="font-medium">
-        {token.representations[0]?.symbol ?? token.denom}
-      </div>
-    </div>
-    <div class="text-zinc-400 text-nowrap text-xs flex items-center gap-1">
-      {#if Option.isSome(chains.data)}
-        {#each token.wrapping as wrapping, i}
-          {#if i !== 0}
-            <SharpArrowLeft class="text-sky-300"/>
-          {/if}
-          {toDisplayName(
-            wrapping.unwrapped_chain.universal_chain_id,
-            chains.data.value,
-          )}
-        {/each}
-      {/if}
     </div>
-</button>
+</button>