ui+connect: Custodial account support

Author: itsrachelfish

app/src/components/common/FormInputNumber.tsx

@@ -7,6 +7,7 @@ interface Props {
   value?: number;
   extra?: ReactNode;
   placeholder?: string;
+  className?: string;
   onChange: (value: number) => void;
 }
 
@@ -15,6 +16,7 @@ const FormInputNumber: React.FC<Props> = ({
   value,
   extra,
   placeholder,
+  className,
   onChange,
 }) => {
   const handleChange = useCallback(
@@ -35,6 +37,7 @@ const FormInputNumber: React.FC<Props> = ({
 
   return (
     <FormInput
+      className={className}
       label={label}
       value={valueText}
       extra={extra}

app/src/components/connect/CustomSessionPage.tsx

@@ -9,6 +9,7 @@ import { Paragraph, Small, Label } from 'components/common/v2/Text';
 import OverlayFormWrap from 'components/common/OverlayFormWrap';
 import FormField from 'components/common/FormField';
 import FormInput from 'components/common/FormInput';
+import FormInputNumber from 'components/common/FormInputNumber';
 import FormSelect from 'components/common/FormSelect';
 import FormDate from 'components/common/FormDate';
 import FormSwitch from 'components/common/v2/FormSwitch';
@@ -65,6 +66,11 @@ const Styled = {
       padding: 12px 40px 12px 0px;
     }
   `,
+  FormInputNumber: styled(FormInputNumber)`
+    input {
+      background-color: ${props => props.theme.colors.lightningNavy};
+    }
+  `,
   FormDate: styled(FormDate)`
     input {
       font-family: ${props => props.theme.fonts.open.regular};
@@ -122,6 +128,7 @@ const CustomSessionPage: React.FC = () => {
     Permission,
     FormSelect,
     FormInput,
+    FormInputNumber,
     FormDate,
     Small,
     Button,
@@ -199,6 +206,14 @@ const CustomSessionPage: React.FC = () => {
                   <Small>{l('paymentsDesc')}</Small>
                 </PermissionType>
 
+                <PermissionType
+                  active={addSessionView.permissionType === 'custodial'}
+                  onClick={setPermissionType('custodial')}
+                >
+                  <Paragraph bold>{l('custodial')}</Paragraph>
+                  <Small>{l('custodialDesc')}</Small>
+                </PermissionType>
+
                 <PermissionType
                   active={addSessionView.permissionType === 'custom'}
                   onClick={setPermissionType('custom')}
@@ -213,6 +228,21 @@ const CustomSessionPage: React.FC = () => {
               <Label semiBold>Permissions</Label>
 
               <Permissions>
+                {addSessionView.permissionType === 'custodial' && (
+                  <FormField>
+                    <Label semiBold space={8}>
+                      {l('addBalance')}
+                    </Label>
+
+                    <FormInputNumber
+                      value={addSessionView.custodialBalance}
+                      onChange={addSessionView.setCustodialBalance}
+                      placeholder="1,000,000"
+                      extra={<b>sats</b>}
+                    />
+                  </FormField>
+                )}
+
                 <Permission>
                   <div>
                     <Paragraph bold>{l('permView')}</Paragraph>

app/src/components/connect/SessionRow.tsx

@@ -7,6 +7,7 @@ import { Session } from 'store/models';
 import { BoltOutlined, Close, Column, Copy, QRCode, Row } from 'components/base';
 import SortableHeader from 'components/common/SortableHeader';
 import Tip from 'components/common/Tip';
+import * as LIT from 'types/generated/lit-sessions_pb';
 import QRCodeModal from './QRCodeModal';
 
 /**
@@ -151,6 +152,18 @@ const SessionRow: React.FC<Props> = ({ session, style }) => {
               <QRCode disabled />
             </Tip>
           </>
+        ) : session.type === LIT.SessionType.TYPE_MACAROON_ACCOUNT ? (
+          <>
+            <Tip overlay={l('pairCustodial')}>
+              <BoltOutlined disabled />
+            </Tip>
+            <Tip overlay={l('copy')}>
+              <Copy onClick={handleCopy} />
+            </Tip>
+            <Tip overlay={l('generateQR')}>
+              <QRCode onClick={toggleQRModal} />
+            </Tip>
+          </>
         ) : (
           <>
             <Tip overlay={l('pairTerminal')}>

app/src/i18n/locales/en-US.json

@@ -53,9 +53,12 @@
   "cmps.connect.CustomSessionPage.liquidityDesc": "User can only set fees, use Loop, and use Pool.",
   "cmps.connect.CustomSessionPage.payments": "Payments Manager",
   "cmps.connect.CustomSessionPage.paymentsDesc": "User can only send and receive payments.",
+  "cmps.connect.CustomSessionPage.custodial": "Custodial Account",
+  "cmps.connect.CustomSessionPage.custodialDesc": "Create a custodial off-chain account for your node.",
   "cmps.connect.CustomSessionPage.custom": "Custom",
   "cmps.connect.CustomSessionPage.customDesc": "Create a session with fully custom permissions.",
   "cmps.connect.CustomSessionPage.permissions": "Permissions",
+  "cmps.connect.CustomSessionPage.addBalance": "Add Balance",
   "cmps.connect.CustomSessionPage.permView": "View Activity",
   "cmps.connect.CustomSessionPage.permViewDesc": "See node history and activity.",
   "cmps.connect.CustomSessionPage.permOpen": "Open Channel",
@@ -86,6 +89,7 @@
   "cmps.connect.SessionRow.pairTerminal": "Pair with Lightning Terminal",
   "cmps.connect.SessionRow.generateQR": "Generate QR Code",
   "cmps.connect.SessionRow.revoke": "Revoke Session",
+  "cmps.connect.SessionRow.pairCustodial": "Custodial accounts can not be used with Terminal",
   "cmps.connect.QRCodeModal.title": "LNC QR",
   "cmps.connect.QRCodeModal.desc": "Scan to connect to Terminal from your mobile phone.",
   "cmps.home.HomePage.pageTitle": "Home",