From 1e0b5db6dbaa2e08c787c655949bf0332cec751a Mon Sep 17 00:00:00 2001
From: Dawid Sowa <dawid.sowa@rdx.works>
Date: Thu, 6 Jun 2024 17:28:15 +0200
Subject: [PATCH] feat: add rcfm components

---
 .../src/assets/icon-warning.svg               |  3 +
 .../src/assets/mask-gradient.svg              | 48 +++++++++
 .../loading-spinner/loading-spinner.ts        | 69 ++++++++++++-
 .../src/components/mask/mask.ts               | 20 +++-
 .../components/rcfm-page/rcfm-page.stories.ts | 27 +++++
 .../src/components/rcfm-page/rcfm-page.ts     | 61 ++++++++++++
 .../wallet-connector-card.stories.ts          | 99 +++++++++++++++++++
 .../wallet-connector-card.ts                  | 68 +++++++++++++
 .../wallet-connector-info.ts                  | 68 +++++++++++++
 packages/connect-button/src/index.ts          |  1 +
 10 files changed, 461 insertions(+), 3 deletions(-)
 create mode 100644 packages/connect-button/src/assets/icon-warning.svg
 create mode 100644 packages/connect-button/src/assets/mask-gradient.svg
 create mode 100644 packages/connect-button/src/components/rcfm-page/rcfm-page.stories.ts
 create mode 100644 packages/connect-button/src/components/rcfm-page/rcfm-page.ts
 create mode 100644 packages/connect-button/src/components/wallet-connector-card/wallet-connector-card.stories.ts
 create mode 100644 packages/connect-button/src/components/wallet-connector-card/wallet-connector-card.ts
 create mode 100644 packages/connect-button/src/components/wallet-connector-card/wallet-connector-info.ts

diff --git a/packages/connect-button/src/assets/icon-warning.svg b/packages/connect-button/src/assets/icon-warning.svg
new file mode 100644
index 00000000..87f3463c
--- /dev/null
+++ b/packages/connect-button/src/assets/icon-warning.svg
@@ -0,0 +1,3 @@
+<svg width="34" height="29" viewBox="0 0 34 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 5.985L28.295 25.5H5.705L17 5.985ZM17 0L0.5 28.5H33.5L17 0ZM18.5 21H15.5V24H18.5V21ZM18.5 12H15.5V18H18.5V12Z" fill="#F00000"/>
+</svg>
diff --git a/packages/connect-button/src/assets/mask-gradient.svg b/packages/connect-button/src/assets/mask-gradient.svg
new file mode 100644
index 00000000..3e06b2fc
--- /dev/null
+++ b/packages/connect-button/src/assets/mask-gradient.svg
@@ -0,0 +1,48 @@
+<svg width="375" height="559" viewBox="0 0 375 559" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2_53)">
+<path d="M0 0H375V559H0V0Z" fill="white"/>
+<rect width="375" height="559" fill="#052CC0"/>
+<mask id="mask0_2_53" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="375" height="559">
+<rect width="375" height="559" fill="#052CC0"/>
+</mask>
+<g mask="url(#mask0_2_53)">
+<g filter="url(#filter0_f_2_53)">
+<path d="M148.659 -395.132C146.651 -473.239 218.066 -389.886 308.169 -208.956C398.271 -28.0265 472.942 181.965 474.949 260.072C476.957 338.18 232.895 -5.93218 142.792 -186.862C52.6893 -367.791 150.666 -317.024 148.659 -395.132Z" fill="#20E4FF"/>
+</g>
+<g filter="url(#filter1_f_2_53)">
+<path d="M114.582 450.824C174.77 345.956 230.358 516.956 238.741 832.763C247.125 1148.57 174.769 547.632 114.581 652.5C54.3929 757.368 -56.9305 1036.69 -65.3141 720.878C-73.6976 405.071 54.3938 555.691 114.582 450.824Z" fill="#060F8F"/>
+</g>
+<g filter="url(#filter2_f_2_53)">
+<path d="M-80.2282 685.282C-104.548 895.409 -200.096 836.938 -220.061 685.281C-240.025 533.623 -361.882 665.462 -337.562 455.335C-313.242 245.207 106.474 150.177 126.439 301.834C146.404 453.492 -55.9084 475.154 -80.2282 685.282Z" fill="#21FFBE"/>
+</g>
+</g>
+<g filter="url(#filter3_f_2_53)">
+<path d="M367.754 168.244C374.123 39.3221 511.254 80.7441 511.254 115.244C566.396 294.032 477.274 539.259 470.905 668.181C464.536 797.103 300.2 559.019 245.058 380.231C189.916 201.442 361.385 297.166 367.754 168.244Z" fill="#FF43CA"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_2_53" x="-45.3724" y="-574.446" width="670.334" height="995.87" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="75" result="effect1_foregroundBlur_2_53"/>
+</filter>
+<filter id="filter1_f_2_53" x="-119.553" y="366.112" width="412.807" height="613.204" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="26.9233" result="effect1_foregroundBlur_2_53"/>
+</filter>
+<filter id="filter2_f_2_53" x="-490.757" y="77.52" width="768.579" height="894.305" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="75" result="effect1_foregroundBlur_2_53"/>
+</filter>
+<filter id="filter3_f_2_53" x="84.1468" y="-69.6171" width="595.027" height="924.523" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="75" result="effect1_foregroundBlur_2_53"/>
+</filter>
+<clipPath id="clip0_2_53">
+<path d="M0 0H375V559H0V0Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/connect-button/src/components/loading-spinner/loading-spinner.ts b/packages/connect-button/src/components/loading-spinner/loading-spinner.ts
index ed1351da..9c15cac0 100644
--- a/packages/connect-button/src/components/loading-spinner/loading-spinner.ts
+++ b/packages/connect-button/src/components/loading-spinner/loading-spinner.ts
@@ -1,5 +1,7 @@
-import { css, html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+import { LitElement, css, html } from 'lit'
 import { BUTTON_MIN_WIDTH } from '../../constants'
+import { customElement, property } from 'lit/decorators.js'
 
 export const LoadingSpinner = html`<div class="loading-spinner-container">
   <div class="loading-spinner"></div>
@@ -65,3 +67,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`<div class="loading-spinner-container">
+      <div
+        class="loading-spinner"
+        style=${styleMap({
+          width: `${this.size}px`,
+          height: `${this.size}px`,
+          minWidth: `${this.size}px`,
+          minHeight: `${this.size}px`,
+          border: `${this.weight}px solid color-mix(in srgb, ${this.color} 30%, transparent)`,
+          borderBottomColor: this.color,
+        })}
+      ></div>
+    </div>`
+  }
+}
+
+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`<slot></slot>`
   }
@@ -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` <radix-rcfm-page
+      header=${args.header}
+      subheader=${args.subheader}
+      ?isError=${args.isError}
+      ?isLoading=${args.isLoading}
+    >
+    </radix-rcfm-page>`,
+  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` <radix-mask isBranded>
+      <radix-wallet-connector-card>
+        ${this.isLoading
+          ? html`<div class="loading-container">
+              <radix-loading-spinner></radix-loading-spinner>
+            </div>`
+          : html`<radix-wallet-connector-info
+              header=${this.header}
+              subheader=${this.subheader}
+              ?isError=${this.isError}
+            ></radix-wallet-connector-info>`}
+      </radix-wallet-connector-card>
+    </radix-mask>`
+  }
+
+  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` <radix-wallet-connector-card header=${args.header}>
+      <h1>Hi</h1>
+    </radix-wallet-connector-card>`,
+  args: {
+    header: 'Radix Wallet Connector',
+  },
+}
+
+export const Loading: Story = {
+  render: (args) =>
+    html` <radix-mask isBranded
+      ><radix-wallet-connector-card header=${args.header}>
+        <div style="padding: 32px 0;display: flex; justify-content: center;">
+          <radix-loading-spinner></radix-loading-spinner>
+        </div> </radix-wallet-connector-card
+    ></radix-mask>`,
+  args: {
+    header: 'Radix Wallet Connector',
+  },
+}
+
+export const ErrorState: Story = {
+  render: (args) =>
+    html` <radix-wallet-connector-card header=${args.header}>
+      <div style="padding: 18px 0;display: flex; justify-content: center;">
+        <radix-wallet-connector-info
+          header="Connection failed"
+          subheader="Go back and try again, you can close this tab"
+          isError
+        ></radix-wallet-connector-info>
+      </div>
+    </radix-wallet-connector-card>`,
+  args: {
+    header: 'Radix Wallet Connector',
+  },
+}
+
+export const ConnectionSuccessfulStory: Story = {
+  render: (args) =>
+    html` <radix-wallet-connector-card header=${args.header}>
+      <div style="padding: 18px 0;display: flex; justify-content: center;">
+        <radix-wallet-connector-info
+          header="This page is no longer active "
+          subheader="You can now close this tab"
+        ></radix-wallet-connector-info>
+      </div>
+    </radix-wallet-connector-card>`,
+  args: {
+    header: 'Radix Wallet Connector',
+  },
+}
+
+export const PageNoLongerActive: Story = {
+  render: (args) =>
+    html` <radix-wallet-connector-card header=${args.header}>
+      <div style="padding: 18px 0;display: flex; justify-content: center;">
+        <radix-wallet-connector-info
+          header="Connection successful"
+          subheader="You can now close this tab"
+        ></radix-wallet-connector-info>
+      </div>
+    </radix-wallet-connector-card>`,
+  args: {
+    header: 'Radix Wallet Connector',
+  },
+}
+
+export const WithMask: Story = {
+  render: (args) => html`
+    <radix-mask isBranded>
+      <radix-wallet-connector-card header=${args.header}>
+        <div style="padding: 18px 0;display: flex; justify-content: center;">
+          <radix-wallet-connector-info
+            header="Connection successful"
+            subheader="You can now close this tab"
+          ></radix-wallet-connector-info>
+        </div> </radix-wallet-connector-card
+    ></radix-mask>
+  `,
+  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`
+      <div class="radix-wallet-connector-card">
+        <div class="radix-wallet-connector-card__logo">
+          <img
+            width="78"
+            height="78"
+            src=${logoGradient}
+            alt="Radix Wallet Connector Logo"
+          />
+        </div>
+        <div class="radix-wallet-connector-card__header">${this.header}</div>
+        <slot></slot>
+      </div>
+    `
+  }
+
+  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`
+      <div class="connector-error">
+        ${this.isError
+          ? html`<img src="${IconWarning}" alt="Warning" width="33" />`
+          : ''}
+
+        <h1 class=${classMap({ error: this.isError })}>${this.header}</h1>
+        ${this.subheader ? html`<h3>${this.subheader}</h3>` : ''}
+      </div>
+    `
+  }
+
+  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