Loop integration (revised)

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: 'Lightning Loop',
+      showBack: true,
+    },
+  },
   {
     // 404
     route: {

src/app/components/AmountField/index.less

@@ -19,10 +19,10 @@
       z-index: 1;
       opacity: 0.7;
       color: #a0a0a0;
-      
+
       &:hover {
-        color: #7642FF;
-        border-color: #7642FF;
+        color: #7642ff;
+        border-color: #7642ff;
         opacity: 1;
       }
     }
@@ -37,6 +37,18 @@
   &-fiat {
     max-width: 115px;
     width: 100%;
+
+    .ant-input {
+      padding-right: 4px;
+    }
+  }
+
+  &-constraint {
+    margin-right: 0.5rem;
+
+    &:last-child {
+      margin-right: 0;
+    }
   }
 
   // Ant overrides, use px values
@@ -64,4 +76,4 @@
     right: 6px;
     margin-top: -5px;
   }
-}
+}

src/app/components/AmountField/index.tsx

@@ -25,9 +25,10 @@ interface OwnProps {
   warn?: React.ReactNode;
   required?: boolean;
   showFiat?: boolean;
-  minimumSats?: string;
-  maximumSats?: string;
+  minimumSats?: string | number;
+  maximumSats?: string | number;
   showMax?: boolean;
+  showConstraints?: boolean;
   onChangeAmount(amount: string): void;
 }
 
@@ -94,6 +95,7 @@ class AmountField extends React.Component<Props, State> {
       showFiat,
       maximumSats,
       showMax,
+      showConstraints,
       isNoFiat,
       fiat,
       rates,
@@ -104,11 +106,12 @@ class AmountField extends React.Component<Props, State> {
     } = this.props;
     const { value, valueFiat, denomination } = this.state;
     const valueError = this.getValueError();
+    const constraints = !valueError && showConstraints && this.getConstraints();
 
     return (
       <Form.Item
         label={label}
-        help={valueError || warn || help}
+        help={valueError || warn || constraints || help}
         validateStatus={value && valueError ? 'error' : warn ? 'warning' : undefined}
         className="AmountField"
         required={required}
@@ -186,7 +189,7 @@ class AmountField extends React.Component<Props, State> {
     }
     if (minimumSats) {
       const min = new BN(minimumSats);
-      if (min.gte(valueBN)) {
+      if (min.gt(valueBN)) {
         const minAmount = `${fromBaseToUnit(min.toString(), denomination)} ${
           denominationSymbols[chain][denomination]
         }`;
@@ -198,6 +201,31 @@ class AmountField extends React.Component<Props, State> {
     }
   };
 
+  private getConstraints = () => {
+    const { minimumSats, maximumSats, chain } = this.props;
+    const { denomination } = this.state;
+    const pieces = [];
+
+    if (minimumSats) {
+      pieces.push(
+        <span key="min" className="AmountField-constraint">
+          <strong>Min:</strong> {fromBaseToUnit(minimumSats.toString(), denomination)}{' '}
+          {denominationSymbols[chain][denomination]}
+        </span>,
+      );
+    }
+    if (maximumSats) {
+      pieces.push(
+        <span key="max" className="AmountField-constraint">
+          <strong>Max:</strong> {fromBaseToUnit(maximumSats.toString(), denomination)}{' '}
+          {denominationSymbols[chain][denomination]}
+        </span>,
+      );
+    }
+
+    return pieces;
+  };
+
   private handleChangeValue = (ev: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = ev.currentTarget;
     this.updateBothValues(name, value);
@@ -235,7 +263,7 @@ class AmountField extends React.Component<Props, State> {
     const { maximumSats } = this.props;
     const { denomination } = this.state;
     if (maximumSats) {
-      const value = fromBaseToUnit(maximumSats, denomination);
+      const value = fromBaseToUnit(maximumSats.toString(), denomination);
       this.updateBothValues('value', value);
     }
   };

src/app/components/DetailsTable.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import './DetailsTable.less';
+import Help from './Help';
 
 export interface DetailsRow {
   label: string;
   value: React.ReactNode;
+  help?: string;
 }
 
 const DetailsTable: React.SFC<{ details: DetailsRow[] }> = ({ details }) => {
@@ -12,7 +14,9 @@ const DetailsTable: React.SFC<{ details: DetailsRow[] }> = ({ details }) => {
       <tbody>
         {details.map(d => (
           <tr className="DetailsTable-row" key={d.label}>
-            <td className="DetailsTable-row-label">{d.label}</td>
+            <td className="DetailsTable-row-label">
+              {d.label} {d.help && <Help>{d.help}</Help>}
+            </td>
             <td className="DetailsTable-row-value">{d.value}</td>
           </tr>
         ))}

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,96 @@
+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 } from 'modules/loop/actions';
+
+interface Props {
+  initialUrl?: string | null;
+  isCheckingLoop: boolean;
+  error: Error | null;
+  setLoop: typeof setLoop;
+  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 } = this.props;
+    if (error !== null && nextProps.error === null) {
+      message.error(`Error setting URL!`, 2);
+    }
+  }
+
+  render() {
+    const { validation, url } = this.state;
+    const { isCheckingLoop } = this.props;
+    const validateStatus = url ? (validation ? 'error' : 'success') : undefined;
+    return (
+      <Form className="InputLoopAddress" onSubmit={this.handleSubmit} layout="vertical">
+        <Form.Item label={`Loop 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}
+          loading={isCheckingLoop}
+          block
+        >
+          {`Set Loop 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.setLoop(url);
+      });
+  };
+}

src/app/components/Loop/LoopForm.less

@@ -0,0 +1,39 @@
+.LoopForm {
+  &-type,
+  &-advancedToggle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  &-type {
+    &-settings.ant-btn {
+      margin-right: -2rem;
+      margin-left: 0.5rem;
+      padding: 0.5rem;
+      background: none;
+      border: none;
+      border-radius: 100%;
+    }
+  }
+
+  &-actions {
+    margin-top: 2rem;
+    display: flex;
+    align-items: center;
+
+    .ant-btn {
+      margin-left: 0.5rem;
+
+      &:first-child {
+        margin-left: 0;
+        flex: 1;
+      }
+    }
+  }
+
+  .ant-form-item {
+    margin-bottom: 0.5rem;
+  }
+}