feat: empty connect button module for non-browser env

Author: dawidsowardx

packages/dapp-toolkit/src/helpers/is-browser.ts

@@ -0,0 +1,2 @@
+export const isBrowser = () =>
+  ![typeof window, typeof document].includes('undefined')

packages/dapp-toolkit/src/modules/connect-button/connect-button-noop.module.ts

@@ -0,0 +1,30 @@
+import { NEVER } from 'rxjs'
+import { ConnectButtonModuleOutput } from './types'
+
+export const ConnectButtonNoopModule = (): ConnectButtonModuleOutput => {
+  return {
+    status$: NEVER,
+    onConnect$: NEVER,
+    onDisconnect$: NEVER,
+    onUpdateSharedData$: NEVER,
+    onShowPopover$: NEVER,
+    onCancelRequestItem$: NEVER,
+    onLinkClick$: NEVER,
+    setStatus: () => {},
+    setMode: () => {},
+    setTheme: () => {},
+    setActiveTab: () => {},
+    setIsMobile: () => {},
+    setIsWalletLinked: () => {},
+    setIsExtensionAvailable: () => {},
+    setConnected: () => {},
+    setLoggedInTimestamp: () => {},
+    setRequestItems: () => {},
+    setAccounts: () => {},
+    setPersonaData: () => {},
+    setPersonaLabel: () => {},
+    setDappName: () => {},
+    destroy: () => {},
+    disconnect: () => {},
+  }
+}

packages/dapp-toolkit/src/modules/connect-button/connect-button.module.ts

@@ -6,7 +6,6 @@ import {
   map,
   merge,
   mergeMap,
-  Observable,
   of,
   Subscription,
   switchMap,
@@ -30,39 +29,10 @@ import {
 import { GatewayModule, RadixNetworkConfigById } from '../gateway'
 import { StateModule } from '../state'
 import { StorageModule } from '../storage'
-import { ConnectButtonStatus } from './types'
+import { ConnectButtonModuleOutput, ConnectButtonStatus } from './types'
 
 export type ConnectButtonModule = ReturnType<typeof ConnectButtonModule>
 
-export type ConnectButtonModuleOutput = {
-  status$: Observable<RadixButtonStatus>
-  onConnect$: Observable<{ challenge: string } | undefined>
-  onDisconnect$: Observable<void>
-  onUpdateSharedData$: Observable<void>
-  onShowPopover$: Observable<void>
-  onCancelRequestItem$: Observable<string>
-  onLinkClick$: Observable<{
-    type: 'account' | 'transaction' | 'showQrCode' | 'setupGuide'
-    data: string
-  }>
-  setStatus: (value: RadixButtonStatus) => void
-  setMode: (value: 'light' | 'dark') => void
-  setTheme: (value: RadixButtonTheme) => void
-  setActiveTab: (value: 'sharing' | 'requests') => void
-  setIsMobile: (value: boolean) => void
-  setIsWalletLinked: (value: boolean) => void
-  setIsExtensionAvailable: (value: boolean) => void
-  setConnected: (value: boolean) => void
-  setLoggedInTimestamp: (value: string) => void
-  setRequestItems: (value: RequestItem[]) => void
-  setAccounts: (value: Account[]) => void
-  setPersonaData: (value: { value: string; field: string }[]) => void
-  setPersonaLabel: (value: string) => void
-  setDappName: (value: string) => void
-  destroy: () => void
-  disconnect: () => void
-}
-
 export type ConnectButtonModuleInput = {
   networkId: number
   environment?: string

packages/dapp-toolkit/src/modules/connect-button/types.ts

@@ -1,3 +1,11 @@
+import {
+  RadixButtonStatus,
+  RadixButtonTheme,
+  RequestItem,
+  Account,
+} from 'radix-connect-common'
+import { Observable } from 'rxjs'
+
 export type ConnectButtonStatus =
   (typeof ConnectButtonStatus)[keyof typeof ConnectButtonStatus]
 export const ConnectButtonStatus = {
@@ -6,3 +14,32 @@ export const ConnectButtonStatus = {
   default: 'default',
   error: 'error',
 } as const
+
+export type ConnectButtonModuleOutput = {
+  status$: Observable<RadixButtonStatus>
+  onConnect$: Observable<{ challenge: string } | undefined>
+  onDisconnect$: Observable<void>
+  onUpdateSharedData$: Observable<void>
+  onShowPopover$: Observable<void>
+  onCancelRequestItem$: Observable<string>
+  onLinkClick$: Observable<{
+    type: 'account' | 'transaction' | 'showQrCode' | 'setupGuide'
+    data: string
+  }>
+  setStatus: (value: RadixButtonStatus) => void
+  setMode: (value: 'light' | 'dark') => void
+  setTheme: (value: RadixButtonTheme) => void
+  setActiveTab: (value: 'sharing' | 'requests') => void
+  setIsMobile: (value: boolean) => void
+  setIsWalletLinked: (value: boolean) => void
+  setIsExtensionAvailable: (value: boolean) => void
+  setConnected: (value: boolean) => void
+  setLoggedInTimestamp: (value: string) => void
+  setRequestItems: (value: RequestItem[]) => void
+  setAccounts: (value: Account[]) => void
+  setPersonaData: (value: { value: string; field: string }[]) => void
+  setPersonaLabel: (value: string) => void
+  setDappName: (value: string) => void
+  destroy: () => void
+  disconnect: () => void
+}

packages/dapp-toolkit/src/radix-dapp-toolkit.ts

@@ -5,6 +5,7 @@ import type {
   SendTransactionInput,
   WalletApi,
 } from './_types'
+import { isBrowser } from './helpers/is-browser'
 import {
   type WalletData,
   LocalStorageModule,
@@ -14,6 +15,7 @@ import {
   ConnectButtonModule,
   generateGatewayApiConfig,
 } from './modules'
+import { ConnectButtonNoopModule } from './modules/connect-button/connect-button-noop.module'
 
 export type RadixDappToolkit = {
   walletApi: WalletApi
@@ -87,21 +89,22 @@ export const RadixDappToolkit = (
     })
 
   const connectButtonModule =
-    providers?.connectButtonModule ??
-    ConnectButtonModule({
-      logger,
-      networkId,
-      explorer: options.explorer,
-      enableMobile: isMobileSupported,
-      onDisconnect,
-      dAppDefinitionAddress,
-      providers: {
-        stateModule,
-        walletRequestModule,
-        gatewayModule,
-        storageModule: storageModule.getPartition('connectButton'),
-      },
-    })
+    providers?.connectButtonModule ?? isBrowser()
+      ? ConnectButtonModule({
+          logger,
+          networkId,
+          explorer: options.explorer,
+          enableMobile: isMobileSupported,
+          onDisconnect,
+          dAppDefinitionAddress,
+          providers: {
+            stateModule,
+            walletRequestModule,
+            gatewayModule,
+            storageModule: storageModule.getPartition('connectButton'),
+          },
+        })
+      : ConnectButtonNoopModule()
 
   return {
     walletApi: {