Fixup sidebar translation (#2096)

* Fixup sidebar translation

* Update transaltion extraction

i18next-scanner.config.js

@@ -40,6 +40,7 @@ module.exports = {
       'app-staking',
       'app-storage',
       'app-sudo',
+      'app-tech-comm',
       'app-toolbox',
       'app-transfer',
       'app-treasury',

packages/app-tech-comm/src/index.tsx

@@ -36,7 +36,7 @@ function TechCommApp ({ basePath, className, t }: Props): React.ReactElement<Pro
             },
             {
               name: 'proposals',
-              text: t('Proposals ({{count}})', { replace: { count: proposals?.length || 0 } })
+              text: t('Proposals ({{count}})', { replace: { count: (proposals && proposals.length) || 0 } })
             }
           ]}
         />

packages/apps/public/locales/en/app-tech-comm.json

@@ -1 +1,19 @@
-{}
+{
+  "Tech. committee": "Tech. committee",
+  "Proposals ({{count}})": "Proposals ({{count}})",
+  "No members found": "No members found",
+  "members": "members",
+  "proposals": "proposals",
+  "total": "total",
+  "Submit proposal": "Submit proposal",
+  "No committee proposals": "No committee proposals",
+  "threshold": "threshold",
+  "Aye": "Aye",
+  "Nay": "Nay",
+  "Propose a committee motion": "Propose a committee motion",
+  "The minimum number of committee votes required to approve this motion": "The minimum number of committee votes required to approve this motion",
+  "Positive number between 1 and {{memberCount}}": "Positive number between 1 and {{memberCount}}",
+  "proposal": "proposal",
+  "Vote on proposal": "Vote on proposal",
+  "Vote": "Vote"
+}

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

@@ -8,5 +8,8 @@
   "Waiting for authorization from the extension. Please open the installed extension and approve or reject access.": "Waiting for authorization from the extension. Please open the installed extension and approve or reject access.",
   "You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.": "You are not connected to a node. Ensure that your node is running and that the Websocket endpoint is reachable.",
   "With the Firefox browser connecting to insecure WebSockets ({{wsUrl}}) will fail due to the browser not allowing localhost access from a secure site.": "With the Firefox browser connecting to insecure WebSockets ({{wsUrl}}) will fail due to the browser not allowing localhost access from a secure site.",
-  "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.": "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."
+  "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.": "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.",
+  "version {{version}}": "version {{version}}",
+  "GitHub": "GitHub",
+  "Wiki": "Wiki"
 }

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

@@ -775,5 +775,8 @@
   "The unapplied slashed era to cancel.": "",
   "the era to cancel for": "",
   "no unapplied slashes found": "",
-  "Revert": ""
+  "Revert": "",
+  "version {{version}}": "",
+  "GitHub": "",
+  "Wiki": ""
 }

packages/apps/src/SideBar/index.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { RuntimeVersion } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
 import { SIDEBAR_MENU_THRESHOLD } from '../constants';
 
 import './SideBar.css';
@@ -17,12 +16,12 @@ import { useCall, useApi } from '@polkadot/react-hooks';
 import { classes } from '@polkadot/react-components/util';
 import { BestNumber, Chain } from '@polkadot/react-query';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import Item from './Item';
 import NodeInfo from './NodeInfo';
 import NetworkModal from '../modals/Network';
 
-interface Props extends I18nProps {
+interface Props {
   className?: string;
   collapse: () => void;
   handleResize: () => void;
@@ -32,6 +31,7 @@ interface Props extends I18nProps {
 }
 
 function SideBar ({ className, collapse, handleResize, isCollapsed, toggleMenu, menuOpen }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { api } = useApi();
   const runtimeVersion = useCall<RuntimeVersion>(api.rpc.state.subscribeRuntimeVersion, []);
   const [modals, setModals] = useState<Record<string, boolean>>(
@@ -85,7 +85,7 @@ function SideBar ({ className, collapse, handleResize, isCollapsed, toggleMenu,
               <div className='info'>
                 <Chain className='chain' />
                 {runtimeVersion && (
-                  <div className='runtimeVersion'>版本 {runtimeVersion.specVersion.toNumber()}</div>
+                  <div className='runtimeVersion'>{t('version {{version}}', { replace: { version: runtimeVersion.specVersion.toNumber() } })}</div>
                 )}
                 <BestNumber label='#' />
               </div>
@@ -119,7 +119,7 @@ function SideBar ({ className, collapse, handleResize, isCollapsed, toggleMenu,
                 rel='noopener noreferrer'
                 target='_blank'
               >
-                <Icon name='github' /><span className='text'>GitHub</span>
+                <Icon name='github' /><span className='text'>{t('GitHub')}</span>
               </a>
             </Menu.Item>
             <Menu.Item className='apps--SideBar-Item'>
@@ -129,7 +129,7 @@ function SideBar ({ className, collapse, handleResize, isCollapsed, toggleMenu,
                 rel='noopener noreferrer'
                 target='_blank'
               >
-                <Icon name='book' /><span className='text'>Wiki</span>
+                <Icon name='book' /><span className='text'>{t('Wiki')}</span>
               </a>
             </Menu.Item>
             <Menu.Divider hidden />
@@ -162,31 +162,29 @@ function SideBar ({ className, collapse, handleResize, isCollapsed, toggleMenu,
   );
 }
 
-export default translate(
-  styled(SideBar)`
-    .toggleImg {
-      cursor: pointer;
-      height: 2.75rem;
-      left: 0.9rem;
-      opacity: 0;
-      position: absolute;
-      top: 0px;
-      transition: opacity 0.2s ease-in, top 0.2s ease-in;
-      width: 2.75rem;
+export default styled(SideBar)`
+  .toggleImg {
+    cursor: pointer;
+    height: 2.75rem;
+    left: 0.9rem;
+    opacity: 0;
+    position: absolute;
+    top: 0px;
+    transition: opacity 0.2s ease-in, top 0.2s ease-in;
+    width: 2.75rem;
 
-      &.delayed {
-        transition-delay: 0.4s;
-      }
-
-      &.open {
-        opacity: 1;
-        top: 0.9rem;
-      }
+    &.delayed {
+      transition-delay: 0.4s;
+    }
 
-      ${media.DESKTOP`
-        opacity: 0 !important;
-        top: -2.9rem !important;
-      `}
+    &.open {
+      opacity: 1;
+      top: 0.9rem;
     }
-  `
-);
+
+    ${media.DESKTOP`
+      opacity: 0 !important;
+      top: -2.9rem !important;
+    `}
+  }
+`;