Adjust i18n types (prepare for i18next-react update) (#9688)

packages/apps-config/src/endpoints/index.ts

@@ -13,14 +13,10 @@ export { CUSTOM_ENDPOINT_KEY } from './development.js';
 export * from './production.js';
 export * from './testing.js';
 
-function defaultT (keyOrText: string, text?: string, options?: TOptions): string {
+function defaultT (keyOrText: string, text?: string | TOptions, options?: TOptions): string {
   return (
-    (
-      options &&
-      options.replace &&
-      options.replace.host
-    ) ||
-    text ||
+    (options?.replace?.host as string) ||
+    text?.toString() ||
     keyOrText
   );
 }

packages/apps-config/src/types.ts

@@ -3,7 +3,7 @@
 
 export interface TOptions {
   ns?: string;
-  replace?: Record<string, string>
+  replace?: Record<string, unknown>
 }
 
-export type TFunction = (keyOrText: string, text?: string, options?: TOptions) => string;
+export type TFunction = (keyOrText: string, textOrOptions?: string | TOptions, options?: TOptions) => string;

packages/apps-routing/src/accounts.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component, { useCounter } from '@polkadot/app-accounts';
 
@@ -15,7 +14,7 @@ export default function create (t: TFunction): Route {
     group: 'accounts',
     icon: 'users',
     name: 'accounts',
-    text: t<string>('nav.accounts', 'Accounts', { ns: 'apps-routing' }),
+    text: t('nav.accounts', 'Accounts', { ns: 'apps-routing' }),
     useCounter
   };
 }

packages/apps-routing/src/addresses.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-addresses';
 
@@ -15,6 +14,6 @@ export default function create (t: TFunction): Route {
     group: 'accounts',
     icon: 'address-card',
     name: 'addresses',
-    text: t<string>('nav.addresses', 'Address book', { ns: 'apps-routing' })
+    text: t('nav.addresses', 'Address book', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/alliance.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component, { useCounter } from '@polkadot/app-alliance';
 
@@ -17,7 +16,7 @@ export default function create (t: TFunction): Route {
     group: 'governance',
     icon: 'people-group',
     name: 'alliance',
-    text: t<string>('nav.alliance', 'Alliance', { ns: 'apps-routing' }),
+    text: t('nav.alliance', 'Alliance', { ns: 'apps-routing' }),
     useCounter
   };
 }

packages/apps-routing/src/assets.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-assets';
 
@@ -18,6 +17,6 @@ export default function create (t: TFunction): Route {
     group: 'network',
     icon: 'shopping-basket',
     name: 'assets',
-    text: t<string>('nav.assets', 'Assets', { ns: 'apps-routing' })
+    text: t('nav.assets', 'Assets', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/bounties.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component, { useCounter } from '@polkadot/app-bounties';
 
@@ -17,7 +16,7 @@ export default function create (t: TFunction): Route {
     group: 'governance',
     icon: 'coins',
     name: 'bounties',
-    text: t<string>('nav.bounties', 'Bounties', { ns: 'apps-routing' }),
+    text: t('nav.bounties', 'Bounties', { ns: 'apps-routing' }),
     useCounter
   };
 }

packages/apps-routing/src/calendar.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-calendar';
 
@@ -15,6 +14,6 @@ export default function create (t: TFunction): Route {
     group: 'network',
     icon: 'calendar-alt',
     name: 'calendar',
-    text: t<string>('nav.calendar', 'Event calendar', { ns: 'apps-routing' })
+    text: t('nav.calendar', 'Event calendar', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/claims.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component, { useCounter } from '@polkadot/app-claims';
 
@@ -18,7 +17,7 @@ export default function create (t: TFunction): Route {
     group: 'accounts',
     icon: 'star',
     name: 'claims',
-    text: t<string>('nav.claims', 'Claim Tokens', { ns: 'apps-routing' }),
+    text: t('nav.claims', 'Claim Tokens', { ns: 'apps-routing' }),
     useCounter
   };
 }

packages/apps-routing/src/collator.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-collator';
 
@@ -17,6 +16,6 @@ export default function create (t: TFunction): Route {
     group: 'network',
     icon: 'timeline',
     name: 'collators',
-    text: t<string>('nav.collator', 'Collators', { ns: 'apps-routing' })
+    text: t('nav.collator', 'Collators', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/contracts.ts

@@ -1,9 +1,8 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
 import type { ApiPromise } from '@polkadot/api';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-contracts';
 import { assertReturn } from '@polkadot/util';
@@ -32,6 +31,6 @@ export default function create (t: TFunction): Route {
     group: 'developer',
     icon: 'compress',
     name: 'contracts',
-    text: t<string>('nav.contracts', 'Contracts', { ns: 'apps-routing' })
+    text: t('nav.contracts', 'Contracts', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/council.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component, { useCounter } from '@polkadot/app-council';
 
@@ -18,7 +17,7 @@ export default function create (t: TFunction): Route {
     group: 'governance',
     icon: 'building',
     name: 'council',
-    text: t<string>('nav.council', 'Council', { ns: 'apps-routing' }),
+    text: t('nav.council', 'Council', { ns: 'apps-routing' }),
     useCounter
   };
 }

packages/apps-routing/src/democracy.ts

@@ -1,9 +1,8 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
 import type { ApiPromise } from '@polkadot/api';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component, { useCounter } from '@polkadot/app-democracy';
 
@@ -32,7 +31,7 @@ export default function create (t: TFunction): Route {
     group: 'governance',
     icon: 'calendar-check',
     name: 'democracy',
-    text: t<string>('nav.democracy', 'Democracy', { ns: 'apps-routing' }),
+    text: t('nav.democracy', 'Democracy', { ns: 'apps-routing' }),
     useCounter
   };
 }

packages/apps-routing/src/explorer.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-explorer';
 
@@ -15,6 +14,6 @@ export default function create (t: TFunction): Route {
     group: 'network',
     icon: 'braille',
     name: 'explorer',
-    text: t<string>('nav.explorer', 'Explorer', { ns: 'apps-routing' })
+    text: t('nav.explorer', 'Explorer', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/extrinsics.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-extrinsics';
 
@@ -16,6 +15,6 @@ export default function create (t: TFunction): Route {
     group: 'developer',
     icon: 'envelope-open-text',
     name: 'extrinsics',
-    text: t<string>('nav.extrinsics', 'Extrinsics', { ns: 'apps-routing' })
+    text: t('nav.extrinsics', 'Extrinsics', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/fellowship.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component, { useCounter } from '@polkadot/app-fellowship';
 
@@ -20,7 +19,7 @@ export default function create (t: TFunction): Route {
     group: 'governance',
     icon: 'people-arrows',
     name: 'fellowship',
-    text: t<string>('nav.fellowship', 'Fellowship', { ns: 'apps-routing' }),
+    text: t('nav.fellowship', 'Fellowship', { ns: 'apps-routing' }),
     useCounter
   };
 }

packages/apps-routing/src/files.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-files';
 
@@ -16,6 +15,6 @@ export default function create (t: TFunction): Route {
     group: 'developer',
     icon: 'file',
     name: 'files',
-    text: t<string>('nav.files', 'Files (IPFS)', { ns: 'apps-routing' })
+    text: t('nav.files', 'Files (IPFS)', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/gilt.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-gilt';
 
@@ -18,6 +17,6 @@ export default function create (t: TFunction): Route {
     group: 'network',
     icon: 'leaf',
     name: 'gilt',
-    text: t<string>('nav.gilt', 'Gilt', { ns: 'apps-routing' })
+    text: t('nav.gilt', 'Gilt', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/index.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Routes } from './types.js';
+import type { Routes, TFunction } from './types.js';
 
 import accounts from './accounts.js';
 import addresses from './addresses.js';

packages/apps-routing/src/js.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-js';
 
@@ -15,6 +14,6 @@ export default function create (t: TFunction): Route {
     group: 'developer',
     icon: 'code',
     name: 'js',
-    text: t<string>('nav.js', 'JavaScript', { ns: 'apps-routing' })
+    text: t('nav.js', 'JavaScript', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/membership.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component, { useCounter } from '@polkadot/app-membership';
 
@@ -18,7 +17,7 @@ export default function create (t: TFunction): Route {
     group: 'governance',
     icon: 'people-carry',
     name: 'membership',
-    text: t<string>('nav.membership', 'Membership', { ns: 'apps-routing' }),
+    text: t('nav.membership', 'Membership', { ns: 'apps-routing' }),
     useCounter
   };
 }

packages/apps-routing/src/nfts.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-nfts';
 
@@ -17,6 +16,6 @@ export default function create (t: TFunction): Route {
     group: 'network',
     icon: 'shopping-cart',
     name: 'nfts',
-    text: t<string>('nav.nfts', 'NFTs', { ns: 'apps-routing' })
+    text: t('nav.nfts', 'NFTs', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/nis.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-nis';
 
@@ -18,6 +17,6 @@ export default function create (t: TFunction): Route {
     group: 'network',
     icon: 'leaf',
     name: 'nis',
-    text: t<string>('nav.nis', 'Non-interactive Staking', { ns: 'apps-routing' })
+    text: t('nav.nis', 'Non-interactive Staking', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/parachains.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-parachains';
 
@@ -18,6 +17,6 @@ export default function create (t: TFunction): Route {
     group: 'network',
     icon: 'link',
     name: 'parachains',
-    text: t<string>('nav.parachains', 'Parachains', { ns: 'apps-routing' })
+    text: t('nav.parachains', 'Parachains', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/poll.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-poll';
 
@@ -18,6 +17,6 @@ export default function create (t: TFunction): Route {
     group: 'governance',
     icon: 'podcast',
     name: 'poll',
-    text: t<string>('nav.poll', 'Token poll', { ns: 'apps-routing' })
+    text: t('nav.poll', 'Token poll', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/preimages.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-preimages';
 
@@ -19,6 +18,6 @@ export default function create (t: TFunction): Route {
     group: 'governance',
     icon: 'panorama',
     name: 'preimages',
-    text: t<string>('nav.preimages', 'Preimages', { ns: 'apps-routing' })
+    text: t('nav.preimages', 'Preimages', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/ranked.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component, { useCounter } from '@polkadot/app-ranked';
 
@@ -19,7 +18,7 @@ export default function create (t: TFunction): Route {
     group: 'governance',
     icon: 'people-arrows',
     name: 'ranked',
-    text: t<string>('nav.ranked', 'Ranked collective', { ns: 'apps-routing' }),
+    text: t('nav.ranked', 'Ranked collective', { ns: 'apps-routing' }),
     useCounter
   };
 }

packages/apps-routing/src/referenda.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component, { useCounter } from '@polkadot/app-referenda';
 
@@ -19,7 +18,7 @@ export default function create (t: TFunction): Route {
     group: 'governance',
     icon: 'person-booth',
     name: 'referenda',
-    text: t<string>('nav.referenda', 'Referenda', { ns: 'apps-routing' }),
+    text: t('nav.referenda', 'Referenda', { ns: 'apps-routing' }),
     useCounter
   };
 }

packages/apps-routing/src/rpc.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-rpc';
 
@@ -15,6 +14,6 @@ export default function create (t: TFunction): Route {
     group: 'developer',
     icon: 'network-wired',
     name: 'rpc',
-    text: t<string>('nav.rpc', 'RPC calls', { ns: 'apps-routing' })
+    text: t('nav.rpc', 'RPC calls', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/runtime.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-runtime';
 
@@ -15,6 +14,6 @@ export default function create (t: TFunction): Route {
     group: 'developer',
     icon: 'arrows-to-circle',
     name: 'runtime',
-    text: t<string>('nav.runtime', 'Runtime calls', { ns: 'apps-routing' })
+    text: t('nav.runtime', 'Runtime calls', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/scheduler.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-scheduler';
 
@@ -17,6 +16,6 @@ export default function create (t: TFunction): Route {
     group: 'network',
     icon: 'clock',
     name: 'scheduler',
-    text: t<string>('nav.scheduler', 'Scheduler', { ns: 'apps-routing' })
+    text: t('nav.scheduler', 'Scheduler', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/settings.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component, { useCounter } from '@polkadot/app-settings';
 
@@ -13,7 +12,7 @@ export default function create (t: TFunction): Route {
     group: 'settings',
     icon: 'cogs',
     name: 'settings',
-    text: t<string>('nav.settings', 'Settings', { ns: 'apps-routing' }),
+    text: t('nav.settings', 'Settings', { ns: 'apps-routing' }),
     useCounter
   };
 }

packages/apps-routing/src/signing.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-signing';
 
@@ -16,6 +15,6 @@ export default function create (t: TFunction): Route {
     group: 'developer',
     icon: 'signature',
     name: 'signing',
-    text: t<string>('nav.signing', 'Sign and verify', { ns: 'apps-routing' })
+    text: t('nav.signing', 'Sign and verify', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/society.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component, { useCounter } from '@polkadot/app-society';
 
@@ -18,7 +17,7 @@ export default function create (t: TFunction): Route {
     group: 'network',
     icon: 'hand-spock',
     name: 'society',
-    text: t<string>('nav.society', 'Society', { ns: 'apps-routing' }),
+    text: t('nav.society', 'Society', { ns: 'apps-routing' }),
     useCounter
   };
 }

packages/apps-routing/src/staking.ts

@@ -1,10 +1,9 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
 import type { ApiPromise } from '@polkadot/api';
 import type { PalletStakingExposure } from '@polkadot/types/lookup';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-staking';
 import { ZERO_ACCOUNT } from '@polkadot/react-hooks/useWeight';
@@ -61,6 +60,6 @@ export default function create (t: TFunction): Route {
     group: 'network',
     icon: 'certificate',
     name: 'staking',
-    text: t<string>('nav.staking', 'Staking', { ns: 'apps-routing' })
+    text: t('nav.staking', 'Staking', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/staking2.ts

@@ -1,10 +1,9 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
 import type { ApiPromise } from '@polkadot/api';
 import type { PalletStakingExposure } from '@polkadot/types/lookup';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-staking2';
 import { ZERO_ACCOUNT } from '@polkadot/react-hooks/useWeight';
@@ -63,6 +62,6 @@ export default function create (t: TFunction): Route {
     group: 'network',
     icon: 'certificate',
     name: 'test-staking',
-    text: t<string>('nav.staking', 'Staking', { ns: 'apps-routing' })
+    text: t('nav.staking', 'Staking', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/storage.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-storage';
 
@@ -15,6 +14,6 @@ export default function create (t: TFunction): Route {
     group: 'developer',
     icon: 'database',
     name: 'chainstate',
-    text: t<string>('nav.storage', 'Chain state', { ns: 'apps-routing' })
+    text: t('nav.storage', 'Chain state', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/sudo.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-sudo';
 
@@ -19,6 +18,6 @@ export default function create (t: TFunction): Route {
     group: 'developer',
     icon: 'unlock',
     name: 'sudo',
-    text: t<string>('nav.sudo', 'Sudo', { ns: 'apps-routing' })
+    text: t('nav.sudo', 'Sudo', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/techcomm.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component, { useCounter } from '@polkadot/app-tech-comm';
 
@@ -19,7 +18,7 @@ export default function create (t: TFunction): Route {
     group: 'governance',
     icon: 'microchip',
     name: 'techcomm',
-    text: t<string>('nav.tech-comm', 'Tech. comm.', { ns: 'apps-routing' }),
+    text: t('nav.tech-comm', 'Tech. comm.', { ns: 'apps-routing' }),
     useCounter
   };
 }

packages/apps-routing/src/teleport.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Modal from '@polkadot/app-parachains/Teleport';
 
@@ -28,6 +27,6 @@ export default function create (t: TFunction): Route {
     group: 'accounts',
     icon: 'share-square',
     name: 'teleport',
-    text: t<string>('nav.teleport', 'Teleport', { ns: 'apps-routing' })
+    text: t('nav.teleport', 'Teleport', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/transfer.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import { TransferModal as Modal } from '@polkadot/react-components';
 
@@ -20,6 +19,6 @@ export default function create (t: TFunction): Route {
     group: 'accounts',
     icon: 'paper-plane',
     name: 'transfer',
-    text: t<string>('nav.transfer', 'Transfer', { ns: 'apps-routing' })
+    text: t('nav.transfer', 'Transfer', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/treasury.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component, { useCounter } from '@polkadot/app-treasury';
 
@@ -17,7 +16,7 @@ export default function create (t: TFunction): Route {
     group: 'governance',
     icon: 'gem',
     name: 'treasury',
-    text: t<string>('nav.treasury', 'Treasury', { ns: 'apps-routing' }),
+    text: t('nav.treasury', 'Treasury', { ns: 'apps-routing' }),
     useCounter
   };
 }

packages/apps-routing/src/types.ts

@@ -36,3 +36,5 @@ export interface Route {
 }
 
 export type Routes = Route[];
+
+export type TFunction = (key: string, textOrOptions?: string | { replace: Record<string, unknown> }, options?: { ns: string }) => string;

packages/apps-routing/src/utilities.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-utilities';
 
@@ -15,6 +14,6 @@ export default function create (t: TFunction): Route {
     group: 'developer',
     icon: 'wrench',
     name: 'utilities',
-    text: t<string>('nav.utilities', 'Utilities', { ns: 'apps-routing' })
+    text: t('nav.utilities', 'Utilities', { ns: 'apps-routing' })
   };
 }

packages/apps-routing/src/whitelist.ts

@@ -1,8 +1,7 @@
 // Copyright 2017-2023 @polkadot/apps-routing authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
-import type { Route } from './types.js';
+import type { Route, TFunction } from './types.js';
 
 import Component from '@polkadot/app-whitelist';
 
@@ -18,6 +17,6 @@ export default function create (t: TFunction): Route {
     group: 'governance',
     icon: 'list-check',
     name: 'whitelist',
-    text: t<string>('nav.whitelist', 'Whitelist', { ns: 'apps-routing' })
+    text: t('nav.whitelist', 'Whitelist', { ns: 'apps-routing' })
   };
 }

packages/apps/public/locales/en/app-democracy.json

@@ -21,6 +21,8 @@
   "Submit an Aye vote alongside the proposal as part of a batch": "Submit an Aye vote alongside the proposal as part of a batch",
   "Submit preimage": "Submit preimage",
   "Submit proposal": "Submit proposal",
+  "The amount this total can be reduced by to change the referendum outcome. This assumes changes to the convictions of the existing votes, with no additional turnout.": "The amount this total can be reduced by to change the referendum outcome. This assumes changes to the convictions of the existing votes, with no additional turnout.",
+  "The amount this total should be increased by to change the referendum outcome. This assumes additional turnout with new votes at 1x conviction.": "The amount this total should be increased by to change the referendum outcome. This assumes additional turnout with new votes at 1x conviction.",
   "The associated deposit for this proposal should be more then the minimum on-chain deposit required. It will be locked until the proposal passes.": "The associated deposit for this proposal should be more then the minimum on-chain deposit required. It will be locked until the proposal passes.",
   "The balance associated with the vote will be locked as per the conviction specified and will not be available for transfer during this period.": "The balance associated with the vote will be locked as per the conviction specified and will not be available for transfer during this period.",
   "The calculated storage costs based on the size and the per-bytes fee.": "The calculated storage costs based on the size and the per-bytes fee.",

packages/apps/public/locales/en/app-referenda.json

@@ -55,7 +55,6 @@
   "The value of the balance that is to be split to the abstain, aye and nay parts of the vote": "The value of the balance that is to be split to the abstain, aye and nay parts of the vote",
   "The value of the balance that is to be split to the aye and nay parts of the vote": "The value of the balance that is to be split to the aye and nay parts of the vote",
   "The vote will be recorded for this account. If another account delegated to this one, the delegated votes will also be counted.": "The vote will be recorded for this account. If another account delegated to this one, the delegated votes will also be counted.",
-  "This account has no voting/delating activity in the chain state": "This account has no voting/delating activity in the chain state",
   "This account has no voting/delegating activity in the chain state": "This account has no voting/delegating activity in the chain state",
   "This account has some delegations in itself": "This account has some delegations in itself",
   "Validators": "Validators",

packages/apps/public/locales/en/apps-routing.json

@@ -1 +1,44 @@
-{}
+{
+  "nav.accounts": "Accounts",
+  "nav.addresses": "Address book",
+  "nav.alliance": "Alliance",
+  "nav.assets": "Assets",
+  "nav.bounties": "Bounties",
+  "nav.calendar": "Event calendar",
+  "nav.claims": "Claim Tokens",
+  "nav.collator": "Collators",
+  "nav.contracts": "Contracts",
+  "nav.council": "Council",
+  "nav.democracy": "Democracy",
+  "nav.explorer": "Explorer",
+  "nav.extrinsics": "Extrinsics",
+  "nav.fellowship": "Fellowship",
+  "nav.files": "Files (IPFS)",
+  "nav.gilt": "Gilt",
+  "nav.github": "GitHub",
+  "nav.js": "JavaScript",
+  "nav.membership": "Membership",
+  "nav.nfts": "NFTs",
+  "nav.nis": "Non-interactive Staking",
+  "nav.parachains": "Parachains",
+  "nav.poll": "Token poll",
+  "nav.preimages": "Preimages",
+  "nav.ranked": "Ranked collective",
+  "nav.referenda": "Referenda",
+  "nav.rpc": "RPC calls",
+  "nav.runtime": "Runtime calls",
+  "nav.scheduler": "Scheduler",
+  "nav.settings": "Settings",
+  "nav.signing": "Sign and verify",
+  "nav.society": "Society",
+  "nav.staking": "Staking",
+  "nav.storage": "Chain state",
+  "nav.sudo": "Sudo",
+  "nav.tech-comm": "Tech. comm.",
+  "nav.teleport": "Teleport",
+  "nav.transfer": "Transfer",
+  "nav.treasury": "Treasury",
+  "nav.utilities": "Utilities",
+  "nav.whitelist": "Whitelist",
+  "nav.wiki": "Wiki"
+}

packages/apps/public/locales/en/index.json

@@ -37,6 +37,7 @@
   "app-utilities.json",
   "app-whitelist.json",
   "apps-config.json",
+  "apps-routing.json",
   "apps.json",
   "react-components.json",
   "react-params.json",

packages/apps/public/locales/en/react-signer.json

@@ -30,7 +30,7 @@
   "The signatory is one of the allowed accounts on the multisig, making a recorded approval for the transaction.": "The signatory is one of the allowed accounts on the multisig, making a recorded approval for the transaction.",
   "This could either be an approval for the hash or with full call details. The call as last approval triggers execution.": "This could either be an approval for the hash or with full call details. The call as last approval triggers execution.",
   "Tip (optional)": "Tip (optional)",
-  "Unable to connect to the Ledger, ensure support is enabled in settings and no other app is using it. {{error}}": "Unable to connect to the Ledger, ensure support is enabled in settings and no other app is using it. {{error}}",
+  "Unable to connect to the Ledger, ensure support is enabled in settings and no other app is using it. {{errorMessage}}": "Unable to connect to the Ledger, ensure support is enabled in settings and no other app is using it. {{errorMessage}}",
   "Unlock the sending account to allow signing of this transaction.": "Unlock the sending account to allow signing of this transaction.",
   "Use a proxy for this call": "Use a proxy for this call",
   "call hash": "call hash",

packages/apps/src/Content/Status.tsx

@@ -20,7 +20,7 @@ interface Props {
 
 let prevEventHash: string;
 
-function filterEvents (allAccounts: string[], t: <T = string> (key: string, opts?: Record<string, unknown>) => T, optionsAll?: KeyringOptions, events?: EventRecord[]): ActionStatus[] | null {
+function filterEvents (allAccounts: string[], t: (key: string, options?: { replace: Record<string, unknown> }) => string, optionsAll?: KeyringOptions, events?: EventRecord[]): ActionStatus[] | null {
   const eventHash = xxhashAsHex(stringToU8a(JSON.stringify(events)));
 
   if (!optionsAll || !events || eventHash === prevEventHash) {
@@ -38,7 +38,7 @@ function filterEvents (allAccounts: string[], t: <T = string> (key: string, opts
           return {
             account,
             action: `${section}.${method}`,
-            message: t<string>('transfer received'),
+            message: t('transfer received'),
             status: 'event'
           };
         }
@@ -47,7 +47,7 @@ function filterEvents (allAccounts: string[], t: <T = string> (key: string, opts
 
         return {
           action: `${section}.${method}`,
-          message: t<string>('update on #{{index}}', {
+          message: t('update on #{{index}}', {
             replace: {
               index
             }

packages/apps/src/Content/index.tsx

@@ -63,7 +63,7 @@ function Content ({ className }: Props): React.ReactElement<Props> {
       {!missingApis
         ? (
           <div className='connecting'>
-            <Spinner label={t<string>('Initializing connection')} />
+            <Spinner label={t('Initializing connection')} />
           </div>
         )
         : (

packages/apps/src/Endpoints/Network.tsx

@@ -56,12 +56,12 @@ function NetworkDisplay ({ apiUrl, className = '', setApiUrl, value: { isChild,
           {isSelected && (isRelay || !!paraId) && (
             <div className='endpointExtra'>
               {isRelay
-                ? t<string>('Relay chain')
+                ? t('Relay chain')
                 : paraId && paraId < 1000
-                  ? t<string>('{{relay}} System', { replace: { relay } })
+                  ? t('{{relay}} System', { replace: { relay } })
                   : paraId && paraId < 2000
-                    ? t<string>('{{relay}} Common', { replace: { relay } })
-                    : t<string>('{{relay}} Parachain', { replace: { relay } })
+                    ? t('{{relay}} Common', { replace: { relay } })
+                    : t('{{relay}} Parachain', { replace: { relay } })
               }
             </div>
           )}

packages/apps/src/Endpoints/index.tsx

@@ -255,7 +255,7 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem
         <Button
           icon='sync'
           isDisabled={canSwitch}
-          label={t<string>('Switch')}
+          label={t('Switch')}
           onClick={_onApply}
         />
       }
@@ -282,7 +282,7 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem
                 className='endpointCustom'
                 isError={!isUrlValid}
                 isFull
-                label={t<string>('custom endpoint')}
+                label={t('custom endpoint')}
                 onChange={_onChangeCustom}
                 value={apiUrl}
               />

packages/apps/src/Menu/index.tsx

@@ -1,7 +1,6 @@
 // Copyright 2017-2023 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
 import type { Route, Routes } from '@polkadot/apps-routing/types';
 import type { ApiProps } from '@polkadot/react-api/types';
 import type { AccountId } from '@polkadot/types/interfaces';
@@ -25,19 +24,19 @@ interface Props {
   className?: string;
 }
 
-function createExternals (t: TFunction): ItemRoute[] {
+function createExternals (t: (key: string, optionsOrText?: string | { replace: Record<string, unknown> }, options?: { ns: string }) => string): ItemRoute[] {
   return [
     {
       href: 'https://github.com/polkadot-js/apps',
       icon: 'code-branch',
       name: 'github',
-      text: t<string>('nav.github', 'GitHub', { ns: 'apps-routing' })
+      text: t('nav.github', 'GitHub', { ns: 'apps-routing' })
     },
     {
       href: 'https://wiki.polkadot.network',
       icon: 'book',
       name: 'wiki',
-      text: t<string>('nav.wiki', 'Wiki', { ns: 'apps-routing' })
+      text: t('nav.wiki', 'Wiki', { ns: 'apps-routing' })
     }
   ];
 }
@@ -99,12 +98,12 @@ function Menu ({ className = '' }: Props): React.ReactElement<Props> {
   const routeRef = useRef(createRoutes(t));
 
   const groupRef = useRef({
-    accounts: t<string>('Accounts'),
-    developer: t<string>('Developer'),
-    files: t<string>('Files'),
-    governance: t<string>('Governance'),
-    network: t<string>('Network'),
-    settings: t<string>('Settings')
+    accounts: t('Accounts'),
+    developer: t('Developer'),
+    files: t('Files'),
+    governance: t('Governance'),
+    network: t('Network'),
+    settings: t('Settings')
   });
 
   const hasSudo = useMemo(

packages/apps/src/Root.tsx

@@ -9,7 +9,6 @@ import { HashRouter } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 
 import { ApiCtxRoot } from '@polkadot/react-api';
-import { darkTheme, lightTheme } from '@polkadot/react-components';
 import { ApiStatsCtxRoot, BlockAuthorsCtxRoot, BlockEventsCtxRoot, KeyringCtxRoot, QueueCtxRoot, WindowSizeCtxRoot } from '@polkadot/react-hooks';
 import { settings } from '@polkadot/ui-settings';
 
@@ -21,14 +20,13 @@ interface Props {
 }
 
 function createTheme ({ uiTheme }: { uiTheme: string }): ThemeDef {
-  const validTheme = uiTheme === 'dark' ? 'dark' : 'light';
+  const theme = uiTheme === 'dark'
+    ? 'dark'
+    : 'light';
 
-  document && document.documentElement &&
-    document.documentElement.setAttribute('data-theme', validTheme);
+  document?.documentElement?.setAttribute('data-theme', theme);
 
-  return uiTheme === 'dark'
-    ? darkTheme
-    : lightTheme;
+  return { theme };
 }
 
 function Root ({ isElectron, store }: Props): React.ReactElement<Props> {
@@ -39,7 +37,7 @@ function Root ({ isElectron, store }: Props): React.ReactElement<Props> {
   }, []);
 
   // The ordering here is critical. It defines the hierarchy of dependencies,
-  // i.e. Block* could from Api. Certainly no cross-deps allowed
+  // i.e. Block* depends on Api. Certainly no cross-deps allowed
   return (
     <Suspense fallback='...'>
       <ThemeProvider theme={theme}>

packages/apps/src/overlays/Connecting.tsx

@@ -42,8 +42,8 @@ function Connecting ({ className }: Props): React.ReactElement<Props> | null {
         <div>
           {
             isApiConnected
-              ? t<string>('Waiting to complete metadata retrieval from remote endpoint.')
-              : t<string>('Waiting to establish a connection with the remote endpoint.')
+              ? t('Waiting to complete metadata retrieval from remote endpoint.')
+              : t('Waiting to establish a connection with the remote endpoint.')
           }
         </div>
       </BaseOverlay>
@@ -55,7 +55,7 @@ function Connecting ({ className }: Props): React.ReactElement<Props> | null {
         icon='puzzle-piece'
         type='info'
       >
-        <div>{t<string>('Waiting for authorization from the extension. Please open the installed extension and approve or reject access.')}</div>
+        <div>{t('Waiting for authorization from the extension. Please open the installed extension and approve or reject access.')}</div>
       </BaseOverlay>
     );
   } else if (!isApiConnected) {
@@ -65,10 +65,10 @@ function Connecting ({ className }: Props): React.ReactElement<Props> | null {
         icon='globe'
         type='error'
       >
-        <div>{t<string>('You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.')}</div>
+        <div>{t('You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.')}</div>
         {
           isWs && !isWsLocal && isHttps
-            ? <div>{t<string>('You are connecting from a secure location to an insecure WebSocket ({{wsUrl}}). Due to browser mixed-content security policies this connection type is not allowed. Change the RPC service to a secure \'wss\' endpoint.', { replace: { wsUrl } })}</div>
+            ? <div>{t('You are connecting from a secure location to an insecure WebSocket ({{wsUrl}}). Due to browser mixed-content security policies this connection type is not allowed. Change the RPC service to a secure \'wss\' endpoint.', { replace: { wsUrl } })}</div>
             : undefined
         }
       </BaseOverlay>

packages/apps/src/overlays/DotApps.tsx

@@ -49,7 +49,7 @@ function DotApps ({ className }: Props): React.ReactElement<Props> | null {
         type='info'
       >
         <div>
-          {t<string>('You are connected to the development instance of the UI. For a fully decentralized experience, you are encouraged to use the IPFS deployed version as the canonical URL: ')}
+          {t('You are connected to the development instance of the UI. For a fully decentralized experience, you are encouraged to use the IPFS deployed version as the canonical URL: ')}
           <a
             href={appsUrl}
             rel='noreferrer'

packages/apps/src/translate.ts

@@ -1,10 +1,13 @@
 // Copyright 2017-2023 @polkadot/apps authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { UseTranslationResponse } from 'react-i18next';
-
 import { useTranslation as useTranslationBase } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse<'apps', undefined> {
+interface TOptions {
+  ns?: string;
+  replace?: Record<string, unknown>;
+}
+
+export function useTranslation (): { t: (key: string, optionsOrText?: string | TOptions, options?: TOptions) => string } {
   return useTranslationBase('apps');
 }

packages/page-accounts/src/Accounts/Account.tsx

@@ -255,7 +255,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
       try {
         keyring.forgetAccount(address);
         status.status = 'success';
-        status.message = t<string>('account forgotten');
+        status.message = t('account forgotten');
       } catch (error) {
         status.status = 'error';
         status.message = (error as Error).message;
@@ -305,7 +305,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         <Menu.Item
           icon='link'
           key='identityMain'
-          label={t<string>('Set on-chain identity')}
+          label={t('Set on-chain identity')}
           onClick={toggleIdentityMain}
         />
       ),
@@ -313,7 +313,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         <Menu.Item
           icon='vector-square'
           key='identitySub'
-          label={t<string>('Set on-chain sub-identities')}
+          label={t('Set on-chain sub-identities')}
           onClick={toggleIdentitySub}
         />
       ),
@@ -321,7 +321,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         <Menu.Item
           icon='broom'
           key='clearDemocracy'
-          label={t<string>('Clear expired democracy locks')}
+          label={t('Clear expired democracy locks')}
           onClick={_clearDemocracyLocks}
         />
       ),
@@ -329,7 +329,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         <Menu.Item
           icon='broom'
           key='clearReferenda'
-          label={t<string>('Clear expired referenda locks')}
+          label={t('Clear expired referenda locks')}
           onClick={_clearReferendaLocks}
         />
       ),
@@ -337,17 +337,17 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         <Menu.Item
           icon='unlock'
           key='vestingVest'
-          label={t<string>('Unlock vested amount')}
+          label={t('Unlock vested amount')}
           onClick={_vestingVest}
         />
       )
-    ], t<string>('Identity')),
+    ], t('Identity')),
     createMenuGroup('deriveGroup', [
       !(isEthereum || isExternal || isHardware || isInjected || isMultisig || api.isEthereum) && (
         <Menu.Item
           icon='download'
           key='deriveAccount'
-          label={t<string>('Derive account via derivation path')}
+          label={t('Derive account via derivation path')}
           onClick={toggleDerive}
         />
       ),
@@ -355,17 +355,17 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         <Menu.Item
           icon='eye'
           key='showHwAddress'
-          label={t<string>('Show address on hardware device')}
+          label={t('Show address on hardware device')}
           onClick={_showOnHardware}
         />
       )
-    ], t<string>('Derive')),
+    ], t('Derive')),
     createMenuGroup('backupGroup', [
       !(isExternal || isHardware || isInjected || isMultisig || isDevelopment) && (
         <Menu.Item
           icon='database'
           key='backupJson'
-          label={t<string>('Create a backup file for this account')}
+          label={t('Create a backup file for this account')}
           onClick={toggleBackup}
         />
       ),
@@ -381,56 +381,56 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         <Menu.Item
           icon='trash-alt'
           key='forgetAccount'
-          label={t<string>('Forget this account')}
+          label={t('Forget this account')}
           onClick={toggleForget}
         />
       )
-    ], t<string>('Backup')),
+    ], t('Backup')),
     isFunction(api.api.tx.recovery?.createRecovery) && createMenuGroup('reoveryGroup', [
       !recoveryInfo && (
         <Menu.Item
           icon='redo'
           key='makeRecoverable'
-          label={t<string>('Make recoverable')}
+          label={t('Make recoverable')}
           onClick={toggleRecoverSetup}
         />
       ),
       <Menu.Item
         icon='screwdriver'
         key='initRecovery'
-        label={t<string>('Initiate recovery for another')}
+        label={t('Initiate recovery for another')}
         onClick={toggleRecoverAccount}
       />
-    ], t<string>('Recovery')),
+    ], t('Recovery')),
     isFunction(api.api.tx.multisig?.asMulti) && isMultisig && createMenuGroup('multisigGroup', [
       <Menu.Item
         icon='file-signature'
         isDisabled={!multiInfos || !multiInfos.length}
         key='multisigApprovals'
-        label={t<string>('Multisig approvals')}
+        label={t('Multisig approvals')}
         onClick={toggleMultisig}
       />
-    ], t<string>('Multisig')),
+    ], t('Multisig')),
     isFunction(api.api.query.democracy?.votingOf) && delegation?.accountDelegated && createMenuGroup('undelegateGroup', [
       <Menu.Item
         icon='user-edit'
         key='changeDelegate'
-        label={t<string>('Change democracy delegation')}
+        label={t('Change democracy delegation')}
         onClick={toggleDelegate}
       />,
       <Menu.Item
         icon='user-minus'
         key='undelegate'
-        label= {t<string>('Undelegate')}
+        label= {t('Undelegate')}
         onClick={toggleUndelegate}
       />
-    ], t<string>('Undelegate')),
+    ], t('Undelegate')),
     createMenuGroup('delegateGroup', [
       isFunction(api.api.query.democracy?.votingOf) && !delegation?.accountDelegated && (
         <Menu.Item
           icon='user-plus'
           key='delegate'
-          label={t<string>('Delegate democracy votes')}
+          label={t('Delegate democracy votes')}
           onClick={toggleDelegate}
         />
       ),
@@ -439,13 +439,13 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
           icon='sitemap'
           key='proxy-overview'
           label={proxy?.[0].length
-            ? t<string>('Manage proxies')
-            : t<string>('Add proxy')
+            ? t('Manage proxies')
+            : t('Add proxy')
           }
           onClick={toggleProxyOverview}
         />
       )
-    ], t<string>('Delegate')),
+    ], t('Delegate')),
     isEditable && !api.isDevelopment && createMenuGroup('genesisGroup', [
       <ChainLock
         className='accounts--network-toggle'
@@ -581,7 +581,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
                 ? (
                   <Badge
                     className='warning'
-                    hover={t<string>('This is a development account derived from the known development seed. Do not use for any funds on a non-development network.')}
+                    hover={t('This is a development account derived from the known development seed. Do not use for any funds on a non-development network.')}
                     icon='wrench'
                   />
                 )
@@ -590,8 +590,8 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
                     className='warning'
                     hover={
                       <div>
-                        <p>{t<string>('This account is available on all networks. It is recommended to link to a specific network via the account options ("only this network" option) to limit availability. For accounts from an extension, set the network on the extension.')}</p>
-                        <p>{t<string>('This does not send any transaction, rather it only sets the genesis in the account JSON.')}</p>
+                        <p>{t('This account is available on all networks. It is recommended to link to a specific network via the account options ("only this network" option) to limit availability. For accounts from an extension, set the network on the extension.')}</p>
+                        <p>{t('This does not send any transaction, rather it only sets the genesis in the account JSON.')}</p>
                       </div>
                     }
                     icon='exclamation-triangle'
@@ -603,7 +603,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
                 className='recovery'
                 hover={
                   <div>
-                    <p>{t<string>('This account is recoverable, with the following friends:')}</p>
+                    <p>{t('This account is recoverable, with the following friends:')}</p>
                     <div>
                       {recoveryInfo.friends.map((friend, index): React.ReactNode => (
                         <AddressSmall
@@ -615,15 +615,15 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
                     <table>
                       <tbody>
                         <tr>
-                          <td>{t<string>('threshold')}</td>
+                          <td>{t('threshold')}</td>
                           <td>{formatNumber(recoveryInfo.threshold)}</td>
                         </tr>
                         <tr>
-                          <td>{t<string>('delay')}</td>
+                          <td>{t('delay')}</td>
                           <td>{formatNumber(recoveryInfo.delayPeriod)}</td>
                         </tr>
                         <tr>
-                          <td>{t<string>('deposit')}</td>
+                          <td>{t('deposit')}</td>
                           <td>{formatBalance(recoveryInfo.deposit)}</td>
                         </tr>
                       </tbody>
@@ -636,7 +636,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
             {isProxied && proxyInfo?.isEmpty && (
               <Badge
                 className='important'
-                hover={t<string>('Proxied account has no owned proxies')}
+                hover={t('Proxied account has no owned proxies')}
                 icon='sitemap'
                 info='0'
               />
@@ -645,8 +645,8 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
               <Badge
                 className='important'
                 color='purple'
-                hover={t<string>('Multisig approvals pending')}
-                hoverAction={t<string>('View pending approvals')}
+                hover={t('Multisig approvals pending')}
+                hoverAction={t('View pending approvals')}
                 icon='file-signature'
                 onClick={toggleMultisig}
               />
@@ -654,8 +654,8 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
             {delegation?.accountDelegated && (
               <Badge
                 className='information'
-                hover={t<string>('This account has a governance delegation')}
-                hoverAction={t<string>('Manage delegation')}
+                hover={t('This account has a governance delegation')}
+                hoverAction={t('Manage delegation')}
                 icon='calendar-check'
                 onClick={toggleDelegate}
               />
@@ -665,10 +665,10 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
                 className='information'
                 hover={
                   proxy[0].length === 1
-                    ? t<string>('This account has a proxy set')
-                    : t<string>('This account has {{proxyNumber}} proxies set', { replace: { proxyNumber: proxy[0].length } })
+                    ? t('This account has a proxy set')
+                    : t('This account has {{proxyNumber}} proxies set', { replace: { proxyNumber: proxy[0].length } })
                 }
-                hoverAction={t<string>('Manage proxies')}
+                hoverAction={t('Manage proxies')}
                 icon='sitemap'
                 onClick={toggleProxyOverview}
               />
@@ -681,7 +681,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
               <Button
                 className='send-button'
                 icon='paper-plane'
-                label={t<string>('send')}
+                label={t('send')}
                 onClick={toggleTransfer}
               />
             )}
@@ -736,7 +736,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
               </div>
             </Columar.Column>
             <Columar.Column>
-              <h5>{t<string>('account type')}</h5>
+              <h5>{t('account type')}</h5>
               <CryptoType accountId={address} />
             </Columar.Column>
           </Columar>

packages/page-accounts/src/Accounts/BannerClaims.tsx

@@ -18,7 +18,7 @@ function BannerExtension (): React.ReactElement | null {
 
   return (
     <Banner type='error'>
-      <p>{t<string>('You have {{claimCount}} accounts that need attestations. Use the Claim Tokens app on the navigation bar to complete the process. Until you do, your balances for those accounts will not be reflected.', { replace: { claimCount } })}&nbsp;<a href='#/claims'>{t<string>('Claim tokens...')}</a></p>
+      <p>{t('You have {{claimCount}} accounts that need attestations. Use the Claim Tokens app on the navigation bar to complete the process. Until you do, your balances for those accounts will not be reflected.', { replace: { claimCount } })}&nbsp;<a href='#/claims'>{t('Claim tokens...')}</a></p>
     </Banner>
   );
 }

packages/page-accounts/src/Accounts/BannerExtension.tsx

@@ -26,7 +26,7 @@ function BannerExtension (): React.ReactElement | null {
   const { t } = useTranslation();
   const { hasInjectedAccounts } = useApi();
   const upgradableCount = useExtensionCounter();
-  const phishing = useRef<string>(t<string>('Since some extensions, such as the polkadot-js extension, protects you against all community reported phishing sites, there are valid reasons to use them for additional protection, even if you are not storing accounts in it.'));
+  const phishing = useRef<string>(t('Since some extensions, such as the polkadot-js extension, protects you against all community reported phishing sites, there are valid reasons to use them for additional protection, even if you are not storing accounts in it.'));
 
   if (!isSupported || !browserName) {
     return null;
@@ -42,10 +42,10 @@ function BannerExtension (): React.ReactElement | null {
         <Banner type='warning'>
           <p>
             {upgradableCount === 1
-              ? t<string>('You have 1 extension that needs to be updated with the latest chain properties in order to display the correct information for the chain you are connected to.')
-              : t<string>('You have {{upgradableCount}} extensions that need to be updated with the latest chain properties in order to display the correct information for the chain you are connected to.', { replace: { upgradableCount } })
+              ? t('You have 1 extension that needs to be updated with the latest chain properties in order to display the correct information for the chain you are connected to.')
+              : t('You have {{upgradableCount}} extensions that need to be updated with the latest chain properties in order to display the correct information for the chain you are connected to.', { replace: { upgradableCount } })
             }
-            {t<string>(' This update includes chain metadata and chain properties.')}
+            {t(' This update includes chain metadata and chain properties.')}
           </p>
           <p><Trans key='extensionUpgrade'>Visit your <a href='#/settings/metadata'>settings page</a> to apply the updates to the injected extensions.</Trans></p>
         </Banner>
@@ -54,8 +54,8 @@ function BannerExtension (): React.ReactElement | null {
 
     return (
       <Banner type='warning'>
-        <p>{t<string>('One or more extensions are detected in your browser, however no accounts has been injected.')}</p>
-        <p>{t<string>('Ensure that the extension has accounts, some accounts are visible globally and available for this chain and that you gave the application permission to access accounts from the extension to use them.')}</p>
+        <p>{t('One or more extensions are detected in your browser, however no accounts has been injected.')}</p>
+        <p>{t('Ensure that the extension has accounts, some accounts are visible globally and available for this chain and that you gave the application permission to access accounts from the extension to use them.')}</p>
         <p>{phishing.current}</p>
       </Banner>
     );
@@ -63,7 +63,7 @@ function BannerExtension (): React.ReactElement | null {
 
   return (
     <Banner type='warning'>
-      <p>{t<string>('It is recommended that you create/store your accounts securely and externally from the app. On {{yourBrowser}} the following browser extensions are available for use -', {
+      <p>{t('It is recommended that you create/store your accounts securely and externally from the app. On {{yourBrowser}} the following browser extensions are available for use -', {
         replace: {
           yourBrowser: stringUpperFirst(browserName)
         }
@@ -80,12 +80,12 @@ function BannerExtension (): React.ReactElement | null {
         </li>
       ))
       }</ul>
-      <p>{t<string>('Accounts injected from any of these extensions will appear in this application and be available for use. The above list is updated as more extensions with external signing capability become available.')}&nbsp;
+      <p>{t('Accounts injected from any of these extensions will appear in this application and be available for use. The above list is updated as more extensions with external signing capability become available.')}&nbsp;
         <a
           href='https://github.com/polkadot-js/extension'
           rel='noopener noreferrer'
           target='_blank'
-        >{t<string>('Learn more...')}</a>
+        >{t('Learn more...')}</a>
       </p>
       <p>{phishing.current}</p>
     </Banner>

packages/page-accounts/src/Accounts/Summary.tsx

@@ -20,7 +20,7 @@ function Summary ({ balance, className }: Props) {
 
   return (
     <SummaryBox className={className}>
-      <CardSummary label={t<string>('total balance')}>
+      <CardSummary label={t('total balance')}>
         <FormatBalance
           className={balance ? '' : '--tmp'}
           value={balance?.total || 1}
@@ -28,14 +28,14 @@ function Summary ({ balance, className }: Props) {
       </CardSummary>
       <CardSummary
         className='media--900'
-        label={t<string>('total transferrable')}
+        label={t('total transferrable')}
       >
         <FormatBalance
           className={balance ? '' : '--tmp'}
           value={balance?.transferrable || 1}
         />
       </CardSummary>
-      <CardSummary label={t<string>('total locked')}>
+      <CardSummary label={t('total locked')}>
         <FormatBalance
           className={balance ? '' : '--tmp'}
           value={balance?.locked || 1}
@@ -44,21 +44,21 @@ function Summary ({ balance, className }: Props) {
       {balance?.bonded.gtn(0) &&
         <CardSummary
           className='media--1100'
-          label={t<string>('bonded')}
+          label={t('bonded')}
         >
           <FormatBalance value={balance.bonded} />
         </CardSummary>}
       {balance?.redeemable.gtn(0) &&
         <CardSummary
           className='media--1500'
-          label={t<string>('redeemable')}
+          label={t('redeemable')}
         >
           <FormatBalance value={balance.redeemable} />
         </CardSummary>}
       {balance?.unbonding.gtn(0) &&
         <CardSummary
           className='media--1300'
-          label={t<string>('unbonding')}
+          label={t('unbonding')}
         >
           <FormatBalance value={balance.unbonding} />
         </CardSummary>}

packages/page-accounts/src/Accounts/index.tsx

@@ -196,13 +196,13 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
   const header = useMemo(
     (): Record<GroupName, [React.ReactNode?, string?, number?, (() => void)?][]> => {
       const ret: Record<GroupName, [React.ReactNode?, string?, number?, (() => void)?][]> = {
-        accounts: [[<>{t<string>('accounts')}<div className='sub'>{t<string>('all locally stored accounts')}</div></>]],
-        hardware: [[<>{t<string>('hardware')}<div className='sub'>{t<string>('accounts managed via hardware devices')}</div></>]],
-        injected: [[<>{t<string>('extension')}<div className='sub'>{t<string>('accounts available via browser extensions')}</div></>]],
-        multisig: [[<>{t<string>('multisig')}<div className='sub'>{t<string>('on-chain multisig accounts')}</div></>]],
-        proxied: [[<>{t<string>('proxied')}<div className='sub'>{t<string>('on-chain proxied accounts')}</div></>]],
-        qr: [[<>{t<string>('via qr')}<div className='sub'>{t<string>('accounts available via mobile devices')}</div></>]],
-        testing: [[<>{t<string>('development')}<div className='sub'>{t<string>('accounts derived via development seeds')}</div></>]]
+        accounts: [[<>{t('accounts')}<div className='sub'>{t('all locally stored accounts')}</div></>]],
+        hardware: [[<>{t('hardware')}<div className='sub'>{t('accounts managed via hardware devices')}</div></>]],
+        injected: [[<>{t('extension')}<div className='sub'>{t('accounts available via browser extensions')}</div></>]],
+        multisig: [[<>{t('multisig')}<div className='sub'>{t('on-chain multisig accounts')}</div></>]],
+        proxied: [[<>{t('proxied')}<div className='sub'>{t('on-chain proxied accounts')}</div></>]],
+        qr: [[<>{t('via qr')}<div className='sub'>{t('accounts available via mobile devices')}</div></>]],
+        testing: [[<>{t('development')}<div className='sub'>{t('accounts derived via development seeds')}</div></>]]
       };
 
       Object.values(ret).forEach((a): void => {
@@ -316,7 +316,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
           <SortDropdown
             className='media--1500'
             defaultValue={sortBy}
-            label={t<string>('sort by')}
+            label={t('sort by')}
             onChange={onSortChange}
             onClick={onSortDirectionChange}
             options={sortOptions.current}
@@ -328,7 +328,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
           />
           <FilterInput
             filterOn={filterOn}
-            label={t<string>('filter by name or tags')}
+            label={t('filter by name or tags')}
             setFilter={setFilter}
           />
         </section>
@@ -337,25 +337,25 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
             <>
               <Button
                 icon='plus'
-                label={t<string>('Account')}
+                label={t('Account')}
                 onClick={toggleCreate}
               />
               <Button
                 icon='sync'
-                label={t<string>('From JSON')}
+                label={t('From JSON')}
                 onClick={toggleImport}
               />
             </>
           )}
           <Button
             icon='qrcode'
-            label={t<string>('From Qr')}
+            label={t('From Qr')}
             onClick={toggleQr}
           />
           {isLedgerEnabled && (
             <Button
               icon='project-diagram'
-              label={t<string>('From Ledger')}
+              label={t('From Ledger')}
               onClick={toggleLedger}
             />
           )}
@@ -364,14 +364,14 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
               {hasPalletMultisig && (
                 <Button
                   icon='plus'
-                  label={t<string>('Multisig')}
+                  label={t('Multisig')}
                   onClick={toggleMultisig}
                 />
               )}
               {hasPalletProxy && (
                 <Button
                   icon='plus'
-                  label={t<string>('Proxied')}
+                  label={t('Proxied')}
                   onClick={toggleProxy}
                 />
               )}
@@ -382,14 +382,14 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
       {!isNextTick || !sortedAccounts.length
         ? (
           <Table
-            empty={isNextTick && sortedAccounts && t<string>("You don't have any accounts. Some features are currently hidden and will only become available once you have accounts.")}
+            empty={isNextTick && sortedAccounts && t("You don't have any accounts. Some features are currently hidden and will only become available once you have accounts.")}
             header={header.accounts}
           />
         )
         : GROUP_ORDER.map((group) =>
           groups[group] && (
             <Table
-              empty={t<string>('No accounts')}
+              empty={t('No accounts')}
               header={header[group]}
               isSplit
               key={group}

packages/page-accounts/src/Vanity/Match.tsx

@@ -56,7 +56,7 @@ function Match ({ address, className = '', count, offset, onCreateToggle, onRemo
       <td className='button'>
         <Button
           icon='plus'
-          label={t<string>('Save')}
+          label={t('Save')}
           onClick={_onCreate}
         />
         <Button

packages/page-accounts/src/Vanity/index.tsx

@@ -171,15 +171,15 @@ function VanityApp ({ className = '', onStatusChange }: Props): React.ReactEleme
 
   const header = useMemo<[React.ReactNode?, string?, number?][]>(
     () => [
-      [t<string>('matches'), 'start', 2],
-      [t<string>('Evaluated {{count}} keys in {{elapsed}}s ({{avg}} keys/s)', {
+      [t('matches'), 'start', 2],
+      [t('Evaluated {{count}} keys in {{elapsed}}s ({{avg}} keys/s)', {
         replace: {
           avg: (keyCount / (elapsed / 1000)).toFixed(3),
           count: keyCount,
           elapsed: (elapsed / 1000).toFixed(2)
         }
       }), 'start --digits'],
-      [t<string>('secret'), 'start'],
+      [t('secret'), 'start'],
       []
     ],
     [elapsed, keyCount, t]
@@ -193,7 +193,7 @@ function VanityApp ({ className = '', onStatusChange }: Props): React.ReactEleme
           className='medium'
           isDisabled={isRunning}
           isError={!isMatchValid}
-          label={t<string>('Search for')}
+          label={t('Search for')}
           onChange={_onChangeMatch}
           onEnter={_toggleStart}
           value={match}
@@ -201,7 +201,7 @@ function VanityApp ({ className = '', onStatusChange }: Props): React.ReactEleme
         <Dropdown
           className='medium'
           isDisabled={isRunning}
-          label={t<string>('case sensitive')}
+          label={t('case sensitive')}
           onChange={setWithCase}
           options={BOOL_OPTIONS}
           value={withCase}
@@ -211,7 +211,7 @@ function VanityApp ({ className = '', onStatusChange }: Props): React.ReactEleme
         <Dropdown
           className='medium'
           defaultValue={type}
-          label={t<string>('keypair crypto type')}
+          label={t('keypair crypto type')}
           onChange={setType}
           options={isEthereum ? settings.availableCryptosEth : settings.availableCryptos}
         />
@@ -226,18 +226,18 @@ function VanityApp ({ className = '', onStatusChange }: Props): React.ReactEleme
           isDisabled={!isMatchValid}
           label={
             isRunning
-              ? t<string>('Stop generation')
-              : t<string>('Start generation')
+              ? t('Stop generation')
+              : t('Start generation')
           }
           onClick={_toggleStart}
         />
       </Button.Group>
       {matches.length !== 0 && (
         <>
-          <article className='warning centered'>{t<string>('Ensure that you utilized the "Save" functionality before using a generated address to receive funds. Without saving the address and the associated seed any funds sent to it will be lost.')}</article>
+          <article className='warning centered'>{t('Ensure that you utilized the "Save" functionality before using a generated address to receive funds. Without saving the address and the associated seed any funds sent to it will be lost.')}</article>
           <Table
             className='vanity--App-matches'
-            empty={t<string>('No matches found')}
+            empty={t('No matches found')}
             header={header}
           >
             {matches.map((match): React.ReactNode => (

packages/page-accounts/src/index.tsx

@@ -27,11 +27,11 @@ function AccountsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
     {
       isRoot: true,
       name: 'overview',
-      text: t<string>('My accounts')
+      text: t('My accounts')
     },
     {
       name: 'vanity',
-      text: t<string>('Vanity generator')
+      text: t('Vanity generator')
     }
   ]);
 

packages/page-accounts/src/modals/Backup.tsx

@@ -59,7 +59,7 @@ function Backup ({ address, onClose }: Props): React.ReactElement<Props> {
   return (
     <Modal
       className='app--accounts-Modal'
-      header={t<string>('Backup account')}
+      header={t('Backup account')}
       onClose={onClose}
     >
       <Modal.Content>
@@ -67,13 +67,13 @@ function Backup ({ address, onClose }: Props): React.ReactElement<Props> {
           isInline
           value={address}
         >
-          <p>{t<string>('An encrypted backup file will be created once you have pressed the "Download" button. This can be used to re-import your account on any other machine.')}</p>
-          <p>{t<string>('Save this backup file in a secure location. Additionally, the password associated with this account is needed together with this backup file in order to restore your account.')}</p>
+          <p>{t('An encrypted backup file will be created once you have pressed the "Download" button. This can be used to re-import your account on any other machine.')}</p>
+          <p>{t('Save this backup file in a secure location. Additionally, the password associated with this account is needed together with this backup file in order to restore your account.')}</p>
           <div>
             <Password
               autoFocus
               isError={isPassTouched && !isPassValid}
-              label={t<string>('password')}
+              label={t('password')}
               onChange={_onChangePass}
               onEnter={_doBackup}
               tabIndex={0}
@@ -87,7 +87,7 @@ function Backup ({ address, onClose }: Props): React.ReactElement<Props> {
           icon='download'
           isBusy={isBusy}
           isDisabled={!isPassValid}
-          label={t<string>('Download')}
+          label={t('Download')}
           onClick={_doBackup}
         />
       </Modal.Actions>

packages/page-accounts/src/modals/ChangePass.tsx

@@ -91,7 +91,7 @@ function ChangePass ({ address, className = '', onClose }: Props): React.ReactEl
   return (
     <Modal
       className={`${className} app--accounts-Modal`}
-      header={t<string>('Change account password')}
+      header={t('Change account password')}
       onClose={onClose}
       size='large'
     >
@@ -100,20 +100,20 @@ function ChangePass ({ address, className = '', onClose }: Props): React.ReactEl
           isInline
           value={address}
         />
-        <Modal.Columns hint={t<string>('The existing account password as specified when this account was created or when it was last changed.')}>
+        <Modal.Columns hint={t('The existing account password as specified when this account was created or when it was last changed.')}>
           <Password
             autoFocus
             isError={!isOldValid}
-            label={t<string>('your current password')}
+            label={t('your current password')}
             onChange={_onChangeOld}
             tabIndex={1}
             value={oldPass}
           />
         </Modal.Columns>
-        <Modal.Columns hint={t<string>('This will apply to any future use of this account as stored on this browser. Ensure that you securely store this new password and that it is strong and unique to the account.')}>
+        <Modal.Columns hint={t('This will apply to any future use of this account as stored on this browser. Ensure that you securely store this new password and that it is strong and unique to the account.')}>
           <Password
             isError={!newPass1.isValid}
-            label={t<string>('your new password')}
+            label={t('your new password')}
             onChange={_onChangeNew1}
             onEnter={_doChange}
             tabIndex={2}
@@ -121,7 +121,7 @@ function ChangePass ({ address, className = '', onClose }: Props): React.ReactEl
           />
           <Password
             isError={!newPass2.isValid}
-            label={t<string>('password (repeat)')}
+            label={t('password (repeat)')}
             onChange={_onChangeNew2}
             onEnter={_doChange}
             tabIndex={2}
@@ -135,7 +135,7 @@ function ChangePass ({ address, className = '', onClose }: Props): React.ReactEl
           icon='sign-in-alt'
           isBusy={isBusy}
           isDisabled={!newPass1.isValid || !newPass2.isValid || !isOldValid}
-          label={t<string>('Change')}
+          label={t('Change')}
           onClick={_doChange}
         />
       </Modal.Actions>

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

@@ -170,21 +170,21 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
   const isValid = isFirstStepValid && isSecondStepValid;
 
   const errorIndex = useRef<Record<string, string>>({
-    INVALID_DERIVATION_PATH: t<string>('This is an invalid derivation path.'),
-    PASSWORD_IGNORED: t<string>('Password are ignored for hex seed'),
-    SOFT_NOT_ALLOWED: t<string>('Soft derivation paths are not allowed on ed25519'),
-    WARNING_SLASH_PASSWORD: t<string>('Your password contains at least one "/" character. Disregard this warning if it is intended.')
+    INVALID_DERIVATION_PATH: t('This is an invalid derivation path.'),
+    PASSWORD_IGNORED: t('Password are ignored for hex seed'),
+    SOFT_NOT_ALLOWED: t('Soft derivation paths are not allowed on ed25519'),
+    WARNING_SLASH_PASSWORD: t('Your password contains at least one "/" character. Disregard this warning if it is intended.')
   });
 
   const seedOpt = useRef((
     isDevelopment
-      ? [{ text: t<string>('Development'), value: 'dev' }]
+      ? [{ text: t('Development'), value: 'dev' }]
       : []
   ).concat(
-    { text: t<string>('Mnemonic'), value: 'bip' },
+    { text: t('Mnemonic'), value: 'bip' },
     isEthereum
-      ? { text: t<string>('Private Key'), value: 'raw' }
-      : { text: t<string>('Raw seed'), value: 'raw' }
+      ? { text: t('Private Key'), value: 'raw' }
+      : { text: t('Raw seed'), value: 'raw' }
   ));
 
   const _onChangePath = useCallback(
@@ -231,7 +231,7 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
       setIsBusy(true);
       nextTick((): void => {
         const options = { genesisHash: isDevelopment ? undefined : api.genesisHash.toHex(), isHardware: false, name: name.trim() };
-        const status = createAccount(seed, derivePath, pairType, options, password, t<string>('created account'));
+        const status = createAccount(seed, derivePath, pairType, options, password, t('created account'));
 
         onStatusChange(status);
         setIsBusy(false);
@@ -244,7 +244,7 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
   return (
     <StyledModal
       className={className}
-      header={t<string>('Add an account via seed {{step}}/{{STEPS_COUNT}}', { replace: { STEPS_COUNT, step } })}
+      header={t('Add an account via seed {{step}}/{{STEPS_COUNT}}', { replace: { STEPS_COUNT, step } })}
       onClose={onClose}
       size='large'
     >
@@ -259,18 +259,18 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
           />
         </Modal.Columns>
         {step === 1 && <>
-          <Modal.Columns hint={t<string>('The secret seed value for this account. Ensure that you keep this in a safe place, with access to the seed you can re-create the account.')}>
+          <Modal.Columns hint={t('The secret seed value for this account. Ensure that you keep this in a safe place, with access to the seed you can re-create the account.')}>
             <TextArea
               isError={!isSeedValid}
               isReadOnly={seedType === 'dev'}
               label={
                 seedType === 'bip'
-                  ? t<string>('mnemonic seed')
+                  ? t('mnemonic seed')
                   : seedType === 'dev'
-                    ? t<string>('development seed')
+                    ? t('development seed')
                     : isEthereum
-                      ? t<string>('ethereum private key')
-                      : t<string>('seed (hex or string)')
+                      ? t('ethereum private key')
+                      : t('seed (hex or string)')
               }
               onChange={_onChangeSeed}
               seed={seed}
@@ -278,7 +278,7 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
             >
               <CopyButton
                 className='copyMoved'
-                type={seedType === 'bip' ? t<string>('mnemonic') : seedType === 'raw' ? isEthereum ? t<string>('private key') : 'seed' : t<string>('raw seed')}
+                type={seedType === 'bip' ? t('mnemonic') : seedType === 'raw' ? isEthereum ? t('private key') : 'seed' : t('raw seed')}
                 value={seed}
               />
               <Dropdown
@@ -292,13 +292,13 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
           <Expander
             className='accounts--Creator-advanced'
             isPadded
-            summary={t<string>('Advanced creation options')}
+            summary={t('Advanced creation options')}
           >
             {pairType !== 'ethereum' && (
-              <Modal.Columns hint={t<string>('If you are moving accounts between applications, ensure that you use the correct type.')}>
+              <Modal.Columns hint={t('If you are moving accounts between applications, ensure that you use the correct type.')}>
                 <Dropdown
                   defaultValue={pairType}
-                  label={t<string>('keypair crypto type')}
+                  label={t('keypair crypto type')}
                   onChange={_onChangePairType}
                   options={
                     isEthereum
@@ -329,20 +329,20 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
                   />
                 )
                 : (
-                  <Modal.Columns hint={t<string>('The derivation path allows you to create different accounts from the same base mnemonic.')}>
+                  <Modal.Columns hint={t('The derivation path allows you to create different accounts from the same base mnemonic.')}>
                     <Input
                       isDisabled={seedType === 'raw'}
                       isError={!!deriveValidation?.error}
-                      label={t<string>('secret derivation path')}
+                      label={t('secret derivation path')}
                       onChange={_onChangePath}
                       placeholder={
                         seedType === 'raw'
                           ? pairType === 'sr25519'
-                            ? t<string>('//hard/soft')
-                            : t<string>('//hard')
+                            ? t('//hard/soft')
+                            : t('//hard')
                           : pairType === 'sr25519'
-                            ? t<string>('//hard/soft///password')
-                            : t<string>('//hard///password')
+                            ? t('//hard/soft///password')
+                            : t('//hard///password')
                       }
                       tabIndex={-1}
                       value={derivePath}
@@ -360,7 +360,7 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
             <ExternalWarning />
             <div className='saveToggle'>
               <Checkbox
-                label={<>{t<string>('I have saved my mnemonic seed safely')}</>}
+                label={<>{t('I have saved my mnemonic seed safely')}</>}
                 onChange={_toggleMnemonicSaved}
                 value={isMnemonicSaved}
               />
@@ -397,7 +397,7 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
             activeOnEnter
             icon='step-forward'
             isDisabled={!isFirstStepValid}
-            label={t<string>('Next')}
+            label={t('Next')}
             onClick={nextStep}
           />
         }
@@ -405,14 +405,14 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
           <>
             <Button
               icon='step-backward'
-              label={t<string>('Prev')}
+              label={t('Prev')}
               onClick={prevStep}
             />
             <Button
               activeOnEnter
               icon='step-forward'
               isDisabled={!isSecondStepValid}
-              label={t<string>('Next')}
+              label={t('Next')}
               onClick={nextStep}
             />
           </>
@@ -421,14 +421,14 @@ function Create ({ className = '', onClose, onStatusChange, seed: propsSeed, typ
           <>
             <Button
               icon='step-backward'
-              label={t<string>('Prev')}
+              label={t('Prev')}
               onClick={prevStep}
             />
             <Button
               activeOnEnter
               icon='plus'
               isBusy={isBusy}
-              label={t<string>('Save')}
+              label={t('Save')}
               onClick={_onCommit}
             />
           </>

packages/page-accounts/src/modals/CreateAccountInputs.tsx

@@ -40,14 +40,14 @@ const CreateAccountInputs = ({ name: { isNameValid, name }, onCommit, setName, s
 
   return (
     <>
-      <Modal.Columns hint={t<string>('The name for this account and how it will appear under your addresses. With an on-chain identity, it can be made available to others.')}>
+      <Modal.Columns hint={t('The name for this account and how it will appear under your addresses. With an on-chain identity, it can be made available to others.')}>
         <Input
           className='full'
           isError={!isNameValid}
-          label={t<string>('name')}
+          label={t('name')}
           onChange={_onChangeName}
           onEnter={onCommit}
-          placeholder={t<string>('new account')}
+          placeholder={t('new account')}
           value={name}
         />
       </Modal.Columns>

packages/page-accounts/src/modals/CreateConfirmation.tsx

@@ -32,8 +32,8 @@ function CreateConfirmation ({ address, derivePath, name, pairType, seed }: Prop
       <Modal.Columns
         hint={
           <>
-            <p>{t<string>('We will provide you with a generated backup file after your account is created. As long as you have access to your account you can always download this file later by clicking on "Backup" button from the Accounts section.')}</p>
-            <p>{t<string>('Please make sure to save this file in a secure location as it is required, together with your password, to restore your account.')}</p>
+            <p>{t('We will provide you with a generated backup file after your account is created. As long as you have access to your account you can always download this file later by clicking on "Backup" button from the Accounts section.')}</p>
+            <p>{t('Please make sure to save this file in a secure location as it is required, together with your password, to restore your account.')}</p>
           </>
         }
       >
@@ -47,17 +47,17 @@ function CreateConfirmation ({ address, derivePath, name, pairType, seed }: Prop
         )}
         {shortSeed && (
           <Static
-            label={t<string>('partial seed')}
+            label={t('partial seed')}
             value={shortSeed}
           />
         )}
         <Static
-          label={t<string>('keypair type')}
+          label={t('keypair type')}
           value={pairType}
         />
         <Static
-          label={t<string>('derivation path')}
-          value={derivePath || t<string>('<none provided>')}
+          label={t('derivation path')}
+          value={derivePath || t('<none provided>')}
         />
       </Modal.Columns>
     </Modal.Content>

packages/page-accounts/src/modals/CreateEthDerivationPath.tsx

@@ -33,7 +33,7 @@ function CreateEthDerivationPath ({ className, derivePath, deriveValidation, onC
       .fill(0)
       .map((_, i) => ({
         key: i,
-        text: t<string>('Address index {{index}}', {
+        text: t('Address index {{index}}', {
           replace: { index: i }
         }),
         value: i
@@ -43,10 +43,10 @@ function CreateEthDerivationPath ({ className, derivePath, deriveValidation, onC
   const [useCustomIndex, toggleCustomIndex] = useToggle();
 
   const errorIndex = useRef<Record<string, string>>({
-    INVALID_DERIVATION_PATH: t<string>('This is an invalid derivation path.'),
-    PASSWORD_IGNORED: t<string>('Password are ignored for hex seed'),
-    SOFT_NOT_ALLOWED: t<string>('Soft derivation paths are not allowed on ed25519'),
-    WARNING_SLASH_PASSWORD: t<string>('Your password contains at least one "/" character. Disregard this warning if it is intended.')
+    INVALID_DERIVATION_PATH: t('This is an invalid derivation path.'),
+    PASSWORD_IGNORED: t('Password are ignored for hex seed'),
+    SOFT_NOT_ALLOWED: t('Soft derivation paths are not allowed on ed25519'),
+    WARNING_SLASH_PASSWORD: t('Your password contains at least one "/" character. Disregard this warning if it is intended.')
   });
 
   useEffect((): void => {
@@ -58,8 +58,8 @@ function CreateEthDerivationPath ({ className, derivePath, deriveValidation, onC
       className={className}
       hint={
         seedType === 'raw'
-          ? t<string>('The derivation path is only relevant when deriving keys from a mnemonic.')
-          : t<string>('The derivation path allows you to create different accounts from the same base mnemonic.')
+          ? t('The derivation path is only relevant when deriving keys from a mnemonic.')
+          : t('The derivation path allows you to create different accounts from the same base mnemonic.')
       }
     >
       {seedType === 'bip'
@@ -67,7 +67,7 @@ function CreateEthDerivationPath ({ className, derivePath, deriveValidation, onC
           <>
             <div className='saveToggle'>
               <Checkbox
-                label={<>{t<string>('Use custom address index')}</>}
+                label={<>{t('Use custom address index')}</>}
                 onChange={toggleCustomIndex}
                 value={useCustomIndex}
               />
@@ -76,14 +76,14 @@ function CreateEthDerivationPath ({ className, derivePath, deriveValidation, onC
               ? (
                 <InputNumber
                   isDecimal={false}
-                  label={t<string>('Custom index')}
+                  label={t('Custom index')}
                   onChange={setCustomIndex}
                   value={customIndex}
                 />
               )
               : (
                 <Dropdown
-                  label={t<string>('address index')}
+                  label={t('address index')}
                   onChange={setAddIndex}
                   options={addressList}
                   value={addIndex}
@@ -91,7 +91,7 @@ function CreateEthDerivationPath ({ className, derivePath, deriveValidation, onC
               )}
             <div className='saveToggle'>
               <Checkbox
-                label={<>{t<string>('Use custom derivation path')}</>}
+                label={<>{t('Use custom derivation path')}</>}
                 onChange={toggleCustomPath}
                 value={useCustomPath}
               />
@@ -100,7 +100,7 @@ function CreateEthDerivationPath ({ className, derivePath, deriveValidation, onC
               ? (
                 <Input
                   isError={!!deriveValidation?.error}
-                  label={t<string>('secret derivation path')}
+                  label={t('secret derivation path')}
                   onChange={onChange}
                   placeholder={ETH_DEFAULT_PATH}
                   tabIndex={-1}
@@ -111,7 +111,7 @@ function CreateEthDerivationPath ({ className, derivePath, deriveValidation, onC
           </>
         )
         : (
-          <MarkWarning content={t<string>('The derivation path is only relevant when deriving keys from a mnemonic.')} />
+          <MarkWarning content={t('The derivation path is only relevant when deriving keys from a mnemonic.')} />
         )}
       {deriveValidation?.error && (
         <MarkError content={errorIndex.current[deriveValidation.error] || deriveValidation.error} />

packages/page-accounts/src/modals/CreateSuriLedger.tsx

@@ -29,12 +29,12 @@ function CreateSuriLedger ({ className, onChange, seedType }: Props): React.Reac
   })));
 
   const accOps = useRef(AVAIL_INDEXES.map((value) => ({
-    text: t<string>('Account type {{index}}', { replace: { index: value } }),
+    text: t('Account type {{index}}', { replace: { index: value } }),
     value
   })));
 
   const addOps = useRef(AVAIL_INDEXES.map((value) => ({
-    text: t<string>('Address index {{index}}', { replace: { index: value } }),
+    text: t('Address index {{index}}', { replace: { index: value } }),
     value
   })));
 
@@ -47,32 +47,32 @@ function CreateSuriLedger ({ className, onChange, seedType }: Props): React.Reac
   return (
     <Modal.Columns
       className={className}
-      hint={t<string>('The derivation will be constructed from the values you specify.')}
+      hint={t('The derivation will be constructed from the values you specify.')}
     >
       {seedType === 'bip'
         ? (
           <>
             <Dropdown
-              label={t<string>('Ledger app type (originated from)')}
+              label={t('Ledger app type (originated from)')}
               onChange={setChainType}
               options={netOpts.current}
               value={chainType}
             />
             <Dropdown
-              label={t<string>('account type')}
+              label={t('account type')}
               onChange={setAccIndex}
               options={accOps.current}
               value={accIndex}
             />
             <Dropdown
-              label={t<string>('address index')}
+              label={t('address index')}
               onChange={setAddIndex}
               options={addOps.current}
               value={addIndex}
             />
           </>
         )
-        : <MarkError content={t<string>('Derivation for Ledger-type accounts are only available on mnemonic seeds.')} />
+        : <MarkError content={t('Derivation for Ledger-type accounts are only available on mnemonic seeds.')} />
       }
     </Modal.Columns>
   );

packages/page-accounts/src/modals/Delegate.tsx

@@ -45,8 +45,8 @@ function Delegate ({ onClose, previousAmount, previousConviction, previousDelega
     <Modal
       className='staking--Delegate'
       header={previousDelegatedAccount
-        ? t<string>('democracy vote delegation')
-        : t<string>('delegate democracy vote')
+        ? t('democracy vote delegation')
+        : t('delegate democracy vote')
       }
       onClose={onClose}
       size='large'
@@ -55,33 +55,33 @@ function Delegate ({ onClose, previousAmount, previousConviction, previousDelega
         <Modal.Columns
           hint={
             <>
-              <p>{t<string>('Any democracy vote performed by the delegated account will result in an additional vote from the delegating account')}</p>
-              <p>{t<string>('If the delegated account is currently voting in a referendum, the delegating vote and conviction will be added.')}</p>
+              <p>{t('Any democracy vote performed by the delegated account will result in an additional vote from the delegating account')}</p>
+              <p>{t('If the delegated account is currently voting in a referendum, the delegating vote and conviction will be added.')}</p>
             </>
           }
         >
           <InputAddress
-            label={t<string>('delegating account')}
+            label={t('delegating account')}
             onChange={setDelegatingAccount}
             type='account'
             value={delegatingAccount}
           />
           <InputAddress
-            label={t<string>('delegated account')}
+            label={t('delegated account')}
             onChange={setDelegatedAccount}
             type='account'
             value={delegatedAccount}
           />
         </Modal.Columns>
-        <Modal.Columns hint={t<string>('The amount to allocate and the conviction that will be applied to all votes made on a referendum.')}>
+        <Modal.Columns hint={t('The amount to allocate and the conviction that will be applied to all votes made on a referendum.')}>
           <InputBalance
             autoFocus
             isError={!!amountError?.error}
             isZeroable={false}
-            label={t<string>('delegating amount')}
+            label={t('delegating amount')}
             labelExtra={
               <BalanceFree
-                label={<span className='label'>{t<string>('balance')}</span>}
+                label={<span className='label'>{t('balance')}</span>}
                 params={delegatingAccount}
               />
             }
@@ -95,7 +95,7 @@ function Delegate ({ onClose, previousAmount, previousConviction, previousDelega
             onError={setAmountError}
           />
           <ConvictionDropdown
-            label={t<string>('conviction')}
+            label={t('conviction')}
             onChange={setConviction}
             value={conviction}
             voteLockingPeriod={
@@ -110,7 +110,7 @@ function Delegate ({ onClose, previousAmount, previousConviction, previousDelega
           <TxButton
             accountId={delegatingAccount}
             icon='trash-alt'
-            label={t<string>('Undelegate')}
+            label={t('Undelegate')}
             onStart={onClose}
             tx={api.tx.democracy.undelegate}
           />
@@ -120,8 +120,8 @@ function Delegate ({ onClose, previousAmount, previousConviction, previousDelega
           icon='sign-in-alt'
           isDisabled={!amount?.gt(BN_ZERO) || !!amountError?.error || !isDirty}
           label={previousDelegatedAccount
-            ? t<string>('Save delegation')
-            : t<string>('Delegate')
+            ? t('Save delegation')
+            : t('Delegate')
           }
           onStart={onClose}
           params={[delegatedAccount, conviction, amount]}

packages/page-accounts/src/modals/Derive.tsx

@@ -137,7 +137,7 @@ function Derive ({ className = '', from, onClose }: Props): React.ReactElement {
 
       setIsBusy(true);
       nextTick((): void => {
-        const status = createAccount(source, suri, name, password, t<string>('created account'), isDevelopment ? undefined : api.genesisHash.toHex());
+        const status = createAccount(source, suri, name, password, t('created account'), isDevelopment ? undefined : api.genesisHash.toHex());
 
         queueAction(status);
         setIsBusy(false);
@@ -150,7 +150,7 @@ function Derive ({ className = '', from, onClose }: Props): React.ReactElement {
   const sourceStatic = (
     <InputAddress
       isDisabled
-      label={t<string>('derive root account')}
+      label={t('derive root account')}
       value={from}
     />
   );
@@ -158,7 +158,7 @@ function Derive ({ className = '', from, onClose }: Props): React.ReactElement {
   return (
     <Modal
       className={className}
-      header={t<string>('Derive account from pair')}
+      header={t('Derive account from pair')}
       onClose={onClose}
     >
       {address && isConfirmationOpen
@@ -179,7 +179,7 @@ function Derive ({ className = '', from, onClose }: Props): React.ReactElement {
                 <Password
                   autoFocus
                   isError={!!lockedError}
-                  label={t<string>('password')}
+                  label={t('password')}
                   onChange={_onChangeRootPass}
                   value={rootPass}
                 />
@@ -194,9 +194,9 @@ function Derive ({ className = '', from, onClose }: Props): React.ReactElement {
                 {sourceStatic}
                 <Input
                   autoFocus
-                  label={t<string>('derivation path')}
+                  label={t('derivation path')}
                   onChange={setSuri}
-                  placeholder={t<string>('//hard/soft')}
+                  placeholder={t('//hard/soft')}
                 />
                 {deriveError && (
                   <MarkError content={deriveError} />
@@ -219,7 +219,7 @@ function Derive ({ className = '', from, onClose }: Props): React.ReactElement {
               icon='lock'
               isBusy={isBusy}
               isDisabled={!isRootValid}
-              label={t<string>('Unlock')}
+              label={t('Unlock')}
               onClick={_onUnlock}
             />
           )
@@ -228,13 +228,13 @@ function Derive ({ className = '', from, onClose }: Props): React.ReactElement {
               <>
                 <Button
                   icon='step-backward'
-                  label={t<string>('Prev')}
+                  label={t('Prev')}
                   onClick={toggleConfirmation}
                 />
                 <Button
                   icon='plus'
                   isBusy={isBusy}
-                  label={t<string>('Save')}
+                  label={t('Save')}
                   onClick={_onCommit}
                 />
               </>
@@ -243,7 +243,7 @@ function Derive ({ className = '', from, onClose }: Props): React.ReactElement {
               <Button
                 icon='step-forward'
                 isDisabled={!isValid}
-                label={t<string>('Next')}
+                label={t('Next')}
                 onClick={toggleConfirmation}
               />
             )

packages/page-accounts/src/modals/ExternalWarning.tsx

@@ -17,7 +17,7 @@ function ExternalWarning (): React.ReactElement | null {
   }
 
   return (
-    <MarkWarning content={<>{t<string>('Consider storing your account in a signer such as a browser extension, hardware device, QR-capable phone wallet (non-connected) or desktop application for optimal account security.')}&nbsp;{t<string>('Future versions of the web-only interface will drop support for non-external accounts, much like the IPFS version.')}</>} />
+    <MarkWarning content={<>{t('Consider storing your account in a signer such as a browser extension, hardware device, QR-capable phone wallet (non-connected) or desktop application for optimal account security.')}&nbsp;{t('Future versions of the web-only interface will drop support for non-external accounts, much like the IPFS version.')}</>} />
   );
 }
 

packages/page-accounts/src/modals/IdentityMain.tsx

@@ -147,117 +147,117 @@ function IdentityMain ({ address, className = '', onClose }: Props): React.React
   return (
     <Modal
       className={className}
-      header={t<string>('Register identity')}
+      header={t('Register identity')}
       onClose={onClose}
     >
       <Modal.Content>
         <Input
           autoFocus
           isError={!okDisplay}
-          label={t<string>('display name')}
+          label={t('display name')}
           maxLength={32}
           onChange={setValDisplay}
-          placeholder={t<string>('My On-Chain Name')}
+          placeholder={t('My On-Chain Name')}
           value={valDisplay}
         />
         <Input
           isDisabled={!hasLegal}
           isError={!okLegal}
-          label={t<string>('legal name')}
+          label={t('legal name')}
           labelExtra={
             <Toggle
-              label={t<string>('include field')}
+              label={t('include field')}
               onChange={setHasLegal}
               value={hasLegal}
             />
           }
           maxLength={32}
           onChange={setValLegal}
-          placeholder={t<string>('Full Legal Name')}
+          placeholder={t('Full Legal Name')}
           value={hasLegal ? valLegal : '<none>'}
         />
         <Input
           isDisabled={!hasEmail}
           isError={!okEmail}
-          label={t<string>('email')}
+          label={t('email')}
           labelExtra={
             <Toggle
-              label={t<string>('include field')}
+              label={t('include field')}
               onChange={setHasEmail}
               value={hasEmail}
             />
           }
           maxLength={32}
           onChange={setValEmail}
-          placeholder={t<string>('somebody@example.com')}
+          placeholder={t('somebody@example.com')}
           value={hasEmail ? valEmail : '<none>'}
         />
         <Input
           isDisabled={!hasWeb}
           isError={!okWeb}
-          label={t<string>('web')}
+          label={t('web')}
           labelExtra={
             <Toggle
-              label={t<string>('include field')}
+              label={t('include field')}
               onChange={setHasWeb}
               value={hasWeb}
             />
           }
           maxLength={32}
           onChange={setValWeb}
-          placeholder={t<string>('https://example.com')}
+          placeholder={t('https://example.com')}
           value={hasWeb ? valWeb : '<none>'}
         />
         <Input
           isDisabled={!hasTwitter}
           isError={!okTwitter}
-          label={t<string>('twitter')}
+          label={t('twitter')}
           labelExtra={
             <Toggle
-              label={t<string>('include field')}
+              label={t('include field')}
               onChange={setHasTwitter}
               value={hasTwitter}
             />
           }
           onChange={setValTwitter}
-          placeholder={t<string>('@YourTwitterName')}
+          placeholder={t('@YourTwitterName')}
           value={hasTwitter ? valTwitter : '<none>'}
         />
         <Input
           isDisabled={!hasDiscord}
           isError={!okDiscord}
-          label={t<string>('discord')}
+          label={t('discord')}
           labelExtra={
             <Toggle
-              label={t<string>('include field')}
+              label={t('include field')}
               onChange={setHasDiscord}
               value={hasDiscord}
             />
           }
           onChange={setValDiscord}
-          placeholder={t<string>('YourDiscordHandle')}
+          placeholder={t('YourDiscordHandle')}
           value={hasDiscord ? valDiscord : '<none>'}
         />
         <Input
           isDisabled={!hasRiot}
           isError={!okRiot}
-          label={t<string>('riot name')}
+          label={t('riot name')}
           labelExtra={
             <Toggle
-              label={t<string>('include field')}
+              label={t('include field')}
               onChange={setHasRiot}
               value={hasRiot}
             />
           }
           maxLength={32}
           onChange={setValRiot}
-          placeholder={t<string>('@yourname:matrix.org')}
+          placeholder={t('@yourname:matrix.org')}
           value={hasRiot ? valRiot : '<none>'}
         />
         <InputBalance
           defaultValue={api.consts.identity?.basicDeposit}
           isDisabled
-          label={t<string>('total deposit')}
+          label={t('total deposit')}
         />
       </Modal.Content>
       <Modal.Actions>
@@ -265,14 +265,14 @@ function IdentityMain ({ address, className = '', onClose }: Props): React.React
           accountId={address}
           icon={'trash-alt'}
           isDisabled={!gotPreviousIdentity}
-          label={t<string>('Clear Identity')}
+          label={t('Clear Identity')}
           onStart={onClose}
           tx={api.tx.identity.clearIdentity}
         />
         <TxButton
           accountId={address}
           isDisabled={!okAll}
-          label={t<string>('Set Identity')}
+          label={t('Set Identity')}
           onStart={onClose}
           params={[info]}
           tx={api.tx.identity.setIdentity}

packages/page-accounts/src/modals/IdentitySub.tsx

@@ -1,7 +1,6 @@
 // Copyright 2017-2023 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TFunction } from 'i18next';
 import type { Data, Option } from '@polkadot/types';
 import type { AccountId } from '@polkadot/types/interfaces';
 import type { ITuple } from '@polkadot/types/types';
@@ -26,7 +25,7 @@ interface SubProps {
   name: string;
   setAddress: (index: number, value: string) => void;
   setName: (index: number, value: string) => void;
-  t: TFunction;
+  t: (key: string, options?: { replace: Record<string, unknown> }) => string;
 }
 
 function extractInfo ([[ids], opts]: [[string[]], Option<ITuple<[AccountId, Data]>>[]]): [string, string][] {
@@ -61,7 +60,7 @@ function IdentitySub ({ address, index, name, setAddress, setName, t }: SubProps
       <Columar.Column>
         <InputAddress
           defaultValue={address}
-          label={t<string>('address {{index}}', { replace: { index: index + 1 } })}
+          label={t('address {{index}}', { replace: { index: index + 1 } })}
           onChange={_setAddress}
         />
       </Columar.Column>
@@ -70,7 +69,7 @@ function IdentitySub ({ address, index, name, setAddress, setName, t }: SubProps
           defaultValue={name}
           isError={!name}
           isFull
-          label={t<string>('sub name')}
+          label={t('sub name')}
           onChange={_setName}
         />
       </Columar.Column>
@@ -121,17 +120,17 @@ function IdentitySubModal ({ address, className, onClose }: Props): React.ReactE
   return (
     <Modal
       className={className}
-      header={t<string>('Register sub-identities')}
+      header={t('Register sub-identities')}
       onClose={onClose}
       size='large'
     >
       <Modal.Content>
         {!infos
-          ? <Spinner label={t<string>('Retrieving sub-identities')} />
+          ? <Spinner label={t('Retrieving sub-identities')} />
           : (
             <div>
               {!infos.length
-                ? <article>{t<string>('No sub identities set.')}</article>
+                ? <article>{t('No sub identities set.')}</article>
                 : infos.map(([address, name], index) =>
                   <IdentitySubMemo
                     address={address}
@@ -147,13 +146,13 @@ function IdentitySubModal ({ address, className, onClose }: Props): React.ReactE
               <Button.Group>
                 <Button
                   icon='plus'
-                  label={t<string>('Add sub')}
+                  label={t('Add sub')}
                   onClick={_rowAdd}
                 />
                 <Button
                   icon='minus'
                   isDisabled={infos.length === 0}
-                  label={t<string>('Remove sub')}
+                  label={t('Remove sub')}
                   onClick={_rowRemove}
                 />
               </Button.Group>
@@ -166,7 +165,7 @@ function IdentitySubModal ({ address, className, onClose }: Props): React.ReactE
           <TxButton
             accountId={address}
             isDisabled={infos.some(([address, raw]) => !address || !raw)}
-            label={t<string>('Set Subs')}
+            label={t('Set Subs')}
             onStart={onClose}
             params={[
               infos.map(([address, raw]) => [address, { raw }])

packages/page-accounts/src/modals/Import.tsx

@@ -84,7 +84,7 @@ function Import ({ className = '', onClose, onStatusChange }: Props): React.Reac
 
           status.status = 'success';
           status.account = pair.address;
-          status.message = t<string>('account restored');
+          status.message = t('account restored');
 
           InputAddress.setLastValue('account', pair.address);
         } catch (error) {
@@ -109,7 +109,7 @@ function Import ({ className = '', onClose, onStatusChange }: Props): React.Reac
   return (
     <Modal
       className={className}
-      header={t<string>('Add via backup file')}
+      header={t('Add via backup file')}
       onClose={onClose}
       size='large'
     >
@@ -121,22 +121,22 @@ function Import ({ className = '', onClose, onStatusChange }: Props): React.Reac
             value={pair?.address || null}
           />
         </Modal.Columns>
-        <Modal.Columns hint={t<string>('Supply a backed-up JSON file, encrypted with your account-specific password.')}>
+        <Modal.Columns hint={t('Supply a backed-up JSON file, encrypted with your account-specific password.')}>
           <InputFile
             accept={acceptedFormats}
             className='full'
             isError={!pair}
-            label={t<string>('backup file')}
+            label={t('backup file')}
             onChange={_onChangeFile}
             withLabel
           />
         </Modal.Columns>
-        <Modal.Columns hint={t<string>('The password previously used to encrypt this account.')}>
+        <Modal.Columns hint={t('The password previously used to encrypt this account.')}>
           <Password
             autoFocus
             className='full'
             isError={!isPassValid}
-            label={t<string>('password')}
+            label={t('password')}
             onChange={_onChangePass}
             onEnter={_onSave}
             value={password}
@@ -147,7 +147,7 @@ function Import ({ className = '', onClose, onStatusChange }: Props): React.Reac
             <MarkError content={error} />
           )}
           {differentGenesis && (
-            <MarkWarning content={t<string>('The network from which this account was originally generated is different than the network you are currently connected to. Once imported ensure you toggle the "allow on any network" option for the account to keep it visible on the current network.')} />
+            <MarkWarning content={t('The network from which this account was originally generated is different than the network you are currently connected to. Once imported ensure you toggle the "allow on any network" option for the account to keep it visible on the current network.')} />
           )}
           <ExternalWarning />
         </Modal.Columns>
@@ -157,7 +157,7 @@ function Import ({ className = '', onClose, onStatusChange }: Props): React.Reac
           icon='sync'
           isBusy={isBusy}
           isDisabled={!pair || !isPassValid}
-          label={t<string>('Restore')}
+          label={t('Restore')}
           onClick={_onSave}
         />
       </Modal.Actions>

packages/page-accounts/src/modals/InputValidateAmount.tsx

@@ -30,7 +30,7 @@ function ValidateAmount ({ amount, delegatingAccount, onError }: Props): React.R
       let newError: string | null = null;
 
       if (amount.gte(delegatingAccountBalance.freeBalance)) {
-        newError = t<string>('The maximum amount you can delegate is the amount of funds available on the delegating account.');
+        newError = t('The maximum amount you can delegate is the amount of funds available on the delegating account.');
       }
 
       setResult((state): AmountValidateState => {

packages/page-accounts/src/modals/Ledger.tsx

@@ -48,12 +48,12 @@ function LedgerModal ({ className, onClose }: Props): React.ReactElement<Props>
   const [isBusy, setIsBusy] = useState(false);
 
   const accOps = useRef(AVAIL_INDEXES.map((value): Option => ({
-    text: t<string>('Account type {{index}}', { replace: { index: value } }),
+    text: t('Account type {{index}}', { replace: { index: value } }),
     value
   })));
 
   const addOps = useRef(AVAIL_INDEXES.map((value): Option => ({
-    text: t<string>('Address index {{index}}', { replace: { index: value } }),
+    text: t('Address index {{index}}', { replace: { index: value } }),
     value
   })));
 
@@ -82,33 +82,33 @@ function LedgerModal ({ className, onClose }: Props): React.ReactElement<Props>
   return (
     <Modal
       className={className}
-      header={t<string>('Add account via Ledger')}
+      header={t('Add account via Ledger')}
       onClose={onClose}
       size='large'
     >
       <Modal.Content>
-        <Modal.Columns hint={t<string>('The name for this account as it will appear under your accounts.')}>
+        <Modal.Columns hint={t('The name for this account as it will appear under your accounts.')}>
           <Input
             autoFocus
             className='full'
             isError={!isNameValid}
-            label={t<string>('name')}
+            label={t('name')}
             onChange={_onChangeName}
-            placeholder={t<string>('account name')}
+            placeholder={t('account name')}
             value={name}
           />
         </Modal.Columns>
-        <Modal.Columns hint={t<string>('The account type that you wish to create. This is the top-level derivation.')}>
+        <Modal.Columns hint={t('The account type that you wish to create. This is the top-level derivation.')}>
           <Dropdown
-            label={t<string>('account type')}
+            label={t('account type')}
             onChange={setAccIndex}
             options={accOps.current}
             value={accIndex}
           />
         </Modal.Columns>
-        <Modal.Columns hint={t<string>('The address index on the account that you wish to add. This is the second-level derivation.')}>
+        <Modal.Columns hint={t('The address index on the account that you wish to add. This is the second-level derivation.')}>
           <Dropdown
-            label={t<string>('address index')}
+            label={t('address index')}
             onChange={setAddIndex}
             options={addOps.current}
             value={addIndex}
@@ -123,7 +123,7 @@ function LedgerModal ({ className, onClose }: Props): React.ReactElement<Props>
           icon='plus'
           isBusy={isBusy}
           isDisabled={!isNameValid}
-          label={t<string>('Save')}
+          label={t('Save')}
           onClick={_onSave}
         />
       </Modal.Actions>

packages/page-accounts/src/modals/MultisigApprove.tsx

@@ -62,8 +62,8 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold, who }:
   const [tx, setTx] = useState<SubmittableExtrinsic<'promise'> | null>(null);
 
   const callOptRef = useRef<Option[]>([
-    { text: t<string>('Approve this call hash'), value: 'aye' },
-    { text: t<string>('Cancel this call hash'), value: 'nay' }
+    { text: t('Approve this call hash'), value: 'aye' },
+    { text: t('Cancel this call hash'), value: 'nay' }
   ]);
 
   const hashes = useMemo<Option[]>(
@@ -165,14 +165,14 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold, who }:
   return (
     <StyledModal
       className={className}
-      header={t<string>('Pending call hashes')}
+      header={t('Pending call hashes')}
       onClose={onClose}
       size='large'
     >
       <Modal.Content>
-        <Modal.Columns hint={t<string>('The call hash from the list of available and unapproved calls.')}>
+        <Modal.Columns hint={t('The call hash from the list of available and unapproved calls.')}>
           <Dropdown
-            label={t<string>('pending hashes {{count}}', {
+            label={t('pending hashes {{count}}', {
               replace: { count: hashes.length }
             })}
             onChange={setHash}
@@ -182,17 +182,17 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold, who }:
         </Modal.Columns>
         {multisig && (
           <>
-            <Modal.Columns hint={t<string>('The creator for this multisig call')}>
+            <Modal.Columns hint={t('The creator for this multisig call')}>
               <InputAddress
                 defaultValue={multisig.depositor}
                 isDisabled
-                label={t<string>('depositor')}
+                label={t('depositor')}
               />
             </Modal.Columns>
-            <Modal.Columns hint={t<string>('The current approvals applied to this multisig')}>
+            <Modal.Columns hint={t('The current approvals applied to this multisig')}>
               <Expander
                 isPadded
-                summary={t<string>('Existing approvals ({{approvals}}/{{threshold}})', {
+                summary={t('Existing approvals ({{approvals}}/{{threshold}})', {
                   replace: {
                     approvals: multisig.approvals.length,
                     threshold
@@ -210,9 +210,9 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold, who }:
             </Modal.Columns>
           </>
         )}
-        <Modal.Columns hint={t<string>('The operation type to apply. For approvals both non-final and final approvals are supported.')}>
+        <Modal.Columns hint={t('The operation type to apply. For approvals both non-final and final approvals are supported.')}>
           <Dropdown
-            label={t<string>('approval type')}
+            label={t('approval type')}
             onChange={setType}
             options={callOptRef.current}
             value={type}
@@ -220,17 +220,17 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold, who }:
         </Modal.Columns>
         {whoFilter.length !== 0 && (
           <>
-            <Modal.Columns hint={t<string>('For approvals outstanding approvers will be shown, for hashes that should be cancelled the first approver is required.')}>
+            <Modal.Columns hint={t('For approvals outstanding approvers will be shown, for hashes that should be cancelled the first approver is required.')}>
               <InputAddress
                 filter={whoFilter}
-                label={t<string>('signatory')}
+                label={t('signatory')}
                 onChange={setSignatory}
               />
             </Modal.Columns>
             {type === 'aye' && isMultiCall && (
               <>
                 {isCallOverride && (
-                  <Modal.Columns hint={t<string>('The call data for this transaction matching the hash. Once sent, the multisig will be executed against this.')}>
+                  <Modal.Columns hint={t('The call data for this transaction matching the hash. Once sent, the multisig will be executed against this.')}>
                     {callData && callInfo
                       ? (
                         <Expander
@@ -248,7 +248,7 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold, who }:
                         <Input
                           autoFocus
                           isError={!callHex || !!callError}
-                          label={t<string>('call data for final approval')}
+                          label={t('call data for final approval')}
                           onChange={setCallHex}
                         />
                       )}
@@ -257,13 +257,13 @@ function MultisigApprove ({ className = '', onClose, ongoing, threshold, who }:
                     )}
                   </Modal.Columns>
                 )}
-                <Modal.Columns hint={t<string>('Swap to a non-executing approval type, with subsequent calls providing the actual call data.')}>
+                <Modal.Columns hint={t('Swap to a non-executing approval type, with subsequent calls providing the actual call data.')}>
                   <Toggle
                     className='tipToggle'
                     label={
                       isMultiCall
-                        ? t<string>('Multisig message with call (for final approval)')
-                        : t<string>('Multisig approval with hash (non-final approval)')
+                        ? t('Multisig message with call (for final approval)')
+                        : t('Multisig approval with hash (non-final approval)')
                     }
                     onChange={setCallOverride}
                     value={isCallOverride}

packages/page-accounts/src/modals/MultisigCreate.tsx

@@ -101,7 +101,7 @@ function Multisig ({ className = '', onClose, onStatusChange }: Props): React.Re
   const _createMultisig = useCallback(
     (): void => {
       const options = { genesisHash: isDevelopment ? undefined : api.genesisHash.toHex(), name: name.trim() };
-      const status = createMultisig(signatories, threshold, options, t<string>('created multisig'));
+      const status = createMultisig(signatories, threshold, options, t('created multisig'));
 
       onStatusChange(status);
       onClose();
@@ -157,7 +157,7 @@ function Multisig ({ className = '', onClose, onStatusChange }: Props): React.Re
   return (
     <StyledModal
       className={className}
-      header={t<string>('Add multisig')}
+      header={t('Add multisig')}
       onClose={onClose}
       size='large'
     >
@@ -165,7 +165,7 @@ function Multisig ({ className = '', onClose, onStatusChange }: Props): React.Re
         <Modal.Columns>
           <Toggle
             className='signaturesFileToggle'
-            label={t<string>('Upload JSON file with signatories')}
+            label={t('Upload JSON file with signatories')}
             onChange={setShowSignaturesUpload}
             value={showSignaturesUpload}
           />
@@ -174,38 +174,38 @@ function Multisig ({ className = '', onClose, onStatusChange }: Props): React.Re
           <Modal.Columns
             hint={
               <>
-                <p>{t<string>('The signatories has the ability to create transactions using the multisig and approve transactions sent by others.Once the threshold is reached with approvals, the multisig transaction is enacted on-chain.')}</p>
-                <p>{t<string>('Since the multisig function like any other account, once created it is available for selection anywhere accounts are used and needs to be funded before use.')}</p>
+                <p>{t('The signatories has the ability to create transactions using the multisig and approve transactions sent by others.Once the threshold is reached with approvals, the multisig transaction is enacted on-chain.')}</p>
+                <p>{t('Since the multisig function like any other account, once created it is available for selection anywhere accounts are used and needs to be funded before use.')}</p>
               </>
             }
           >
             <InputAddressMulti
               available={availableSignatories}
-              availableLabel={t<string>('available signatories')}
+              availableLabel={t('available signatories')}
               maxCount={MAX_SIGNATORIES}
               onChange={_onChangeAddressMulti}
-              valueLabel={t<string>('selected signatories')}
+              valueLabel={t('selected signatories')}
             />
           </Modal.Columns>
         )}
         {showSignaturesUpload && (
-          <Modal.Columns hint={t<string>('Supply a JSON file with the list of signatories.')}>
+          <Modal.Columns hint={t('Supply a JSON file with the list of signatories.')}>
             <InputFile
               accept={acceptedFormats}
               className='full'
               clearContent={!uploadedSignatories.length && isUploadedFileValid}
               isError={!isUploadedFileValid}
-              label={t<string>('upload signatories list')}
+              label={t('upload signatories list')}
               onChange={_onChangeFile}
               withLabel
             />
             {!!uploadedSignatories.length && (
               <Labelled
-                label={t<string>('found signatories')}
+                label={t('found signatories')}
                 labelExtra={(
                   <IconLink
                     icon='sync'
-                    label={t<string>('Reset')}
+                    label={t('Reset')}
                     onClick={resetFileUpload}
                   />
                 )}
@@ -227,22 +227,22 @@ function Multisig ({ className = '', onClose, onStatusChange }: Props): React.Re
             )}
           </Modal.Columns>
         )}
-        <Modal.Columns hint={t<string>('The threshold for approval should be less or equal to the number of signatories for this multisig.')}>
+        <Modal.Columns hint={t('The threshold for approval should be less or equal to the number of signatories for this multisig.')}>
           <InputNumber
             isError={!isThresholdValid}
-            label={t<string>('threshold')}
+            label={t('threshold')}
             onChange={_onChangeThreshold}
             value={threshold}
           />
         </Modal.Columns>
-        <Modal.Columns hint={t<string>('The name is for unique identification of the account in your owner lists.')}>
+        <Modal.Columns hint={t('The name is for unique identification of the account in your owner lists.')}>
           <Input
             autoFocus
             className='full'
             isError={!isNameValid}
-            label={t<string>('name')}
+            label={t('name')}
             onChange={_onChangeName}
-            placeholder={t<string>('multisig name')}
+            placeholder={t('multisig name')}
           />
         </Modal.Columns>
       </Modal.Content>
@@ -250,7 +250,7 @@ function Multisig ({ className = '', onClose, onStatusChange }: Props): React.Re
         <Button
           icon='plus'
           isDisabled={!isValid}
-          label={t<string>('Create')}
+          label={t('Create')}
           onClick={_createMultisig}
         />
       </Modal.Actions>

packages/page-accounts/src/modals/PasswordInput.tsx

@@ -49,15 +49,15 @@ export default function PasswordInput ({ onChange, onEnter }: Props): React.Reac
     <Modal.Columns
       hint={
         <>
-          <p>{t<string>('The password and password confirmation for this account. This is required to authenticate any transactions made and to encrypt the keypair.')}</p>
-          <p>{t<string>('Ensure you are using a strong password for proper account protection.')}</p>
+          <p>{t('The password and password confirmation for this account. This is required to authenticate any transactions made and to encrypt the keypair.')}</p>
+          <p>{t('Ensure you are using a strong password for proper account protection.')}</p>
         </>
       }
     >
       <Password
         className='full'
         isError={!isPass1Valid}
-        label={t<string>('password')}
+        label={t('password')}
         onChange={_onPassword1Change}
         onEnter={onEnter}
         value={password1}
@@ -65,7 +65,7 @@ export default function PasswordInput ({ onChange, onEnter }: Props): React.Reac
       <Password
         className='full'
         isError={!isPass2Valid}
-        label={t<string>('password (repeat)')}
+        label={t('password (repeat)')}
         onChange={onPassword2Change}
         onEnter={onEnter}
         value={password2}

packages/page-accounts/src/modals/ProxiedAdd.tsx

@@ -55,7 +55,7 @@ function ProxyAdd ({ className = '', onClose, onStatusChange }: Props): React.Re
     (): void => {
       if (stashAddress) {
         const options = { genesisHash: isDevelopment ? undefined : api.genesisHash.toHex(), name: name.trim() };
-        const status = createProxy(stashAddress, options, t<string>('added proxy'));
+        const status = createProxy(stashAddress, options, t('added proxy'));
 
         onStatusChange(status);
         onClose();
@@ -74,27 +74,27 @@ function ProxyAdd ({ className = '', onClose, onStatusChange }: Props): React.Re
   return (
     <Modal
       className={className}
-      header={t<string>('Add proxied account')}
+      header={t('Add proxied account')}
       onClose={onClose}
       size='large'
     >
       <Modal.Content>
-        <Modal.Columns hint={t<string>('The address that has previously setup a proxy to one of the accounts that you control.')}>
+        <Modal.Columns hint={t('The address that has previously setup a proxy to one of the accounts that you control.')}>
           <InputAddressSimple
             autoFocus
             isError={!proxyInfo || proxyInfo.isEmpty}
-            label={t<string>('proxied account')}
+            label={t('proxied account')}
             onChange={setStashAddress}
-            placeholder={t<string>('address being proxied')}
+            placeholder={t('address being proxied')}
           />
         </Modal.Columns>
-        <Modal.Columns hint={t<string>('The name is for unique identification of the account in your owner lists.')}>
+        <Modal.Columns hint={t('The name is for unique identification of the account in your owner lists.')}>
           <Input
             className='full'
             isError={!isNameValid}
-            label={t<string>('name')}
+            label={t('name')}
             onChange={_onChangeName}
-            placeholder={t<string>('proxied name')}
+            placeholder={t('proxied name')}
           />
         </Modal.Columns>
       </Modal.Content>
@@ -102,7 +102,7 @@ function ProxyAdd ({ className = '', onClose, onStatusChange }: Props): React.Re
         <Button
           icon='plus'
           isDisabled={!isValid}
-          label={t<string>('Add')}
+          label={t('Add')}
           onClick={_createProxied}
         />
       </Modal.Actions>

packages/page-accounts/src/modals/ProxyOverview.tsx

@@ -77,7 +77,7 @@ function PrevProxy ({ index, onRemove, typeOpts, value: [accountId, type] }: Pre
         <InputAddress
           defaultValue={accountId}
           isDisabled
-          label={t<string>('proxy account')}
+          label={t('proxy account')}
         />
         <Dropdown
           isDisabled
@@ -122,13 +122,13 @@ function NewProxy ({ index, onChangeAccount, onChangeType, onRemove, proxiedAcco
       <div className='input-column'>
         <InputAddress
           isError={!accountId}
-          label={t<string>('proxy account')}
+          label={t('proxy account')}
           onChange={_onChangeAccount}
           type='account'
           value={accountId}
         />
         {accountId && accountId.eq(proxiedAccount) && (
-          <MarkError content={t<string>('You should not setup proxies to act as a self-proxy.')} />
+          <MarkError content={t('You should not setup proxies to act as a self-proxy.')} />
         )}
         <Dropdown
           label={'type'}
@@ -250,20 +250,20 @@ function ProxyOverview ({ className, onClose, previousProxy: [existing] = EMPTY_
   return (
     <StyledModal
       className={className}
-      header={t<string>('Proxy overview')}
+      header={t('Proxy overview')}
       onClose={onClose}
       size='large'
     >
       <Modal.Content>
-        <Modal.Columns hint={t<string>('Any account set as proxy will be able to perform actions in place of the proxied account')}>
+        <Modal.Columns hint={t('Any account set as proxy will be able to perform actions in place of the proxied account')}>
           <InputAddress
             isDisabled={true}
-            label={t<string>('proxied account')}
+            label={t('proxied account')}
             type='account'
             value={proxiedAccount}
           />
         </Modal.Columns>
-        <Modal.Columns hint={t<string>('If you add several proxy accounts for the same proxy type (e.g 2 accounts set as proxy for Governance), then any of those 2 accounts will be able to perform governance actions on behalf of the proxied account')}>
+        <Modal.Columns hint={t('If you add several proxy accounts for the same proxy type (e.g 2 accounts set as proxy for Governance), then any of those 2 accounts will be able to perform governance actions on behalf of the proxied account')}>
           {previous.map((value, index) => (
             <PrevProxy
               index={index}
@@ -288,16 +288,16 @@ function ProxyOverview ({ className, onClose, previousProxy: [existing] = EMPTY_
           <Button.Group>
             <Button
               icon='plus'
-              label={t<string>('Add proxy')}
+              label={t('Add proxy')}
               onClick={_addProxy}
             />
           </Button.Group>
         </Modal.Columns>
-        <Modal.Columns hint={t<string>('A deposit paid by the proxied account that can not be used while the proxy is in existence. The deposit is returned when the proxy is destroyed. The amount reserved is based on the base deposit and number of proxies')}>
+        <Modal.Columns hint={t('A deposit paid by the proxied account that can not be used while the proxy is in existence. The deposit is returned when the proxy is destroyed. The amount reserved is based on the base deposit and number of proxies')}>
           <InputBalance
             defaultValue={reservedAmount}
             isDisabled
-            label={t<string>('reserved balance')}
+            label={t('reserved balance')}
           />
         </Modal.Columns>
         <Modal.Columns>
@@ -309,7 +309,7 @@ function ProxyOverview ({ className, onClose, previousProxy: [existing] = EMPTY_
           <TxButton
             accountId={proxiedAccount}
             icon='trash-alt'
-            label={t<string>('Clear all')}
+            label={t('Clear all')}
             onStart={onClose}
             tx={api.tx.proxy.removeProxies}
           />

packages/page-accounts/src/modals/Qr.tsx

@@ -108,7 +108,7 @@ function QrModal ({ className = '', onClose, onStatusChange }: Props): React.Rea
       onStatusChange({
         account,
         action: 'create',
-        message: t<string>('created account'),
+        message: t('created account'),
         status: 'success'
       });
       onClose();
@@ -119,7 +119,7 @@ function QrModal ({ className = '', onClose, onStatusChange }: Props): React.Rea
   return (
     <StyledModal
       className={className}
-      header={t<string>('Add account via Qr')}
+      header={t('Add account via Qr')}
       onClose={onClose}
       size='large'
     >
@@ -134,18 +134,18 @@ function QrModal ({ className = '', onClose, onStatusChange }: Props): React.Rea
                   value={scanned.content}
                 />
               </Modal.Columns>
-              <Modal.Columns hint={t<string>('The local name for this account. Changing this does not affect your on-line identity, so this is only used to indicate the name of the account locally.')}>
+              <Modal.Columns hint={t('The local name for this account. Changing this does not affect your on-line identity, so this is only used to indicate the name of the account locally.')}>
                 <Input
                   autoFocus
                   className='full'
                   isError={!isNameValid}
-                  label={t<string>('name')}
+                  label={t('name')}
                   onChange={_onNameChange}
                   onEnter={_onSave}
                   value={name}
                 />
                 {scannedGenesisWarn && (
-                  <MarkWarning content={t<string>('The genesisHash for the scanned account does not match the genesisHash of the connected chain. The account will not be usable on this chain.')} />
+                  <MarkWarning content={t('The genesisHash for the scanned account does not match the genesisHash of the connected chain. The account will not be usable on this chain.')} />
                 )}
               </Modal.Columns>
               {!isAddress && (
@@ -157,7 +157,7 @@ function QrModal ({ className = '', onClose, onStatusChange }: Props): React.Rea
             </>
           )
           : (
-            <Modal.Columns hint={t<string>('Provide the account QR from the module/external application for scanning. Once detected as valid, you will be taken to the next step to add the account to your list.')}>
+            <Modal.Columns hint={t('Provide the account QR from the module/external application for scanning. Once detected as valid, you will be taken to the next step to add the account to your list.')}>
               <div className='qr-wrapper'>
                 <QrScanAddress
                   isEthereum={isEthereum}
@@ -174,7 +174,7 @@ function QrModal ({ className = '', onClose, onStatusChange }: Props): React.Rea
         <Button
           icon='plus'
           isDisabled={!scanned || !isValid || (!isAddress && isIpfs)}
-          label={t<string>('Save')}
+          label={t('Save')}
           onClick={_onSave}
         />
       </Modal.Actions>

packages/page-accounts/src/modals/RecoverAccount.tsx

@@ -22,17 +22,17 @@ function RecoverAccount ({ address, className = '', onClose }: Props): React.Rea
   return (
     <Modal
       className={className}
-      header={t<string>('Initiate account recovery')}
+      header={t('Initiate account recovery')}
       onClose={onClose}
     >
       <Modal.Content>
         <InputAddress
           isDisabled
-          label={t<string>('the account to recover to')}
+          label={t('the account to recover to')}
           value={address}
         />
         <InputAddress
-          label={t<string>('recover this account')}
+          label={t('recover this account')}
           onChange={setRecover}
           type='allPlus'
         />
@@ -42,7 +42,7 @@ function RecoverAccount ({ address, className = '', onClose }: Props): React.Rea
           accountId={address}
           icon='recycle'
           isDisabled={!recover || recover === address}
-          label={t<string>('Start recovery')}
+          label={t('Start recovery')}
           onStart={onClose}
           params={[recover]}
           tx={api.tx.recovery.initiateRecovery}

packages/page-accounts/src/modals/RecoverSetup.tsx

@@ -35,44 +35,44 @@ function RecoverSetup ({ address, className = '', onClose }: Props): React.React
   return (
     <Modal
       className={className}
-      header={t<string>('Setup account as recoverable')}
+      header={t('Setup account as recoverable')}
       onClose={onClose}
       size='large'
     >
       <Modal.Content>
-        <Modal.Columns hint={t<string>('The recoverable account is protected against the loss of seed/access by a social process.')}>
+        <Modal.Columns hint={t('The recoverable account is protected against the loss of seed/access by a social process.')}>
           <InputAddress
             isDisabled
-            label={t<string>('the account to make recoverable')}
+            label={t('the account to make recoverable')}
             value={address}
           />
         </Modal.Columns>
         <Modal.Columns
           hint={
             <>
-              <p>{t<string>('These are trusted individuals that can verify and approve any recovery actions. With recovery, once the threshold is reached, the funds associated with the account can be moved to a new destination.')}</p>
-              <p>{t<string>('The helpers should be able to verify, via an off-chain mechanism, that the account owner indeed wishes to recover access and as such provide any approvals. In the cases of malicious recovery procedures, they will have the power to stop it.')}</p>
+              <p>{t('These are trusted individuals that can verify and approve any recovery actions. With recovery, once the threshold is reached, the funds associated with the account can be moved to a new destination.')}</p>
+              <p>{t('The helpers should be able to verify, via an off-chain mechanism, that the account owner indeed wishes to recover access and as such provide any approvals. In the cases of malicious recovery procedures, they will have the power to stop it.')}</p>
             </>
           }
         >
           <InputAddressMulti
             available={availableHelpers}
-            availableLabel={t<string>('available social recovery helpers')}
+            availableLabel={t('available social recovery helpers')}
             maxCount={MAX_HELPERS}
             onChange={setHelpers}
-            valueLabel={t<string>('trusted social recovery helpers')}
+            valueLabel={t('trusted social recovery helpers')}
           />
         </Modal.Columns>
-        <Modal.Columns hint={t<string>('The threshold for approvals and the delay is the protection associated with the account. The delay should be such that any colluding recovery attempts does have a window to stop.')}>
+        <Modal.Columns hint={t('The threshold for approvals and the delay is the protection associated with the account. The delay should be such that any colluding recovery attempts does have a window to stop.')}>
           <InputNumber
             isError={isErrorThreshold}
-            label={t<string>('recovery threshold')}
+            label={t('recovery threshold')}
             onChange={setThreshold}
           />
           <InputNumber
             isError={isErrorDelay}
             isZeroable
-            label={t<string>('recovery block delay')}
+            label={t('recovery block delay')}
             onChange={setDelay}
           />
         </Modal.Columns>
@@ -82,7 +82,7 @@ function RecoverSetup ({ address, className = '', onClose }: Props): React.React
           accountId={address}
           icon='share-alt'
           isDisabled={isErrorHelpers || isErrorThreshold || isErrorDelay}
-          label={t<string>('Make recoverable')}
+          label={t('Make recoverable')}
           onStart={onClose}
           params={[sortAddresses(helpers), threshold, delay]}
           tx={api.tx.recovery.createRecovery}

packages/page-accounts/src/modals/Undelegate.tsx

@@ -20,16 +20,16 @@ function Undelegate ({ accountDelegating, onClose }: Props): React.ReactElement<
   return (
     <Modal
       className='staking--Undelegate'
-      header= {t<string>('Undelegate')}
+      header= {t('Undelegate')}
       onClose={onClose}
       size='large'
     >
       <Modal.Content>
-        <Modal.Columns hint={t<string>('You will remove any delegation made by this acccount')}>
+        <Modal.Columns hint={t('You will remove any delegation made by this acccount')}>
           <InputAddress
             defaultValue={accountDelegating}
             isDisabled
-            label={t<string>('delegating account')}
+            label={t('delegating account')}
           />
         </Modal.Columns>
       </Modal.Content>
@@ -37,7 +37,7 @@ function Undelegate ({ accountDelegating, onClose }: Props): React.ReactElement<
         <TxButton
           accountId={accountDelegating}
           icon='sign-in-alt'
-          label={t<string>('Undelegate')}
+          label={t('Undelegate')}
           onStart={onClose}
           tx={api.tx.democracy.undelegate}
         />

packages/page-accounts/src/translate.ts

@@ -1,10 +1,8 @@
 // Copyright 2017-2023 @polkadot/app-accounts authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { UseTranslationResponse } from 'react-i18next';
-
 import { useTranslation as useTranslationBase } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse<'app-accounts', undefined> {
+export function useTranslation (): { t: (key: string, options?: { replace: Record<string, unknown> }) => string } {
   return useTranslationBase('app-accounts');
 }

packages/page-addresses/src/Contacts/Address.tsx

@@ -141,7 +141,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
         try {
           keyring.forgetAddress(address);
           status.status = 'success';
-          status.message = t<string>('address forgotten');
+          status.message = t('address forgotten');
         } catch (error) {
           status.status = 'error';
           status.message = (error as Error).message;
@@ -159,7 +159,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
     <Menu>
       <Menu.Item
         isDisabled={!isEditable}
-        label={t<string>('Forget this address')}
+        label={t('Forget this address')}
         onClick={_toggleForget}
       />
       {isEditable && !api.isDevelopment && (
@@ -216,7 +216,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
                 className='send-button'
                 icon='paper-plane'
                 key='send'
-                label={t<string>('send')}
+                label={t('send')}
                 onClick={_toggleTransfer}
               />
             )}

packages/page-addresses/src/Contacts/index.tsx

@@ -31,7 +31,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
   const isNextTick = useNextTick();
 
   const headerRef = useRef<([React.ReactNode?, string?, number?] | false)[]>([
-    [t<string>('contacts'), 'start', 4]
+    [t('contacts'), 'start', 4]
   ]);
 
   useEffect((): void => {
@@ -61,20 +61,20 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
           <FilterInput
             className='media--1000'
             filterOn={filterOn}
-            label={t<string>('filter by name or tags')}
+            label={t('filter by name or tags')}
             setFilter={setFilter}
           />
         </section>
         <Button.Group>
           <Button
             icon='plus'
-            label={t<string>('Add contact')}
+            label={t('Add contact')}
             onClick={toggleCreate}
           />
         </Button.Group>
       </SummaryBox>
       <Table
-        empty={isNextTick && sortedAddresses && t<string>('no addresses saved yet, add any existing address')}
+        empty={isNextTick && sortedAddresses && t('no addresses saved yet, add any existing address')}
         header={headerRef.current}
         isSplit
       >

packages/page-addresses/src/index.tsx

@@ -18,7 +18,7 @@ function AddressesApp ({ basePath, onStatusChange }: Props): React.ReactElement<
     {
       isRoot: true,
       name: 'contacts',
-      text: t<string>('My contacts')
+      text: t('My contacts')
     }
   ]);
 

packages/page-addresses/src/modals/Create.tsx

@@ -98,8 +98,8 @@ function Create ({ onClose, onStatusChange }: Props): React.ReactElement<Props>
         status.account = address;
         status.status = address ? 'success' : 'error';
         status.message = isAddressExisting
-          ? t<string>('address edited')
-          : t<string>('address created');
+          ? t('address edited')
+          : t('address created');
 
         InputAddress.setLastValue('address', address);
       } catch (error) {
@@ -115,7 +115,7 @@ function Create ({ onClose, onStatusChange }: Props): React.ReactElement<Props>
 
   return (
     <Modal
-      header={t<string>('Add an address')}
+      header={t('Add an address')}
       onClose={onClose}
     >
       <Modal.Content>
@@ -132,16 +132,16 @@ function Create ({ onClose, onStatusChange }: Props): React.ReactElement<Props>
             autoFocus
             className='full'
             isError={!isAddressValid}
-            label={t<string>('address')}
+            label={t('address')}
             onChange={_onChangeAddress}
             onEnter={_onCommit}
-            placeholder={t<string>('new address')}
+            placeholder={t('new address')}
             value={addressInput}
           />
           <Input
             className='full'
             isError={!isNameValid}
-            label={t<string>('name')}
+            label={t('name')}
             onChange={_onChangeName}
             onEnter={_onCommit}
             value={name}
@@ -152,7 +152,7 @@ function Create ({ onClose, onStatusChange }: Props): React.ReactElement<Props>
         <Button
           icon='save'
           isDisabled={!isValid}
-          label={t<string>('Save')}
+          label={t('Save')}
           onClick={_onCommit}
         />
       </Modal.Actions>

packages/page-addresses/src/translate.ts

@@ -1,10 +1,8 @@
 // Copyright 2017-2023 @polkadot/app-addresses authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { UseTranslationResponse } from 'react-i18next';
-
 import { useTranslation as useTranslationBase } from 'react-i18next';
 
-export function useTranslation (): UseTranslationResponse<'app-addresses', undefined> {
+export function useTranslation (): { t: (key: string, options?: { replace: Record<string, unknown> }) => string } {
   return useTranslationBase('app-addresses');
 }

packages/page-alliance/src/Announcements/index.tsx

@@ -19,16 +19,16 @@ function Announcements ({ accouncements, className }: Props): React.ReactElement
   const { t } = useTranslation();
 
   const annRef = useRef<([React.ReactNode?, string?, number?] | false)[]>([
-    [t<string>('annoucements'), 'start'],
-    [t<string>('version'), 'number'],
-    [t<string>('codec'), 'number'],
-    [t<string>('code'), 'number']
+    [t('annoucements'), 'start'],
+    [t('version'), 'number'],
+    [t('codec'), 'number'],
+    [t('code'), 'number']
   ]);
 
   return (
     <div className={className}>
       <Table
-        empty={accouncements && t<string>('No annoucements')}
+        empty={accouncements && t('No annoucements')}
         header={annRef.current}
       >
         {accouncements && accouncements.map((a) => (

packages/page-alliance/src/Members/Join.tsx

@@ -39,24 +39,24 @@ function Join ({ className, members, onClose, unscrupulous: { accounts } }: Prop
   return (
     <Modal
       className={className}
-      header={t<string>('Join alliance')}
+      header={t('Join alliance')}
       onClose={onClose}
       size='large'
     >
       <Modal.Content>
-        <Modal.Columns hint={t<string>('This account will be submitted to join the aliance. It will be allocated one of the alliance roles upon joining, starting with Ally.')}>
+        <Modal.Columns hint={t('This account will be submitted to join the aliance. It will be allocated one of the alliance roles upon joining, starting with Ally.')}>
           <InputAddress
             filter={available}
-            label={t<string>('alliance account')}
+            label={t('alliance account')}
             onChange={setAccountId}
             type='account'
           />
         </Modal.Columns>
-        <Modal.Columns hint={t<string>('The bond will be reserved for the duration of your alliance membership.')}>
+        <Modal.Columns hint={t('The bond will be reserved for the duration of your alliance membership.')}>
           <InputBalance
             defaultValue={api.consts.alliance.allyDeposit}
             isDisabled
-            label={t<string>('alliance deposit')}
+            label={t('alliance deposit')}
           />
         </Modal.Columns>
       </Modal.Content>