From 699af2f413fe29149acc5200eae94e441553f4eb Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Thu, 18 Jul 2019 10:22:15 +0200 Subject: [PATCH] Show banner to prompt extension install (#1414) * Show banner to prompt extension install * Updated, slightly better looking * Update packages/app-accounts/src/Banner.tsx Co-Authored-By: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * trim * Full bar, limited text width --- package.json | 12 +- packages/app-accounts/package.json | 1 + packages/app-accounts/src/Banner.tsx | 105 ++++++++++ packages/app-accounts/src/Overview.tsx | 2 + .../app-accounts/src/vanitygen/calculate.ts | 5 +- packages/app-contracts/package.json | 2 +- packages/apps/package.json | 2 +- packages/ui-api/package.json | 4 +- packages/ui-app/package.json | 8 +- packages/ui-app/src/CardGrid.tsx | 19 +- packages/ui-app/src/Collection.tsx | 4 +- yarn.lock | 187 +++++++++--------- 12 files changed, 233 insertions(+), 118 deletions(-) create mode 100644 packages/app-accounts/src/Banner.tsx diff --git a/package.json b/package.json index ae9dd2ab9e..a941acc60e 100644 --- a/package.json +++ b/package.json @@ -10,12 +10,12 @@ "packages/*" ], "resolutions": { - "@polkadot/api": "^0.82.0-beta.67", - "@polkadot/api-contract": "^0.82.0-beta.67", - "@polkadot/keyring": "^0.94.0-beta.12", - "@polkadot/types": "^0.82.0-beta.67", - "@polkadot/util": "^0.94.0-beta.12", - "@polkadot/util-crypto": "^0.94.0-beta.12", + "@polkadot/api": "^0.82.0-beta.68", + "@polkadot/api-contract": "^0.82.0-beta.68", + "@polkadot/keyring": "^0.94.0-beta.14", + "@polkadot/types": "^0.82.0-beta.68", + "@polkadot/util": "^0.94.0-beta.14", + "@polkadot/util-crypto": "^0.94.0-beta.14", "@types/styled-components": "4.1.8", "babel-core": "^7.0.0-bridge.0", "typescript": "^3.5.3" diff --git a/packages/app-accounts/package.json b/packages/app-accounts/package.json index 75172a0d49..22ad13171f 100644 --- a/packages/app-accounts/package.json +++ b/packages/app-accounts/package.json @@ -15,6 +15,7 @@ "@types/file-saver": "^2.0.0", "@types/yargs": "^13.0.0", "babel-plugin-module-resolver": "^3.1.1", + "detect-browser": "^4.6.0", "file-saver": "^2.0.0", "yargs": "^13.2.0" } diff --git a/packages/app-accounts/src/Banner.tsx b/packages/app-accounts/src/Banner.tsx new file mode 100644 index 0000000000..1c3d51b70d --- /dev/null +++ b/packages/app-accounts/src/Banner.tsx @@ -0,0 +1,105 @@ +// Copyright 2017-2019 @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 { I18nProps } from '@polkadot/ui-app/types'; + +import { detect } from 'detect-browser'; +import React from 'react'; +import styled from 'styled-components'; +import { isWeb3Injected } from '@polkadot/extension-dapp'; +import { stringUpperFirst } from '@polkadot/util'; + +import translate from './translate'; + +// 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 extends I18nProps { + className?: string; +} + +const available: Record = { + 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); + +class Banner extends React.PureComponent { + public render (): React.ReactNode { + const { className, t } = this.props; + + if (isWeb3Injected || !isSupported || !browserName) { + return null; + } + + return ( +
+
+
+

{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) + } })}

+
    {available[browserName].map(({ desc, name, link }): React.ReactNode => ( +
  • + + {name} + ({desc}) +
    • + )) + }
+

{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.')} {t('Learn more...')}

+
+
+
+ ); + } +} + +export default translate(styled(Banner)` + padding: 0 0.5rem 0.5rem; + + .box { + background: #fff6e5; + border-left: 0.25rem solid darkorange; + border-radius: 0 0.25rem 0.25rem 0; + box-sizing: border-box; + padding: 1rem 1.5rem; + + .info { + max-width: 50rem; + } + } +`); diff --git a/packages/app-accounts/src/Overview.tsx b/packages/app-accounts/src/Overview.tsx index 44a5f8d80a..39ed7249cf 100644 --- a/packages/app-accounts/src/Overview.tsx +++ b/packages/app-accounts/src/Overview.tsx @@ -14,6 +14,7 @@ import { Button, CardGrid } from '@polkadot/ui-app'; import CreateModal from './modals/Create'; import ImportModal from './modals/Import'; import Account from './Account'; +import Banner from './Banner'; import translate from './translate'; type Props = ComponentProps & I18nProps & { @@ -44,6 +45,7 @@ class Overview extends React.PureComponent { return ( } buttons={