Explain an empty Manage Tokens search result

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.

src/components/scenes/ManageTokensScene.tsx

@@ -190,6 +190,18 @@ const ManageTokensSceneComponent: React.FC<Props> = 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 : (
+        <EdgeText style={styles.emptyText} numberOfLines={3}>
+          {lstrings.managetokens_search_no_result}
+        </EdgeText>
+      ),
+    [searchValue, styles.emptyText]
+  )
+
   const handleItemLayout = useRowLayout()
 
   // Goes to the add token scene:
@@ -354,6 +366,7 @@ const ManageTokensSceneComponent: React.FC<Props> = 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)
   },

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',

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",