feature: adds watch only address (part I)

app/actions/authActions.js

@@ -13,6 +13,10 @@ type WifLoginProps = {
   wif: string,
 }
 
+type WatchOnlyLoginProps = {
+  address: string,
+}
+
 type LedgerLoginProps = {
   publicKey: string,
   signingFunction: Function,
@@ -51,6 +55,20 @@ export const wifLoginActions = createActions(
   },
 )
 
+export const watchOnlyLoginActions = createActions(
+  ID,
+  ({ address }: WatchOnlyLoginProps) => (): AccountType => {
+    if (!wallet.isAddress(address)) {
+      throw new Error('Invalid public key entered')
+    }
+
+    return {
+      address,
+      isHardwareLogin: false,
+    }
+  },
+)
+
 export const nep2LoginActions = createActions(
   ID,
   ({ passphrase, encryptedWIF }: Nep2LoginProps) => async (): Promise<

app/containers/EditWallet/EditWallet.scss

@@ -24,7 +24,7 @@
   width: 100%;
   height: 100%;
   flex-direction: column;
-  width: 500px;
+  width: 550px;
   margin-bottom: auto;
 }
 

app/containers/Home/Home.jsx

@@ -7,6 +7,7 @@ import LoginPrivateKey from '../LoginPrivateKey'
 import LoginNep2 from '../LoginNep2'
 import LoginLedgerNanoS from '../LoginLedgerNanoS'
 import LoginLocalStorage from '../LoginLocalStorage'
+import LoginWatchOnly from '../LoginWatchOnly'
 import Button from '../../components/Button'
 import styles from './Home.scss'
 import AddIcon from '../../assets/icons/add.svg'
@@ -18,7 +19,6 @@ import pack from '../../../package.json'
 type State = {
   tabIndex: number,
 }
-
 type Props = {
   loading: boolean,
   theme: ThemeType,
@@ -37,6 +37,10 @@ const LOGIN_OPTIONS = {
     render: () => <LoginNep2 />,
     display: 'Encrypted Key',
   },
+  watch: {
+    render: () => <LoginWatchOnly />,
+    display: 'Watch only',
+  },
   ledger: {
     render: () => <LoginLedgerNanoS />,
     display: 'Ledger',

app/containers/Home/Home.scss

@@ -175,7 +175,7 @@ $navigation-margin: 20px;
   align-items: center;
   margin: auto;
   min-height: 550px;
-  width: 600px;
+  width: 650px;
 }
 
 .buttonRow {
@@ -259,7 +259,7 @@ $navigation-margin: 20px;
 .inputContainer {
   display: flex;
   flex-direction: column;
-  width: 500px;
+  width: 550px;
   align-items: center;
 }
 

app/containers/LoginWatchOnly/LoginWatchOnly.jsx

@@ -0,0 +1,62 @@
+// @flow
+import React from 'react'
+
+import Button from '../../components/Button'
+import LoginIcon from '../../assets/icons/login.svg'
+import styles from '../Home/Home.scss'
+import TextInput from '../../components/Inputs/TextInput'
+
+type Props = {
+  watchOnlyLogin: (content: string) => void,
+}
+
+type State = {
+  address: string,
+}
+
+export default class LoginPrivateKey extends React.Component<Props, State> {
+  state = {
+    address: '',
+  }
+
+  render = () => {
+    const { watchOnlyLogin } = this.props
+    const { address } = this.state
+
+    return (
+      <div id="loginPrivateKey" className={styles.flexContainer}>
+        <form
+          onSubmit={e => {
+            e.preventDefault()
+            watchOnlyLogin(address)
+          }}
+        >
+          <React.Fragment>
+            <div className={styles.centeredInput}>
+              <TextInput
+                textInputClassName={styles.privateKeyInput}
+                placeholder="Enter a public key here"
+                value={address}
+                onChange={(e: Object) =>
+                  this.setState({ address: e.target.value })
+                }
+                autoFocus
+              />
+            </div>
+            <div className={styles.privateKeyLoginButtonRow}>
+              <Button
+                id="loginButton"
+                primary
+                type="submit"
+                renderIcon={LoginIcon}
+                disabled={address.length < 10}
+              >
+                Login
+              </Button>
+            </div>
+          </React.Fragment>
+        </form>
+      </div>
+    )
+  }
+}

app/containers/LoginWatchOnly/index.js

@@ -0,0 +1,17 @@
+// @flow
+import { compose } from 'recompose'
+import { withActions, withProgress } from 'spunky'
+
+import LoginWatchOnly from './LoginWatchOnly'
+import withFailureNotification from '../../hocs/withFailureNotification'
+import { watchOnlyLoginActions } from '../../actions/authActions'
+
+const mapActionsToProps = actions => ({
+  watchOnlyLogin: address => actions.call({ address }),
+})
+
+export default compose(
+  withActions(watchOnlyLoginActions, mapActionsToProps),
+  withFailureNotification(watchOnlyLoginActions),
+  withProgress(watchOnlyLoginActions),
+)(LoginWatchOnly)

app/styles/main.global.scss

@@ -236,7 +236,7 @@ input::placeholder {
     li {
       display: flex;
       margin: auto;
-      font-size: 12px;
+      font-size: 11px;
       color: #ced0d4;
       cursor: pointer;
       padding-bottom: 10px;