feat: bundle staking

packages/staking-app/package.json

@@ -1,8 +1,10 @@
 {
   "name": "staking-app",
-  "private": true,
   "version": "0.0.0",
+  "private": true,
   "type": "module",
+  "main": "dist/bundle.js",
+  "module": "dist/bundle.js",
   "scripts": {
     "build": "webpack",
     "build:vite": "tsc -b && vite build",
@@ -11,23 +13,33 @@
     "lint": "eslint .",
     "preview": "vite preview"
   },
-  "main": "./dist/poc-app.umd.js",
-  "module": "./dist/poc-app.es.js",
   "dependencies": {
+    "@lace/staking": "0.1.0",
+    "lodash": "4.17.21",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.26.0",
     "@eslint/js": "^9.15.0",
+    "@types/babel__core": "^7",
+    "@types/babel__preset-env": "^7",
     "@types/react": "17.0.18",
     "@types/react-dom": "17.0.9",
     "@vitejs/plugin-react": "^4.3.4",
+    "babel-loader": "^9.2.1",
     "eslint": "^9.15.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.12.0",
-    "typescript": "~5.6.2",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.7.2",
     "typescript-eslint": "^8.15.0",
-    "vite": "^6.0.1"
+    "vite": "^6.0.1",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^5.1.4"
   }
 }

packages/staking-app/src/App.tsx

@@ -1,12 +1,11 @@
+import React from 'react';
 import { Staking } from '@lace/staking';
 
-export const App = () => {
-  return (
-    <>
-      <h1>Embed Staking</h1>
-      <Staking theme="light" />
-    </>
-  )
-}
+const App = () => (
+  <>
+    <h1>Embed Staking</h1>
+    <Staking theme="light" />
+  </>
+);
 
-export default App
+export default App;

packages/staking-app/vite.config.ts

@@ -1,25 +1,25 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 export default defineConfig({
   plugins: [react()],
   build: {
     lib: {
       entry: './src/main.tsx',
-      name: 'poc-app',
-      fileName: (format) => `poc-app.${format}.js`,
-      formats: ['es', 'umd'],
+      name: 'staking-app',
+      fileName: (format) => `staking-app.${format}.js`,
+      formats: ['es', 'umd']
     },
     outDir: 'dist',
     rollupOptions: {
-      external: ['react', 'react-dom'],
+      external: ['react', 'react-dom', 'get-port-please', '@cardano-sdk/util-dev'],
       input: './src/main.tsx',
       output: {
         globals: {
           react: 'React',
-          'react-dom': 'ReactDOM',
-        },
-      },
+          'react-dom': 'ReactDOM'
+        }
+      }
     }
   }
-})
+});

packages/staking-app/webpack.config.cjs

@@ -0,0 +1,130 @@
+const path = require('path');
+const { NormalModuleReplacementPlugin, ProvidePlugin, IgnorePlugin, EnvironmentPlugin, experiments } = require('webpack');
+
+module.exports = {
+  mode: 'production',
+  entry: './src/main.tsx',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js',
+    library: 'staking', // Name of the global variable for the UMD build
+    libraryTarget: 'umd', // Universal Module Definition for compatibility
+    globalObject: 'this', // Fix for environments where `window` is undefined
+  },
+  externals: {
+    react: 'react', // Avoid bundling React
+    'react-dom': 'react-dom', // Avoid bundling ReactDOM
+  },
+  experiments: {
+    asyncWebAssembly: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+              modules: true
+            }
+          }
+        ],
+        include: /\.module\.css$/
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+        exclude: /\.module\.css$/
+      },
+      {
+        exclude: /node_modules/,
+        test: /\.scss$/,
+        use: [
+          'style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
+      },
+      {
+        test: /^[.]*(?!.*\.component\.svg$).*\.svg*$/,
+        use: 'file-loader'
+      },
+      {
+        test: /component\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        use: [
+          {
+            loader: '@svgr/webpack',
+            options: {
+              icon: true
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(eot|otf|ttf|woff|woff2|gif|png|webm|mp4)$/,
+        loader: 'file-loader'
+      },
+      {
+        test: /packages\/.+\/dist\/.+\.js$/,
+        enforce: 'pre',
+        use: ['source-map-loader']
+      },
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules\/(?!(@cardano-sdk)\/).*/,
+        loader: 'swc-loader',
+        options: {
+          jsc: {
+            parser: {
+              syntax: 'typescript',
+              tsx: true
+            },
+            target: 'es2019',
+            loose: false
+          }
+        },
+        resolve: {
+          fullySpecified: false
+        }
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js'],
+    fullySpecified: false,
+    fallback: {
+      https: require.resolve('https-browserify'),
+      http: require.resolve('stream-http'),
+      'get-port-please': false,
+      net: false,
+      fs: false,
+      os: false,
+      path: false,
+      events: require.resolve('events/'),
+      buffer: require.resolve('buffer/'),
+      stream: require.resolve('readable-stream'),
+      crypto: require.resolve('crypto-browserify'),
+      constants: require.resolve('constants-browserify'),
+      zlib: require.resolve('browserify-zlib'),
+      dns: false,
+      tls: false,
+      process: false,
+      child_process: false
+    },
+  },
+  plugins: [
+    new NormalModuleReplacementPlugin(/blake2b$/, 'blake2b-no-wasm'),
+    new NormalModuleReplacementPlugin(/@emurgo\/cip14-js/, path.join(__dirname, './src/utils/cip14.js')),
+    new NormalModuleReplacementPlugin(
+      /@emurgo\/cardano-message-signing-nodejs/,
+      '@emurgo/cardano-message-signing-browser'
+    ),
+    new ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+      process: 'process/browser'
+    }),
+  ]
+};

packages/staking/package.json

@@ -11,7 +11,6 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.js",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
@@ -21,7 +20,7 @@
       "default": "./dist/index.css"
     }
   },
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [

packages/staking/tsup.config.ts

@@ -3,7 +3,6 @@ import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin';
 import svgr from 'esbuild-plugin-svgr';
 import { ScssModulesPlugin } from 'esbuild-scss-modules-plugin';
 import { defineConfig } from 'tsup';
-import { peerDependencies } from './package.json';
 
 const tsupConfig = defineConfig([
   {
@@ -19,7 +18,6 @@ const tsupConfig = defineConfig([
       ScssModulesPlugin() as never,
       svgr({ icon: true, plugins: [svgrJsx] }),
     ],
-    external: Object.keys(peerDependencies),
     format: ['cjs'],
     loader: {
       '.png': 'dataurl',