Hex Artifact Content
Not logged in

Artifact d763aedcce6c2734c80f493255e6e860b7a0c213:


0000: 69 6d 70 6f 72 74 20 52 65 61 63 74 2c 20 7b 20  import React, { 
0010: 43 6f 6d 70 6f 6e 65 6e 74 20 7d 20 66 72 6f 6d  Component } from
0020: 20 27 72 65 61 63 74 27 0a 69 6d 70 6f 72 74 20   'react'.import 
0030: 50 72 6f 70 54 79 70 65 73 20 66 72 6f 6d 20 27  PropTypes from '
0040: 70 72 6f 70 2d 74 79 70 65 73 27 0a 69 6d 70 6f  prop-types'.impo
0050: 72 74 20 7b 63 6f 6e 6e 65 63 74 7d 20 66 72 6f  rt {connect} fro
0060: 6d 20 27 72 65 61 63 74 2d 72 65 64 75 78 27 0a  m 'react-redux'.
0070: 69 6d 70 6f 72 74 20 7b 20 4c 69 6e 6b 20 7d 20  import { Link } 
0080: 66 72 6f 6d 20 27 72 65 61 63 74 2d 72 6f 75 74  from 'react-rout
0090: 65 72 2d 64 6f 6d 27 0a 0a 69 6d 70 6f 72 74 20  er-dom'..import 
00a0: 7b 20 6c 6f 61 64 20 61 73 20 6c 6f 61 64 50 65  { load as loadPe
00b0: 65 72 73 20 7d 20 66 72 6f 6d 20 27 72 65 64 75  ers } from 'redu
00c0: 78 2f 61 63 74 69 6f 6e 73 2f 70 65 65 72 27 0a  x/actions/peer'.
00d0: 0a 69 6d 70 6f 72 74 20 63 6c 61 73 73 4e 61 6d  .import classNam
00e0: 65 73 20 66 72 6f 6d 20 27 63 6c 61 73 73 6e 61  es from 'classna
00f0: 6d 65 73 2f 62 69 6e 64 27 0a 69 6d 70 6f 72 74  mes/bind'.import
0100: 20 73 74 79 6c 65 73 20 66 72 6f 6d 20 27 2e 2f   styles from './
0110: 4f 6e 62 6f 61 72 64 69 6e 67 2e 73 63 73 73 27  Onboarding.scss'
0120: 0a 63 6f 6e 73 74 20 63 78 20 3d 20 63 6c 61 73  .const cx = clas
0130: 73 4e 61 6d 65 73 2e 62 69 6e 64 28 73 74 79 6c  sNames.bind(styl
0140: 65 73 29 0a 0a 40 63 6f 6e 6e 65 63 74 28 0a 20  es)..@connect(. 
0150: 20 73 74 61 74 65 20 3d 3e 20 28 7b 0a 20 20 20   state => ({.   
0160: 20 75 73 65 72 3a 20 73 74 61 74 65 2e 61 75 74   user: state.aut
0170: 68 2e 75 73 65 72 2c 0a 20 20 20 20 70 65 65 72  h.user,.    peer
0180: 73 3a 20 73 74 61 74 65 2e 70 65 65 72 2e 6c 69  s: state.peer.li
0190: 73 74 2c 0a 20 20 20 20 70 65 65 72 73 4c 6f 61  st,.    peersLoa
01a0: 64 65 64 3a 20 73 74 61 74 65 2e 70 65 65 72 2e  ded: state.peer.
01b0: 6c 6f 61 64 65 64 0a 20 20 7d 29 2c 0a 20 20 7b  loaded.  }),.  {
01c0: 20 6c 6f 61 64 50 65 65 72 73 20 7d 29 0a 65 78   loadPeers }).ex
01d0: 70 6f 72 74 20 64 65 66 61 75 6c 74 20 63 6c 61  port default cla
01e0: 73 73 20 4f 6e 62 6f 61 72 64 69 6e 67 20 65 78  ss Onboarding ex
01f0: 74 65 6e 64 73 20 43 6f 6d 70 6f 6e 65 6e 74 20  tends Component 
0200: 7b 0a 20 20 73 74 61 74 69 63 20 70 72 6f 70 54  {.  static propT
0210: 79 70 65 73 20 3d 20 7b 0a 20 20 20 20 75 73 65  ypes = {.    use
0220: 72 3a 20 50 72 6f 70 54 79 70 65 73 2e 6f 62 6a  r: PropTypes.obj
0230: 65 63 74 2c 0a 20 20 20 20 70 65 65 72 73 3a 20  ect,.    peers: 
0240: 50 72 6f 70 54 79 70 65 73 2e 61 72 72 61 79 2c  PropTypes.array,
0250: 0a 20 20 20 20 6c 6f 61 64 50 65 65 72 73 3a 20  .    loadPeers: 
0260: 50 72 6f 70 54 79 70 65 73 2e 66 75 6e 63 2c 0a  PropTypes.func,.
0270: 20 20 20 20 70 65 65 72 73 4c 6f 61 64 65 64 3a      peersLoaded:
0280: 20 50 72 6f 70 54 79 70 65 73 2e 62 6f 6f 6c 0a   PropTypes.bool.
0290: 20 20 7d 0a 0a 20 20 73 74 61 74 65 20 3d 20 7b    }..  state = {
02a0: 7d 0a 0a 20 20 63 6f 6d 70 6f 6e 65 6e 74 57 69  }..  componentWi
02b0: 6c 6c 4d 6f 75 6e 74 20 28 29 20 7b 0a 20 20 20  llMount () {.   
02c0: 20 69 66 20 28 21 74 68 69 73 2e 70 72 6f 70 73   if (!this.props
02d0: 2e 70 65 65 72 73 4c 6f 61 64 65 64 29 20 7b 0a  .peersLoaded) {.
02e0: 20 20 20 20 20 20 74 68 69 73 2e 70 72 6f 70 73        this.props
02f0: 2e 6c 6f 61 64 50 65 65 72 73 28 29 0a 20 20 20  .loadPeers().   
0300: 20 7d 0a 20 20 7d 0a 0a 20 20 72 65 6e 64 65 72   }.  }..  render
0310: 20 28 29 20 7b 0a 20 20 20 20 63 6f 6e 73 74 20   () {.    const 
0320: 7b 20 75 73 65 72 2c 20 70 65 65 72 73 2c 20 70  { user, peers, p
0330: 65 65 72 73 4c 6f 61 64 65 64 20 7d 20 3d 20 74  eersLoaded } = t
0340: 68 69 73 2e 70 72 6f 70 73 0a 0a 20 20 20 20 69  his.props..    i
0350: 66 20 28 21 75 73 65 72 2e 69 73 41 64 6d 69 6e  f (!user.isAdmin
0360: 29 20 72 65 74 75 72 6e 20 6e 75 6c 6c 0a 20 20  ) return null.  
0370: 20 20 69 66 20 28 21 70 65 65 72 73 4c 6f 61 64    if (!peersLoad
0380: 65 64 20 7c 7c 20 70 65 65 72 73 2e 6c 65 6e 67  ed || peers.leng
0390: 74 68 20 3e 20 30 29 20 72 65 74 75 72 6e 20 6e  th > 0) return n
03a0: 75 6c 6c 0a 0a 20 20 20 20 72 65 74 75 72 6e 20  ull..    return 
03b0: 28 0a 20 20 20 20 20 20 3c 64 69 76 20 63 6c 61  (.      <div cla
03c0: 73 73 4e 61 6d 65 3d 7b 63 78 28 27 70 61 6e 65  ssName={cx('pane
03d0: 6c 27 2c 20 27 70 61 6e 65 6c 2d 64 65 66 61 75  l', 'panel-defau
03e0: 6c 74 27 2c 20 27 4f 6e 62 6f 61 72 64 69 6e 67  lt', 'Onboarding
03f0: 27 29 7d 3e 0a 20 20 20 20 20 20 20 20 3c 64 69  ')}>.        <di
0400: 76 20 63 6c 61 73 73 4e 61 6d 65 3d 27 70 61 6e  v className='pan
0410: 65 6c 2d 62 6f 64 79 27 3e 0a 20 20 20 20 20 20  el-body'>.      
0420: 20 20 20 20 3c 68 31 3e 57 65 6c 63 6f 6d 65 20      <h1>Welcome 
0430: 74 6f 20 49 4c 50 20 4b 69 74 3c 2f 68 31 3e 0a  to ILP Kit</h1>.
0440: 0a 20 20 20 20 20 20 20 20 20 20 3c 75 6c 20 63  .          <ul c
0450: 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28 27 6c 69  lassName={cx('li
0460: 73 74 27 29 7d 3e 0a 20 20 20 20 20 20 20 20 20  st')}>.         
0470: 20 20 20 3c 6c 69 3e 0a 20 20 20 20 20 20 20 20     <li>.        
0480: 20 20 20 20 20 20 3c 69 20 63 6c 61 73 73 4e 61        <i classNa
0490: 6d 65 3d 7b 63 78 28 27 66 61 27 2c 20 27 66 61  me={cx('fa', 'fa
04a0: 2d 63 68 65 63 6b 27 2c 20 27 64 6f 6e 65 27 29  -check', 'done')
04b0: 7d 20 2f 3e 0a 20 20 20 20 20 20 20 20 20 20 20  } />.           
04c0: 20 20 20 3c 68 33 20 63 6c 61 73 73 4e 61 6d 65     <h3 className
04d0: 3d 7b 63 78 28 27 74 69 74 6c 65 27 29 7d 3e 53  ={cx('title')}>S
04e0: 65 74 20 75 70 20 79 6f 75 72 20 49 4c 50 20 4b  et up your ILP K
04f0: 69 74 3c 2f 68 33 3e 0a 20 20 20 20 20 20 20 20  it</h3>.        
0500: 20 20 20 20 20 20 3c 64 69 76 20 63 6c 61 73 73        <div class
0510: 4e 61 6d 65 3d 7b 63 78 28 27 64 65 73 63 72 69  Name={cx('descri
0520: 70 74 69 6f 6e 27 29 7d 3e 49 66 20 79 6f 75 20  ption')}>If you 
0530: 63 61 6e 20 73 65 65 20 74 68 69 73 20 6d 65 73  can see this mes
0540: 73 61 67 65 20 74 68 65 6e 20 79 6f 75 e2 80 99  sage then you...
0550: 76 65 20 61 6c 72 65 61 64 79 20 64 6f 6e 65 20  ve already done 
0560: 74 68 69 73 20 73 74 65 70 2c 20 62 75 74 20 77  this step, but w
0570: 65 20 74 68 6f 75 67 68 74 20 74 68 69 73 20 6c  e thought this l
0580: 69 73 74 20 73 68 6f 75 6c 64 20 73 74 61 72 74  ist should start
0590: 20 77 69 74 68 20 61 20 63 68 65 63 6b 20 6d 61   with a check ma
05a0: 72 6b 20 3b 29 3c 2f 64 69 76 3e 0a 20 20 20 20  rk ;)</div>.    
05b0: 20 20 20 20 20 20 20 20 3c 2f 6c 69 3e 0a 20 20          </li>.  
05c0: 20 20 20 20 20 20 20 20 20 20 3c 6c 69 3e 0a 20            <li>. 
05d0: 20 20 20 20 20 20 20 20 20 20 20 20 20 3c 69 20               <i 
05e0: 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28 27 66  className={cx('f
05f0: 61 27 2c 20 27 66 61 2d 74 69 6d 65 73 27 2c 20  a', 'fa-times', 
0600: 27 74 6f 64 6f 27 29 7d 20 2f 3e 0a 20 20 20 20  'todo')} />.    
0610: 20 20 20 20 20 20 20 20 20 20 3c 68 33 20 63 6c            <h3 cl
0620: 61 73 73 4e 61 6d 65 3d 7b 63 78 28 27 74 69 74  assName={cx('tit
0630: 6c 65 27 29 7d 3e 0a 20 20 20 20 20 20 20 20 20  le')}>.         
0640: 20 20 20 20 20 20 20 3c 4c 69 6e 6b 20 74 6f 3d         <Link to=
0650: 27 2f 70 65 65 72 73 27 3e 43 6f 6e 6e 65 63 74  '/peers'>Connect
0660: 20 77 69 74 68 20 6f 74 68 65 72 20 6c 65 64 67   with other ledg
0670: 65 72 73 3c 2f 4c 69 6e 6b 3e 0a 20 20 20 20 20  ers</Link>.     
0680: 20 20 20 20 20 20 20 20 20 3c 2f 68 33 3e 0a 20           </h3>. 
0690: 20 20 20 20 20 20 20 20 20 20 20 20 20 3c 64 69               <di
06a0: 76 20 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28  v className={cx(
06b0: 27 64 65 73 63 72 69 70 74 69 6f 6e 27 29 7d 3e  'description')}>
06c0: 53 65 74 20 75 70 20 63 6f 6e 6e 65 63 74 69 6f  Set up connectio
06d0: 6e 73 20 77 69 74 68 20 6f 74 68 65 72 20 70 61  ns with other pa
06e0: 72 74 69 63 69 70 61 6e 74 73 2c 20 61 6c 6c 6f  rticipants, allo
06f0: 63 61 74 65 20 63 72 65 64 69 74 20 6c 69 6e 65  cate credit line
0700: 73 20 61 6e 64 20 74 68 65 20 73 65 74 74 6c 65  s and the settle
0710: 6d 65 6e 74 20 63 75 72 72 65 6e 63 79 3c 2f 64  ment currency</d
0720: 69 76 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20  iv>.            
0730: 3c 2f 6c 69 3e 0a 20 20 20 20 20 20 20 20 20 20  </li>.          
0740: 20 20 7b 2f 2a 20 3c 6c 69 3e 0a 20 20 20 20 20    {/* <li>.     
0750: 20 20 20 20 20 20 20 20 20 3c 69 20 63 6c 61 73           <i clas
0760: 73 4e 61 6d 65 3d 7b 63 78 28 27 66 61 27 2c 20  sName={cx('fa', 
0770: 27 66 61 2d 74 69 6d 65 73 27 2c 20 27 74 6f 64  'fa-times', 'tod
0780: 6f 27 29 7d 20 2f 3e 0a 20 20 20 20 20 20 20 20  o')} />.        
0790: 20 20 20 20 20 20 3c 68 33 20 63 6c 61 73 73 4e        <h3 classN
07a0: 61 6d 65 3d 7b 63 78 28 27 74 69 74 6c 65 27 29  ame={cx('title')
07b0: 7d 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20 20  }>.             
07c0: 20 20 20 3c 4c 69 6e 6b 20 74 6f 3d 22 2f 73 65     <Link to="/se
07d0: 74 74 6c 65 6d 65 6e 74 22 3e 43 6f 6e 6e 65 63  ttlement">Connec
07e0: 74 20 79 6f 75 72 20 65 78 74 65 72 6e 61 6c 20  t your external 
07f0: 61 63 63 6f 75 6e 74 73 3c 2f 4c 69 6e 6b 3e 0a  accounts</Link>.
0800: 20 20 20 20 20 20 20 20 20 20 20 20 20 20 3c 2f                </
0810: 68 33 3e 0a 20 20 20 20 20 20 20 20 20 20 20 20  h3>.            
0820: 20 20 3c 64 69 76 20 63 6c 61 73 73 4e 61 6d 65    <div className
0830: 3d 7b 63 78 28 27 64 65 73 63 72 69 70 74 69 6f  ={cx('descriptio
0840: 6e 27 29 7d 3e 4c 69 6e 6b 20 79 6f 75 72 20 50  n')}>Link your P
0850: 61 79 50 61 6c 2c 20 42 69 74 63 6f 69 6e 2c 20  ayPal, Bitcoin, 
0860: 52 69 70 70 6c 65 20 6f 72 20 45 74 68 65 72 65  Ripple or Ethere
0870: 75 6d 20 61 63 63 6f 75 6e 74 73 20 73 6f 20 70  um accounts so p
0880: 65 65 72 73 20 63 61 6e 20 73 65 6e 64 20 79 6f  eers can send yo
0890: 75 20 6d 6f 6e 65 79 3c 2f 64 69 76 3e 0a 20 20  u money</div>.  
08a0: 20 20 20 20 20 20 20 20 20 20 3c 2f 6c 69 3e 0a            </li>.
08b0: 20 20 20 20 20 20 20 20 20 20 20 20 3c 6c 69 3e              <li>
08c0: 0a 20 20 20 20 20 20 20 20 20 20 20 20 20 20 3c  .              <
08d0: 69 20 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28  i className={cx(
08e0: 27 66 61 27 2c 20 27 66 61 2d 74 69 6d 65 73 27  'fa', 'fa-times'
08f0: 2c 20 27 74 6f 64 6f 27 29 7d 20 2f 3e 0a 20 20  , 'todo')} />.  
0900: 20 20 20 20 20 20 20 20 20 20 20 20 3c 68 33 20              <h3 
0910: 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28 27 74  className={cx('t
0920: 69 74 6c 65 27 29 7d 3e 0a 20 20 20 20 20 20 20  itle')}>.       
0930: 20 20 20 20 20 20 20 20 20 3c 4c 69 6e 6b 20 74           <Link t
0940: 6f 3d 22 2f 73 65 74 74 69 6e 67 73 22 3e 43 6f  o="/settings">Co
0950: 6d 70 6c 65 74 65 20 79 6f 75 72 20 70 72 6f 66  mplete your prof
0960: 69 6c 65 3c 2f 4c 69 6e 6b 3e 0a 20 20 20 20 20  ile</Link>.     
0970: 20 20 20 20 20 20 20 20 20 3c 2f 68 33 3e 0a 20           </h3>. 
0980: 20 20 20 20 20 20 20 20 20 20 20 20 20 3c 64 69               <di
0990: 76 20 63 6c 61 73 73 4e 61 6d 65 3d 7b 63 78 28  v className={cx(
09a0: 27 64 65 73 63 72 69 70 74 69 6f 6e 27 29 7d 3e  'description')}>
09b0: 54 65 6c 6c 20 79 6f 75 72 20 75 73 65 72 73 20  Tell your users 
09c0: 77 68 6f 20 79 6f 75 20 61 72 65 20 2d 20 6e 61  who you are - na
09d0: 6d 65 2c 20 65 6d 61 69 6c 2c 20 70 72 6f 66 69  me, email, profi
09e0: 6c 65 20 70 69 63 74 75 72 65 2c 20 65 74 63 2e  le picture, etc.
09f0: 3c 2f 64 69 76 3e 0a 20 20 20 20 20 20 20 20 20  </div>.         
0a00: 20 20 20 3c 2f 6c 69 3e 20 2a 2f 7d 0a 20 20 20     </li> */}.   
0a10: 20 20 20 20 20 20 20 3c 2f 75 6c 3e 0a 20 20 20         </ul>.   
0a20: 20 20 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20       </div>.    
0a30: 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 29 0a 20    </div>.    ). 
0a40: 20 7d 0a 7d 0a                                    }.}.