feat: bundle widgets (#3244)

* fix: tsconfig emissions

* fix: avoid importing app state in lib

* fix: export theming

* fix: asset resolutions

* fix: bundle widget

* test: update failing snapshots

* fix: maintain i18n for cosmos

* fix: use npm-compatible aliasing

* fix: include fonts in bundle

cosmos.override.js

@@ -17,6 +17,7 @@ module.exports = (webpackConfig) => ({
         'process.env': {
           ...plugin.definitions['process.env'],
           REACT_APP_IS_WIDGET: true,
+          REACT_APP_LOCALES: "'../locales'",
         },
       })
     }

package.json

 {
-  "name": "@uniswap/interface",
+  "name": "@uniswap/widgets",
+  "version": "0.0.5-beta",
   "description": "Uniswap Interface",
   "homepage": ".",
-  "main": "dist/interface.js",
-  "module": "dist/interface.esm.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/widgets.js",
+  "module": "dist/widgets.esm.js",
+  "types": "dist/widgets.d.ts",
   "files": [
     "lib",
     "dist"
   ],
-  "private": true,
   "devDependencies": {
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
     "@ethersproject/experimental": "^5.4.0",
     "@gnosis.pm/safe-apps-web3-react": "^0.6.0",
     "@graphql-codegen/cli": "1.21.5",
@@ -23,9 +27,14 @@
     "@reach/portal": "^0.10.3",
     "@react-hook/window-scroll": "^1.3.0",
     "@reduxjs/toolkit": "^1.6.1",
+    "@rollup/plugin-alias": "^3.1.9",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-eslint": "^8.0.1",
     "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^3.0.1",
+    "@rollup/plugin-typescript": "^8.3.0",
     "@rollup/plugin-url": "^6.1.0",
     "@svgr/rollup": "^6.2.0",
     "@testing-library/jest-dom": "^5.14.1",
@@ -71,6 +80,7 @@
     "@web3-react/walletlink-connector": "^6.2.11",
     "array.prototype.flat": "^1.2.4",
     "array.prototype.flatmap": "^1.2.4",
+    "babel-plugin-macros": "^3.1.0",
     "copy-to-clipboard": "^3.2.0",
     "cross-env": "^7.0.3",
     "cypress": "^7.7.0",
@@ -91,8 +101,10 @@
     "polyfill-object.fromentries": "^1.0.1",
     "prettier": "^2.2.1",
     "qs": "^6.9.4",
+    "react": "^17.0.1",
     "react-confetti": "^6.0.0",
     "react-cosmos": "^5.6.6",
+    "react-dom": "^17.0.1",
     "react-ga": "^2.5.7",
     "react-is": "^17.0.2",
     "react-markdown": "^4.3.1",
@@ -102,14 +114,17 @@
     "react-use-gesture": "^6.0.14",
     "redux-localstorage-simple": "^2.3.1",
     "rollup": "^2.63.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-dts": "^4.1.0",
+    "rollup-plugin-node-externals": "^3.1.2",
     "rollup-plugin-scss": "^3.0.0",
     "rollup-plugin-typescript2": "^0.31.1",
     "sass": "^1.45.1",
     "serve": "^11.3.2",
     "start-server-and-test": "^1.11.0",
     "typechain": "^5.0.0",
-    "typescript": "^4.2.3",
+    "typescript": "^4.4.3",
     "ua-parser-js": "^0.7.28",
     "use-count-up": "^2.2.5",
     "use-resize-observer": "^8.0.0",
@@ -131,7 +146,8 @@
     "i18n:extract": "lingui extract --locale en-US",
     "i18n:compile": "yarn i18n:extract && lingui compile",
     "i18n:pseudo": "lingui extract --locale pseudo && lingui compile",
-    "postinstall": "yarn contracts:compile && yarn graphql:generate && yarn i18n:compile",
+    "prepare": "yarn contracts:compile && yarn graphql:generate && yarn i18n:compile",
+    "prepublishOnly": "yarn widgets:build",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=./custom-test-env.js",
@@ -153,6 +169,7 @@
   },
   "license": "GPL-3.0-or-later",
   "dependencies": {
+    "@babel/runtime": "^7.17.0",
     "@ethersproject/abi": "^5.4.1",
     "@ethersproject/abstract-provider": "^5.4.1",
     "@ethersproject/address": "^5.4.0",
@@ -180,12 +197,6 @@
     "@uniswap/v2-sdk": "^3.0.1",
     "@uniswap/v3-sdk": "^3.8.2",
     "@web3-react/core": "^6.0.9",
-    "@widgets/web3-react/core": "npm:@web3-react/core@8.0.16-alpha.0",
-    "@widgets/web3-react/eip1193": "npm:@web3-react/eip1193@8.0.16-alpha.0",
-    "@widgets/web3-react/empty": "npm:@web3-react/empty@8.0.17-alpha.0",
-    "@widgets/web3-react/metamask": "npm:@web3-react/metamask@8.0.16-alpha.0",
-    "@widgets/web3-react/types": "npm:@web3-react/types@8.0.16-alpha.0",
-    "@widgets/web3-react/url": "npm:@web3-react/url@8.0.17-alpha.0",
     "ajv": "^6.12.3",
     "cids": "^1.0.0",
     "immer": "^9.0.6",
@@ -198,8 +209,6 @@
     "node-vibrant": "^3.2.1-alpha.1",
     "polished": "^3.3.2",
     "popper-max-size-modifier": "^0.2.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
     "react-feather": "^2.0.8",
     "react-popper": "^2.2.3",
     "react-redux": "^7.2.2",
@@ -210,6 +219,17 @@
     "styled-components": "^5.3.0",
     "tiny-invariant": "^1.2.0",
     "wcag-contrast": "^3.0.0",
+    "web3-react-alpha-core": "npm:@web3-react/core@8.0.16-alpha.0",
+    "web3-react-alpha-eip1193": "npm:@web3-react/eip1193@8.0.16-alpha.0",
+    "web3-react-alpha-empty": "npm:@web3-react/empty@8.0.17-alpha.0",
+    "web3-react-alpha-metamask": "npm:@web3-react/metamask@8.0.16-alpha.0",
+    "web3-react-alpha-types": "npm:@web3-react/types@8.0.16-alpha.0",
+    "web3-react-alpha-url": "npm:@web3-react/url@8.0.17-alpha.0",
     "wicg-inert": "^3.1.1"
+  },
+  "peerDependencies": {
+    "@babel/runtime": "^7.17.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   }
 }

rollup.config.ts

@@ -3,61 +3,125 @@
  * This library lives in src/lib, but shares code with the interface application.
  */
 
-import eslint from '@rollup/plugin-eslint'
+import alias from '@rollup/plugin-alias'
+import babel from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
 import json from '@rollup/plugin-json'
+import resolve from '@rollup/plugin-node-resolve'
 import replace from '@rollup/plugin-replace'
+import typescript from '@rollup/plugin-typescript'
 import url from '@rollup/plugin-url'
 import svgr from '@svgr/rollup'
+import path from 'path'
+import { RollupWarning } from 'rollup'
+import copy from 'rollup-plugin-copy'
+import del from 'rollup-plugin-delete'
 import dts from 'rollup-plugin-dts'
+import externals from 'rollup-plugin-node-externals'
 import sass from 'rollup-plugin-scss'
-import typescript from 'rollup-plugin-typescript2'
+import { CompilerOptions } from 'typescript'
 
-import { dependencies } from './package.json'
+const REPLACEMENTS = {
+  'process.env.REACT_APP_IS_WIDGET': true,
+  'process.env.REACT_APP_LOCALES': "'./locales'",
+}
+
+const EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx']
+const ASSET_EXTENSIONS = ['.png', '.svg']
+function isAsset(source: string) {
+  const extname = path.extname(source)
+  return extname && [...ASSET_EXTENSIONS, '.css', '.scss'].includes(extname)
+}
 
-const deps = Object.keys(dependencies)
+const TS_CONFIG = './tsconfig.lib.json'
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { baseUrl, paths }: CompilerOptions = require(TS_CONFIG).compilerOptions
+const aliases = Object.entries({ ...paths }).flatMap(([find, replacements]) => {
+  return replacements.map((replacement) => ({
+    find: path.dirname(find),
+    replacement: path.join(__dirname, baseUrl || '.', path.dirname(replacement)),
+  }))
+})
 
-const replacements = {
-  'process.env.REACT_APP_IS_WIDGET': true,
+const plugins = [
+  // Dependency resolution
+  externals({ exclude: ['constants'], deps: true, peerDeps: true }), // marks builtins, dependencies, and peerDependencies external
+  resolve({ extensions: EXTENSIONS }), // resolves third-party modules within node_modules/
+  alias({ entries: aliases }), // resolves paths aliased through the tsconfig (babel does not use tsconfig path resolution)
+
+  // Source code transformation
+  replace({ ...REPLACEMENTS, preventAssignment: true }),
+  json(), // imports json; doing so type-checking allows the json to be type-checked
+]
+
+const check = {
+  input: 'src/lib/index.tsx',
+  output: { file: 'dist/widgets.tsc' },
+  external: isAsset,
+  plugins: [...plugins, typescript({ tsconfig: TS_CONFIG })],
+  onwarn: squelchTranspilationWarnings, // this pipeline is only for typechecking and generating definitions
 }
 
-const library = {
+const type = {
+  input: 'dist/dts/lib/index.d.ts',
+  output: { file: 'dist/widgets.d.ts' },
+  external: isAsset,
+  plugins: [
+    dts({ compilerOptions: { baseUrl: 'dist/dts' } }),
+    del({ hook: 'buildEnd', targets: ['dist/widgets.tsc', 'dist/dts'] }),
+  ],
+}
+
+const transpile = {
   input: 'src/lib/index.tsx',
   output: [
     {
       file: 'dist/widgets.js',
       format: 'cjs',
-      inlineDynamicImports: true,
-      sourcemap: true,
+      sourcemap: false,
     },
     {
       file: 'dist/widgets.esm.js',
       format: 'esm',
-      inlineDynamicImports: true,
-      sourcemap: true,
+      sourcemap: false,
     },
   ],
-  // necessary because some nested imports (eg jotai/*) would otherwise not resolve.
-  external: (source: string) => Boolean(deps.find((dep) => source === dep || source.startsWith(dep + '/'))),
   plugins: [
-    eslint({ include: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'] }),
-    json(), // imports json
-    replace({ ...replacements, preventAssignment: true }),
-    url(), // imports files (including svgs) as data URIs
+    ...plugins,
+
+    // Source code transformation
+    url({ include: ASSET_EXTENSIONS.map((extname) => '**/*' + extname) }), // imports assets as data URIs
     svgr({ exportType: 'named', svgo: false }), // imports svgs as React components
-    sass(), // imports sass styles
-    typescript({ tsconfig: './tsconfig.lib.json', useTsconfigDeclarationDir: true }),
+    sass({ insert: true }), // imports inlined sass styles
+    commonjs(), // transforms cjs dependencies into tree-shakeable ES modules
+
+    babel({
+      babelHelpers: 'runtime',
+      presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }], '@babel/preset-typescript'],
+      extensions: EXTENSIONS,
+      plugins: [
+        'macros', // enables @lingui and styled-components macros
+        '@babel/plugin-transform-runtime', // embeds the babel runtime for library distribution
+      ],
+    }),
+
+    copy({
+      copyOnce: true,
+      targets: [{ src: 'src/locales/*.js', dest: 'dist/locales' }],
+    }),
   ],
+  onwarn: squelchTypeWarnings, // this pipeline is only for transpilation
 }
 
-const typings = {
-  input: 'dist/dts/lib/index.d.ts',
-  output: {
-    file: 'dist/widgets.d.ts',
-    format: 'es',
-  },
-  external: (source: string) => source.endsWith('.scss'),
-  plugins: [dts({ compilerOptions: { baseUrl: 'dist/dts' } })],
+const config = [check, type, transpile]
+export default config
+
+function squelchTranspilationWarnings(warning: RollupWarning, warn: (warning: RollupWarning) => void) {
+  if (warning.pluginCode === 'TS5055') return
+  warn(warning)
 }
 
-const config = [library, typings]
-export default config
+function squelchTypeWarnings(warning: RollupWarning, warn: (warning: RollupWarning) => void) {
+  if (warning.code === 'UNUSED_EXTERNAL_IMPORT') return
+  warn(warning)
+}

src/components/AccountDetails/index.tsx

 import { Trans } from '@lingui/macro'
 import { AbstractConnector } from '@web3-react/abstract-connector'
-import { Connector } from '@widgets/web3-react/types'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { useCallback, useContext } from 'react'
 import { ExternalLink as LinkIcon } from 'react-feather'
 import { useAppDispatch } from 'state/hooks'
 import styled, { ThemeContext } from 'styled-components/macro'
+import { Connector } from 'web3-react-alpha-types'
 
 import { ReactComponent as Close } from '../../assets/images/x.svg'
 import { injected, portis, walletlink } from '../../connectors'

src/components/Identicon/StatusIcon.tsx

 import { AbstractConnector } from '@web3-react/abstract-connector'
-import { Connector } from '@widgets/web3-react/types'
+import { Connector } from 'web3-react-alpha-types'
 
 import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
 import FortmaticIcon from '../../assets/images/fortmaticIcon.png'

src/components/RoutingDiagram/__snapshots__/RoutingDiagram.test.tsx.snap

@@ -3,45 +3,45 @@
 exports[`renders multi route 1`] = `
 <DocumentFragment>
   <div
-    class="RoutingDiagram__Wrapper-sc-o1ook0-0 ePDWDk css-vurnku"
+    class="RoutingDiagram__Wrapper-sc-i2tbb-0 ivndgC css-vurnku"
   >
     <div
-      class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteContainerRow-sc-o1ook0-1 lmTMKd itvFNV ibRCpr"
+      class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteContainerRow-sc-i2tbb-1 lmTMKd hLLNig hDkZVB"
     >
       CurrencyLogo currency=USDC
       <div
-        class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteRow-sc-o1ook0-2 lmTMKd itvFNV fzMiot"
+        class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteRow-sc-i2tbb-2 lmTMKd hLLNig hUDqOH"
       >
         <div
-          class="RoutingDiagram__DottedLine-sc-o1ook0-4 kkXINS"
+          class="RoutingDiagram__DottedLine-sc-i2tbb-4 cKqYfU"
         >
           <svg
-            class="RoutingDiagram__DotColor-sc-o1ook0-5 kgYqrO"
+            class="RoutingDiagram__DotColor-sc-i2tbb-5 fhSaBA"
           >
             dot_line.svg
           </svg>
         </div>
         <div
-          class="Badge-sc-1mhw5si-0 RoutingDiagram__OpaqueBadge-sc-o1ook0-6 gayll OurGh"
+          class="Badge-sc-3epor3-0 RoutingDiagram__OpaqueBadge-sc-i2tbb-6 knpfHF gGARxH"
         >
           <div
-            class="Badge-sc-1mhw5si-0 RoutingDiagram__ProtocolBadge-sc-o1ook0-7 gayll bNVqMw"
+            class="Badge-sc-3epor3-0 RoutingDiagram__ProtocolBadge-sc-i2tbb-7 knpfHF lbdUti"
           >
             <div
-              class="theme__TextWrapper-sc-18nh1jk-0 cWOfab RoutingDiagram__BadgeText-sc-o1ook0-8 dYpdfO css-15li2d9"
+              class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-15li2d9"
             >
               V2
             </div>
           </div>
           <div
-            class="theme__TextWrapper-sc-18nh1jk-0 cWOfab RoutingDiagram__BadgeText-sc-o1ook0-8 dYpdfO css-1aekuku"
+            class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-1aekuku"
             style="min-width: auto;"
           >
             75%
           </div>
         </div>
         <div
-          class="sc-bdnxRM Row-sc-nrd8cx-0 Row__AutoRow-sc-nrd8cx-3 iqvZFe itvFNV kkMfuq"
+          class="sc-bdnxRM Row-sc-u7azg8-0 Row__AutoRow-sc-u7azg8-3 iqvZFe hLLNig cUhARX"
           style="justify-content: space-evenly; z-index: 2;"
           width="100%"
         >
@@ -51,42 +51,42 @@ exports[`renders multi route 1`] = `
       CurrencyLogo currency=DAI
     </div>
     <div
-      class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteContainerRow-sc-o1ook0-1 lmTMKd itvFNV ibRCpr"
+      class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteContainerRow-sc-i2tbb-1 lmTMKd hLLNig hDkZVB"
     >
       CurrencyLogo currency=USDC
       <div
-        class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteRow-sc-o1ook0-2 lmTMKd itvFNV fzMiot"
+        class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteRow-sc-i2tbb-2 lmTMKd hLLNig hUDqOH"
       >
         <div
-          class="RoutingDiagram__DottedLine-sc-o1ook0-4 kkXINS"
+          class="RoutingDiagram__DottedLine-sc-i2tbb-4 cKqYfU"
         >
           <svg
-            class="RoutingDiagram__DotColor-sc-o1ook0-5 kgYqrO"
+            class="RoutingDiagram__DotColor-sc-i2tbb-5 fhSaBA"
           >
             dot_line.svg
           </svg>
         </div>
         <div
-          class="Badge-sc-1mhw5si-0 RoutingDiagram__OpaqueBadge-sc-o1ook0-6 gayll OurGh"
+          class="Badge-sc-3epor3-0 RoutingDiagram__OpaqueBadge-sc-i2tbb-6 knpfHF gGARxH"
         >
           <div
-            class="Badge-sc-1mhw5si-0 RoutingDiagram__ProtocolBadge-sc-o1ook0-7 gayll bNVqMw"
+            class="Badge-sc-3epor3-0 RoutingDiagram__ProtocolBadge-sc-i2tbb-7 knpfHF lbdUti"
           >
             <div
-              class="theme__TextWrapper-sc-18nh1jk-0 cWOfab RoutingDiagram__BadgeText-sc-o1ook0-8 dYpdfO css-15li2d9"
+              class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-15li2d9"
             >
               V3
             </div>
           </div>
           <div
-            class="theme__TextWrapper-sc-18nh1jk-0 cWOfab RoutingDiagram__BadgeText-sc-o1ook0-8 dYpdfO css-1aekuku"
+            class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-1aekuku"
             style="min-width: auto;"
           >
             25%
           </div>
         </div>
         <div
-          class="sc-bdnxRM Row-sc-nrd8cx-0 Row__AutoRow-sc-nrd8cx-3 iqvZFe itvFNV kkMfuq"
+          class="sc-bdnxRM Row-sc-u7azg8-0 Row__AutoRow-sc-u7azg8-3 iqvZFe hLLNig cUhARX"
           style="justify-content: space-evenly; z-index: 2;"
           width="100%"
         >
@@ -102,45 +102,45 @@ exports[`renders multi route 1`] = `
 exports[`renders single route 1`] = `
 <DocumentFragment>
   <div
-    class="RoutingDiagram__Wrapper-sc-o1ook0-0 ePDWDk css-vurnku"
+    class="RoutingDiagram__Wrapper-sc-i2tbb-0 ivndgC css-vurnku"
   >
     <div
-      class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteContainerRow-sc-o1ook0-1 lmTMKd itvFNV ibRCpr"
+      class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteContainerRow-sc-i2tbb-1 lmTMKd hLLNig hDkZVB"
     >
       CurrencyLogo currency=USDC
       <div
-        class="sc-bdnxRM Row-sc-nrd8cx-0 RoutingDiagram__RouteRow-sc-o1ook0-2 lmTMKd itvFNV fzMiot"
+        class="sc-bdnxRM Row-sc-u7azg8-0 RoutingDiagram__RouteRow-sc-i2tbb-2 lmTMKd hLLNig hUDqOH"
       >
         <div
-          class="RoutingDiagram__DottedLine-sc-o1ook0-4 kkXINS"
+          class="RoutingDiagram__DottedLine-sc-i2tbb-4 cKqYfU"
         >
           <svg
-            class="RoutingDiagram__DotColor-sc-o1ook0-5 kgYqrO"
+            class="RoutingDiagram__DotColor-sc-i2tbb-5 fhSaBA"
           >
             dot_line.svg
           </svg>
         </div>
         <div
-          class="Badge-sc-1mhw5si-0 RoutingDiagram__OpaqueBadge-sc-o1ook0-6 gayll OurGh"
+          class="Badge-sc-3epor3-0 RoutingDiagram__OpaqueBadge-sc-i2tbb-6 knpfHF gGARxH"
         >
           <div
-            class="Badge-sc-1mhw5si-0 RoutingDiagram__ProtocolBadge-sc-o1ook0-7 gayll bNVqMw"
+            class="Badge-sc-3epor3-0 RoutingDiagram__ProtocolBadge-sc-i2tbb-7 knpfHF lbdUti"
           >
             <div
-              class="theme__TextWrapper-sc-18nh1jk-0 cWOfab RoutingDiagram__BadgeText-sc-o1ook0-8 dYpdfO css-15li2d9"
+              class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-15li2d9"
             >
               V3
             </div>
           </div>
           <div
-            class="theme__TextWrapper-sc-18nh1jk-0 cWOfab RoutingDiagram__BadgeText-sc-o1ook0-8 dYpdfO css-1aekuku"
+            class="theme__TextWrapper-sc-5lu8um-0 chxxqs RoutingDiagram__BadgeText-sc-i2tbb-8 ijjHig css-1aekuku"
             style="min-width: auto;"
           >
             100%
           </div>
         </div>
         <div
-          class="sc-bdnxRM Row-sc-nrd8cx-0 Row__AutoRow-sc-nrd8cx-3 iqvZFe itvFNV kkMfuq"
+          class="sc-bdnxRM Row-sc-u7azg8-0 Row__AutoRow-sc-u7azg8-3 iqvZFe hLLNig cUhARX"
           style="justify-content: space-evenly; z-index: 2;"
           width="100%"
         >
@@ -156,7 +156,7 @@ exports[`renders single route 1`] = `
 exports[`renders when no routes are provided 1`] = `
 <DocumentFragment>
   <div
-    class="RoutingDiagram__Wrapper-sc-o1ook0-0 ePDWDk css-vurnku"
+    class="RoutingDiagram__Wrapper-sc-i2tbb-0 ivndgC css-vurnku"
   />
 </DocumentFragment>
 `;

src/components/Web3Status/index.tsx

@@ -2,11 +2,11 @@
 import { t, Trans } from '@lingui/macro'
 import { AbstractConnector } from '@web3-react/abstract-connector'
 import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
-import { Connector } from '@widgets/web3-react/types'
 import { darken } from 'polished'
 import { useMemo } from 'react'
 import { Activity } from 'react-feather'
 import styled, { css } from 'styled-components/macro'
+import { Connector } from 'web3-react-alpha-types'
 
 import { NetworkContextName } from '../../constants/misc'
 import useENSName from '../../hooks/useENSName'

src/constants/chainInfo.ts

+import ethereumLogoUrl from 'assets/images/ethereum-logo.png'
+import arbitrumLogoUrl from 'assets/svg/arbitrum_logo.svg'
+import optimismLogoUrl from 'assets/svg/optimistic_ethereum.svg'
+import polygonMaticLogo from 'assets/svg/polygon-matic-logo.svg'
 import ms from 'ms.macro'
 
-import ethereumLogoUrl from '../assets/images/ethereum-logo.png'
-import arbitrumLogoUrl from '../assets/svg/arbitrum_logo.svg'
-import optimismLogoUrl from '../assets/svg/optimistic_ethereum.svg'
-import polygonMaticLogo from '../assets/svg/polygon-matic-logo.svg'
 import { SupportedChainId, SupportedL1ChainId, SupportedL2ChainId } from './chains'
 import { ARBITRUM_LIST, OPTIMISM_LIST } from './lists'
 

src/constants/locales.ts

@@ -36,7 +36,7 @@ export const SUPPORTED_LOCALES = [
 export type SupportedLocale = typeof SUPPORTED_LOCALES[number] | 'pseudo'
 
 // eslint-disable-next-line import/first
-import * as enUS from '../locales/en-US'
+import * as enUS from 'locales/en-US'
 export const DEFAULT_LOCALE: SupportedLocale = 'en-US'
 export const DEFAULT_CATALOG = enUS
 

src/lib/components/Web3Provider.tsx

-import { initializeConnector, Web3ReactHooks } from '@widgets/web3-react/core'
-import { EIP1193 } from '@widgets/web3-react/eip1193'
-import { Actions, Connector, Provider as EthProvider } from '@widgets/web3-react/types'
-import { Url } from '@widgets/web3-react/url'
 import { SetStateAction } from 'jotai'
 import { RESET, useUpdateAtom } from 'jotai/utils'
 import { injectedAtom, urlAtom } from 'lib/state/web3'
 import { ReactNode, useEffect } from 'react'
+import { initializeConnector, Web3ReactHooks } from 'web3-react-alpha-core'
+import { EIP1193 } from 'web3-react-alpha-eip1193'
+import { Actions, Connector, Provider as EthProvider } from 'web3-react-alpha-types'
+import { Url } from 'web3-react-alpha-url'
 
 interface Web3ProviderProps {
   jsonRpcEndpoint?: string

src/lib/components/Widget.tsx

-import { Provider as EthProvider } from '@widgets/web3-react/types'
 import { DEFAULT_LOCALE, SupportedLocale } from 'constants/locales'
 import { Provider as AtomProvider } from 'jotai'
 import { TransactionsUpdater } from 'lib/hooks/transactions'
@@ -9,6 +8,7 @@ import { MulticallUpdater, store as multicallStore } from 'lib/state/multicall'
 import styled, { keyframes, Theme, ThemeProvider } from 'lib/theme'
 import { PropsWithChildren, StrictMode, useState } from 'react'
 import { Provider as ReduxProvider } from 'react-redux'
+import { Provider as EthProvider } from 'web3-react-alpha-types'
 
 import { Provider as DialogProvider } from './Dialog'
 import ErrorBoundary, { ErrorHandler } from './Error/ErrorBoundary'

src/lib/cosmos/components/Widget.tsx

-import { initializeConnector } from '@widgets/web3-react/core'
-import { MetaMask } from '@widgets/web3-react/metamask'
 import { SupportedChainId } from 'constants/chains'
 import { INFURA_NETWORK_URLS } from 'constants/infura'
 import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from 'constants/locales'
@@ -7,6 +5,8 @@ import Widget from 'lib/components/Widget'
 import { darkTheme, defaultTheme, lightTheme } from 'lib/theme'
 import { ReactNode, useEffect, useMemo } from 'react'
 import { useSelect, useValue } from 'react-cosmos/fixture'
+import { initializeConnector } from 'web3-react-alpha-core'
+import { MetaMask } from 'web3-react-alpha-metamask'
 
 export const [metaMask] = initializeConnector<MetaMask>((actions) => new MetaMask(actions))
 

src/lib/hooks/useActiveWeb3React.ts

-import { Web3ReactHooks } from '@widgets/web3-react/core'
 import { useAtomValue } from 'jotai/utils'
 import { injectedAtom, urlAtom, Web3ReactState } from 'lib/state/web3'
+import { Web3ReactHooks } from 'web3-react-alpha-core'
 
 export function useActiveWeb3ReactState(): Web3ReactState {
   const injected = useAtomValue(injectedAtom)

src/lib/hooks/useTokenList/sorting.ts

 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { TokenInfo } from '@uniswap/token-lists'
 import { useMemo } from 'react'
-import { useTokenBalances } from 'state/wallet/hooks'
 
 /** Sorts currency amounts (descending). */
 function balanceComparator(a?: CurrencyAmount<Currency>, b?: CurrencyAmount<Currency>) {
@@ -15,8 +14,10 @@ function balanceComparator(a?: CurrencyAmount<Currency>, b?: CurrencyAmount<Curr
   return 0
 }
 
+type TokenBalances = { [tokenAddress: string]: CurrencyAmount<Token> | undefined }
+
 /** Sorts tokens by currency amount (descending), then symbol (ascending). */
-export function tokenComparator(balances: ReturnType<typeof useTokenBalances>, a: Token, b: Token) {
+export function tokenComparator(balances: TokenBalances, a: Token, b: Token) {
   // Sorts by balances
   const balanceComparison = balanceComparator(balances[a.address], balances[b.address])
   if (balanceComparison !== 0) return balanceComparison

src/lib/i18n.tsx

@@ -80,7 +80,10 @@ export async function dynamicActivate(locale: SupportedLocale) {
   i18n.loadLocaleData(locale, { plurals: () => plurals[locale] })
   // There are no default messages in production; instead, bundle the default to save a network request:
   // see https://github.com/lingui/js-lingui/issues/388#issuecomment-497779030
-  const catalog = locale === DEFAULT_LOCALE ? DEFAULT_CATALOG : await import(`locales/${locale}`)
+  const catalog =
+    locale === DEFAULT_LOCALE
+      ? DEFAULT_CATALOG
+      : await import(`${process.env.REACT_APP_LOCALES || 'locales'}/${locale}`)
   i18n.load(locale, catalog.messages)
   i18n.activate(locale)
 }

src/lib/icons/index.tsx

-/* eslint-disable no-restricted-imports */
+import { ReactComponent as CheckIcon } from 'lib/assets/svg/check.svg'
+import { ReactComponent as ExpandoIcon } from 'lib/assets/svg/expando.svg'
+import { ReactComponent as LogoIcon } from 'lib/assets/svg/logo.svg'
+import { ReactComponent as SpinnerIcon } from 'lib/assets/svg/spinner.svg'
 import styled, { Color, css, keyframes } from 'lib/theme'
 import { FunctionComponent, SVGProps } from 'react'
+/* eslint-disable no-restricted-imports */
 import { Icon as FeatherIcon } from 'react-feather'
 import {
   AlertTriangle as AlertTriangleIcon,
@@ -20,11 +24,7 @@ import {
   X as XIcon,
   XOctagon as XOctagonIcon,
 } from 'react-feather'
-
-import { ReactComponent as CheckIcon } from '../assets/svg/check.svg'
-import { ReactComponent as ExpandoIcon } from '../assets/svg/expando.svg'
-import { ReactComponent as LogoIcon } from '../assets/svg/logo.svg'
-import { ReactComponent as SpinnerIcon } from '../assets/svg/spinner.svg'
+/* eslint-enable no-restricted-imports */
 
 type SVGIcon = FunctionComponent<SVGProps<SVGSVGElement>>
 

src/lib/state/web3.ts

-import { initializeConnector, Web3ReactHooks } from '@widgets/web3-react/core'
-import { EMPTY } from '@widgets/web3-react/empty'
-import { Connector } from '@widgets/web3-react/types'
 import { atomWithDefault } from 'jotai/utils'
+import { initializeConnector, Web3ReactHooks } from 'web3-react-alpha-core'
+import { EMPTY } from 'web3-react-alpha-empty'
+import { Connector } from 'web3-react-alpha-types'
 
 const EMPTY_CONNECTOR = initializeConnector(() => EMPTY)
 

src/lib/theme/index.tsx

-import '../assets/fonts.scss'
+import 'lib/assets/fonts.scss'
+import '@fontsource/ibm-plex-mono/400.css'
+import '@fontsource/inter/variable.css'
+import '@fontsource/inter/400.css'
+import '@fontsource/inter/500.css'
+import '@fontsource/inter/600.css'
 
 import { mix, readableColor, transparentize } from 'polished'
 import { createContext, ReactNode, useContext, useMemo, useState } from 'react'
@@ -6,12 +11,11 @@ import { createContext, ReactNode, useContext, useMemo, useState } from 'react'
 import styled, { ThemedProvider } from './styled'
 import { Colors, ComputedTheme, Theme } from './theme'
 
-export type { Color, Colors, Theme } from './theme'
-
 export default styled
 export * from './dynamic'
 export * from './layer'
 export * from './styled'
+export * from './theme'
 export * as ThemedText from './type'
 
 export const brand = 'hsl(331.3, 100%, 50%)'

tsconfig.base.json

@@ -5,7 +5,6 @@
     "allowJs": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
     "strict": true,

tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "jsx": "react-jsx",
+    "noEmit": true,
     "baseUrl": "src"
   },
   "exclude": ["node_modules", "cypress"],

tsconfig.lib.json

@@ -2,8 +2,9 @@
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "jsx": "react-jsx",
+    "emitDeclarationOnly": true,
     "declaration": true,
-    "declarationDir": "dist/dts",
+    "declarationDir": "dts",
     "baseUrl": "src/lib",
     "paths": {
       "lib/*": ["./*"],
@@ -11,11 +12,12 @@
       "assets/*": ["../assets/*"],
       "constants/*": ["../constants/*"],
       "hooks/*": ["../hooks/*"],
+      "locales/*": ["../locales/*"],
       "state/*": ["../state/*"],
       "types/*": ["../types/*"],
-      "utils/*": ["../utils/*"],
-    },
+      "utils/*": ["../utils/*"]
+    }
   },
-  "exclude": ["node_modules", "src/lib/**/*.test.*"],
-  "include": ["src/lib/**/*"]
+  "exclude": ["node_modules", "src/**/*.test.*"],
+  "include": ["src/lib/**/*.d.ts", "src/lib/index.tsx"]
 }