feat(app): save progress

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

Hide file tree

Showing 4 changed files with 36 additions and 25 deletions.
diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Assets.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Assets.svelte
@@ -31,28 +31,32 @@
 
 </script>
 
-<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="flex flex-col justify-between h-full w-full p-4">
+  {#if $context.balances.length}
+    <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>
+  {:else}
+    <p>No spendable balances</p>
+  {/if}
 
   <div class="mt-4">
     <Button on:click={() => rotateTo("intentFace")} class="w-full">

diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Chains.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Chains.svelte
@@ -31,7 +31,7 @@
   }
 </script>
 
-<div class="flex h-full justify-between flex-col gap-4">
+<div class="flex h-full justify-between flex-col gap-4 p-4">
   <div class="flex flex-col gap-2">
     {#each $context.chains as chain}
       <Button variant="ghost"

diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Intent.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Intent.svelte
@@ -23,7 +23,7 @@
   let {intents, validation, context} = stores
 </script>
 
-<div class="flex flex-col justify-between w-full h-full">
+<div class="flex flex-col justify-between w-full h-full p-4">
   <div class="flex flex-col gap-4">
     <Direction {context} {intents} getSourceChain={() => rotateTo("sourceFace")} getDestinationChain={() => rotateTo("destinationFace")}/>
     <SelectedAsset {context} {intents} onSelectAsset={() => rotateTo("assetsFace")}/>

diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Transfer.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Transfer.svelte
@@ -4,6 +4,7 @@
   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: {
@@ -20,4 +21,10 @@
   $: ({intents, validation, context} = stores)
 </script>
 
-<button on:click={() => rotateTo("intentFace")}>Transfer</button>
+<div class="h-full w-full flex flex-col justify-between p-4">
+  <h2>Transfer</h2>
+  <div class="flex flex-col gap-2">
+    <Button>Confirm</Button>
+    <Button variant="outline" on:click={() => rotateTo("intentFace")}>CANCEL</Button>
+  </div>
+</div>