Ensure we have the smallest main.js possible (#90)

liquidity/ui/index.js

@@ -0,0 +1,17 @@
+import { safeImport } from '@synthetixio/safe-import/safeImport';
+
+async function bootstrap() {
+  const { bootstrap } = await safeImport(() =>
+    import(/* webpackChunkName: "app" */ './src/index.tsx')
+  );
+  bootstrap();
+}
+
+bootstrap();
+
+if (module.hot) {
+  module.hot.accept();
+  module.hot.dispose(() => {
+    // do nothing
+  });
+}

liquidity/ui/src/index.tsx

@@ -3,7 +3,7 @@ import { App } from './App';
 import { preserveConnectedWallets, autoConnect } from '@snx-v3/useBlockchain';
 
 const container = document.querySelector('#app');
-async function run() {
+export async function bootstrap() {
   if (!container) {
     throw new Error('Container #app does not exist');
   }
@@ -48,4 +48,3 @@ async function run() {
   const root = ReactDOM.createRoot(container);
   root.render(<App />);
 }
-run();

liquidity/ui/webpack.config.js

@@ -100,7 +100,7 @@ module.exports = {
   devtool: isTest ? false : 'source-map',
   devServer,
   mode: isProd ? 'production' : 'development',
-  entry: './src/index.tsx',
+  entry: './index.js',
 
   output: {
     path: path.resolve(__dirname, 'dist'),