[WIP] Implement allowances that auto-pay invoices

package.json

@@ -55,6 +55,7 @@
     "babel-plugin-import": "^1.8.0",
     "babel-plugin-module-resolver": "^3.1.1",
     "bn.js": "4.11.8",
+    "bolt11": "1.2.5",
     "classnames": "^2.2.6",
     "clean-webpack-plugin": "^0.1.19",
     "copy-webpack-plugin": "^5.1.1",

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 AllowancesPage from 'pages/allowances';
 import FourOhFourPage from 'pages/fourohfour';
 import Template, { Props as TemplateProps } from 'components/Template';
 
@@ -74,6 +75,17 @@ const routeConfigs: RouteConfig[] = [
       showBack: true,
     },
   },
+  {
+    // Allowances
+    route: {
+      path: '/allowances',
+      component: AllowancesPage,
+    },
+    template: {
+      title: 'Allowances',
+      showBack: true,
+    },
+  },
   {
     // 404
     route: {

src/app/components/ActiveAppBanner/index.less

@@ -0,0 +1,41 @@
+@import '~style/variables.less';
+
+.ActiveAppBanner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 1rem;
+
+  &.is-enabled {
+    background: @primary-color;
+  }
+
+  &.is-rejected {
+    background: @error-color;
+  }
+
+  &-message {
+    color: #fff;
+    padding: 0.4rem 0;
+    font-size: 0.8rem;
+  }
+
+  &-actions {
+    display: flex;
+
+    &-btn {
+      color: #fff;
+      cursor: pointer;
+      padding: 0 0.4rem;
+      opacity: 0.7;
+      font-size: 1rem;
+      background: none;
+      border: none;
+      outline: none;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}

src/app/components/ActiveAppBanner/index.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { browser } from 'webextension-polyfill-ts';
+import { Icon } from 'antd';
+import { withRouter, RouteComponentProps } from 'react-router';
+import { AppState } from 'store/reducers';
+import {
+  addEnabledDomain,
+  removeEnabledDomain,
+  addRejectedDomain,
+  removeRejectedDomain,
+} from 'modules/settings/actions';
+import { shortDomain } from 'utils/formatters';
+import Tooltip from 'components/Tooltip';
+import AllowanceIcon from 'static/images/piggy-bank.svg';
+import './index.less';
+
+interface StateProps {
+  enabledDomains: AppState['settings']['enabledDomains'];
+  rejectedDomains: AppState['settings']['rejectedDomains'];
+}
+
+interface DispatchProps {
+  addEnabledDomain: typeof addEnabledDomain;
+  removeEnabledDomain: typeof removeEnabledDomain;
+  addRejectedDomain: typeof addRejectedDomain;
+  removeRejectedDomain: typeof removeRejectedDomain;
+}
+
+type Props = StateProps & DispatchProps & RouteComponentProps;
+
+interface State {
+  currentOrigin: string;
+}
+
+class ActiveAppBanner extends React.Component<Props, State> {
+  state: State = {
+    currentOrigin: '',
+  };
+
+  async componentDidMount() {
+    try {
+      const [tab] = await browser.tabs.query({
+        active: true,
+        currentWindow: true,
+      });
+      if (tab.url) {
+        this.setState({ currentOrigin: new URL(tab.url).origin });
+      }
+    } catch (err) {
+      // no-op, just don't render the banner
+    }
+  }
+
+  render() {
+    const { enabledDomains, rejectedDomains } = this.props;
+    const { currentOrigin } = this.state;
+    const isEnabled = enabledDomains.includes(currentOrigin);
+    const isRejected = rejectedDomains.includes(currentOrigin);
+
+    // Render nothing if they're not on a tab, or it's not a webln page
+    if (!currentOrigin || (!isEnabled && !isRejected)) {
+      return null;
+    }
+
+    if (isRejected) {
+      return (
+        <div className="ActiveAppBanner is-rejected">
+          <div className="ActiveAppBanner-message">
+            <strong>{shortDomain(currentOrigin)}</strong> is rejected
+          </div>
+          <div className="ActiveAppBanner-actions">
+            <Tooltip title="Enable WebLN for this app" placement="bottom">
+              <button className="ActiveAppBanner-actions-btn" onClick={this.enable}>
+                <Icon type="check" />
+              </button>
+            </Tooltip>
+          </div>
+        </div>
+      );
+    }
+
+    if (isEnabled) {
+      return (
+        <div className="ActiveAppBanner is-enabled">
+          <div className="ActiveAppBanner-message">
+            <strong>{shortDomain(currentOrigin)}</strong> is enabled
+          </div>
+          <div className="ActiveAppBanner-actions">
+            <Tooltip title="Disable WebLN for this app" placement="bottom">
+              <button className="ActiveAppBanner-actions-btn" onClick={this.reject}>
+                <Icon type="stop" />
+              </button>
+            </Tooltip>
+            <Tooltip title="Configure allowance" placement="bottom">
+              <button
+                className="ActiveAppBanner-actions-btn"
+                onClick={this.goToAllowance}
+              >
+                <Icon component={AllowanceIcon} />
+              </button>
+            </Tooltip>
+          </div>
+        </div>
+      );
+    }
+  }
+
+  private enable = () => {
+    this.props.addEnabledDomain(this.state.currentOrigin);
+    this.props.removeRejectedDomain(this.state.currentOrigin);
+  };
+
+  private reject = () => {
+    this.props.addRejectedDomain(this.state.currentOrigin);
+    this.props.removeEnabledDomain(this.state.currentOrigin);
+  };
+
+  private goToAllowance = () => {
+    this.props.history.push(`/allowances`, { domain: this.state.currentOrigin });
+  };
+}
+
+const ConnectedActiveAppBanner = connect<StateProps, DispatchProps, {}, AppState>(
+  state => ({
+    enabledDomains: state.settings.enabledDomains,
+    rejectedDomains: state.settings.rejectedDomains,
+  }),
+  {
+    addEnabledDomain,
+    removeEnabledDomain,
+    addRejectedDomain,
+    removeRejectedDomain,
+  },
+)(ActiveAppBanner);
+
+export default withRouter(ConnectedActiveAppBanner);

src/app/components/AllowanceForm/index.less

@@ -0,0 +1,75 @@
+.AllowanceForm {
+  &-header {
+    display: flex;
+    padding: 1rem 0.75rem;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgba(#000, 0.15);
+
+    &-domain {
+      font-size: 1rem;
+      font-weight: bold;
+    }
+
+    &-toggle {
+      display: flex;
+      align-items: center;
+
+      &-label {
+        font-size: 0.6rem;
+        text-transform: uppercase;
+        margin-right: 0.4rem;
+        font-weight: bold;
+        opacity: 0.7;
+      }
+    }
+  }
+
+  &-fields {
+    padding: 1rem;
+    transition: opacity 200ms ease, filter 200ms ease;
+
+    &.is-inactive {
+      opacity: 0.4;
+      filter: grayscale(1);
+      pointer-events: none;
+    }
+
+    &-balance {
+      &.ant-form-item {
+        padding-bottom: 0;
+      }
+
+      .ant-form-item-children {
+        display: flex;
+      }
+
+      &-total {
+        margin-bottom: 0.5rem;
+      }
+
+      &-bar {
+        margin-top: -1rem;
+        margin-left: 1.5rem;
+
+        .ant-progress-text small {
+          font-size: 0.65rem;
+          opacity: 0.6;
+        }
+      }
+    }
+
+    // Ant overrides
+    .ant-form-item {
+      margin-bottom: 0.5rem;
+    }
+
+    .ant-form-item-label label {
+      font-size: 0.65rem;
+      text-transform: uppercase;
+      font-weight: bold;
+      letter-spacing: 0.04rem;
+      opacity: 0.7;
+    }
+  }
+}