Use consistent encoding for text in search params

Previously, text was sometimes encoded as foo%20bar,
other times as foo+bar.

Let's always use the more readable, plus-based encoding
when we are dealing with free form text that might
contain spaces.

Author: csillag

src/app/pages/SearchResultsPage/useRedirectIfSingleResult.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { isConsensusBlock, isConsensusTransaction, SearchResults } from './hooks'
-import { RouteUtils } from '../../utils/route-utils'
+import { encodeStringForUrl, RouteUtils } from '../../utils/route-utils'
 import { isItemInScope, SearchScope } from '../../../types/searchScope'
 import { Network } from '../../../types/network'
 import { exhaustedTypeWarning } from '../../../types/errors'
@@ -53,7 +53,7 @@ export function useRedirectIfSingleResult(
             (!!consensusAccount && item.address.toLowerCase() === consensusAccount.toLowerCase())
           ) // If we found this account based on address, then we don't want to highlight that.
         ) {
-          redirectTo += `?q=${query}`
+          redirectTo += `?q=${encodeStringForUrl(query)}`
         }
         break
       case 'contract':
@@ -63,13 +63,13 @@ export function useRedirectIfSingleResult(
         redirectTo = `${RouteUtils.getTokenRoute(
           item,
           item.eth_contract_addr || item.contract_addr,
-        )}?q=${query}`
+        )}?q=${encodeStringForUrl(query)}`
         break
       case 'proposal':
-        redirectTo = `${RouteUtils.getProposalRoute(item.network, item.id)}?q=${query}`
+        redirectTo = `${RouteUtils.getProposalRoute(item.network, item.id)}?q=${encodeStringForUrl(query)}`
         break
       case 'roflApp':
-        redirectTo = `${RouteUtils.getRoflAppRoute(item.network, item.id)}?q=${query}`
+        redirectTo = `${RouteUtils.getRoflAppRoute(item.network, item.id)}?q=${encodeStringForUrl(query)}`
         break
       default:
         exhaustedTypeWarning('Unexpected result type', item)

src/app/utils/route-utils.ts

@@ -80,6 +80,8 @@ export const isScopeHidden = (scope: SearchScope): boolean =>
 
 export const isNotInHiddenScope = (item: HasScope) => !isScopeHidden(item)
 
+export const encodeStringForUrl = (text: string) => encodeURIComponent(text).replace(/%20/g, '+')
+
 const formatPreservedParams = (searchParams: URLSearchParams | undefined, paramsToKeep: string[]): string => {
   if (!searchParams) return ''
   const toDelete: string[] = []
@@ -200,7 +202,7 @@ export abstract class RouteUtils {
   static getSearchRoute = (scope: SearchScope | undefined, searchTerm: string) => {
     return scope
       ? `${this.getScopeRoute(scope)}/search?q=${encodeURIComponent(searchTerm)}`
-      : `/search?q=${encodeURIComponent(searchTerm)}`
+      : `/search?q=${encodeStringForUrl(searchTerm)}`
   }
 
   static getTokenRoute = (scope: SearchScope, tokenAddress: string) => {