Merge pull request #122 from SnaxFoundation/dev

qr code
SnaxFoundation · Jul 2, 2019 · da0b756 · da0b756
2 parents 4c50a64 + 5681193
commit da0b756
Show file tree

Hide file tree

Showing 13 changed files with 557 additions and 284 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Snax.One",
   "short_name": "Snax.One",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "manifest_version": 2,
   "author": "https://snax.one",
   "description": "Snax blockchain wallet",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "snax-one-browser-extension",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "private": true,
   "dependencies": {
     "@babel/core": "^7.3.4",
@@ -46,14 +46,15 @@
     "history": "4.7.2",
     "html-loader": "0.5.5",
     "html-webpack-plugin": "3.2.0",
-    "jest": "24.5.0",
+    "jest": "^24.8.0",
     "js-sha256": "^0.9.0",
     "localforage": "^1.7.3",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.8",
     "promise": "8.0.1",
     "prop-types": "^15.6.2",
+    "qrcode.react": "^0.9.3",
     "query-string": "^6.3.0",
     "raf": "3.4.0",
     "react": "^16.8.2",

diff --git a/src/components/BrandBox/BrandBox.js b/src/components/BrandBox/BrandBox.js
@@ -5,4 +5,7 @@ export const BrandBox = styled.div`
   width: 100%;
   margin-bottom: ${constants.grid.spacingY}px;
   color: ${constants.textColor.medium};
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-start;
 `;
diff --git a/src/components/BrandBox/BrandBoxSubtitle.js b/src/components/BrandBox/BrandBoxSubtitle.js
@@ -3,4 +3,9 @@ import styled from 'styled-components';
 export const BrandBoxSubtitle = styled.div`
   font-size: 24px;
   line-height: 1;
+  text-transform: uppercase;
+  padding-left: 15px;
+  margin-left: 15px;
+  border-left: 1px solid currentColor;
+  letter-spacing: 0.03em;
 `;
diff --git a/src/components/BrandBox/BrandBoxTitle.js b/src/components/BrandBox/BrandBoxTitle.js
@@ -2,9 +2,8 @@ import styled from 'styled-components';
 import constants from '../../styles/style-constants';
 
 export const BrandBoxTitle = styled.div`
-  font-size: 44px;
+  font-size: 36px;
   line-height: 1;
-  font-weight: bold;
   color: ${constants.textColor.body};
   margin-bottom: 0.15em;
 `;
diff --git a/src/components/Icon/Icon.js b/src/components/Icon/Icon.js
@@ -1,4 +1,18 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { IconStyled } from './styles';
 
-export const Icon = ({ size, ...props }) => <IconStyled size={size} {...props} />;
+const propTypes = {
+  outlined: PropTypes.bool,
+};
+
+const defaultProps = {
+  outlined: false,
+};
+
+export const Icon = ({ size, outlined, ...props }) => (
+  <IconStyled size={size} outlined={outlined} {...props} />
+);
+
+Icon.propTypes = propTypes;
+Icon.defaultProps = defaultProps;
diff --git a/src/components/Icon/IconCopy.js b/src/components/Icon/IconCopy.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Icon } from './Icon';
+
+export const IconCopy = props => (
+  <Icon {...props} outlined>
+    <svg viewBox="0 0 24 24">
+      <polyline class="st2" points="6.5,16.2 3.8,16.2 3.8,2.8 15.2,2.8 15.2,5.3 	"/>
+	<rect x="8.8" y="7.8" class="st2" width="11.5" height="13.3"/>
+    </svg>
+  </Icon>
+);
diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js
@@ -1,5 +1,6 @@
 export * from './Icon';
 export * from './IconArrowBack';
+export * from './IconCopy';
 export * from './IconDownload';
 export * from './IconEyeOpened';
 export * from './IconEyeClosed';

diff --git a/src/components/Icon/styles.js b/src/components/Icon/styles.js
@@ -1,23 +1,43 @@
 import styled from 'styled-components';
+import PropTypes from 'prop-types';
 
-const size = props => props.size ? props.size : '70px';
+const propTypes = {
+  outlined: PropTypes.bool,
+};
+
+const defaultProps = {
+  outlined: false,
+};
+
+const size = props => (props.size ? props.size : 'inherit');
+const outline = props =>
+  props.outlined
+    ? `
+    stroke-width: 1px;
+    stroke: ${props.color || 'currentColor'};
+    fill: transparent;
+    `
+    : `fill: ${props.color || 'currentColor'};`;
 
 export const IconStyled = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  
+
   &,
   & > * {
     width: ${size};
     height: ${size};
   }
-  
+
   svg {
     width: 100%;
   }
-  
+
   * {
-    fill: ${props => props.color || 'currentColor'};
+    ${outline}
   }
 `;
+
+IconStyled.propTypes = propTypes;
+IconStyled.defaultProps = defaultProps;
diff --git a/src/components/typography/ParagraphBody2.js b/src/components/typography/ParagraphBody2.js
@@ -5,5 +5,6 @@ export const ParagraphBody2 = styled.p`
   font-size: ${constants.fontSize.body2}px;
   color: currentColor;
   line-height: 1.5;
-  margin: 0.75em;
+  margin: 0;
+  margin-bottom: 0.75em;
 `;
diff --git a/src/config/index.js b/src/config/index.js
@@ -2,4 +2,4 @@ export const config = {
   chainUrl: 'https://cdn.snax.one',
   twitterUrl: 'https://twitter.com',
   allowAllUnknownDomains: false,
-};
+};
diff --git a/src/routes/PrivateExportRoute.js b/src/routes/PrivateExportRoute.js
@@ -1,11 +1,14 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import QRCode from 'qrcode.react';
+
 import { Inject } from 'src/context/steriotypes/Inject';
 import { ClipboardCopier } from 'src/services/misc/ClipboardCopier';
 import { ReduxContainer } from 'src/utils/redux/ReduxContainer';
 import { WalletActions } from 'src/store/wallet/WalletActions';
 import { WalletSelectors } from 'src/store/wallet/WalletSelectors';
 import { NotificationActions } from 'src/store/notifications/NotificationActions';
+import styleConstants from 'src/styles/style-constants';
 
 import {
   BrandBox,
@@ -15,9 +18,11 @@ import {
   ButtonWithIcon,
   ButtonRow,
   Content,
-  IconDownload,
+  IconCopy,
   SecondaryInfoBox,
+  ParagraphBody,
   ParagraphBody2,
+  ParagraphCaption,
   Row,
   Screen,
 } from '../components';
@@ -28,42 +33,84 @@ class PrivateExportRoute extends Component {
     spawnSuccessNotification: PropTypes.func.isRequired,
   };
 
-  @Inject(ClipboardCopier) clipboardCopier;
+  state = {
+    privateKey: null,
+  };
 
-  handleExport = async () => {
+  componentDidMount() {
+    this.setPrivateKey();
+  }
+
+  async setPrivateKey() {
     const privateKey = await this.props.getWifFromStorage();
-    this.clipboardCopier.copy(privateKey);
+    this.setState({ privateKey });
+  }
 
+  @Inject(ClipboardCopier) clipboardCopier;
+
+  copyToClipboard = async () => {
+    this.clipboardCopier.copy(this.state.privateKey);
     this.props.spawnSuccessNotification(
       'Private key was successfully copied to your clipboard'
     );
   };
 
   render() {
+    const { privateKey } = this.state;
+
     return (
       <Screen>
         <BrandBox>
-          <BrandBoxTitle>Snax</BrandBoxTitle>
+          <BrandBoxTitle>Snax.One</BrandBoxTitle>
           <BrandBoxSubtitle>wallet</BrandBoxSubtitle>
         </BrandBox>
-        <Content spread centerY>
+        <Content
+          style={{
+            backgroundColor: styleConstants.color.red,
+            color: '#fff',
+            marginLeft: '-15px',
+            marginRight: '-15px',
+            padding: '10px 15px',
+            width: 'calc(100% + 30px)',
+          }}
+        >
           <Row>
-            <ParagraphBody2 style={{ textAlign: 'center', width: '100%' }}>
+            <ParagraphBody2 style={{ fontSize: '13px', width: '100%' }}>
               Warning! Don't export your private key, if you don't understand,
               what you are doing! Don't send your private key to anyone, you can
               lose all your tokens!
             </ParagraphBody2>
           </Row>
         </Content>
-        <ButtonRow>
-          <ButtonWithIcon
-            icon={<IconDownload />}
-            colorScheme="red"
-            onClick={this.handleExport}
-            data-test-id="export-private__actions__handle-export"
-          >
-            I understand. Export.
-          </ButtonWithIcon>
+        <Content spread centerY style={{ textAlign: 'center', paddingBottom: 0 }}>
+          {privateKey && (
+            <>
+              <Row style={{ flexDirection: 'column'}}>
+                <ParagraphCaption style={{ textTransform: 'uppercase', fontWeight: 'bold', marginBottom: 0 }}>To export private code</ParagraphCaption>
+                <ParagraphBody2>Scan QR code</ParagraphBody2>
+              </Row>
+              <Row style={{ display: 'flex', justifyContent: 'center'}}>
+                <div style={{ border: '5px solid #fff', width: 'auto', display: 'flex' }}>
+                  <QRCode value={privateKey} />
+                </div>
+              </Row>
+              <Row style={{ justifyContent: 'center', marginTop: '15px', marginBottom: '-10px' }}>
+                <ParagraphCaption>or</ParagraphCaption>
+              </Row>
+            </>
+          )}
+          <Row style={{ justifyContent: 'center'}}>
+            <ButtonWithIcon
+              icon={<IconCopy outlined />}
+              colorScheme="flat"
+              onClick={this.copyToClipboard}
+              data-test-id="export-private__actions__handle-export"
+            >
+              Copy to clipboard
+            </ButtonWithIcon>
+          </Row>
+        </Content>
+        <ButtonRow style={{ marginTop: 0 }}>
           <SecondaryInfoBox>
             <Anchor
               spread