diff --git a/app/dash/Dapps/DappDetails/index.js b/app/dash/Dapps/DappDetails/index.js index 34480f573..44797bf06 100644 --- a/app/dash/Dapps/DappDetails/index.js +++ b/app/dash/Dapps/DappDetails/index.js @@ -49,23 +49,18 @@ class DappDetails extends React.Component {
default chain
{this.updateOriginChain()}
- {/*
{ - link.send('tray:openExternal', `https://${origin.name}/`) - } - }>{'launch dapp'}
*/} - {/*
{ - link.send('tray:removeOrigin', this.props.originId) - link.send('tray:action', 'navDash', { view: 'dapps', data: {}}) - }} - > - Remove Dapp -
*/} +
+
{ + link.send('tray:removeOrigin', this.props.originId) + link.send('tray:action', 'navDash', { view: 'dapps', data: {} }) + }} + className='moduleButton' + style={{ color: 'var(--bad)' }} + > + Remove Dapp +
+
) } diff --git a/app/dash/Dapps/index.js b/app/dash/Dapps/index.js index 7adeb906e..2da39bab4 100644 --- a/app/dash/Dapps/index.js +++ b/app/dash/Dapps/index.js @@ -2,7 +2,7 @@ import React, { createRef } from 'react' import Restore from 'react-restore' import link from '../../../resources/link' import { isNetworkConnected, isNetworkEnabled } from '../../../resources/utils/chains' -// import svg from '../../../resources/svg' +import svg from '../../../resources/svg' import RingIcon from '../../../resources/Components/RingIcon' @@ -80,7 +80,8 @@ class _OriginModule extends React.Component { this.state = { expanded: false, - averageRequests: '0.0' + averageRequests: '0.0', + showDeleteConfirm: false } this.ref = createRef() @@ -106,9 +107,43 @@ class _OriginModule extends React.Component { this.setState({ averageRequests: (origin.session.requests / sessionLengthSeconds).toFixed(2) }) } + handleDeleteClick(e) { + e.stopPropagation() // Prevent navigation to details view + this.setState({ showDeleteConfirm: true }) + } + + handleDeleteConfirm() { + const { origin } = this.props + link.send('tray:removeOrigin', origin.id) + this.setState({ showDeleteConfirm: false }) + } + + handleDeleteCancel() { + this.setState({ showDeleteConfirm: false }) + } + render() { const { origin, connected } = this.props + if (this.state.showDeleteConfirm) { + return ( +
+
this.handleDeleteConfirm()} + > + Remove +
+
this.handleDeleteCancel()} + > + Cancel +
+
+ ) + } + return (
{this.state.averageRequests}
{'reqs/min'}
+
this.handleDeleteClick(e)} title='Remove dapp'> + {svg.octicon('x', { height: 16 })} +
{this.state.expanded ?
{'origin quick menu'}
: null} diff --git a/app/dash/Dapps/style/index.styl b/app/dash/Dapps/style/index.styl index c98e4fe47..43fc8b03b 100644 --- a/app/dash/Dapps/style/index.styl +++ b/app/dash/Dapps/style/index.styl @@ -200,3 +200,68 @@ .originChainItemActive color var(--good) + +.sliceOriginDelete + position absolute + right 16px + width 24px + height 24px + display flex + justify-content center + align-items center + border-radius 12px + background var(--ghostY) + cursor pointer + pointer-events auto + transition var(--standard) + + * + pointer-events none + +.sliceOriginDelete:hover + background var(--bad1) + color var(--bad) + +.sliceOriginConfirm + display flex + justify-content center + align-items center + gap 12px + background var(--bad1) + border 1px solid var(--bad) + padding 8px 16px + +.sliceOriginDeleteConfirm + position relative + right auto + flex 1 + background var(--bad) + color var(--ghostA) + padding 8px 16px + border-radius 20px + font-size 13px + font-weight 500 + text-transform uppercase + letter-spacing 1px + text-align center + +.sliceOriginDeleteConfirm:hover + background var(--badHighlight) + color var(--ghostA) + +.sliceOriginDeleteCancel + position relative + right auto + flex 1 + background var(--ghostB) + color var(--outerspace) + padding 8px 16px + border-radius 20px + font-size 13px + font-weight 500 + text-transform uppercase + letter-spacing 1px + text-align center + +.sliceOriginDeleteCancel:hover + background var(--ghostC)