Add Lightning Loop functionality

package.json

@@ -137,7 +137,7 @@
     "rimraf": "2.6.2",
     "string-hash": "1.1.3",
     "webextension-polyfill-ts": "0.8.9",
-    "webpack-bundle-analyzer": "3.0.3",
+    "webpack-bundle-analyzer": "^3.3.2",
     "webpack-dev-server": "3.2.1",
     "write-file-webpack-plugin": "^4.5.0"
   }

src/app/AppRoutes.tsx

@@ -15,6 +15,7 @@ import HomePage from 'pages/home';
 import OnboardingPage from 'pages/onboarding';
 import SettingsPage from 'pages/settings';
 import BalancesPage from 'pages/balances';
+import LoopPage from 'pages/loop';
 import FourOhFourPage from 'pages/fourohfour';
 import Template, { Props as TemplateProps } from 'components/Template';
 
@@ -74,6 +75,17 @@ const routeConfigs: RouteConfig[] = [
       showBack: true,
     },
   },
+  {
+    // Loop
+    route: {
+      path: '/loop',
+      component: LoopPage,
+    },
+    template: {
+      title: 'Loop',
+      showBack: true,
+    },
+  },
   {
     // 404
     route: {

src/app/components/Loop/InputLoopAddress.less

@@ -0,0 +1,14 @@
+.InputLoopAddress {
+  width: 100%;
+  max-width: 440px;
+  margin: 0 auto;
+
+  .ant-form-item,
+  .ant-alert {
+    margin-bottom: 1rem;
+  }
+
+  .ant-alert a {
+    text-decoration: underline;
+  }
+}

src/app/components/Loop/InputLoopAddress.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { browser } from 'webextension-polyfill-ts';
+import { Button, Form, Input, message } from 'antd';
+import { urlWithoutPort } from 'utils/formatters';
+import './InputLoopAddress.less';
+import { setLoop, setLoopIn } from 'modules/loop/actions';
+
+interface Props {
+  initialUrl?: string | null;
+  error: Error | null;
+  setLoop: typeof setLoop;
+  setLoopIn: typeof setLoopIn;
+  type: string;
+}
+
+interface State {
+  url: string;
+  submittedUrl: string;
+  validation: string;
+}
+
+export default class InputLoopAddress extends React.Component<Props, State> {
+  state: State = {
+    url: this.props.initialUrl || '',
+    submittedUrl: this.props.initialUrl || '',
+    validation: '',
+  };
+
+  componentDidUpdate(nextProps: Props) {
+    // Handle errors for incorrect URL
+    const { error, initialUrl } = this.props;
+    if (error !== null && nextProps.error === null) {
+      message.error(`Error setting URL!`, 2);
+    }
+    if (initialUrl !== null && nextProps.initialUrl === null) {
+      message.success(`Loop URL set successfully!`, 2);
+    }
+  }
+
+  render() {
+    const { validation, url } = this.state;
+    const { type } = this.props;
+    const validateStatus = url ? (validation ? 'error' : 'success') : undefined;
+    return (
+      <Form className="InputLoopAddress" onSubmit={this.handleSubmit} layout="vertical">
+        <Form.Item label={`${type} URL`} validateStatus={validateStatus}>
+          <Input
+            type="url"
+            size="small"
+            value={url}
+            onChange={this.handleChange}
+            placeholder="http://localhost:8081"
+            autoFocus
+          />
+        </Form.Item>
+
+        <Button type="primary" size="large" htmlType="submit" disabled={!url} block>
+          {`Set ${type} URL`}
+        </Button>
+      </Form>
+    );
+  }
+
+  private handleChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    const url = ev.currentTarget.value;
+    let validation = '';
+    try {
+      // tslint:disable-next-line
+      new URL(url);
+    } catch (err) {
+      validation = 'That doesn’t look like a valid url';
+    }
+    this.setState({ url, validation });
+  };
+
+  private handleSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
+    const url = this.state.url.replace(/\/$/, '');
+    const loop = this.props;
+    ev.preventDefault();
+    browser.permissions
+      .request({
+        origins: [urlWithoutPort(url)],
+      })
+      .then(accepted => {
+        if (!accepted) {
+          message.warn('Permission denied, connection may fail');
+        }
+        this.setState({ submittedUrl: url });
+        loop.type === 'Loop Out'
+          ? loop.setLoop(this.state.url)
+          : loop.setLoopIn(this.state.url);
+      });
+  };
+}