chore: Update dependencies and configurations for optimal dev perform…

…ance (#454)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Updated development scripts to enhance efficiency by incorporating the
`--turbo` flag.
- Introduced a centralized module for lazy-loading SVG icon components,
improving load performance.

- **Bug Fixes**
- Updated various dependencies, including `@tabler/icons-react`, `next`,
and `next-intl`, to resolve issues and improve functionality.

- **Documentation**
- Clarified build environments in development and production
configurations for better usability.
- Added a README for the app-icons package to enhance documentation
clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/earn-protocol/helpers/mixpanel.ts

@@ -10,6 +10,10 @@ export const optedOutCheck = () =>
 const includeBasePath = (path: string) => `${path.replace(/\/$/u, '')}`
 
 export const trackEvent = (eventName: string, eventBody: { [key: string]: unknown }) => {
+  // eslint-disable-next-line turbo/no-undeclared-env-vars
+  if (process.env.TURBOPACK) {
+    return
+  }
   let win: Window
 
   if (typeof window === 'undefined') {

apps/earn-protocol/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "license": "Apache-2.0",
   "scripts": {
-    "dev": "dotenv -e ../../.env -e ../../.env.local -- next dev -p 3002",
+    "dev": "dotenv -e ../../.env -e ../../.env.local -- next dev -p 3002 --turbo",
     "build": "dotenv -e ../../.env -e ../../.env.local -- next build",
     "start": "next start -p 3002",
     "lint": "eslint ."
@@ -17,11 +17,12 @@
     "@loadable/component": "^5.16.4",
     "@prisma/nextjs-monorepo-workaround-plugin": "^5.15.1",
     "@summerfi/app-db": "workspace:*",
+    "@summerfi/app-icons": "workspace:*",
     "@summerfi/app-types": "workspace:*",
     "@summerfi/app-ui": "workspace:*",
     "@summerfi/rays-db": "workspace:*",
     "@summerfi/serverless-shared": "workspace:*",
-    "@tabler/icons-react": "^3.4.0",
+    "@tabler/icons-react": "^3.11.0",
     "@tanstack/react-query": "^5.51.1",
     "@transak/transak-sdk": "^3.1.1",
     "@web3-onboard/coinbase": "^2.4.1",
@@ -42,8 +43,8 @@
     "lodash": "^4.17.21",
     "mixpanel": "^0.18.0",
     "mixpanel-browser": "^2.53.0",
-    "next": "^14.2.4",
-    "next-intl": "^3.15.2",
+    "next": "^14.2.5",
+    "next-intl": "^3.17.2",
     "pino-pretty": "^11.2.1",
     "react": "^18.3.1",
     "react-awesome-animated-number": "^1.0.13",

apps/rays-dashboard/helpers/mixpanel.ts

@@ -11,6 +11,10 @@ export const optedOutCheck = () =>
 const includeBasePath = (path: string) => `${basePath}${path.replace(/\/$/u, '')}`
 
 export const trackEvent = (eventName: string, eventBody: { [key: string]: unknown }) => {
+  // eslint-disable-next-line turbo/no-undeclared-env-vars
+  if (process.env.TURBOPACK) {
+    return
+  }
   let win: Window
 
   if (typeof window === 'undefined') {

apps/rays-dashboard/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "license": "Apache-2.0",
   "scripts": {
-    "dev": "dotenv -e ../../.env -e ../../.env.local -- next dev -p 3001",
+    "dev": "dotenv -e ../../.env -e ../../.env.local -- next dev -p 3001 --turbo",
     "build": "dotenv -e ../../.env -e ../../.env.local -- next build",
     "start": "next start -p 3001",
     "lint": "eslint ."
@@ -14,11 +14,12 @@
     "@loadable/component": "^5.16.4",
     "@prisma/nextjs-monorepo-workaround-plugin": "^5.15.1",
     "@summerfi/app-db": "workspace:*",
+    "@summerfi/app-icons": "workspace:*",
     "@summerfi/app-types": "workspace:*",
     "@summerfi/app-ui": "workspace:*",
     "@summerfi/rays-db": "workspace:*",
     "@summerfi/serverless-shared": "workspace:*",
-    "@tabler/icons-react": "^3.4.0",
+    "@tabler/icons-react": "^3.11.0",
     "@web3-onboard/coinbase": "^2.4.1",
     "@web3-onboard/common": "^2.4.2",
     "@web3-onboard/core": "^2.22.1",
@@ -32,13 +33,13 @@
     "boring-avatars": "^1.10.2",
     "browser-detect": "^0.2.28",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.12",
     "include-media": "2.0.0",
     "lodash": "^4.17.21",
     "mixpanel": "^0.18.0",
     "mixpanel-browser": "^2.53.0",
-    "next": "^14.2.4",
-    "next-intl": "^3.15.2",
+    "next": "^14.2.5",
+    "next-intl": "^3.17.2",
     "pino-pretty": "^11.2.1",
     "react": "^18.3.1",
     "react-awesome-animated-number": "^1.0.13",

packages/app-icons/.eslintrc.cjs

@@ -0,0 +1,16 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['@summerfi/eslint-config/next.cjs'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
+  ignorePatterns: ['types', 'dist', 'node_modules'],
+  rules: {
+    '@next/next/no-img-element': 'off',
+    'no-magic-numbers': 'off',
+  },
+}

packages/app-icons/README.MD

@@ -0,0 +1,3 @@
+## @summerfi/summerfi/app-icons
+
+Separated package for app icons.

packages/app-icons/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@summerfi/app-icons",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/types/src/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "lint": "eslint *.ts*",
+    "dev": "vite build -w true --mode=dev",
+    "build": "vite build -w false --mode=prod",
+    "clean": "rm -rf dist"
+  },
+  "devDependencies": {
+    "@summerfi/app-types": "workspace:*",
+    "@summerfi/eslint-config": "workspace:*",
+    "@summerfi/typescript-config": "workspace:*",
+    "@types/loadable__component": "^5.13.9",
+    "eslint": "8.57.0",
+    "glob": "^10.3.12",
+    "jest": "29.7.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.3.5"
+  },
+  "peerDependencies": {
+    "@loadable/component": "^5.16.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "vite-plugin-svgo": "^1.4.0"
+  }
+}

packages/app-icons/src/index.ts

@@ -0,0 +1,200 @@
+/* eslint-disable camelcase */
+import { lazy } from '@loadable/component'
+
+export const aave_cbETH_usdc = lazy.lib(() => import('./icons/aave_cbETH_usdc.svg'))
+export const aave_circle_color = lazy.lib(() => import('./icons/aave_circle_color.svg'))
+export const aave_eth_usdc = lazy.lib(() => import('./icons/aave_eth_usdc.svg'))
+export const aave_steth_eth = lazy.lib(() => import('./icons/aave_steth_eth.svg'))
+export const aave_steth_usdc = lazy.lib(() => import('./icons/aave_steth_usdc.svg'))
+export const aave_wbtc_usdc = lazy.lib(() => import('./icons/aave_wbtc_usdc.svg'))
+export const aero = lazy.lib(() => import('./icons/aero.svg'))
+export const ajna_circle_color = lazy.lib(() => import('./icons/ajna_circle_color.svg'))
+export const apxeth_circle_color = lazy.lib(() => import('./icons/apxeth_circle_color.svg'))
+export const arb = lazy.lib(() => import('./icons/arb.svg'))
+export const arb_circle = lazy.lib(() => import('./icons/arb_circle.svg'))
+export const augur = lazy.lib(() => import('./icons/augur.svg'))
+export const augur_circle_color = lazy.lib(() => import('./icons/augur_circle_color.svg'))
+export const augur_color = lazy.lib(() => import('./icons/augur_color.svg'))
+export const bal = lazy.lib(() => import('./icons/bal.svg'))
+export const bal_circle = lazy.lib(() => import('./icons/bal_circle.svg'))
+export const bal_circle_color = lazy.lib(() => import('./icons/bal_circle_color.svg'))
+export const bat = lazy.lib(() => import('./icons/bat.svg'))
+export const bat_circle_color = lazy.lib(() => import('./icons/bat_circle_color.svg'))
+export const bat_color = lazy.lib(() => import('./icons/bat_color.svg'))
+export const bridge = lazy.lib(() => import('./icons/bridge.svg'))
+export const btc_circle_color = lazy.lib(() => import('./icons/btc_circle_color.svg'))
+export const btc_circle_mono = lazy.lib(() => import('./icons/btc_circle_mono.svg'))
+export const cbeth_circle_color = lazy.lib(() => import('./icons/cbeth_circle_color.svg'))
+export const cbeth_eth = lazy.lib(() => import('./icons/cbeth_eth.svg'))
+export const cbeth_usdc = lazy.lib(() => import('./icons/cbeth_usdc.svg'))
+export const chai = lazy.lib(() => import('./icons/chai.svg'))
+export const chai_circle_color = lazy.lib(() => import('./icons/chai_circle_color.svg'))
+export const chai_color = lazy.lib(() => import('./icons/chai_color.svg'))
+export const chainlink = lazy.lib(() => import('./icons/chainlink.svg'))
+export const chainlink_circle_color = lazy.lib(() => import('./icons/chainlink_circle_color.svg'))
+export const chainlink_color = lazy.lib(() => import('./icons/chainlink_color.svg'))
+export const compound = lazy.lib(() => import('./icons/compound.svg'))
+export const compound_circle_color = lazy.lib(() => import('./icons/compound_circle_color.svg'))
+export const compound_color = lazy.lib(() => import('./icons/compound_color.svg'))
+export const crv = lazy.lib(() => import('./icons/crv.svg'))
+export const crv_circle = lazy.lib(() => import('./icons/crv_circle.svg'))
+export const cseth = lazy.lib(() => import('./icons/cseth.svg'))
+export const dai = lazy.lib(() => import('./icons/dai.svg'))
+export const dai_circle_color = lazy.lib(() => import('./icons/dai_circle_color.svg'))
+export const dai_color = lazy.lib(() => import('./icons/dai_color.svg'))
+export const degen = lazy.lib(() => import('./icons/degen.svg'))
+export const not_supported_icon = lazy.lib(() => import('./icons/not_supported_icon.svg'))
+export const deth = lazy.lib(() => import('./icons/deth.svg'))
+export const digix_circle_color = lazy.lib(() => import('./icons/digix_circle_color.svg'))
+export const ena = lazy.lib(() => import('./icons/ena.svg'))
+export const eth_circle_color = lazy.lib(() => import('./icons/eth_circle_color.svg'))
+export const eth_circle_mono = lazy.lib(() => import('./icons/eth_circle_mono.svg'))
+export const eth_usdc = lazy.lib(() => import('./icons/eth_usdc.svg'))
+export const ether = lazy.lib(() => import('./icons/ether.svg'))
+export const ether_circle_color = lazy.lib(() => import('./icons/ether_circle_color.svg'))
+export const ether_color = lazy.lib(() => import('./icons/ether_color.svg'))
+export const euro_circle_color = lazy.lib(() => import('./icons/euro_circle_color.svg'))
+export const exchange = lazy.lib(() => import('./icons/exchange.svg'))
+export const ezeth = lazy.lib(() => import('./icons/ezeth.svg'))
+export const frax_circle_color = lazy.lib(() => import('./icons/frax_circle_color.svg'))
+export const gemini = lazy.lib(() => import('./icons/gemini.svg'))
+export const gemini_circle_color = lazy.lib(() => import('./icons/gemini_circle_color.svg'))
+export const gemini_color = lazy.lib(() => import('./icons/gemini_color.svg'))
+export const gno_circle_color = lazy.lib(() => import('./icons/gno_circle_color.svg'))
+export const gho_circle_color = lazy.lib(() => import('./icons/gho_circle_color.svg'))
+export const golem_circle_color = lazy.lib(() => import('./icons/golem_circle_color.svg'))
+export const guniv3_dai_usdc1_circles_color = lazy.lib(
+  () => import('./icons/guniv3_dai_usdc1_circles_color.svg'),
+)
+export const gusd_circle_color = lazy.lib(() => import('./icons/gusd_circle_color.svg'))
+export const gusd_circle_mono = lazy.lib(() => import('./icons/gusd_circle_mono.svg'))
+export const knc_circle_color = lazy.lib(() => import('./icons/knc_circle_color.svg'))
+export const kyber = lazy.lib(() => import('./icons/kyber.svg'))
+export const kyber_circle_color = lazy.lib(() => import('./icons/kyber_circle_color.svg'))
+export const kyber_color = lazy.lib(() => import('./icons/kyber_color.svg'))
+export const latamex = lazy.lib(() => import('./icons/latamex.svg'))
+export const ldo = lazy.lib(() => import('./icons/ldo.svg'))
+export const ldo_circle = lazy.lib(() => import('./icons/ldo_circle.svg'))
+export const link = lazy.lib(() => import('./icons/link.svg'))
+export const link_circle_color = lazy.lib(() => import('./icons/link_circle_color.svg'))
+export const link_circle_mono = lazy.lib(() => import('./icons/link_circle_mono.svg'))
+export const lrc = lazy.lib(() => import('./icons/lrc.svg'))
+export const lrc_circle_color = lazy.lib(() => import('./icons/lrc_circle_color.svg'))
+export const lrc_color = lazy.lib(() => import('./icons/lrc_color.svg'))
+export const lusd_circle_color = lazy.lib(() => import('./icons/lusd_circle_color.svg'))
+export const maker = lazy.lib(() => import('./icons/maker.svg'))
+export const maker_circle_color = lazy.lib(() => import('./icons/maker_circle_color.svg'))
+export const maker_color = lazy.lib(() => import('./icons/maker_color.svg'))
+export const mana = lazy.lib(() => import('./icons/mana.svg'))
+export const mana_circle_color = lazy.lib(() => import('./icons/mana_circle_color.svg'))
+export const mana_circle_mono = lazy.lib(() => import('./icons/mana_circle_mono.svg'))
+export const mana_color = lazy.lib(() => import('./icons/mana_color.svg'))
+export const matic_circle_color = lazy.lib(() => import('./icons/matic_circle_color.svg'))
+export const matic_circle_mono = lazy.lib(() => import('./icons/matic_circle_mono.svg'))
+export const menu = lazy.lib(() => import('./icons/menu.svg'))
+export const meveth = lazy.lib(() => import('./icons/meveth.svg'))
+export const mkr_circle_color = lazy.lib(() => import('./icons/mkr_circle_color.svg'))
+export const moonpay = lazy.lib(() => import('./icons/moonpay.svg'))
+export const morpho_circle_color = lazy.lib(() => import('./icons/morpho_circle_color.svg'))
+export const mpeth = lazy.lib(() => import('./icons/mpeth.svg'))
+export const omisego = lazy.lib(() => import('./icons/omisego.svg'))
+export const omisego_circle_color = lazy.lib(() => import('./icons/omisego_circle_color.svg'))
+export const omisego_color = lazy.lib(() => import('./icons/omisego_color.svg'))
+export const op = lazy.lib(() => import('./icons/op.svg'))
+export const op_circle = lazy.lib(() => import('./icons/op_circle.svg'))
+export const open_in_new_tab = lazy.lib(() => import('./icons/open_in_new_tab.svg'))
+export const oseth_circle_color = lazy.lib(() => import('./icons/oseth_circle_color.svg'))
+export const pax = lazy.lib(() => import('./icons/pax.svg'))
+export const pax_circle_color = lazy.lib(() => import('./icons/pax_circle_color.svg'))
+export const pax_color = lazy.lib(() => import('./icons/pax_color.svg'))
+export const prime = lazy.lib(() => import('./icons/prime.svg'))
+export const pyusd = lazy.lib(() => import('./icons/pyusd.svg'))
+export const question = lazy.lib(() => import('./icons/question.svg'))
+export const question_mark = lazy.lib(() => import('./icons/question_mark.svg'))
+export const question_o = lazy.lib(() => import('./icons/question_o.svg'))
+export const rbn_circle_color = lazy.lib(() => import('./icons/rbn_circle_color.svg'))
+export const renbtc_circle_color = lazy.lib(() => import('./icons/renbtc_circle_color.svg'))
+export const reth_circle_color = lazy.lib(() => import('./icons/reth_circle_color.svg'))
+export const reth_eth = lazy.lib(() => import('./icons/reth_eth.svg'))
+export const reth_usdc = lazy.lib(() => import('./icons/reth_usdc.svg'))
+export const rpl = lazy.lib(() => import('./icons/rpl.svg'))
+export const rpl_circle = lazy.lib(() => import('./icons/rpl_circle.svg'))
+export const safe = lazy.lib(() => import('./icons/safe.svg'))
+export const sai = lazy.lib(() => import('./icons/sai.svg'))
+export const sai_circle_color = lazy.lib(() => import('./icons/sai_circle_color.svg'))
+export const sai_color = lazy.lib(() => import('./icons/sai_color.svg'))
+export const sdai_circle_color = lazy.lib(() => import('./icons/sdai_circle_color.svg'))
+export const snx = lazy.lib(() => import('./icons/snx.svg'))
+export const spark_circle_color = lazy.lib(() => import('./icons/spark_circle_color.svg'))
+export const steth_circle_color = lazy.lib(() => import('./icons/steth_circle_color.svg'))
+export const steth_eth = lazy.lib(() => import('./icons/steth_eth.svg'))
+export const steth_usdc = lazy.lib(() => import('./icons/steth_usdc.svg'))
+export const styeth_circle_color = lazy.lib(() => import('./icons/styeth_circle_color.svg'))
+export const susd = lazy.lib(() => import('./icons/susd.svg'))
+export const susd_circle = lazy.lib(() => import('./icons/susd_circle.svg'))
+export const susde = lazy.lib(() => import('./icons/susde.svg'))
+export const tbtc_circle_color = lazy.lib(() => import('./icons/tbtc_circle_color.svg'))
+export const tusd = lazy.lib(() => import('./icons/tusd.svg'))
+export const tusd_circle_color = lazy.lib(() => import('./icons/tusd_circle_color.svg'))
+export const tusd_color = lazy.lib(() => import('./icons/tusd_color.svg'))
+export const uni_circle_color = lazy.lib(() => import('./icons/uni_circle_color.svg'))
+export const uni_circle_mono = lazy.lib(() => import('./icons/uni_circle_mono.svg'))
+export const uni_lp_circle_color = lazy.lib(() => import('./icons/uni_lp_circle_color.svg'))
+export const uni_lp_circle_mono = lazy.lib(() => import('./icons/uni_lp_circle_mono.svg'))
+export const unieth = lazy.lib(() => import('./icons/unieth.svg'))
+export const univ2_dai_usdc_circles_color = lazy.lib(
+  () => import('./icons/univ2_dai_usdc_circles_color.svg'),
+)
+export const univ2_dai_usdt_circles_color = lazy.lib(
+  () => import('./icons/univ2_dai_usdt_circles_color.svg'),
+)
+export const univ2_eth_usdt_circles_color = lazy.lib(
+  () => import('./icons/univ2_eth_usdt_circles_color.svg'),
+)
+export const univ2_usdc_eth_circles_color = lazy.lib(
+  () => import('./icons/univ2_usdc_eth_circles_color.svg'),
+)
+export const usd_circle_color = lazy.lib(() => import('./icons/usd_circle_color.svg'))
+export const usda = lazy.lib(() => import('./icons/usda.svg'))
+export const usdc = lazy.lib(() => import('./icons/usdc.svg'))
+export const usdc_circle_color = lazy.lib(() => import('./icons/usdc_circle_color.svg'))
+export const usde = lazy.lib(() => import('./icons/usde.svg'))
+export const usdp_circle_color = lazy.lib(() => import('./icons/usdp_circle_color.svg'))
+export const usdt = lazy.lib(() => import('./icons/usdt.svg'))
+export const usdt_circle_color = lazy.lib(() => import('./icons/usdt_circle_color.svg'))
+export const usdt_color = lazy.lib(() => import('./icons/usdt_color.svg'))
+export const wbtc = lazy.lib(() => import('./icons/wbtc.svg'))
+export const wbtc_circle_color = lazy.lib(() => import('./icons/wbtc_circle_color.svg'))
+export const wbtc_color = lazy.lib(() => import('./icons/wbtc_color.svg'))
+export const wbtc_usdc = lazy.lib(() => import('./icons/wbtc_usdc.svg'))
+export const weeth_circle_color = lazy.lib(() => import('./icons/weeth_circle_color.svg'))
+export const weth_circle_color = lazy.lib(() => import('./icons/weth_circle_color.svg'))
+export const wld_circle_color = lazy.lib(() => import('./icons/wld_circle_color.svg'))
+export const wsteth_circle_color = lazy.lib(() => import('./icons/wsteth_circle_color.svg'))
+export const wyre = lazy.lib(() => import('./icons/wyre.svg'))
+export const xeth = lazy.lib(() => import('./icons/xeth.svg'))
+export const yen_circle_color = lazy.lib(() => import('./icons/yen_circle_color.svg'))
+export const yfi_circle_color = lazy.lib(() => import('./icons/yfi_circle_color.svg'))
+export const yfi_circle_mono = lazy.lib(() => import('./icons/yfi_circle_mono.svg'))
+export const yieldbtc_circle_color = lazy.lib(() => import('./icons/yieldbtc_circle_color.svg'))
+export const yieldeth_circle_color = lazy.lib(() => import('./icons/yieldeth_circle_color.svg'))
+export const zerox = lazy.lib(() => import('./icons/zerox.svg'))
+export const zerox_circle_color = lazy.lib(() => import('./icons/zerox_circle_color.svg'))
+export const zerox_color = lazy.lib(() => import('./icons/zerox_color.svg'))
+export const bsdeth_circle_color = lazy.lib(() => import('./icons/bsdeth_circle_color.svg'))
+export const autoBuy = lazy.lib(() => import('./icons/autoBuy.svg'))
+export const autoSell = lazy.lib(() => import('./icons/autoSell.svg'))
+export const stopLoss = lazy.lib(() => import('./icons/stopLoss.svg'))
+export const trailingStopLoss = lazy.lib(() => import('./icons/stopLoss.svg'))
+export const takeProfit = lazy.lib(() => import('./icons/takeProfit.svg'))
+export const partialTakeProfit = lazy.lib(() => import('./icons/takeProfit.svg'))
+export const autoTakeProfit = lazy.lib(() => import('./icons/takeProfit.svg'))
+export const constantMultiple = lazy.lib(() => import('./icons/takeProfit.svg')) // doesn't matter, no longer supported
+export const rays = lazy.lib(() => import('./icons/rays.svg'))
+export const chevron_down = lazy.lib(() => import('./icons/chevron_down.svg'))
+export const search_icon = lazy.lib(() => import('./icons/search_icon.svg'))
+export const tooltip = lazy.lib(() => import('./icons/tooltip.svg'))
+export const checkmark_colorful = lazy.lib(() => import('./icons/checkmark_colorful.svg'))
+export const close_colorful = lazy.lib(() => import('./icons/close_colorful.svg'))
+export const radio_button = lazy.lib(() => import('./icons/radio_button.svg'))
+export const radio_button_checked = lazy.lib(() => import('./icons/radio_button_checked.svg'))