fix: avoid using i18n in hookDappsRegistry (#6633)

Because Explorer has not integrated it yet and cannot render the values from registry

Author: shoom3301

apps/cowswap-frontend/src/common/containers/OrderHooksDetails/HookItem/index.tsx

@@ -1,9 +1,9 @@
-import { useState } from 'react'
+import { ReactNode, useState } from 'react'
 
 import { CowHookDetails, HookToDappMatch } from '@cowprotocol/hook-dapp-lib'
 
 import { t } from '@lingui/core/macro'
-import { Trans, useLingui } from '@lingui/react/macro'
+import { Trans } from '@lingui/react/macro'
 import { ChevronDown, ChevronUp } from 'react-feather'
 
 import { useSimulationData } from 'modules/tenderly/hooks/useSimulationData'
@@ -13,13 +13,18 @@ import { CowSwapAnalyticsCategory, toCowSwapGtmEvent } from 'common/analytics/ty
 import * as styledEl from './styled'
 
 // TODO: Break down this large function into smaller functions
-// TODO: Add proper return type annotation
-// TODO: Reduce function complexity by extracting logic
-// eslint-disable-next-line max-lines-per-function, @typescript-eslint/explicit-function-return-type
-export function HookItem({ details, item, index }: { details?: CowHookDetails; item: HookToDappMatch; index: number }) {
+// eslint-disable-next-line max-lines-per-function
+export function HookItem({
+  details,
+  item,
+  index,
+}: {
+  details?: CowHookDetails
+  item: HookToDappMatch
+  index: number
+}): ReactNode {
   const [isOpen, setIsOpen] = useState(false)
   const simulationData = useSimulationData(details?.uuid)
-  const { i18n } = useLingui()
 
   const dappName = item.dapp?.name || t`Unknown Hook`
 
@@ -37,8 +42,8 @@ export function HookItem({ details, item, index }: { details?: CowHookDetails; i
           <styledEl.HookNumber>{index + 1}</styledEl.HookNumber>
           {item.dapp ? (
             <>
-              <img src={item.dapp.image} alt={i18n._(item.dapp.name)} />
-              <span>{i18n._(item.dapp.name)}</span>
+              <img src={item.dapp.image} alt={item.dapp.name} />
+              <span>{item.dapp.name}</span>
             </>
           ) : (
             <span>
@@ -79,7 +84,7 @@ export function HookItem({ details, item, index }: { details?: CowHookDetails; i
                 <b>
                   <Trans>Description</Trans>:
                 </b>{' '}
-                {item.dapp?.descriptionShort ? i18n._(item.dapp.descriptionShort) : ''}
+                {item.dapp?.descriptionShort}
               </p>
               <p>
                 <b>

apps/cowswap-frontend/src/modules/hooksStore/containers/HookRegistryList/index.tsx

@@ -6,7 +6,7 @@ import { Command } from '@cowprotocol/types'
 import { BannerOrientation, DismissableInlineBanner } from '@cowprotocol/ui'
 
 import { t } from '@lingui/core/macro'
-import { Trans, useLingui } from '@lingui/react/macro'
+import { Trans } from '@lingui/react/macro'
 
 import { NewModal } from 'common/pure/NewModal'
 
@@ -46,7 +46,6 @@ export function HookRegistryList({ onDismiss, isPreHook, hookToEdit, walletType
   const customHookDapps = useCustomHookDapps(isPreHook)
   const hookToEditDetails = useHookById(hookToEdit, isPreHook)
   const internalHookDapps = useInternalHookDapps(isPreHook)
-  const { i18n } = useLingui()
 
   const currentDapps = useMemo(
     () => (isAllHooksTab ? [...internalHookDapps, ...customHookDapps] : customHookDapps),
@@ -57,19 +56,17 @@ export function HookRegistryList({ onDismiss, isPreHook, hookToEdit, walletType
     const lowerQuery = searchQuery?.toLowerCase()
 
     return currentDapps.filter((item) => {
-      const { name = undefined, descriptionShort = undefined } = item
+      const { name = '', descriptionShort = '' } = item
 
       const instance = isHookDappIframe(item) ? item.url : item.component
 
       if (!instance) return false
 
       if (!lowerQuery) return true
 
-      return [name ? i18n._(name) : '', descriptionShort ? i18n._(descriptionShort) : ''].some((text) =>
-        text.toLowerCase().includes(lowerQuery),
-      )
+      return [name, descriptionShort].some((text) => text.toLowerCase().includes(lowerQuery))
     })
-  }, [currentDapps, i18n, searchQuery])
+  }, [currentDapps, searchQuery])
 
   const sortedFilteredDapps = useMemo(() => {
     return filteredDapps.sort((a, b) => {
@@ -82,8 +79,7 @@ export function HookRegistryList({ onDismiss, isPreHook, hookToEdit, walletType
   const customHooksCount = customHookDapps.length
   const allHooksCount = internalHookDapps.length + customHooksCount
 
-  const title =
-    (selectedDapp?.name ? i18n._(selectedDapp?.name) : undefined) || (dappDetails ? t`Hook description` : t`Hook Store`)
+  const title = selectedDapp?.name || (dappDetails ? t`Hook description` : t`Hook Store`)
 
   const onDismissModal = useCallback(() => {
     if (hookToEdit) {
@@ -157,7 +153,7 @@ export function HookRegistryList({ onDismiss, isPreHook, hookToEdit, walletType
           <HookDappsList>
             {sortedFilteredDapps.map((dapp) => (
               <HookListItem
-                key={isHookDappIframe(dapp) ? dapp.url : i18n._(dapp.name)}
+                key={isHookDappIframe(dapp) ? dapp.url : dapp.name}
                 dapp={dapp}
                 walletType={walletType}
                 onRemove={!isAllHooksTab ? () => removeCustomHookDapp(dapp as HookDappIframe) : undefined}
@@ -178,7 +174,6 @@ export function HookRegistryList({ onDismiss, isPreHook, hookToEdit, walletType
       handleAddCustomHook,
       sortedFilteredDapps,
       emptyListMessage,
-      i18n,
       walletType,
       removeCustomHookDapp,
     ],

apps/cowswap-frontend/src/modules/hooksStore/pure/HookDetailHeader/index.tsx

@@ -1,7 +1,9 @@
+import { ReactNode } from 'react'
+
 import { HookDappWalletCompatibility } from '@cowprotocol/hook-dapp-lib'
 
 import { t } from '@lingui/core/macro'
-import { Trans, useLingui } from '@lingui/react/macro'
+import { Trans } from '@lingui/react/macro'
 
 import * as styled from './styled'
 
@@ -17,20 +19,23 @@ interface HookDetailHeaderProps {
   padding?: string
 }
 
-// TODO: Add proper return type annotation
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function HookDetailHeader({ dapp, walletType, onSelect, iconSize, gap, padding }: HookDetailHeaderProps) {
-  const { name, image, descriptionShort } = dapp
+export function HookDetailHeader({
+  dapp,
+  walletType,
+  onSelect,
+  iconSize,
+  gap,
+  padding,
+}: HookDetailHeaderProps): ReactNode {
+  const { name: dAppName, image, descriptionShort } = dapp
   const isCompatible = isHookCompatible(dapp, walletType)
-  const { i18n } = useLingui()
-  const dAppName = i18n._(name)
 
   return (
     <styled.Header iconSize={iconSize} gap={gap} padding={padding}>
       <img src={image} alt={dAppName} />
       <styled.Content>
         <h3>{dAppName}</h3>
-        <styled.Description>{descriptionShort ? i18n._(descriptionShort) : ''}</styled.Description>
+        <styled.Description>{descriptionShort}</styled.Description>
         {onSelect &&
           (isCompatible ? (
             <styled.AddButton onClick={onSelect}>

apps/cowswap-frontend/src/modules/hooksStore/pure/HookListItem/index.tsx

@@ -1,9 +1,11 @@
+import { ReactNode } from 'react'
+
 import ICON_INFO from '@cowprotocol/assets/cow-swap/info.svg'
 import { HookDappWalletCompatibility } from '@cowprotocol/hook-dapp-lib'
 import { Command } from '@cowprotocol/types'
 
 import { t } from '@lingui/core/macro'
-import { Trans, useLingui } from '@lingui/react/macro'
+import { Trans } from '@lingui/react/macro'
 import SVG from 'react-inlinesvg'
 
 import * as styled from './styled'
@@ -19,25 +21,18 @@ interface HookListItemProps {
   onRemove?: Command
 }
 
-// TODO: Add proper return type annotation
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function HookListItem({ dapp, walletType, onSelect, onOpenDetails, onRemove }: HookListItemProps) {
-  const { name, descriptionShort, image, version } = dapp
-  const { i18n } = useLingui()
+export function HookListItem({ dapp, walletType, onSelect, onOpenDetails, onRemove }: HookListItemProps): ReactNode {
+  const { name: dAppName, descriptionShort, image, version } = dapp
   const isCompatible = isHookCompatible(dapp, walletType)
 
-  // TODO: Add proper return type annotation
-  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-  const handleItemClick = (event: React.MouseEvent<HTMLLIElement>) => {
+  const handleItemClick = (event: React.MouseEvent<HTMLLIElement>): void => {
     const target = event.target as HTMLElement
     // Check if the click target is not a button or the info icon
     if (!target.closest('.link-button') && !target.closest('.remove-button') && !target.closest('i')) {
       onOpenDetails()
     }
   }
 
-  const dAppName = i18n._(name)
-
   return (
     <styled.HookDappListItem
       onClick={handleItemClick}
@@ -49,7 +44,7 @@ export function HookListItem({ dapp, walletType, onSelect, onOpenDetails, onRemo
       <styled.HookDappDetails onClick={onOpenDetails}>
         <h3>{dAppName}</h3>
         <p>
-          {descriptionShort ? i18n._(descriptionShort) : ''}
+          {descriptionShort}
           <styled.Version>{version}</styled.Version>
         </p>
       </styled.HookDappDetails>

apps/explorer/src/components/orders/OrderHooksDetails/HookItem/index.tsx

@@ -1,12 +1,10 @@
-import { useState } from 'react'
+import { ReactNode, useState } from 'react'
 
 import { HookToDappMatch } from '@cowprotocol/hook-dapp-lib'
 
 import { Item, Wrapper, ToggleButton, Details } from './styled'
 
-// TODO: Add proper return type annotation
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function HookItem({ item, number }: { item: HookToDappMatch; number: number }) {
+export function HookItem({ item, number }: { item: HookToDappMatch; number: number }): ReactNode {
   const [showDetails, setShowDetails] = useState(false)
 
   // TODO: Add proper return type annotation
@@ -20,8 +18,7 @@ export function HookItem({ item, number }: { item: HookToDappMatch; number: numb
           #{number} -{' '}
           {item.dapp ? (
             <>
-              {/* Note: use MessageDescriptor.message, it contains the original not localized string. */}
-              <img src={item.dapp.image} alt={item.dapp.name.message} /> <strong>{item.dapp.name.message}</strong>{' '}
+              <img src={item.dapp.image} alt={item.dapp.name} /> <strong>{item.dapp.name}</strong>{' '}
             </>
           ) : (
             'Unknown hook dapp'
@@ -37,7 +34,7 @@ export function HookItem({ item, number }: { item: HookToDappMatch; number: numb
                   <i>Version:</i> {item.dapp.version}
                 </p>
                 <p>
-                  <i>Description:</i> {item.dapp.descriptionShort?.message}
+                  <i>Description:</i> {item.dapp.descriptionShort}
                 </p>
                 <p>
                   <i>Website: </i>