ui: delete dapp flow

app/dash/Dapps/DappDetails/index.js

@@ -49,23 +49,18 @@ class DappDetails extends React.Component {
         </div>
         <div className='originSwapTitle'>default chain</div>
         <div>{this.updateOriginChain()}</div>
-        {/* <div 
-          className='clearOriginsButton'
-          style={{ color: 'var(--good)' }}
-          onClick={() => {
-            link.send('tray:openExternal', `https://${origin.name}/`)
-          }
-        }>{'launch dapp'}</div> */}
-        {/* <div 
-          className='clearOriginsButton' 
-          style={{ color: 'var(--bad)' }}
-          onClick={() => {
-            link.send('tray:removeOrigin', this.props.originId)
-            link.send('tray:action', 'navDash', { view: 'dapps', data: {}})
-          }}
-        >
-          Remove Dapp
-        </div>   */}
+        <div className='clearPermissionsButton'>
+          <div
+            onClick={() => {
+              link.send('tray:removeOrigin', this.props.originId)
+              link.send('tray:action', 'navDash', { view: 'dapps', data: {} })
+            }}
+            className='moduleButton'
+            style={{ color: 'var(--bad)' }}
+          >
+            Remove Dapp
+          </div>
+        </div>
       </div>
     )
   }

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 (
+        <div className='sliceOrigin sliceOriginConfirm'>
+          <div
+            className='sliceOriginDelete sliceOriginDeleteConfirm'
+            onClick={() => this.handleDeleteConfirm()}
+          >
+            Remove
+          </div>
+          <div
+            className='sliceOriginDelete sliceOriginDeleteCancel'
+            onClick={() => this.handleDeleteCancel()}
+          >
+            Cancel
+          </div>
+        </div>
+      )
+    }
+
     return (
       <div>
         <div
@@ -123,6 +158,9 @@ class _OriginModule extends React.Component {
             <div className='sliceOriginReqsNumber'>{this.state.averageRequests}</div>
             <div className='sliceOriginReqsLabel'>{'reqs/min'}</div>
           </div>
+          <div className='sliceOriginDelete' onClick={(e) => this.handleDeleteClick(e)} title='Remove dapp'>
+            {svg.octicon('x', { height: 16 })}
+          </div>
         </div>
         {this.state.expanded ? <div>{'origin quick menu'}</div> : null}
       </div>

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)