Created a Asset Selector for Send page with Search

src/app/sections/LCDSetting.tsx

@@ -3,7 +3,7 @@ import { useForm } from "react-hook-form"
 import { Form, FormItem, Input } from "components/form"
 import { useTranslation } from "react-i18next"
 import { useNetworks } from "app/InitNetworks"
-import ChainSelector from "components/form/ChainSelector"
+import ChainSelector from "components/form/Selectors/ChainSelector/ChainSelector"
 import { useEffect, useMemo, useState } from "react"
 import { Button } from "components/general"
 import styles from "./LCDSetting.module.scss"

src/components/form/Selectors/AssetSelector/AssetList.tsx

@@ -0,0 +1,60 @@
+import styles from "../../ChainSelector.module.scss"
+import WithSearchInput from "pages/custom/WithSearchInput"
+import classNames from "classnames"
+
+interface AssetType {
+  denom: string
+  balance: string
+  icon: string
+  symbol: string
+  price: number
+  chains: string[]
+}
+
+interface Props {
+  list: AssetType[]
+  onChange: (symbol: string, index: number) => void
+  value: string
+  small?: boolean
+  noSearch?: boolean
+}
+
+const ChainList = ({ list, onChange, value, small, noSearch }: Props) => {
+  return (
+    <div className={styles.options}>
+      <WithSearchInput disabled={noSearch} inline gap={4}>
+        {(search) => (
+          <div
+            className={classNames(
+              styles.options__container,
+              small && styles.options__container__small
+            )}
+          >
+            {list
+              .filter(
+                ({ denom, symbol }) =>
+                  denom.toLowerCase().includes(search.toLowerCase()) ||
+                  symbol.toLowerCase().includes(search.toLowerCase())
+              )
+              .map(({ denom, symbol, icon }, index) => (
+                <button
+                  className={symbol === value ? styles.active : ""}
+                  key={denom}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    onChange(denom, index)
+                  }}
+                >
+                  <img src={icon} alt={denom} />
+                  {symbol}
+                </button>
+              ))}
+          </div>
+        )}
+      </WithSearchInput>
+    </div>
+  )
+}
+
+export default ChainList

src/components/form/Selectors/AssetSelector/AssetSelector.tsx

@@ -0,0 +1,74 @@
+import { useState, useRef, useEffect } from "react"
+import styles from "../../ChainSelector.module.scss"
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"
+import AssetList from "./AssetList"
+
+interface AssetType {
+  denom: string
+  balance: string
+  icon: string
+  symbol: string
+  price: number
+  chains: string[]
+}
+
+interface Props {
+  assetList: AssetType[]
+  onChange: (chain: string) => void
+  value: string
+  assetsByDenom: Record<string, AssetType>
+}
+
+const AssetSelector = ({
+  assetList,
+  onChange,
+  value,
+  assetsByDenom,
+}: Props) => {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      setOpen(false)
+    }
+  }
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [])
+
+  const handleSelection = (denom: string) => {
+    onChange(denom)
+    setOpen(false)
+  }
+
+  return (
+    <div className={styles.container} ref={ref}>
+      <button
+        type="button"
+        className={styles.selector}
+        onClick={(e) => {
+          e.stopPropagation()
+          if (e.screenX && e.screenY) setOpen((o) => !o) // negate onClick triggered by enter key press
+        }}
+      >
+        <span>
+          <img
+            src={assetsByDenom[value]?.icon}
+            alt={assetsByDenom[value]?.denom}
+          />{" "}
+          {assetsByDenom[value]?.symbol}
+        </span>{" "}
+        <ArrowDropDownIcon style={{ fontSize: 20 }} className={styles.caret} />
+      </button>
+      {open && (
+        <AssetList list={assetList} onChange={handleSelection} value={value} />
+      )}
+    </div>
+  )
+}
+
+export default AssetSelector

src/components/form/ChainList.tsx → src/components/form/Selectors/ChainSelector/ChainList.tsx

@@ -1,4 +1,4 @@
-import styles from "./ChainSelector.module.scss"
+import styles from "../../ChainSelector.module.scss"
 import WithSearchInput from "pages/custom/WithSearchInput"
 import classNames from "classnames"
 

src/components/form/ChainSelector.tsx → src/components/form/Selectors/ChainSelector/ChainSelector.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState, useRef, useEffect } from "react"
-import styles from "./ChainSelector.module.scss"
+import styles from "../../ChainSelector.module.scss"
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"
 import { useNetworks } from "app/InitNetworks"
 import ChainList from "./ChainList"

src/components/form/index.ts

@@ -14,7 +14,7 @@ export { default as Checkbox } from "./Checkbox"
 export * from "./Checkbox"
 export { default as Toggle } from "./Toggle"
 export { default as Upload } from "./Upload"
-export { default as ChainSelector } from "./ChainSelector"
+export { default as ChainSelector } from "./Selectors/ChainSelector/ChainSelector"
 
 /* modules */
 export { default as Paste } from "./Paste"

src/pages/stake/QuickStake.tsx

@@ -21,7 +21,9 @@ import {
 import { combineState } from "data/query"
 import { Tooltip, TooltipIcon } from "components/display"
 import { Delegation } from "@terra-money/feather.js"
-import TokenSelector, { TokenInterface } from "components/form/TokenSelector"
+import TokenSelector, {
+  TokenInterface,
+} from "components/form/Selectors/TokenSelector/TokenSelector"
 import { useState } from "react"
 import { useAuth } from "auth"
 import is from "auth/scripts/is"

src/pages/stake/Validators.tsx

@@ -7,7 +7,9 @@ import styles from "./Validators.module.scss"
 import ValidatorsList from "./ValidatorsList"
 import { Flex, Grid, InlineFlex, Page, Table } from "components/layout"
 import { useTranslation } from "react-i18next"
-import TokenSelector, { TokenInterface } from "components/form/TokenSelector"
+import TokenSelector, {
+  TokenInterface,
+} from "components/form/Selectors/TokenSelector/TokenSelector"
 import { useNetwork } from "data/wallet"
 import { useState } from "react"
 import {

src/pages/wallet/SendPage.tsx

@@ -7,8 +7,8 @@ import {
 } from "@terra-money/feather.js"
 import { isDenom, toAmount } from "@terra-money/terra-utils"
 import { useInterchainAddresses } from "auth/hooks/useAddress"
-import { Form, FormItem, FormWarning, Input, Select } from "components/form"
-import ChainSelector from "components/form/ChainSelector"
+import { Form, FormItem, FormWarning, Input } from "components/form"
+import ChainSelector from "components/form/Selectors/ChainSelector/ChainSelector"
 import { Flex, Grid } from "components/layout"
 import { SAMPLE_ADDRESS } from "config/constants"
 import { useBankBalance } from "data/queries/bank"
@@ -31,9 +31,10 @@ import { queryKey } from "data/query"
 import Tx from "txs/Tx"
 import AddressBookList from "txs/AddressBook/AddressBookList"
 import { ModalButton } from "components/feedback"
+import AssetSelector from "components/form/Selectors/AssetSelector/AssetSelector"
 
 interface TxValues {
-  asset: string
+  asset?: string
   chain?: string
   recipient?: string // AccAddress | TNS
   address?: AccAddress // hidden input
@@ -131,6 +132,13 @@ const SendPage = () => {
       readNativeDenom(denom).token === watch("asset")
   )
 
+  /* resolve asset */
+  useEffect(() => {
+    if (!asset) {
+      setValue("asset", defaultAsset)
+    }
+  }, [form, asset, defaultAsset, setValue])
+
   /* resolve recipient */
   useEffect(() => {
     if (!recipient) {
@@ -325,6 +333,19 @@ const SendPage = () => {
     }
   }, [chain, trigger, recipient])
 
+  const filteredAssets = useMemo(
+    () => availableAssets.filter(({ symbol }) => !symbol.endsWith("...")),
+    [availableAssets]
+  )
+
+  const assetsByDenom = filteredAssets.reduce(
+    (acc: Record<string, AssetType>, item: AssetType) => {
+      acc[item.denom] = item
+      return acc
+    },
+    {}
+  )
+
   return (
     // @ts-expect-error
     <Tx {...tx}>
@@ -339,20 +360,12 @@ const SendPage = () => {
                 label={t("Asset")}
                 error={errors.asset?.message ?? errors.address?.message}
               >
-                <Select
-                  {...register("asset", {
-                    value: defaultAsset,
-                  })}
-                  autoFocus
-                >
-                  {availableAssets
-                    .filter(({ symbol }) => !symbol.endsWith("..."))
-                    .map(({ denom, symbol }, i) => (
-                      <option value={denom} key={i}>
-                        {symbol}
-                      </option>
-                    ))}
-                </Select>
+                <AssetSelector
+                  value={asset ?? ""}
+                  onChange={(asset) => setValue("asset", asset)}
+                  assetList={filteredAssets}
+                  assetsByDenom={assetsByDenom}
+                />
               </FormItem>
               {availableChains && (
                 <FormItem label={t("Source chain")}>

src/pages/wallet/TransferPage.tsx

@@ -8,7 +8,7 @@ import {
 import { isDenom, toAmount } from "@terra-money/terra-utils"
 import { useInterchainAddresses } from "auth/hooks/useAddress"
 import { Form, FormItem, Input, Select } from "components/form"
-import ChainSelector from "components/form/ChainSelector"
+import ChainSelector from "components/form/Selectors/ChainSelector/ChainSelector"
 import { Flex } from "components/layout"
 import { useBankBalance } from "data/queries/bank"
 import { useExchangeRates } from "data/queries/coingecko"