settings: add pubkey/alias/url to the settings page

jamaljsr · jamaljsr · commit 8be4b74bed1a · 2020-06-30T01:52:43.000-04:00
diff --git a/app/package.json b/app/package.json
@@ -22,6 +22,7 @@
     "@improbable-eng/grpc-web": "0.12.0",
     "big.js": "5.2.2",
     "bootstrap": "4.5.0",
+    "copy-to-clipboard": "3.3.1",
     "date-fns": "2.14.0",
     "debug": "4.1.1",
     "emotion-theming": "10.0.27",
diff --git a/app/src/__stories__/StoryWrapper.tsx b/app/src/__stories__/StoryWrapper.tsx
@@ -6,6 +6,7 @@ import { AuthenticationError } from 'util/errors';
 import { sampleApiResponses } from 'util/tests/sampleData';
 import { createStore, StoreProvider } from 'store';
 import { Background } from 'components/base';
+import AlertContainer from 'components/common/AlertContainer';
 import { ThemeProvider } from 'components/theme';
 
 // mock the GRPC client to return sample data instead of making an actual request
@@ -75,6 +76,7 @@ const StoryWrapper: React.FC<{
             {store.initialized ? <div style={style}>{children}</div> : null}
           </Background>
         </Router>
+        <AlertContainer />
       </ThemeProvider>
     </StoreProvider>
   );
diff --git a/app/src/__tests__/components/settings/SettingsPage.spec.tsx b/app/src/__tests__/components/settings/SettingsPage.spec.tsx
@@ -1,14 +1,18 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
+import copyToClipboard from 'copy-to-clipboard';
 import { renderWithProviders } from 'util/tests';
 import { createStore, Store } from 'store';
 import SettingsPage from 'components/settings/SettingsPage';
 
+jest.mock('copy-to-clipboard');
+
 describe('SettingsPage', () => {
   let store: Store;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     store = createStore();
+    await store.nodeStore.fetchInfo();
     store.uiStore.showSettings('');
   });
 
@@ -45,4 +49,44 @@ describe('SettingsPage', () => {
     fireEvent.click(getByText('Channel Balance Mode'));
     expect(store.router.location.pathname).toEqual('/settings/balance');
   });
+
+  it('should display the My Node list', () => {
+    const { getByText } = render();
+    const { pubkeyLabel, alias, urlLabel } = store.nodeStore;
+    expect(getByText('My Node')).toBeInTheDocument();
+    expect(getByText('Pubkey')).toBeInTheDocument();
+    expect(getByText(pubkeyLabel)).toBeInTheDocument();
+    expect(getByText('Alias')).toBeInTheDocument();
+    expect(getByText(alias)).toBeInTheDocument();
+    expect(getByText('Url')).toBeInTheDocument();
+    expect(getByText(urlLabel)).toBeInTheDocument();
+  });
+
+  it('should not display the url if it is not defined', () => {
+    const { queryByText } = render();
+    expect(queryByText('Url')).toBeInTheDocument();
+    store.nodeStore.url = '';
+    expect(queryByText('Url')).not.toBeInTheDocument();
+    // an invalid url
+    store.nodeStore.url = 'url-without-at-sign';
+    expect(queryByText('Url')).not.toBeInTheDocument();
+  });
+
+  it('should copy the pubkey to the clipboard', async () => {
+    const { getByText } = render();
+    fireEvent.click(getByText('Pubkey'));
+    expect(copyToClipboard).toBeCalledWith(store.nodeStore.pubkey);
+  });
+
+  it('should copy the alias to the clipboard', async () => {
+    const { getByText } = render();
+    fireEvent.click(getByText('Alias'));
+    expect(copyToClipboard).toBeCalledWith(store.nodeStore.alias);
+  });
+
+  it('should copy the url to the clipboard', async () => {
+    const { getByText } = render();
+    fireEvent.click(getByText('Url'));
+    expect(copyToClipboard).toBeCalledWith(store.nodeStore.url);
+  });
 });
diff --git a/app/src/assets/icons/copy.svg b/app/src/assets/icons/copy.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy">
+  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+</svg>
diff --git a/app/src/components/base/icons.tsx b/app/src/components/base/icons.tsx
@@ -8,6 +8,7 @@ import { ReactComponent as ChevronsRightIcon } from 'assets/icons/chevrons-right
 import { ReactComponent as ChevronsIcon } from 'assets/icons/chevrons.svg';
 import { ReactComponent as ClockIcon } from 'assets/icons/clock.svg';
 import { ReactComponent as CloseIcon } from 'assets/icons/close.svg';
+import { ReactComponent as CopyIcon } from 'assets/icons/copy.svg';
 import { ReactComponent as DotIcon } from 'assets/icons/dot.svg';
 import { ReactComponent as DownloadIcon } from 'assets/icons/download.svg';
 import { ReactComponent as MaximizeIcon } from 'assets/icons/maximize.svg';
@@ -70,6 +71,7 @@ export const Chevrons = Icon.withComponent(ChevronsIcon);
 export const ChevronsLeft = Icon.withComponent(ChevronsLeftIcon);
 export const ChevronsRight = Icon.withComponent(ChevronsRightIcon);
 export const Close = Icon.withComponent(CloseIcon);
+export const Copy = Icon.withComponent(CopyIcon);
 export const Dot = Icon.withComponent(DotIcon);
 export const Menu = Icon.withComponent(MenuIcon);
 export const Minimize = Icon.withComponent(MinimizeIcon);
diff --git a/app/src/components/common/AlertContainer.tsx b/app/src/components/common/AlertContainer.tsx
@@ -62,7 +62,7 @@ interface AlertToastProps {
 const AlertToast: React.FC<AlertToastProps> = ({ alert, onClose }) => {
   // use useEffect to only run the side-effect one time
   useEffect(() => {
-    const { id, type, message, title } = alert;
+    const { id, type, message, title, ms: autoClose } = alert;
     // create a component to display inside of the toast
     const { Body, Title, Message } = Styled;
     const body = (
@@ -72,7 +72,7 @@ const AlertToast: React.FC<AlertToastProps> = ({ alert, onClose }) => {
       </Body>
     );
     // display the toast popup containing the styled body
-    toast(body, { type, onClose: () => onClose(id) });
+    toast(body, { type, autoClose, onClose: () => onClose(id) });
   }, [alert, onClose]);
 
   // do not render anything to the dom. the toast() func will display the content
diff --git a/app/src/components/settings/GeneralSettings.tsx b/app/src/components/settings/GeneralSettings.tsx
@@ -17,17 +17,20 @@ const Styled = {
 
 const GeneralSettings: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.settings.GeneralSettings');
-  const { uiStore, settingsStore } = useStore();
+  const { uiStore, settingsStore, nodeStore } = useStore();
 
   const handleUnit = useCallback(() => uiStore.showSettings('unit'), [uiStore]);
   const handleBalance = useCallback(() => uiStore.showSettings('balance'), [uiStore]);
+  const handleCopyPubkey = useCallback(() => nodeStore.copy('pubkey'), [nodeStore]);
+  const handleCopyAlias = useCallback(() => nodeStore.copy('alias'), [nodeStore]);
+  const handleCopyUrl = useCallback(() => nodeStore.copy('url'), [nodeStore]);
 
   const { Wrapper, Content } = Styled;
   return (
     <Wrapper>
       <PageHeader title={l('pageTitle')} />
       <Content>
-        <HeaderFour>{l('title')}</HeaderFour>
+        <HeaderFour>{l('general')}</HeaderFour>
         <SettingItem
           name={l('bitcoinUnit')}
           value={formatUnit(settingsStore.unit)}
@@ -43,6 +46,29 @@ const GeneralSettings: React.FC = () => {
           icon="arrow"
         />
       </Content>
+      <Content>
+        <HeaderFour>{l('myNode')}</HeaderFour>
+        <SettingItem
+          name={l('pubkey')}
+          value={nodeStore.pubkeyLabel}
+          onClick={handleCopyPubkey}
+          icon="copy"
+        />
+        <SettingItem
+          name={l('alias')}
+          value={nodeStore.alias}
+          onClick={handleCopyAlias}
+          icon="copy"
+        />
+        {nodeStore.urlLabel && (
+          <SettingItem
+            name={l('url')}
+            value={nodeStore.urlLabel}
+            onClick={handleCopyUrl}
+            icon="copy"
+          />
+        )}
+      </Content>
     </Wrapper>
   );
 };
diff --git a/app/src/components/settings/SettingItem.tsx b/app/src/components/settings/SettingItem.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ArrowRight, RadioButton } from 'components/base';
+import { ArrowRight, Copy, RadioButton } from 'components/base';
 import { styled } from 'components/theme';
 
 const Styled = {
@@ -31,7 +31,7 @@ const Styled = {
 interface Props {
   name: string;
   value?: string;
-  icon: 'arrow' | 'radio';
+  icon: 'arrow' | 'radio' | 'copy';
   checked?: boolean;
   onClick: () => void;
 }
@@ -46,6 +46,7 @@ const SettingItem: React.FC<Props> = ({ name, value, icon, checked, onClick }) =
         <RadioButton role="switch" checked={checked} aria-checked={checked} />
       )}
       {icon === 'arrow' && <ArrowRight size="large" />}
+      {icon === 'copy' && <Copy size="large" />}
     </Wrapper>
   );
 };
diff --git a/app/src/i18n/locales/en-US.json b/app/src/i18n/locales/en-US.json
@@ -66,10 +66,14 @@
   "cmps.settings.BalanceSettings.pageTitle": "Channel Balance Mode",
   "cmps.settings.BalanceSettings.backText": "Settings",
   "cmps.settings.BalanceSettings.title": "Optimize For",
-  "cmps.settings.GeneralSettings.title": "General",
+  "cmps.settings.GeneralSettings.general": "General",
   "cmps.settings.GeneralSettings.bitcoinUnit": "Bitcoin Unit",
   "cmps.settings.GeneralSettings.balances": "Channel Balance Mode",
   "cmps.settings.GeneralSettings.balancesValue": "Optimize for {{mode}}",
+  "cmps.settings.GeneralSettings.myNode": "My Node",
+  "cmps.settings.GeneralSettings.pubkey": "Pubkey",
+  "cmps.settings.GeneralSettings.alias": "Alias",
+  "cmps.settings.GeneralSettings.url": "Url",
   "cmps.settings.GeneralSettings.pageTitle": "Settings",
   "cmps.settings.UnitSettings.pageTitle": "Bitcoin Unit",
   "cmps.settings.UnitSettings.backText": "Settings",
diff --git a/app/src/store/stores/nodeStore.ts b/app/src/store/stores/nodeStore.ts
@@ -1,7 +1,9 @@
-import { action, observable, runInAction, toJS } from 'mobx';
+import { action, computed, observable, runInAction, toJS } from 'mobx';
 import { Transaction } from 'types/generated/lnd_pb';
 import Big from 'big.js';
+import copyToClipboard from 'copy-to-clipboard';
 import debounce from 'lodash/debounce';
+import { ellipseInside } from 'util/strings';
 import { Store } from 'store';
 import { Wallet } from '../models';
 
@@ -20,6 +22,8 @@ export default class NodeStore {
   @observable pubkey = '';
   /** the alias of the LND node */
   @observable alias = '';
+  /** the url of the LND node */
+  @observable url = '';
   /** the chain that the LND node is connected to */
   @observable chain: NodeChain = 'bitcoin';
   /** the network that the LND node is connected to */
@@ -31,6 +35,31 @@ export default class NodeStore {
     this._store = store;
   }
 
+  /** the pubkey shortened to 12 chars with ellipses inside */
+  @computed get pubkeyLabel() {
+    return ellipseInside(this.pubkey);
+  }
+
+  /** the url with the pubkey shortened to 12 chars with ellipses inside */
+  @computed get urlLabel() {
+    if (!this.url) return '';
+
+    const [pubkey, host] = this.url.split('@');
+    if (!host) return '';
+
+    return `${ellipseInside(pubkey)}@${host}`;
+  }
+
+  /**
+   * Copies the value specified by the key to the user's clipboard
+   */
+  @action.bound
+  copy(key: 'pubkey' | 'alias' | 'url') {
+    copyToClipboard(this[key]);
+    const msg = `Copied ${key} to clipboard`;
+    this._store.uiStore.notify(msg, '', 'success');
+  }
+
   /**
    * fetch wallet balances from the LND RPC
    */
@@ -46,6 +75,9 @@ export default class NodeStore {
           this.chain = info.chainsList[0].chain as NodeChain;
           this.network = info.chainsList[0].network as NodeNetwork;
         }
+        if (info.urisList && info.urisList.length > 0) {
+          this.url = info.urisList[0];
+        }
         this._store.log.info('updated nodeStore info', toJS(this));
       });
     } catch (error) {
diff --git a/app/src/store/stores/uiStore.ts b/app/src/store/stores/uiStore.ts
@@ -74,11 +74,16 @@ export default class UiStore {
 
   /** adds a alert to the store */
   @action.bound
-  notify(message: string, title?: string) {
-    const alert: Alert = { id: Date.now(), type: 'error', message, title };
+  notify(message: string, title?: string, type: Alert['type'] = 'error') {
+    const alert: Alert = { id: Date.now(), type, message, title };
+    if (type === 'success') alert.ms = 3000;
     this.alerts.set(alert.id, alert);
     this._store.log.info('Added alert', toJS(this.alerts));
-    this._store.log.error(`[${title}] ${message}`);
+    if (type === 'error') {
+      this._store.log.error(`[${title}] ${message}`);
+    } else {
+      this._store.log.info(`[${title}] ${message}`);
+    }
   }
 
   /** removes an existing alert */
diff --git a/app/src/types/state.ts b/app/src/types/state.ts
@@ -35,4 +35,6 @@ export interface Alert {
   type: 'info' | 'success' | 'warning' | 'error' | 'default';
   title?: string;
   message: string;
+  /** the number of milliseconds before the toast closes automatically */
+  ms?: number;
 }
diff --git a/app/yarn.lock b/app/yarn.lock
@@ -4905,7 +4905,7 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
-copy-to-clipboard@^3.0.8:
+copy-to-clipboard@3.3.1, copy-to-clipboard@^3.0.8:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
   integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
