From e39bd95a81729320ed646b7fe47cc2eb58940802 Mon Sep 17 00:00:00 2001 From: David Edey Date: Fri, 20 Dec 2024 00:03:32 +0000 Subject: [PATCH 1/3] fix: Empty dAppName displays as `dApp` --- packages/connect-button/src/components/pages/requests.ts | 2 +- packages/connect-button/src/components/pages/sharing.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/connect-button/src/components/pages/requests.ts b/packages/connect-button/src/components/pages/requests.ts index 98f09ba8..2d322b80 100644 --- a/packages/connect-button/src/components/pages/requests.ts +++ b/packages/connect-button/src/components/pages/requests.ts @@ -22,7 +22,7 @@ export class RadixRequestsPage extends LitElement { render() { return html` -
Connected to ${this.dAppName}
+
Connected to ${this.dAppName || "dApp"}
${this.loggedInTimestamp ? html`
diff --git a/packages/connect-button/src/components/pages/sharing.ts b/packages/connect-button/src/components/pages/sharing.ts index ab8c5716..b49c2db2 100644 --- 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`
Sharing with ${this.dAppName}
+ return html`
Sharing with ${this.dAppName || "dApp"}
Date: Fri, 20 Dec 2024 00:05:18 +0000 Subject: [PATCH 2/3] tweak: Use `radix-request-cards` --- .../src/components/card/request-card.ts | 1 - .../src/components/card/request-cards.ts | 14 ++++++++++++-- .../src/components/pages/requests.ts | 14 ++------------ 3 files changed, 14 insertions(+), 15 deletions(-) diff --git a/packages/connect-button/src/components/card/request-card.ts b/packages/connect-button/src/components/card/request-card.ts index fbab9f8c..c962ce67 100644 --- 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 index 882fe79e..6dcd6e96 100644 --- 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} >`, ) } - 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/pages/requests.ts b/packages/connect-button/src/components/pages/requests.ts index 2d322b80..395d48dd 100644 --- 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' @@ -30,17 +30,7 @@ export class RadixRequestsPage extends LitElement {
` : ''}
- ${(this.requestItems || []).map( - (requestItem) => - html``, - )} +
` } From fa9bdac2c179b48e1421a647385bfa03385f270c Mon Sep 17 00:00:00 2001 From: David Edey Date: Fri, 20 Dec 2024 00:05:45 +0000 Subject: [PATCH 3/3] tweak: Improve .content to avoid wasted margins and special casing --- .../src/components/pages/requests.ts | 11 ----------- .../connect-button/src/components/pages/sharing.ts | 7 +------ .../connect-button/src/components/pages/styles.ts | 14 +++++++++++--- 3 files changed, 12 insertions(+), 20 deletions(-) diff --git a/packages/connect-button/src/components/pages/requests.ts b/packages/connect-button/src/components/pages/requests.ts index 395d48dd..667b7178 100644 --- a/packages/connect-button/src/components/pages/requests.ts +++ b/packages/connect-button/src/components/pages/requests.ts @@ -45,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 index b49c2db2..f0407364 100644 --- a/packages/connect-button/src/components/pages/sharing.ts +++ b/packages/connect-button/src/components/pages/sharing.ts @@ -121,11 +121,6 @@ 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; @@ -133,7 +128,7 @@ export class RadixSharingPage extends LitElement { 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 index 8d53debb..b83078fb 100644 --- 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); } `