Merge pull request #231 from radixdlt/get-wallet-link

feat: add get wallet link in unconnected state
radixdlt · Jul 1, 2024 · e5a8c93 · e5a8c93
2 parents 837eced + e4fd47f
commit e5a8c93
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 59 deletions.
diff --git 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
@@ -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 {
     ></radix-requests-page>`
   }
 
-  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()}
     </radix-popover>`
   }
 
@@ -305,15 +294,6 @@ export class ConnectButton extends LitElement {
       : this.connectTemplate()
   }
 
-  private renderComingSoonTemplate() {
-    return html` <div class="mobile-wrapper">
-      <div class="header">Mobile dApps are coming soon.</div>
-      <div class="content">
-        For now, please connect to Radix dApps using a desktop web browser.
-      </div>
-    </div>`
-  }
-
   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
@@ -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`<a target="_blank" href=${this.href} class="link">
+    return html`<span class="link">
       ${this.displayText}
       <i class="icon-north-east-arrow"></i>
-    </a>`
+    </span>`
   }
 
   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
@@ -62,24 +62,42 @@ export class RadixNotConnectedPage extends LitElement {
   private connectNowButtonTemplate() {
     const disabled =
       (!this.isExtensionAvailable || !this.isWalletLinked) && !this.isMobile
+
+    const template = this.isMobile
+      ? html`<div class="cta-link">
+          <radix-link
+            displayText="Don't have the Radix Wallet?"
+            @click=${() => {
+              this.dispatchEvent(
+                new CustomEvent('onLinkClick', {
+                  bubbles: true,
+                  composed: true,
+                  detail: { type: 'getWallet' },
+                }),
+              )
+            }}
+          ></radix-link>
+        </div>`
+      : html``
+
     return html`<radix-themed-button
-      class="${classMap({
-        full: true,
-        primary: true,
-        disabled,
-      })}"
-      @click=${() => {
-        if (disabled) return
-        this.dispatchEvent(
-          new CustomEvent('onConnect', {
-            bubbles: true,
-            composed: true,
-          }),
-        )
-      }}
-    >
-      Connect Now
-    </radix-themed-button>`
+        class="${classMap({
+          full: true,
+          primary: true,
+          disabled,
+        })}"
+        @click=${() => {
+          if (disabled) return
+          this.dispatchEvent(
+            new CustomEvent('onConnect', {
+              bubbles: true,
+              composed: true,
+            }),
+          )
+        }}
+      >
+        Connect Now </radix-themed-button
+      >${template}`
   }
 
   private renderCeNotInstalledTemplate() {
@@ -90,7 +108,6 @@ export class RadixNotConnectedPage extends LitElement {
 
       <div class="cta-link">
         <radix-link
-          href="http://wallet.radixdlt.com/"
           displayText="Download and Setup Guide"
           @click=${() => {
             this.dispatchEvent(
@@ -130,7 +147,6 @@ export class RadixNotConnectedPage extends LitElement {
 
       <div class="cta-link">
         <radix-link
-          href="http://wallet.radixdlt.com/"
           displayText="Download and Setup Guide"
           @click=${() => {
             this.dispatchEvent(

diff --git a/packages/dapp-toolkit/src/modules/connect-button/connect-button.module.ts b/packages/dapp-toolkit/src/modules/connect-button/connect-button.module.ts
@@ -43,7 +43,6 @@ export type ConnectButtonModuleInput = {
   logger?: Logger
   onDisconnect?: () => void
   explorer?: ExplorerConfig
-  enableMobile?: boolean
   providers: {
     stateModule: StateModule
     gatewayModule: GatewayModule
@@ -74,7 +73,6 @@ export const ConnectButtonModule = (
 
   const stateModule = input.providers.stateModule
   const gatewayModule = input.providers.gatewayModule
-  const enableMobile = input.enableMobile ?? false
 
   const walletRequestModule = input.providers.walletRequestModule
 
@@ -100,8 +98,6 @@ export const ConnectButtonModule = (
         switchMap((connectButtonElement) => {
           logger?.debug({ event: `connectButtonDiscovered` })
 
-          connectButtonElement.enableMobile = enableMobile
-
           const onConnect$ = fromEvent(connectButtonElement, 'onConnect').pipe(
             tap(() => {
               onConnect((value) => subjects.onConnect.next(value))
@@ -291,7 +287,11 @@ export const ConnectButtonModule = (
             window.open(url)
           } else if (type === 'setupGuide')
             window.open('https://wallet.radixdlt.com')
-          else if (type === 'showQrCode' && transport?.showQrCode)
+          else if (type === 'getWallet') {
+            window.open(
+              'https://ib64v.app.link/wiAsvigtiDb?_p=c81529c391017af7e5038bfc',
+            )
+          } else if (type === 'showQrCode' && transport?.showQrCode)
             transport.showQrCode()
         }),
       )

diff --git a/packages/dapp-toolkit/src/modules/connect-button/subjects.ts b/packages/dapp-toolkit/src/modules/connect-button/subjects.ts
@@ -31,7 +31,7 @@ export const ConnectButtonSubjects = () => ({
   personaData: new BehaviorSubject<{ value: string; field: string }[]>([]),
   dAppName: new BehaviorSubject<string>(''),
   onLinkClick: new Subject<{
-    type: 'account' | 'transaction' | 'setupGuide' | 'showQrCode'
+    type: 'account' | 'transaction' | 'setupGuide' | 'showQrCode' | 'getWallet'
     data: string
   }>(),
 })
diff --git a/packages/dapp-toolkit/src/modules/connect-button/types.ts b/packages/dapp-toolkit/src/modules/connect-button/types.ts
@@ -23,7 +23,7 @@ export type ConnectButtonModuleOutput = {
   onShowPopover$: Observable<void>
   onCancelRequestItem$: Observable<string>
   onLinkClick$: Observable<{
-    type: 'account' | 'transaction' | 'showQrCode' | 'setupGuide'
+    type: 'account' | 'transaction' | 'showQrCode' | 'setupGuide' | 'getWallet'
     data: string
   }>
   setStatus: (value: RadixButtonStatus) => void

diff --git a/packages/dapp-toolkit/src/radix-dapp-toolkit.ts b/packages/dapp-toolkit/src/radix-dapp-toolkit.ts
@@ -43,11 +43,8 @@ export const RadixDappToolkit = (
     applicationName,
     applicationVersion,
     useCache = true,
-    featureFlags = [],
   } = options || {}
 
-  const isMobileSupported = !featureFlags.includes('DisableMobileSupport')
-
   const storageModule =
     providers?.storageModule ??
     LocalStorageModule(`rdt:${dAppDefinitionAddress}:${networkId}`)
@@ -82,7 +79,6 @@ export const RadixDappToolkit = (
       networkId,
       dAppDefinitionAddress,
       requestInterceptor: options.requestInterceptor,
-      enableMobile: isMobileSupported,
       providers: {
         stateModule,
         storageModule,
@@ -96,7 +92,6 @@ export const RadixDappToolkit = (
       logger,
       networkId,
       explorer: options.explorer,
-      enableMobile: isMobileSupported,
       onDisconnect,
       dAppDefinitionAddress,
       providers: {