From 88a1de74492c09e73185f986e1dcb78bfd83ef00 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Thu, 2 Jan 2025 21:32:35 +0100
Subject: [PATCH] feat(app): save progress

---
 .../components/Cube/faces/Assets.svelte       | 48 ++++++++++---------
 .../components/Cube/faces/Chains.svelte       |  2 +-
 .../components/Cube/faces/Intent.svelte       |  2 +-
 .../components/Cube/faces/Transfer.svelte     |  9 +++-
 4 files changed, 36 insertions(+), 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
index c4c10ca611..d5a8a1be72 100644
--- 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
index 2c165ce769..5ab242b4af 100644
--- 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
index 6481bbd0f2..77597a5df9 100644
--- 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
index 0d0c0ee70e..0c0da73b37 100644
--- 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>
\ No newline at end of file
+<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>
\ No newline at end of file