From c64aa25a9118c0a59e228fa52cc847d02dbfa14f Mon Sep 17 00:00:00 2001 From: tomholford Date: Thu, 4 Sep 2025 10:53:35 -0700 Subject: [PATCH 1/3] ui: add delete dapp functionality to main dapps list with confirmation dialog - Add X icon delete button to each dapp item in main dapps view - Implement two-step confirmation flow to prevent accidental deletions - Style delete buttons and confirmation dialog using Frame's design system - Integrate with existing tray:removeOrigin action for state management - Add proper event handling to prevent navigation conflicts --- app/dash/Dapps/index.js | 47 +++++++++++++++++++++++++++-- app/dash/Dapps/style/index.styl | 52 +++++++++++++++++++++++++++++++++ 2 files changed, 97 insertions(+), 2 deletions(-) diff --git a/app/dash/Dapps/index.js b/app/dash/Dapps/index.js index 7adeb906e1..513efc3850 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,48 @@ 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 ( +
+
+ Remove "{origin.name}"? +
+
+
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 c98e4fe479..a2e981cd14 100644 --- a/app/dash/Dapps/style/index.styl +++ b/app/dash/Dapps/style/index.styl @@ -200,3 +200,55 @@ .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) + +.sliceOriginDeleteConfirm + position relative + right auto + background var(--bad) + color var(--ghostA) + padding 6px 12px + border-radius 16px + font-size 12px + font-weight 500 + text-transform uppercase + letter-spacing 1px + +.sliceOriginDeleteConfirm:hover + background var(--badHighlight) + color var(--ghostA) + +.sliceOriginDeleteCancel + position relative + right auto + background var(--ghostB) + color var(--outerspace) + padding 6px 12px + border-radius 16px + font-size 12px + font-weight 500 + text-transform uppercase + letter-spacing 1px + +.sliceOriginDeleteCancel:hover + background var(--ghostC) From ee694387438282d6a62fa5283f338b86f85f8d9d Mon Sep 17 00:00:00 2001 From: tomholford Date: Thu, 4 Sep 2025 11:00:09 -0700 Subject: [PATCH 2/3] ui: enable remove dapp button in dapp details view - Uncomment and style the Remove Dapp button in DappDetails view - Use consistent styling with permissions moduleButton pattern - Apply destructive action styling with red color - Ensure proper navigation back to main dapps list after removal --- app/dash/Dapps/DappDetails/index.js | 29 ++++++++++++----------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/app/dash/Dapps/DappDetails/index.js b/app/dash/Dapps/DappDetails/index.js index 34480f573c..44797bf069 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 +
+
) } From c753ebb68d32ebfaecc468ed34842300b9d48a14 Mon Sep 17 00:00:00 2001 From: tomholford Date: Fri, 5 Sep 2025 02:04:19 -0700 Subject: [PATCH 3/3] ui: remove non-working permissions delete functionality - Remove delete buttons from permissions views (DappsExpanded/DappsPreview) - Clean up unused removePermission store action and related CSS - Keep focused implementation with main dapps list and detail view removal only - Permissions view retains original toggle-only functionality --- app/dash/Dapps/index.js | 27 +++++++++++---------------- app/dash/Dapps/style/index.styl | 25 +++++++++++++++++++------ 2 files changed, 30 insertions(+), 22 deletions(-) diff --git a/app/dash/Dapps/index.js b/app/dash/Dapps/index.js index 513efc3850..2da39bab4a 100644 --- a/app/dash/Dapps/index.js +++ b/app/dash/Dapps/index.js @@ -127,23 +127,18 @@ class _OriginModule extends React.Component { if (this.state.showDeleteConfirm) { return ( -
-
- Remove "{origin.name}"? +
+
this.handleDeleteConfirm()} + > + Remove
-
-
this.handleDeleteConfirm()} - > - Remove -
-
this.handleDeleteCancel()} - > - Cancel -
+
this.handleDeleteCancel()} + > + Cancel
) diff --git a/app/dash/Dapps/style/index.styl b/app/dash/Dapps/style/index.styl index a2e981cd14..43fc8b03b7 100644 --- a/app/dash/Dapps/style/index.styl +++ b/app/dash/Dapps/style/index.styl @@ -222,17 +222,28 @@ 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 6px 12px - border-radius 16px - font-size 12px + 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) @@ -241,14 +252,16 @@ .sliceOriginDeleteCancel position relative right auto + flex 1 background var(--ghostB) color var(--outerspace) - padding 6px 12px - border-radius 16px - font-size 12px + 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)