Merge pull request #362 from asgardex/asset-select-modal-redesign

Asset Select modal redesign
asgardex · Sep 20, 2024 · bb6df97 · bb6df97
2 parents 8a1d4bd + 0ce6808
commit bb6df97
Show file tree

Hide file tree

Showing 14 changed files with 97 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,10 +1,12 @@
 # 1.22.5 (2024-09-6)
 
 ## Updates/Fixes
+
 - Add trade asset table [#321](https://github.com/asgardex/asgardex-desktop/pull/322)
 - add saved address to send screen [#343](https://github.com/asgardex/asgardex-desktop/pull/349)
 - fix asset mismatch and lp retrieval tool [350](https://github.com/asgardex/asgardex-desktop/pull/351)
 - redesign swap screen [#359](https://github.com/asgardex/asgardex-desktop/pull/359)
+- redesign asset select modal [#362](https://github.com/asgardex/asgardex-desktop/pull/362)
 
 # 1.22.4 (2024-09-6)
 

diff --git a/package.json b/package.json
@@ -117,6 +117,7 @@
     "bignumber.js": "9.0.0",
     "caniuse-lite": "^1.0.30001346",
     "chart.js": "^3.8.0",
+    "clsx": "^2.1.1",
     "cosmos-client": "0.39.2",
     "dayjs": "^1.11.10",
     "dotenv": "^16.4.5",

diff --git a/src/renderer/components/uielements/assets/assetInput/AssetInput.tsx b/src/renderer/components/uielements/assets/assetInput/AssetInput.tsx
@@ -179,7 +179,7 @@ export const AssetInput: React.FC<Props> = (props): JSX.Element => {
           asset={asset}
           assets={assets}
           network={network}
-          dialogHeadline={intl.formatMessage({ id: 'common.asset.quickSelect' })}
+          dialogHeadline={intl.formatMessage({ id: 'common.asset.chooseAsset' })}
           shadowless
           disabled={disabled}
         />

diff --git a/src/renderer/components/uielements/assets/assetMenu/AssetMenu.tsx b/src/renderer/components/uielements/assets/assetMenu/AssetMenu.tsx
@@ -4,6 +4,7 @@ import { Dialog, Transition } from '@headlessui/react'
 import { ArchiveBoxXMarkIcon, CheckIcon, XMarkIcon } from '@heroicons/react/24/outline'
 import { Network } from '@xchainjs/xchain-client'
 import { AnyAsset, assetToString, AssetType, Chain } from '@xchainjs/xchain-util'
+import clsx from 'clsx'
 import * as A from 'fp-ts/lib/Array'
 import * as FP from 'fp-ts/lib/function'
 import * as NEA from 'fp-ts/lib/NonEmptyArray'
@@ -15,7 +16,6 @@ import { eqAsset } from '../../../../helpers/fp/eq'
 import { emptyString } from '../../../../helpers/stringHelper'
 import { FilterCheckbox } from '../../../wallet/assets/AssetsTableCollapsable.styles'
 import { BaseButton } from '../../button'
-import { Tooltip } from '../../common/Common.styles'
 import { InputSearch } from '../../input'
 import { Label } from '../../label'
 import { AssetData } from '../assetData'
@@ -107,20 +107,19 @@ export const AssetMenu: React.FC<Props> = (props): JSX.Element => {
             </div>
           ),
           (assets) => (
-            <div className="w-full overflow-y-auto">
+            <div className="w-[calc(100%-32px)] overflow-y-auto">
               {FP.pipe(
                 assets,
                 NEA.map((assetInList) => {
                   const selected = eqAsset.equals(asset, assetInList)
                   return (
                     <BaseButton
-                      className={`w-full !justify-between !pr-20px
-                        hover:bg-gray0 hover:dark:bg-gray0d`}
+                      className="w-full !justify-between !pr-20px hover:bg-gray0 hover:dark:bg-gray0d"
                       key={assetToString(assetInList)}
                       onClick={() => handleChangeAsset(assetInList)}
                       disabled={selected}>
                       <AssetData asset={assetInList} network={network} className="" />
-                      {selected && <CheckIcon className="h-20px w-20px  text-turquoise" />}
+                      {selected && <CheckIcon className="h-20px w-20px text-turquoise" />}
                     </BaseButton>
                   )
                 })
@@ -168,18 +167,29 @@ export const AssetMenu: React.FC<Props> = (props): JSX.Element => {
 
     // Render unique chains as clickable icons in a horizontal row
     return (
-      <div className="my-4 flex flex-row flex-wrap justify-center gap-4 ">
-        {/* Adjust Tailwind classes as needed */}
-        {Array.from(uniqueChains).map((chain) => (
-          <div key={chain} onClick={() => handleChainSelect(chain)} className="cursor-pointer">
-            <div className="rounded-full hover:shadow-lg dark:hover:shadow-turquoise">
-              <AssetIcon asset={getChainAsset(chain)} network={network} />
+      <div className="flex w-full flex-col px-4 pb-4">
+        <h6 className="text-base font-normal text-text2 dark:text-text2d">
+          {intl.formatMessage({ id: 'common.asset.quickSelect' })}
+        </h6>
+        <div className="flex flex-row space-x-2 overflow-x-scroll pb-2">
+          {Array.from(uniqueChains).map((chain) => (
+            <div key={chain} onClick={() => handleChainSelect(chain)} className="cursor-pointer">
+              <div
+                className={clsx(
+                  'flex flex-col items-center',
+                  'space-y-2 px-4 py-2',
+                  'rounded-lg border border-solid border-bg2 dark:border-bg2d',
+                  'hover:bg-bg2 dark:hover:bg-bg2d'
+                )}>
+                <AssetIcon asset={getChainAsset(chain)} network={network} />
+                <span className="text-text2 dark:text-text2d">{chain}</span>
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
+        </div>
       </div>
     )
-  }, [assets, handleChainSelect, network])
+  }, [assets, handleChainSelect, network, intl])
 
   // Ref to `InputSearch` - needed for intial focus in dialog
   // @see https://headlessui.com/react/dialog#managing-initial-focus
@@ -216,44 +226,47 @@ export const AssetMenu: React.FC<Props> = (props): JSX.Element => {
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95">
             <Dialog.Panel
-              className="relative mx-auto flex h-[75%] max-h-[500px] min-h-[350px] max-w-[250px] flex-col
-        items-center bg-bg0
-         p-20px shadow-full dark:bg-bg0d dark:shadow-fulld md:max-w-[350px] md:p-40px
-          ">
-              <BaseButton
-                className="absolute right-20px top-20px !p-0 text-gray1 hover:text-gray2 dark:text-gray1d hover:dark:text-gray2d"
-                onClick={() => onClose()}>
-                <XMarkIcon className="h-20px w-20px text-inherit" />
-              </BaseButton>
-              {headline && (
-                <h1 className="my-0 px-5px text-center text-[16px] uppercase text-text2 dark:text-text2d">
-                  {headline}
-                </h1>
-              )}
+              className={clsx(
+                'mx-auto flex flex-col items-center py-5',
+                'h-3/4 max-h-[600px] min-h-[350px] w-full max-w-[360px] md:max-w-[480px]',
+                'bg-bg0 dark:bg-bg0d',
+                'rounded-lg border border-solid border-gray1 dark:border-gray0d'
+              )}>
+              <div className="flex w-full items-center justify-between px-5">
+                {headline && (
+                  <h1 className="my-0 text-center text-xl uppercase text-text2 dark:text-text2d">{headline}</h1>
+                )}
+                <BaseButton
+                  className="!p-0 text-gray1 hover:text-gray2 dark:text-gray1d hover:dark:text-gray2d"
+                  onClick={() => onClose()}>
+                  <XMarkIcon className="h-20px w-20px text-inherit" />
+                </BaseButton>
+              </div>
+              <div className="my-4 h-[1px] w-full bg-gray1 dark:bg-gray0d" />
               {chainFilter}
-              <Tooltip title={intl.formatMessage({ id: 'common.searchExample' })}>
+              <div className="w-full px-4">
                 <InputSearch
                   ref={inputSearchRef}
-                  className="my-10px"
+                  className="w-full"
+                  classNameInput="rounded-lg py-2"
                   size="normal"
                   onChange={searchHandler}
                   onCancel={clearSearchValue}
                   onEnter={onEnterHandler}
                   placeholder={intl.formatMessage({ id: 'common.searchAsset' })}
                 />
-              </Tooltip>
-
-              <div className="flex items-center justify-start">
-                <Label className="mr-2 cursor-pointer text-sm font-medium text-text2 dark:text-text2d">
-                  {intl.formatMessage({ id: 'common.excludeSynth' })}
-                </Label>
-                <FilterCheckbox
-                  id="synth-toggle"
-                  type="checkbox"
-                  className="cursor-pointer rounded border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-                  checked={excludeSynth}
-                  onChange={(e) => setExcludeSynth(e.target.checked)}
-                />
+                <div className="flex items-center justify-start">
+                  <Label className="mr-2 cursor-pointer text-sm font-medium text-text2 dark:text-text2d">
+                    {intl.formatMessage({ id: 'common.excludeSynth' })}
+                  </Label>
+                  <FilterCheckbox
+                    id="synth-toggle"
+                    type="checkbox"
+                    className="cursor-pointer rounded border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+                    checked={excludeSynth}
+                    onChange={(e) => setExcludeSynth(e.target.checked)}
+                  />
+                </div>
               </div>
               {renderAssets}
             </Dialog.Panel>

diff --git a/src/renderer/components/uielements/input/InputSearch.tsx b/src/renderer/components/uielements/input/InputSearch.tsx
@@ -87,7 +87,7 @@ export const InputSearch = forwardRef<HTMLInputElement, Props>((props, ref): JSX
   }
 
   return (
-    <div className={`relative  ${className}`}>
+    <div className={`relative ${className}`}>
       <MagnifyingGlassIcon
         className={`absolute top-[50%] ${iconOffsetL[size]} ${
           iconSize[size]

diff --git a/src/renderer/i18n/de/common.ts b/src/renderer/i18n/de/common.ts
@@ -147,6 +147,7 @@ const common: CommonMessages = {
   'common.asset.base': 'Basis',
   'common.asset.change': 'Ändere Asset',
   'common.asset.quickSelect': 'Schnellauswahl L1',
+  'common.asset.chooseAsset': 'Wählen Sie ein Asset',
   'common.noResult': 'Kein Ergebnis',
   'common.rate': 'Rate',
   'common.tx.type.swap': 'Swap',

diff --git a/src/renderer/i18n/en/common.ts b/src/renderer/i18n/en/common.ts
@@ -146,6 +146,7 @@ const common: CommonMessages = {
   'common.asset.base': 'Base',
   'common.asset.change': 'Change asset',
   'common.asset.quickSelect': 'Quick Select L1',
+  'common.asset.chooseAsset': 'Choose an asset',
   'common.noResult': 'No result',
   'common.rate': 'Rate',
   'common.tx.type.swap': 'Swap',

diff --git a/src/renderer/i18n/es/common.ts b/src/renderer/i18n/es/common.ts
@@ -193,7 +193,8 @@ const common: CommonMessages = {
   'common.expandAll': 'Expandir todo',
   'common.excludeSynth': 'Excluir Sintéticos',
   'common.completeLp': 'Completar Lp',
-  'common.asset.quickSelect': 'Selección Rápida L1'
+  'common.asset.quickSelect': 'Selección Rápida L1',
+  'common.asset.chooseAsset': 'Elige un activo'
 }
 
 export default common
diff --git a/src/renderer/i18n/fr/common.ts b/src/renderer/i18n/fr/common.ts
@@ -145,6 +145,7 @@ const common: CommonMessages = {
   'common.asset.base': 'Base',
   'common.asset.change': "Changement d'actif",
   'common.asset.quickSelect': 'Sélection rapide L1',
+  'common.asset.chooseAsset': 'Choisissez un actif',
   'common.noResult': 'Aucun résultat',
   'common.rate': 'Taux',
   'common.tx.type.swap': 'Échange',

diff --git a/src/renderer/i18n/hi/common.ts b/src/renderer/i18n/hi/common.ts
@@ -145,6 +145,7 @@ const common: CommonMessages = {
   'common.asset.base': 'आधार',
   'common.asset.change': 'संपत्ति बदलें',
   'common.asset.quickSelect': 'त्वरित चयन L1',
+  'common.asset.chooseAsset': 'एक संपत्ति चुनें',
   'common.noResult': 'कोई परिणाम नहीं',
   'common.rate': 'दर',
   'common.tx.type.swap': 'अदला-बदली',

diff --git a/src/renderer/i18n/ru/common.ts b/src/renderer/i18n/ru/common.ts
@@ -146,6 +146,7 @@ const common: CommonMessages = {
   'common.asset.base': 'Базовый',
   'common.asset.change': 'Сменить актив',
   'common.asset.quickSelect': 'Быстрый выбор L1',
+  'common.asset.chooseAsset': 'Выберите актив',
   'common.noResult': 'Нет результата',
   'common.rate': 'Курс',
   'common.tx.type.swap': 'Обмен',

diff --git a/src/renderer/i18n/types.ts b/src/renderer/i18n/types.ts
@@ -148,6 +148,7 @@ export type CommonMessageKey =
   | 'common.asset.base'
   | 'common.asset.change'
   | 'common.asset.quickSelect'
+  | 'common.asset.chooseAsset'
   | 'common.noResult'
   | 'common.rate'
   | 'common.tx.type.swap'

diff --git a/src/renderer/index.css b/src/renderer/index.css
@@ -50,3 +50,23 @@ body {
     @apply transition duration-300 ease-in-out;
   }
 }
+
+/* Custom Scrollbar for WebKit Browsers */
+::-webkit-scrollbar {
+  width: 6px; /* Width of the scrollbar */
+  height: 6px; /* Height of the scrollbar */
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1; /* Background of the scrollbar track */
+  border-radius: 10px; /* Rounded corners */
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888; /* Color of the scrollbar thumb */
+  border-radius: 10px; /* Rounded corners */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555; /* Color of the thumb on hover */
+}
diff --git a/yarn.lock b/yarn.lock
@@ -10028,6 +10028,7 @@ __metadata:
     browserify-fs: "npm:^1.0.0"
     caniuse-lite: "npm:^1.0.30001346"
     chart.js: "npm:^3.8.0"
+    clsx: "npm:^2.1.1"
     concurrently: "npm:^7.2.1"
     cosmos-client: "npm:0.39.2"
     cross-env: "npm:^7.0.3"
@@ -11923,6 +11924,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: 10/cdfb57fa6c7649bbff98d9028c2f0de2f91c86f551179541cf784b1cfdc1562dcb951955f46d54d930a3879931a980e32a46b598acaea274728dbe068deca919
+  languageName: node
+  linkType: hard
+
 "co@npm:^4.6.0":
   version: 4.6.0
   resolution: "co@npm:4.6.0"