Move extensions to apps-config (#2426)

* Move extensions to apps-config

* apps-config

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

@@ -0,0 +1,31 @@
+// Copyright 2017-2020 @polkadot/apps-config authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+// it would have been really good to import this from detect, however... not exported
+type Browser = 'chrome' | 'firefox';
+
+interface Extension {
+  desc: string;
+  link: string;
+  name: string;
+}
+
+const availableExtensions: Record<Browser, Extension[]> = [
+  {
+    browsers: {
+      chrome: 'https://chrome.google.com/webstore/detail/polkadot%7Bjs%7D-extension/mopnmbcafieddcagagdcbnhejhlodfdd',
+      firefox: 'https://addons.mozilla.org/en-US/firefox/addon/polkadot-js-extension/'
+    },
+    desc: 'Basic account injection and signer',
+    name: 'polkadot-js extension'
+  }
+].reduce((available: Record<Browser, Extension[]>, { browsers, desc, name }): Record<Browser, Extension[]> => {
+  Object.entries(browsers).forEach(([browser, link]): void => {
+    available[browser as 'chrome'].push({ link, desc, name });
+  });
+
+  return available;
+}, { chrome: [], firefox: [] });
+
+export { availableExtensions };

packages/page-accounts/src/Banner.tsx

@@ -5,6 +5,7 @@
 import { detect } from 'detect-browser';
 import React from 'react';
 import styled from 'styled-components';
+import { availableExtensions } from '@polkadot/apps-config/extensions';
 import { isWeb3Injected } from '@polkadot/extension-dapp';
 import { stringUpperFirst } from '@polkadot/util';
 
@@ -13,39 +14,13 @@ import { useTranslation } from './translate';
 // it would have been really good to import this from detect, however... not exported
 type Browser = 'chrome' | 'firefox';
 
-interface Extension {
-  desc: string;
-  link: string;
-  name: string;
-}
-
 interface Props {
   className?: string;
 }
 
-const available: Record<Browser, Extension[]> = {
-  chrome: [],
-  firefox: []
-};
-
-[
-  {
-    browsers: {
-      chrome: 'https://chrome.google.com/webstore/detail/polkadot%7Bjs%7D-extension/mopnmbcafieddcagagdcbnhejhlodfdd',
-      firefox: 'https://addons.mozilla.org/en-US/firefox/addon/polkadot-js-extension/'
-    },
-    desc: 'Basic account injection and signer',
-    name: 'polkadot-js extension'
-  }
-].forEach(({ browsers, desc, name }): void => {
-  Object.entries(browsers).forEach(([browser, link]): void => {
-    available[browser as Browser].push({ link, desc, name });
-  });
-});
-
 const browserInfo = detect();
 const browserName: Browser | null = (browserInfo && (browserInfo.name as Browser)) || null;
-const isSupported = browserName && Object.keys(available).includes(browserName);
+const isSupported = browserName && Object.keys(availableExtensions).includes(browserName);
 
 function Banner ({ className }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
@@ -63,7 +38,7 @@ function Banner ({ className }: Props): React.ReactElement<Props> | null {
               yourBrowser: stringUpperFirst(browserName)
             }
           })}</p>
-          <ul>{available[browserName].map(({ desc, name, link }): React.ReactNode => (
+          <ul>{availableExtensions[browserName].map(({ desc, name, link }): React.ReactNode => (
             <li key={name}>
               <a
                 href={link}
@@ -71,7 +46,7 @@ function Banner ({ className }: Props): React.ReactElement<Props> | null {
                 target='_blank'
               >
                 {name}
-              </a> ({desc})
+              </a> ({t(desc)})
             </li>
           ))
           }</ul>

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

@@ -4,7 +4,7 @@
 
 import { BareProps } from '@polkadot/react-components/types';
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button, IdentityIcon } from '@polkadot/react-components';
 import { u8aToHex } from '@polkadot/util';
@@ -20,8 +20,15 @@ interface Props extends BareProps {
 
 function Match ({ address, className, count, offset, onCreateToggle, onRemove, seed }: Props): React.ReactElement<Props> {
   const [hexSeed, setHexSeed] = useState('');
-  const _onCreate = (): void => onCreateToggle(hexSeed);
-  const _onRemove = (): void => onRemove(address);
+
+  const _onCreate = useCallback(
+    (): void => onCreateToggle(hexSeed),
+    [hexSeed]
+  );
+  const _onRemove = useCallback(
+    (): void => onRemove(address),
+    [address]
+  );
 
   useEffect((): void => {
     setHexSeed(u8aToHex(seed));

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

@@ -13,11 +13,11 @@ import { Button, Dropdown, Input, TxComponent } from '@polkadot/react-components
 import uiSettings from '@polkadot/ui-settings';
 
 import CreateModal from '../modals/Create';
+import translate from '../translate';
 import generator from '../vanitygen';
 import matchRegex from '../vanitygen/regex';
 import generatorSort from '../vanitygen/sort';
 import Match from './Match';
-import translate from './translate';
 
 interface Props extends ComponentProps, I18nProps {}
 
@@ -101,7 +101,6 @@ class VanityApp extends TxComponent<Props, State> {
               : 'sign-in'
           }
           isDisabled={!isMatchValid}
-          isPrimary={!isRunning}
           onClick={this.toggleStart}
           label={
             isRunning

packages/page-accounts/src/Vanity/translate.ts

@@ -1,7 +0,0 @@
-// Copyright 2017-2020 @polkadot/app-accounts authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { withTranslation } from 'react-i18next';
-
-export default withTranslation(['app-accounts']);