fix: dynamic imports

package.json

@@ -61,6 +61,7 @@
     "typescript": "4.7.4",
     "vite": "^6.0.7",
     "vite-plugin-commonjs": "^0.10.4",
+    "vite-plugin-dynamic-import": "^1.6.0",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4"

src/contexts/tokens.tsx

@@ -129,15 +129,14 @@ export function TokensProvider({ children = undefined }) {
   const updateTokenList = (availableTokens = []) => {
     setPending(true)
 
-    fetch('../../node_modules/token-list/tokenlist.json')
-      .then((response) => response.json())
-      .then(({tokens}) => {
-        mergeTokenList(tokens, availableTokens)
+    import('token-list/tokenlist.json')
+      .then((module) => {
+        mergeTokenList(module.tokens, availableTokens);
       })
       .catch((err) => {
-        setError(`Failed to fetch neon transfer token list: ${err.message}`)
+        setError(`Failed to fetch neon transfer token list: ${err.message}`);
       })
-      .finally(() => setPending(false))
+      .finally(() => setPending(false));
   }
 
   useEffect(() => {

vite.config.ts

@@ -6,6 +6,7 @@ import svgr from 'vite-plugin-svgr';
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
 import vitetsConfigPaths from 'vite-tsconfig-paths';
 import sass from 'sass'
+import dynamicImport from 'vite-plugin-dynamic-import'
 
 const config = defineConfig({
   base: './',
@@ -16,6 +17,7 @@ const config = defineConfig({
       ],
     }),
     react(),
+    dynamicImport(),
     vitetsConfigPaths(),
     nodePolyfills({ include: ['fs', 'stream', 'buffer', 'util', 'http', 'https'] }),
     commonjs()
@@ -32,6 +34,7 @@ const config = defineConfig({
   resolve: {
     alias: {
      '@': path.resolve(__dirname, './src'),
+      'token-list': '/node_modules/token-list',
     //   screens: path.resolve(__dirname, './src/screens'),
     },
   },