diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index af737eff..cda690c4 100644 --- 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 deleted file mode 100644 index 834a0c7f..00000000 --- a/.snyk +++ /dev/null @@ -1,3 +0,0 @@ -exclude: - global: - - packages/dapp-toolkit/src/modules/wallet-request/crypto/signature.spec.ts \ No newline at end of file diff --git a/packages/connect-button/.storybook/preview.js b/packages/connect-button/.storybook/preview.js index 79106bd5..f3c1f9af 100644 --- a/packages/connect-button/.storybook/preview.js +++ b/packages/connect-button/.storybook/preview.js @@ -59,6 +59,14 @@ export const parameters = { name: 'dark-grey', value: '#424245', }, + { + name: 'black', + value: '#000000', + }, + { + name: 'white', + value: '#ffffff', + }, ], }, }, 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/connect-button.ts b/packages/connect-button/src/components/connect-button.ts index 88fcdae8..4537ff38 100644 --- 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 index 98f09ba8..667b7178 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' @@ -22,7 +22,7 @@ export class RadixRequestsPage extends LitElement { render() { return html` -
Connected to ${this.dAppName}
+
Connected to ${this.dAppName || "dApp"}
${this.loggedInTimestamp ? html`
@@ -30,17 +30,7 @@ export class RadixRequestsPage extends LitElement {
` : ''}
- ${(this.requestItems || []).map( - (requestItem) => - html``, - )} +
` } @@ -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 index ab8c5716..f0407364 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"}
`, } @@ -185,80 +112,7 @@ export const Example2: StoryObj = { accumsan turpis, ac tempor mauris hendrerit ut. Quisque hendrerit feugiat enim sit amet blandit. Sed efficitur ultrices quam viverra accumsan. Donec vehicula hendrerit purus at laoreet. Cras et ultrices justo, sed hendrerit - tellus. Ut efficitur dolor nec magna tincidunt mollis eu eget nibh. Mauris - sit amet interdum mauris, quis fringilla ex. Duis augue enim, gravida ac - lectus fermentum, semper egestas magna. Sed at metus non magna tempus - suscipit nec et massa. Pellentesque ut sem ut nunc gravida vehicula sit - amet at felis. Suspendisse suscipit pulvinar ipsum, non eleifend velit - ultrices eu. Maecenas vitae semper quam. Suspendisse molestie pulvinar - lorem eu iaculis. Sed ut ligula nisl. Pellentesque habitant morbi - tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus - in rhoncus sem. Etiam dignissim ex non efficitur ultricies. Vestibulum - ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia - curae; In finibus, orci et feugiat maximus, sem massa finibus nisi, ut - viverra risus lacus vel est. Vestibulum semper blandit aliquam. Sed a orci - dolor. Vivamus consequat eros urna, vel volutpat erat egestas quis. - Integer accumsan lorem sit amet tristique maximus. Aenean pharetra commodo - dolor. Suspendisse dapibus nibh eget volutpat tempus. Interdum et - malesuada fames ac ante ipsum primis in faucibus. In feugiat scelerisque - risus pharetra vestibulum. Praesent suscipit eget velit id laoreet. Morbi - quis arcu gravida augue placerat pharetra vitae id dui. Nunc congue tempus - eleifend. Ut sed vulputate sem. Vivamus dignissim est ut turpis consequat - dignissim. Aenean eget facilisis dui, vitae rutrum eros. Nullam dignissim - non ipsum a aliquet. Etiam dolor augue, sodales ac magna in, sagittis - tempus leo. Maecenas eu sapien bibendum, consectetur nibh quis, ornare - felis. Quisque ornare luctus lacus sed condimentum. Praesent lorem ex, - efficitur sed orci eget, tincidunt egestas mi. Vivamus blandit sapien sit - amet nunc consectetur feugiat. Cras tempor sagittis est, vitae mollis - libero auctor at. Integer eget enim mollis, elementum arcu a, maximus - diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec - mi lectus, suscipit non dolor commodo, tempor blandit nunc. Interdum et - malesuada fames ac ante ipsum primis in faucibus. Nulla pellentesque - elementum risus scelerisque posuere. Nullam gravida lectus eget eros - molestie bibendum. Suspendisse at elit porttitor, commodo tellus et, - pharetra nisl. Ut fringilla, massa vel sagittis consectetur, tortor purus - ornare risus, in molestie sem nibh in eros. Phasellus ac odio vel tellus - posuere volutpat eu vitae augue. Maecenas finibus ultricies odio, sed - gravida urna vulputate feugiat. Donec nulla quam, tempor vitae bibendum - sed, ultricies ut magna. Sed varius condimentum metus eu ultricies. - Phasellus lacus justo, faucibus ac efficitur a, lobortis suscipit odio. - Sed sed blandit ipsum, ut pellentesque mauris. Duis viverra vehicula - fringilla. Mauris nec tempus nulla. Nulla at tortor at est malesuada - pharetra non ac neque. Integer vel scelerisque leo. Nam non nibh id nibh - placerat semper ullamcorper et justo. Sed elementum euismod interdum. Cras - a auctor purus. Etiam rhoncus pulvinar metus, sit amet mollis justo - suscipit sed. Donec id tristique ante. Ut ut augue cursus, finibus nisi - vel, egestas lectus. Donec eu dolor in justo hendrerit porttitor nec quis - felis. Vestibulum ut fringilla arcu. Donec bibendum ex nec viverra - imperdiet. Pellentesque sed elementum lorem. Integer rutrum neque diam, id - vehicula sapien malesuada at. Morbi efficitur elit vel tempor congue. Nam - a pulvinar odio. Sed nec lobortis diam. Proin fermentum lorem ligula, non - sodales urna tempor vitae. Phasellus nec tincidunt nibh, ac vehicula - purus. Mauris quis dolor ut ante egestas volutpat in ut libero. Integer eu - nibh convallis nulla sodales mattis quis sit amet purus. Duis sed metus - augue. Nam ac quam dignissim, tincidunt mauris feugiat, porttitor risus. - Maecenas quis urna quis magna vulputate porta. Praesent a erat nisi. Donec - pharetra imperdiet tellus, non lobortis nisi tincidunt et. Pellentesque - laoreet, arcu in fermentum egestas, metus tellus feugiat erat, non pretium - ex nibh in dolor. Sed in bibendum diam. Phasellus ante neque, dapibus a - nunc eget, commodo laoreet tortor. Nullam aliquam vitae nisi eu tincidunt. - Pellentesque tristique magna sed nulla rutrum porta. Donec tellus nulla, - auctor et hendrerit posuere, consectetur vel turpis. Phasellus ac interdum - diam. Suspendisse ullamcorper metus eu lacus varius euismod. Suspendisse - est magna, sagittis ac erat quis, interdum interdum tortor. Maecenas - sollicitudin est id condimentum eleifend. Suspendisse potenti. Vivamus - hendrerit nulla quis viverra molestie. Suspendisse ut auctor tortor. - Aliquam sed risus arcu. Donec pulvinar massa id felis malesuada fermentum. - Ut eget diam nec ipsum mollis condimentum. Duis posuere in lectus non - commodo. Curabitur tincidunt tristique scelerisque. Quisque porta diam - risus, vitae blandit purus posuere id. Sed venenatis nisl ac risus laoreet - ornare. Mauris vel justo dignissim, tristique nibh nec, fermentum felis. - Suspendisse egestas massa congue metus mollis, eget venenatis urna - eleifend. Fusce velit lorem, varius ac lectus porta, bibendum egestas - tellus. Donec pellentesque justo sed fringilla finibus. Donec bibendum id - diam sit amet facilisis. Etiam eu diam id libero ultrices ornare non eu - enim. Vivamus et viverra urna. Etiam a tincidunt elit, a lobortis nisl. Ut - consectetur tempor tellus sed egestas. Proin elementum quam ac elit + tellus. Ut efficitur dolor nec magna tincidunt mollis eu eget nibh. `, } diff --git a/packages/connect-button/src/theme.ts b/packages/connect-button/src/theme.ts index a912fcbb..17f8176f 100644 --- a/packages/connect-button/src/theme.ts +++ b/packages/connect-button/src/theme.ts @@ -47,7 +47,7 @@ export const themeCSS = css` } :host([mode='light']) { - --radix-popover-background: color-mix(in srgb, #efefef 50%, transparent); + --radix-popover-background: #e4e4e4; --radix-popover-border-color: var(--color-grey-3); --radix-popover-text-color: var(--color-grey-1); @@ -75,7 +75,7 @@ export const themeCSS = css` --radix-button-background: color-mix( in srgb, - var(--color-light) 80%, + var(--color-light) 70%, transparent ); --radix-button-background-hover: var(--color-light); @@ -93,7 +93,7 @@ export const themeCSS = css` } :host([mode='dark']) { - --radix-popover-background: color-mix(in srgb, #000000 50%, transparent); + --radix-popover-background: #5c5c5c; // Effective colour of background in designs without transparency --radix-popover-border-color: var(--color-dark); --radix-popover-text-color: var(--color-light); @@ -103,11 +103,11 @@ export const themeCSS = css` transparent ); --radix-popover-tabs-button-active-text-color: var(--color-light); - --radix-popover-tabs-button-active-background: #515151; + --radix-popover-tabs-button-active-background: #494949; --radix-link-color: var(--color-white); - --radix-card-background: #515151; + --radix-card-background: #494949; --radix-card-text-color: var(--color-light); --radix-card-text-dimmed-color: var(--color-grey-3); --radix-card-inverted-background: var(--color-grey-5); diff --git a/packages/dapp-toolkit/README.md b/packages/dapp-toolkit/README.md index 470cf3c5..f57d5753 100644 --- a/packages/dapp-toolkit/README.md +++ b/packages/dapp-toolkit/README.md @@ -25,9 +25,8 @@ npm install @radixdlt/radix-dapp-toolkit Add following code to head section of your page. See example usage inside `examples/cdn/index.html` ```html - ```