From 84466c7f960b14055c420cf5a7c19791717253b7 Mon Sep 17 00:00:00 2001 From: Thunnini Date: Thu, 19 Dec 2024 17:04:55 +0900 Subject: [PATCH 1/3] Fix some mistakes --- .../src/hooks/use-get-search-chains.ts | 36 +++++++++++++++++-- .../deposit-modal/copy-address-scene.tsx | 5 +-- 2 files changed, 36 insertions(+), 5 deletions(-) diff --git a/apps/extension/src/hooks/use-get-search-chains.ts b/apps/extension/src/hooks/use-get-search-chains.ts index f4c5f561f9..82a281781f 100644 --- a/apps/extension/src/hooks/use-get-search-chains.ts +++ b/apps/extension/src/hooks/use-get-search-chains.ts @@ -2,6 +2,7 @@ import { useEffect, useState, useMemo } from "react"; import { useStore } from "../stores"; import { ChainInfo, ModularChainInfo } from "@keplr-wallet/types"; import { autorun } from "mobx"; +import { ChainIdHelper } from "@keplr-wallet/cosmos"; type SearchOption = "all" | "cosmos" | "evm"; type FilterOption = "all" | "chain" | "token" | "chainNameAndToken"; @@ -48,7 +49,7 @@ export const useGetSearchChains = ({ trimSearch: string; searchedChainInfos: (ChainInfo | ModularChainInfo)[]; } => { - const { queriesStore } = useStore(); + const { queriesStore, chainStore } = useStore(); const trimSearch = search.trim().toLowerCase(); @@ -74,6 +75,16 @@ export const useGetSearchChains = ({ (ChainInfo | ModularChainInfo)[] >([]); + const disabledChainInfos = useMemo( + () => + chainStore.chainInfosInListUI.filter( + (modularChainInfo) => + !chainStore.isEnabledChain(modularChainInfo.chainId) + ), + // eslint-disable-next-line react-hooks/exhaustive-deps + [chainStore.chainInfosInListUI] + ); + useEffect(() => { const disposer = autorun(() => { if (!queryChains) { @@ -86,7 +97,21 @@ export const useGetSearchChains = ({ } if (queryChains.isFetching) return; if (queryChains.response?.data) { - setSearchedChainInfos(queryChains.response.data.chains); + const dupCheck = new Set(); + for (const chain of queryChains.response.data.chains) { + dupCheck.add(ChainIdHelper.parse(chain.chainId).identifier); + } + + const chains = queryChains.response.data.chains; + for (const disabledChainInfo of disabledChainInfos) { + if (!dupCheck.has(disabledChainInfo.chainId)) { + chains.push(disabledChainInfo.embedded); + } + } + + setSearchedChainInfos( + chains.sort((a, b) => a.chainName.localeCompare(b.chainName)) + ); } else { setSearchedChainInfos((prev) => (prev.length > 0 ? [] : prev)); } @@ -97,7 +122,12 @@ export const useGetSearchChains = ({ disposer(); } }; - }, [clearResultsOnEmptyQuery, initialChainInfos, queryChains]); + }, [ + clearResultsOnEmptyQuery, + initialChainInfos, + queryChains, + disabledChainInfos, + ]); return { trimSearch, diff --git a/apps/extension/src/pages/main/components/deposit-modal/copy-address-scene.tsx b/apps/extension/src/pages/main/components/deposit-modal/copy-address-scene.tsx index 2e18989a7a..14a7c16c05 100644 --- a/apps/extension/src/pages/main/components/deposit-modal/copy-address-scene.tsx +++ b/apps/extension/src/pages/main/components/deposit-modal/copy-address-scene.tsx @@ -213,11 +213,12 @@ export const CopyAddressScene: FunctionComponent<{ const initialLookingForChains = useMemo( () => - chainStore.modularChainInfos.filter( + chainStore.modularChainInfosInListUI.filter( (modularChainInfo) => !chainStore.isEnabledChain(modularChainInfo.chainId) ), - [chainStore] + // eslint-disable-next-line react-hooks/exhaustive-deps + [chainStore.modularChainInfosInListUI] ); const { trimSearch, searchedChainInfos } = useGetSearchChains({ From 6a8d722ca91ced240bc0fdb364b12865c6ea4fce Mon Sep 17 00:00:00 2001 From: Thunnini Date: Thu, 19 Dec 2024 17:13:52 +0900 Subject: [PATCH 2/3] Minor fix --- apps/extension/src/hooks/use-get-search-chains.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/extension/src/hooks/use-get-search-chains.ts b/apps/extension/src/hooks/use-get-search-chains.ts index 82a281781f..67964d280a 100644 --- a/apps/extension/src/hooks/use-get-search-chains.ts +++ b/apps/extension/src/hooks/use-get-search-chains.ts @@ -104,7 +104,11 @@ export const useGetSearchChains = ({ const chains = queryChains.response.data.chains; for (const disabledChainInfo of disabledChainInfos) { - if (!dupCheck.has(disabledChainInfo.chainId)) { + if ( + !dupCheck.has( + ChainIdHelper.parse(disabledChainInfo.chainId).identifier + ) + ) { chains.push(disabledChainInfo.embedded); } } From 85064bcb70e39c13a21127fb8e41571a94b0aae9 Mon Sep 17 00:00:00 2001 From: Thunnini Date: Thu, 19 Dec 2024 17:35:16 +0900 Subject: [PATCH 3/3] =?UTF-8?q?disabledChainInfos=EA=B0=80=20search=20text?= =?UTF-8?q?=EB=A5=BC=20=EB=B0=98=EC=98=81=ED=95=98=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/hooks/use-get-search-chains.ts | 56 ++++++++++++++++--- 1 file changed, 48 insertions(+), 8 deletions(-) diff --git a/apps/extension/src/hooks/use-get-search-chains.ts b/apps/extension/src/hooks/use-get-search-chains.ts index 67964d280a..e414e1a7c8 100644 --- a/apps/extension/src/hooks/use-get-search-chains.ts +++ b/apps/extension/src/hooks/use-get-search-chains.ts @@ -75,15 +75,55 @@ export const useGetSearchChains = ({ (ChainInfo | ModularChainInfo)[] >([]); - const disabledChainInfos = useMemo( - () => - chainStore.chainInfosInListUI.filter( + const disabledChainInfosSearched = useMemo(() => { + return chainStore.chainInfosInListUI + .filter( (modularChainInfo) => !chainStore.isEnabledChain(modularChainInfo.chainId) - ), + ) + .filter((chainInfo) => { + const chainId = chainInfo.chainId.toLowerCase(); + const chainName = chainInfo.chainName.toLowerCase(); + const mainCurrencyDenom = + chainInfo.currencies[0].coinDenom.toLowerCase(); + const stakeCurrencyDenom = + chainInfo.stakeCurrency?.coinDenom.toLowerCase(); + const tokenDenom = chainStore.isEvmOnlyChain(chainInfo.chainId) + ? mainCurrencyDenom + : stakeCurrencyDenom || mainCurrencyDenom; + + // search text가 eth 또는 eth~ethereum일 경우 evm 체인은 모두 보여준다. + if (trimSearch.startsWith("eth")) { + const isEVM = !("bech32Config" in chainInfo); + + if (isEVM) { + return true; + } + } + + switch (filterOption) { + case "all": + return ( + chainName.includes(trimSearch) || + chainId.includes(trimSearch) || + tokenDenom.includes(trimSearch) + ); + case "chain": + return ( + chainName.includes(trimSearch) || chainId.includes(trimSearch) + ); + case "token": + return tokenDenom.includes(trimSearch); + case "chainNameAndToken": + return ( + chainName.includes(trimSearch) || tokenDenom.includes(trimSearch) + ); + default: + return false; + } + }); // eslint-disable-next-line react-hooks/exhaustive-deps - [chainStore.chainInfosInListUI] - ); + }, [chainStore.chainInfosInListUI, filterOption, trimSearch]); useEffect(() => { const disposer = autorun(() => { @@ -103,7 +143,7 @@ export const useGetSearchChains = ({ } const chains = queryChains.response.data.chains; - for (const disabledChainInfo of disabledChainInfos) { + for (const disabledChainInfo of disabledChainInfosSearched) { if ( !dupCheck.has( ChainIdHelper.parse(disabledChainInfo.chainId).identifier @@ -130,7 +170,7 @@ export const useGetSearchChains = ({ clearResultsOnEmptyQuery, initialChainInfos, queryChains, - disabledChainInfos, + disabledChainInfosSearched, ]); return {