feat: dApp verified modal

Author: xstelea

packages/connect-button/src/components/connect-button.stories.ts

@@ -35,6 +35,12 @@ const argTypes = {
   isMobile: {
     control: 'boolean',
   },
+  enableMobile: {
+    control: 'boolean',
+  },
+  showLinking: {
+    control: 'boolean',
+  },
 }
 
 const defaultArgs = {
@@ -82,6 +88,8 @@ const Button = (args: any, { globals }: any) => {
           loggedInTimestamp=${args.loggedInTimestamp}
           ?connected=${args.connected}
           ?isMobile=${args.isMobile}
+          ?enableMobile=${args.enableMobile}
+          ?showLinking=${args.showLinking}
           ?isWalletLinked=${args.isWalletLinked}
           ?isExtensionAvailable=${args.isExtensionAvailable}
           ?showPopoverMenu=${args.showPopoverMenu}
@@ -222,10 +230,21 @@ export const mobileView = Template.bind({})
 mobileView.args = {
   ...defaultArgs,
   width: 120,
+  modal: true,
   isMobile: true,
 }
 mobileView.argTypes = argTypes
 
+export const linking = Template.bind({})
+linking.args = {
+  ...defaultArgs,
+  width: 120,
+  showLinking: true,
+  isMobile: true,
+  enableMobile: true,
+}
+linking.argTypes = argTypes
+
 export const sharing = Template.bind({})
 sharing.args = {
   ...defaultArgs,

packages/connect-button/src/components/connect-button.ts

@@ -95,6 +95,11 @@ 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)
   }
@@ -248,13 +253,30 @@ export class ConnectButton extends LitElement {
     ></radix-requests-page>`
   }
 
+  private get isModal() {
+    return this.isMobile || this.showLinking
+  }
+
+  private get showComingSoonTemplate() {
+    return this.isMobile && !this.enableMobile
+  }
+
+  private get showLinkingTemplate() {
+    return this.isMobile && this.showLinking
+  }
+
+  private get showPopoverCloseButton() {
+    return this.isMobile && !this.showLinking
+  }
+
   private popoverTemplate() {
     if (this.pristine) return ''
 
     return html` <radix-popover
       ?connected=${this.connected}
       ?compact=${this.compact}
-      ?isMobile=${this.isMobile}
+      ?modal=${this.isModal}
+      ?showCloseButton=${this.showPopoverCloseButton}
       @onClosePopover=${() => {
         this.closePopover()
       }}
@@ -264,9 +286,11 @@ export class ConnectButton extends LitElement {
         popoverPosition: !this.isMobile,
       })}
     >
-      ${this.isMobile && !this.enableMobile
+      ${this.showComingSoonTemplate
         ? this.renderComingSoonTemplate()
-        : this.renderPopoverContentTemplate()}
+        : this.showLinkingTemplate
+          ? this.renderLinkingTemplate()
+          : this.renderPopoverContentTemplate()}
     </radix-popover>`
   }
 
@@ -296,6 +320,15 @@ 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/popover/popover.ts

@@ -21,7 +21,13 @@ export class RadixPopover extends LitElement {
     type: Boolean,
     reflect: true,
   })
-  isMobile = false
+  modal = false
+
+  @property({
+    type: Boolean,
+    reflect: true,
+  })
+  showCloseButton = false
 
   closePopover() {
     this.dispatchEvent(
@@ -52,7 +58,7 @@ export class RadixPopover extends LitElement {
         }
       </style>
       <div id="radix-popover-content">
-        ${this.isMobile ? this.closeButton() : ''}
+        ${this.showCloseButton ? this.closeButton() : ''}
         <slot></slot>
       </div>
     `

packages/dapp-toolkit/src/_types.ts

@@ -183,6 +183,7 @@ export type WalletDataState = {
 }
 
 export type TransportProvider = {
+  id: string
   isLinked$?: Observable<boolean>
   isAvailable$?: Observable<boolean>
   showQrCode?: () => void

packages/dapp-toolkit/src/connect-button/connect-button-client.ts

@@ -22,6 +22,7 @@ import { ConnectButtonSubjects } from './subjects'
 import { type Logger } from '../helpers'
 import { ConnectButtonProvider, ExplorerConfig } from '../_types'
 import {
+  RadixConnectRelayClient,
   transformWalletDataToConnectButton,
   WalletRequestClient,
 } from '../wallet-request'
@@ -95,6 +96,17 @@ export const ConnectButtonClient = (input: {
 
           connectButtonElement.enableMobile = enableMobile
 
+          if (transport?.id === 'radix-connect-relay') {
+            const radixConnectRelayClient = transport as RadixConnectRelayClient
+            radixConnectRelayClient.addSessionChangeListener((session) => {
+              setTimeout(() => {
+                connectButtonElement.showPopoverMenu = true
+                connectButtonElement.showLinking = true
+                connectButtonElement.pristine = false
+              }, 1000)
+            })
+          }
+
           const onConnect$ = fromEvent(connectButtonElement, 'onConnect').pipe(
             tap(() => {
               onConnect((value) => subjects.onConnect.next(value))

packages/dapp-toolkit/src/wallet-request/transport/connector-extension/connector-extension-client.ts

@@ -255,6 +255,7 @@ export const ConnectorExtensionClient = (input: {
   )
 
   return {
+    id: 'connector-extension' as const,
     isSupported: () => !isMobile(),
     send: sendWalletInteraction,
     isAvailable$: extensionStatus$.pipe(

packages/dapp-toolkit/src/wallet-request/transport/radix-connect-relay/radix-connect-relay-client.ts

@@ -1,9 +1,10 @@
-import { ResultAsync, err, errAsync, ok, okAsync } from 'neverthrow'
-import { Subscription, filter, switchMap, tap } from 'rxjs'
+import { ResultAsync, err, ok } from 'neverthrow'
+import { Subscription, filter, switchMap } from 'rxjs'
 import { EncryptionClient } from '../../encryption'
 import {
   ActiveSession,
   PendingSession,
+  Session,
   SessionClient,
 } from '../../session/session'
 import type {
@@ -21,6 +22,8 @@ import { Curve25519 } from '../../crypto'
 import { RadixConnectRelayApi } from './api'
 import { RequestItem } from 'radix-connect-common'
 
+type SessionChangeEvent = (session: Session) => void
+
 export type RadixConnectRelayClient = ReturnType<typeof RadixConnectRelayClient>
 export const RadixConnectRelayClient = (input: {
   baseUrl: string
@@ -41,6 +44,16 @@ export const RadixConnectRelayClient = (input: {
 
   const encryptionClient = providers?.encryptionClient ?? EncryptionClient()
 
+  const sessionChangeListeners: SessionChangeEvent[] = []
+
+  const addSessionChangeListener = (listener: SessionChangeEvent) => {
+    sessionChangeListeners.push(listener)
+  }
+
+  const emitChangesToListeners = (session: Session) => {
+    sessionChangeListeners.forEach((listener) => listener(session))
+  }
+
   const deepLinkClient =
     providers?.deepLinkClient ??
     DeepLinkClient({
@@ -173,17 +186,18 @@ export const RadixConnectRelayClient = (input: {
               .convertToActiveSession(sessionId, walletPublicKey)
               .mapErr(() => SdkError('FailedToUpdateSession', '')),
       )
-      .andThen((activeSession) =>
-        requestItemClient
+      .andThen((activeSession) => {
+        emitChangesToListeners(activeSession)
+        return requestItemClient
           .getPendingItems()
           .mapErr(() => SdkError('FailedToReadPendingItems', ''))
           .map((items) => {
             const [item] = items.filter((item) => !item.sentToWallet)
             return item
           })
 
-          .map((item) => ({ activeSession, pendingItem: item })),
-      )
+          .map((item) => ({ activeSession, pendingItem: item }))
+      })
       .andThen(
         ({
           activeSession,
@@ -327,8 +341,10 @@ export const RadixConnectRelayClient = (input: {
   deepLinkClient.handleWalletCallback()
 
   return {
+    id: 'radix-connect-relay' as const,
     isSupported: () => isMobile(),
     send: sendToWallet,
+    addSessionChangeListener,
     disconnect: () => {},
     destroy: () => {
       subscriptions.unsubscribe()

packages/dapp-toolkit/src/wallet-request/wallet-request-sdk.ts

@@ -1,4 +1,4 @@
-import { ResultAsync, errAsync, okAsync } from 'neverthrow'
+import { Result, ResultAsync, err, ok } from 'neverthrow'
 import { TransportProvider } from '../_types'
 import { Logger, validateWalletResponse } from '../helpers'
 import {
@@ -65,14 +65,14 @@ export const WalletRequestSdk = (input: WalletRequestSdkInput) => {
 
   const getTransportClient = (
     interactionId: string,
-  ): ResultAsync<TransportProvider, SdkError> => {
+  ): Result<TransportProvider, SdkError> => {
     const transportClient = availableTransports.find((transportClient) =>
       transportClient.isSupported(),
     )
 
     return transportClient
-      ? okAsync(transportClient)
-      : errAsync({
+      ? ok(transportClient)
+      : err({
           error: 'SupportedTransportNotFound',
           interactionId,
           message: 'No supported transport found',
@@ -91,7 +91,7 @@ export const WalletRequestSdk = (input: WalletRequestSdkInput) => {
       interactionId,
       metadata,
     }).andThen((walletInteraction) =>
-      getTransportClient(walletInteraction.interactionId).andThen(
+      getTransportClient(walletInteraction.interactionId).asyncAndThen(
         (transportClient) =>
           transportClient
             .send(walletInteraction, callbackFns)
@@ -111,7 +111,7 @@ export const WalletRequestSdk = (input: WalletRequestSdkInput) => {
       items,
       metadata,
     }).andThen((walletInteraction) =>
-      getTransportClient(interactionId).andThen((transportClient) =>
+      getTransportClient(interactionId).asyncAndThen((transportClient) =>
         transportClient
           .send(walletInteraction, callbackFns)
           .andThen(validateWalletResponse),
@@ -122,5 +122,6 @@ export const WalletRequestSdk = (input: WalletRequestSdkInput) => {
     request,
     sendTransaction,
     createWalletInteraction,
+    getTransport: getTransportClient,
   }
 }