connect: improve connect UX

Author: jamaljsr

app/src/assets/images/lightning-node-connect.svg

@@ -18,7 +18,7 @@ const Styled = {
 };
 
 interface Props {
-  label: string;
+  label?: string;
   info?: ReactNode;
   error?: ReactNode;
   tip?: string;
@@ -28,14 +28,16 @@ const FormField: React.FC<Props> = ({ label, info, error, tip, children }) => {
   const { Wrapper, Info } = Styled;
   return (
     <Wrapper>
-      <HeaderFour>
-        {label}
-        {tip && (
-          <Tip overlay={tip} placement="right" capitalize={false}>
-            <HelpCircle size="medium" />
-          </Tip>
-        )}
-      </HeaderFour>
+      {label && (
+        <HeaderFour>
+          {label}
+          {tip && (
+            <Tip overlay={tip} placement="right" capitalize={false}>
+              <HelpCircle size="medium" />
+            </Tip>
+          )}
+        </HeaderFour>
+      )}
       {children}
       <Info error={!!error}>{error || info}</Info>
     </Wrapper>

app/src/components/common/FormField.tsx

@@ -4,21 +4,30 @@ import styled from '@emotion/styled';
 import { usePrefixedTranslation } from 'hooks';
 import { MAX_DATE } from 'util/constants';
 import { useStore } from 'store';
-import { Button, Column, Row } from 'components/base';
+import { Button, Column, HeaderFour, Row } from 'components/base';
 import FormField from 'components/common/FormField';
 import FormInput from 'components/common/FormInput';
+import PurpleButton from './PurpleButton';
 
 const Styled = {
   Wrapper: styled.div``,
-  AddSection: styled.div`
-    text-align: center;
+  FormHeader: styled(HeaderFour)`
+    color: ${props => props.theme.colors.white};
   `,
-  ActionColumn: styled(Column)`
-    padding-top: 20px;
+  FormInput: styled(FormInput)`
+    > input {
+      font-family: ${props => props.theme.fonts.open.regular};
+      font-size: ${props => props.theme.sizes.m};
+      padding: 12px 16px;
+    }
   `,
 };
 
-const AddSession: React.FC = () => {
+interface Props {
+  primary?: boolean;
+}
+
+const AddSession: React.FC<Props> = ({ primary }) => {
   const { l } = usePrefixedTranslation('cmps.connect.AddSession');
   const { sessionStore } = useStore();
 
@@ -34,31 +43,30 @@ const AddSession: React.FC = () => {
     }
   }, [label]);
 
-  const { Wrapper, AddSection, ActionColumn } = Styled;
+  const { Wrapper, FormHeader, FormInput } = Styled;
   if (!editing) {
     return (
-      <AddSection>
-        <Button onClick={toggleEditing}>{l('create')}</Button>
-      </AddSection>
+      <PurpleButton tertiary={!primary} onClick={toggleEditing}>
+        {l('create')}
+      </PurpleButton>
     );
   }
 
   return (
     <Wrapper>
+      <FormHeader>{l('label')}</FormHeader>
       <Row>
-        <Column cols={6} className="offset-1">
-          <FormField label={l('label')}>
+        <Column cols={6}>
+          <FormField>
             <FormInput value={label} onChange={setLabel} placeholder={l('labelHint')} />
           </FormField>
         </Column>
-        <ActionColumn className="">
-          <Button primary onClick={handleSubmit}>
-            {l('common.submit')}
-          </Button>
+        <Column>
+          <PurpleButton onClick={handleSubmit}>{l('common.submit')}</PurpleButton>
           <Button ghost borderless onClick={toggleEditing}>
             {l('common.cancel')}
           </Button>
-        </ActionColumn>
+        </Column>
       </Row>
     </Wrapper>
   );

app/src/components/connect/AddSession.tsx

@@ -1,37 +1,63 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import styled from '@emotion/styled';
+import nodeConnectSvg from 'assets/images/lightning-node-connect.svg';
 import { usePrefixedTranslation } from 'hooks';
-import PageHeader from 'components/common/PageHeader';
+import { useStore } from 'store';
+import { Copy } from 'components/base';
 import AddSession from './AddSession';
+import PurpleButton from './PurpleButton';
 import SessionList from './SessionList';
 
 const Styled = {
   Wrapper: styled.section`
-    padding: 40px 0;
+    padding: 80px 0 0 80px;
+  `,
+  DisplayLarge: styled.div`
+    font-family: ${props => props.theme.fonts.open.semiBold};
+    font-size: 32px;
+    line-height: 40px;
+    margin-top: 32px;
+    margin-bottom: 16px;
   `,
   Description: styled.div`
-    margin: 60px;
+    margin-bottom: 32px;
   `,
-  Info: styled.div`
-    margin: 100px 60px;
-    color: ${props => props.theme.colors.gray};
-    text-align: center;
-    font-size: ${props => props.theme.sizes.s};
+  Divider: styled.div`
+    max-width: 640px;
+    border: 1px solid #384770;
+    margin: 32px 0;
   `,
 };
 
 const ConnectPage: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.connect.ConnectPage');
+  const { sessionStore } = useStore();
 
-  const { Wrapper, Description, Info } = Styled;
-  return (
+  const { Wrapper, DisplayLarge, Description, Divider } = Styled;
+  return !sessionStore.hasMultiple ? (
     <Wrapper>
-      <PageHeader title={l('pageTitle')} />
-      <Description>{l('description')}</Description>
+      <img src={nodeConnectSvg} alt={l('pageTitle')} />
+      <DisplayLarge>{l('pageTitle')}</DisplayLarge>
+      <Description>
+        {l('description1')}
+        <br />
+        {l('description2')}
+      </Description>
+      <PurpleButton onClick={sessionStore.copyFirstPhrase}>
+        <Copy />
+        {l('copyPhraseLabel')}
+      </PurpleButton>
+      <Divider />
+      <Description>{l('addlDesc')}</Description>
       <AddSession />
+    </Wrapper>
+  ) : (
+    <Wrapper>
+      <DisplayLarge>{l('pageTitle')}</DisplayLarge>
+      <Description>{l('description1')}</Description>
+      <AddSession primary />
       <SessionList />
-      <Info>{l('info')}</Info>
     </Wrapper>
   );
 };

app/src/components/connect/ConnectPage.tsx

@@ -0,0 +1,41 @@
+import styled from '@emotion/styled';
+
+interface Props {
+  tertiary?: boolean;
+}
+
+const PurpleButton = styled.button<Props>`
+  font-family: ${props => props.theme.fonts.open.regular};
+  font-size: ${props => props.theme.sizes.m};
+  font-weight: 600;
+  height: auto;
+  color: white;
+  background-color: #5d5fef;
+  border-width: 0;
+  border-radius: 4px;
+  padding: 14px 24px;
+
+  &:hover {
+    background-color: #3d40e7;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  ${props =>
+    props.tertiary &&
+    `
+    background-color: #384770;
+
+    &:hover {
+      background-color: #2E3A5C;
+    }
+  `}
+
+  > svg {
+    margin-right: 6px;
+  }
+`;
+
+export default PurpleButton;

app/src/components/connect/PurpleButton.tsx

@@ -8,7 +8,7 @@ import SessionRow, { ROW_HEIGHT, SessionRowHeader } from './SessionRow';
 
 const Styled = {
   Wrapper: styled.div`
-    margin: 100px 0;
+    margin: 40px 0;
   `,
 };
 

app/src/components/connect/SessionList.tsx

@@ -103,7 +103,7 @@ const SessionRow: React.FC<Props> = ({ session, style }) => {
   const { sessionStore } = useStore();
 
   const handleCopy = useCallback(() => {
-    sessionStore.copyPhrase(session.pairingSecretMnemonic);
+    sessionStore.copyPhrase(session.label, session.pairingSecretMnemonic);
   }, [session.pairingSecretMnemonic]);
 
   const handleRevoke = useCallback(() => {

app/src/components/connect/SessionRow.tsx

@@ -48,9 +48,9 @@ const Styled = {
 
 const NavItem: React.FC<{
   page: string;
-  preview?: boolean;
+  badge?: string;
   onClick: () => void;
-}> = observer(({ page, preview, onClick }) => {
+}> = observer(({ page, badge, onClick }) => {
   const { l } = usePrefixedTranslation('cmps.layout.NavMenu');
   const { router } = useStore();
   const className = router.location.pathname.startsWith(`${PUBLIC_URL}/${page}`)
@@ -61,9 +61,9 @@ const NavItem: React.FC<{
     <Styled.NavItem className={className}>
       <span onClick={onClick}>
         {l(page)}
-        {preview && (
+        {badge && (
           <sup>
-            <Badge muted>{l('common.preview')}</Badge>
+            <Badge muted>{badge}</Badge>
           </sup>
         )}
       </span>
@@ -82,9 +82,9 @@ const NavMenu: React.FC = () => {
       <Nav>
         <NavItem page="loop" onClick={appView.goToLoop} />
         <NavItem page="history" onClick={appView.goToHistory} />
-        <NavItem page="pool" preview onClick={appView.goToPool} />
+        <NavItem page="pool" badge={l('common.preview')} onClick={appView.goToPool} />
         <NavItem page="settings" onClick={appView.goToSettings} />
-        <NavItem page="connect" onClick={appView.goToConnect} />
+        <NavItem page="connect" badge={l('common.beta')} onClick={appView.goToConnect} />
       </Nav>
     </>
   );

app/src/components/layout/NavMenu.tsx

@@ -18,6 +18,7 @@
   "common.months": "month",
   "common.months_plural": "months",
   "common.preview": "preview",
+  "common.beta": "beta",
   "enums.BalanceMode.receive": "Receiving",
   "enums.BalanceMode.send": "Sending",
   "enums.BalanceMode.routing": "Routing",
@@ -30,14 +31,17 @@
   "cmps.common.PageHeader.exportTip": "Download CSV",
   "cmps.common.PageHeader.helpTip": "Take a Tour",
   "cmps.common.Wizard.backTip": "Back to Previous",
-  "cmps.connect.AddSession.create": "Create a New Session",
+  "cmps.connect.AddSession.create": "Create a new session",
   "cmps.connect.AddSession.label": "Label",
   "cmps.connect.AddSession.labelHint": "My First Session",
   "cmps.connect.AddSession.expiration": "Expiration",
   "cmps.connect.AddSession.expirationSuffix": "",
-  "cmps.connect.ConnectPage.pageTitle": "Terminal Connect",
-  "cmps.connect.ConnectPage.description": "Through the Terminal Connect page, you can create sessions which allow for you to connect to this Lightning Terminal node remotely from other applications, like Terminal Web. Copy the pairing phrase and paste it into the app in order to make the connection.",
+  "cmps.connect.ConnectPage.pageTitle": "Lightning Node Connect",
+  "cmps.connect.ConnectPage.description1": "Lightning Node Connect enables you to connect to this node from the web.",
+  "cmps.connect.ConnectPage.description2": "Copy the default pairing phrase below to paste it into your app to make your first connection.",
   "cmps.connect.ConnectPage.info": "You will need a unique session for each app you wish to connect.",
+  "cmps.connect.ConnectPage.copyPhraseLabel": "Copy Pairing Phrase",
+  "cmps.connect.ConnectPage.addlDesc": "If you’ve utilized your default pairing phrase, and want to create additional sessions.",
   "cmps.connect.SessionRowHeader.label": "Label",
   "cmps.connect.SessionRowHeader.type": "Type",
   "cmps.connect.SessionRowHeader.state": "State",
@@ -120,7 +124,7 @@
   "cmps.layout.NavMenu.history": "History",
   "cmps.layout.NavMenu.pool": "Lightning Pool",
   "cmps.layout.NavMenu.settings": "Settings",
-  "cmps.layout.NavMenu.connect": "Terminal Connect",
+  "cmps.layout.NavMenu.connect": "Lightning Node Connect",
   "cmps.NodeStatus.title": "Node Status",
   "cmps.NodeStatus.offchainTip": "Off-chain Funds",
   "cmps.NodeStatus.onchainTip": "On-chain Funds",

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

@@ -39,6 +39,11 @@ export default class SessionStore {
     return descending ? sessions.reverse() : sessions;
   }
 
+  /** indicates if there are more than one sessions active */
+  get hasMultiple() {
+    return this.sortedSessions.length > 1;
+  }
+
   /**
    * queries the LIT api to fetch the list of sessions and stores them
    * in the state
@@ -80,7 +85,7 @@ export default class SessionStore {
         const countText = count === 0 ? '' : `(${count})`;
         await this.addSession(`Default Session ${countText}`, MAX_DATE);
       }
-    } catch (error) {
+    } catch (error: any) {
       this._store.appView.handleError(error, 'Unable to fetch sessions');
     }
   }
@@ -113,9 +118,10 @@ export default class SessionStore {
       await this.fetchSessions();
 
       if (session) {
+        this.copyPhrase(session.label, session.pairingSecretMnemonic);
         return this.sessions.get(hex(session.localPublicKey));
       }
-    } catch (error) {
+    } catch (error: any) {
       this._store.appView.handleError(error, 'Unable to add session');
     }
   }
@@ -135,18 +141,30 @@ export default class SessionStore {
 
       // fetch all sessions to update the store's state
       await this.fetchSessions();
-    } catch (error) {
+    } catch (error: any) {
       this._store.appView.handleError(error, 'Unable to revoke the session');
     }
   }
 
   /**
    * Copies a pairing phrase to the clipboard
+   * @param label the session label
    * @param phrase the pairing phrase
    */
-  copyPhrase(phrase: string) {
+  copyPhrase(label: string, phrase: string) {
     copyToClipboard(phrase);
-    const msg = `Copied Pairing Phrase to clipboard`;
+    const msg = `Copied Pairing Phrase for '${label}' to clipboard`;
+    this._store.appView.notify(msg, '', 'success');
+  }
+
+  /**
+   * Copies a pairing phrase of the first session to the clipboard
+   */
+  copyFirstPhrase() {
+    if (this.sortedSessions.length === 0) return;
+    const { pairingSecretMnemonic, label } = this.sortedSessions[0];
+    copyToClipboard(pairingSecretMnemonic);
+    const msg = `Copied Pairing Phrase for '${label}' to clipboard`;
     this._store.appView.notify(msg, '', 'success');
   }
 }