feat: add connection

.gitignore

@@ -19,3 +19,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vscode

public/locales/en/notify.json

@@ -5,5 +5,7 @@
  "windowIpfsRequestFailed": "IPFS request failed. Please check your IPFS Companion settings.",
  "ipfsIsBack": "Normal IPFS service has resumed. Enjoy!",
  "filesEventFailed": "Failed to add files to IPFS. Please try again.",
- "folderExists": "A folder with that name already exists. Please choose another."
+ "folderExists": "A folder with that name already exists. Please choose another.",
+ "couldntConnectToSwarm": "Could not connect to the swarm.",
+ "connectedToSwarm": "Successfully connected to the swarm."
 }

public/locales/en/peers.json

@@ -4,5 +4,9 @@
  "peers": "Peers",
  "address": "Address",
  "location": "Location",
- "unknownLocation": "Unknown"
+ "unknownLocation": "Unknown",
+ "addConnection": "Add Connection",
+ "insertSwarmAddress": "Insert the swarm address you want to connect to.",
+ "add": "Add",
+ "example": "Example:"
 }

src/bundles/notify.js

@@ -50,6 +50,15 @@ const notify = {
  }
  }
 
+ if (action.type === 'SWARM_CONNECT_FAILED' || action.type === 'SWARM_CONNECT_FINISHED') {
+ return {
+ ...state,
+ show: true,
+ error: action.type === 'SWARM_CONNECT_FAILED',
+ eventId: action.type
+ }
+ }
+
  return state
  },
 
@@ -73,6 +82,14 @@ const notify = {
  return 'ipfsIsBack'
  }
 
+ if (eventId === 'SWARM_CONNECT_FAILED') {
+ return 'couldntConnectToSwarm'
+ }
+
+ if (eventId === 'SWARM_CONNECT_FINISHED') {
+ return 'connectedToSwarm'
+ }
+
  return eventId
  }
  ),

src/bundles/peers.js

@@ -23,6 +23,22 @@ bundle.selectPeersCount = createSelector(
  }
 )
 
+bundle.doConnectSwarm = addr => async ({ dispatch, getIpfs }) => {
+ dispatch({ type: 'SWARM_CONNECT_STARTED', payload: { addr } })
+ const ipfs = getIpfs()
+
+ try {
+ await ipfs.swarm.connect(addr)
+ } catch (err) {
+ return dispatch({
+ type: 'SWARM_CONNECT_FAILED',
+ payload: { addr, error: err }
+ })
+ }
+
+ dispatch({ type: 'SWARM_CONNECT_FINISHED', payload: { addr } })
+}
+
 // Update the peers if they are stale (appTime - lastSuccess > staleAfter)
 bundle.reactPeersFetchWhenIdle = createSelector(
  'selectPeersShouldUpdate',

src/peers/AddConnection/AddConnection.js

@@ -0,0 +1,73 @@
+import React from 'react'
+import { translate } from 'react-i18next'
+import { connect } from 'redux-bundler-react'
+import toUri from 'multiaddr-to-uri'
+
+import Icon from '../../icons/StrokeDecentralization'
+import Button from '../../components/button/Button'
+import Overlay from '../../components/overlay/Overlay'
+import TextInputModal from '../../components/text-input-modal/TextInputModal'
+
+class AddConnection extends React.Component {
+ state = {
+ open: false
+ }
+
+ toggleModal = () => {
+ this.setState({
+ open: !this.state.open
+ })
+ }
+
+ addConnection = (maddr) => {
+ this.props.doConnectSwarm(maddr)
+ this.toggleModal()
+ }
+
+ validate = (maddr) => {
+ try {
+ toUri(maddr)
+ return true
+ } catch (_) {
+ return false
+ }
+ }
+
+ getDescription = () => {
+ const { t } = this.props
+ const codeClass = 'w-90 mb1 pa1 bg-snow f7 charcoal-muted truncate'
+
+ return (
+ <div className='mb3 flex flex-column items-center'>
+ <p className='gray w-80'>{t('insertSwarmAddress')}</p>
+ <span className='w-80 mv2 f7 charcoal-muted'>{t('example')}</span>
+ <code className={codeClass}>/ip4/76.176.168.65/tcp/4001/ipfs/QmbBHw1Xx9pUpAbrVZUKTPL5Rsph5Q9GQhRvcWVBPFgGtC</code>
+ </div>
+ )
+ }
+
+ render () {
+ const { open } = this.state
+ const { t } = this.props
+
+ return (
+ <div>
+ <Button onClick={this.toggleModal} minWidth='160px' className='pointer bg-green white f6'>+ {t('addConnection')}</Button>
+
+ <Overlay show={open} onLeave={this.toggleModal}>
+ <TextInputModal
+ validate={this.validate}
+ onSubmit={this.addConnection}
+ onCancel={this.toggleModal}
+ submitText={t('add')}
+ icon={Icon}
+ title={t('addConnection')}
+ description={this.getDescription()}
+ />
+ </Overlay>
+ </div>
+ )
+ }
+}
+
+export default connect('doConnectSwarm', translate('peers')(AddConnection))

src/peers/PeersPage.js

@@ -6,12 +6,18 @@ import { translate } from 'react-i18next'
 import Box from '../components/box/Box'
 import WorldMap from './WorldMap/WorldMap'
 import PeersTable from './PeersTable/PeersTable'
+import AddConnection from './AddConnection/AddConnection'
 
 const PeersPage = ({ t }) => (
  <div data-id='PeersPage'>
  <Helmet>
  <title>{t('title')} - IPFS</title>
  </Helmet>
+
+ <div className='flex justify-end mb3'>
+ <AddConnection />
+ </div>
+
  <Box className='pt3 ph3 pb4'>
  <WorldMap />
  <PeersTable />