Merge pull request #367 from floating/0.3.3

v0.3.3

app/App/Components/Dropdown/index.styl

@@ -3,14 +3,14 @@
   display flex
   align-items flex-start
   height 26px
-  z-index 9999999
+  z-index 99999999999999
 
 .dropdown
   border-radius 13px
   letter-spacing 1px
   height 26px
   font-weight 400
-  width 113px
+  width 125px
   font-size 13px
   text-transform uppercase
   background highlight
@@ -30,11 +30,18 @@
 
 .dropdownItem
   display flex
-  justify-content center
   align-items center
   height 26px
   min-height 26px
-  width 100%
+  width calc(100% - 20px)
   box-sizing border-box
-  padding 0px 15px 0px 15px
   transform translateZ(0)
+  margin 0px 10px 0px 10px
+  overflow hidden
+  position relative
+  z-index 99999999999999
+
+  &::before, &::after
+    pointer-events: none
+    content: ''
+    flex: 1

app/App/Panel/Badge/style/index.styl

@@ -6,7 +6,7 @@
   left 0px
   bottom 3px
   background pending
-  border-radius 6px
+  border-radius 16px
   z-index 9
 
 .badge
@@ -16,7 +16,7 @@
   left 10px
   transform translateY(300px)
   background pendingShade
-  border-radius 6px
+  border-radius 16px
   z-index 999999999999
   transition standard
   font-weight 300

app/App/Panel/Client/index.js

@@ -7,7 +7,7 @@ import Status from './Status'
 class Client extends React.Component {
   toggle = () => {
     const client = this.props.client
-    const networkId = this.store('main.connection.network')
+    const networkId = this.store('main.currentNetwork.id')
     const on = this.store(`main.clients.${client}.on`)
     const state = this.store(`main.clients.${client}.state`)
 

app/App/Panel/Local/style/index.styl

@@ -10,6 +10,27 @@
   transition standard
   transform translateZ(0)
 
+  .localSettingsAddNetwork
+    position absolute
+    right 145px
+    display flex
+    justify-content center
+    align-items center
+    height 26px
+    z-index 9999999
+    border-radius 13px
+    height 26px
+    font-weight 200
+    width 26px
+    font-size 23px
+    text-transform uppercase
+    background highlight
+    overflow hidden
+    box-shadow cardDrop, 0px 2px 1px thin
+    padding 0px 0px 0px 0px
+    transition standard
+    transform translateZ(0)
+
   .localSettingsWrapFadeTop
     position absolute
     background red
@@ -53,13 +74,15 @@
     position relative
     display flex
     align-items flex-start
-    z-index 9999999
     height 26px
-    font-size 22px
+    font-size 25px
     font-weight 200
     padding 0px 10px 15px 10px
     margin 50px 0px 0px 0px
 
+    .localSettingsTitleText
+      margin-top -5px
+
 .localSettingsHidden
   right -100%
   left 100%
@@ -108,7 +131,7 @@
   color outerspace08
 
 .quitFrame
-  padding 20px
+  padding 10px
   margin-top 15px
 
   .quitFrameButton
@@ -137,7 +160,7 @@
   width 100%
   align-items space-between
   transition standard
-  border-radius 3px
+  border-radius 16px
   margin 0px -15px -15px -15px
   padding 0px 15px 15px 15px
   // overflow hidden
@@ -162,6 +185,7 @@
     position relative
     margin-top 0px
     transition standard
+    pointer-events none
 
     .connectionOptionDetailsInset
       height 25px
@@ -310,7 +334,7 @@
   padding-top 0px
   transition standardFast
   background thin
-  border-radius 3px
+  border-radius 8px
   transform translateZ(0)
   z-index 20
 
@@ -347,3 +371,4 @@
     transition-delay 0ms, 30ms
     transition-property height, opacity
     margin-top 5px
+    pointer-events auto

app/App/Panel/Main/Add/AddAragon/index.js

@@ -121,7 +121,8 @@ class AddAragon extends React.Component {
   }
 
   accountFilter (id) {
-    const network = this.store('main.connection.network')
+    // Need to migrate accounts to use network type
+    const network = this.store('main.currentNetwork.id')
     const account = this.store('main.accounts', id)
     if (account.type === 'aragon') return false
     return account.network === network
@@ -202,7 +203,7 @@ class AddAragon extends React.Component {
           </div>
           <div
             className='addAccountItemSummary' onMouseDown={() => {
-              const net = this.store('main.connection.network')
+              const net = this.store('main.currentNetwork.id')
               const open = url => this.store.notify('openExternal', { url })
               if (net === '1') return open('https://mainnet.aragon.org')
               if (net === '4') return open('https://rinkeby.aragon.org')

app/App/Panel/Main/Add/AddPhrase/index.js

@@ -116,7 +116,7 @@ class AddPhrase extends React.Component {
             <div
               className='addAccountItemOptionIntro' onMouseDown={() => {
                 this.adding()
-                if (this.store('main.connection.network') === '1') setTimeout(() => this.store.notify('hotAccountWarning'), 800)
+                if (this.store('main.currentNetwork.id') === '1') setTimeout(() => this.store.notify('hotAccountWarning'), 800)
               }}
             >
               {'Add Phrase Account'}

app/App/Panel/Main/Add/AddRing/index.js

@@ -153,6 +153,8 @@ class AddRing extends React.Component {
   render () {
     let itemClass = 'addAccountItem addAccountItemSmart'
     if (this.state.adding) itemClass += ' addAccountItemAdding'
+    const { type, id } = this.store('main.currentNetwork')
+    const network = type + ':' + id
     return (
       <div className={itemClass} style={{ transitionDelay: (0.64 * this.props.index / 4) + 's' }}>
         <div className='addAccountItemBar addAccountItemHot' />
@@ -170,7 +172,7 @@ class AddRing extends React.Component {
             <div
               className='addAccountItemOptionIntro' onMouseDown={() => {
                 this.adding()
-                if (this.store('main.connection.network') === '1') setTimeout(() => this.store.notify('hotAccountWarning'), 800)
+                if (network === 'ethereum:1') setTimeout(() => this.store.notify('hotAccountWarning'), 800)
               }}
             >
               {'Add Keyring Account'}

app/App/Panel/Main/Add/style/index.styl

@@ -186,12 +186,12 @@
       // margin 0px 15px 0px 0px
 
   .addAccountItem
-    padding 3px 0px 3px 0px
+    padding 2px 2px 2px 2px
     width calc(100%)
-    margin 10px 0px 0px 0px
-    border-radius 6px
+    margin 20px 0px 0px 0px
+    border-radius 18px
     background outerspaceShader
-    box-shadow 0px 35px 40px -20px rgba(5, 25, 35, 1)
+    box-shadow 0px 35px 40px -20px rgba(5, 25, 35, 1), 0px 0px 15px 0px rgba(5, 15, 35, 1)
     display flex
     justify-content center
     align-items center
@@ -210,14 +210,14 @@
       top 0
       left 0
       right 0
-      height 12px
+      bottom 0
       background hardware
       z-index 1
 
     .addAccountItemWrap
       width 100%
-      background outerspaceLight
-      border-radius 6px
+      background phaseLight
+      border-radius 16px
       padding 0px 0px 10px 0px
       z-index 2
       box-shadow 0px 0px 40px -20px rgba(5, 25, 35, 0.6)
@@ -227,7 +227,6 @@
       flex-direction column
 
     .addAccountItemTop
-      width 100%
       display flex
       justify-content flex-start
       align-items center

app/App/Panel/Main/Signer/Requests/TransactionRequest/index.js

@@ -41,10 +41,14 @@ class TransactionRequest extends React.Component {
     return (Math.round(parseFloat(utils.fromWei(hex, 'ether')) * 1000000) / 1000000).toFixed(6)
   }
 
-  setGasPrice (price, level) {
-    const chain = this.store('main.connection.network')
-    const feeLevel = this.store('main.gasPrice', chain, 'default')
-    if (price && (price !== this.props.req.data.gasPrice || level !== feeLevel)) link.rpc('setGasPrice', price, level, this.props.req.handlerId, e => console.log(e))
+  setGasPrice (netType, netId, price, level) {
+    const network = this.store('main.currentNetwork')
+    const feeLevel = this.store('main.networks', network.type, network.id, 'gas.price.selected')
+    if (price && (price !== this.props.req.data.gasPrice || level !== feeLevel)) {
+      link.rpc('setGasPrice', netType, netId, price, level, this.props.req.handlerId, e => {
+        if (e) console.log(e)
+      })
+    }
     this.setState({ selectedIndex: -1 })
   }
 
@@ -84,7 +88,7 @@ class TransactionRequest extends React.Component {
         zIndex: 200000,
         left: '0px',
         right: '0px',
-        padding: '100px 10px',
+        padding: '100px 10px'
       }
     } else {
       return {
@@ -103,8 +107,8 @@ class TransactionRequest extends React.Component {
   }
 
   hoverBar (hoverGasPercent) {
-    const trader = this.store('main.gasPrice', this.store('main.connection.network'),'levels.trader')
-    // const safelow = this.store('main.gasPrice.levels.safelow')
+    const network = this.store('main.currentNetwork')
+    const trader = this.store('main.networks', network.type, network.id, 'gas.price.levels.trader')
     const top = parseInt(trader, 16) * 4
     const bottom = 1 // parseInt(safelow, 16) / 10
     const percentBuffer = Math.round((bottom / top) * 100) / 100
@@ -146,9 +150,9 @@ class TransactionRequest extends React.Component {
   renderFee () {
     const expanded = this.state.selectedIndex === 0
     const { data, mode } = this.props.req
-    const chain = this.store('main.connection.network')
-    let feeLevel = this.store('main.gasPrice', chain, 'default')
-    const gasLevels = this.store('main.gasPrice', chain, 'levels')
+    const network = this.store('main.currentNetwork')
+    let feeLevel = this.store('main.networks', network.type, network.id, 'gas.price.selected')
+    const gasLevels = this.store('main.networks', network.type, network.id, 'gas.price.levels')
     if (gasLevels[feeLevel] !== data.gasPrice) feeLevel = 'custom'
     const etherRates = this.store('external.rates')
     const etherUSD = etherRates && etherRates.USD ? parseFloat(etherRates.USD) : 0
@@ -187,20 +191,21 @@ class TransactionRequest extends React.Component {
         </div>
         <div className='txFeeGwei' style={{ opacity: expanded ? 1 : 0 }}>
           <div className='txFeeGweiValue'>
-            {this.state.hoverGwei || (this.state.hoverGasPrice ? parseInt(this.state.hoverGasPrice, 'hex') / 1000000000  : false) || (parseInt(data.gasPrice, 'hex') / 1000000000) }
+            {this.state.hoverGwei || (this.state.hoverGasPrice ? parseInt(this.state.hoverGasPrice, 'hex') / 1000000000 : false) || (parseInt(data.gasPrice, 'hex') / 1000000000)}
           </div>
           <div className='txFeeGweiLabel'>
             {'GWEI'}
           </div>
         </div>
         <div className='networkFeeLabel' style={{ transform: expanded ? 'translateY(0px)' : 'translateY(-40px)' }}>Fee</div>
         <div className='networkFeeOptions' style={!expanded ? { transitionDelay: '0s', transform: `translateY(${slideLevel})` } : { transform: 'translateY(0px)' }}>
-          <div className='networkFeeOption' 
-            onMouseDown={expanded ? () => this.setGasPrice(gasLevels.safelow, 'safelow') : null}
+          <div
+            className='networkFeeOption'
+            onMouseDown={expanded ? () => this.setGasPrice(network.type, network.id, gasLevels.safelow, 'safelow') : null}
             onMouseEnter={expanded ? () => this.setState({ hoverGwei: parseInt(gasLevels.safelow, 'hex') / 1000000000 }) : null}
             onMouseLeave={expanded ? () => this.setState({ hoverGwei: 0 }) : null}
           >
-            <div className='networkFeeOptionBack' /> 
+            <div className='networkFeeOptionBack' />
             {this.renderFeeLabel(feeLevel === 'safelow', expanded)}
             <div className='txSectionLabelRight'>Safe Low</div>
             <div className={safelowFeeUSD > FEE_WARNING_THRESHOLD_USD || !safelowFeeUSD ? 'networkFeeTotal networkFeeTotalWarn' : 'networkFeeTotal'}>
@@ -209,12 +214,13 @@ class TransactionRequest extends React.Component {
               <div className='networkFeeTotalSection networkFeeTotalUSD'>{'$ ' + safelowFeeUSD.toFixed(2)}</div>
             </div>
           </div>
-          <div className='networkFeeOption' 
-            onMouseDown={expanded ? () => this.setGasPrice(gasLevels.standard, 'standard') : null}
+          <div
+            className='networkFeeOption'
+            onMouseDown={expanded ? () => this.setGasPrice(network.type, network.id, gasLevels.standard, 'standard') : null}
             onMouseEnter={expanded ? () => this.setState({ hoverGwei: parseInt(gasLevels.standard, 'hex') / 1000000000 }) : null}
             onMouseLeave={expanded ? () => this.setState({ hoverGwei: 0 }) : null}
           >
-            <div className='networkFeeOptionBack' /> 
+            <div className='networkFeeOptionBack' />
             {this.renderFeeLabel(feeLevel === 'standard', expanded)}
             <div className='txSectionLabelRight'>Standard</div>
             <div className={standardFeeUSD > FEE_WARNING_THRESHOLD_USD || !standardFeeUSD ? 'networkFeeTotal networkFeeTotalWarn' : 'networkFeeTotal'}>
@@ -223,12 +229,13 @@ class TransactionRequest extends React.Component {
               <div className='networkFeeTotalSection networkFeeTotalUSD'>{'$ ' + standardFeeUSD.toFixed(2)}</div>
             </div>
           </div>
-          <div className='networkFeeOption' 
-            onMouseDown={expanded ? () => this.setGasPrice(gasLevels.fast, 'fast') : null}
+          <div
+            className='networkFeeOption'
+            onMouseDown={expanded ? () => this.setGasPrice(network.type, network.id, gasLevels.fast, 'fast') : null}
             onMouseEnter={expanded ? () => this.setState({ hoverGwei: parseInt(gasLevels.fast, 'hex') / 1000000000 }) : null}
             onMouseLeave={expanded ? () => this.setState({ hoverGwei: 0 }) : null}
           >
-            <div className='networkFeeOptionBack' /> 
+            <div className='networkFeeOptionBack' />
             {this.renderFeeLabel(feeLevel === 'fast', expanded)}
             <div className='txSectionLabelRight'>Fast</div>
             <div className={fastFeeUSD > FEE_WARNING_THRESHOLD_USD || !fastFeeUSD ? 'networkFeeTotal networkFeeTotalWarn' : 'networkFeeTotal'}>
@@ -237,12 +244,13 @@ class TransactionRequest extends React.Component {
               <div className='networkFeeTotalSection networkFeeTotalUSD'>{'$ ' + fastFeeUSD.toFixed(2)}</div>
             </div>
           </div>
-          <div className='networkFeeOption' 
-            onMouseDown={expanded ? () => this.setGasPrice(gasLevels.trader, 'trader') : null}
+          <div
+            className='networkFeeOption'
+            onMouseDown={expanded ? () => this.setGasPrice(network.type, network.id, gasLevels.trader, 'trader') : null}
             onMouseEnter={expanded ? () => this.setState({ hoverGwei: parseInt(gasLevels.trader, 'hex') / 1000000000 }) : null}
             onMouseLeave={expanded ? () => this.setState({ hoverGwei: 0 }) : null}
           >
-          <div className='networkFeeOptionBack' /> 
+            <div className='networkFeeOptionBack' />
             {this.renderFeeLabel(feeLevel === 'trader', expanded)}
             <div className='txSectionLabelRight'>Trader</div>
             <div className={traderFeeUSD > FEE_WARNING_THRESHOLD_USD || !traderFeeUSD ? 'networkFeeTotal networkFeeTotalWarn' : 'networkFeeTotal'}>
@@ -253,12 +261,12 @@ class TransactionRequest extends React.Component {
           </div>
           <div
             className='networkFeeOption'
-            onMouseDown={expanded ? () => { this.setGasPrice(this.state.hoverGasPrice, 'custom') } : null}
+            onMouseDown={expanded ? () => { this.setGasPrice(network.type, network.id, this.state.hoverGasPrice, 'custom') } : null}
             onMouseEnter={expanded ? e => this.handleCustomPriceHover(e, true) : null}
             onMouseMove={expanded ? e => this.handleCustomPriceHover(e) : null}
             onMouseLeave={expanded ? e => this.handleCustomPriceHoverReset() : null}
           >
-            <div className='networkFeeOptionBack' /> 
+            <div className='networkFeeOptionBack' />
             {this.renderFeeLabel(feeLevel === 'custom', expanded)}
             <div className='txSectionLabelRight'>Custom</div>
             <div className={customFeeUSD > FEE_WARNING_THRESHOLD_USD || !customFeeUSD ? 'networkFeeTotal networkFeeTotalWarn' : 'networkFeeTotal'}>
@@ -275,7 +283,6 @@ class TransactionRequest extends React.Component {
     )
   }
 
-
   render () {
     const req = this.props.req
     let notice = req.notice