Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

beta.7 UX fixes #601

Merged
merged 6 commits into from
Oct 13, 2021
Merged

beta.7 UX fixes #601

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c4cbcee
Hide account grabber for now, add aragon ens registy for polygon
floating Oct 12, 2021
3f34de4
Split keystore and private key setup, clear setup after adding signer
floating Oct 13, 2021
af5d236
Don't overwrite local state endpoint in chain setup
floating Oct 13, 2021
f4e473c
Move add chain
floating Oct 13, 2021
ee38e49
Update deps
floating Oct 13, 2021
0ebf424
Cleanup
floating Oct 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/App/Panel/Main/Account/index.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading