From 1925b94fb392429107d802b831728df4556ea2ee Mon Sep 17 00:00:00 2001 From: XiaoYhun Date: Thu, 27 Jul 2023 10:16:23 +0700 Subject: [PATCH] clean code --- src/components/SearchModal/CurrencyList.tsx | 5 +- src/components/SearchModal/CurrencySearch.tsx | 3 +- src/state/user/hooks.tsx | 23 ++++++--- src/state/user/reducer.ts | 51 +++++-------------- 4 files changed, 31 insertions(+), 51 deletions(-) diff --git a/src/components/SearchModal/CurrencyList.tsx b/src/components/SearchModal/CurrencyList.tsx index eb9f04332e..aaea0b1631 100644 --- a/src/components/SearchModal/CurrencyList.tsx +++ b/src/components/SearchModal/CurrencyList.tsx @@ -136,10 +136,6 @@ export function CurrencyRow({ return false } - // if (isTokenNative(currency, currency.chainId)) { - // return !!favoriteTokens.includeNativeToken - // } - if (currency.isToken) { const addr = (currency as Token).address ?? '' const addresses = favoriteTokens ?? [] @@ -148,6 +144,7 @@ export function CurrencyRow({ return false })() + const balanceComponent = hideBalance ? ( '******' ) : currencyBalance ? ( diff --git a/src/components/SearchModal/CurrencySearch.tsx b/src/components/SearchModal/CurrencySearch.tsx index 01784ccd6f..681bbcb4a9 100644 --- a/src/components/SearchModal/CurrencySearch.tsx +++ b/src/components/SearchModal/CurrencySearch.tsx @@ -76,7 +76,6 @@ const ButtonClear = styled.div` gap: 5px; cursor: pointer; ` -// const MAX_FAVORITE_PAIR = 12 interface CurrencySearchProps { isOpen: boolean @@ -169,7 +168,6 @@ export function CurrencySearch({ const tokenComparator = useTokenComparator(false, customChainId) const [commonTokens, setCommonTokens] = useState<(Token | Currency)[]>([]) - console.log('🚀 ~ file: CurrencySearch.tsx:172 ~ commonTokens:', commonTokens) const [loadingCommon, setLoadingCommon] = useState(true) const tokenImportsFiltered = useMemo(() => { @@ -288,6 +286,7 @@ export function CurrencySearch({ if (addressesToFetch.length) { const tokens = await fetchListTokenByAddresses(addressesToFetch, chainId) + // Sort the returned token list to match the order of the passed address list result = result.concat( tokens.sort((x, y) => { return addressesToFetch.indexOf(x.wrapped.address) - addressesToFetch.indexOf(y.wrapped.address) diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx index 6a1946939d..7829024afa 100644 --- a/src/state/user/hooks.tsx +++ b/src/state/user/hooks.tsx @@ -53,6 +53,8 @@ import { import { CROSS_CHAIN_SETTING_DEFAULT, CrossChainSetting, VIEW_MODE } from 'state/user/reducer' import { isAddress, isChristmasTime } from 'utils' +const MAX_FAVORITE_LIMIT = 12 + function serializeToken(token: Token | WrappedTokenInfo): SerializedToken { return { chainId: token.chainId, @@ -404,20 +406,27 @@ export const useUserFavoriteTokens = (chainId: ChainId) => { const favoriteTokens = useMemo(() => { if (!chainId || !defaultTokens) return undefined - const favoritedToken = favoriteTokensByChainId?.[chainId] - const favoritedTokenAddresses = favoritedToken - ? defaultTokens - .filter(address => favoritedToken[address] !== false) - .concat(Object.keys(favoritedToken).filter(address => favoritedToken[address])) - : [] + const favoritedTokens = favoriteTokensByChainId?.[chainId] || {} + const favoritedTokenAddresses = defaultTokens + .filter(address => favoritedTokens[address] !== false) + .concat(Object.keys(favoritedTokens).filter(address => favoritedTokens[address])) + return [...new Set(favoritedTokenAddresses)] }, [chainId, favoriteTokensByChainId, defaultTokens]) const toggleFavoriteToken = useCallback( (payload: ToggleFavoriteTokenPayload) => { + // Is adding favorite and reached max limit + if ( + favoriteTokens && + favoriteTokens?.indexOf(payload.address) < 0 && + favoriteTokens.length >= MAX_FAVORITE_LIMIT + ) { + return + } dispatch(toggleFavoriteTokenAction(payload)) }, - [dispatch], + [dispatch, favoriteTokens], ) return { favoriteTokens, toggleFavoriteToken } diff --git a/src/state/user/reducer.ts b/src/state/user/reducer.ts index c5cab60448..74ab3bd0f5 100644 --- a/src/state/user/reducer.ts +++ b/src/state/user/reducer.ts @@ -109,15 +109,14 @@ interface UserState { } > > - // favoriteTokensByChainIdv2: Partial< - // Record< - // ChainId, - // { - // [address: string]: boolean - // } - // > - // > - favoriteTokensByChainIdv2: any + favoriteTokensByChainIdv2: Partial< + Record< + ChainId, + { + [address: string]: boolean + } + > + > readonly chainId: ChainId acceptedTermVersion: number | null viewMode: VIEW_MODE @@ -323,37 +322,13 @@ export default createReducer(initialState, builder => state.favoriteTokensByChainId = undefined } - if (!state.favoriteTokensByChainIdv2[chainId]) { - state.favoriteTokensByChainIdv2[chainId] = {} - } - - state.favoriteTokensByChainIdv2[chainId][address] = !state.favoriteTokensByChainIdv2[chainId][address] - - // if (!state.favoriteTokensByChainId) { - // state.favoriteTokensByChainId = {} - // } + let favoriteTokens = state.favoriteTokensByChainIdv2[chainId] - // let favoriteTokens = state.favoriteTokensByChainId[chainId] - // if (!favoriteTokens) { - // favoriteTokens = defaultCommonTokens - // state.favoriteTokensByChainId[chainId] = favoriteTokens - // } - - // if (isNative) { - // const previousValue = favoriteTokens.includeNativeToken - // favoriteTokens.includeNativeToken = !previousValue - // return - // } + if (!favoriteTokens) { + favoriteTokens = {} + } - // if (address) { - // // this is intentionally added, to remove compiler error - // const index = favoriteTokens.addresses.findIndex(addr => addr === address) - // if (index === -1) { - // favoriteTokens.addresses.push(address) - // return - // } - // favoriteTokens.addresses.splice(index, 1) - // } + favoriteTokens[address] = !favoriteTokens[address] }) .addCase(updateChainId, (state, { payload: chainId }) => { state.chainId = chainId