feat: add TX ignore

packages/common/src/index.ts

@@ -32,6 +32,7 @@ export const RequestStatus = {
   success: 'success',
   fail: 'fail',
   cancelled: 'cancelled',
+  ignored: 'ignored',
 } as const
 
 export const RequestItemType = {

packages/connect-button/README.md

@@ -102,6 +102,7 @@ type ConnectButtonEvents = {
   onConnect: () => void
   onDisconnect: () => void
   onCancelRequestItem: (event: CustomEvent<{ id: string }>) => void
+  onIgnoreTransactionItem: (event: CustomEvent<{ id: string }>) => void
   onDestroy: () => void
   onShowPopover: () => void
   onUpdateSharedData: () => void
@@ -110,7 +111,8 @@ type ConnectButtonEvents = {
 
 - onConnect - triggers when user clicks connect now button
 - onDisconnect - triggers when user clicks disconnect wallet button
-- onCancelRequestItem - triggers when user cancels connect request
+- onCancelRequestItem - triggers when user cancels data or login request
+- onIgnoreTransactionItem - triggers when user ignores transaction output
 - onDestroy - triggers when button is removed from the DOM. Useful for cleaning up registered event listeners and subscriptions.
 - onShowPopover - triggers when users clicks on radix button and popover is being shown
 - onUpdateSharedData - triggers when users clicks on "Update Shared Data" button

packages/connect-button/package.json

@@ -79,6 +79,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/radixdlt/connect-button.git"
+    "url": "git+https://github.com/radixdlt/radix-dapp-toolkit.git",
+    "directory": "packages/connect-button"
   }
 }

packages/connect-button/src/components/card/card.stories.ts

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/web-components'
 import './card'
+
 import './persona-card'
 import './request-card'
 import '../popover/popover'
@@ -89,8 +90,11 @@ export const Requests: Story = {
         status="${args.status}"
         type="${args.type}"
         timestamp=${args.timestamp}
-        @onCancel=${(event: any) => {
-          console.log(event)
+        @onCancelRequestItem=${(event: any) => {
+          console.log('onCancelRequestItem', event)
+        }}
+        @onIgnoreTransactionItem=${(event: any) => {
+          console.log('onIgnoreTransactionItem', event)
         }}
         ?showCancel="${args.showCancel}"
         transactionIntentHash="${args.transactionIntentHash}"
@@ -103,7 +107,7 @@ export const Requests: Story = {
       control: 'select',
     },
     status: {
-      options: ['pending', 'success', 'fail', 'cancelled'],
+      options: ['pending', 'success', 'fail', 'cancelled', 'ignored'],
       control: 'select',
     },
     timestamp: {

packages/connect-button/src/components/card/card.ts

@@ -5,6 +5,7 @@ import UncheckedIcon from '../../assets/unchecked.svg'
 import CheckedIcon from '../../assets/checked.svg'
 import IconLoading from '../../assets/icon-loading.svg'
 import IconFailed from '../../assets/icon-failed.svg'
+import IconIgnored from '../../assets/icon-ignored.svg'
 import { formatTimestamp } from '../../helpers/format-timestamp'
 
 @customElement('radix-card')
@@ -13,7 +14,7 @@ export class RadixCard extends LitElement {
     type: String,
     reflect: true,
   })
-  icon?: 'unchecked' | 'checked' | 'pending' | 'success' | 'error'
+  icon?: 'unchecked' | 'checked' | 'pending' | 'success' | 'error' | 'ignored'
 
   @property({
     type: String,
@@ -120,6 +121,13 @@ export class RadixCard extends LitElement {
         height: 24px;
       }
 
+      :host([icon='ignored']) i::before {
+        -webkit-mask-image: url(${unsafeCSS(IconIgnored)});
+        mask-image: url(${unsafeCSS(IconIgnored)});
+        width: 24px;
+        height: 24px;
+      }
+
       :host([icon='checked']) i::before {
         -webkit-mask-image: url(${unsafeCSS(CheckedIcon)});
         mask-image: url(${unsafeCSS(CheckedIcon)});

packages/connect-button/src/components/card/request-card.ts

@@ -5,24 +5,33 @@ import '../account/account'
 import '../link/link'
 import { shortenAddress } from '../../helpers/shorten-address'
 import { classMap } from 'lit/directives/class-map.js'
-import { RequestItemType, RequestStatus } from 'radix-connect-common'
+import {
+  RequestItemTypes,
+  RequestStatusTypes,
+  RequestStatus,
+} from 'radix-connect-common'
 @customElement('radix-request-card')
 export class RadixRequestCard extends LitElement {
   @property({
     type: String,
   })
-  type: keyof typeof RequestItemType = 'dataRequest'
+  type: RequestItemTypes = 'dataRequest'
 
   @property({
     type: String,
   })
-  status: keyof typeof RequestStatus = 'pending'
+  status: RequestStatusTypes = 'pending'
 
   @property({
     type: Boolean,
   })
   showCancel: boolean = false
 
+  @property({
+    type: Boolean,
+  })
+  showIgnore: boolean = false
+
   @property({
     type: String,
   })
@@ -46,18 +55,29 @@ export class RadixRequestCard extends LitElement {
         pending: 'Pending Transaction',
         fail: 'Transaction Failed',
         cancelled: 'Transaction Cancelled',
+        ignored: 'Transaction Ignored',
         success: 'Send transaction',
         content: html`
           ${this.renderTxIntentHash()}
-          ${this.getRequestContentTemplate(
-            'Open your Radix Wallet app to review the transaction',
-          )}
+          ${this.status === 'pending'
+            ? html`<div class="request-content">
+                Open your Radix Wallet app to review the transaction
+                ${this.showCancel
+                  ? html`<div class="cancel" @click=${this.onCancel}>
+                      Cancel
+                    </div>`
+                  : html`<div class="cancel" @click=${this.onIgnore}>
+                      Ignore
+                    </div>`}
+              </div>`
+            : ''}
         `,
       },
       dataRequest: {
         pending: 'Data Request Pending',
         fail: 'Data Request Rejected',
         cancelled: 'Data Request Rejected',
+        ignored: '',
         success: 'Data Request',
         content: this.getRequestContentTemplate(
           'Open Your Radix Wallet App to complete the request',
@@ -68,6 +88,7 @@ export class RadixRequestCard extends LitElement {
         fail: 'Login Request Rejected',
         cancelled: 'Login Request Rejected',
         success: 'Login Request',
+        ignored: '',
         content: this.getRequestContentTemplate(
           'Open Your Radix Wallet App to complete the request',
         ),
@@ -85,7 +106,7 @@ export class RadixRequestCard extends LitElement {
   }
 
   private getRequestContentTemplate(text: string) {
-    return this.status === 'pending'
+    return this.status === RequestStatus.pending
       ? html`<div class="request-content">
           ${text}
           ${this.showCancel
@@ -95,17 +116,29 @@ export class RadixRequestCard extends LitElement {
       : ''
   }
 
+  private isErrorStatus(status: RequestStatusTypes) {
+    return (
+      [
+        RequestStatus.cancelled,
+        RequestStatus.fail,
+        RequestStatus.ignored,
+      ] as string[]
+    ).includes(status)
+  }
+
   private getIconFromStatus() {
-    return this.status === 'pending'
+    return this.status === RequestStatus.pending
       ? 'pending'
-      : this.status === 'cancelled' || this.status === 'fail'
-        ? 'error'
-        : 'checked'
+      : this.status === RequestStatus.ignored
+        ? 'ignored'
+        : this.isErrorStatus(this.status)
+          ? 'error'
+          : 'checked'
   }
 
   private getStylingFromStatus() {
     return classMap({
-      dimmed: this.status === 'fail' || this.status === 'cancelled',
+      dimmed: this.isErrorStatus(this.status),
       inverted: this.status === 'pending',
     })
   }
@@ -123,6 +156,19 @@ export class RadixRequestCard extends LitElement {
     )
   }
 
+  private onIgnore(event: MouseEvent) {
+    this.dispatchEvent(
+      new CustomEvent('onIgnoreTransactionItem', {
+        detail: {
+          ...event,
+          id: this.id,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
   private renderTxIntentHash() {
     return this.transactionIntentHash
       ? html`<div class="transaction">

packages/connect-button/src/components/card/request-cards.ts

@@ -17,15 +17,6 @@ export class RadixRequestCards extends LitElement {
           status="${requestItem.status}"
           id="${requestItem.interactionId}"
           ?showCancel="${requestItem.showCancel}"
-          @onCancel=${(event: any) => {
-            this.dispatchEvent(
-              new CustomEvent('onCancel', {
-                detail: event.detail,
-                bubbles: true,
-                composed: true,
-              }),
-            )
-          }}
           timestamp=${requestItem.createdAt}
         ></radix-request-card>`,
     )

packages/connect-button/src/components/pages/requests.ts

@@ -38,15 +38,6 @@ export class RadixRequestsPage extends LitElement {
               id="${requestItem.interactionId}"
               transactionIntentHash="${requestItem.transactionIntentHash || ''}"
               ?showCancel="${requestItem.showCancel}"
-              @onCancel=${(event: any) => {
-                this.dispatchEvent(
-                  new CustomEvent('onCancel', {
-                    detail: event.detail,
-                    bubbles: true,
-                    composed: true,
-                  }),
-                )
-              }}
               timestamp=${requestItem.createdAt}
             ></radix-request-card>`,
         )}

packages/dapp-toolkit/package.json

@@ -85,9 +85,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/radixdlt/radix-dapp-toolkit.git"
+    "url": "git+https://github.com/radixdlt/radix-dapp-toolkit.git",
+    "directory": "packages/dapp-toolkit"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   }
-}
+}