diff --git a/CHANGELOG.md b/CHANGELOG.md index 40c67c4be8f..63443040bed 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased (develop) +- added: A "no tokens match your search" message on the Manage Tokens search. An address for a token the wallet's list does not carry used to render an empty scene, which is indistinguishable from a search that is not working. + ## 4.51.0 (staging) - added: Push info-server attestation tokens into edge-core-js via `setAttestationToken` so the login server can skip CAPTCHA for attested devices, and allow `LOGIN_SERVER` / `INFO_SERVER` env overrides for local E2E stacks. diff --git a/src/components/scenes/ManageTokensScene.tsx b/src/components/scenes/ManageTokensScene.tsx index 9573b8fb382..f35cd0ead42 100644 --- a/src/components/scenes/ManageTokensScene.tsx +++ b/src/components/scenes/ManageTokensScene.tsx @@ -190,6 +190,18 @@ const ManageTokensSceneComponent: React.FC = props => { } }, [autoDetectedTokenIds, filteredTokenIds]) + // A search that matches nothing otherwise renders a bare scene, which reads + // exactly like a broken search. Say which one it is: + const emptyComponent = React.useMemo( + () => + searchValue === '' ? null : ( + + {lstrings.managetokens_search_no_result} + + ), + [searchValue, styles.emptyText] + ) + const handleItemLayout = useRowLayout() // Goes to the add token scene: @@ -354,6 +366,7 @@ const ManageTokensSceneComponent: React.FC = props => { data={filteredTokenIds} extraData={extraData} keyExtractor={keyExtractor} + ListEmptyComponent={emptyComponent} renderItem={renderRow} style={styles.list} /> @@ -396,6 +409,13 @@ const keyExtractor = (tokenId: string): string => tokenId const getStyles = cacheStyles((theme: Theme) => ({ buttonsContainer: { marginTop: theme.rem(1), marginBottom: theme.rem(1) }, + emptyText: { + color: theme.secondaryText, + fontSize: theme.rem(0.85), + marginHorizontal: theme.rem(1), + marginTop: theme.rem(1), + textAlign: 'center' + }, list: { marginHorizontal: theme.rem(0.5) }, diff --git a/src/locales/en_US.ts b/src/locales/en_US.ts index 51f82a5058b..21d5d0198b1 100644 --- a/src/locales/en_US.ts +++ b/src/locales/en_US.ts @@ -199,6 +199,8 @@ const strings = { managetokens_detected_tokens_header: 'Auto Detected Tokens', managetokens_all_tokens_header: 'All Tokens', managetokens_top_instructions: 'Select tokens to display in wallet:', + managetokens_search_no_result: + 'No tokens match your search. Use "Add Custom" to add a token by its contract address.', accept_button_text: 'Accept', addtoken_contract_address_input_text: 'Contract Address', addtoken_currency_code_input_text: 'Token Code', diff --git a/src/locales/strings/enUS.json b/src/locales/strings/enUS.json index ecfa739a196..592be8dbed3 100644 --- a/src/locales/strings/enUS.json +++ b/src/locales/strings/enUS.json @@ -116,6 +116,7 @@ "managetokens_detected_tokens_header": "Auto Detected Tokens", "managetokens_all_tokens_header": "All Tokens", "managetokens_top_instructions": "Select tokens to display in wallet:", + "managetokens_search_no_result": "No tokens match your search. Use \"Add Custom\" to add a token by its contract address.", "accept_button_text": "Accept", "addtoken_contract_address_input_text": "Contract Address", "addtoken_currency_code_input_text": "Token Code",