Better mobile support on initial selector click

synapsecns · Apr 4, 2024 · bf18720 · bf18720
1 parent 9ba0d8b
commit bf18720
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 69 deletions.
diff --git a/packages/synapse-interface/components/ui/SelectSpecificTokenButton.tsx b/packages/synapse-interface/components/ui/SelectSpecificTokenButton.tsx
@@ -65,57 +65,6 @@ export const SelectSpecificTokenButton = ({
   )
 }
 
-export enum BestOptionType {
-  RATE = 'Best rate',
-  SPEED = 'Fastest',
-}
-
-export const OptionTag = ({ type }: { type: BestOptionType }) => {
-  return (
-    <div
-      data-test-id="option-tag"
-      className="flex px-3 py-0.5 mr-3 text-sm whitespace-nowrap text-primary rounded-xl"
-      style={{
-        background:
-          'linear-gradient(to right, rgba(128, 0, 255, 0.2), rgba(255, 0, 191, 0.2))',
-      }}
-    >{`${type}`}</div>
-  )
-}
-
-export const OptionDetails = ({
-  exchangeRate,
-  estimatedDurationInSeconds,
-}: {
-  exchangeRate: string
-  estimatedDurationInSeconds: number
-}) => {
-  let showTime
-  let timeUnit
-
-  if (estimatedDurationInSeconds > 60) {
-    showTime = Math.floor(estimatedDurationInSeconds / 60)
-    timeUnit = 'min'
-  } else {
-    showTime = estimatedDurationInSeconds
-    timeUnit = 'seconds'
-  }
-
-  return (
-    <div data-test-id="option-details" className="flex flex-col">
-      <div className="flex items-center font-normal">
-        <div className="flex text-sm text-secondary whitespace-nowrap">
-          1&nbsp;:&nbsp;
-        </div>
-        <div className="mb-[1px] text-primary">{exchangeRate}</div>
-      </div>
-      <div className="text-xs text-right text-secondary">
-        {showTime} {timeUnit}
-      </div>
-    </div>
-  )
-}
-
 const ButtonContent = memo(
   ({
     token,

diff --git a/packages/synapse-interface/components/ui/SelectorWrapper.tsx b/packages/synapse-interface/components/ui/SelectorWrapper.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 
 import { getHoverStyleForButton } from '@/styles/hover'
 import { DropDownArrowSvg } from '@/components/icons/DropDownArrowSvg'
@@ -116,23 +116,25 @@ export const SelectorWrapper = ({
           data-test-id={`${dataTestId}-overlay`}
           className="absolute z-20 pt-1 animate-slide-down"
         >
-          <div className="border rounded shadow-md bg-bgLight border-separator">
-            <div className="flex items-center p-1 font-medium">
-              <SlideSearchBox
-                placeholder="Find"
-                searchStr={searchStr}
-                onSearch={onSearch}
-              />
-              <CloseButton onClick={onClose} />
+          <div className="relative">
+            <div className="absolute border rounded shadow-md bg-bgLight border-separator">
+              <div className="flex items-center p-1 font-medium">
+                <SlideSearchBox
+                  placeholder="Find"
+                  searchStr={searchStr}
+                  onSearch={onSearch}
+                />
+                <CloseButton onClick={onClose} />
+              </div>
+              <div
+                data-test-id={`${dataTestId}-list`}
+                className="overflow-y-auto max-h-96"
+                onClick={onClose}
+              >
+                {children}
+              </div>
+              <SearchResults searchStr={searchStr} />
             </div>
-            <div
-              data-test-id={`${dataTestId}-list`}
-              className="overflow-y-auto max-h-96"
-              onClick={onClose}
-            >
-              {children}
-            </div>
-            <SearchResults searchStr={searchStr} />
           </div>
         </div>
       )}

diff --git a/packages/synapse-interface/components/ui/TokenSelector.tsx b/packages/synapse-interface/components/ui/TokenSelector.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 
 import { type Token } from '@/utils/types'