useTranslation Suspense fallback

packages/app-parachains/src/index.tsx

@@ -2,18 +2,20 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
+import { AppProps, BareProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { Route, Switch } from 'react-router';
 import { Tabs } from '@polkadot/react-components';
 
 import Overview from './Overview';
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends AppProps, BareProps, I18nProps {}
+interface Props extends AppProps, BareProps {}
+
+export default function ParachainsApp ({ basePath }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
 
-function ParachainsApp ({ basePath, t }: Props): React.ReactElement<Props> {
   return (
     <main>
       <header>
@@ -34,5 +36,3 @@ function ParachainsApp ({ basePath, t }: Props): React.ReactElement<Props> {
     </main>
   );
 }
-
-export default translate(ParachainsApp);

packages/app-society/src/index.tsx

@@ -5,6 +5,7 @@
 import { AppProps, BareProps } from '@polkadot/react-components/types';
 
 import React from 'react';
+import { Route, Switch } from 'react-router';
 import { Tabs } from '@polkadot/react-components';
 
 import Overview from './Overview';
@@ -29,7 +30,9 @@ export default function SocietyApp ({ basePath, className }: Props): React.React
           ]}
         />
       </header>
-      <Overview />
+      <Switch>
+        <Route component={Overview} />
+      </Switch>
     </main>
   );
 }

packages/app-staking/src/Actions/Account/InputValidationUnstakeThreshold.tsx

@@ -2,20 +2,19 @@
 // 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 BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
 import { Icon } from '@polkadot/react-components';
 
-import translate from '../../translate';
+import { useTranslation } from '../../translate';
 
-interface Props extends I18nProps {
+interface Props {
   unstakeThreshold: BN | undefined;
   onError: (error: string | null) => void;
 }
 
-function InputValidationUnstakeThreshold ({ onError, t, unstakeThreshold }: Props): React.ReactElement<Props> | null {
+export default function InputValidationUnstakeThreshold ({ onError, unstakeThreshold }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const [error, setError] = useState<string | null>(null);
 
   useEffect((): void => {
@@ -45,5 +44,3 @@ function InputValidationUnstakeThreshold ({ onError, t, unstakeThreshold }: Prop
     </article>
   );
 }
-
-export default translate(InputValidationUnstakeThreshold);

packages/app-staking/src/Actions/Account/Nominate.tsx

@@ -3,17 +3,17 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedStakingOverview } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { AddressMulti, Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 import { useFavorites } from '@polkadot/react-hooks';
 
 import { STORE_FAVS_BASE } from '../../constants';
-import translate from '../../translate';
+import { useTranslation } from '../../translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   controllerId: string;
   next: string[];
   nominees?: string[];
@@ -24,7 +24,8 @@ interface Props extends I18nProps {
 
 const MAX_NOMINEES = 16;
 
-function Nominate ({ className, controllerId, nominees, onClose, next, stakingOverview, stashId, t }: Props): React.ReactElement<Props> | null {
+function Nominate ({ className, controllerId, nominees, onClose, next, stakingOverview, stashId }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const [favorites] = useFavorites(STORE_FAVS_BASE);
   const [validators, setValidators] = useState<string[]>([]);
   const [selection, setSelection] = useState<string[]>([]);
@@ -110,53 +111,51 @@ function Nominate ({ className, controllerId, nominees, onClose, next, stakingOv
   );
 }
 
-export default translate(
-  styled(Nominate)`
-    .shortlist {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-
-      .candidate {
-        border: 1px solid #eee;
-        border-radius: 0.25rem;
-        margin: 0.25rem;
-        padding-bottom: 0.25rem;
-        padding-right: 0.5rem;
-        position: relative;
-
-        &::after {
-          content: '';
-          position: absolute;
-          top: 0;
-          right: 0;
-          border-color: transparent;
-          border-style: solid;
-          border-radius: 0.25em;
-          border-width: 0.25em;
-        }
-
-        &.isAye {
-          background: #fff;
-          border-color: #ccc;
-        }
-
-        &.member::after {
-          border-color: green;
-        }
-
-        &.runnerup::after {
-          border-color: steelblue;
-        }
-
-        .ui--AddressMini-icon {
-          z-index: 1;
-        }
-
-        .candidate-right {
-          text-align: right;
-        }
+export default styled(Nominate)`
+  .shortlist {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    .candidate {
+      border: 1px solid #eee;
+      border-radius: 0.25rem;
+      margin: 0.25rem;
+      padding-bottom: 0.25rem;
+      padding-right: 0.5rem;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        border-color: transparent;
+        border-style: solid;
+        border-radius: 0.25em;
+        border-width: 0.25em;
+      }
+
+      &.isAye {
+        background: #fff;
+        border-color: #ccc;
+      }
+
+      &.member::after {
+        border-color: green;
+      }
+
+      &.runnerup::after {
+        border-color: steelblue;
+      }
+
+      .ui--AddressMini-icon {
+        z-index: 1;
+      }
+
+      .candidate-right {
+        text-align: right;
       }
     }
-  `
-);
+  }
+`;

packages/app-staking/src/Actions/Account/SetSessionKey.tsx

@@ -2,16 +2,14 @@
 // 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 React, { useState } from 'react';
 import { Button, InputAddress, Input, Modal, TxButton } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 
 import ValidationSessionKey from './InputValidationSessionKey';
-import translate from '../../translate';
+import { useTranslation } from '../../translate';
 
-interface Props extends I18nProps {
+interface Props {
   controllerId: string;
   isOpen: boolean;
   onClose: () => void;
@@ -21,7 +19,8 @@ interface Props extends I18nProps {
 
 const EMPTY_PROOF = new Uint8Array();
 
-function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t }: Props): React.ReactElement<Props> | null {
+export default function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { isSubstrateV2 } = useApi();
   const [keysError, setKeysError] = useState<string | null>(null);
   const [keys, setKeys] = useState<string | null>(
@@ -113,5 +112,3 @@ function SetSessionKey ({ controllerId, isOpen, onClose, sessionIds, stashId, t
     </Modal>
   );
 }
-
-export default translate(SetSessionKey);

packages/app-staking/src/Actions/index.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DerivedHeartbeats, DerivedStakingOverview } from '@polkadot/api-derive/types';
-import { I18nProps } from '@polkadot/react-components/types';
 import { AccountId, StakingLedger } from '@polkadot/types/interfaces';
 
 import React, { useEffect, useState } from 'react';
@@ -13,10 +12,11 @@ import { Option } from '@polkadot/types';
 
 import Account from './Account';
 import StartStaking from './NewStake';
-import translate from '../translate';
+import { useTranslation } from '../translate';
 
-interface Props extends I18nProps {
+interface Props {
   allStashes: string[];
+  className?: string;
   isVisible: boolean;
   recentlyOnline?: DerivedHeartbeats;
   next: string[];
@@ -47,7 +47,8 @@ function getStashes (allAccounts: string[], stashTypes: Record<string, number>,
   );
 }
 
-function Actions ({ allStashes, className, isVisible, next, recentlyOnline, stakingOverview, t }: Props): React.ReactElement<Props> {
+export default function Actions ({ allStashes, className, isVisible, next, recentlyOnline, stakingOverview }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const { allAccounts } = useAccounts();
   const queryBonded = useCall<Option<AccountId>[]>(api.query.staking.bonded.multi as any, [allAccounts]);
@@ -109,5 +110,3 @@ function Actions ({ allStashes, className, isVisible, next, recentlyOnline, stak
     </div>
   );
 }
-
-export default translate(Actions);