Merge pull request #312 from radixdlt/develop

Develop
radixdlt · Jan 20, 2025 · e80c5ea · e80c5ea
2 parents 8d2f0a7 + 49646ea
commit e80c5ea
Show file tree

Hide file tree

Showing 13 changed files with 49 additions and 244 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -44,6 +44,8 @@ jobs:
           secret_prefix: 'SNYK'
           secret_name: 'arn:aws:secretsmanager:eu-west-2:${{ secrets.SECRETS_ACCOUNT_ID }}:secret:github-actions/common/snyk-credentials-rXRpuX'
           parse_json: true
+      - name: Create .snyk file
+        run: echo "${{ vars.DOT_SNYK_FILE }}" > .snyk
       - name: Run Snyk to check for deps vulnerabilities
         uses: RDXWorks-actions/snyk-actions/node@master
         with:
@@ -66,6 +68,8 @@ jobs:
           secret_prefix: 'SNYK'
           secret_name: 'arn:aws:secretsmanager:eu-west-2:${{ secrets.SECRETS_ACCOUNT_ID }}:secret:github-actions/common/snyk-credentials-rXRpuX'
           parse_json: true
+      - name: Create .snyk file
+        run: echo "${{ vars.DOT_SNYK_FILE }}" > .snyk
       - name: Run Snyk to check for code vulnerabilities
         uses: RDXWorks-actions/snyk-actions/node@master
         continue-on-error: true

diff --git a/.snyk b/.snyk
diff --git a/packages/connect-button/.storybook/preview.js b/packages/connect-button/.storybook/preview.js
diff --git a/packages/connect-button/src/components/card/request-card.ts b/packages/connect-button/src/components/card/request-card.ts
@@ -259,7 +259,6 @@ export class RadixRequestCard extends LitElement {
       :host {
         display: flex;
         width: 100%;
-        margin-bottom: 10px;
       }
 
       .text-dimmed {

diff --git a/packages/connect-button/src/components/card/request-cards.ts b/packages/connect-button/src/components/card/request-cards.ts
@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit'
+import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { themeCSS } from '../../theme'
 import '../card/request-card'
@@ -16,13 +16,23 @@ export class RadixRequestCards extends LitElement {
           type="${requestItem.type}"
           status="${requestItem.status}"
           id="${requestItem.interactionId}"
+          hash="${requestItem.transactionIntentHash || ''}"
           ?showCancel="${requestItem.showCancel}"
           timestamp=${requestItem.createdAt}
         ></radix-request-card>`,
     )
   }
 
-  static styles = [themeCSS]
+  static styles = [
+    themeCSS,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+    `,
+  ]
 }
 
 declare global {

diff --git a/packages/connect-button/src/components/connect-button.ts b/packages/connect-button/src/components/connect-button.ts
@@ -96,8 +96,6 @@ export class ConnectButton extends LitElement {
 
   pristine = true
   initialBodyOverflow: string
-  initialBackdropFilter: string
-  parentElementWithBackdropFilter: HTMLElement | null
 
   windowClickEventHandler: (event: MouseEvent) => void
 
@@ -119,8 +117,6 @@ export class ConnectButton extends LitElement {
   constructor() {
     super()
     this.initialBodyOverflow = document.body.style.overflow
-    this.initialBackdropFilter = ''
-    this.parentElementWithBackdropFilter = null
     this.injectFontCSS()
     this.windowClickEventHandler = (event) => {
       if (!this.showPopoverMenu) return
@@ -174,7 +170,6 @@ export class ConnectButton extends LitElement {
     this.pristine = false
     this.showPopoverMenu = !this.showPopoverMenu
     this.toggleBodyOverflow()
-    this.toggleParentBackdropFilter()
     if (this.showPopoverMenu) {
       this.dispatchEvent(
         new CustomEvent('onShowPopover', {
@@ -193,47 +188,6 @@ export class ConnectButton extends LitElement {
         : this.initialBodyOverflow
   }
 
-  private toggleParentBackdropFilter() {
-    const OPACITY_TRANSITION_DURATION = 180
-
-    if (!this.showPopoverMenu && this.parentElementWithBackdropFilter) {
-      setTimeout(() => {
-        this.parentElementWithBackdropFilter?.style.setProperty(
-          'backdrop-filter',
-          this.initialBackdropFilter,
-        )
-        this.initialBackdropFilter = ''
-        this.parentElementWithBackdropFilter = null
-      }, OPACITY_TRANSITION_DURATION)
-
-      return
-    } else {
-      const parent = this.findParentWithBackdropFilter(this)
-      if (parent === null) {
-        return
-      }
-      this.initialBackdropFilter = parent.backdropFilter
-      this.parentElementWithBackdropFilter = parent.element
-
-      parent.element.style.backdropFilter = 'none'
-    }
-  }
-
-  private findParentWithBackdropFilter(
-    element: HTMLElement | null,
-  ): { element: HTMLElement; backdropFilter: string } | null {
-    if (!element) {
-      return null
-    }
-    const style = window.getComputedStyle(element)
-    const backdropFilter = style.getPropertyValue('backdrop-filter')
-    if (backdropFilter !== 'none') {
-      return { element, backdropFilter }
-    } else {
-      return this.findParentWithBackdropFilter(element.parentElement)
-    }
-  }
-
   private connectButtonTemplate() {
     const buttonText = this.connected ? this.personaLabel : 'Connect'
 

diff --git a/packages/connect-button/src/components/pages/requests.ts b/packages/connect-button/src/components/pages/requests.ts
@@ -1,6 +1,6 @@
 import { css, html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import '../card/request-card'
+import '../card/request-cards'
 import { RequestItem } from 'radix-connect-common'
 import { pageStyles } from './styles'
 import { formatTimestamp } from '../../helpers/format-timestamp'
@@ -22,25 +22,15 @@ export class RadixRequestsPage extends LitElement {
 
   render() {
     return html`
-      <div class="header">Connected to ${this.dAppName}</div>
+      <div class="header">Connected to ${this.dAppName || "dApp"}</div>
       <slot name="subheader"></slot>
       ${this.loggedInTimestamp
         ? html`<div class="subheader">
             Since logged in: ${formatTimestamp(this.loggedInTimestamp, ', ')}
           </div>`
         : ''}
       <div class="content">
-        ${(this.requestItems || []).map(
-          (requestItem) =>
-            html`<radix-request-card
-              type="${requestItem.type}"
-              status="${requestItem.status}"
-              id="${requestItem.interactionId}"
-              hash="${requestItem.transactionIntentHash || ''}"
-              ?showCancel="${requestItem.showCancel}"
-              timestamp=${requestItem.createdAt}
-            ></radix-request-card>`,
-        )}
+        <radix-request-cards .requestItems=${this.requestItems}></radix-request-cards>
       </div>
     `
   }
@@ -55,17 +45,6 @@ export class RadixRequestsPage extends LitElement {
         text-align: center;
         font-size: 12px;
       }
-
-      .content {
-        padding-bottom: 25px;
-        max-height: calc(100vh - 270px);
-      }
-
-      @media (min-height: 580px) {
-        .content {
-          max-height: 360px;
-        }
-      }
     `,
   ]
 }

diff --git a/packages/connect-button/src/components/pages/sharing.ts b/packages/connect-button/src/components/pages/sharing.ts
@@ -59,7 +59,7 @@ export class RadixSharingPage extends LitElement {
   }
 
   render() {
-    return html` <div class="header">Sharing with ${this.dAppName}</div>
+    return html` <div class="header">Sharing with ${this.dAppName || "dApp"}</div>
       <div class="content">
         <radix-persona-card
           avatarUrl=${this.avatarUrl}
@@ -121,19 +121,14 @@ export class RadixSharingPage extends LitElement {
       .icon.disabled::before {
         background: var(--radix-button-disabled-text-color);
       }
-      .content {
-        max-height: 193px;
-        overflow-x: hidden;
-        padding-bottom: 19px;
-      }
       .buttons {
         display: grid;
         bottom: 0;
         width: 100%;
         grid-template-columns: 1fr 115px;
         grid-gap: 10px;
         width: 100%;
-        padding-top: 5px;
+        padding-top: 10px;
         align-items: end;
       }
 

diff --git a/packages/connect-button/src/components/pages/styles.ts b/packages/connect-button/src/components/pages/styles.ts
@@ -17,11 +17,19 @@ export const pageStyles = css`
   }
 
   .content {
-    overflow: auto;
     width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
     margin-bottom: 0;
     position: relative;
-    -webkit-mask-image: linear-gradient(180deg, black 90%, transparent 100%);
-    mask-image: linear-gradient(180deg, black 90%, transparent 95%);
+    min-height: 100px;
+    /* Ensure we can't see the mask when fully scrolled to the bottom */
+    padding-bottom: 10px;
+    mask-image: linear-gradient(0deg, transparent 0px, black 10px);
+
+    /* Given .content has overflow: scroll, I feel we shouldn't need
+     * a max-height to constrain the content, but it just doesn't work
+     * So we set it manually to be correct. */
+    max-height: min(calc(100vh - 270px), 360px);
   }
 `
diff --git a/packages/connect-button/src/components/popover/popover.ts b/packages/connect-button/src/components/popover/popover.ts
@@ -75,8 +75,6 @@ export class RadixPopover extends LitElement {
         justify-content: center;
         align-items: flex-start;
         background: var(--radix-popover-background);
-        backdrop-filter: blur(30px);
-        -webkit-backdrop-filter: blur(30px);
         box-sizing: border-box;
         max-height: 100vh;
         border-radius: 12px;