fix: memoize the list stuff so the tokens are consistently clickable (#2724)

This commit is contained in:
Moody Salem 2021-11-01 14:01:41 -04:00 committed by GitHub
parent 6a90bf3b9d
commit d18974480a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 8 deletions

@ -66,6 +66,13 @@ export default function CurrencySearchModal({
const [importList, setImportList] = useState<TokenList | undefined>()
const [listURL, setListUrl] = useState<string | undefined>()
const showImportView = useCallback(() => setModalView(CurrencyModalView.importToken), [setModalView])
const showManageView = useCallback(() => setModalView(CurrencyModalView.manage), [setModalView])
const handleBackImport = useCallback(
() => setModalView(prevView && prevView !== CurrencyModalView.importToken ? prevView : CurrencyModalView.search),
[setModalView, prevView]
)
// change min height if not searching
const minHeight = modalView === CurrencyModalView.importToken || modalView === CurrencyModalView.importList ? 40 : 80
let content = null
@ -81,9 +88,9 @@ export default function CurrencySearchModal({
showCommonBases={showCommonBases}
showCurrencyAmount={showCurrencyAmount}
disableNonToken={disableNonToken}
showImportView={() => setModalView(CurrencyModalView.importToken)}
showImportView={showImportView}
setImportToken={setImportToken}
showManageView={() => setModalView(CurrencyModalView.manage)}
showManageView={showManageView}
/>
)
break
@ -94,9 +101,7 @@ export default function CurrencySearchModal({
tokens={[importToken]}
onDismiss={onDismiss}
list={importToken instanceof WrappedTokenInfo ? importToken.list : undefined}
onBack={() =>
setModalView(prevView && prevView !== CurrencyModalView.importToken ? prevView : CurrencyModalView.search)
}
onBack={handleBackImport}
handleCurrencySelect={handleCurrencySelect}
/>
)

@ -99,20 +99,24 @@ function useCombinedTokenMapFromUrls(urls: string[] | undefined): TokenAddressMa
// filter out unsupported lists
export function useActiveListUrls(): string[] | undefined {
return useAppSelector((state) => state.lists.activeListUrls)?.filter((url) => !UNSUPPORTED_LIST_URLS.includes(url))
const activeListUrls = useAppSelector((state) => state.lists.activeListUrls)
return useMemo(() => activeListUrls?.filter((url) => !UNSUPPORTED_LIST_URLS.includes(url)), [activeListUrls])
}
export function useInactiveListUrls(): string[] {
const lists = useAllLists()
const allActiveListUrls = useActiveListUrls()
return Object.keys(lists).filter((url) => !allActiveListUrls?.includes(url) && !UNSUPPORTED_LIST_URLS.includes(url))
return useMemo(
() => Object.keys(lists).filter((url) => !allActiveListUrls?.includes(url) && !UNSUPPORTED_LIST_URLS.includes(url)),
[lists, allActiveListUrls]
)
}
// get all the tokens from active lists, combine with local default tokens
export function useCombinedActiveList(): TokenAddressMap {
const activeListUrls = useActiveListUrls()
const activeTokens = useCombinedTokenMapFromUrls(activeListUrls)
return combineMaps(activeTokens, TRANSFORMED_DEFAULT_TOKEN_LIST)
return useMemo(() => combineMaps(activeTokens, TRANSFORMED_DEFAULT_TOKEN_LIST), [activeTokens])
}
// list of tokens not supported on interface for various reasons, used to show warnings and prevent swaps and adds