Merge pull request #18 from mystic-lab/new-swap

New swap
cosmos · Nov 20, 2023 · 611f171 · 611f171
2 parents 4d76958 + 56be716
commit 611f171
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/packages/ui/src/components/Select.svelte b/packages/ui/src/components/Select.svelte
@@ -25,6 +25,10 @@
     dispatch('change', selectedItem);
   }
 
+  function opened() {
+    dispatch('open', isOpen);
+  }
+
   onMount(() => {
     window.addEventListener('resize', checkDropdownDirection);
     if (!selectedItem) {
@@ -70,6 +74,7 @@
         aria-haspopup="true"
         aria-expanded="true"
         on:click={() => {
+          opened();
           isOpen = !isOpen;
           checkDropdownDirection();
         }}
@@ -92,7 +97,7 @@
 
   {#if isOpen}
     <div
-      class={`origin-top-right absolute right-0 ${shouldOpenUpwards ? 'bottom-full mb-3' : 'mt-2'} w-full rounded-md shadow-lg custom-bg text-white ring-1 ring-black ring-opacity-5 ${isOpen ? 'z-[500]' : ''} overflow-y-auto max-h-[200px] hide-scrollbar overflow-scroll`}
+      class={`origin-top-right absolute right-0 ${shouldOpenUpwards ? 'bottom-full mb-3' : 'mt-2'} w-full rounded-md shadow-lg custom-bg text-white ring-1 ring-black ring-opacity-5 ${isOpen ? 'z-[2000]' : ''} overflow-y-auto max-h-[200px] hide-scrollbar overflow-scroll`}
     >
       <div
         class="py-1 inter-font"

diff --git a/packages/ui/src/components/Swap.svelte b/packages/ui/src/components/Swap.svelte
@@ -42,6 +42,7 @@
     let estimatedTime = 1;
     let loading = false;
     let showAlert = false;
+    let inputShown: "from" | "to" = "from";
 
     const copy = (text: string) => {
         navigator.clipboard.writeText(text);
@@ -268,7 +269,7 @@
         </div>
         <div class="w-full mt-4">
             <div class="flex flex-col">
-                <div class="w-full mb-[10px] relative z-[100]">
+                <div class="w-full mb-[10px] relative {inputShown === "to" ? "z-1000" : "z-50"}">
                     <div class="w-full rounded-lg border border-solid border-[#ffffff1a] backdrop-blur-lg backdrop-brightness-100 p-4">
                         <div class="flex flex-between">
                             <div class="w-1/2 font-medium text-white text-lg tracking-tight leading-normal">
@@ -290,10 +291,10 @@
                         </div>
                         <div class="flex justify-center items-center gap-2">
                             <div class="w-1/2">
-                                <Select on:change={update} text="Select Chain" items={allChains} bind:selectedItem={sourceChain} showKey="chain_name" imageKey="logo_uri"/>
+                                <Select on:open={() => inputShown = "from"} on:change={update} text="Select Chain" items={allChains} bind:selectedItem={sourceChain} showKey="chain_name" imageKey="logo_uri"/>
                             </div>
                             <div class="w-1/2">
-                                <Select on:change={update} text="Select Token" items={sourceTokens} bind:selectedItem={sourceCoin} showKey="display" imageKey="logo_uri"/>
+                                <Select on:open={() => inputShown = "from"} on:change={update} text="Select Token" items={sourceTokens} bind:selectedItem={sourceCoin} showKey="display" imageKey="logo_uri"/>
                             </div>
                         </div>
                         <div>
@@ -313,10 +314,10 @@
                     </div>
                 </div>
                 <!-- svelte-ignore a11y-click-events-have-key-events -->
-                <div on:click={swapRoute} class="w-10 h-10 left-1/2 cursor-pointer z-[75] relative">
+                <div on:click={swapRoute} class="w-10 h-10 left-1/2 cursor-pointer z-[40] relative">
                     <img class="" src="/change-swap.svg" alt="change_positions"/>
                 </div>
-                <div class="w-full mt-[10px] relative z-50">
+                <div class="w-full mt-[10px] relative  {inputShown === "from" ? "z-1000" : "z-50"}">
                     <div class="w-full rounded-lg border border-solid border-[#ffffff1a] backdrop-blur-lg backdrop-brightness-100 p-4">
                         <div class="flex flex-between items-center">
                             <div class="w-1/2 font-medium text-white text-lg tracking-tight leading-normal">
@@ -363,10 +364,10 @@
                         </div>
                         <div class="flex justify-between items-center gap-2">
                             <div class="w-1/2">
-                                <Select on:change={update} text="Select Chain" items={allChains} bind:selectedItem={destinationChain} showKey="chain_name" imageKey="logo_uri"/>
+                                <Select on:open={() => inputShown = "to"} on:change={update} text="Select Chain" items={allChains} bind:selectedItem={destinationChain} showKey="chain_name" imageKey="logo_uri"/>
                             </div>
                             <div class="w-1/2">
-                                <Select on:change={update} text="Select Token" items={destTokens} bind:selectedItem={destinationCoin} showKey="display" imageKey="logo_uri"/>
+                                <Select on:open={() => inputShown = "to"} on:change={update} text="Select Token" items={destTokens} bind:selectedItem={destinationCoin} showKey="display" imageKey="logo_uri"/>
                             </div>
                         </div>
                         <div class="relative flex justify-center items-center">