Feature: integrate CosmosKit

.gitignore

@@ -31,5 +31,5 @@ web/build
 # gcloud
 gsa-key.json
 
-# ai digest
+# ai digest for feeding to LLMs
 codebase.md

README.md

@@ -5,16 +5,23 @@ the Astria bridge.
 
 ## `web` application directory structure
 
+* `config-overrides.js` - used by `react-app-rewired` to override CRA's default
+  webpack config
 * `public/index.html`
   * html meta stuff, import styles and fonts
   * define React root element
 * `src/index.tsx`
   * React application setup
   * import styles
+  * ConfigContextProvider is here to provide config to App
 * `src/App.tsx`
   * main application component
   * define routes
-  * use context providers
+  * rest of context providers, e.g. notifications, rainbowkit, etc
+* `src/setupTests.tsx`
+  * most jest mocks defined here (some mocks defined in individual test files)
+  * browser global mocks defined here
+* `src/testHelpers.tsx` - helper functions for testing
 * `src/components` - More general React components for the app, e.g. Navbar,
   Dropdown, CopyToClipboardButton, etc
 * `src/config` - Configuration for the web app
@@ -26,8 +33,8 @@ the Astria bridge.
   * `src/config/index.ts` - AppConfig and exports
 * `src/features` - Organizes components, contexts, hooks, services, types, and
   utils for different features
+  * `src/features/CosmosWallet` - User for interacting with Keplr wallet
   * `src/features/EthWallet` - Used for interacting with EVM wallets
-  * `src/features/KeplrWallet` - User for interacting with Keplr wallet
   * `src/features/Notifications` - Used for displaying notifications and toasts
 * `src/pages`
   * React components for each page

justfile

@@ -6,3 +6,8 @@ mod web
 
 _default:
   @just --list
+
+# generate codebase.md that is useful to feed to LLMs
+[group('extra')]
+ai-digest:
+   npx ai-digest -i web --show-output-files

justfile.codestyle

@@ -11,7 +11,7 @@ lint lang=default_lang:
 # lint and fix issues that can be fixed. pass "unsafe" to also apply unsafe fixes.
 [group('codestyle')]
 lint-ts-apply unsafe='':
-  cd web; npm run lint-apply{{ if unsafe == "unsafe" { "-unsafe" } else { "" } }}
+  cd web; npm run lint-apply{{ if unsafe == "unsafe" { "-unsafe" } else { "" } }} && npm run check-apply{{ if unsafe == "unsafe" { "-unsafe" } else { "" } }}
 
 alias l := lint
 
@@ -29,7 +29,7 @@ _lint-md:
 
 [no-exit-message]
 _lint-ts:
-  cd web; npm run lint
+  cd web; npm run lint && npm run check
 
 # Can format 'ts', 'md', or 'all'. Defaults to all
 [group('codestyle')]

web/.env.test

@@ -3,7 +3,7 @@
 
 REACT_APP_ENV=test
 
-REACT_APP_IBC_CHAINS='{"Celestia Mocha-4":{"chainId":"mocha-4","chainName":"Celestia Mocha-4","rpc":"wss://rpc-mocha.pops.one","rest":"https://api-mocha.pops.one","stakeCurrency":{"coinDenom":"TIA","coinMinimalDenom":"utia","coinDecimals":6},"bip44":{"coinType":118},"bech32Config":{"bech32PrefixAccAddr":"celestia","bech32PrefixAccPub":"celestiapub","bech32PrefixConsAddr":"celestiavalcons","bech32PrefixConsPub":"celestiavalconspub","bech32PrefixValAddr":"celestiavaloper","bech32PrefixValPub":"celestiavaloperpub"},"currencies":[{"coinDenom":"TIA","coinMinimalDenom":"utia","coinDecimals":6,"ibcChannel":"channel-128","sequencerBridgeAccount":"astria1d7zjjljc0dsmxa545xkpwxym86g8uvvwhtezcr","iconClass":"i-celestia"},{"coinDenom":"STEEZE","coinMinimalDenom":"usteeze","coinDecimals":6}],"feeCurrencies":[{"coinDenom":"TIA","coinMinimalDenom":"utia","coinDecimals":6,"gasPriceStep":{"low":0.01,"average":0.02,"high":0.1}}],"iconClass":"i-celestia"}}'
+REACT_APP_IBC_CHAINS='{"Celestia Mocha-4":{"chainId":"celestia","chainName":"Celestia Mocha-4","rpc":"wss://rpc-mocha.pops.one","rest":"https://api-mocha.pops.one","stakeCurrency":{"coinDenom":"TIA","coinMinimalDenom":"utia","coinDecimals":6},"bip44":{"coinType":118},"bech32Config":{"bech32PrefixAccAddr":"celestia","bech32PrefixAccPub":"celestiapub","bech32PrefixConsAddr":"celestiavalcons","bech32PrefixConsPub":"celestiavalconspub","bech32PrefixValAddr":"celestiavaloper","bech32PrefixValPub":"celestiavaloperpub"},"currencies":[{"coinDenom":"TIA","coinMinimalDenom":"utia","coinDecimals":6,"ibcChannel":"channel-128","sequencerBridgeAccount":"astria1d7zjjljc0dsmxa545xkpwxym86g8uvvwhtezcr","iconClass":"i-celestia"},{"coinDenom":"STEEZE","coinMinimalDenom":"usteeze","coinDecimals":6}],"feeCurrencies":[{"coinDenom":"TIA","coinMinimalDenom":"utia","coinDecimals":6,"gasPriceStep":{"low":0.01,"average":0.02,"high":0.1}}],"iconClass":"i-celestia"}}'
 REACT_APP_EVM_CHAINS=''
 
 REACT_APP_BRAND_URL=https://astria.org

web/config-overrides.js

@@ -1,6 +1,5 @@
 const webpack = require("webpack");
 
-// For react-app-rewired to override the default webpack configuration
 module.exports = function override(config) {
   const fallback = config.resolve.fallback || {};
   Object.assign(fallback, {
@@ -12,20 +11,86 @@ module.exports = function override(config) {
     string_decoder: false,
   });
   config.resolve.fallback = fallback;
+
   config.plugins = (config.plugins || []).concat([
     new webpack.ProvidePlugin({
       Buffer: ["buffer", "Buffer"],
     }),
   ]);
 
-  // ignoring hundreds of source map warnings,
-  // so that the dev server build output is actually clean
   config.ignoreWarnings = [
     {
       module: /node_modules/,
       message: /Failed to parse source map/,
     },
   ];
 
+  // optimize for build by default but not for local dev server
+  if (process.env.WEBPACK_OPTIMIZE_FOR_BUILD !== "false") {
+    // optimization configuration with safer chunking
+    config.optimization = {
+      ...config.optimization,
+      usedExports: true,
+      providedExports: true,
+      sideEffects: true,
+      minimize: true,
+      splitChunks: {
+        chunks: "all",
+        maxInitialRequests: 25,
+        minSize: 20000,
+        maxSize: 244000,
+        cacheGroups: {
+          // main vendor bundle for larger modules
+          vendor: {
+            test: /[\\/]node_modules[\\/]/,
+            name: "vendor",
+            chunks: "all",
+            priority: 10,
+            enforce: true,
+          },
+          // separate bundle for react and related packages
+          react: {
+            test: /[\\/]node_modules[\\/](react|react-dom|react-router)[\\/]/,
+            name: "react-vendor",
+            chunks: "all",
+            priority: 20,
+          },
+          // bundle for wallet-related packages
+          wallets: {
+            test: /[\\/]node_modules[\\/](@cosmjs|@rainbow-me|osmojs|@cosmos-kit|chain-registry|ethers|viem|wagmi)[\\/]/,
+            name: "wallet-vendor",
+            chunks: "all",
+            priority: 15,
+          },
+          // common code used across multiple components
+          common: {
+            name: "common",
+            minChunks: 2,
+            chunks: "all",
+            priority: 5,
+            reuseExistingChunk: true,
+            enforce: true,
+          },
+        },
+      },
+    };
+
+    config.module.rules.push({
+      test: /\.js$/,
+      include: /node_modules/,
+      sideEffects: false,
+    });
+
+    config.optimization.concatenateModules = true;
+
+    config.cache = {
+      type: "filesystem",
+      allowCollectingMemory: true,
+      buildDependencies: {
+        config: [__filename],
+      },
+    };
+  }
+
   return config;
 };