chore: flatten src files

.eslintrc.json

@@ -41,7 +41,7 @@
     "prettier/@typescript-eslint",
     "plugin:prettier/recommended"
   ],
-  "plugins": ["simple-import-sort", "unused-imports"],
+  "plugins": ["simple-import-sort", "unused-imports", "better-styled-components"],
   "rules": {
     "unused-imports/no-unused-imports": "error",
     "simple-import-sort/imports": "error",
@@ -54,6 +54,7 @@
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "react/react-in-jsx-scope": "off",
     "object-shorthand": ["error", "always"],
+    "better-styled-components/sort-declarations-alphabetically": "error",
     "no-restricted-imports": [
       "error",
       {
@@ -62,14 +63,18 @@
             "name": "ethers",
             "message": "Please import from '@ethersproject/module' directly to support tree-shaking."
           },
-          {
-            "name": "styled-components",
-            "message": "Please import from styled-components/macro."
-          },
           {
             "name": "@lingui/macro",
             "importNames": ["t"],
             "message": "Please use <Trans> instead of t."
+          },
+          {
+            "name": "react-feather",
+            "message": "Please import from lib/icons to ensure performant usage."
+          },
+          {
+            "name": "@uniswap/smart-order-router",
+            "message": "Forbidden import; smart-order-router is lazy-loaded."
           }
         ],
         "patterns": [
@@ -78,7 +83,8 @@
             "message": "Do not import from dist/ - this is an implementation detail, and breaks tree-shaking."
           },
           {
-            "group": ["!styled-components/macro"]
+            "group": ["styled-components"],
+            "message": "Please import styled from lib/theme to get the correct typings."
           }
         ]
       }

.gitignore

@@ -18,7 +18,6 @@
 /coverage
 
 # builds
-/build
 /cosmos-export
 /dist
 /dts

babel.config.json

@@ -5,7 +5,12 @@
         ["@babel/preset-typescript", { "isTSX": true, "allExtensions": true }]
     ],
     "plugins": [
+        "@babel/plugin-transform-runtime",
         "macros",
-        "@babel/plugin-transform-runtime"
+        ["module-resolver", {
+                "root": ["src"],
+                "extensions": [".js", ".jsx", ".ts", ".tsx"]
+            }
+        ]
     ]
 }

package.json

@@ -40,7 +40,6 @@
     "@reach/dialog": "^0.10.3",
     "@reach/portal": "^0.10.3",
     "@react-hook/window-scroll": "^1.3.0",
-    "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-eslint": "^8.0.1",
@@ -92,6 +91,7 @@
     "array.prototype.flatmap": "^1.2.4",
     "babel-loader": "^8.2.5",
     "babel-plugin-macros": "^3.1.0",
+    "babel-plugin-module-resolver": "^4.1.0",
     "babel-runtime": "^6.26.0",
     "copy-to-clipboard": "^3.2.0",
     "cross-env": "^7.0.3",

rollup.config.ts

@@ -3,7 +3,6 @@
  * This library lives in src/lib, but shares code with the interface application.
  */
 
-import alias from '@rollup/plugin-alias'
 import babel from '@rollup/plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
 import json from '@rollup/plugin-json'
@@ -24,7 +23,6 @@ import sass from 'rollup-plugin-scss'
 import { CompilerOptions } from 'typescript'
 
 const REPLACEMENTS = {
-  'process.env.REACT_APP_LOCALES': '"./locales"',
   // esm requires fully-specified paths:
   'react/jsx-runtime': 'react/jsx-runtime.js',
 }
@@ -41,40 +39,29 @@ function isEthers(source: string) {
   return source.startsWith('@ethersproject/') && !source.endsWith('experimental')
 }
 
-const TS_CONFIG = './tsconfig.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 plugins = [
   // Dependency resolution
   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 as ES6; doing so enables type-checking and module resolution
 ]
 
 const check = {
-  input: 'src/lib/index.tsx',
+  input: 'src/index.tsx',
   output: { file: 'dist/widgets.tsc', inlineDynamicImports: true },
   external: (source: string) => isAsset(source) || isEthers(source),
   plugins: [
     externals({ exclude: ['constants'], deps: true, peerDeps: true }), // marks builtins, dependencies, and peerDependencies external
     ...plugins,
-    typescript({ tsconfig: TS_CONFIG }),
+    typescript({ tsconfig: './tsconfig.json' }),
   ],
   onwarn: squelchTranspilationWarnings, // this pipeline is only for typechecking and generating definitions
 }
 
 const type = {
-  input: 'dist/dts/lib/index.d.ts',
+  input: 'dist/dts/index.d.ts',
   output: { file: 'dist/index.d.ts' },
   external: (source: string) => isAsset(source) || isEthers(source),
   plugins: [
@@ -101,7 +88,7 @@ const type = {
  */
 
 const transpile = {
-  input: 'src/lib/index.tsx',
+  input: 'src/index.tsx',
   output: [
     {
       dir: 'dist',

src/assets/fonts.scss

@@ -0,0 +1,8 @@
+// Use Inter mixin to set font-display: block.
+@use "@fontsource/inter/scss/mixins" as Inter;
+@include Inter.fontFace($fontName: 'Inter', $weight: 400, $display: block);
+@include Inter.fontFace($fontName: 'Inter', $weight: 500, $display: block);
+@include Inter.fontFace($fontName: 'Inter', $weight: 600, $display: block);
+@include Inter.fontFaceVariable($display: block);
+
+@import '~@fontsource/ibm-plex-mono/400.css';

src/lib/components/ActionButton.tsx → src/components/ActionButton.tsx

@@ -1,5 +1,5 @@
-import { AlertTriangle, Icon, LargeIcon } from 'lib/icons'
-import styled, { Color, css, keyframes, ThemedText } from 'lib/theme'
+import { AlertTriangle, Icon, LargeIcon } from 'icons'
+import styled, { Color, css, keyframes, ThemedText } from 'theme'
 import { ReactNode, useMemo } from 'react'
 
 import Button from './Button'

src/lib/components/BrandedFooter.tsx → src/components/BrandedFooter.tsx

@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
-import Row from 'lib/components/Row'
-import { Logo } from 'lib/icons'
-import styled, { brand, ThemedText } from 'lib/theme'
+import Row from 'components/Row'
+import { Logo } from 'icons'
+import styled, { brand, ThemedText } from 'theme'
 import { memo } from 'react'
 
 import ExternalLink from './ExternalLink'