Shopify · gonzaloriestra · Mar 2, 2026
@@ -13,7 +13,6 @@
   },
   "dependencies": {
     "@shopify/polaris-icons": "^8.0.0",
-    "@shopify/react-i18n": "^7.5.0",
     "@shopify/ui-extensions-server-kit": "5.4.0",
     "copy-to-clipboard": "^3.3.3",
     "qrcode.react": "^4.2.0",

@@ -4,7 +4,6 @@ import {Toast} from '@/foundation/Toast'
 import {Theme} from '@/foundation/Theme'
 import {ModalContainer} from '@/foundation/ModalContainer'
 import {ExtensionServerProvider, isValidSurface} from '@shopify/ui-extensions-server-kit'
-import {I18nContext, I18nManager} from '@shopify/react-i18n'
 import React from 'react'
 
 function getConnectionUrl() {
@@ -25,26 +24,16 @@ const extensionServerOptions = {
   surface: isValidSurface(surface) ? surface : undefined,
 }
 
-const i18nManager = new I18nManager({
-  locale: 'en',
-  onError(error) {
-    // eslint-disable-next-line no-console
-    console.error(error)
-  },
-})
-
 function App() {
   return (
     <ExtensionServerProvider options={extensionServerOptions}>
-      <I18nContext.Provider value={i18nManager}>
-        <Theme>
-          <Layout>
-            <Routes />
-            <Toast />
-            <ModalContainer />
-          </Layout>
-        </Theme>
-      </I18nContext.Provider>
+      <Theme>
+        <Layout>
+          <Routes />
+          <Toast />
+          <ModalContainer />
+        </Layout>
+      </Theme>
     </ExtensionServerProvider>
   )
 }

@@ -1,8 +1,8 @@
 import en from './translations/en.json'
 import {IconButton} from '@/components/IconButton/IconButton'
+import {useI18n} from '@/hooks/useI18n'
 import React from 'react'
 import {XIcon} from '@shopify/polaris-icons'
-import {useI18n} from '@shopify/react-i18n'
 
 interface CloseButtonProps {
   pressed?: boolean

@@ -1,9 +1,9 @@
 import en from './translations/en.json'
 import * as styles from './Layout.module.scss'
 import {isAppPreview} from '@/utilities/app-preview'
+import {useI18n} from '@/hooks/useI18n'
 import React from 'react'
 import {WrenchIcon} from '@shopify/polaris-icons'
-import {useI18n} from '@shopify/react-i18n'
 
 interface Props {
   children: React.ReactNode

@@ -0,0 +1,62 @@
+import React from 'react'
+
+type TranslationDictionary = Record<string, unknown>
+type Replacements = Record<string, string | number | React.ReactNode>
+
+interface I18nTranslator {
+  translate(key: string, replacements?: Replacements): React.ReactNode
+}
+
+function getNestedValue(obj: TranslationDictionary, key: string): string | undefined {
+  const result = key.split('.').reduce<unknown>((current, segment) => {
+    if (current != null && typeof current === 'object') {
+      return (current as TranslationDictionary)[segment]
+    }
+    return undefined
+  }, obj)
+  return typeof result === 'string' ? result : undefined
+}
+
+function interpolate(template: string, replacements?: Replacements): React.ReactNode {
+  if (!replacements) return template
+
+  const hasReactNodes = Object.values(replacements).some((value) => React.isValidElement(value))
+
+  if (!hasReactNodes) {
+    return template.replace(/\{(\w+)\}/g, (match, key: string) =>
+      key in replacements ? String(replacements[key]) : match,
+    )
+  }
+
+  const parts: React.ReactNode[] = []
+  const regex = /\{(\w+)\}/g
+  let lastIndex = 0
+  let match: RegExpExecArray | null
+
+  while ((match = regex.exec(template)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(template.slice(lastIndex, match.index))
+    }
+    const key = match[1]
+    parts.push(key in replacements ? replacements[key] : match[0])
+    lastIndex = regex.lastIndex
+  }
+
+  if (lastIndex < template.length) {
+    parts.push(template.slice(lastIndex))
+  }
+
+  return React.createElement(React.Fragment, null, ...parts)
+}
+
+export function useI18n({fallback}: {id: string; fallback: TranslationDictionary}): [I18nTranslator] {
+  return [
+    {
+      translate(key: string, replacements?: Replacements) {
+        const template = getNestedValue(fallback, key)
+        if (template == null) return key
+        return interpolate(template, replacements)
+      },
+    },
+  ]
+}
@@ -8,8 +8,8 @@ import {useApp} from './hooks/useApp'
 
 import {isEmbedded} from '@/utilities/embedded'
 import {isAppPreview} from '@/utilities/app-preview'
+import {useI18n} from '@/hooks/useI18n'
 import React from 'react'
-import {useI18n} from '@shopify/react-i18n'
 
 export function Extensions() {
   const [i18n] = useI18n({

@@ -1,8 +1,6 @@
 import {AppHomeRow} from '.'
-import en from './translations/en.json'
 import {PreviewLink, QRCodeModal} from '..'
 import {DefaultProviders} from 'tests/DefaultProviders'
-import {mockI18n} from 'tests/mock-i18n'
 import {Button} from '@/components'
 import React from 'react'
 
@@ -19,8 +17,6 @@ vi.mock('@/components', () => ({
   Button: (props: any) => props.children,
 }))
 
-mockI18n(en)
-
 describe('<AppHomeRow/>', () => {
   const defaultState = {
     app: {url: 'mock.url', title: 'Mock App Title'},

@@ -5,10 +5,9 @@ import {useApp} from '../../hooks/useApp'
 import {useExtensionServerOptions} from '../../hooks/useExtensionServerOptions.js'
 
 import {Button} from '@/components'
+import {useI18n} from '@/hooks/useI18n'
 import React, {useState} from 'react'
 
-import {useI18n} from '@shopify/react-i18n'
-
 export function AppHomeRow() {
   const [showModal, setShowModal] = useState(false)
   const [i18n] = useI18n({

@@ -1,8 +1,6 @@
 import {ExtensionRow} from '.'
-import en from './translations/en.json'
 import {QRCodeModal} from '..'
 import {DefaultProviders} from 'tests/DefaultProviders'
-import {mockI18n} from 'tests/mock-i18n'
 import {Button} from '@/components'
 import React from 'react'
 
@@ -19,8 +17,6 @@ vi.mock('..', () => ({
   Status: () => null,
 }))
 
-mockI18n(en)
-
 describe('<ExtensionRow/>', () => {
   const legacyAdminExtension = mockExtension({type: 'product_subscription', surface: 'admin'})
   const legacyPosExtension = mockExtension({type: 'pos_ui_extension', surface: 'point_of_sale'})

@@ -4,8 +4,8 @@ import * as styles from './ExtensionRow.module.scss'
 import {QRCodeModal, Row, Status} from '..'
 import {useExtension} from '../../hooks/useExtension'
 import {Button} from '@/components/Button'
+import {useI18n} from '@/hooks/useI18n'
 import React, {useState} from 'react'
-import {useI18n} from '@shopify/react-i18n'
 import {ExtensionPayload, ExtensionPoint, isUIExtension} from '@shopify/ui-extensions-server-kit'
 
 interface Props {

@@ -2,9 +2,9 @@ import en from './translations/en.json'
 import * as styles from './PreviewLinks.module.scss'
 import {NotApplicable, PreviewLink} from '../../..'
 import {classNames} from '@/utilities/css'
+import {useI18n} from '@/hooks/useI18n'
 import React from 'react'
 import {ExtensionPayload} from '@shopify/ui-extensions-server-kit'
-import {useI18n} from '@shopify/react-i18n'
 
 interface Props {
   extension: ExtensionPayload

@@ -3,8 +3,8 @@ import * as styles from './PreviewLink.module.scss'
 import {useNavigate} from '../../hooks/useNavigate.js'
 import {IconButton} from '@/components/IconButton'
 import {isEmbedded} from '@/utilities/embedded'
+import {useI18n} from '@/hooks/useI18n'
 import React from 'react'
-import {useI18n} from '@shopify/react-i18n'
 import {ClipboardIcon} from '@shopify/polaris-icons'
 import {toast} from 'react-toastify'
 

@@ -1,6 +1,4 @@
 import {QRCodeModal} from './QRCodeModal'
-import en from './translations/en.json'
-import {mockI18n} from 'tests/mock-i18n'
 import {DefaultProviders} from 'tests/DefaultProviders'
 import {Modal} from '@/components/Modal'
 import React from 'react'
@@ -12,8 +10,6 @@ vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null)
 
 vi.mock('@/components/Modal', () => ({Modal: (props: any) => props.children}))
 
-mockI18n(en)
-
 describe('QRCodeModal', () => {
   const defaultProps = {
     onClose: vi.fn(),

@@ -3,8 +3,8 @@ import en from './translations/en.json'
 import {useApp} from '../../hooks/useApp'
 import {Modal, ModalProps} from '@/components/Modal'
 import {IconButton} from '@/components/IconButton'
+import {useI18n} from '@/hooks/useI18n'
 import React, {useCallback, useMemo} from 'react'
-import {useI18n} from '@shopify/react-i18n'
 import copyToClipboard from 'copy-to-clipboard'
 import {QRCodeCanvas as QRCode} from 'qrcode.react'
 import {toast} from 'react-toastify'

@@ -1,8 +1,8 @@
 import en from './translations/en.json'
 import * as styles from './Status.module.scss'
 import {Tooltip} from '@/components/Tooltip'
+import {useI18n} from '@/hooks/useI18n'
 import React from 'react'
-import {useI18n} from '@shopify/react-i18n'
 import {Status as StatusProp} from '@shopify/ui-extensions-server-kit'
 
 interface Props {

@@ -1,5 +1,4 @@
-import {MockI18nProvider} from './MockI18nProvider'
 import {MockExtensionServerProvider} from '@shopify/ui-extensions-server-kit/testing'
 import {withProviders} from '@shopify/ui-extensions-test-utils'
 
-export const DefaultProviders = withProviders(MockExtensionServerProvider, MockI18nProvider)
+export const DefaultProviders = withProviders(MockExtensionServerProvider)