Merge branch 'develop' into feature/live-cell-address-card

package.json

@@ -21,7 +21,6 @@
     "echarts": "4.9.0",
     "history": "5.3.0",
     "i18next": "20.6.1",
-    "js-base64": "^3.7.5",
     "jsbi": "3.2.5",
     "lint-staged": "^13.2.3",
     "lodash.debounce": "4.0.8",

src/components/Search/Filter/index.tsx → src/components/Filter/index.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import SearchBlack from '../../../assets/search_black.png'
-import ClearLogo from '../../../assets/clear.png'
+import SearchBlack from '../../assets/search_black.png'
+import ClearLogo from '../../assets/clear.png'
 import { FilterImage, FilterPanel, ResetButtonPanel, FilterInputPanel } from './styled'
 
 const Filter = ({

src/components/Search/Filter/styled.tsx → src/components/Filter/styled.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
-import SimpleButton from '../../SimpleButton'
-import variables from '../../../styles/variables.module.scss'
+import SimpleButton from '../SimpleButton'
+import variables from '../../styles/variables.module.scss'
 
 export const FilterPanel = styled.div`
   width: 600px;

src/components/Search/Search.test.tsx

@@ -21,12 +21,12 @@ beforeEach(() => {
 
 test('show clear button when content is available', async () => {
   initI18n()
-  const { getByRole, getAllByRole } = render(
+  const { getByRole, queryByTitle } = render(
     <QueryClientProvider client={new QueryClient()}>
       <Search />
     </QueryClientProvider>,
   )
-  const getClearButton = () => getAllByRole('button')[2]
+  const getClearButton = () => queryByTitle('clear')
 
   const inputEl = getByRole('textbox') as HTMLInputElement
   expect(inputEl).toBeInstanceOf(HTMLInputElement)
@@ -42,7 +42,7 @@ test('show clear button when content is available', async () => {
   fireEvent.change(inputEl, { target: { value: 'test' } })
   const btn = getClearButton()
   expect(btn).toBeTruthy()
-  fireEvent.click(btn)
+  fireEvent.click(btn!)
   expect(inputEl.value).toBe('')
   expect(getClearButton()).toBeFalsy()
 })

src/components/Search/SearchByNameResults.module.scss

@@ -1,47 +1,56 @@
 .searchResultsPanelWrapper {
   position: absolute;
-  width: 100%;
   z-index: 2;
+  top: calc(100% + 8px);
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  max-height: 292px;
   padding: 12px 8px;
-  max-height: 232px;
   overflow-y: auto;
   background: white;
   color: black;
-  top: 38px;
-  left: 0;
-  border-radius: 0 0 4px 4px;
+  border-radius: 4px;
+  box-shadow: 0 4px 4px 0 rgb(16 16 16 / 5%);
+}
 
-  .loadingWrapper {
-    margin: 0;
-  }
+.empty {
+  padding: 28px 0;
+  text-align: center;
+  font-size: 16px;
+  color: #333;
 }
 
 .searchResult {
-  user-select: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
+  display: block;
   width: 100%;
-  height: 44px;
   border-radius: 4px;
-  padding: 12px 4px;
-  font-weight: 500;
-  font-size: 16px;
-  border-bottom: solid 1px #e5e5e5;
+  padding: 0 4px;
+  cursor: pointer;
 
   &:hover {
     background: #f5f5f5;
   }
 }
 
+.content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 44px;
+  padding: 12px 0;
+  border-bottom: solid 1px #e5e5e5;
+}
+
 .tokenSymbol {
-  min-width: 100px;
+  font-size: 16px;
+  color: #333;
 }
 
 .typeHash {
   font-size: 14px;
-  font-weight: 500;
-  margin-left: 8px;
-  flex: 1;
-  min-width: 0;
+  color: #666;
 }

src/components/Search/SearchByNameResults.tsx

@@ -1,57 +1,62 @@
 import { useTranslation } from 'react-i18next'
 import classNames from 'classnames'
+import { FC } from 'react'
 import { UDTQueryResult } from '../../services/ExplorerService/fetcher'
 import styles from './SearchByNameResults.module.scss'
 import EllipsisMiddle from '../EllipsisMiddle'
 import SmallLoading from '../Loading/SmallLoading'
 
 type Props = {
   loading?: boolean
-  udtQueryResults: UDTQueryResult[] | null
+  udtQueryResults: UDTQueryResult[]
 }
 
-export const SearchByNameResults = (props: Props) => {
-  const { udtQueryResults, loading } = props
-  if (loading) {
-    return (
-      <div className={styles.searchResultsPanelWrapper}>
-        <SmallLoading className={styles.loadingWrapper} />
-      </div>
-    )
-  }
-  if (udtQueryResults) {
-    return (
-      <div className={styles.searchResultsPanelWrapper}>
-        {udtQueryResults.length === 0 ? (
-          <EmptySearchByNameResult />
-        ) : (
-          udtQueryResults.map(item => {
-            return <SearchByNameResult key={item.typeHash} item={item} />
-          })
-        )}
-      </div>
-    )
-  }
-  return null
-}
-
-const EmptySearchByNameResult = () => {
+export const SearchByNameResults: FC<Props> = ({ udtQueryResults, loading }) => {
   const { t } = useTranslation()
-  return <>{t('search.no_search_result')}</>
+
+  return (
+    <div className={styles.searchResultsPanelWrapper}>
+      {/* eslint-disable-next-line no-nested-ternary */}
+      {loading ? (
+        <SmallLoading className={styles.loadingWrapper} />
+      ) : udtQueryResults.length === 0 ? (
+        <div className={styles.empty}>{t('search.no_search_result')}</div>
+      ) : (
+        udtQueryResults.map(item => <SearchByNameResult key={item.typeHash} item={item} />)
+      )}
+    </div>
+  )
 }
 
-const SearchByNameResult = (props: { item: UDTQueryResult }) => {
+const SearchByNameResult: FC<{ item: UDTQueryResult }> = ({ item }) => {
   const { t } = useTranslation()
-  const { item } = props
   const { typeHash, fullName, symbol, udtType } = item
   const displayName = symbol ?? fullName
+
   return (
     <a
       className={styles.searchResult}
       href={`${window.origin}/${udtType === 'omiga_inscription' ? 'inscription' : 'sudt'}/${typeHash}`}
     >
-      <EllipsisMiddle className={styles.tokenSymbol}>{displayName ?? t('udt.unknown_token')}</EllipsisMiddle>
-      <EllipsisMiddle className={classNames(styles.typeHash, 'monospace')}>{typeHash}</EllipsisMiddle>
+      <div className={styles.content}>
+        {/* TODO: Need to implement highlighting for the matched keywords. */}
+        <EllipsisMiddle
+          className={styles.tokenSymbol}
+          style={{ maxWidth: 'min(180px, 40%)' }}
+          useTextWidthForPlaceholderWidth
+          title={displayName}
+        >
+          {displayName ?? t('udt.unknown_token')}
+        </EllipsisMiddle>
+        <EllipsisMiddle
+          className={classNames(styles.typeHash, 'monospace')}
+          style={{ maxWidth: 'min(200px, 60%)' }}
+          useTextWidthForPlaceholderWidth
+          title={typeHash}
+        >
+          {typeHash}
+        </EllipsisMiddle>
+      </div>
     </a>
   )
 }

src/components/Search/index.module.scss

@@ -1,30 +1,11 @@
 @import '../../styles/variables.module';
 
-.byNameOrId {
-  // remove original button styles
-  border: none;
-  display: flex;
-  padding: 2px 8px;
-  justify-content: center;
-  align-items: center;
-  margin-right: 16px;
-  color: #666;
-  font-size: 14px;
-  opacity: 0.8;
-  cursor: pointer;
-  user-select: none;
-  border-radius: 2px;
-  background: #f0f0f0;
-  white-space: nowrap;
-}
-
 .searchInputPanel {
   position: relative;
   width: 100%;
   height: 100%;
   font-size: 14px;
-  padding-left: 10px;
-  padding-right: 20px;
+  padding: 0 8px;
   background: white;
   color: #333;
   border: 0 solid white;
@@ -47,11 +28,38 @@
   }
 }
 
-.spinner {
+.preIcon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
   margin-left: 8px;
+}
+
+.spinner {
   animation: rotate 2s linear infinite;
 }
 
+.clear {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.byNameOrId:not(
+    [_='This `:not` selector is used to increase the specificity of the selector and serves no other purpose.']
+  ) {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 24px;
+  margin-left: 16px;
+  padding: 0 8px;
+  color: #666;
+  background: #f0f0f0;
+  border-radius: 2px;
+}
+
 @keyframes rotate {
   100% {
     transform: rotate(360deg);