Some useTranslation updates

package.json

@@ -10,12 +10,12 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^0.100.0-beta.18",
-    "@polkadot/api-contract": "^0.100.0-beta.18",
-    "@polkadot/keyring": "^1.7.1",
-    "@polkadot/types": "^0.100.0-beta.18",
-    "@polkadot/util": "^1.7.1",
-    "@polkadot/util-crypto": "^1.7.1",
+    "@polkadot/api": "^0.100.0-beta.21",
+    "@polkadot/api-contract": "^0.100.0-beta.21",
+    "@polkadot/keyring": "^1.8.1",
+    "@polkadot/types": "^0.100.0-beta.21",
+    "@polkadot/util": "^1.8.1",
+    "@polkadot/util-crypto": "^1.8.1",
     "babel-core": "^7.0.0-bridge.0",
     "typescript": "^3.7.4"
   },

packages/app-123code/src/SummaryBar.tsx

@@ -1,23 +1,18 @@
-/* eslint-disable @typescript-eslint/camelcase */
 // Copyright 2017-2020 @polkadot/app-123code 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 { DeriveStakingValidators } from '@polkadot/api-derive/types';
-import { BareProps, I18nProps } from '@polkadot/react-components/types';
+import { BareProps as Props } from '@polkadot/react-components/types';
 import { Balance, BlockNumber } from '@polkadot/types/interfaces';
 
 import React from 'react';
 import { Bubble, IdentityIcon } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { formatBalance, formatNumber } from '@polkadot/util';
 
-import translate from './translate';
-
-interface Props extends BareProps, I18nProps {}
-
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function SummaryBar (props: Props): React.ReactElement<Props> {
+export default function SummaryBar (props: Props): React.ReactElement<Props> {
   const { api, systemChain, systemName, systemVersion } = useApi();
   const bestNumber = useCall<BlockNumber>(api.derive.chain.bestNumber, []);
   const bestNumberLag = useCall<BlockNumber>(api.derive.chain.bestNumberLag, []);
@@ -53,6 +48,3 @@ function SummaryBar (props: Props): React.ReactElement<Props> {
     </summary>
   );
 }
-
-// inject the actual API calls automatically into props
-export default translate(SummaryBar);

packages/app-123code/src/index.tsx

@@ -2,11 +2,8 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-// some types, AppProps for the app and I18nProps to indicate
-// translatable strings. Generally the latter is quite "light",
-// `t` is inject into props (see the HOC export) and `t('any text')
-// does the translation
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
+// global app props
+import { AppProps as Props } from '@polkadot/react-components/types';
 
 // external imports (including those found in the packages/*
 // of this repo)
@@ -16,12 +13,8 @@ import React, { useState } from 'react';
 import AccountSelector from './AccountSelector';
 import SummaryBar from './SummaryBar';
 import Transfer from './Transfer';
-import translate from './translate';
 
-// define our internal types
-interface Props extends AppProps, I18nProps {}
-
-function TemplateApp ({ className }: Props): React.ReactElement<Props> {
+export default function TemplateApp ({ className }: Props): React.ReactElement<Props> {
   const [accountId, setAccountId] = useState<string | null>(null);
 
   return (
@@ -34,5 +27,3 @@ function TemplateApp ({ className }: Props): React.ReactElement<Props> {
     </main>
   );
 }
-
-export default translate(TemplateApp);

packages/app-123code/src/translate.ts

@@ -2,6 +2,10 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { withTranslation } from 'react-i18next';
+import { useTranslation as useTranslationBase, UseTranslationResponse, withTranslation } from 'react-i18next';
+
+export function useTranslation (): UseTranslationResponse {
+  return useTranslationBase('app-123code');
+}
 
 export default withTranslation(['app-123code']);

packages/app-accounts/src/Account.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React, { useState, useEffect } from 'react';
 import { Label } from 'semantic-ui-react';
@@ -17,17 +16,18 @@ import ChangePass from './modals/ChangePass';
 import Derive from './modals/Derive';
 import Identity from './modals/Identity';
 import Transfer from './modals/Transfer';
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends I18nProps {
+interface Props {
   address: string;
   allowTags: string[];
   className?: string;
   isFavorite: boolean;
   toggleFavorite: (address: string) => void;
 }
 
-function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite }: Props): React.ReactElement<Props> | null {
+function Account ({ address, allowTags, className, isFavorite, toggleFavorite }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const api = useApi();
   const [tags, setTags] = useState<string[]>([]);
   const [accName, setAccName] = useState('');
@@ -331,24 +331,22 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
   );
 }
 
-export default translate(
-  styled(Account)`
-    .accounts--Account-buttons {
-      text-align: right;
-    }
+export default styled(Account)`
+  .accounts--Account-buttons {
+    text-align: right;
+  }
 
-    .tags--toggle {
-      cursor: pointer;
-      width: 100%;
-      min-height: 1.5rem;
+  .tags--toggle {
+    cursor: pointer;
+    width: 100%;
+    min-height: 1.5rem;
 
-      label {
-        cursor: pointer;
-      }
+    label {
+      cursor: pointer;
     }
+  }
 
-    .name--input {
-      width: 16rem;
-    }
-  `
-);
+  .name--input {
+    width: 16rem;
+  }
+`;

packages/app-accounts/src/Banner.tsx

@@ -2,15 +2,13 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
-
 import { detect } from 'detect-browser';
 import React from 'react';
 import styled from 'styled-components';
 import { isWeb3Injected } from '@polkadot/extension-dapp';
 import { stringUpperFirst } from '@polkadot/util';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 
 // it would have been really good to import this from detect, however... not exported
 type Browser = 'chrome' | 'firefox';
@@ -21,7 +19,7 @@ interface Extension {
   name: string;
 }
 
-interface Props extends I18nProps {
+interface Props {
   className?: string;
 }
 
@@ -49,7 +47,9 @@ const browserInfo = detect();
 const browserName: Browser | null = (browserInfo && (browserInfo.name as Browser)) || null;
 const isSupported = browserName && Object.keys(available).includes(browserName);
 
-function Banner ({ className, t }: Props): React.ReactElement<Props> | null {
+function Banner ({ className }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+
   if (isWeb3Injected || !isSupported || !browserName) {
     return null;
   }
@@ -86,20 +86,18 @@ function Banner ({ className, t }: Props): React.ReactElement<Props> | null {
   );
 }
 
-export default translate(
-  styled(Banner)`
-    padding: 0 0.5rem 0.5rem;
+export default styled(Banner)`
+  padding: 0 0.5rem 0.5rem;
 
-    .box {
-      background: #fff6e5;
-      border-left: 0.25rem solid darkorange;
-      border-radius: 0 0.25rem 0.25rem 0;
-      box-sizing: border-box;
-      padding: 1rem 1.5rem;
+  .box {
+    background: #fff6e5;
+    border-left: 0.25rem solid darkorange;
+    border-radius: 0 0.25rem 0.25rem 0;
+    box-sizing: border-box;
+    padding: 1rem 1.5rem;
 
-      .info {
-        max-width: 50rem;
-      }
+    .info {
+      max-width: 50rem;
     }
-  `
-);
+  }
+`;

packages/app-accounts/src/Overview.tsx

@@ -2,8 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
-import { ComponentProps } from './types';
+import { ComponentProps as Props } from './types';
 
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
@@ -17,10 +16,7 @@ import ImportModal from './modals/Import';
 import QrModal from './modals/Qr';
 import Account from './Account';
 import Banner from './Banner';
-import translate from './translate';
-
-interface Props extends ComponentProps, I18nProps {
-}
+import { useTranslation } from './translate';
 
 type SortedAccount = { address: string; isFavorite: boolean };
 
@@ -39,7 +35,8 @@ async function queryLedger (): Promise<void> {
   }
 }
 
-function Overview ({ className, onStatusChange, t }: Props): React.ReactElement<Props> {
+function Overview ({ className, onStatusChange }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { allAccounts, hasAccounts } = useAccounts();
   const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [isImportOpen, setIsImportOpen] = useState(false);
@@ -153,16 +150,14 @@ function Overview ({ className, onStatusChange, t }: Props): React.ReactElement<
   );
 }
 
-export default translate(
-  styled(Overview)`
-    .filter--tags {
-      .ui--Dropdown {
-        padding-left: 0;
+export default styled(Overview)`
+  .filter--tags {
+    .ui--Dropdown {
+      padding-left: 0;
 
-        label {
-          left: 1.55rem;
-        }
+      label {
+        left: 1.55rem;
       }
     }
-  `
-);
+  }
+`;

packages/app-accounts/src/index.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { AppProps, I18nProps } from '@polkadot/react-components/types';
+import { AppProps as Props } from '@polkadot/react-components/types';
 import { ComponentProps } from './types';
 
 import React, { useEffect, useState } from 'react';
@@ -12,13 +12,11 @@ import { HelpOverlay, Tabs } from '@polkadot/react-components';
 
 import basicMd from './md/basic.md';
 import Overview from './Overview';
-import translate from './translate';
+import { useTranslation } from './translate';
 import Vanity from './Vanity';
 
-interface Props extends AppProps, I18nProps {
-}
-
-function AccountsApp ({ basePath, onStatusChange, t }: Props): React.ReactElement<Props> {
+export default function AccountsApp ({ basePath, onStatusChange }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { hasAccounts } = useAccounts();
   const [hidden, setHidden] = useState<string[]>(['vanity']);
 
@@ -64,5 +62,3 @@ function AccountsApp ({ basePath, onStatusChange, t }: Props): React.ReactElemen
     </main>
   );
 }
-
-export default translate(AccountsApp);

packages/app-accounts/src/modals/Create.tsx

@@ -2,7 +2,6 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
 import { ActionStatus } from '@polkadot/react-components/Status/types';
 import { CreateResult } from '@polkadot/ui-keyring/types';
 import { KeypairType } from '@polkadot/util-crypto/types';
@@ -19,10 +18,11 @@ import uiSettings from '@polkadot/ui-settings';
 import { isHex, u8aToHex } from '@polkadot/util';
 import { keyExtractSuri, mnemonicGenerate, mnemonicValidate, randomAsU8a } from '@polkadot/util-crypto';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import CreateConfirmation from './CreateConfirmation';
 
-interface Props extends ModalProps, I18nProps {
+interface Props extends ModalProps {
+  className?: string;
   seed?: string;
   type?: KeypairType;
 }
@@ -150,7 +150,8 @@ function createAccount (suri: string, pairType: KeypairType, name: string, passw
   return status;
 }
 
-function Create ({ className, onClose, onStatusChange, seed: propsSeed, t, type: propsType }: Props): React.ReactElement<Props> {
+function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: propsType }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { isDevelopment } = useApi();
   const [{ address, deriveError, derivePath, isSeedValid, pairType, seed, seedType }, setAddress] = useState<AddressState>(generateSeed(propsSeed, '', propsSeed ? 'raw' : 'bip', propsType));
   const [isConfirmationOpen, setIsConfirmationOpen] = useState(false);
@@ -309,10 +310,8 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, t, type:
   );
 }
 
-export default translate(
-  styled(Create)`
-    .accounts--Creator-advanced {
-      margin-top: 1rem;
-    }
-  `
-);
+export default styled(Create)`
+  .accounts--Creator-advanced {
+    margin-top: 1rem;
+  }
+`;