feat: add supported browsers ui

packages/common/src/index.ts

@@ -7,6 +7,14 @@ export const RadixButtonStatus = {
   default: 'default',
 } as const
 
+export const BrowserHandling = {
+  blockOnConnect: 'blockOnConnect',
+  blockOnPageLoad: 'blockOnPageLoad',
+} as const
+
+export type BrowserHandling =
+  (typeof BrowserHandling)[keyof typeof BrowserHandling]
+
 export type RadixButtonStatus = keyof typeof RadixButtonStatus
 
 export const RadixButtonTheme = {

packages/connect-button/src/components/connect-button.stories.ts

@@ -2,6 +2,7 @@ import { Story, Meta } from '@storybook/web-components'
 import { html } from 'lit-html'
 import {
   Account,
+  BrowserHandling,
   PersonaData,
   RadixButtonStatus,
   RequestItem,
@@ -35,6 +36,20 @@ const argTypes = {
   isMobile: {
     control: 'boolean',
   },
+  isInAppBrowser: {
+    control: 'boolean',
+  },
+  isUnsupportedBrowser: {
+    control: 'boolean',
+  },
+  inAppBrowserHandling: {
+    options: [BrowserHandling.blockOnConnect, BrowserHandling.blockOnPageLoad],
+    control: 'select',
+  },
+  unsupportedBrowserHandling: {
+    options: [BrowserHandling.blockOnConnect, BrowserHandling.blockOnPageLoad],
+    control: 'select',
+  },
   enableMobile: {
     control: 'boolean',
   },
@@ -85,6 +100,10 @@ const Button = (args: any, { globals }: any) => {
           loggedInTimestamp=${args.loggedInTimestamp}
           ?connected=${args.connected}
           ?isMobile=${args.isMobile}
+          ?isInAppBrowser=${args.isInAppBrowser}
+          ?isUnsupportedBrowser=${args.isUnsupportedBrowser}
+          inAppBrowserHandling=${args.inAppBrowserHandling}
+          unsupportedBrowserHandling=${args.unsupportedBrowserHandling}
           ?enableMobile=${args.enableMobile}
           ?isWalletLinked=${args.isWalletLinked}
           ?isExtensionAvailable=${args.isExtensionAvailable}
@@ -240,6 +259,16 @@ linking.args = {
 }
 linking.argTypes = argTypes
 
+export const inAppBrowser = Template.bind({})
+inAppBrowser.args = {
+  ...defaultArgs,
+  width: 120,
+  isMobile: true,
+  enableMobile: true,
+  isInAppBrowser: true,
+}
+inAppBrowser.argTypes = argTypes
+
 export const sharing = Template.bind({})
 sharing.args = {
   ...defaultArgs,

packages/connect-button/src/components/connect-button.ts

@@ -10,6 +10,7 @@ import './mask/mask'
 import './pages/requests'
 import {
   Account,
+  BrowserHandling,
   PersonaData,
   RadixButtonStatus,
   RadixButtonTheme,
@@ -89,6 +90,18 @@ export class ConnectButton extends LitElement {
   @property({ type: String, reflect: true })
   mode: 'light' | 'dark' = 'light'
 
+  @property({ type: String })
+  inAppBrowserHandling: BrowserHandling = BrowserHandling.blockOnConnect
+
+  @property({ type: String })
+  unsupportedBrowserHandling: BrowserHandling = BrowserHandling.blockOnConnect
+
+  @property({ type: Boolean })
+  isInAppBrowser: boolean = false
+
+  @property({ type: Boolean })
+  isUnsupportedBrowser: boolean = false
+
   @property({ type: String })
   avatarUrl: string = ''
 
@@ -220,8 +233,13 @@ export class ConnectButton extends LitElement {
       status=${this.status}
       ?isMobile=${this.isMobile}
       .requestItems=${this.requestItems}
+      ?isInAppBrowser=${this.isInAppBrowser}
+      ?isUnsupportedBrowser=${this.isUnsupportedBrowser}
       ?isWalletLinked=${this.isWalletLinked}
       ?isExtensionAvailable=${this.isExtensionAvailable}
+      @onClosePopover=${() => {
+        this.closePopover()
+      }}
     >
     </radix-not-connected-page>`
   }
@@ -269,6 +287,15 @@ export class ConnectButton extends LitElement {
   }
 
   private popoverTemplate() {
+    if (
+      [this.inAppBrowserHandling, this.unsupportedBrowserHandling].includes(
+        BrowserHandling.blockOnPageLoad,
+      )
+    ) {
+      this.pristine = false
+      this.showPopoverMenu = true
+    }
+
     if (this.pristine) return ''
 
     return html` <radix-popover

packages/connect-button/src/components/pages/not-connected.ts

@@ -2,7 +2,11 @@ import { html, css, LitElement, TemplateResult } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
 import logoGradient from '../../assets/logo-gradient.png'
-import { RadixButtonStatus, RequestItem } from 'radix-connect-common'
+import {
+  BrowserHandling,
+  RadixButtonStatus,
+  RequestItem,
+} from 'radix-connect-common'
 import { classMap } from 'lit/directives/class-map.js'
 import '../card/request-cards'
 import '../themed-button/themed-button'
@@ -28,6 +32,22 @@ export class RadixNotConnectedPage extends LitElement {
   })
   isExtensionAvailable: boolean = false
 
+  @property({
+    type: Boolean,
+  })
+  isInAppBrowser: boolean = false
+
+  @property({
+    type: Boolean,
+  })
+  isUnsupportedBrowser: boolean = false
+
+  @property({ type: String })
+  inAppBrowserHandling: BrowserHandling = BrowserHandling.blockOnConnect
+
+  @property({ type: String })
+  unsupportedBrowserHandling: BrowserHandling = BrowserHandling.blockOnConnect
+
   @property({
     type: Array,
   })
@@ -40,6 +60,9 @@ export class RadixNotConnectedPage extends LitElement {
       template = this.renderCeNotInstalledTemplate()
     else if (!this.isWalletLinked && !this.isMobile)
       template = this.renderCeNotLinkedTemplate()
+    else if (this.isInAppBrowser) template = this.renderInAppBrowserTemplate()
+    else if (this.isUnsupportedBrowser)
+      template = this.renderUnsupportedBrowserTemplate()
     else if (this.status === RadixButtonStatus.pending)
       template = this.renderRequestItemsTemplate()
 
@@ -52,6 +75,54 @@ export class RadixNotConnectedPage extends LitElement {
     `
   }
 
+  private renderInAppBrowserTemplate() {
+    return html` <div class="browser-info">
+        <strong>In App Browser</strong>
+        <div>Please use a supported browser to connect to Radix dApps.</div>
+      </div>
+      <div class="action-button">
+        <radix-themed-button
+          class="primary full "
+          @click=${() => {
+            window.open(window.location.href, '_system', 'location=yes')
+          }}
+        >
+          Open in system browser
+        </radix-themed-button>
+      </div>`
+  }
+
+  private renderUnsupportedBrowserTemplate() {
+    return html`
+      <div class="browser-info">
+        <strong>This browser is not supported</strong>
+        <div>
+          You can connect to this dApp with the following browsers:
+          <ul class="supported-browser">
+            <li>Google Chrome</li>
+            <li>Safari</li>
+            <li>Brave</li>
+          </ul>
+        </div>
+      </div>
+      <div class="action-button">
+        <radix-themed-button
+          class="primary full "
+          @click=${() => {
+            this.dispatchEvent(
+              new CustomEvent('onClosePopover', {
+                bubbles: true,
+                composed: true,
+              }),
+            )
+          }}
+        >
+          Close
+        </radix-themed-button>
+      </div>
+    `
+  }
+
   private renderRequestItemsTemplate() {
     return html`<radix-request-cards
       class="request-cards"
@@ -158,6 +229,20 @@ export class RadixNotConnectedPage extends LitElement {
         box-sizing: border-box;
       }
 
+      .supported-browser li {
+        text-align: left;
+        padding: 0 12px;
+        list-style-type: '✅';
+      }
+
+      .supported-browser li::marker {
+        font-size: 13px;
+      }
+
+      .action-button {
+        margin: 40px 50px 15px;
+      }
+
       .wrapper.connect-your-wallet {
         display: flex;
         align-items: center;
@@ -176,6 +261,22 @@ export class RadixNotConnectedPage extends LitElement {
       .card {
         margin-bottom: 10px;
       }
+
+      .browser-info {
+        margin-top: 34px;
+      }
+
+      .browser-info,
+      .browser-info ul {
+        padding: 0 24px;
+        line-height: 24px;
+      }
+
+      .browser-info ul {
+        margin-top: 10px;
+        margin-left: 5px;
+      }
+
       .info {
         margin-bottom: 20px;
         padding: 0 20px;

packages/dapp-toolkit/src/_types.ts

@@ -1,7 +1,11 @@
 import type { Result, ResultAsync } from 'neverthrow'
 import type { Observable } from 'rxjs'
 
-import type { RadixButtonStatus, RadixButtonTheme } from 'radix-connect-common'
+import type {
+  BrowserHandling,
+  RadixButtonStatus,
+  RadixButtonTheme,
+} from 'radix-connect-common'
 import {
   CallbackFns,
   Persona,
@@ -51,6 +55,8 @@ export type OptionalRadixDappToolkitOptions = {
   explorer: ExplorerConfig
   gatewayBaseUrl: string
   applicationName: string
+  inAppBrowserHandling: BrowserHandling
+  unsupportedBrowserHandling: BrowserHandling
   applicationVersion: string
   useCache: boolean
   providers: Partial<Providers>

packages/dapp-toolkit/src/modules/connect-button/connect-button.module.ts

@@ -1,5 +1,4 @@
 import {
-  delay,
   filter,
   first,
   fromEvent,
@@ -15,6 +14,7 @@ import {
 import { ConnectButton } from '@radixdlt/connect-button'
 import type {
   Account,
+  BrowserHandling,
   RadixButtonStatus,
   RadixButtonTheme,
   RequestItem,
@@ -43,6 +43,8 @@ export type ConnectButtonModuleInput = {
   subjects?: ConnectButtonSubjects
   logger?: Logger
   onDisconnect?: () => void
+  inAppBrowserHandling: BrowserHandling
+  unsupportedBrowserHandling: BrowserHandling
   explorer?: ExplorerConfig
   enableMobile?: boolean
   providers: {
@@ -61,10 +63,15 @@ export const ConnectButtonModule = (
   if (!isBrowser()) {
     return ConnectButtonNoopModule()
   }
-  
+
   import('@radixdlt/connect-button')
   const logger = input?.logger?.getSubLogger({ name: 'ConnectButtonModule' })
-  const subjects = input.subjects || ConnectButtonSubjects()
+  const subjects =
+    input.subjects ||
+    ConnectButtonSubjects({
+      inAppBrowserHandling: input.inAppBrowserHandling,
+      unsupportedBrowserHandling: input.unsupportedBrowserHandling,
+    })
   const dAppDefinitionAddress = input.dAppDefinitionAddress
   const { baseUrl, accountsPath, transactionPath } = input.explorer ?? {
     baseUrl: RadixNetworkConfigById[input.networkId].dashboardUrl,
@@ -214,6 +221,26 @@ export const ConnectButtonModule = (
             tap((value) => (connectButtonElement.theme = value)),
           )
 
+          const isInAppBrowser$ = subjects.isInAppBrowser.pipe(
+            tap((value) => (connectButtonElement.isInAppBrowser = value)),
+          )
+
+          const isUnsupportedBrowser$ = subjects.isUnsupportedBrowser.pipe(
+            tap((value) => (connectButtonElement.isUnsupportedBrowser = value)),
+          )
+
+          const inAppBrowserHandling$ = subjects.inAppBrowserHandling.pipe(
+            tap((value) => (connectButtonElement.inAppBrowserHandling = value)),
+          )
+
+          const unsupportedBrowserHandling$ =
+            subjects.unsupportedBrowserHandling.pipe(
+              tap(
+                (value) =>
+                  (connectButtonElement.unsupportedBrowserHandling = value),
+              ),
+            )
+
           return merge(
             onConnect$,
             status$,
@@ -234,6 +261,10 @@ export const ConnectButtonModule = (
             onDestroy$,
             onUpdateSharedData$,
             onShowPopover$,
+            isInAppBrowser$,
+            isUnsupportedBrowser$,
+            inAppBrowserHandling$,
+            unsupportedBrowserHandling$,
             dAppName$,
             onLinkClick$,
           )