diff --git a/packages/connect-button/src/components/connect-button.stories.ts b/packages/connect-button/src/components/connect-button.stories.ts index 2d8adda4..5f83b236 100644 --- a/packages/connect-button/src/components/connect-button.stories.ts +++ b/packages/connect-button/src/components/connect-button.stories.ts @@ -178,6 +178,12 @@ const personaData: PersonaData[] = [ }, ] +export const mobileNotConnected = Template.bind({}) +mobileNotConnected.args = { + ...defaultArgs, + isMobile: true, +} + export const connectorExtensionNotInstalled = Template.bind({}) connectorExtensionNotInstalled.args = { ...defaultArgs, diff --git a/packages/connect-button/src/components/connect-button.ts b/packages/connect-button/src/components/connect-button.ts index ad2ede19..10720851 100644 --- a/packages/connect-button/src/components/connect-button.ts +++ b/packages/connect-button/src/components/connect-button.ts @@ -61,11 +61,6 @@ export class ConnectButton extends LitElement { }) isMobile: boolean = false - @property({ - type: Boolean, - }) - enableMobile: boolean = false - @property({ type: Boolean, }) @@ -258,10 +253,6 @@ export class ConnectButton extends LitElement { >` } - private get showComingSoonTemplate() { - return this.isMobile && !this.enableMobile - } - private get showPopoverCloseButton() { return this.isMobile } @@ -282,9 +273,7 @@ export class ConnectButton extends LitElement { popoverPosition: !this.isMobile, })} > - ${this.showComingSoonTemplate - ? this.renderComingSoonTemplate() - : this.renderPopoverContentTemplate()} + ${this.renderPopoverContentTemplate()} ` } @@ -305,15 +294,6 @@ export class ConnectButton extends LitElement { : this.connectTemplate() } - private renderComingSoonTemplate() { - return html`
-
Mobile dApps are coming soon.
-
- For now, please connect to Radix dApps using a desktop web browser. -
-
` - } - render() { return html` ${this.connectButtonTemplate()} diff --git a/packages/connect-button/src/components/link/link.ts b/packages/connect-button/src/components/link/link.ts index 547620a5..d643ed06 100644 --- a/packages/connect-button/src/components/link/link.ts +++ b/packages/connect-button/src/components/link/link.ts @@ -4,21 +4,16 @@ import { customElement, property } from 'lit/decorators.js' import NorthEastArrowIcon from '../../assets/icon-north-east-arrow.svg' @customElement('radix-link') export class RadixLink extends LitElement { - @property({ - type: String, - }) - href: string = '' - @property({ type: String, }) displayText: string = '' render() { - return html` + return html` ${this.displayText} - ` + ` } static styles = [ @@ -31,6 +26,7 @@ export class RadixLink extends LitElement { gap: 4px; align-items: center; font-size: 14px; + cursor: pointer; } .icon-north-east-arrow::before { diff --git a/packages/connect-button/src/components/pages/not-connected.ts b/packages/connect-button/src/components/pages/not-connected.ts index 5a04f8c1..72a013ed 100644 --- a/packages/connect-button/src/components/pages/not-connected.ts +++ b/packages/connect-button/src/components/pages/not-connected.ts @@ -62,24 +62,42 @@ export class RadixNotConnectedPage extends LitElement { private connectNowButtonTemplate() { const disabled = (!this.isExtensionAvailable || !this.isWalletLinked) && !this.isMobile + + const template = this.isMobile + ? html`` + : html`` + return html` { - if (disabled) return - this.dispatchEvent( - new CustomEvent('onConnect', { - bubbles: true, - composed: true, - }), - ) - }} - > - Connect Now - ` + class="${classMap({ + full: true, + primary: true, + disabled, + })}" + @click=${() => { + if (disabled) return + this.dispatchEvent( + new CustomEvent('onConnect', { + bubbles: true, + composed: true, + }), + ) + }} + > + Connect Now ${template}` } private renderCeNotInstalledTemplate() { @@ -90,7 +108,6 @@ export class RadixNotConnectedPage extends LitElement {