chore: cosmos-export for vercel

.gitignore

@@ -21,6 +21,7 @@ package-lock.json
 # IDE metadata
 .idea/
 .vscode/
+*.swp
 
 # misc
 .DS_Store

babel-plugin-macros.config.cjs

@@ -1,4 +1,5 @@
 const isDev = process.env.NODE_ENV !== 'production'
+console.log('zzmp', isDev)
 
 module.exports = {
   styledComponents: {

jest.config.cjs

@@ -2,7 +2,7 @@ module.exports = {
   setupFiles: ['<rootDir>/src/tests/setup.ts'],
   testEnvironment: 'jsdom',
   moduleNameMapper: {
-    '\.scss$': '<rootDir>/src/tests/scssStub',
-    '\.(png|svg)$': '<rootDir>/src/tests/imageStub',
+    '.scss$': '<rootDir>/src/tests/scssStub',
+    '.(png|svg)$': '<rootDir>/src/tests/imageStub',
   },
 }

rollup.config.cjs

@@ -3,6 +3,7 @@
  * This library lives in src/lib, but shares code with the interface application.
  */
 
+/* eslint-disable @typescript-eslint/no-var-requires */
 const { babel } = require('@rollup/plugin-babel')
 const commonjs = require('@rollup/plugin-commonjs')
 const json = require('@rollup/plugin-json')
@@ -36,22 +37,22 @@ const transpile = {
   external: isEthers,
   plugins: [
     // Dependency resolution
-    externals({ // marks dependencies as external so they are not bundled inline
+    externals({
       exclude: [
         'constants',
         /@lingui\/(core|react)/, // @lingui incorrectly exports esm, so it must be bundled in
         /\.json$/, // esm does not support JSON loading, so it must be bundled in
-      ],
+      ], // marks dependencies as external so they are not bundled inline
       deps: true,
       peerDeps: true,
     }),
     resolve({ extensions: EXTENSIONS }), // resolves third-party modules within node_modules/
 
     // Source code transformation
-    replace({ 
+    replace({
       // esm requires fully-specified paths:
       'react/jsx-runtime': 'react/jsx-runtime.js',
-      preventAssignment: true
+      preventAssignment: true,
     }),
     json(), // imports json as ES6; doing so enables module resolution
     url({ include: ['**/*.png', '**/*.svg'], limit: Infinity }), // imports assets as data URIs
@@ -99,25 +100,25 @@ const locales = {
     {
       dir: 'dist/cjs',
       sourcemap: false,
-    }
+    },
   ],
   watch: false,
-  plugins: [
-    commonjs(),
-    multi(),
-  ],
+  plugins: [commonjs(), multi()],
 }
 
-const assets = [{
-  ...locales,
-  output: {
-    dir: 'dist',
-    format: 'esm',
-    sourcemap: false,
+const assets = [
+  {
+    ...locales,
+    output: {
+      dir: 'dist',
+      format: 'esm',
+      sourcemap: false,
+    },
   },
-}]
+]
 
 const config = [esm, cjs, locales]
+config.config = { ...esm, output: { ...esm.output, sourcemap: true } }
 config.assets = assets
 module.exports = config
 

src/cosmos/useJsonRpcEndpoint.ts

@@ -2,9 +2,9 @@ import { SupportedChainId } from '@uniswap/widgets'
 
 import useOption from './useOption'
 
-const INFURA_KEY = process.env.REACT_APP_INFURA_KEY
+const INFURA_KEY = process.env.INFURA_KEY
 if (typeof INFURA_KEY === 'undefined') {
-  throw new Error(`REACT_APP_INFURA_KEY must be a defined environment variable`)
+  throw new Error(`INFURA_KEY must be a defined environment variable`)
 }
 
 export const INFURA_NETWORK_URLS: { [key in SupportedChainId]: string } = {

webpack.override.cjs

@@ -4,46 +4,65 @@ const EventEmitter = require('events')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const rollup = require('rollup')
 
-const rollupConfig = require('./rollup.config.cjs')
-const { assets: assetConfigs } = rollupConfig
+const { config: rollupConfig, assets: assetConfigs } = require('./rollup.config.cjs')
+const path = require('path')
 
-class RollupWatchPlugin extends EventEmitter {
+class RollupPlugin extends EventEmitter {
   static PLUGIN_NAME = 'rollup-watch'
 
-  constructor({ watchConfig, assetConfigs }) {
+  constructor({ config, assetConfigs, watch }) {
     super()
 
-    rollup.watch(watchConfig).on('event', (e) => {
+    if (watch) {
+      this.watch(config)
+    } else {
+      this.rollup(config).then(() => this.emit('END'))
+    }
+
+    this.initialized = Promise.all([
+      ...assetConfigs.map(this.rollup),
+      new Promise((resolve) => this.once('END', resolve)),
+    ])
+  }
+
+  async rollup(config) {
+    const build = await rollup.rollup(config)
+    return await build.write(config.output)
+  }
+
+  watch(config) {
+    return rollup.watch(config).on('event', (e) => {
       this.emit(e.code, e)
       if (e.result) {
         e.result.close()
       }
     })
-
-    this.initialized = Promise.all([
-      ...assetConfigs.map((config) => rollup.rollup(config).then((build) => build.write(config.output))),
-      new Promise((resolve) => this.once('END', resolve)),
-    ])
   }
 
-  apply(compiler) {
-    // Waits for rollup to generate assets for the initial compilation.
-    compiler.hooks.watchRun.tapPromise(RollupWatchPlugin.PLUGIN_NAME, () => this.initialized)
+  async apply(compiler) {
+    // Waits for rollup to generate assets before compiling.
+    compiler.hooks.beforeCompile.tapPromise(RollupPlugin.PLUGIN_NAME, () => this.initialized)
 
-    this.on('BUNDLE_END', (({ input, duration }) => console.log(`rollup built ${input} in ${duration}ms`)))
-    this.initialized.then(() => {
-      this.on('START', () => console.log('rollup build invalidated by unknown file'))
+    this.on('BUNDLE_END', ({ input, duration }) => console.log(`rollup built ${input} in ${duration}ms`))
+    await this.initialized
+    this.on('START', () => console.log('rollup build invalidated by unknown file'))
 
-      // Invalidates the build when rollup generates a new asset.
-      this.on('END', () => compiler.watching.invalidate())
-    })
+    // Invalidates the build when rollup generates a new asset.
+    this.on('END', () => compiler.watching.invalidate())
   }
-} 
+}
 
 module.exports = (webpackConfig) => {
-  const { rules } = webpackConfig.module
+  const { mode, module, resolve } = webpackConfig
+  const { rules } = module
   return {
     ...webpackConfig,
+    resolve: {
+      ...resolve,
+      alias: {
+        '@uniswap/widgets': path.resolve(__dirname, 'dist/'),
+      },
+    },
     module: {
       rules: [
         ...rules,
@@ -55,9 +74,9 @@ module.exports = (webpackConfig) => {
       ],
     },
     plugins: [
-      new RollupWatchPlugin({ watchConfig: rollupConfig, assetConfigs }),
+      new RollupPlugin({ config: rollupConfig, assetConfigs, watch: mode !== 'production' }),
       new DefinePlugin({
-        'process.env.REACT_APP_INFURA_KEY': '"4bf032f2d38a4ed6bb975b80d6340847"',
+        'process.env.INFURA_KEY': JSON.stringify(process.env.INFURA_KEY || '4bf032f2d38a4ed6bb975b80d6340847'),
       }),
       new HtmlWebpackPlugin(),
     ],