From 423fe4b96c07b92b3667bef13b42e048fa4dcaa8 Mon Sep 17 00:00:00 2001 From: Dawid Sowa Date: Mon, 10 Jun 2024 17:29:53 +0200 Subject: [PATCH] feat: add supported browsers ui --- packages/common/src/index.ts | 8 ++ .../src/components/connect-button.stories.ts | 29 +++++ .../src/components/connect-button.ts | 27 +++++ .../src/components/pages/not-connected.ts | 103 +++++++++++++++++- packages/dapp-toolkit/src/_types.ts | 8 +- .../connect-button/connect-button.module.ts | 37 ++++++- .../src/modules/connect-button/subjects.ts | 18 ++- .../dapp-toolkit/src/radix-dapp-toolkit.ts | 20 +++- 8 files changed, 237 insertions(+), 13 deletions(-) diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts index 9b24e73b..64685cfc 100644 --- a/packages/common/src/index.ts +++ b/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 = { diff --git a/packages/connect-button/src/components/connect-button.stories.ts b/packages/connect-button/src/components/connect-button.stories.ts index 2d8adda4..49b17415 100644 --- a/packages/connect-button/src/components/connect-button.stories.ts +++ b/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, diff --git a/packages/connect-button/src/components/connect-button.ts b/packages/connect-button/src/components/connect-button.ts index b9348c8a..d94e235a 100644 --- a/packages/connect-button/src/components/connect-button.ts +++ b/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() + }} > ` } @@ -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` + In App Browser +
Please use a supported browser to connect to Radix dApps.
+ +
+ { + window.open(window.location.href, '_system', 'location=yes') + }} + > + Open in system browser + +
` + } + + private renderUnsupportedBrowserTemplate() { + return html` +
+ This browser is not supported +
+ You can connect to this dApp with the following browsers: +
    +
  • Google Chrome
    • +
  • Safari
    • +
  • Brave
    • +
+
+
+
+ { + this.dispatchEvent( + new CustomEvent('onClosePopover', { + bubbles: true, + composed: true, + }), + ) + }} + > + Close + +
+ ` + } + private renderRequestItemsTemplate() { return html` 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 index 3945ad57..6b451d18 100644 --- a/packages/dapp-toolkit/src/modules/connect-button/connect-button.module.ts +++ b/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$, ) diff --git a/packages/dapp-toolkit/src/modules/connect-button/subjects.ts b/packages/dapp-toolkit/src/modules/connect-button/subjects.ts index c76e571a..0e5154dc 100644 --- a/packages/dapp-toolkit/src/modules/connect-button/subjects.ts +++ b/packages/dapp-toolkit/src/modules/connect-button/subjects.ts @@ -1,10 +1,16 @@ -import type { Account, RequestItem } from 'radix-connect-common' +import { Account, BrowserHandling, RequestItem } from 'radix-connect-common' import { BehaviorSubject, ReplaySubject, Subject } from 'rxjs' import { isMobile } from '../../helpers' import { ConnectButtonStatus } from './types' export type ConnectButtonSubjects = ReturnType -export const ConnectButtonSubjects = () => ({ +export const ConnectButtonSubjects = ({ + inAppBrowserHandling, + unsupportedBrowserHandling, +}: { + inAppBrowserHandling?: BrowserHandling + unsupportedBrowserHandling?: BrowserHandling +} = {}) => ({ onConnect: new Subject<{ challenge: string } | undefined>(), onDisconnect: new Subject(), onUpdateSharedData: new Subject(), @@ -19,6 +25,14 @@ export const ConnectButtonSubjects = () => ({ isWalletLinked: new BehaviorSubject(false), isExtensionAvailable: new BehaviorSubject(false), fullWidth: new BehaviorSubject(false), + isInAppBrowser: new BehaviorSubject(false), + isUnsupportedBrowser: new BehaviorSubject(false), + inAppBrowserHandling: new BehaviorSubject( + inAppBrowserHandling || BrowserHandling.blockOnConnect, + ), + unsupportedBrowserHandling: new BehaviorSubject( + unsupportedBrowserHandling || BrowserHandling.blockOnConnect, + ), activeTab: new BehaviorSubject<'sharing' | 'requests'>('sharing'), mode: new BehaviorSubject<'light' | 'dark'>('light'), theme: new BehaviorSubject< diff --git a/packages/dapp-toolkit/src/radix-dapp-toolkit.ts b/packages/dapp-toolkit/src/radix-dapp-toolkit.ts index 10e4cd1c..872398f0 100644 --- a/packages/dapp-toolkit/src/radix-dapp-toolkit.ts +++ b/packages/dapp-toolkit/src/radix-dapp-toolkit.ts @@ -1,9 +1,10 @@ -import type { - ButtonApi, - GatewayApiClientConfig, - RadixDappToolkitOptions, - SendTransactionInput, - WalletApi, +import { BrowserHandling } from 'radix-connect-common' +import { + type ButtonApi, + type GatewayApiClientConfig, + type RadixDappToolkitOptions, + type SendTransactionInput, + type WalletApi, } from './_types' import { type WalletData, @@ -42,6 +43,11 @@ export const RadixDappToolkit = ( featureFlags = [], } = options || {} + const inAppBrowserHandling = + options.inAppBrowserHandling ?? BrowserHandling.blockOnConnect + const unsupportedBrowserHandling = + options.unsupportedBrowserHandling ?? BrowserHandling.blockOnConnect + const isMobileSupported = !featureFlags.includes('DisableMobileSupport') const storageModule = @@ -93,6 +99,8 @@ export const RadixDappToolkit = ( networkId, explorer: options.explorer, enableMobile: isMobileSupported, + inAppBrowserHandling, + unsupportedBrowserHandling, onDisconnect, dAppDefinitionAddress, providers: {