diff --git a/packages/connect-button/src/components/connect-button.stories.ts b/packages/connect-button/src/components/connect-button.stories.ts index 19f57f95..2d8adda4 100644 --- a/packages/connect-button/src/components/connect-button.stories.ts +++ b/packages/connect-button/src/components/connect-button.stories.ts @@ -38,9 +38,6 @@ const argTypes = { enableMobile: { control: 'boolean', }, - showLinking: { - control: 'boolean', - }, } const defaultArgs = { @@ -89,7 +86,6 @@ const Button = (args: any, { globals }: any) => { ?connected=${args.connected} ?isMobile=${args.isMobile} ?enableMobile=${args.enableMobile} - ?showLinking=${args.showLinking} ?isWalletLinked=${args.isWalletLinked} ?isExtensionAvailable=${args.isExtensionAvailable} ?showPopoverMenu=${args.showPopoverMenu} @@ -239,7 +235,6 @@ export const linking = Template.bind({}) linking.args = { ...defaultArgs, width: 120, - showLinking: true, isMobile: true, enableMobile: true, } diff --git a/packages/connect-button/src/components/connect-button.ts b/packages/connect-button/src/components/connect-button.ts index c0460587..b9348c8a 100644 --- a/packages/connect-button/src/components/connect-button.ts +++ b/packages/connect-button/src/components/connect-button.ts @@ -95,11 +95,6 @@ export class ConnectButton extends LitElement { @property({ type: Boolean, state: true }) compact = false - @property({ - type: Boolean, - }) - showLinking: boolean = false - get hasSharedData(): boolean { return !!(this.accounts.length || this.personaData.length) } @@ -269,12 +264,8 @@ export class ConnectButton extends LitElement { return this.isMobile && !this.enableMobile } - private get showLinkingTemplate() { - return this.isMobile && this.showLinking - } - private get showPopoverCloseButton() { - return this.isMobile && !this.showLinking + return this.isMobile } private popoverTemplate() { @@ -295,9 +286,7 @@ export class ConnectButton extends LitElement { > ${this.showComingSoonTemplate ? this.renderComingSoonTemplate() - : this.showLinkingTemplate - ? this.renderLinkingTemplate() - : this.renderPopoverContentTemplate()} + : this.renderPopoverContentTemplate()} ` } @@ -327,15 +316,6 @@ export class ConnectButton extends LitElement { ` } - private renderLinkingTemplate() { - return html`
-
dApp Verified
-
- You can close this tab and return to where you left off. -
-
` - } - render() { return html` ${this.connectButtonTemplate()} diff --git a/packages/connect-button/src/components/rcfm-page/rcfm-page.ts b/packages/connect-button/src/components/rcfm-page/rcfm-page.ts index 705f9e22..089ab710 100644 --- a/packages/connect-button/src/components/rcfm-page/rcfm-page.ts +++ b/packages/connect-button/src/components/rcfm-page/rcfm-page.ts @@ -27,7 +27,16 @@ export class RadixRcfmPage extends LitElement { }) isLoading: boolean = false + @property({ + type: Boolean, + }) + isHidden: boolean = true + render() { + if (this.isHidden) { + return html`` + } + return html` ${this.isLoading 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 9274d28c..3945ad57 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 @@ -214,15 +214,6 @@ export const ConnectButtonModule = ( tap((value) => (connectButtonElement.theme = value)), ) - const showLinking$ = subjects.showLinking.pipe( - delay(1000), - tap((value) => { - connectButtonElement.showPopoverMenu = value - connectButtonElement.showLinking = value - connectButtonElement.pristine = false - }), - ) - return merge( onConnect$, status$, @@ -245,7 +236,6 @@ export const ConnectButtonModule = ( onShowPopover$, dAppName$, onLinkClick$, - showLinking$, ) }), ) @@ -285,15 +275,6 @@ export const ConnectButtonModule = ( .subscribe(), ) - if (transport?.sessionChange$) - subscriptions.add( - transport.sessionChange$ - .pipe(filter((session) => session.status === 'Active')) - .subscribe(() => { - subjects.showLinking.next(true) - }), - ) - const connectButtonApi = { status$: subjects.status.asObservable(), onConnect$: subjects.onConnect.asObservable(), diff --git a/packages/dapp-toolkit/src/modules/connect-button/subjects.ts b/packages/dapp-toolkit/src/modules/connect-button/subjects.ts index e75382b2..c76e571a 100644 --- a/packages/dapp-toolkit/src/modules/connect-button/subjects.ts +++ b/packages/dapp-toolkit/src/modules/connect-button/subjects.ts @@ -32,5 +32,4 @@ export const ConnectButtonSubjects = () => ({ type: 'account' | 'transaction' | 'setupGuide' | 'showQrCode' data: string }>(), - showLinking: new BehaviorSubject(false), }) diff --git a/packages/dapp-toolkit/src/modules/wallet-request/transport/radix-connect-relay/radix-connect-relay.module.ts b/packages/dapp-toolkit/src/modules/wallet-request/transport/radix-connect-relay/radix-connect-relay.module.ts index 89ec4852..d942e7f1 100644 --- a/packages/dapp-toolkit/src/modules/wallet-request/transport/radix-connect-relay/radix-connect-relay.module.ts +++ b/packages/dapp-toolkit/src/modules/wallet-request/transport/radix-connect-relay/radix-connect-relay.module.ts @@ -22,6 +22,7 @@ import { Curve25519 } from '../../crypto' import { RadixConnectRelayApiService } from './radix-connect-relay-api.service' import { RequestItem } from 'radix-connect-common' import type { TransportProvider } from '../../../../_types' +import { RcfmPageModule, RcfmPageState } from './rcfm-page.module' export type RadixConnectRelayModule = ReturnType export const RadixConnectRelayModule = (input: { @@ -34,6 +35,7 @@ export const RadixConnectRelayModule = (input: { encryptionModule?: EncryptionModule identityModule?: IdentityModule sessionModule?: SessionModule + rcfmPageModule?: RcfmPageModule deepLinkModule?: DeepLinkModule } }): TransportProvider => { @@ -53,6 +55,8 @@ export const RadixConnectRelayModule = (input: { callBackPath: '/connect', }) + const rcfmPageModule = providers?.rcfmPageModule ?? RcfmPageModule() + const identityModule = providers?.identityModule ?? IdentityModule({ @@ -331,6 +335,13 @@ export const RadixConnectRelayModule = (input: { .subscribe(), ) + subscriptions.add( + sessionChangeSubject + .asObservable() + .pipe(filter((session) => session.status === 'Active')) + .subscribe(() => rcfmPageModule.show(RcfmPageState.dAppVerified)), + ) + deepLinkModule.handleWalletCallback() return { diff --git a/packages/dapp-toolkit/src/modules/wallet-request/transport/radix-connect-relay/rcfm-page.module.ts b/packages/dapp-toolkit/src/modules/wallet-request/transport/radix-connect-relay/rcfm-page.module.ts new file mode 100644 index 00000000..7fd17267 --- /dev/null +++ b/packages/dapp-toolkit/src/modules/wallet-request/transport/radix-connect-relay/rcfm-page.module.ts @@ -0,0 +1,78 @@ +import { isBrowser } from '../../../../helpers/is-browser' + +export const RcfmPageState = { + loading: 'loading', + dAppVerified: 'dAppVerified', + timedOut: 'timedOut', +} as const + +export type RcfmPageState = (typeof RcfmPageState)[keyof typeof RcfmPageState] + +export type RcfmPageModule = ReturnType +export const RcfmPageModule = () => { + if (!isBrowser()) { + return { + show: () => {}, + hide: () => {}, + showWithData: () => {}, + } + } + + const rcfmPageHtmlElement = document.createElement('radix-rcfm-page') + document.body.appendChild(rcfmPageHtmlElement) + + const showWithData = ({ + header, + subheader, + isError, + isLoading, + }: { + header?: string + subheader?: string + isError?: boolean + isLoading?: boolean + }) => { + rcfmPageHtmlElement.header = header || '' + rcfmPageHtmlElement.subheader = subheader || '' + rcfmPageHtmlElement.isError = isError || false + rcfmPageHtmlElement.isLoading = isLoading || false + rcfmPageHtmlElement.isHidden = false + } + const hide = () => { + rcfmPageHtmlElement.isHidden = true + } + + const show = (state: RcfmPageState) => { + switch (state) { + case RcfmPageState.dAppVerified: + showWithData({ + header: 'Connection succesful!', + subheader: 'You can now close this tab', + isError: false, + isLoading: false, + }) + break + case RcfmPageState.loading: + showWithData({ + isLoading: true, + }) + break + case RcfmPageState.timedOut: + showWithData({ + header: 'Connection timed out', + subheader: 'Close this tab and try connecting again', + isError: true, + isLoading: false, + }) + break + default: + break + } + } + + return { + show, + hide, + showWithData, + } +}