feat: remove bowser, add EnvironmentModule (#292)

* test: add various user agents to `isMobile` unit test

* feat: add environment module

- remove bowser in favor of custom regex
- use DI for `isMobile` and `isBrowser`

* fix: extract `isTMA` to environment module

examples/simple-dapp/src/main.ts

@@ -7,6 +7,7 @@ import {
   DataRequestBuilder,
   OneTimeDataRequestBuilder,
   LocalStorageModule,
+  EnvironmentModule,
   generateRolaChallenge,
   SubintentRequestBuilder,
 } from '@radixdlt/radix-dapp-toolkit'
@@ -15,6 +16,11 @@ const dAppDefinitionAddress = import.meta.env.VITE_DAPP_DEFINITION_ADDRESS
 const networkId = RadixNetwork.Stokenet
 const storageModule = LocalStorageModule(
   `rdt:${dAppDefinitionAddress}:${networkId}`,
+  {
+    providers: {
+      environmentModule: EnvironmentModule(),
+    },
+  },
 )
 const requestsStore = storageModule.getPartition('requests')
 const sessionStore = storageModule.getPartition('sessions')

packages/dapp-toolkit/package.json

@@ -63,7 +63,6 @@
     "@noble/curves": "^1.4.0",
     "base64url": "^3.0.1",
     "blakejs": "^1.2.1",
-    "bowser": "^2.11.0",
     "buffer": "^6.0.3",
     "immer": "^10.0.4",
     "lit": "^3.1.2",

packages/dapp-toolkit/src/_types.ts

@@ -24,6 +24,7 @@ import type {
   GatewayModule,
   WalletRequestModule,
   ConnectButtonModule,
+  EnvironmentModule,
 } from './modules'
 import { BuildableSubintentRequest } from './modules/wallet-request/pre-authorization-request/subintent-builder'
 
@@ -32,6 +33,7 @@ export type Providers = {
   gatewayModule: GatewayModule
   stateModule: StateModule
   storageModule: StorageModule
+  environmentModule: EnvironmentModule
   walletRequestModule: WalletRequestModule
 }
 

packages/dapp-toolkit/src/helpers/index.ts

@@ -1,6 +1,5 @@
 export * from './exponential-backoff'
 export * from './fetch-wrapper'
-export * from './is-mobile'
 export * from './logger'
 export * from './parse-json'
 export * from './remove-undefined'

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

@@ -21,7 +21,7 @@ import type {
   RequestItem,
 } from 'radix-connect-common'
 import { ConnectButtonSubjects } from './subjects'
-import { isMobile, type Logger } from '../../helpers'
+import { type Logger } from '../../helpers'
 import { ExplorerConfig } from '../../_types'
 import {
   transformWalletDataToConnectButton,
@@ -30,8 +30,8 @@ import {
 import { GatewayModule, RadixNetworkConfigById } from '../gateway'
 import { StateModule } from '../state'
 import { ConnectButtonModuleOutput } from './types'
-import { isBrowser } from '../../helpers/is-browser'
 import { ConnectButtonNoopModule } from './connect-button-noop.module'
+import { EnvironmentModule } from '../environment'
 
 export type ConnectButtonModule = ReturnType<typeof ConnectButtonModule>
 
@@ -47,20 +47,25 @@ export type ConnectButtonModuleInput = {
   providers: {
     stateModule: StateModule
     gatewayModule: GatewayModule
+    environmentModule: EnvironmentModule
     walletRequestModule: WalletRequestModule
   }
 }
 
 export const ConnectButtonModule = (
   input: ConnectButtonModuleInput,
 ): ConnectButtonModuleOutput => {
-  if (!isBrowser()) {
+  if (!input.providers.environmentModule.isBrowser()) {
     return ConnectButtonNoopModule()
   }
 
   import('@radixdlt/connect-button')
   const logger = input?.logger?.getSubLogger({ name: 'ConnectButtonModule' })
-  const subjects = input.subjects || ConnectButtonSubjects()
+  const subjects =
+    input.subjects ||
+    ConnectButtonSubjects({
+      providers: { environmentModule: input.providers.environmentModule },
+    })
   const dAppDefinitionAddress = input.dAppDefinitionAddress
   const { baseUrl, accountsPath, transactionPath, subintentPath } =
     input.explorer ?? {
@@ -86,7 +91,7 @@ export const ConnectButtonModule = (
 
   const subscriptions = new Subscription()
 
-  const onConnectButtonRender$ = fromEvent(window, 'onConnectButtonRender')
+  const onConnectButtonRender$ = fromEvent(input.providers.environmentModule.globalThis, 'onConnectButtonRender')
 
   subscriptions.add(
     onConnectButtonRender$
@@ -418,7 +423,11 @@ export const ConnectButtonModule = (
                 oneTime: false,
               }),
             )
-            .map(() => isMobile() && subjects.showPopoverMenu.next(false)),
+            .map(
+              () =>
+                input.providers.environmentModule.isMobile() &&
+                subjects.showPopoverMenu.next(false),
+            ),
         ),
       )
       .subscribe(),

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

@@ -1,10 +1,10 @@
 import type { Account, RadixButtonTheme, RequestItem } from 'radix-connect-common'
 import { BehaviorSubject, ReplaySubject, Subject } from 'rxjs'
-import { isMobile } from '../../helpers'
 import { ConnectButtonStatus } from './types'
+import { EnvironmentModule } from '../environment'
 
 export type ConnectButtonSubjects = ReturnType<typeof ConnectButtonSubjects>
-export const ConnectButtonSubjects = () => ({
+export const ConnectButtonSubjects = (input: { providers: { environmentModule: EnvironmentModule }}) => ({
   onConnect: new Subject<{ challenge: string } | undefined>(),
   onDisconnect: new Subject<void>(),
   onUpdateSharedAccounts: new Subject<void>(),
@@ -16,7 +16,7 @@ export const ConnectButtonSubjects = () => ({
   onShowPopover: new Subject<void>(),
   status: new BehaviorSubject<ConnectButtonStatus>('default'),
   loggedInTimestamp: new BehaviorSubject<string>(''),
-  isMobile: new BehaviorSubject<boolean>(isMobile()),
+  isMobile: new BehaviorSubject<boolean>(input.providers.environmentModule.isMobile()),
   isWalletLinked: new BehaviorSubject<boolean>(false),
   showPopoverMenu: new BehaviorSubject<boolean>(false),
   isExtensionAvailable: new BehaviorSubject<boolean>(false),