Custom user permissions UI

app/package.json

@@ -21,6 +21,7 @@
     "@emotion/react": "11.4.0",
     "@emotion/styled": "11.3.0",
     "@improbable-eng/grpc-web": "0.14.0",
+    "@types/react-collapse": "^5.0.1",
     "big.js": "6.1.1",
     "bootstrap": "4.6.1",
     "buffer": "6.0.3",
@@ -40,8 +41,10 @@
     "qrcode.react": "^3.1.0",
     "rc-dialog": "^8.9.0",
     "rc-select": "11.5.0",
+    "rc-switch": "^4.0.0",
     "rc-tooltip": "4.2.1",
     "react": "17.0.2",
+    "react-collapse": "^5.1.1",
     "react-dom": "17.0.2",
     "react-i18next": "11.7.0",
     "react-router-dom": "^6.3.0",

app/src/App.scss

@@ -18,6 +18,7 @@
 @import '../node_modules/rc-tooltip/assets/bootstrap_white.css';
 @import '../node_modules/rc-dialog/assets/index.css';
 @import './assets/styles/rc-select.scss';
+@import './assets/styles/rc-switch.scss';
 
 // react-toastify styles
 @import '../node_modules/react-toastify/dist/ReactToastify.css';

app/src/AppRoutes.tsx

@@ -9,6 +9,9 @@ const LazyHistoryPage = React.lazy(() => import('components/history/HistoryPage'
 const LazyPoolPage = React.lazy(() => import('components/pool/PoolPage'));
 const LazySettingsPage = React.lazy(() => import('components/settings/SettingsPage'));
 const LazyConnectPage = React.lazy(() => import('components/connect/ConnectPage'));
+const LazyCustomSessionPage = React.lazy(
+  () => import('components/connect/CustomSessionPage'),
+);
 
 const AppRoutes: React.FC = () => {
   return (
@@ -63,6 +66,14 @@ const AppRoutes: React.FC = () => {
             </Layout>
           }
         />
+        <Route
+          path="connect/custom"
+          element={
+            <Layout>
+              <LazyCustomSessionPage />
+            </Layout>
+          }
+        />
       </Route>
     </Routes>
   );

app/src/api/lit.ts

@@ -1,6 +1,9 @@
-import * as LIT from 'types/generated/lit-sessions_pb';
+import * as ACCOUNT from 'types/generated/lit-accounts_pb';
+import * as SESSION from 'types/generated/lit-sessions_pb';
+import { Accounts } from 'types/generated/lit-accounts_pb_service';
 import { Sessions } from 'types/generated/lit-sessions_pb_service';
 import { b64 } from 'util/strings';
+import { MAX_DATE } from 'util/constants';
 import BaseApi from './base';
 import GrpcClient from './grpc';
 
@@ -16,24 +19,46 @@ class LitApi extends BaseApi<LitEvents> {
     this._grpc = grpc;
   }
 
+  /**
+   * call the Lit `CreateAccount` RPC and return the response
+   */
+  async createAccount(
+    accountBalance: number,
+    expirationDate: Date,
+  ): Promise<ACCOUNT.CreateAccountResponse.AsObject> {
+    const req = new ACCOUNT.CreateAccountRequest();
+    req.setAccountBalance(accountBalance.toString());
+
+    if (expirationDate === MAX_DATE) {
+      req.setExpirationDate('0');
+    } else {
+      req.setExpirationDate(Math.floor(expirationDate.getTime() / 1000).toString());
+    }
+
+    const res = await this._grpc.request(Accounts.CreateAccount, req, this._meta);
+    return res.toObject();
+  }
+
   /**
    * call the Lit `AddSession` RPC and return the response
    */
   async addSession(
     label: string,
-    sessionType: LIT.SessionTypeMap[keyof LIT.SessionTypeMap],
+    sessionType: SESSION.SessionTypeMap[keyof SESSION.SessionTypeMap],
     expiry: Date,
     mailboxServerAddr: string,
     devServer: boolean,
-    macaroonCustomPermissions: Array<LIT.MacaroonPermission>,
-  ): Promise<LIT.AddSessionResponse.AsObject> {
-    const req = new LIT.AddSessionRequest();
+    macaroonCustomPermissions: Array<SESSION.MacaroonPermission>,
+    accountId: string,
+  ): Promise<SESSION.AddSessionResponse.AsObject> {
+    const req = new SESSION.AddSessionRequest();
     req.setLabel(label);
     req.setSessionType(sessionType);
     req.setExpiryTimestampSeconds(Math.floor(expiry.getTime() / 1000).toString());
     req.setMailboxServerAddr(mailboxServerAddr);
     req.setDevServer(devServer);
     req.setMacaroonCustomPermissionsList(macaroonCustomPermissions);
+    req.setAccountId(accountId);
 
     const res = await this._grpc.request(Sessions.AddSession, req, this._meta);
     return res.toObject();
@@ -42,8 +67,8 @@ class LitApi extends BaseApi<LitEvents> {
   /**
    * call the Lit `ListSessions` RPC and return the response
    */
-  async listSessions(): Promise<LIT.ListSessionsResponse.AsObject> {
-    const req = new LIT.ListSessionsRequest();
+  async listSessions(): Promise<SESSION.ListSessionsResponse.AsObject> {
+    const req = new SESSION.ListSessionsRequest();
     const res = await this._grpc.request(Sessions.ListSessions, req, this._meta);
     return res.toObject();
   }
@@ -53,8 +78,8 @@ class LitApi extends BaseApi<LitEvents> {
    */
   async revokeSession(
     localPublicKey: string,
-  ): Promise<LIT.RevokeSessionResponse.AsObject> {
-    const req = new LIT.RevokeSessionRequest();
+  ): Promise<SESSION.RevokeSessionResponse.AsObject> {
+    const req = new SESSION.RevokeSessionRequest();
     req.setLocalPublicKey(b64(localPublicKey));
     const res = await this._grpc.request(Sessions.RevokeSession, req, this._meta);
     return res.toObject();

app/src/assets/styles/rc-switch.scss

@@ -0,0 +1,117 @@
+$switchPrefixCls: rc-switch;
+
+$duration: 0.3s;
+
+.rc-switch {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 44px;
+  height: 22px;
+  line-height: 20px;
+  padding: 0;
+  vertical-align: middle;
+  border-radius: 20px 20px;
+  border: 1px solid #ccc;
+  background-color: #ccc;
+  cursor: pointer;
+  transition: all $duration cubic-bezier(0.35, 0, 0.25, 1);
+
+  &-inner {
+    color: #fff;
+    font-size: 12px;
+    position: absolute;
+    left: 24px;
+    top: 0;
+  }
+
+  &:after {
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    left: 2px;
+    top: 1px;
+    border-radius: 50% 50%;
+    background-color: #fff;
+    content: ' ';
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
+    transform: scale(1);
+    transition: left $duration cubic-bezier(0.35, 0, 0.25, 1);
+    animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
+    animation-duration: $duration;
+    animation-name: rcSwitchOff;
+  }
+
+  &:hover:after {
+    transform: scale(1.1);
+    animation-name: rcSwitchOn;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px tint(#2db7f5, 80%);
+    outline: none;
+  }
+
+  &-checked {
+    border: 1px solid #87d068;
+    background-color: #87d068;
+
+    .rc-switch-inner {
+      left: 6px;
+    }
+
+    &:after {
+      left: 22px;
+    }
+  }
+
+  &-disabled {
+    cursor: no-drop;
+    background: #ccc;
+    border-color: #ccc;
+
+    &:after {
+      background: #9e9e9e;
+      animation-name: none;
+      cursor: no-drop;
+    }
+
+    &:hover:after {
+      transform: scale(1);
+      animation-name: none;
+    }
+  }
+
+  &-label {
+    display: inline-block;
+    line-height: 20px;
+    font-size: 14px;
+    padding-left: 10px;
+    vertical-align: middle;
+    white-space: normal;
+    pointer-events: none;
+    user-select: text;
+  }
+}
+
+@keyframes rcSwitchOn {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1.1);
+  }
+}
+
+@keyframes rcSwitchOff {
+  0% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

app/src/components/base/grid.tsx

@@ -1,5 +1,21 @@
 import React, { CSSProperties } from 'react';
 
+/**
+ * This component represents a container in the bootstrap Grid layout
+ */
+export const Container: React.FC<{
+  className?: string;
+  style?: CSSProperties;
+}> = ({ children, className, style }) => {
+  const cn: string[] = ['container'];
+  className && cn.push(className);
+  return (
+    <div className={cn.join(' ')} style={style}>
+      {children}
+    </div>
+  );
+};
+
 /**
  * This component represents a Row in the bootstrap Grid layout
  */

app/src/components/common/FormDate.tsx

@@ -0,0 +1,76 @@
+import React, { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+const Styled = {
+  Wrapper: styled.div`
+    position: relative;
+    font-family: ${props => props.theme.fonts.work.light};
+    font-weight: 300;
+    font-size: ${props => props.theme.sizes.s};
+    color: ${props => props.theme.colors.offWhite};
+  `,
+  Input: styled.input`
+    color: ${props => props.theme.colors.offWhite};
+    background-color: ${props => props.theme.colors.overlay};
+    border-width: 0;
+    border-bottom: 1px solid ${props => props.theme.colors.gray};
+    padding: 5px 40px 5px 5px;
+    width: 100%;
+
+    &:active,
+    &:focus {
+      outline: none;
+      border-bottom-color: ${props => props.theme.colors.white};
+    }
+
+    &::placeholder {
+      color: ${props => props.theme.colors.gray};
+    }
+
+    // Fix color of the date picker icon in chrome
+    ::-webkit-calendar-picker-indicator {
+      filter: invert(1);
+    }
+  `,
+  Extra: styled.div`
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: transparent;
+    padding: 5px;
+  `,
+};
+
+interface Props {
+  label?: string;
+  value?: string;
+  extra?: ReactNode;
+  placeholder?: string;
+  className?: string;
+  onChange?: (value: string) => void;
+}
+
+const FormDate: React.FC<Props> = ({
+  label,
+  value,
+  placeholder,
+  extra,
+  className,
+  onChange,
+}) => {
+  const { Wrapper, Input, Extra } = Styled;
+  return (
+    <Wrapper className={className}>
+      <Input
+        type="date"
+        value={value}
+        onChange={e => onChange && onChange(e.target.value)}
+        placeholder={placeholder}
+        aria-label={label}
+      />
+      {extra && <Extra>{extra}</Extra>}
+    </Wrapper>
+  );
+};
+
+export default FormDate;

app/src/components/common/FormField.tsx

@@ -22,12 +22,13 @@ interface Props {
   info?: ReactNode;
   error?: ReactNode;
   tip?: string;
+  className?: string;
 }
 
-const FormField: React.FC<Props> = ({ label, info, error, tip, children }) => {
+const FormField: React.FC<Props> = ({ label, info, error, tip, children, className }) => {
   const { Wrapper, Info } = Styled;
   return (
-    <Wrapper>
+    <Wrapper className={className}>
       {label && (
         <HeaderFour>
           {label}

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}