From 60d49e3d2014ef3b76b4894ec3654b2cb75f18df 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 | 3 + .../dapp-toolkit/src/radix-dapp-toolkit.ts | 20 +++- 7 files changed, 190 insertions(+), 8 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..09ced17e 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 @@ -15,6 +15,7 @@ import { import { ConnectButton } from '@radixdlt/connect-button' import type { Account, + BrowserHandling, RadixButtonStatus, RadixButtonTheme, RequestItem, @@ -43,6 +44,8 @@ export type ConnectButtonModuleInput = { subjects?: ConnectButtonSubjects logger?: Logger onDisconnect?: () => void + inAppBrowserHandling: BrowserHandling + unsupportedBrowserHandling: BrowserHandling explorer?: ExplorerConfig enableMobile?: boolean providers: { 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: {