Skip to content

Commit

Permalink
UX and fixes (#601)
Browse files Browse the repository at this point in the history 
* Hide account grabber for now

* Add aragon ens registry for polygon

* Split keystore and private key setup, clear setup after adding signer

* Don't overwrite local state endpoint in chain setup

* Move add chain to top

* Update deps
  • Loading branch information
@floating
floating committed Oct 13, 2021
1 parent 1cfdfd0 commit 5939be1
Show file tree
Hide file tree
Showing 16 changed files with 50,324 additions and 59,926 deletions.
2 changes: 1 addition & 1 deletion app/App/Panel/Main/Account/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -981,7 +981,7 @@ class Account extends React.Component {
{!this.state.addressHover ? this.renderSignerIndicator() : null}
{!this.state.addressHover ? (
<>
<div className='accountGrabber' style={open ? { opacity: 0, pointerEvents: 'none' } : {}}>
<div className='accountGrabber' style={open || true ? { opacity: 0, pointerEvents: 'none' } : {}}>
{svg.grab(35)}
</div>
<div className='signerSelect' onMouseDown={this.typeClick.bind(this)}>
Expand Down
30 changes: 30 additions & 0 deletions app/App/Panel/Main/style/index.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,36 @@
font-size 20px
padding 18px

.panelHeaderAddChain
position absolute
right 12px
top 16px
bottom 0
cursor pointer
height 32px
width 106px
border-radius 16px
background var(--ghostB)
display flex
justify-content center
align-items center
font-size 10px
font-weight 300
overflow hidden
background-position 0 100%
text-transform uppercase
letter-spacing 2px
font-weight 600
cursor pointer

.panelHeaderAddChainInner
pointer-events none
margin-left 4px
margin-top -1px

.panelHeaderAddChain:hover
color var(--good)

.panelHeaderUpdate
position absolute
right 12px
Expand Down
165 changes: 6 additions & 159 deletions app/App/Panel/Networks/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,9 @@ import React from 'react'
import Restore from 'react-restore'
import link from '../../../../resources/link'
import svg from '../../../../resources/svg'
// import Client from '../Client'

import Dropdown from '../../Components/Dropdown'

// <Network key={type + id} id={id} name={networks[type][id].name} symbol={networks[type][id].symbol} explorer={networks[type][id].explorer} type={type} />


// import React from 'react'
// import Restore from 'react-restore'

// import svg from '../../../../../resources/svg'
// import link from '../../../../../resources/link'

class _Network extends React.Component {
constructor (props, context) {
super(props, context)
Expand Down Expand Up @@ -133,15 +123,6 @@ class _Network extends React.Component {
if (this.state.primaryCustom === '') this.setState({ primaryCustom: this.customMessage })
}

componentDidMount () {
const { id, type } = this.props
this.store.observer(() => {
const primaryCustom = this.store('main.networks', type, id, 'connection.primary.custom') || this.customMessage
const secondaryCustom = this.store('main.networks', type, id, 'connection.secondary.custom') || this.customMessage
this.setState({ primaryCustom, secondaryCustom })
})
}

render () {
const changed = (
this.state.id &&
Expand Down Expand Up @@ -440,78 +421,6 @@ class Settings extends React.Component {
}
}

// okProtocol (location) {
// if (location === 'injected') return true
// if (location.endsWith('.ipc')) return true
// if (location.startsWith('wss://') || location.startsWith('ws://')) return true
// if (location.startsWith('https://') || location.startsWith('http://')) return true
// return false
// }

// customSecondaryFocus () {
// if (this.state.secondaryCustom === this.customMessage) this.setState({ secondaryCustom: '' })
// }

// customSecondaryBlur () {
// if (this.state.secondaryCustom === '') this.setState({ secondaryCustom: this.customMessage })
// }

// customPrimaryFocus () {
// if (this.state.primaryCustom === this.customMessage) this.setState({ primaryCustom: '' })
// }

// customPrimaryBlur () {
// if (this.state.primaryCustom === '') this.setState({ primaryCustom: this.customMessage })
// }

// inputPrimaryCustom (e) {
// e.preventDefault()
// clearTimeout(this.customPrimaryInputTimeout)
// const value = e.target.value.replace(/\s+/g, '')
// this.setState({ primaryCustom: value })
// const { type, id } = this.store('main.currentNetwork')
// this.customPrimaryInputTimeout = setTimeout(() => link.send('tray:action', 'setPrimaryCustom', type, id, this.state.primaryCustom), 1000)
// }

// inputSecondaryCustom (e) {
// e.preventDefault()
// clearTimeout(this.customSecondaryInputTimeout)
// const value = e.target.value.replace(/\s+/g, '')
// this.setState({ secondaryCustom: value })
// const { type, id } = this.store('main.currentNetwork')
// this.customSecondaryInputTimeout = setTimeout(() => link.send('tray:action', 'setSecondaryCustom', type, id, this.state.secondaryCustom), 1000)
// }

// localShake (key) {
// const localShake = Object.assign({}, this.state.localShake)
// localShake[key] = true
// this.setState({ localShake })
// setTimeout(() => {
// const localShake = Object.assign({}, this.state.localShake)
// localShake[key] = false
// this.setState({ localShake })
// }, 1010)
// }

// status (layer) {
// const { type, id } = this.store('main.currentNetwork')
// const connection = this.store('main.networks', type, id, 'connection', layer)
// let status = connection.status
// const current = connection.current

// if (current === 'custom') {
// if (layer === 'primary' && this.state.primaryCustom !== '' && this.state.primaryCustom !== this.customMessage && !this.okProtocol(this.state.primaryCustom)) status = 'invalid target'
// if (layer === 'secondary' && this.state.secondaryCustom !== '' && this.state.secondaryCustom !== this.customMessage && !this.okProtocol(this.state.secondaryCustom)) status = 'invalid target'
// }
// if (status === 'connected' && !connection.network) status = 'loading'
// return (
// <div className='connectionOptionStatus'>
// {this.indicator(status)}
// <div className='connectionOptionStatusText'>{status}</div>
// </div>
// )
// }

discord () {
return (
<div className='discordInvite' onMouseDown={() => this.store.notify('openExternal', { url: 'https://discord.gg/UH7NGqY' })}>
Expand All @@ -529,16 +438,6 @@ class Settings extends React.Component {
)
}

// indicator (status) {
// if (status === 'connected') {
// return <div className='connectionOptionStatusIndicator'><div className='connectionOptionStatusIndicatorGood' /></div>
// } else if (status === 'loading' || status === 'syncing' || status === 'pending' || status === 'standby') {
// return <div className='connectionOptionStatusIndicator'><div className='connectionOptionStatusIndicatorPending' /></div>
// } else {
// return <div className='connectionOptionStatusIndicator'><div className='connectionOptionStatusIndicatorBad' /></div>
// }
// }

selectNetwork (network) {
const [type, id] = network.split(':')
if (network.type !== type || network.id !== id) link.send('tray:action', 'selectNetwork', type, id)
Expand Down Expand Up @@ -567,14 +466,6 @@ class Settings extends React.Component {
}

renderConnections (layer) {
// const { type, id } = this.store('main.currentNetwork')
// const networkPresets = this.store('main.networkPresets', type)
// let presets = networkPresets[id] || {}
// const { type, id } = this.store('main.currentNetwork')
// const networks = this.store('main.networks')
// const connection = networks[type][id].connection
// console.log(presets)
// const networks = this.store('main.networks')
const nets = []
const networks = this.store('main.networks')
Object.keys(networks).forEach(type => {
Expand Down Expand Up @@ -621,8 +512,13 @@ class Settings extends React.Component {
})
return (
<div className={this.store('panel.view') !== 'networks' ? 'localSettings cardHide' : 'localSettings cardShow'} onMouseDown={e => this.expandNetwork(e, false)}>
<div className='panelHeader' style={{ zIndex: 50, pointerEvents: 'none' }}>
<div className='panelHeader' style={{ zIndex: 50 }}>
<div className='panelHeaderTitle'>Chains</div>
<div className='panelHeaderAddChain' onMouseDown={() => this.store.notify('addChain')}>
<div className='panelHeaderAddChainInner'>
{'Add Chain'}
</div>
</div>
</div>
<div className='localSettingsWrap'>
<div className='networkBreak'>
Expand All @@ -645,12 +541,6 @@ class Settings extends React.Component {
<div className='networkBreakLayer'>Other</div>
</div>
{this.renderConnections('other')}
<div className='networkAdd'>
<div
className='networkAddButton'
onMouseDown={() => this.store.notify('addChain')}
>Add a new chain</div>
</div>
{this.discord()}
</div>
</div>
Expand All @@ -659,46 +549,3 @@ class Settings extends React.Component {
}

export default Restore.connect(Settings)

// <div className='signerPermission'>
// <div>{provider.url}</div>
// <div className={this.store('node.provider') ? 'nodeProviderStatus nodeProviderConnected' : 'nodeProviderStatus'}>
// {this.store('node.provider') ? 'connected' : 'disconnected'}
// </div>
// </div>

// <div className='signerPermission' onMouseDown={_ => this.store.runLocalNode()}>
// <div className='signerPermissionSetting'>{'Run Local Node'}</div>
// <div className={this.store('local.node.run') ? 'signerPermissionToggle signerPermissionToggleOn' : 'signerPermissionToggle'}>
// <div className='signerPermissionToggleSwitch' />
// </div>
// </div>

/* <div className='signerPermission'>
<div className={this.store('main..connection.local.on') ? 'connectionOption connectionOptionOn' : 'connectionOption'}>
<div className='connectionOptionToggle'>
<div className='signerPermissionSetting'>Local</div>
<div className={this.store('main..connection.local.on') ? 'signerPermissionToggle signerPermissionToggleOn' : 'signerPermissionToggle'} onMouseDown={_ => link.send('tray:action', 'toggleConnection', 'primary')}>
<div className='signerPermissionToggleSwitch' />
</div>
</div>
<div className='connectionOptionDetails'>
<div className='connectionOptionDetailsInset'>
{this.status(this.store('main..connection.local'))}
<div className='signerOptionSetWrap'>
<div className={this.state.localShake.custom ? 'signerOptionSet headShake' : 'signerOptionSet'} onMouseDown={() => this.localShake('custom')}>
<div className='signerOptionSetButton' />
{this.store('main..connection.local.type') ? (
<div className='signerOptionSetText'>{this.store('main..connection.local.type')}</div>
) : (_ => {
const status = this.store('main..connection.local.status')
if (status === 'not found' || status === 'loading' || status === 'disconnected') return <div>scanning...</div>
return ''
})()}
<div className='signerOptionSetButton' />
</div>
</div>
</div>
</div>
</div>
</div> */
2 changes: 1 addition & 1 deletion app/App/Panel/Networks/style/index.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -280,7 +280,7 @@
cursor pointer

.discordInvite
margin 0px 8px 30px 8px
margin 30px 8px 30px 8px
font-size 13px
font-weight 300
border-radius 20px
Expand Down
2 changes: 1 addition & 1 deletion dash/App/Add/AddAddress/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ class AddPhrase extends React.Component {
} else {
this.setState({ status: 'Successful', error: false })
setTimeout(() => {
this.store.toggleAddAccount()
this.props.close()
}, 2000)
}
})
Expand Down
2 changes: 1 addition & 1 deletion dash/App/Add/AddAragon/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ class AddAragon extends React.Component {
} else {
this.setState({ status: 'Successful', error: false })
setTimeout(() => {
this.store.toggleAddAccount()
this.props.close()
}, 2000)
}
})
Expand Down
2 changes: 1 addition & 1 deletion dash/App/Add/AddGnosisSafe/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ class AddAragon extends React.Component {
} else {
this.setState({ status: 'Successful', error: false })
setTimeout(() => {
this.store.toggleAddAccount()
this.props.close()
}, 2000)
}
})
Expand Down
2 changes: 1 addition & 1 deletion dash/App/Add/AddHardware/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ class AddHardware extends React.Component {
)
}).concat(tethered.map((signer, i) => {
return (
<div className='addAccountItemDevice' key={signer.id} onMouseDown={() => this.store.toggleAddAccount()}>
<div className='addAccountItemDevice' key={signer.id}>
<div className='addAccountItemDeviceTitle'>Device Found</div>
<div className='addAccountItemDeviceStatus'>Account Created</div>
</div>
Expand Down

0 comments on commit 5939be1

Please sign in to comment.