initial changes

.editorconfig

@@ -7,6 +7,9 @@ indent_style = space
 indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
+quote_type = single
+
+[*.{ts,tsx}]
 
 [*.md]
 max_line_length = off

.gitignore

@@ -52,3 +52,6 @@ packages/uniswap/src/i18n/locales/@types/resources.d.ts
 
 # Vercel
 .vercel
+
+# eslint
+eslint_cache/

apps/web/.env.production

@@ -2,14 +2,14 @@
 REACT_APP_AMPLITUDE_PROXY_URL="https://interface.gateway.uniswap.org/v1/amplitude-proxy"
 REACT_APP_AWS_API_ENDPOINT="https://interface.gateway.uniswap.org/v1/graphql"
 REACT_APP_AWS_REALTIME_ENDPOINT="wss://realtime.gateway.uniswap.org/graphql"
-REACT_APP_BNB_RPC_URL="https://old-wispy-arrow.bsc.quiknode.pro/f5c060177236065c1058531a0615ab4f7a34a2fd"
-REACT_APP_FIREBASE_KEY="AIzaSyBcZWwTcTJHj_R6ipZcrJkXdq05PuX0Rs0"
-REACT_APP_FORTMATIC_KEY="pk_live_F937DF033A1666BF"
-REACT_APP_GOOGLE_ANALYTICS_ID="G-KDP9B6W4H8"
-REACT_APP_INFURA_KEY="099fc58e0de9451d80b18d7c74caa7c1"
+REACT_APP_BNB_RPC_URL=""
+REACT_APP_FIREBASE_KEY=""
+REACT_APP_FORTMATIC_KEY=""
+REACT_APP_GOOGLE_ANALYTICS_ID=""
+REACT_APP_INFURA_KEY="dceebd78d3634f4092685bebf48500d1"
 REACT_APP_MOONPAY_API="https://api.moonpay.com"
 REACT_APP_MOONPAY_LINK="https://us-central1-uniswap-mobile.cloudfunctions.net/signMoonpayLinkV2?platform=web&env=production"
-REACT_APP_MOONPAY_PUBLISHABLE_KEY="pk_live_uQG4BJC4w3cxnqpcSqAfohdBFDTsY6E"
+REACT_APP_MOONPAY_PUBLISHABLE_KEY=""
 REACT_APP_SENTRY_ENABLED=true
 REACT_APP_SENTRY_TRACES_SAMPLE_RATE=0.003
 REACT_APP_STATSIG_PROXY_URL="https://interface.gateway.uniswap.org/v1/statsig-proxy"

apps/web/.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
   rules: {
     // TODO: had to add this rule to avoid errors on monorepo migration that didnt happen in interface
     'cypress/unsafe-to-chain-command': 'off',
+    semi: ['error', 'never'],
   },
 
   overrides: [

apps/web/.swcrc

@@ -4,6 +4,7 @@
     "keepClassNames": true,
     "experimental": {
       "plugins": [
+        ["@lingui/swc-plugin", {}],
         [
           "@swc/plugin-styled-components",
           {

apps/web/craco.config.cjs

@@ -9,10 +9,12 @@ const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
 const { IgnorePlugin, ProvidePlugin } = require('webpack')
 const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin')
 
-const commitHash = execSync('git rev-parse HEAD').toString().trim()
+// const commitHash = execSync('git rev-parse HEAD').toString().trim()
 const isProduction = process.env.NODE_ENV === 'production'
 
-process.env.REACT_APP_GIT_COMMIT_HASH = commitHash
+// When building the Docker image from `build/uniswapv3.Dockerfile',
+// because there's no `.git` directory, the `git rev-parse HEAD` command fails.
+// process.env.REACT_APP_GIT_COMMIT_HASH = commitHash
 
 // Linting and type checking are only necessary as part of development and testing.
 // Omit them from production builds, as they slow down the feedback loop.
@@ -26,7 +28,68 @@ function getCacheDirectory(cacheName) {
   return `${path.join(__dirname, 'node_modules/.cache/', cacheName)}/`
 }
 
+const config = {
+  webpack: {
+    configure: (webpackConfig, { env, paths }) => {
+      return getMultiEntryWebpackConfig(
+        {
+          main: './src/index.tsx',
+          anotherEntry: './src/another-entry.tsx',
+        },
+        webpackConfig,
+        { env, paths }
+      );
+    },
+  },
+};
+
+const getMultiEntryWebpackConfig = (
+  entries,//: { main: string; [name: string]: string },
+  config,//: WebpackConfiguration,
+  { env }//: WebpackContext
+// ): WebpackConfiguration => {
+) => {
+  const defaultHTMLPlugin = config.plugins.find((plugin) => {
+    return plugin?.constructor.name === 'HtmlWebpackPlugin';
+  });
+
+  if(!defaultHTMLPlugin) {
+    throw new Error('HtmlWebpackPlugin not found!');
+  }
+
+  const plugins = config.plugins.filter(plugin => plugin !== defaultHTMLPlugin);
+
+  plugins.push(...Object.entries(entries).map(([entryName, entry]) => {
+    const filename = `${entryName === 'main' ? 'index' : entryName}.html`
+    // @ts-ignore
+    return new defaultHTMLPlugin.constructor(
+      // @ts-ignore
+      Object.assign({}, defaultHTMLPlugin.userOptions, {
+        filename,
+        // @ts-ignore
+        template: defaultHTMLPlugin.userOptions.template,
+        chunks: [entryName],
+      })
+    )
+  }));
+
+  config.entry = entries;
+  config.plugins = plugins;
+
+  if (env === 'development') {
+    config.output = {
+        ...config.output,
+        filename: 'static/js/[name].bundle.js',
+    };
+  }
+
+  return config;
+};
+
 module.exports = {
+  devServer: {
+    port: 3002
+  },
   eslint: {
     enable: shouldLintOrTypeCheck,
     pluginOptions(eslintConfig) {
@@ -92,6 +155,10 @@ module.exports = {
       }),
     ],
     configure: (webpackConfig) => {
+      webpackConfig.entry = {
+        main: './src/index.tsx',
+      };
+
       // Configure webpack plugins:
       webpackConfig.plugins = webpackConfig.plugins
         .map((plugin) => {
@@ -125,8 +192,6 @@ module.exports = {
         alias: {
           ...webpackConfig.resolve.alias,
           'react-native-gesture-handler$': require.resolve('react-native-gesture-handler'),
-          'react-native-svg$': require.resolve('@tamagui/react-native-svg'),
-          'react-native$': 'react-native-web',
         },
         plugins: webpackConfig.resolve.plugins.map((plugin) => {
           // Allow vanilla-extract in production builds.
@@ -207,15 +272,22 @@ module.exports = {
       })
 
       // Configure webpack optimization:
-      webpackConfig.optimization = Object.assign(
-        webpackConfig.optimization,
-        isProduction
-          ? {
-              // Optimize over all chunks, instead of async chunks (the default), so that initial chunks are also included.
-              splitChunks: { chunks: 'all' },
-            }
-          : {}
-      )
+      // webpackConfig.optimization = Object.assign(
+      //   webpackConfig.optimization,
+      //   isProduction
+      //     ? {
+      //         splitChunks: {
+      //           // Cap the chunk size to 5MB.
+      //           // react-scripts suggests a chunk size under 1MB after gzip, but we can only measure maxSize before gzip.
+      //           // react-scripts also caps cacheable chunks at 5MB, which gzips to below 1MB, so we cap chunk size there.
+      //           // See https://github.com/facebook/create-react-app/blob/d960b9e/packages/react-scripts/config/webpack.config.js#L713-L716.
+      //           maxSize: 5 * 1024 * 1024,
+      //           // Optimize over all chunks, instead of async chunks (the default), so that initial chunks are also optimized.
+      //           chunks: 'all',
+      //         },
+      //       }
+      //     : {}
+      // )
 
       // Configure webpack resolution. webpackConfig.cache is unused with swc-loader, but the resolver can still cache:
       webpackConfig.resolve = Object.assign(webpackConfig.resolve, { unsafeCache: true })

apps/web/package.json

@@ -15,17 +15,17 @@
     "graphql:generate": "yarn graphql:generate:thegraph",
     "graphql": "yarn graphql:schema && yarn graphql:generate",
     "sitemap:generate": "node scripts/generate-sitemap.js",
-    "i18n:upload": "./scripts/crowdin.sh upload",
-    "i18n:download": "./scripts/crowdin.sh download",
-    "i18n:download:if-missing": "ONLY_IF_MISSING=1 ./scripts/crowdin.sh download",
-    "i18n:extract": "i18next && node ./scripts/fix-empty-i18n-values.js",
-    "prepare": "concurrently \"npm:ajv\"",
+    "i18n:extract": "lingui extract --locale en-US",
+    "i18n:compile": "lingui compile",
+    "i18n": "yarn i18n:extract --clean && yarn i18n:compile",
+    "prepare": "concurrently \"npm:ajv\" \"npm:i18n\"",
     "start": "craco start",
     "start:cloud": "NODE_OPTIONS=--dns-result-order=ipv4first PORT=3001 npx wrangler pages dev --compatibility-flags=nodejs_compat --compatibility-date=2023-08-01 --proxy=3001 --port=3000 -- yarn start",
     "build:production": "craco build",
     "analyze": "source-map-explorer 'build/static/js/*.js' --no-border-checks --gzip",
     "serve": "serve build -s -l 3002",
-    "lint": "yarn eslint --ignore-path .gitignore --cache --cache-location node_modules/.cache/eslint/ .",
+    "lint": "yarn eslint --ignore-path .gitignore --cache --cache-location ../../eslint_cache/web .",
+    "lint:fix": "eslint src --fix",
     "typecheck": "tsc && yarn typecheck:cloud && yarn typecheck:cypress",
     "typecheck:cloud": "tsc -p functions/tsconfig.json",
     "typecheck:cypress": "tsc -p cypress/tsconfig.json",
@@ -86,6 +86,8 @@
     "@craco/craco": "7.1.0",
     "@crowdin/cli": "3.14.0",
     "@ethersproject/experimental": "5.7.0",
+    "@lingui/cli": "4.5.0",
+    "@lingui/swc-plugin": "4.0.4",
     "@swc/core": "1.3.72",
     "@swc/jest": "0.2.29",
     "@swc/plugin-styled-components": "1.5.97",
@@ -97,6 +99,9 @@
     "@types/array.prototype.flatmap": "1.2.6",
     "@types/d3": "7.4.3",
     "@types/jest": "29.5.0",
+    "@types/lingui__core": "2.7.1",
+    "@types/lingui__macro": "2.7.4",
+    "@types/lingui__react": "2.8.3",
     "@types/ms": "0.7.31",
     "@types/multicodec": "1.0.0",
     "@types/node": "18.16.0",
@@ -137,10 +142,12 @@
     "jest-fail-on-console": "3.1.1",
     "jest-fetch-mock": "3.0.3",
     "jest-styled-components": "7.2.0",
+    "jpeg-js": "0.4.4",
     "lint-staged": "^14.0.0",
     "madge": "6.1.0",
     "mini-css-extract-plugin": "^2.7.6",
     "path-browserify": "1.0.1",
+    "png-ts": "0.0.3",
     "postinstall-postinstall": "2.1.0",
     "prettier": "latest",
     "process": "0.11.10",
@@ -169,7 +176,11 @@
     "@graphql-codegen/typescript-operations": "^3.0.2",
     "@graphql-codegen/typescript-react-apollo": "^3.3.7",
     "@graphql-codegen/typescript-resolvers": "^3.2.1",
+    "@heroicons/react": "^1.0.6",
     "@juggle/resize-observer": "3.4.0",
+    "@lingui/core": "4.5.0",
+    "@lingui/macro": "4.5.0",
+    "@lingui/react": "4.5.0",
     "@looksrare/sdk": "0.10.4",
     "@metamask/jazzicon": "2.0.0",
     "@opensea/seaport-js": "1.3.0",
@@ -246,6 +257,7 @@
     "jsbi": "3.2.5",
     "lightweight-charts": "4.1.1",
     "localforage": "1.10.0",
+    "make-plural": "7.0.0",
     "ms": "2.1.3",
     "multicodec": "3.2.1",
     "multihashes": "4.0.2",
@@ -283,13 +295,18 @@
     "statsig-react": "1.32.0",
     "styled-components": "5.3.11",
     "tiny-invariant": "1.3.1",
+    "ua-parser-js": "1.0.37",
     "uniswap": "workspace:^",
     "use-resize-observer": "9.1.0",
     "utilities": "workspace:^",
     "uuid": "9.0.0",
     "video-extensions": "1.2.0",
     "wcag-contrast": "3.0.0",
     "web-vitals": "2.1.4",
+    "workbox-core": "6.6.0",
+    "workbox-navigation-preload": "6.6.0",
+    "workbox-precaching": "6.6.0",
+    "workbox-routing": "6.6.0",
     "xml2js": "0.6.2",
     "zone.js": "0.12.0",
     "zustand": "4.4.6"

apps/web/public/index.html

@@ -3,19 +3,19 @@
   <head>
     <meta charset="utf-8" />
 
-    <title>Uniswap Interface</title>
+    <title>Trinity</title>
 
     <!--
       %PUBLIC_URL% will be replaced with the URL of the `public` folder during build.
       Only files inside the `public` folder can be referenced from the HTML.
     -->
-    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/favicon.png" />
-    <link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/images/192x192_App_Icon.png" />
-    <link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/images/512x512_App_Icon.png" />
+    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/uniswap-static/favicon.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="%PUBLIC_URL%/uniswap-static/images/Trinity192.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="%PUBLIC_URL%/uniswap-static/images/Trinity512.png" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <meta name="theme-color" content="#fff" />
-    <% const cspConfig = require('./csp.json'); %>
+    <% const cspConfig = require('./uniswap-static/csp.json'); %>
     <meta
       http-equiv="Content-Security-Policy" 
       content="default-src <%= cspConfig.defaultSrc.join(' ') %>; script-src <%= cspConfig.scriptSrc.join(' ') %>; style-src <%= cspConfig.styleSrc.join(' ') %>; img-src <%= cspConfig.imgSrc.join(' ') %>; frame-src <%= cspConfig.frameSrc.join(' ') %>; connect-src <%= cspConfig.connectSrc.join(' ') %>; worker-src <%= cspConfig.workerSrc.join(' ') %>;"
@@ -31,20 +31,19 @@
       manifest.json provides metadata used when the app is installed as a PWA.
       See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="%PUBLIC_URL%/uniswap-static/manifest.json" />
 
     <link rel="preconnect" href="https://interface.gateway.uniswap.org/" crossorigin/>
     <link rel="preconnect" href="https://mainnet.infura.io/" crossorigin/>
 
-    <link rel="preload" href="%PUBLIC_URL%/fonts/Basel-Grotesk-Book.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="preload" href="%PUBLIC_URL%/fonts/Basel-Grotesk-Medium.woff2" as="font" type="font/woff2" crossorigin />
-
-    <!-- Include <link rel="preload"> for js assets so that they are loaded with high priority. -->
-    <%= htmlWebpackPlugin.files.js.map((href) => `<link rel="preload" href="${href}" as="script" />`).join('\n    ') %>
+    <link rel="preload" href="%PUBLIC_URL%/uniswap-static/fonts/Basel-Grotesk-Book.woff" as="font" type="font/woff" crossorigin />
+    <link rel="preload" href="%PUBLIC_URL%/uniswap-static/fonts/Basel-Grotesk-Book.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="%PUBLIC_URL%/uniswap-static/fonts/Basel-Grotesk-Medium.woff" as="font" type="font/woff" crossorigin />
+    <link rel="preload" href="%PUBLIC_URL%/uniswap-static/fonts/Basel-Grotesk-Medium.woff2" as="font" type="font/woff2" crossorigin />
 
     <style>
       * {
-        font-family: 'Basel', sans-serif;
+        font-family: 'Courier New', 'Basel', sans-serif;
         box-sizing: border-box;
       }
 
@@ -57,8 +56,8 @@
         font-style: normal;
         font-display: block;
         src: 
-          url('%PUBLIC_URL%/fonts/Basel-Grotesk-Medium.woff2') format('woff2'),
-          url('%PUBLIC_URL%/fonts/Basel-Grotesk-Medium.woff') format('woff');
+          url('%PUBLIC_URL%/uniswap-static/fonts/Basel-Grotesk-Medium.woff2') format('woff2'),
+          url('%PUBLIC_URL%/uniswap-static/fonts/Basel-Grotesk-Medium.woff') format('woff');
       }
 
       @font-face {
@@ -67,13 +66,13 @@
         font-style: normal;
         font-display: block;
         src: 
-          url('%PUBLIC_URL%/fonts/Basel-Grotesk-Book.woff2') format('woff2'),
-          url('%PUBLIC_URL%/fonts/Basel-Grotesk-Book.woff') format('woff');
+          url('%PUBLIC_URL%/uniswap-static/fonts/Basel-Grotesk-Book.woff2') format('woff2'),
+          url('%PUBLIC_URL%/uniswap-static/fonts/Basel-Grotesk-Book.woff') format('woff');
       }
 
       @supports (font-variation-settings: normal) {
         * {
-          font-family: 'Basel', sans-serif;
+          font-family: 'Courier New', 'Basel', sans-serif;
         }
       }
 
@@ -134,7 +133,11 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
-    <div id="root"></div>
+    <div id="root">
+      <!-- Triggers the font to load immediately and then is replaced by the app -->
+      <div>&emsp;</div>
+    </div>
+
     <div id="background-radial-gradient"></div>
   </body>
 </html>

apps/web/scripts/compile-ajv-validators.js

@@ -11,10 +11,6 @@ const tokenListAjv = new Ajv({ code: { source: true, esm: true } })
 addFormats(tokenListAjv)
 const validateTokenList = tokenListAjv.compile(schema)
 let tokenListModuleCode = standaloneCode(tokenListAjv, validateTokenList)
-
-// Generate the folder
-fs.mkdirSync(path.join(__dirname, '../src/utils/__generated__/'), { recursive: true })
-
 fs.writeFileSync(path.join(__dirname, '../src/utils/__generated__/validateTokenList.js'), tokenListModuleCode)
 
 const tokensAjv = new Ajv({ code: { source: true, esm: true } })