feat: use rcfm page

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

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()}
     </radix-popover>`
   }
 
@@ -327,15 +316,6 @@ export class ConnectButton extends LitElement {
     </div>`
   }
 
-  private renderLinkingTemplate() {
-    return html` <div class="mobile-wrapper">
-      <div class="header">dApp Verified</div>
-      <div class="content">
-        You can close this tab and return to where you left off.
-      </div>
-    </div>`
-  }
-
   render() {
     return html`
       ${this.connectButtonTemplate()}

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` <radix-mask isBranded>
       <radix-wallet-connector-card>
         ${this.isLoading

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(),

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<boolean>(false),
 })

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<typeof RadixConnectRelayModule>
 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 {

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<typeof RcfmPageModule>
+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,
+  }
+}