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/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/OverlayFormWrap.tsx

@@ -0,0 +1,71 @@
+import React, { ReactNode, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import styled from '@emotion/styled';
+import { Button, Column, Container, Row, Close } from 'components/base';
+import { DisplayLarge, Header } from './v2/Text';
+
+const Styled = {
+  Wrapper: styled.div`
+    h4 {
+      color: ${props => props.theme.colors.offWhite};
+    }
+  `,
+  BackLink: styled(Button)`
+    display: inline-block;
+    position: absolute;
+    top: 30px;
+    right: 0px;
+    left: auto;
+    z-index: 10;
+
+    @media (${props => props.theme.breakpoints.m}) {
+      top: 30px;
+      right: 0px;
+    }
+  `,
+  Title: styled(DisplayLarge)`
+    font-weight: ${props => props.theme.fonts.open.bold};
+    margin-bottom: 16px;
+  `,
+  Content: styled.div``,
+};
+
+interface Props {
+  title: string;
+  description: ReactNode;
+  onBackClick?: () => void;
+}
+
+const OverlayFormWrap: React.FC<Props> = ({
+  title,
+  description,
+  onBackClick,
+  children,
+}) => {
+  // scroll to the top of the screen when this comp is mounted
+  useEffect(() => window.scrollTo(0, 0), []);
+
+  const { Wrapper, BackLink, Title, Content } = Styled;
+  return (
+    <Wrapper>
+      {onBackClick && (
+        <BackLink onClick={onBackClick} ghost borderless>
+          <Close />
+        </BackLink>
+      )}
+      <Container>
+        <Row>
+          <Column className="col-md-9 offset-md-1">
+            <Title bold>{title}</Title>
+            <Header muted space={32}>
+              {description}
+            </Header>
+            <Content>{children}</Content>
+          </Column>
+        </Row>
+      </Container>
+    </Wrapper>
+  );
+};
+
+export default observer(OverlayFormWrap);

app/src/components/common/v2/FormSwitch.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import styled from '@emotion/styled';
+import Switch from 'rc-switch';
+
+const Styled = {
+  Wrapper: styled.div``,
+  Switch: styled(Switch)`
+    &.rc-switch-checked {
+      border: 1px solid ${props => props.theme.colors.iris};
+      background-color: ${props => props.theme.colors.iris};
+    }
+  `,
+};
+
+interface Props {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+}
+
+const FormSelect: React.FC<Props> = ({ checked, onChange }) => {
+  const { Wrapper, Switch } = Styled;
+  return (
+    <Wrapper>
+      <Switch checked={checked} onChange={v => onChange && onChange(v)} />
+    </Wrapper>
+  );
+};
+
+export default observer(FormSelect);