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)