@@ -65,3 +68,68 @@ export const loadingSpinnerCSS = css`
}
}
`
+
+@customElement('radix-loading-spinner')
+export class RadixLoadingSpinner extends LitElement {
+ @property({
+ type: Number,
+ })
+ size: number = 48
+
+ @property({
+ type: Number,
+ })
+ weight: number = 5
+
+ @property({
+ type: String,
+ })
+ color: string = 'var(--color-grey-2)'
+
+ static styles = [
+ css`
+ .loading-spinner-container {
+ display: flex;
+ }
+
+ .loading-spinner {
+ border-radius: 50%;
+ display: inline-block;
+ box-sizing: border-box;
+ animation: rotation 1s linear infinite;
+ align-self: center;
+ }
+
+ @keyframes rotation {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+ `,
+ ]
+
+ render() {
+ return html`
`
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'radix-loading-spinner': RadixLoadingSpinner
+ }
+}
diff --git a/packages/connect-button/src/components/mask/mask.ts b/packages/connect-button/src/components/mask/mask.ts
index d9387b0d..744f48d3 100644
--- a/packages/connect-button/src/components/mask/mask.ts
+++ b/packages/connect-button/src/components/mask/mask.ts
@@ -1,8 +1,15 @@
-import { html, css, LitElement } from 'lit'
-import { customElement } from 'lit/decorators.js'
+import { html, css, LitElement, unsafeCSS } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import MaskGradient from '../../assets/mask-gradient.svg'
@customElement('radix-mask')
export class RadixMask extends LitElement {
+ @property({
+ type: Boolean,
+ reflect: true,
+ })
+ isBranded = false
+
render() {
return html`
`
}
@@ -16,6 +23,8 @@ export class RadixMask extends LitElement {
right: unset;
height: 100%;
width: 100%;
+ padding: 16px;
+ box-sizing: border-box;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
display: flex;
@@ -26,6 +35,13 @@ export class RadixMask extends LitElement {
z-index: 2147483647;
}
+ :host([isBranded]) {
+ align-items: flex-start;
+ background: #000;
+ background-image: url(${unsafeCSS(MaskGradient)});
+ background-size: cover;
+ }
+
:host(.hide) {
opacity: 0;
pointer-events: none;
diff --git a/packages/connect-button/src/components/rcfm-page/rcfm-page.stories.ts b/packages/connect-button/src/components/rcfm-page/rcfm-page.stories.ts
new file mode 100644
index 00000000..a95680a2
--- /dev/null
+++ b/packages/connect-button/src/components/rcfm-page/rcfm-page.stories.ts
@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/web-components'
+import { html } from 'lit'
+import './rcfm-page'
+
+const meta: Meta = {
+ title: 'Components / RCfM Page',
+}
+export default meta
+
+type Story = StoryObj
+
+export const Simple: Story = {
+ render: (args) =>
+ html`
+ `,
+ args: {
+ header: 'This page is no longer active ',
+ subheader: 'Go back and try again, you can close this tab ',
+ isError: false,
+ isLoading: true,
+ },
+}
diff --git a/packages/connect-button/src/components/rcfm-page/rcfm-page.ts b/packages/connect-button/src/components/rcfm-page/rcfm-page.ts
new file mode 100644
index 00000000..705f9e22
--- /dev/null
+++ b/packages/connect-button/src/components/rcfm-page/rcfm-page.ts
@@ -0,0 +1,61 @@
+import { LitElement, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import '../mask/mask'
+import '../wallet-connector-card/wallet-connector-card'
+import '../wallet-connector-card/wallet-connector-info'
+import '../loading-spinner/loading-spinner'
+
+@customElement('radix-rcfm-page')
+export class RadixRcfmPage extends LitElement {
+ @property({
+ type: String,
+ })
+ header: string = ''
+
+ @property({
+ type: String,
+ })
+ subheader: string = ''
+
+ @property({
+ type: Boolean,
+ })
+ isError: boolean = false
+
+ @property({
+ type: Boolean,
+ })
+ isLoading: boolean = false
+
+ render() {
+ return html`
+
+ ${this.isLoading
+ ? html`
+
+
`
+ : html``}
+
+ `
+ }
+
+ static styles = [
+ css`
+ .loading-container {
+ display: flex;
+ justify-content: center;
+ padding: 18px 0;
+ }
+ `,
+ ]
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'radix-rcfm-page': RadixRcfmPage
+ }
+}
diff --git a/packages/connect-button/src/components/wallet-connector-card/wallet-connector-card.stories.ts b/packages/connect-button/src/components/wallet-connector-card/wallet-connector-card.stories.ts
new file mode 100644
index 00000000..9a8912a5
--- /dev/null
+++ b/packages/connect-button/src/components/wallet-connector-card/wallet-connector-card.stories.ts
@@ -0,0 +1,99 @@
+import { Meta, StoryObj } from '@storybook/web-components'
+import { html } from 'lit'
+import '../loading-spinner/loading-spinner'
+import './wallet-connector-card'
+import './wallet-connector-info'
+import '../mask/mask'
+
+const meta: Meta = {
+ title: 'Components / Wallet Connector Card',
+}
+export default meta
+
+type Story = StoryObj
+
+export const Simple: Story = {
+ render: (args) =>
+ html`
+ Hi
+ `,
+ args: {
+ header: 'Radix Wallet Connector',
+ },
+}
+
+export const Loading: Story = {
+ render: (args) =>
+ html`
+
+
+
`,
+ args: {
+ header: 'Radix Wallet Connector',
+ },
+}
+
+export const ErrorState: Story = {
+ render: (args) =>
+ html`
+
+
+
+ `,
+ args: {
+ header: 'Radix Wallet Connector',
+ },
+}
+
+export const ConnectionSuccessfulStory: Story = {
+ render: (args) =>
+ html`
+
+
+
+ `,
+ args: {
+ header: 'Radix Wallet Connector',
+ },
+}
+
+export const PageNoLongerActive: Story = {
+ render: (args) =>
+ html`
+
+
+
+ `,
+ args: {
+ header: 'Radix Wallet Connector',
+ },
+}
+
+export const WithMask: Story = {
+ render: (args) => html`
+
+
+
+
+
+ `,
+ args: {
+ header: 'Radix Wallet Connector',
+ },
+}
diff --git a/packages/connect-button/src/components/wallet-connector-card/wallet-connector-card.ts b/packages/connect-button/src/components/wallet-connector-card/wallet-connector-card.ts
new file mode 100644
index 00000000..f723cf6c
--- /dev/null
+++ b/packages/connect-button/src/components/wallet-connector-card/wallet-connector-card.ts
@@ -0,0 +1,68 @@
+import { html, css, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import logoGradient from '../../assets/logo-gradient.png'
+@customElement('radix-wallet-connector-card')
+export class RadixWalletConnectorCard extends LitElement {
+ @property({
+ type: String,
+ })
+ header: string = 'Radix Wallet Connector'
+
+ render() {
+ return html`
+
+
+
+
+
+
+
+ `
+ }
+
+ static styles = [
+ css`
+ .radix-wallet-connector-card {
+ background: #fff;
+ padding: 24px;
+ border-radius: 16px;
+ position: relative;
+ margin-top: 60px;
+ text-align: center;
+ box-shadow: 0px 4px 7px 0px #00000040;
+ }
+
+ .radix-wallet-connector-card__logo {
+ position: absolute;
+ left: 0;
+ right: 0;
+ }
+
+ .radix-wallet-connector-card__logo img {
+ width: 78px;
+ height: 78px;
+ transform: translateY(-66px);
+ box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
+ border-radius: 16px;
+ }
+
+ .radix-wallet-connector-card__header {
+ margin-top: 32px;
+ margin-bottom: 24px;
+ font-size: 18px;
+ color: var(--color-grey-2);
+ }
+ `,
+ ]
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'radix-wallet-connector-card': RadixWalletConnectorCard
+ }
+}
diff --git a/packages/connect-button/src/components/wallet-connector-card/wallet-connector-info.ts b/packages/connect-button/src/components/wallet-connector-card/wallet-connector-info.ts
new file mode 100644
index 00000000..2678df62
--- /dev/null
+++ b/packages/connect-button/src/components/wallet-connector-card/wallet-connector-info.ts
@@ -0,0 +1,68 @@
+import { LitElement, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import IconWarning from '../../assets/icon-warning.svg'
+import { classMap } from 'lit/directives/class-map.js'
+
+@customElement('radix-wallet-connector-info')
+export class RadixWalletConnectorInfo extends LitElement {
+ @property({
+ type: String,
+ })
+ header: string = ''
+
+ @property({
+ type: String,
+ })
+ subheader: string = ''
+
+ @property({
+ type: Boolean,
+ })
+ isError: boolean = false
+
+ render() {
+ return html`
+
+ ${this.isError
+ ? html`
`
+ : ''}
+
+
${this.header}
+ ${this.subheader ? html`
${this.subheader}
` : ''}
+
+ `
+ }
+
+ static styles = [
+ css`
+ .connector-error {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ gap: 16px;
+ }
+ h1 {
+ font-size: 24px;
+ font-weight: 700;
+ margin: 0;
+ }
+
+ .error {
+ color: #f00000;
+ }
+
+ h3 {
+ margin: 0;
+ color: var(--color-grey-2);
+ font-size: 16px;
+ font-weight: 500;
+ }
+ `,
+ ]
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'radix-wallet-connector-info': RadixWalletConnectorInfo
+ }
+}
diff --git a/packages/connect-button/src/index.ts b/packages/connect-button/src/index.ts
index f0bc36fa..39d04349 100644
--- a/packages/connect-button/src/index.ts
+++ b/packages/connect-button/src/index.ts
@@ -1 +1,2 @@
export * from './components/connect-button'
+export * from './components/rcfm-page/rcfm-page'
\ No newline at end of file