🔌 Toggle ProxyApi with an environment variable

packages/ui/.env.example

@@ -33,3 +33,4 @@ REACT_APP_IMAGE_REPORT_FORM_URL="https://airtable.com/formXYZ?prefill_image={ima
 # Development
 REACT_APP_API_BENCHMARK=false
 REACT_APP_IS_UNDER_MAINTENANCE=false
+DISABLE_PROXY_API=false

packages/ui/src/api/index.ts

@@ -1,2 +1,4 @@
-export { ProxyApi as Api } from '@/proxyApi'
+// Warning: This file is aliased in the Webpack config to either `src/proxyApi` or `src/api/api-rx'` depending on the value of DISABLE_PROXY_API
+
+export { Api } from '@/proxyApi'
 // export { Api } from './api-rx'

packages/ui/src/api/utils/getChainMetadata.ts

@@ -1,7 +1,7 @@
 import { ApiRx } from '@polkadot/api'
 import { getPolkadotApiChainInfo } from 'injectweb3-connect'
 
-import { ProxyApi } from '@/proxyApi'
+import { ProxyApi } from '@/proxyApi/client/ProxyApi'
 
 import { MetadataDef } from '../types'
 

packages/ui/src/proxyApi/client/query.ts

@@ -2,11 +2,12 @@ import { AnyTuple } from '@polkadot/types/types'
 import { uniqueId } from 'lodash'
 import { filter, Observable, map, share } from 'rxjs'
 
-import { ProxyApi } from '..'
 import { deserializeMessage } from '../models/payload'
 import { ApiKinds, PostMessage, RawWorkerMessageEvent } from '../types'
 import { apiInterfaceProxy } from '../utils/proxy'
 
+import { ProxyApi } from './ProxyApi'
+
 export type ApiQueryKinds = Exclude<ApiKinds, 'tx'>
 
 export type ClientQueryMessage<K = ApiQueryKinds> = K extends ApiQueryKinds

packages/ui/src/proxyApi/client/tx.ts

@@ -3,11 +3,12 @@ import { AnyTuple } from '@polkadot/types/types'
 import { uniqueId } from 'lodash'
 import { filter, map, Observable, share } from 'rxjs'
 
-import { ProxyApi } from '..'
 import { deserializeMessage } from '../models/payload'
 import { PostMessage, ProxyPromisePayload, RawWorkerMessageEvent } from '../types'
 import { apiInterfaceProxy } from '../utils/proxy'
 
+import { ProxyApi } from './ProxyApi'
+
 type ObservableMethods = (typeof ObservableMethods)[number]
 
 export type TxModule = keyof ProxyApi['tx']

packages/ui/src/proxyApi/index.ts

@@ -1 +1 @@
-export * from './client/ProxyApi'
+export { ProxyApi as Api } from './client/ProxyApi'

packages/ui/src/proxyApi/types.ts

@@ -1,7 +1,7 @@
 import { SubmittableExtrinsic } from '@polkadot/api/types'
 
-import { ProxyApi } from '.'
 import { ClientAsyncMessage, WorkerAsyncMessage } from './client/_async'
+import { ProxyApi } from './client/ProxyApi'
 import { ClientQueryMessage, WorkerQueryMessage } from './client/query'
 import { ClientTxMessage, WorkerTxMessage } from './client/tx'
 import { ClientProxyMessage, WorkerProxyMessage } from './models/payload'

packages/ui/src/proxyApi/utils/proxy.ts

@@ -2,7 +2,7 @@ import { AnyTuple } from '@polkadot/types/types'
 
 import { recursiveProxy } from '@/common/utils/proxy'
 
-import { ProxyApi } from '..'
+import { ProxyApi } from '../client/ProxyApi'
 import { ApiKinds } from '../types'
 
 type ApiPath<K extends ApiKinds> = [keyof ProxyApi[K], ...string[]]

packages/ui/webpack.config.js

@@ -22,6 +22,7 @@ module.exports = (env, argv) => {
     .map(([key, value]) => [`process.env.${key}`, JSON.stringify(value)])
 
   const imageBlacklist = [...(env.blacklist ?? []), ...(process.env.REACT_APP_BLACKLISTED_IMAGES?.split(/\s+/) ?? [])]
+  const disableProxyApi = process.env.DISABLE_PROXY_API === 'true'
 
   const plugins = [
     ...shared.plugins,
@@ -89,7 +90,13 @@ module.exports = (env, argv) => {
         },
       ],
     },
-    resolve: shared.resolve,
+    resolve: {
+      ...shared.resolve,
+      alias: {
+        '@/api$': path.resolve(__dirname, disableProxyApi ? './src/api/api-rx.ts' : './src/proxyApi/index.ts'),
+        ...shared.resolve.alias,
+      },
+    },
     output: {
       filename: '[name].[contenthash].js',
       path: path.resolve(__dirname, 'build'),