Siderus · koalalorenzo · Aug 22, 2018 · Aug 22, 2018 · Aug 22, 2018
diff --git a/app/api.js b/app/api.js
@@ -2,7 +2,6 @@ import byteSize from 'byte-size'
 import ipfsAPI from 'ipfs-api'
 import { join, parse } from 'path'
 import { createWriteStream, mkdirSync, statSync } from 'fs'
-import multiaddr from 'multiaddr'
 import request from 'request-promise-native'
 import pjson from '../package.json'
 import gateways from './gateways.json'
@@ -526,8 +525,18 @@ export function publishToIPNS (hash) {
  */
 export function connectTo (strMultiddr) {
   if (!IPFS_CLIENT) return Promise.reject(ERROR_IPFS_UNAVAILABLE)
-  const addr = multiaddr(strMultiddr)
-  return IPFS_CLIENT.swarm.connect(addr)
+  return IPFS_CLIENT.swarm.connect(strMultiddr)
+    .catch(reportAndReject)
+}
+
+/**
+ * add a node to the bootstrap list by specifying a str multiaddress,
+ * to easily connect to it everytime the daemon starts
+ * example: addBootstrapAddr("/ip4/192.168.0.22/tcp/4001/ipfs/Qm...")
+ */
+export function addBootstrapAddr (strMultiddr) {
+  if (!IPFS_CLIENT) return Promise.reject(ERROR_IPFS_UNAVAILABLE)
+  return IPFS_CLIENT.bootstrap.add(strMultiddr)
     .catch(reportAndReject)
 }
 

diff --git a/app/api.test.js b/app/api.test.js
@@ -1,6 +1,5 @@
 import * as api from './api'
 import ipfsApi from 'ipfs-api'
-import multiaddr from 'multiaddr'
 import request from 'request-promise-native'
 import pjson from '../package'
 
@@ -174,7 +173,7 @@ describe('api.js', () => {
         })
     })
 
-    it('should connect to a node given a multiaddr', () => {
+    it('should connect to a node given a string multiaddr', () => {
       const address = '/ip4/0.0.0.0/tcp/4001/ipfs/QmXbUn6BD4'
 
       // mock
@@ -187,7 +186,34 @@ describe('api.js', () => {
 
       // run
       return api.connectTo(address).then(() => {
-        expect(connect).toHaveBeenCalledWith(multiaddr(address))
+        expect(connect).toHaveBeenCalledWith(address)
+      })
+    })
+  })
+
+  describe('addBootstrapAddr', () => {
+    it('should reject when IPFS is not started', () => {
+      api.setClientInstance(null)
+      return api.addBootstrapAddr('/ip4/0.0.0.0/tcp/4001/')
+        .catch(err => {
+          expect(err).toBe(ERROR_IPFS_UNAVAILABLE)
+        })
+    })
+
+    it('should add the node to the bootstrap list', () => {
+      const address = '/ip4/0.0.0.0/tcp/4001/ipfs/QmXbUn6BD4'
+
+      // mock
+      const add = jest.fn().mockReturnValue(Promise.resolve())
+      api.setClientInstance({
+        bootstrap: {
+          add
+        }
+      })
+
+      // run
+      return api.addBootstrapAddr(address).then(() => {
+        expect(add).toHaveBeenCalledWith(address)
       })
     })
   })

diff --git a/app/windows/Settings/Components/PeersPanel.jsx b/app/windows/Settings/Components/PeersPanel.jsx
@@ -0,0 +1,101 @@
+import React from 'react'
+import { remote } from 'electron'
+import { observer } from 'mobx-react'
+import { Pane, Button, CheckBox } from 'react-photonkit'
+import Input from '../../../components/Input'
+import { connectTo, addBootstrapAddr } from '../../../api'
+
+@observer
+class PeersPanel extends React.Component {
+  initialState = {
+    nodeToConnect: '',
+    addToBootstrap: false
+  }
+
+  state = this.initialState
+
+  _handleConnectToNode = () => {
+    const { nodeToConnect, addToBootstrap } = this.state
+
+    Promise.all([
+      connectTo(nodeToConnect),
+      addToBootstrap ? addBootstrapAddr(nodeToConnect) : false
+    ])
+      .then((res) => {
+        remote.dialog.showMessageBox({
+          type: 'info',
+          message: 'Connected successfully!',
+          buttons: ['Ok']
+        })
+        this.setState(this.initialState)
+      })
+      .catch(err => {
+        console.error(err)
+        remote.dialog.showMessageBox({
+          type: 'error',
+          message: `Something went wrong! \n${err}`,
+          buttons: ['Ok']
+        })
+      })
+  }
+
+  render () {
+    if (this.props.navigationStore.selected !== 2) return null
+    if (!this.props.informationStore) return null
+    if (!this.props.informationStore.loaded) return null
+
+    const { addresses } = this.props.informationStore.peer
+    let nonLocalHostAdresses = addresses.filter(addr =>
+      !addr.includes('::1') && !addr.includes('127.0.0.1')
+    )
+
+    // reverse the array to show the public ip first
+    nonLocalHostAdresses = nonLocalHostAdresses.reverse()
+
+    const { nodeToConnect, addToBootstrap } = this.state
+
+    return (
+      <Pane className="settings">
+        <Input
+          type='text'
+          label={'Connect to a node:'}
+          value={nodeToConnect}
+          onChange={event => { this.setState({ nodeToConnect: event.target.value }) }}
+          button={
+            <Button
+              text="Connect"
+              glyph='paper-plane'
+              onClick={this._handleConnectToNode}
+            />
+          }
+        />
+        <CheckBox
+          label="Add to bootstrap nodes"
+          checked={addToBootstrap}
+          onChange={() => { this.setState({ addToBootstrap: !addToBootstrap }) }}
+        />
+        <br />
+        <p>Your node addresses:</p>
+        {
+          nonLocalHostAdresses.map(address => (
+            <Input
+              key={address}
+              type='text'
+              value={address}
+              // using onChange instead of readOnly to allow the input to be selected
+              onChange={() => { }}
+              button={
+                <Button
+                  glyph='doc-text'
+                  onClick={() => { remote.clipboard.writeText(address) }}
+                />
+              }
+            />
+          ))
+        }
+      </Pane>
+    )
+  }
+}
+
+export default PeersPanel
diff --git a/app/windows/Settings/Components/Sidebar.jsx b/app/windows/Settings/Components/Sidebar.jsx
@@ -20,6 +20,7 @@ class Sidebar extends React.Component {
           <NavTitle key='title'>Settings and Info</NavTitle>
           <NavGroupItem key='con' glyph="rss" text="Connectivity" eventKey={0} />
           <NavGroupItem key= 'rep' glyph="database" text="Repository" eventKey={1} />
+          <NavGroupItem key= 'peers' glyph="users" text="Peers" eventKey={2} />
         </NavGroup>
       </Pane>
     )

diff --git a/app/windows/Settings/renderer.jsx b/app/windows/Settings/renderer.jsx
@@ -17,6 +17,7 @@ import { initIPFSClient, promiseIPFSReady } from '../../api'
 import Sidebar from './Components/Sidebar'
 import RepositoryPanel from './Components/RepositoryPanel'
 import ConnectivityPanel from './Components/ConnectivityPanel'
+import PeersPanel from './Components/PeersPanel'
 
 // Load MobX Stores
 import NavigationStore from './Stores/Navigation'
@@ -46,6 +47,11 @@ class SettingsWindow extends React.Component {
               informationStore={InformationStore}
               navigationStore={NavigationStore}
             />
+
+            <PeersPanel
+              informationStore={InformationStore}
+              navigationStore={NavigationStore}
+            />
           </PaneGroup>
         </Content>