Merge pull request #2155 from oasisprotocol/lw/refactor-runtimeIs

Move detecting a mobile app into runtimeIs

Author: lukaw3d

.changelog/2155.trivial.md

@@ -0,0 +1 @@
+Move detecting a mobile app into runtimeIs

src/app/components/Ionic/components/IonicNativePlatformProvider/index.tsx

@@ -1,10 +1,10 @@
 import { FC, PropsWithChildren } from 'react'
-import { Capacitor } from '@capacitor/core'
+import { runtimeIs } from '../../../../../config'
 import { IonicContextProvider } from '../../providers/IonicProvider'
 import { UpdateGate } from '../UpdateGate'
 
 export const IonicNativePlatformProvider: FC<PropsWithChildren> = ({ children }) => {
-  if (Capacitor.isNativePlatform()) {
+  if (runtimeIs === 'mobile-app') {
     return (
       <IonicContextProvider>
         <UpdateGate>{children}</UpdateGate>

src/app/lib/helpers.ts

@@ -113,7 +113,7 @@ export function getFeeAmount(gasPrice: bigint, feeGas: bigint): string {
 
 const defaultDepositFeeAmount = '0'
 export const getDefaultFeeAmount = (isDepositing: boolean, paraTimeConfig: ParaTimeConfig): string => {
-  return isDepositing ? defaultDepositFeeAmount : getFeeAmount(paraTimeConfig.feeGas, paraTimeConfig.gasPrice)
+  return isDepositing ? defaultDepositFeeAmount : getFeeAmount(paraTimeConfig.gasPrice, paraTimeConfig.feeGas)
 }
 
 export function parseConsensusToLayerBaseUnit(feeAmount: string, decimals: number): BigNumber {

src/app/lib/ledger.ts

@@ -7,7 +7,7 @@ import { hex2uint, publicKeyToAddress } from './helpers'
 import type Transport from '@ledgerhq/hw-transport'
 import { isSupported, requestLedgerDevice } from '@ledgerhq/hw-transport-webusb/lib-es/webusb'
 import BleTransport from '@oasisprotocol/ionic-ledger-hw-transport-ble/lib'
-import { Capacitor } from '@capacitor/core'
+import { runtimeIs } from '../../config'
 
 interface LedgerAccount {
   publicKey: Uint8Array
@@ -22,7 +22,7 @@ export async function canAccessNavigatorUsb(): Promise<boolean> {
 export async function canAccessBle(): Promise<boolean> {
   const hasBLE = await BleTransport.isEnabled().catch(() => false)
   // Scan depends on requestLEScan method, which is not available on the web(feature flag)
-  const hasLEScan = Capacitor.isNativePlatform() || !!navigator?.bluetooth?.requestLEScan
+  const hasLEScan = runtimeIs === 'mobile-app' || !!navigator?.bluetooth?.requestLEScan
   return hasBLE && hasLEScan
 }
 

src/app/pages/OpenWalletPage/Features/FromLedger/index.tsx

@@ -6,8 +6,8 @@ import { Button } from 'grommet/es6/components/Button'
 import { Text } from 'grommet/es6/components/Text'
 import { canAccessBle, canAccessNavigatorUsb } from '../../../../lib/ledger'
 import { useTranslation } from 'react-i18next'
-import { Capacitor } from '@capacitor/core'
 import TransportWebUSB from '@ledgerhq/hw-transport-webusb'
+import { runtimeIs } from '../../../../../config'
 
 type SelectOpenMethodProps = {
   openLedgerAccessPopup?: () => void
@@ -23,8 +23,7 @@ export function FromLedger({ openLedgerAccessPopup }: SelectOpenMethodProps) {
     async function getLedgerSupport() {
       const usbLedgerSupported = await canAccessNavigatorUsb()
 
-      const isNativePlatform = Capacitor.isNativePlatform()
-      const bleLedgerSupported = isNativePlatform && (await canAccessBle())
+      const bleLedgerSupported = runtimeIs === 'mobile-app' && (await canAccessBle())
 
       setSupportsUsbLedger(usbLedgerSupported)
       setSupportsBleLedger(bleLedgerSupported)

src/config.ts

@@ -1,3 +1,4 @@
+import { Capacitor } from '@capacitor/core'
 import { NetworkType } from 'app/state/network/types'
 
 export const TRANSACTIONS_LIMIT = 20
@@ -198,7 +199,11 @@ export const paraTimesConfig: ParaTimesConfig = {
 }
 
 // https://github.com/mozilla/webextension-polyfill/blob/6e3e26c/src/browser-polyfill.js#L9
-export const runtimeIs = (globalThis as any).chrome?.runtime?.id ? 'extension' : 'webapp'
+export const runtimeIs = Capacitor.isNativePlatform()
+  ? 'mobile-app'
+  : (globalThis as any).chrome?.runtime?.id
+  ? 'extension'
+  : 'webapp'
 
 const splitUrls = (input: string | undefined): string[] =>
   input

src/index.tsx

@@ -9,7 +9,7 @@ import 'react-app-polyfill/stable'
 
 import * as React from 'react'
 import { createRoot } from 'react-dom/client'
-import { Provider } from 'react-redux'
+import { Provider as ReduxProvider } from 'react-redux'
 
 // Use consistent styling
 import 'sanitize.css/sanitize.css'
@@ -34,13 +34,13 @@ const root = createRoot(container!)
 const router = createBrowserRouter(routes)
 
 root.render(
-  <Provider store={store}>
+  <ReduxProvider store={store}>
     <ThemeProvider>
       <HelmetProvider>
         <React.StrictMode>
           <RouterProvider router={router} />
         </React.StrictMode>
       </HelmetProvider>
     </ThemeProvider>
-  </Provider>,
+  </ReduxProvider>,
 )