fix: use render function for SearchBar placeholder translation (#5710)

* fix: use render function for SearchBar placeholder translation

* fix: use render function for SearchBar placeholder translation

* fix: correct clsx usage

src/components/NavBar/SearchBar.tsx

@@ -1,5 +1,5 @@
 // eslint-disable-next-line no-restricted-imports
-import { t } from '@lingui/macro'
+import { t, Trans } from '@lingui/macro'
 import { sendAnalyticsEvent, Trace, TraceEvent, useTrace } from '@uniswap/analytics'
 import { BrowserEvent, ElementName, EventName, SectionName } from '@uniswap/analytics-events'
 import clsx from 'clsx'
@@ -156,9 +156,9 @@ export const SearchBar = () => {
       >
         <Row
           className={clsx(
-            ` ${styles.nftSearchBar} ${!isOpen && !isMobile && magicalGradientOnHover} ${
+            styles.nftSearchBar,
+            !isOpen && !isMobile && magicalGradientOnHover,
             isMobileOrTablet && (isOpen ? styles.visible : styles.hidden)
-            } `
           )}
           borderRadius={isOpen || isMobileOrTablet ? undefined : '12'}
           borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
@@ -182,9 +182,12 @@ export const SearchBar = () => {
             element={ElementName.NAVBAR_SEARCH_INPUT}
             properties={{ ...trace }}
           >
+            <Trans
+              id={placeholderText}
+              render={({ translation }) => (
                 <Box
                   as="input"
-              placeholder={placeholderText}
+                  placeholder={translation as string}
                   onChange={(event: ChangeEvent<HTMLInputElement>) => {
                     !isOpen && toggleOpen()
                     setSearchValue(event.target.value)
@@ -195,6 +198,8 @@ export const SearchBar = () => {
                   ref={inputRef}
                   width="full"
                 />
+              )}
+            />
           </TraceEvent>
           {!isOpen && <KeyShortCut>/</KeyShortCut>}
         </Row>