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`
-
-
- 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,
+ }
+}