From 206c0b4d85b35c9346b66c113e62eea205b1d93b Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Fri, 4 Sep 2020 16:32:42 +0200
Subject: [PATCH] Swap to actual react-i18next (#431)

* Swap to actual react-i18next

* Update i18n creation
---
 packages/extension-ui/package.json            |  3 ++
 .../src/Popup/Accounts/Account.tsx            | 10 ++---
 .../src/Popup/Accounts/AddAccount.tsx         |  2 +-
 .../extension-ui/src/Popup/Accounts/index.tsx |  2 +-
 .../src/Popup/Authorize/Request.tsx           | 23 +++++-----
 .../src/Popup/Authorize/index.tsx             |  2 +-
 .../src/Popup/CreateAccount/AccountName.tsx   |  2 +-
 .../src/Popup/CreateAccount/Mnemonic.tsx      |  6 +--
 .../src/Popup/CreateAccount/index.tsx         |  2 +-
 .../src/Popup/Derive/DerivationPath.tsx       |  2 +-
 .../src/Popup/Derive/SelectParent.tsx         | 10 ++---
 .../extension-ui/src/Popup/Derive/index.tsx   |  4 +-
 packages/extension-ui/src/Popup/Export.tsx    | 10 ++---
 packages/extension-ui/src/Popup/Forget.tsx    |  8 ++--
 packages/extension-ui/src/Popup/ImportQr.tsx  |  4 +-
 .../extension-ui/src/Popup/ImportSeed.tsx     |  6 +--
 .../src/Popup/Metadata/Request.tsx            | 18 ++++----
 .../extension-ui/src/Popup/Metadata/index.tsx |  2 +-
 .../extension-ui/src/Popup/RestoreJson.tsx    |  8 ++--
 .../extension-ui/src/Popup/Signing/Bytes.tsx  |  4 +-
 .../src/Popup/Signing/Extrinsic.tsx           | 25 ++++++-----
 .../extension-ui/src/Popup/Signing/Qr.tsx     |  2 +-
 .../src/Popup/Signing/Request.tsx             |  6 +--
 .../extension-ui/src/Popup/Signing/Unlock.tsx |  2 +-
 .../extension-ui/src/Popup/Signing/index.tsx  |  2 +-
 packages/extension-ui/src/Popup/Welcome.tsx   | 14 +++---
 .../extension-ui/src/components/Loading.tsx   |  2 +-
 .../src/components/MnemonicSeed.tsx           |  4 +-
 packages/extension-ui/src/createView.tsx      |  2 +
 .../extension-ui/src/hooks/useTranslation.ts  | 17 +------
 packages/extension-ui/src/i18n.ts             | 30 +++++++++++++
 packages/extension-ui/src/partials/Back.tsx   |  2 +-
 .../extension-ui/src/partials/MenuAdd.tsx     |  6 +--
 .../src/partials/MenuSettings.tsx             |  8 ++--
 packages/extension-ui/src/partials/Name.tsx   |  2 +-
 .../extension-ui/src/partials/Password.tsx    |  4 +-
 yarn.lock                                     | 45 ++++++++++++++++++-
 37 files changed, 183 insertions(+), 118 deletions(-)
 create mode 100644 packages/extension-ui/src/i18n.ts

diff --git a/packages/extension-ui/package.json b/packages/extension-ui/package.json
index 6dd3f2ff..9d6322cc 100644
--- a/packages/extension-ui/package.json
+++ b/packages/extension-ui/package.json
@@ -13,9 +13,12 @@
     "@polkadot/react-qr": "^0.59.0-beta.0",
     "@polkadot/util": "^3.4.1",
     "@polkadot/util-crypto": "^3.4.1",
+    "i18next": "^19.7.0",
+    "i18next-browser-languagedetector": "^5.0.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-dropzone": "^11.0.3",
+    "react-i18next": "^11.7.2",
     "react-is": "^16.13.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
diff --git a/packages/extension-ui/src/Popup/Accounts/Account.tsx b/packages/extension-ui/src/Popup/Accounts/Account.tsx
index 464feee7..8953e38f 100644
--- a/packages/extension-ui/src/Popup/Accounts/Account.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/Account.tsx
@@ -69,14 +69,14 @@ function Account ({ address, className, genesisHash, isExternal, isHidden, paren
         className='menuItem'
         onClick={_toggleEdit}
       >
-        {t('Rename')}
+        {t<string>('Rename')}
       </Link>
       {!isExternal && (
         <Link
           className='menuItem'
           to={`/account/derive/${address}/locked`}
         >
-          {t('Derive New Account')}
+          {t<string>('Derive New Account')}
         </Link>
       )}
       <MenuDivider />
@@ -86,7 +86,7 @@ function Account ({ address, className, genesisHash, isExternal, isHidden, paren
           isDanger
           to={`/account/export/${address}`}
         >
-          {t('Export Account')}
+          {t<string>('Export Account')}
         </Link>
       )}
       <Link
@@ -94,14 +94,14 @@ function Account ({ address, className, genesisHash, isExternal, isHidden, paren
         isDanger
         to={`/account/forget/${address}`}
       >
-        {t('Forget Account')}
+        {t<string>('Forget Account')}
       </Link>
       <MenuDivider />
       <div className='menuItem'>
         <Checkbox
           checked={!isHidden}
           className='inputItem'
-          label={t('Visible (always inject)')}
+          label={t<string>('Visible (always inject)')}
           onClick={_toggleVisibility}
         />
       </div>
diff --git a/packages/extension-ui/src/Popup/Accounts/AddAccount.tsx b/packages/extension-ui/src/Popup/Accounts/AddAccount.tsx
index 62de2c78..742543de 100644
--- a/packages/extension-ui/src/Popup/Accounts/AddAccount.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/AddAccount.tsx
@@ -36,7 +36,7 @@ function AddAccount ({ className }: Props): React.ReactElement<Props> {
           <AddAccountImage onClick={_onClick}/>
         </div>
         <div className='no-accounts'>
-          <p>{t("You currently don't have any accounts. Create your first account to get started.")}</p>
+          <p>{t<string>("You currently don't have any accounts. Create your first account to get started.")}</p>
         </div>
       </div>
     </>
diff --git a/packages/extension-ui/src/Popup/Accounts/index.tsx b/packages/extension-ui/src/Popup/Accounts/index.tsx
index 00cc2c87..e3cc2772 100644
--- a/packages/extension-ui/src/Popup/Accounts/index.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/index.tsx
@@ -24,7 +24,7 @@ export default function Accounts (): React.ReactElement {
             <Header
               showAdd
               showSettings
-              text={t('Accounts')}
+              text={t<string>('Accounts')}
             />
             <AccountsArea>
               {hierarchy.map((json, index): React.ReactNode => (
diff --git a/packages/extension-ui/src/Popup/Authorize/Request.tsx b/packages/extension-ui/src/Popup/Authorize/Request.tsx
index 7ac9130f..559ce828 100644
--- a/packages/extension-ui/src/Popup/Authorize/Request.tsx
+++ b/packages/extension-ui/src/Popup/Authorize/Request.tsx
@@ -6,6 +6,7 @@ import { RequestAuthorizeTab } from '@polkadot/extension-base/background/types';
 import { ThemeProps } from '../../types';
 
 import React, { useCallback, useContext } from 'react';
+import { Trans } from 'react-i18next';
 import styled from 'styled-components';
 
 import { ActionBar, ActionContext, Button, Icon, Link, Warning } from '../../components';
@@ -38,7 +39,6 @@ function Request ({ authId, className, isFirst, request: { origin }, url }: Prop
     [authId, onAction]
   );
 
-  // FIXME i18next <Trans /> component to be used here
   return (
     <div className={className}>
       <RequestInfo>
@@ -48,20 +48,21 @@ function Request ({ authId, className, isFirst, request: { origin }, url }: Prop
             onClick={_onReject}
           />
           <div className='tab-info'>
-            An application, self-identifying as <span className='tab-name'>{origin}</span> is requesting access from{' '}
-            <a
-              href={url}
-              rel='noopener noreferrer'
-              target='_blank'
-            >
-              <span className='tab-url'>{url}</span>
-            </a>.
+            <Trans key='accessRequest'>An application, self-identifying as <span className='tab-name'>{origin}</span> is requesting access from{' '}
+              <a
+                href={url}
+                rel='noopener noreferrer'
+                target='_blank'
+              >
+                <span className='tab-url'>{url}</span>
+              </a>.
+            </Trans>
           </div>
         </Info>
         {isFirst && (
           <>
-            <RequestWarning>{t('Only approve this request if you trust the application. Approving gives the application access to the addresses of your accounts.')}</RequestWarning>
-            <AcceptButton onClick={_onApprove}>{t('Yes, allow this application access')}</AcceptButton>
+            <RequestWarning>{t<string>('Only approve this request if you trust the application. Approving gives the application access to the addresses of your accounts.')}</RequestWarning>
+            <AcceptButton onClick={_onApprove}>{t<string>('Yes, allow this application access')}</AcceptButton>
           </>
         )}
         <RejectButton>
diff --git a/packages/extension-ui/src/Popup/Authorize/index.tsx b/packages/extension-ui/src/Popup/Authorize/index.tsx
index e23ef5d7..d3868683 100644
--- a/packages/extension-ui/src/Popup/Authorize/index.tsx
+++ b/packages/extension-ui/src/Popup/Authorize/index.tsx
@@ -17,7 +17,7 @@ export default function Authorize (): React.ReactElement {
   return (
     <>
       <Scroll isLastRequest={requests.length === 1}>
-        <Header text={t('Authorize')} />
+        <Header text={t<string>('Authorize')} />
         {requests.map(({ id, request, url }, index): React.ReactNode => (
           <Request
             authId={id}
diff --git a/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx b/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx
index 6a5049eb..64283ec6 100644
--- a/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx
+++ b/packages/extension-ui/src/Popup/CreateAccount/AccountName.tsx
@@ -41,7 +41,7 @@ function AccountName ({ isBusy, onBackClick, onCreate }: Props): React.ReactElem
           isDisabled={!password || !name}
           onClick={_onCreate}
         >
-          {t('Add the account with the generated seed')}
+          {t<string>('Add the account with the generated seed')}
         </NextStepButton>
       </ButtonArea>
     </>
diff --git a/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx b/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx
index d67cc2d5..9e43c08c 100644
--- a/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx
+++ b/packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx
@@ -40,11 +40,11 @@ function Mnemonic ({ onNextStep, seed }: Props): React.ReactElement<Props> {
         onCopy={_onCopy}
         seed={seed}
       />
-      <Warning>{t("Please write down your wallet's mnemonic seed and keep it in a safe place. The mnemonic can be used to restore your wallet. Keep it carefully to not lose your assets.")}</Warning>
+      <Warning>{t<string>("Please write down your wallet's mnemonic seed and keep it in a safe place. The mnemonic can be used to restore your wallet. Keep it carefully to not lose your assets.")}</Warning>
       <VerticalSpace />
       <Checkbox
         checked={isMnemonicSaved}
-        label={t('I have saved my mnemonic seed safely.')}
+        label={t<string>('I have saved my mnemonic seed safely.')}
         onChange={setIsMnemonicSaved}
       />
       <ButtonArea>
@@ -52,7 +52,7 @@ function Mnemonic ({ onNextStep, seed }: Props): React.ReactElement<Props> {
           isDisabled={!isMnemonicSaved}
           onClick={onNextStep}
         >
-          {t('Next step')}
+          {t<string>('Next step')}
         </NextStepButton>
       </ButtonArea>
     </>
diff --git a/packages/extension-ui/src/Popup/CreateAccount/index.tsx b/packages/extension-ui/src/Popup/CreateAccount/index.tsx
index 321fcac2..c51a4bec 100644
--- a/packages/extension-ui/src/Popup/CreateAccount/index.tsx
+++ b/packages/extension-ui/src/Popup/CreateAccount/index.tsx
@@ -49,7 +49,7 @@ export default function CreateAccount (): React.ReactElement {
     <>
       <HeaderWithSteps
         step={step}
-        text={t('Create an account')}
+        text={t<string>('Create an account')}
       />
       <Loading>
         <div>
diff --git a/packages/extension-ui/src/Popup/Derive/DerivationPath.tsx b/packages/extension-ui/src/Popup/Derive/DerivationPath.tsx
index ba9121fb..40388ee9 100644
--- a/packages/extension-ui/src/Popup/Derive/DerivationPath.tsx
+++ b/packages/extension-ui/src/Popup/Derive/DerivationPath.tsx
@@ -47,7 +47,7 @@ function DerivationPath ({ className, defaultPath, isError, onChange }: Props):
                 : t('Derivation Path (unlock to edit)')
             }
             onChange={_onChange}
-            placeholder={t('//hard/soft')}
+            placeholder={t<string>('//hard/soft')}
             value={path}
           />
         </PathInput>
diff --git a/packages/extension-ui/src/Popup/Derive/SelectParent.tsx b/packages/extension-ui/src/Popup/Derive/SelectParent.tsx
index 2a90e3ef..532f54bb 100644
--- a/packages/extension-ui/src/Popup/Derive/SelectParent.tsx
+++ b/packages/extension-ui/src/Popup/Derive/SelectParent.tsx
@@ -95,7 +95,7 @@ export function SelectParent ({ isLocked, onDerivationConfirmed, parentAddress,
       {!isLocked && (
         <CheckboxWithSmallerMargins
           checked={shouldAccountBeDerived}
-          label={t('Derive new account from existing')}
+          label={t<string>('Derive new account from existing')}
           onChange={setShouldAccountBeDerived}
         />
       )}
@@ -108,7 +108,7 @@ export function SelectParent ({ isLocked, onDerivationConfirmed, parentAddress,
             />
           )
           : (
-            <Label label={t('Choose Parent Account:')}>
+            <Label label={t<string>('Choose Parent Account:')}>
               <AddressDropdown
                 allAddresses={allAddresses}
                 onSelect={_onParentChange}
@@ -123,7 +123,7 @@ export function SelectParent ({ isLocked, onDerivationConfirmed, parentAddress,
             data-export-password
             isError={!isProperParentPassword}
             isFocused
-            label={t('enter the password for the account you want to derive from')}
+            label={t<string>('enter the password for the account you want to derive from')}
             onChange={_onParentPasswordEnter}
             type='password'
             value={parentPassword}
@@ -148,7 +148,7 @@ export function SelectParent ({ isLocked, onDerivationConfirmed, parentAddress,
               isDisabled={!isProperParentPassword || !suriPath}
               onClick={_onSubmit}
             >
-              {t('Create a derived account')}
+              {t<string>('Create a derived account')}
             </NextStepButton>
           )
           : (
@@ -156,7 +156,7 @@ export function SelectParent ({ isLocked, onDerivationConfirmed, parentAddress,
               data-button-action='create root account'
               onClick={_goCreate}
             >
-              {t('Create account from new seed')}
+              {t<string>('Create account from new seed')}
             </NextStepButton>
           )
         }
diff --git a/packages/extension-ui/src/Popup/Derive/index.tsx b/packages/extension-ui/src/Popup/Derive/index.tsx
index 0ae51d0c..eb8bfa17 100644
--- a/packages/extension-ui/src/Popup/Derive/index.tsx
+++ b/packages/extension-ui/src/Popup/Derive/index.tsx
@@ -71,7 +71,7 @@ function Derive ({ isLocked }: Props): React.ReactElement<Props> {
     <>
       <HeaderWithSteps
         step={account ? 2 : 1}
-        text={t('Add new account')}
+        text={t<string>('Add new account')}
       />
       {!account && (
         <SelectParent
@@ -103,7 +103,7 @@ function Derive ({ isLocked }: Props): React.ReactElement<Props> {
               isDisabled={!password}
               onClick={_onCreate}
             >
-              {t('Create derived account')}
+              {t<string>('Create derived account')}
             </NextStepButton>
           </ButtonArea>
         </>
diff --git a/packages/extension-ui/src/Popup/Export.tsx b/packages/extension-ui/src/Popup/Export.tsx
index 405466db..52ff470e 100644
--- a/packages/extension-ui/src/Popup/Export.tsx
+++ b/packages/extension-ui/src/Popup/Export.tsx
@@ -57,17 +57,17 @@ function Export ({ match: { params: { address } } }: Props): React.ReactElement<
     <>
       <Header
         showBackArrow
-        text={t('Export account')}
+        text={t<string>('Export account')}
       />
       <div>
         <Address address={address}>
-          <MovedWarning danger>{t("You are exporting your account. Keep it safe and don't share it with anyone.")}</MovedWarning>
+          <MovedWarning danger>{t<string>("You are exporting your account. Keep it safe and don't share it with anyone.")}</MovedWarning>
           <ActionArea>
             <InputWithLabel
               data-export-password
               disabled={isBusy}
               isError={pass.length < MIN_LENGTH || wrongPasswordHighlight}
-              label={t('password for this account')}
+              label={t<string>('password for this account')}
               onChange={setPass}
               type='password'
             />
@@ -79,12 +79,12 @@ function Export ({ match: { params: { address } } }: Props): React.ReactElement<
               isDisabled={pass.length === 0}
               onClick={_onExportButtonClick}
             >
-              {t('I want to export this account')}
+              {t<string>('I want to export this account')}
             </Button>
             <CancelButton>
               <ActionText
                 onClick={_goHome}
-                text={t('Cancel')}
+                text={t<string>('Cancel')}
               />
             </CancelButton>
           </ActionArea>
diff --git a/packages/extension-ui/src/Popup/Forget.tsx b/packages/extension-ui/src/Popup/Forget.tsx
index a6311ed9..6213040c 100644
--- a/packages/extension-ui/src/Popup/Forget.tsx
+++ b/packages/extension-ui/src/Popup/Forget.tsx
@@ -34,22 +34,22 @@ function Forget ({ match: { params: { address } } }: Props): React.ReactElement<
     <>
       <Header
         showBackArrow
-        text={t('Forget account')}
+        text={t<string>('Forget account')}
       />
       <div>
         <Address address={address}>
-          <MovedWarning isDanger>{t('You are about to remove the account. This means that you will not be able to access it via this extension anymore. If you wish to recover it, you would need to use the seed.')}</MovedWarning>
+          <MovedWarning isDanger>{t<string>('You are about to remove the account. This means that you will not be able to access it via this extension anymore. If you wish to recover it, you would need to use the seed.')}</MovedWarning>
           <ActionArea>
             <Button
               isDanger
               onClick={_onClick}
             >
-              {t('I want to forget this account')}
+              {t<string>('I want to forget this account')}
             </Button>
             <CancelButton>
               <ActionText
                 onClick={_goHome}
-                text={t('Cancel')}
+                text={t<string>('Cancel')}
               />
             </CancelButton>
           </ActionArea>
diff --git a/packages/extension-ui/src/Popup/ImportQr.tsx b/packages/extension-ui/src/Popup/ImportQr.tsx
index ba229965..ae653c8d 100644
--- a/packages/extension-ui/src/Popup/ImportQr.tsx
+++ b/packages/extension-ui/src/Popup/ImportQr.tsx
@@ -29,7 +29,7 @@ export default function ImportQr (): React.ReactElement {
     <>
       <Header
         showBackArrow
-        text={t('Scan Address Qr')}
+        text={t<string>('Scan Address Qr')}
       />
       {!account && (
         <div>
@@ -54,7 +54,7 @@ export default function ImportQr (): React.ReactElement {
               <NextStepButton
                 onClick={_onCreate}
               >
-                {t('Add the account with identified address')}
+                {t<string>('Add the account with identified address')}
               </NextStepButton>
             </ButtonArea>
           )}
diff --git a/packages/extension-ui/src/Popup/ImportSeed.tsx b/packages/extension-ui/src/Popup/ImportSeed.tsx
index 377bcb81..77b1b648 100644
--- a/packages/extension-ui/src/Popup/ImportSeed.tsx
+++ b/packages/extension-ui/src/Popup/ImportSeed.tsx
@@ -73,7 +73,7 @@ export default function Import (): React.ReactElement {
     <>
       <HeaderWithSmallerMargin
         showBackArrow
-        text={t('Import account')}
+        text={t<string>('Import account')}
       />
       <div>
         <Address
@@ -85,7 +85,7 @@ export default function Import (): React.ReactElement {
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
         component={SeedInput}
         isFocused
-        label={t('existing 12 or 24-word mnemonic seed')}
+        label={t<string>('existing 12 or 24-word mnemonic seed')}
         onValidatedChange={_onChangeSeed}
         rowsCount={2}
         validator={isSeedValid}
@@ -104,7 +104,7 @@ export default function Import (): React.ReactElement {
               isBusy={isBusy}
               onClick={_onCreate}
             >
-              {t('Add the account with the supplied seed')}
+              {t<string>('Add the account with the supplied seed')}
             </NextStepButton>
           </ButtonArea>
         </>
diff --git a/packages/extension-ui/src/Popup/Metadata/Request.tsx b/packages/extension-ui/src/Popup/Metadata/Request.tsx
index ed6108ee..bdaf1673 100644
--- a/packages/extension-ui/src/Popup/Metadata/Request.tsx
+++ b/packages/extension-ui/src/Popup/Metadata/Request.tsx
@@ -47,44 +47,44 @@ function Request ({ className, metaId, request, url }: Props): React.ReactElemen
     <div className={className}>
       <Table>
         <tr>
-          <td className='label'>{t('from')}</td>
+          <td className='label'>{t<string>('from')}</td>
           <td className='data'>{url}</td>
         </tr>
         <tr>
-          <td className='label'>{t('chain')}</td>
+          <td className='label'>{t<string>('chain')}</td>
           <td className='data'>{request.chain}</td>
         </tr>
         <tr>
-          <td className='label'>{t('icon')}</td>
+          <td className='label'>{t<string>('icon')}</td>
           <td className='data'>{request.icon}</td>
         </tr>
         <tr>
-          <td className='label'>{t('decimals')}</td>
+          <td className='label'>{t<string>('decimals')}</td>
           <td className='data'>{request.tokenDecimals}</td>
         </tr>
         <tr>
-          <td className='label'>{t('symbol')}</td>
+          <td className='label'>{t<string>('symbol')}</td>
           <td className='data'>{request.tokenSymbol}</td>
         </tr>
         <tr>
-          <td className='label'>{t('upgrade')}</td>
+          <td className='label'>{t<string>('upgrade')}</td>
           <td className='data'>{chain ? chain.specVersion : t('<unknown>')} -&gt; {request.specVersion}</td>
         </tr>
       </Table>
       <div className='requestInfo'>
-        <Warning className='requestWarning'>{t('This approval will add the metadata to your extension instance, allowing future requests to be decoded using this metadata.')}</Warning>
+        <Warning className='requestWarning'>{t<string>('This approval will add the metadata to your extension instance, allowing future requests to be decoded using this metadata.')}</Warning>
         <Button
           className='btnAccept'
           onClick={_onApprove}
         >
-          {t('Yes, do this metadata update')}
+          {t<string>('Yes, do this metadata update')}
         </Button>
         <ActionBar className='btnReject'>
           <Link
             isDanger
             onClick={_onReject}
           >
-            {t('Reject')}
+            {t<string>('Reject')}
           </Link>
         </ActionBar>
       </div>
diff --git a/packages/extension-ui/src/Popup/Metadata/index.tsx b/packages/extension-ui/src/Popup/Metadata/index.tsx
index e410009b..bf97c552 100644
--- a/packages/extension-ui/src/Popup/Metadata/index.tsx
+++ b/packages/extension-ui/src/Popup/Metadata/index.tsx
@@ -15,7 +15,7 @@ export default function Metadata (): React.ReactElement {
 
   return (
     <>
-      <Header text={t('Metadata')} />
+      <Header text={t<string>('Metadata')} />
       {requests[0]
         ? (
           <Request
diff --git a/packages/extension-ui/src/Popup/RestoreJson.tsx b/packages/extension-ui/src/Popup/RestoreJson.tsx
index 783b785f..4e51d3d2 100644
--- a/packages/extension-ui/src/Popup/RestoreJson.tsx
+++ b/packages/extension-ui/src/Popup/RestoreJson.tsx
@@ -96,7 +96,7 @@ export default function Upload (): React.ReactElement {
     <>
       <HeaderWithSmallerMargin
         showBackArrow
-        text={t('Restore from JSON')}
+        text={t<string>('Restore from JSON')}
       />
       <div>
         <div>
@@ -109,13 +109,13 @@ export default function Upload (): React.ReactElement {
         <InputFileWithLabel
           accept={acceptedFormats}
           isError={!isFileValid}
-          label={t('backup file')}
+          label={t<string>('backup file')}
           onChange={_onChangeFile}
           withLabel
         />
         <InputWithLabel
           isError={!isPassValid}
-          label={t('Password for this file')}
+          label={t<string>('Password for this file')}
           onChange={_onChangePass}
           type='password'
         />
@@ -124,7 +124,7 @@ export default function Upload (): React.ReactElement {
           isDisabled={!isFileValid || !isPassValid}
           onClick={_onRestore}
         >
-          {t('Restore')}
+          {t<string>('Restore')}
         </Button>
       </div>
     </>
diff --git a/packages/extension-ui/src/Popup/Signing/Bytes.tsx b/packages/extension-ui/src/Popup/Signing/Bytes.tsx
index cbe8e314..d8a33a6e 100644
--- a/packages/extension-ui/src/Popup/Signing/Bytes.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Bytes.tsx
@@ -20,11 +20,11 @@ function Bytes ({ bytes, className, url }: Props): React.ReactElement<Props> {
     <table className={className}>
       <tbody>
         <tr>
-          <td className='label'>{t('from')}</td>
+          <td className='label'>{t<string>('from')}</td>
           <td className='data'>{url}</td>
         </tr>
         <tr>
-          <td className='label'>{t('bytes')}</td>
+          <td className='label'>{t<string>('bytes')}</td>
           <td className='data'>{bytes}</td>
         </tr>
       </tbody>
diff --git a/packages/extension-ui/src/Popup/Signing/Extrinsic.tsx b/packages/extension-ui/src/Popup/Signing/Extrinsic.tsx
index e4075e7c..b60835eb 100644
--- a/packages/extension-ui/src/Popup/Signing/Extrinsic.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Extrinsic.tsx
@@ -8,6 +8,7 @@ import { AnyJson, SignerPayloadJSON } from '@polkadot/types/types';
 
 import BN from 'bn.js';
 import React, { useEffect, useRef, useState } from 'react';
+import { TFunction } from 'i18next';
 import { formatNumber, bnToBn } from '@polkadot/util';
 
 import { Table } from '../../components';
@@ -44,11 +45,11 @@ function decodeMethod (data: string, isDecoded: boolean, chain: Chain | null, sp
   return { args, method };
 }
 
-function renderMethod (data: string, { args, method }: Decoded, t: (key: string) => string): React.ReactNode {
+function renderMethod (data: string, { args, method }: Decoded, t: TFunction): React.ReactNode {
   if (!args || !method) {
     return (
       <tr>
-        <td className='label'>{t('method data')}</td>
+        <td className='label'>{t<string>('method data')}</td>
         <td className='data'>{data}</td>
       </tr>
     );
@@ -57,7 +58,7 @@ function renderMethod (data: string, { args, method }: Decoded, t: (key: string)
   return (
     <>
       <tr>
-        <td className='label'>{t('method')}</td>
+        <td className='label'>{t<string>('method')}</td>
         <td className='data'>
           <details>
             <summary>{method.sectionName}.{method.methodName}{
@@ -71,7 +72,7 @@ function renderMethod (data: string, { args, method }: Decoded, t: (key: string)
       </tr>
       {method.meta && (
         <tr>
-          <td className='label'>{t('info')}</td>
+          <td className='label'>{t<string>('info')}</td>
           <td className='data'>
             <details>
               <summary>{method.meta.documentation.map((d) => d.toString().trim()).join(' ')}</summary>
@@ -83,15 +84,15 @@ function renderMethod (data: string, { args, method }: Decoded, t: (key: string)
   );
 }
 
-function mortalityAsString (era: ExtrinsicEra, hexBlockNumber: string, t: (key: string, options?: { replace: Record<string, string> }) => string): string {
+function mortalityAsString (era: ExtrinsicEra, hexBlockNumber: string, t: TFunction): string {
   if (era.isImmortalEra) {
-    return t('immortal');
+    return t<string>('immortal');
   }
 
   const blockNumber = bnToBn(hexBlockNumber);
   const mortal = era.asMortalEra;
 
-  return t('mortal, valid from {{birth}} to {{death}}', {
+  return t<string>('mortal, valid from {{birth}} to {{death}}', {
     replace: {
       birth: formatNumber(mortal.birth(blockNumber)),
       death: formatNumber(mortal.death(blockNumber))
@@ -115,24 +116,24 @@ function Extrinsic ({ className, isDecoded, payload: { era, nonce, tip }, reques
       isFull
     >
       <tr>
-        <td className='label'>{t('from')}</td>
+        <td className='label'>{t<string>('from')}</td>
         <td className='data'>{url}</td>
       </tr>
       <tr>
-        <td className='label'>{chain ? t('chain') : t('genesis')}</td>
+        <td className='label'>{chain ? t<string>('chain') : t<string>('genesis')}</td>
         <td className='data'>{chain ? chain.name : genesisHash}</td>
       </tr>
       <tr>
-        <td className='label'>{t('version')}</td>
+        <td className='label'>{t<string>('version')}</td>
         <td className='data'>{specVersion.toNumber()}</td>
       </tr>
       <tr>
-        <td className='label'>{t('nonce')}</td>
+        <td className='label'>{t<string>('nonce')}</td>
         <td className='data'>{formatNumber(nonce)}</td>
       </tr>
       {!tip.isEmpty && (
         <tr>
-          <td className='label'>{t('tip')}</td>
+          <td className='label'>{t<string>('tip')}</td>
           <td className='data'>{formatNumber(tip)}</td>
         </tr>
       )}
diff --git a/packages/extension-ui/src/Popup/Signing/Qr.tsx b/packages/extension-ui/src/Popup/Signing/Qr.tsx
index 70579bf5..0710fd89 100644
--- a/packages/extension-ui/src/Popup/Signing/Qr.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Qr.tsx
@@ -51,7 +51,7 @@ function Qr ({ className, onSignature, payload, request }: Props): React.ReactEl
           className='scanButton'
           onClick={_onShowQr}
         >
-          {t('Scan signature via camera')}
+          {t<string>('Scan signature via camera')}
         </Button>
       )}
     </div>
diff --git a/packages/extension-ui/src/Popup/Signing/Request.tsx b/packages/extension-ui/src/Popup/Signing/Request.tsx
index 497b42bc..510af66a 100644
--- a/packages/extension-ui/src/Popup/Signing/Request.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Request.tsx
@@ -125,7 +125,7 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst,
       >
         <Checkbox
           checked={!!isSavedPass}
-          label={t("Don't ask me again for the next 15 minutes")}
+          label={t<string>("Don't ask me again for the next 15 minutes")}
           onChange={setIsSavedPass}
         />
       </Unlock>
@@ -174,7 +174,7 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst,
               isDanger
               onClick={_onCancel}
             >
-              {t('Cancel')}
+              {t<string>('Cancel')}
             </Link>
           </CancelButton>
         </SignArea>
@@ -200,7 +200,7 @@ export default function Request ({ account: { isExternal }, buttonText, isFirst,
               isDanger
               onClick={_onCancel}
             >
-              {t('Reject')}
+              {t<string>('Reject')}
             </Link>
           </CancelButton>
         </SignArea>
diff --git a/packages/extension-ui/src/Popup/Signing/Unlock.tsx b/packages/extension-ui/src/Popup/Signing/Unlock.tsx
index 63424af5..27dc8a96 100644
--- a/packages/extension-ui/src/Popup/Signing/Unlock.tsx
+++ b/packages/extension-ui/src/Popup/Signing/Unlock.tsx
@@ -44,7 +44,7 @@ function Unlock ({ buttonText, children, className, error, isBusy, onSign }: Pro
         disabled={isBusy}
         isError={!password || !!ownError}
         isFocused
-        label={t('Password for this account')}
+        label={t<string>('Password for this account')}
         onChange={_onChangePassword}
         onEnter={_onClick}
         type='password'
diff --git a/packages/extension-ui/src/Popup/Signing/index.tsx b/packages/extension-ui/src/Popup/Signing/index.tsx
index 42cbf876..40d29803 100644
--- a/packages/extension-ui/src/Popup/Signing/index.tsx
+++ b/packages/extension-ui/src/Popup/Signing/index.tsx
@@ -48,7 +48,7 @@ export default function Signing (): React.ReactElement {
   return request
     ? (
       <>
-        <Header text={isTransaction ? t('Transaction') : t('Sign message')}>
+        <Header text={isTransaction ? t<string>('Transaction') : t<string>('Sign message')}>
           {requests.length > 1 && (
             <TransactionIndex
               index={requestIndex}
diff --git a/packages/extension-ui/src/Popup/Welcome.tsx b/packages/extension-ui/src/Popup/Welcome.tsx
index e550d99c..e29cef5e 100644
--- a/packages/extension-ui/src/Popup/Welcome.tsx
+++ b/packages/extension-ui/src/Popup/Welcome.tsx
@@ -22,19 +22,19 @@ export default function Welcome (): React.ReactElement<Props> {
 
   return (
     <>
-      <Header text={t('Welcome')} />
-      <Note>{t('Before we start, just a couple of notes regarding use:')}</Note>
+      <Header text={t<string>('Welcome')} />
+      <Note>{t<string>('Before we start, just a couple of notes regarding use:')}</Note>
       <TextBox>
         <List>
-          <li>{t('We do not send any clicks, pageviews or events to a central server')}</li>
-          <li>{t('We do not use any trackers or analytics')}</li>
-          <li>{t("We don't collect keys, addresses or any information - your information never leaves this machine")}</li>
+          <li>{t<string>('We do not send any clicks, pageviews or events to a central server')}</li>
+          <li>{t<string>('We do not use any trackers or analytics')}</li>
+          <li>{t<string>("We don't collect keys, addresses or any information - your information never leaves this machine")}</li>
         </List>
       </TextBox>
-      <Note>{t('... we are not in the information collection business (even anonymized).')}</Note>
+      <Note>{t<string>('... we are not in the information collection business (even anonymized).')}</Note>
       <VerticalSpace />
       <ButtonArea>
-        <Button onClick={_onClick}>{t('Understood, let me continue')}</Button>
+        <Button onClick={_onClick}>{t<string>('Understood, let me continue')}</Button>
       </ButtonArea>
     </>
   );
diff --git a/packages/extension-ui/src/components/Loading.tsx b/packages/extension-ui/src/components/Loading.tsx
index fd50cea5..2ad09c39 100644
--- a/packages/extension-ui/src/components/Loading.tsx
+++ b/packages/extension-ui/src/components/Loading.tsx
@@ -15,7 +15,7 @@ export default function Loading ({ children }: Props): React.ReactElement<Props>
 
   if (!children) {
     return (
-      <div>{t('... loading ...')}</div>
+      <div>{t<string>('... loading ...')}</div>
     );
   }
 
diff --git a/packages/extension-ui/src/components/MnemonicSeed.tsx b/packages/extension-ui/src/components/MnemonicSeed.tsx
index 51308f67..a8b1a6d6 100644
--- a/packages/extension-ui/src/components/MnemonicSeed.tsx
+++ b/packages/extension-ui/src/components/MnemonicSeed.tsx
@@ -26,7 +26,7 @@ function MnemonicSeed ({ className, onCopy, seed }: Props): React.ReactElement<P
       <TextAreaWithLabel
         className='mnemonicDisplay'
         isReadOnly
-        label={t('Generated 12-word mnemonic seed:')}
+        label={t<string>('Generated 12-word mnemonic seed:')}
         value={seed}
       />
       <div className='buttonsRow'>
@@ -35,7 +35,7 @@ function MnemonicSeed ({ className, onCopy, seed }: Props): React.ReactElement<P
           data-seed-action='copy'
           icon={copy}
           onClick={onCopy}
-          text={t('Copy to clipboard')}
+          text={t<string>('Copy to clipboard')}
         />
       </div>
     </div>
diff --git a/packages/extension-ui/src/createView.tsx b/packages/extension-ui/src/createView.tsx
index dcae17b8..e69671a5 100644
--- a/packages/extension-ui/src/createView.tsx
+++ b/packages/extension-ui/src/createView.tsx
@@ -8,6 +8,8 @@ import { HashRouter } from 'react-router-dom';
 
 import { Fonts, View } from './components';
 
+import './i18n';
+
 export default function createView (Entry: React.ComponentType, rootId = 'root'): void {
   const rootElement = document.getElementById(rootId);
 
diff --git a/packages/extension-ui/src/hooks/useTranslation.ts b/packages/extension-ui/src/hooks/useTranslation.ts
index bac7035c..cc1c0501 100644
--- a/packages/extension-ui/src/hooks/useTranslation.ts
+++ b/packages/extension-ui/src/hooks/useTranslation.ts
@@ -2,19 +2,6 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-interface TranslationOptions {
-  replace: Record<string, string | number>
-}
+import { useTranslation } from 'react-i18next';
 
-interface Translation {
-  t: (key: string, options?: TranslationOptions) => string;
-}
-
-const defaultTranslation: Translation = {
-  t: (key: string, { replace }: TranslationOptions = { replace: {} }) =>
-    Object.entries(replace).reduce((result: string, [rk, rv]) => result.replace(`{{${rk}}}`, `${rv}`), key)
-};
-
-export default function useTranslation (): Translation {
-  return defaultTranslation;
-}
+export default useTranslation;
diff --git a/packages/extension-ui/src/i18n.ts b/packages/extension-ui/src/i18n.ts
new file mode 100644
index 00000000..41b36769
--- /dev/null
+++ b/packages/extension-ui/src/i18n.ts
@@ -0,0 +1,30 @@
+// Copyright 2019-2020 @polkadot/extension-ui authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    backend: {},
+    debug: false,
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false
+    },
+    keySeparator: false,
+    load: 'languageOnly',
+    nsSeparator: false,
+    react: {
+      wait: true
+    },
+    returnEmptyString: false,
+    returnNull: false
+  })
+  .catch(console.error);
+
+export default i18n;
diff --git a/packages/extension-ui/src/partials/Back.tsx b/packages/extension-ui/src/partials/Back.tsx
index c16f8de3..d2319b94 100644
--- a/packages/extension-ui/src/partials/Back.tsx
+++ b/packages/extension-ui/src/partials/Back.tsx
@@ -23,7 +23,7 @@ function Back ({ className, to = '/' }: Props): React.ReactElement<Props> {
     <div className={className}>
       <BackLink to={to}>
         <ArrowLeft />
-        {t('Back')}
+        {t<string>('Back')}
       </BackLink>
     </div>
   );
diff --git a/packages/extension-ui/src/partials/MenuAdd.tsx b/packages/extension-ui/src/partials/MenuAdd.tsx
index 5bcd3adf..697cdefa 100644
--- a/packages/extension-ui/src/partials/MenuAdd.tsx
+++ b/packages/extension-ui/src/partials/MenuAdd.tsx
@@ -50,7 +50,7 @@ function MenuAdd ({ className, reference }: Props): React.ReactElement<Props> {
       <MenuItem className='menuItem'>
         <Link to='/account/import-seed'>
           <Svg src={seedIcon} />
-          <span>{t('Import account from pre-existing seed')}</span>
+          <span>{t<string>('Import account from pre-existing seed')}</span>
         </Link>
       </MenuItem>
       <MenuItem className='menuItem'>
@@ -59,7 +59,7 @@ function MenuAdd ({ className, reference }: Props): React.ReactElement<Props> {
           to={isPopup ? undefined : '/account/restore-json'}
         >
           <Svg src={fileIcon} />
-          <span>{t('Restore account from backup JSON file')}</span>
+          <span>{t<string>('Restore account from backup JSON file')}</span>
         </Link>
       </MenuItem>
       <MenuDivider />
@@ -69,7 +69,7 @@ function MenuAdd ({ className, reference }: Props): React.ReactElement<Props> {
           to='/account/import-qr'
         >
           <Svg src={qrIcon} />
-          <span>{t('Attach external QR-signer account')}</span>
+          <span>{t<string>('Attach external QR-signer account')}</span>
         </Link>
       </MenuItem>
     </Menu>
diff --git a/packages/extension-ui/src/partials/MenuSettings.tsx b/packages/extension-ui/src/partials/MenuSettings.tsx
index 7fc77e4f..8afaa55b 100644
--- a/packages/extension-ui/src/partials/MenuSettings.tsx
+++ b/packages/extension-ui/src/partials/MenuSettings.tsx
@@ -71,19 +71,19 @@ function MenuSettings ({ className, reference }: Props): React.ReactElement<Prop
       <MenuDivider />
       <MenuItem
         className='setting'
-        title={t('External QR accounts and Access')}
+        title={t<string>('External QR accounts and Access')}
       >
         <Checkbox
           checked={camera}
           className='checkbox'
-          label={t('Allow Camera Access')}
+          label={t<string>('Allow Camera Access')}
           onChange={setCamera}
         />
       </MenuItem>
       <MenuDivider />
       <MenuItem
         className='setting'
-        title={t('Display address format For')}
+        title={t<string>('Display address format For')}
       >
         <Dropdown
           className='dropdown'
@@ -101,7 +101,7 @@ function MenuSettings ({ className, reference }: Props): React.ReactElement<Prop
               className='openWindow'
               icon={FullScreenIcon}
               onClick={windowOpen}
-              text={t('Open extension in new window')}
+              text={t<string>('Open extension in new window')}
             />
           </MenuItem>
         </>
diff --git a/packages/extension-ui/src/partials/Name.tsx b/packages/extension-ui/src/partials/Name.tsx
index 5e5248ae..80fa2af4 100644
--- a/packages/extension-ui/src/partials/Name.tsx
+++ b/packages/extension-ui/src/partials/Name.tsx
@@ -34,7 +34,7 @@ export default function Name ({ address, className, isFocused, label, onBlur, on
       data-input-name
       defaultValue={startValue}
       isFocused={isFocused}
-      label={label || t('A descriptive name for your account')}
+      label={label || t<string>('A descriptive name for your account')}
       onBlur={onBlur}
       onValidatedChange={onChange}
       type='text'
diff --git a/packages/extension-ui/src/partials/Password.tsx b/packages/extension-ui/src/partials/Password.tsx
index 7044d6c6..50aa6bc1 100644
--- a/packages/extension-ui/src/partials/Password.tsx
+++ b/packages/extension-ui/src/partials/Password.tsx
@@ -37,7 +37,7 @@ export default function Password ({ isFocussed, onChange }: Props): React.ReactE
         component={InputWithLabel}
         data-input-password
         isFocused={isFocussed}
-        label={t('A new password for this account')}
+        label={t<string>('A new password for this account')}
         onValidatedChange={setPass1}
         type='password'
         validator={isFirstPasswordValid}
@@ -46,7 +46,7 @@ export default function Password ({ isFocussed, onChange }: Props): React.ReactE
         <ValidatedInput
           component={InputWithLabel}
           data-input-repeat-password
-          label={t('Repeat password for verification')}
+          label={t<string>('Repeat password for verification')}
           onValidatedChange={setPass2}
           type='password'
           validator={isSecondPasswordValid(pass1)}
diff --git a/yarn.lock b/yarn.lock
index a4b0be09..62137b8f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1400,7 +1400,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.3, @babel/runtime@npm:^7.11.0, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4":
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.3, @babel/runtime@npm:^7.11.0, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.4":
   version: 7.11.2
   resolution: "@babel/runtime@npm:7.11.2"
   dependencies:
@@ -3093,9 +3093,12 @@ __metadata:
     "@types/styled-components": ^5.1.3
     enzyme: ^3.11.0
     enzyme-adapter-react-16: ^1.15.4
+    i18next: ^19.7.0
+    i18next-browser-languagedetector: ^5.0.1
     react: ^16.13.1
     react-dom: ^16.13.1
     react-dropzone: ^11.0.3
+    react-i18next: ^11.7.2
     react-is: ^16.13.1
     react-router: ^5.2.0
     react-router-dom: ^5.2.0
@@ -11920,6 +11923,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"html-parse-stringify2@npm:2.0.1":
+  version: 2.0.1
+  resolution: "html-parse-stringify2@npm:2.0.1"
+  dependencies:
+    void-elements: ^2.0.1
+  checksum: 71159c76d54e7e8c1dad808b7ed3f3410e7846b496e3910f0c14f78ade875477b3f6b320ee1259ba5a7689a7ba61bee0b23f9f50ae1d33189de73bf436fb2a52
+  languageName: node
+  linkType: hard
+
 "html-tags@npm:^2.0.0":
   version: 2.0.0
   resolution: "html-tags@npm:2.0.0"
@@ -12116,6 +12128,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"i18next-browser-languagedetector@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "i18next-browser-languagedetector@npm:5.0.1"
+  dependencies:
+    "@babel/runtime": ^7.5.5
+  checksum: 4e80cc054cb1d1600c421d53153b7752aaca07a3ca9f394d64962aa34f901c3e61d2a409d76436c1d76ea8bb1e6ab99a4888dcfbfc3a8de0a489abcd2bb6563d
+  languageName: node
+  linkType: hard
+
 "i18next-scanner@npm:^2.11.0":
   version: 2.11.0
   resolution: "i18next-scanner@npm:2.11.0"
@@ -12146,7 +12167,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"i18next@npm:*":
+"i18next@npm:*, i18next@npm:^19.7.0":
   version: 19.7.0
   resolution: "i18next@npm:19.7.0"
   dependencies:
@@ -18253,6 +18274,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-i18next@npm:^11.7.2":
+  version: 11.7.2
+  resolution: "react-i18next@npm:11.7.2"
+  dependencies:
+    "@babel/runtime": ^7.3.1
+    html-parse-stringify2: 2.0.1
+  peerDependencies:
+    i18next: ">= 19.0.0"
+    react: ">= 16.8.0"
+  checksum: ea5c989d1b129d74b2d4b4d90cd33709f883cf89df90bcfbb78e3c97ac0c052cbf3369554e9e5beb405f1dbab5d7f7b77aa29fc0e13716d78d456f4f8408771c
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.12.0, react-is@npm:^16.13.1, react-is@npm:^16.6.0, react-is@npm:^16.7.0, react-is@npm:^16.8.1, react-is@npm:^16.8.6":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -22395,6 +22429,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"void-elements@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "void-elements@npm:2.0.1"
+  checksum: 768d7e08534922455d0e87c66426123920f4d26d88e9c3dc430469e4ce1c11920ca8e2aea7794e52916524d55c3c7820efc20d3f5ce6b749036d989adef1cdd9
+  languageName: node
+  linkType: hard
+
 "vue-hot-reload-api@npm:^2.3.0":
   version: 2.3.4
   resolution: "vue-hot-reload-api@npm:2.3.4"