diff --git a/packages/apps/public/locales/en/translation.json b/packages/apps/public/locales/en/translation.json index 8894a72b71..a506d89658 100644 --- a/packages/apps/public/locales/en/translation.json +++ b/packages/apps/public/locales/en/translation.json @@ -1145,6 +1145,7 @@ "approval / {{percent}}%": "", "approval type": "", "approved": "", + "asset id or name to query": "", "asset decimals": "", "asset id": "", "asset name": "", diff --git a/packages/apps/public/locales/zh/translation.json b/packages/apps/public/locales/zh/translation.json index 1d64b7acc6..5a9d2bad41 100644 --- a/packages/apps/public/locales/zh/translation.json +++ b/packages/apps/public/locales/zh/translation.json @@ -925,6 +925,7 @@ "amount to use for estimation": "用于估算的金额", "approval type": "批准类型", "approved": "已赞成", + "asset id or name to query": "要查询的资产id或名称", "asset id": "资产 id", "auto-selected targets for nomination": "自动选择的提名对象", "available": "可用的", diff --git a/packages/page-assets/src/Balances/index.tsx b/packages/page-assets/src/Balances/index.tsx index 3e59d6f529..e260bf7026 100644 --- a/packages/page-assets/src/Balances/index.tsx +++ b/packages/page-assets/src/Balances/index.tsx @@ -1,9 +1,10 @@ // Copyright 2017-2024 @polkadot/app-assets authors & contributors // SPDX-License-Identifier: Apache-2.0 +import type { DropdownItemProps } from 'semantic-ui-react'; import type { AssetInfo, AssetInfoComplete } from '../types.js'; -import React, { useEffect, useMemo, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { Dropdown, styled, Table } from '@polkadot/react-components'; import { formatNumber } from '@polkadot/util'; @@ -39,9 +40,9 @@ function Balances ({ className, infos = [] }: Props): React.ReactElement ); const assetOptions = useMemo( - () => completeInfos.map(({ id, metadata }, index) => ({ + () => completeInfos.map(({ id, metadata }) => ({ text: `${metadata.name.toUtf8()} (${formatNumber(id)})`, - value: index + value: id.toNumber() })), [completeInfos] ); @@ -53,10 +54,20 @@ function Balances ({ className, infos = [] }: Props): React.ReactElement [info] ); + const onSearch = useCallback( + (options: DropdownItemProps[], value: string): DropdownItemProps[] => + options.filter((options) => { + const { text: optText, value: optValue } = options as { text: string, value: number }; + + return parseInt(value) === optValue || optText.includes(value); + }), + [] + ); + useEffect((): void => { setInfo(() => - infoIndex >= 0 && infoIndex < completeInfos.length - ? completeInfos[infoIndex] + infoIndex >= 0 + ? completeInfos.find(({ id }) => id.toNumber() === infoIndex) ?? null : null ); }, [completeInfos, infoIndex]); @@ -71,6 +82,7 @@ function Balances ({ className, infos = [] }: Props): React.ReactElement isFull label={t('the asset to query for balances')} onChange={setInfoIndex} + onSearch={onSearch} options={assetOptions} value={infoIndex} /> diff --git a/packages/page-assets/src/Overview/Query.tsx b/packages/page-assets/src/Overview/Query.tsx new file mode 100644 index 0000000000..839ccb49e5 --- /dev/null +++ b/packages/page-assets/src/Overview/Query.tsx @@ -0,0 +1,55 @@ +// Copyright 2017-2024 @polkadot/app-explorer authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import React, { useCallback, useState } from 'react'; + +import { Button, FilterOverlay, Input, styled } from '@polkadot/react-components'; + +import { useTranslation } from '../translate.js'; + +interface Props { + className?: string; + onQuery?: (value: string) => void; +} + +function Query ({ className = '', onQuery }: Props): React.ReactElement { + const { t } = useTranslation(); + const [input, setInput] = useState(''); + + const _onChange = useCallback( + (value: string): void => setInput(value), + [] + ); + + const _onQuery = useCallback( + (): void => { + onQuery && onQuery(input); + }, + [input, onQuery] + ); + + return ( + + +