fix(app): check pointers

unionlabs · Feb 7, 2025 · 0ce14ba · 0ce14ba
1 parent af07ce2
commit 0ce14ba
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 17 deletions.
diff --git a/app/src/lib/components/TransferFrom/components/Cube/FaceWrapper.svelte b/app/src/lib/components/TransferFrom/components/Cube/FaceWrapper.svelte
@@ -1,5 +1,4 @@
 <script>
-export let visible = true
 export let width = 0 // Pixel value
 export let height = 0 // Pixel value
 export let translateZ = 0
@@ -8,9 +7,6 @@ export let rotateY = "0deg"
 
 <div
         class="absolute bg-muted flex flex-col items-center border-2 h-full"
-        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 />

diff --git a/app/src/lib/components/TransferFrom/components/Cube/faces/Assets.svelte b/app/src/lib/components/TransferFrom/components/Cube/faces/Assets.svelte
@@ -32,7 +32,7 @@ $: filteredTokens =
     : (intents.baseTokens ?? [])
 </script>
 
-<div class="flex flex-col h-full w-full overflow-y-scroll">
+<div class="flex flex-col h-full w-full">
   <div class="text-primary p-2 px-4 flex items-center justify-between border-b-2">
     <div class="flex items-center gap-2">
       <span class="font-bold uppercase">Assets</span>
@@ -51,12 +51,11 @@ $: filteredTokens =
     >✕</button>
   </div>
 
-  <!-- SCROLL CONTAINER -->
-  <div class="flex-1 relative border h-full">
-    <div class="h-full border border-red-600">
+  <div class="flex-1 relative">
+    <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
       {#each filteredTokens as token}
         <button
-                class="px-2 h-10 py-1 hover:bg-neutral-400 dark:hover:bg-neutral-800 text-md flex justify-start items-center w-full"
+                class="px-2 py-1 hover:bg-neutral-400 dark:hover:bg-neutral-800 text-md flex justify-start items-center w-full"
                 on:click={() => setAsset(token.denom)}
         >
           <Token chainId={$rawIntents.source} denom={token.denom} amount={token.balance} {chains}/>

diff --git a/app/src/lib/components/TransferFrom/components/Cube/index.svelte b/app/src/lib/components/TransferFrom/components/Cube/index.svelte
@@ -83,15 +83,16 @@ $: translateZ = width / 2
       <slot name="intent" {rotateTo}/>
     </FaceWrapper>
 
-    <!--Source and destination is on the same degree, we just hide one depending on clicked intent.-->
-    <!--By doing this we can "layer" faces and reuse the rotation-->
-    <FaceWrapper {width} {height} {translateZ} visible={currentVisibleFace === 'source'} rotateY={"90deg"}>
-      <slot name="source" {rotateTo}/>
-    </FaceWrapper>
+    {#if currentVisibleFace === 'source'}
+      <FaceWrapper {width} {height} {translateZ} rotateY={"90deg"}>
+        <slot name="source" {rotateTo}/>
+      </FaceWrapper>
+    {:else if currentVisibleFace === 'destination'}
+      <FaceWrapper {width} {height} {translateZ} rotateY={"90deg"}>
+        <slot name="destination" {rotateTo}/>
+      </FaceWrapper>
+    {/if}
 
-    <FaceWrapper {width} {height} {translateZ} visible={currentVisibleFace === 'destination'} rotateY={"90deg"}>
-      <slot name="destination" {rotateTo}/>
-    </FaceWrapper>
 
     <FaceWrapper {width} {height} {translateZ} visible rotateY={"270deg"}>
       <slot name="assets" {rotateTo}/>