fix: convert to commonjs (#3373)

* chore: use fully specified path for non-main imports

* chore: convert to commonjs

- Pin @web3-react to exact cjs versions

* chore: bump to v0.0.18-beta

* chore: fix fonts.css comment

* fix: @ethersproject/providers version skew

* fix: @web3-react state typings

cosmos.config.json

@@ -4,7 +4,7 @@
   ],
   "webpack": {
     "configPath": "react-scripts/config/webpack.config",
-    "overridePath": "cosmos.override.cjs"
+    "overridePath": "cosmos.override.js"
   },
   "port": 5001
 }
\ No newline at end of file

package.json

 {
   "name": "@uniswap/widgets",
-  "version": "0.0.15-beta",
+  "version": "0.0.18-beta",
   "description": "Uniswap Interface",
   "homepage": ".",
-  "type": "module",
   "files": [
     "lib",
     "dist"
   ],
   "exports": {
     ".": {
-    "types": "./dist/widgets.d.ts",
-    "import": "./dist/widgets.esm.js",
-    "require": "./dist/widgets.js"
+      "types": "./dist/widgets.d.ts",
+      "import": "./dist/widgets.cjs",
+      "require": "./dist/widgets.cjs"
     },
     "./fonts.css": {
       "import": "./dist/fonts.css",
@@ -20,8 +19,6 @@
     }
   },
   "types": "./dist/widgets.d.ts",
-  "module": "./dist/widgets.esm.js",
-  "main": "./dist/widgets.js",
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
@@ -83,8 +80,8 @@
     "@uniswap/v2-periphery": "^1.1.0-beta.0",
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "^1.1.1",
-    "@web3-react/metamask": "8.0.16-alpha.0",
-    "@web3-react/walletconnect": "8.0.16-alpha.0",
+    "@web3-react/metamask": "8.0.10-beta.0",
+    "@web3-react/walletconnect": "8.0.15-beta.0",
     "array.prototype.flat": "^1.2.4",
     "array.prototype.flatmap": "^1.2.4",
     "babel-plugin-macros": "^3.1.0",
@@ -166,7 +163,7 @@
     "prepublishOnly": "yarn widgets:build",
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=./custom-test-env.cjs",
+    "test": "react-scripts test --env=./custom-test-env.js",
     "test:e2e": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run --record'",
     "widgets:start": "cosmos",
     "widgets:build": "rollup --config --failAfterWarnings --configPlugin typescript2"
@@ -196,7 +193,7 @@
     "@ethersproject/contracts": "^5.4.1",
     "@ethersproject/experimental": "^5.4.0",
     "@ethersproject/hash": "^5.4.0",
-    "@ethersproject/providers": "5.4.0",
+    "@ethersproject/providers": "^5.4.0",
     "@ethersproject/solidity": "^5.4.0",
     "@ethersproject/strings": "^5.4.0",
     "@ethersproject/units": "^5.4.0",
@@ -215,11 +212,11 @@
     "@uniswap/token-lists": "^1.0.0-beta.27",
     "@uniswap/v2-sdk": "^3.0.1",
     "@uniswap/v3-sdk": "^3.8.2",
-    "@web3-react/core": "8.0.16-alpha.0",
-    "@web3-react/eip1193": "8.0.16-alpha.0",
-    "@web3-react/empty": "8.0.17-alpha.0",
-    "@web3-react/types": "8.0.16-alpha.0",
-    "@web3-react/url": "8.0.17-alpha.0",
+    "@web3-react/core": "8.0.14-beta.0",
+    "@web3-react/eip1193": "8.0.9-beta.0",
+    "@web3-react/empty": "8.0.7-beta.0",
+    "@web3-react/types": "8.0.7-beta.0",
+    "@web3-react/url": "8.0.9-beta.0",
     "ajv": "^6.12.3",
     "cids": "^1.0.0",
     "immer": "^9.0.6",

rollup.config.ts

@@ -51,7 +51,7 @@ const plugins = [
 
   // Source code transformation
   replace({ ...REPLACEMENTS, preventAssignment: true }),
-  json(), // imports json; doing so type-checking allows the json to be type-checked
+  json(), // imports json as ES6; doing so enables type-checking and module resolution
 ]
 
 const check = {
@@ -76,23 +76,18 @@ const transpile = {
   input: 'src/lib/index.tsx',
   output: [
     {
-      file: 'dist/widgets.js',
+      file: 'dist/widgets.cjs',
       format: 'cjs',
       sourcemap: true,
     },
-    {
-      file: 'dist/widgets.esm.js',
-      format: 'esm',
-      sourcemap: true,
-    },
   ],
   plugins: [
     ...plugins,
 
     // Source code transformation
-    url({ include: ASSET_EXTENSIONS.map((extname) => '**/*' + extname) }), // imports assets as data URIs
+    url({ include: ASSET_EXTENSIONS.map((extname) => '**/*' + extname), limit: Infinity }), // imports assets as data URIs
     svgr({ exportType: 'named', svgo: false }), // imports svgs as React components
-    sass({ output: 'dist/fonts.css' }), // generates widgets.css
+    sass({ output: 'dist/fonts.css' }), // generates fonts.css
     commonjs(), // transforms cjs dependencies into tree-shakeable ES modules
 
     babel({

src/hooks/useColor.ts

 import { Token } from '@uniswap/sdk-core'
 import { SupportedChainId } from 'constants/chains'
 import uriToHttp from 'lib/utils/uriToHttp'
-import Vibrant from 'node-vibrant/lib/bundle'
+import Vibrant from 'node-vibrant/lib/bundle.js'
 import { shade } from 'polished'
 import { useLayoutEffect, useState } from 'react'
 import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'

src/lib/components/Web3Provider.tsx

-import { initializeConnector, Web3ReactHooks } from '@web3-react/core'
+import { initializeConnector } from '@web3-react/core'
 import { EIP1193 } from '@web3-react/eip1193'
 import { Actions, Connector, Provider as Eip1193Provider } from '@web3-react/types'
 import { Url } from '@web3-react/url'
 import { SetStateAction } from 'jotai'
 import { RESET, useUpdateAtom } from 'jotai/utils'
-import { injectedAtom, urlAtom } from 'lib/state/web3'
+import { injectedAtom, urlAtom, Web3ReactState } from 'lib/state/web3'
 import { ReactNode, useEffect } from 'react'
 
 interface Web3ProviderProps {
@@ -16,12 +16,13 @@ interface Web3ProviderProps {
 function useConnector<T extends { new (actions: Actions, initializer: I): Connector }, I>(
   Connector: T,
   initializer: I | undefined,
-  setContext: (update: typeof RESET | SetStateAction<[Connector, Web3ReactHooks]>) => void
+  setContext: (update: typeof RESET | SetStateAction<Web3ReactState>) => void
 ) {
   return useEffect(() => {
     if (initializer) {
-      const [connector, hooks] = initializeConnector((actions) => new Connector(actions, initializer))
-      setContext([connector, hooks])
+      const state = initializeConnector((actions) => new Connector(actions, initializer))
+      state[0].activate()
+      setContext(state)
     } else {
       setContext(RESET)
     }

src/lib/hooks/useCurrencyColor.ts

 import { Currency } from '@uniswap/sdk-core'
 import { useTheme } from 'lib/theme'
-import Vibrant from 'node-vibrant/lib/bundle'
+import Vibrant from 'node-vibrant/lib/bundle.js'
 import { useEffect, useLayoutEffect, useState } from 'react'
 
 import useCurrencyLogoURIs from './useCurrencyLogoURIs'

src/lib/state/web3.ts

 import { initializeConnector, Web3ReactHooks } from '@web3-react/core'
 import { EMPTY } from '@web3-react/empty'
-import { Connector } from '@web3-react/types'
+import { Connector, Web3ReactStore } from '@web3-react/types'
 import { atomWithDefault } from 'jotai/utils'
 
-const EMPTY_CONNECTOR = initializeConnector(() => EMPTY)
+export type Web3ReactState = [Connector, Web3ReactHooks, Web3ReactStore]
 
-export type Web3ReactState = [Connector, Web3ReactHooks]
+const EMPTY_CONNECTOR = initializeConnector(() => EMPTY)
 
 export const urlAtom = atomWithDefault<Web3ReactState>(() => EMPTY_CONNECTOR)
 export const injectedAtom = atomWithDefault<Web3ReactState>(() => EMPTY_CONNECTOR)