Skip to content
This repository was archived by the owner on Sep 2, 2024. It is now read-only.

Commit 9317a18

Browse files
therealemjytherealemjy
committed
refactor: replace bundler from react-script to Vite
1 parent a2faba6 commit 9317a18

File tree

22 files changed

+4124
-6187
lines changed

22 files changed

+4124
-6187
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,7 @@ module.exports = {
4646
'import/no-extraneous-dependencies': [
4747
'error',
4848
{
49-
devDependencies: [
50-
'**/*.stories.tsx',
51-
'**/*.stories.ts',
52-
'src/stories/**',
53-
'**/*.spec.tsx',
54-
'src/setupTests.ts',
55-
],
49+
devDependencies: true,
5650
},
5751
],
5852
// Custom

‎.gitignore‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@
1313

1414
# misc
1515
.DS_Store
16-
.env.local
17-
.env.development.local
18-
.env.test.local
19-
.env.production.local
16+
.env
2017
.idea
2118

2219
npm-debug.log*
2320
yarn-debug.log*
2421
yarn-error.log*
22+
23+
# Generated subgraph (GraphQL) client
24+
src/subgraph/client

public/index.html renamed to index.html

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="https://venus.io/favicon.ico" />
5+
<link rel="icon" href="/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#3A78FF" />
88
<meta
@@ -13,40 +13,40 @@
1313
rel="icon"
1414
type="image/png"
1515
sizes="192x192"
16-
href="https://venus.io/android-chrome-192x192.png"
16+
href="/android-chrome-192x192.png"
1717
/>
18-
<link rel="icon" type="image/png" sizes="32x32" href="https://venus.io/favicon-32x32.png" />
19-
<link rel="icon" type="image/png" sizes="16x16" href="https://venus.io/favicon-16x16.png" />
18+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
19+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
2020

21-
<meta name="msapplication-square70x70logo" content="https://venus.io/70x70.png" />
22-
<meta name="msapplication-square144x144logo" content="https://venus.io/144x144.png" />
23-
<meta name="msapplication-square150x150logo" content="https://venus.io/150x150.png" />
24-
<meta name="msapplication-square310x310logo" content="https://venus.io/310x310.png" />
25-
<meta name="msapplication-wide310x150logo" content="https://venus.io/310x150.png" />
26-
<meta name="msapplication-TileImage" content="https://venus.io/144x144.png" />
21+
<meta name="msapplication-square70x70logo" content="/70x70.png" />
22+
<meta name="msapplication-square144x144logo" content="/144x144.png" />
23+
<meta name="msapplication-square150x150logo" content="/150x150.png" />
24+
<meta name="msapplication-square310x310logo" content="/310x310.png" />
25+
<meta name="msapplication-wide310x150logo" content="/310x150.png" />
26+
<meta name="msapplication-TileImage" content="/144x144.png" />
2727
<meta name="msapplication-TileColor" content="#3A78FF" />
2828

29-
<link rel="apple-touch-icon" type="image/png" href="https://venus.io/apple-touch-icon.png" />
30-
<link rel="apple-touch-icon" type="image/png" sizes="57x57" href="https://venus.io/57x57.png" />
31-
<link rel="apple-touch-icon" type="image/png" sizes="60x60" href="https://venus.io/60x60.png" />
32-
<link rel="apple-touch-icon" type="image/png" sizes="72x72" href="https://venus.io/72x72.png" />
33-
<link rel="apple-touch-icon" type="image/png" sizes="76x76" href="https://venus.io/76x76.png" />
34-
<link rel="apple-touch-icon" type="image/png" sizes="114x114" href="https://venus.io/114x114.png" />
35-
<link rel="apple-touch-icon" type="image/png" sizes="120x120" href="https://venus.io/120x120.png" />
36-
<link rel="apple-touch-icon" type="image/png" sizes="144x144" href="https://venus.io/144x144.png" />
37-
<link rel="apple-touch-icon" type="image/png" sizes="152x152" href="https://venus.io/152x152.png" />
38-
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="https://venus.io/180x180.png" />
29+
<link rel="apple-touch-icon" type="image/png" href="/apple-touch-icon.png" />
30+
<link rel="apple-touch-icon" type="image/png" sizes="57x57" href="/57x57.png" />
31+
<link rel="apple-touch-icon" type="image/png" sizes="60x60" href="/60x60.png" />
32+
<link rel="apple-touch-icon" type="image/png" sizes="72x72" href="/72x72.png" />
33+
<link rel="apple-touch-icon" type="image/png" sizes="76x76" href="/76x76.png" />
34+
<link rel="apple-touch-icon" type="image/png" sizes="114x114" href="/114x114.png" />
35+
<link rel="apple-touch-icon" type="image/png" sizes="120x120" href="/120x120.png" />
36+
<link rel="apple-touch-icon" type="image/png" sizes="144x144" href="/144x144.png" />
37+
<link rel="apple-touch-icon" type="image/png" sizes="152x152" href="/152x152.png" />
38+
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/180x180.png" />
3939
<!--
4040
manifest.json provides metadata used when your web app is installed on a
4141
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
4242
-->
43-
<link rel="manifest" href="https://venus.io/manifest.json" />
43+
<link rel="manifest" href="/manifest.json" />
4444
<!--
45-
Notice the use of https://venus.io in the tags above.
45+
Notice the use of in the tags above.
4646
It will be replaced with the URL of the `public` folder during the build.
4747
Only files inside the `public` folder can be referenced from the HTML.
4848
49-
Unlike "/favicon.ico" or "favicon.ico", "https://venus.io/favicon.ico" will
49+
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
5050
work correctly both with client-side routing and a non-root public URL.
5151
Learn how to configure a non-root public URL by running `npm run build`.
5252
-->
@@ -67,13 +67,13 @@
6767
content="Venus is a decentralized finance (DeFi) algorithmic money market protocol on BNB Chain."
6868
/>
6969
<meta name="twitter:card" content="summary_large_image" />
70-
<meta name="twitter:image" content="https://venus.io/share.png" />
70+
<meta name="twitter:image" content="/share.png" />
7171
<meta name="theme-color" content="#3A78FF" />
7272

7373
<meta property="og:title" content="Venus Protocol" />
7474
<meta property="og:type" content="website" />
7575
<meta property="og:url" content="https://venus.io/" />
76-
<meta property="og:image" content="https://venus.io/share.png" />
76+
<meta property="og:image" content="/share.png" />
7777
<meta
7878
property="og:description"
7979
content="Venus is a decentralized finance (DeFi) algorithmic money market protocol on BNB Chain."
@@ -94,5 +94,7 @@
9494
To begin the development, run `npm start` or `yarn start`.
9595
To create a production bundle, use `npm run build` or `yarn build`.
9696
-->
97+
98+
<script type="module" src="/src/index.tsx"></script>
9799
</body>
98100
</html>

‎package.json‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,29 @@
33
"homepage": "https://venus.io/",
44
"version": "0.1.0",
55
"private": true,
6+
"type": "module",
67
"dependencies": {
8+
"@tanstack/react-query": "^5.40.0",
79
"@testing-library/jest-dom": "^5.16.2",
810
"@testing-library/react": "^12.1.4",
911
"@testing-library/user-event": "^13.5.0",
10-
"@types/jest": "^27.4.1",
11-
"@types/node": "^16.7.13",
12-
"@types/react": "^17.0.40",
13-
"@types/react-dom": "^17.0.13",
1412
"axios": "^0.26.1",
1513
"classnames": "^2.3.1",
1614
"normalize.css": "^8.0.1",
17-
"react": "^17.0.2",
18-
"react-dom": "^17.0.2",
15+
"react": "^18.3.1",
16+
"react-dom": "^18.3.1",
1917
"react-particles": "2.9.3",
2018
"react-router-dom": "^6.3.0",
21-
"react-scripts": "5.0.0",
2219
"react-scrolllock": "^5.0.1",
2320
"tsparticles": "2.9.3",
2421
"web-vitals": "^2.1.4"
2522
},
2623
"scripts": {
27-
"start": "react-app-rewired start",
28-
"predeploy": "npm run build",
29-
"build": "react-app-rewired build",
30-
"test": "react-app-rewired test",
31-
"eject": "react-scripts eject",
24+
"start": "vite",
25+
"build": "vite build",
26+
"preview": "vite preview",
3227
"lint:fix": "yarn lint --fix && yarn pretty --write",
33-
"lint": "eslint .",
28+
"lint": "yarn run eslint .",
3429
"pretty": "yarn prettier \"src/**/*.{js,jsx,ts,tsx,html,json,md}\" public/**/*.html --check"
3530
},
3631
"browserslist": {
@@ -46,12 +41,22 @@
4641
]
4742
},
4843
"devDependencies": {
44+
"@types/jest": "^29.5.12",
45+
"@types/node": "^20.12.12",
46+
"@types/react": "^18.3.3",
47+
"@types/react-dom": "^18.3.0",
48+
"@typescript-eslint/eslint-plugin": "^7.11.0",
49+
"@typescript-eslint/parser": "^7.11.0",
50+
"@vitejs/plugin-react": "^4.3.1",
4951
"autoprefixer": "^9.0.0",
52+
"eslint": "^8",
5053
"eslint-config-airbnb": "^19.0.4",
51-
"eslint-config-airbnb-typescript": "^16.1.0",
52-
"eslint-config-prettier": "^8.5.0",
53-
"eslint-plugin-jsx-a11y": "^6.5.1",
54-
"eslint-plugin-prettier": "^4.0.0",
54+
"eslint-config-airbnb-typescript": "^18.0.0",
55+
"eslint-config-prettier": "^9.1.0",
56+
"eslint-plugin-import": "^2.29.1",
57+
"eslint-plugin-jsx-a11y": "^6.8.0",
58+
"eslint-plugin-prettier": "^5.1.3",
59+
"eslint-plugin-react": "^7.34.2",
5560
"husky": "^7.0.4",
5661
"lint-staged": "^12.3.5",
5762
"postcss": "^8.4.8",
@@ -64,7 +69,10 @@
6469
"react-app-rewire-postcss": "^3.0.2",
6570
"react-app-rewired": "^2.2.1",
6671
"react-snap": "^1.23.0",
67-
"typescript": "^4.6.2"
72+
"typescript": "^5.4.5",
73+
"vite": "^5.3.1",
74+
"vite-plugin-svgr": "^4.2.0",
75+
"vite-tsconfig-paths": "^4.3.2"
6876
},
6977
"resolutions": {
7078
"postcss": "^8.4.8"

‎src/api/constants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export const getTokenPublicUrl = (filePath: string) =>
2-
`${process.env.PUBLIC_URL}/coins/${filePath}`;
2+
new URL(`/coins/${filePath}`, import.meta.url).href;
33

44
export const tokenIconUrls = {
55
UNI: getTokenPublicUrl('uni.svg'),

‎src/components/App.tsx‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useEffect } from 'react';
22
import { BrowserRouter, Routes, Route } from 'react-router-dom';
3+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
34
import MainContent from './MainContent/MainContent';
45
import Footer from './Footer/Footer';
56
import s from './App.module.css';
@@ -13,6 +14,8 @@ function Main() {
1314
);
1415
}
1516

17+
const queryClient = new QueryClient();
18+
1619
function App() {
1720
useEffect(() => {
1821
if (window.location.pathname.startsWith('/discord')) {
@@ -21,13 +24,15 @@ function App() {
2124
}, [window.location.pathname]);
2225

2326
return (
24-
<BrowserRouter>
25-
<Routes>
26-
{['/', '/discord'].map(path => (
27-
<Route path={path} element={<Main />} key={path} />
28-
))}
29-
</Routes>
30-
</BrowserRouter>
27+
<QueryClientProvider client={queryClient}>
28+
<BrowserRouter>
29+
<Routes>
30+
{['/', '/discord'].map(path => (
31+
<Route path={path} element={<Main />} key={path} />
32+
))}
33+
</Routes>
34+
</BrowserRouter>
35+
</QueryClientProvider>
3136
);
3237
}
3338

‎src/components/Banner/Banner.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react';
22
import cn from 'classnames';
33
import s from './Banner.module.css';
4-
import { ReactComponent as Close } from './assets/close.svg';
4+
import Close from './assets/close.svg?react';
55

66
interface IBannerProps {
77
className?: string;

‎src/components/Benefits/Benefits.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import cn from 'classnames';
3-
import { ReactComponent as Octahedron } from './assets/1.svg';
4-
import { ReactComponent as Shield } from './assets/2.svg';
5-
import { ReactComponent as Dots } from './assets/3.svg';
3+
import Octahedron from './assets/1.svg?react';
4+
import Shield from './assets/2.svg?react';
5+
import Dots from './assets/3.svg?react';
66
import Container from '../Container/Container';
77
import s from './Benefits.module.css';
88

‎src/components/Footer/Footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import React from 'react';
22
import cn from 'classnames';
33
import Container from '../Container/Container';
44
import NavigationLinks from '../NavigationLinks/NavigationLinks';
5-
import { ReactComponent as Logo } from '../Header/assets/logo.svg';
6-
import { ReactComponent as LogoMobile } from './assets/logoSmall.svg';
5+
import Logo from '../Header/assets/logo.svg?react';
6+
import LogoMobile from './assets/logoSmall.svg?react';
77
import SocialLinks from './SocialLinks';
88
import s from './Footer.module.css';
99
import Link from '../Link/Link';

‎src/components/Footer/SocialLinks.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
22
import cn from 'classnames';
3-
import { ReactComponent as IconTelegram } from './assets/telegram.svg';
4-
import { ReactComponent as IconDiscord } from './assets/discord.svg';
5-
import { ReactComponent as IconTwitter } from './assets/twitter.svg';
6-
import { ReactComponent as IconGithub } from './assets/github.svg';
3+
import IconTelegram from './assets/telegram.svg?react';
4+
import IconDiscord from './assets/discord.svg?react';
5+
import IconTwitter from './assets/twitter.svg?react';
6+
import IconGithub from './assets/github.svg?react';
77
import s from './SocialLinks.module.css';
88

99
interface ISocialLinksProps {

0 commit comments

Comments
 (0)