chore(deps): bump axios from 0.19.0 to 0.21.2

package.json

@@ -17,7 +17,7 @@
     "@scatterjs/eosjs2": "^1.5.30",
     "anchor-link": "^0.3.0",
     "await-exec": "^0.1.2",
-    "axios": "^0.19.0",
+    "axios": "^0.21.2",
     "babel-plugin-styled-components": "^1.10.6",
     "decentium": "^1.1.0",
     "eos-transit": "^4.0.5",

src/components/anchor/contactUs/contactUs.js

@@ -13,7 +13,7 @@ class ContactUs extends Component {
         site: {
           siteMetadata: {
             links: {
-              forums: forumsLink,
+              devForums: devForumsLink,
             }
           }
         }
@@ -25,7 +25,7 @@ class ContactUs extends Component {
         <Container className={contactStyles.container}>
           <h1>{intl.formatMessage({ id: "anchor_contact_header" })}</h1>
           <span>{intl.formatMessage({ id: "anchor_contact_subheading" })}</span>
-          <a href={forumsLink}>
+          <a href={devForumsLink}>
             <button>{intl.formatMessage({ id: "anchor_contact_button" })}</button>
           </a>
         </Container>
@@ -41,7 +41,7 @@ const ContactUsWrapper = props => (
         site {
           siteMetadata {
             links {
-              forums
+              devForums
             }
           }
         }

src/components/anchor/getStarted/getStarted.js

@@ -25,6 +25,7 @@ class GetStarted extends Component {
           siteMetadata: {
             anchor: {
               iosDownloadUrl,
+              androidDownloadUrl,
               linuxDownloadUrl,
               macDownloadUrl,
               windowsDownloadUrl,
@@ -36,7 +37,8 @@ class GetStarted extends Component {
 
     if (isAndroid) {
       this.setState({
-        currentDeviceTextId: 'download_for_android'
+        currentDeviceTextId: 'download_for_android',
+        currentDeviceUrl: androidDownloadUrl,
       })
     } else if (isIOS) {
       this.setState({
@@ -68,6 +70,7 @@ class GetStarted extends Component {
         site: {
           siteMetadata: {
             anchor: {
+              androidDownloadUrl,
               iosDownloadUrl,
               linuxDownloadUrl,
               macDownloadUrl,
@@ -146,12 +149,13 @@ class GetStarted extends Component {
                 <img src={macOS} alt="macOS" />
                 <span>iOS</span>
               </a>
-              <div
-                className={`${getStartedStyles.versionImgName} ${getStartedStyles.opacity}`}
+              <a
+                className={getStartedStyles.versionImgName}
+                href={androidDownloadUrl}
               >
                 <img src={android} alt="android" />
                 <span>{intl.formatMessage({ id: "shared_android" })}</span>
-              </div>
+              </a>
             </div>
           </div>
           <Banners />
@@ -168,6 +172,7 @@ const GetStartedWrapper = props => (
           site {
             siteMetadata {
               anchor {
+                androidDownloadUrl
                 iosDownloadUrl
                 linuxDownloadUrl
                 macDownloadUrl

src/components/backups/Explanation.js

@@ -0,0 +1,141 @@
+import React, { Component } from "react";
+
+import { Grid, Image } from "semantic-ui-react";
+
+import keyCertificate from "../../images/key_certificate.png";
+
+import explanationStyles from "./explanation.module.css";
+
+export default class Explanation extends Component {
+  state = {};
+  render() {
+    const { viewingExplanationOf } = this.state;
+
+    const privateKeyExplanation = (
+      <p>
+        Encrypted private key (redundancy 1)
+      </p>
+    );
+
+    const qrExplanation = (
+      <p>
+        Recovery QR Code containing all information needed to recover your account. Scan the code for fast recovery (redundancy 3)
+      </p>
+    );
+
+    const mnemonicKeyExplanation = (
+      <p>
+        Encrypted private key as mnemonic (redundancy 2)
+      </p>
+    );
+
+    const encryptionKeyExplanation = (
+      <p>
+        The rest of the private key is encrypted with 6 encryption words.<br /> <strong>The owner key certificate will not be valid wtihout them correctly written down. </strong>
+        <br />
+        NO REDUNDANCY
+      </p>
+    );
+
+    let mobileExplanation;
+
+    switch (viewingExplanationOf) {
+      case 'privateKey':
+        mobileExplanation = privateKeyExplanation;
+        break;
+      case 'qr':
+        mobileExplanation = qrExplanation;
+        break;
+      case 'mnemonicKey':
+        mobileExplanation = mnemonicKeyExplanation;
+        break;
+      case 'encryptionKey':
+        mobileExplanation = encryptionKeyExplanation;
+        break;
+    }
+
+    return (
+      <div className={explanationStyles.container}>
+        <h2 className={explanationStyles.title}>Certificate explanation</h2>
+
+        <div className={explanationStyles.mobileInstructions}>
+          <p>
+            Click on a highlighted portion of the sheet to read it's explanation below.
+          </p>
+        </div>
+
+        <div className={explanationStyles.imageContainer}>
+          <Image
+            alt='backups-header-image'
+            src={keyCertificate}
+            style={{ width: 300 }}
+          />
+        </div>
+
+        {mobileExplanation && (
+          <div className={explanationStyles.mobileExplanation}>
+            {mobileExplanation}
+          </div>
+        )}
+
+        <div
+          onClick={() => this.setState({ viewingExplanationOf: 'privateKey' })}
+          className={`${explanationStyles.transparentRectangle} ${explanationStyles.privateKey}`}
+        />
+
+        <div
+          onClick={() => this.setState({ viewingExplanationOf: 'qr' })}
+          className={`${explanationStyles.transparentRectangle} ${explanationStyles.QR}`}
+        />
+
+        <div
+          onClick={() => this.setState({ viewingExplanationOf: 'mnemonicKey' })}
+          className={`${explanationStyles.transparentRectangle} ${explanationStyles.mnemonicKey}`}
+        />
+
+        <div
+          onClick={() => this.setState({ viewingExplanationOf: 'encryptionKey' })}
+          className={`${explanationStyles.transparentRectangle} ${explanationStyles.encryptionKey}`}
+        />
+
+        <div className={`${explanationStyles.arrowExplanation} ${explanationStyles.privateKey}`}>
+          <ArrowExplanation sizeOfArrow="short">
+            {privateKeyExplanation}
+          </ArrowExplanation>
+        </div>
+
+        <div className={`${explanationStyles.arrowExplanation} ${explanationStyles.QR}`}>
+          <ArrowExplanation sizeOfArrow="long">
+            {qrExplanation}
+          </ArrowExplanation>
+        </div>
+
+        <div className={`${explanationStyles.arrowExplanation} ${explanationStyles.mnemonicKey}`}>
+          <ArrowExplanation sizeOfArrow="short">
+            {mnemonicKeyExplanation}
+          </ArrowExplanation>
+        </div>
+
+        <div className={`${explanationStyles.arrowExplanation} ${explanationStyles.encryptionKey}`}>
+          <ArrowExplanation sizeOfArrow="short">
+            {encryptionKeyExplanation}
+          </ArrowExplanation>
+        </div>
+      </div>
+    );
+  }
+}
+
+const ArrowExplanation = ({ sizeOfArrow, children }) => (
+  <Grid>
+    <Grid.Column width={sizeOfArrow === 'short' ? 2 : 5}>
+      <div className={explanationStyles[`${sizeOfArrow}Arrow`]}>
+        <div className={explanationStyles.arrowLine}></div>
+        <div className={explanationStyles.arrowPoint}></div>
+      </div>
+    </Grid.Column>
+    <Grid.Column style={{ paddingLeft: sizeOfArrow === 'short' ? 14 : 11 }} width={sizeOfArrow === 'short' ? 12 : 11}>
+      {children}
+    </Grid.Column>
+  </Grid>
+);

src/components/backups/Instructions.js

@@ -0,0 +1,91 @@
+import React, { Component } from "react";
+
+import { Grid, Image } from "semantic-ui-react";
+
+import IOSInstructions from "./instructions/IOS";
+import AndroidInstructions from "./instructions/Android";
+import DesktopInstructions from "./instructions/Desktop";
+
+import accountRecoveryHeaderImage from "../../images/account-recovery-header-image.jpg";
+
+import instructionsStyles from "./instructions.module.css";
+
+const platforms = ['iOS', 'Android', 'Win/OSX/Linux']
+
+export default class Instructions extends Component {
+  state = { currentPlatform: 'iOS' };
+
+  render() {
+    const { currentPlatform } = this.state;
+
+    return (
+      <div className={instructionsStyles.container}>
+        <div className={instructionsStyles.header}>
+          <div className={instructionsStyles.headerContent}>
+            <Grid className="tablet reversed computer reversed">
+              <Grid.Column computer={10} tablet={10} mobile={16}>
+                <Image
+                  alt='account-recovery-header-image'
+                  src={accountRecoveryHeaderImage}
+                  style={{ margin: 'auto', width: 400 }}
+                />
+              </Grid.Column>
+              <Grid.Column computer={6} tablet={6} mobile={16}>
+                <div className={instructionsStyles.headerTextContainer}>
+                  <h2 className={instructionsStyles.title}>Account recovery</h2>
+                  <p className={instructionsStyles.subtitle}>
+                    Follow these steps to recover your account
+                  </p>
+                  <br/>
+                  <p className={instructionsStyles.subtitle}>
+                    <strong >
+                      Choose your platform for recovery
+                    </strong>
+                  </p>
+                  <div className={instructionsStyles.buttonsContainer}>
+                    {platforms.map(platform => (
+                      <button
+                        onClick={() => this.setState({currentPlatform: platform})}
+                        className={currentPlatform === platform ? instructionsStyles.active : instructionsStyles.inactive}
+                      >
+                        {platform}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </Grid.Column>
+            </Grid>
+          </div>
+        </div>
+        <div className={instructionsStyles.innerContainer}>
+          <Grid>
+            <Grid.Column computer={12} tablet={16} mobile={16}>
+              {currentPlatform === 'iOS' && (
+                <IOSInstructions />
+              )}
+
+              {currentPlatform === 'Android' && (
+                <AndroidInstructions />
+              )}
+
+              {currentPlatform === 'Win/OSX/Linux' && (
+                <DesktopInstructions />
+              )}
+            </Grid.Column>
+            <Grid.Column computer={4} tablet={16} mobile={16}>
+              <div className={instructionsStyles.warningBox}>
+                <strong>
+                  Did you know?
+                </strong>
+                <br /><br />
+                <p>
+                  This process can be used to setup your account on multiple devices securely or revoke all device keys if you have lost access to any devices
+                </p>
+              </div>
+            </Grid.Column>
+          </Grid>
+        </div>
+      </div>
+    );
+  }
+}