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

Commit

Permalink
refactor: replace bundler from react-script to Vite
Browse files Browse the repository at this point in the history
  • Loading branch information
therealemjy committed Jun 18, 2024
1 parent a2faba6 commit 9317a18
Show file tree
Hide file tree
Showing 22 changed files with 4,124 additions and 6,187 deletions.
8 changes: 1 addition & 7 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,7 @@ module.exports = {
'import/no-extraneous-dependencies': [
'error',
{
devDependencies: [
'**/*.stories.tsx',
'**/*.stories.ts',
'src/stories/**',
'**/*.spec.tsx',
'src/setupTests.ts',
],
devDependencies: true,
},
],
// Custom
Expand Down
8 changes: 4 additions & 4 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.env
.idea

npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Generated subgraph (GraphQL) client
src/subgraph/client
52 changes: 27 additions & 25 deletions public/index.html → index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="https://venus.io/favicon.ico" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#3A78FF" />
<meta
Expand All @@ -13,40 +13,40 @@
rel="icon"
type="image/png"
sizes="192x192"
href="https://venus.io/android-chrome-192x192.png"
href="/android-chrome-192x192.png"
/>
<link rel="icon" type="image/png" sizes="32x32" href="https://venus.io/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="https://venus.io/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<meta name="msapplication-square70x70logo" content="https://venus.io/70x70.png" />
<meta name="msapplication-square144x144logo" content="https://venus.io/144x144.png" />
<meta name="msapplication-square150x150logo" content="https://venus.io/150x150.png" />
<meta name="msapplication-square310x310logo" content="https://venus.io/310x310.png" />
<meta name="msapplication-wide310x150logo" content="https://venus.io/310x150.png" />
<meta name="msapplication-TileImage" content="https://venus.io/144x144.png" />
<meta name="msapplication-square70x70logo" content="/70x70.png" />
<meta name="msapplication-square144x144logo" content="/144x144.png" />
<meta name="msapplication-square150x150logo" content="/150x150.png" />
<meta name="msapplication-square310x310logo" content="/310x310.png" />
<meta name="msapplication-wide310x150logo" content="/310x150.png" />
<meta name="msapplication-TileImage" content="/144x144.png" />
<meta name="msapplication-TileColor" content="#3A78FF" />

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

<meta property="og:title" content="Venus Protocol" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://venus.io/" />
<meta property="og:image" content="https://venus.io/share.png" />
<meta property="og:image" content="/share.png" />
<meta
property="og:description"
content="Venus is a decentralized finance (DeFi) algorithmic money market protocol on BNB Chain."
Expand All @@ -94,5 +94,7 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->

<script type="module" src="/src/index.tsx"></script>
</body>
</html>
44 changes: 26 additions & 18 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,29 @@
"homepage": "https://venus.io/",
"version": "0.1.0",
"private": true,
"type": "module",
"dependencies": {
"@tanstack/react-query": "^5.40.0",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.4.1",
"@types/node": "^16.7.13",
"@types/react": "^17.0.40",
"@types/react-dom": "^17.0.13",
"axios": "^0.26.1",
"classnames": "^2.3.1",
"normalize.css": "^8.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-particles": "2.9.3",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.0",
"react-scrolllock": "^5.0.1",
"tsparticles": "2.9.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-app-rewired start",
"predeploy": "npm run build",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject",
"start": "vite",
"build": "vite build",
"preview": "vite preview",
"lint:fix": "yarn lint --fix && yarn pretty --write",
"lint": "eslint .",
"lint": "yarn run eslint .",
"pretty": "yarn prettier \"src/**/*.{js,jsx,ts,tsx,html,json,md}\" public/**/*.html --check"
},
"browserslist": {
Expand All @@ -46,12 +41,22 @@
]
},
"devDependencies": {
"@types/jest": "^29.5.12",
"@types/node": "^20.12.12",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.11.0",
"@typescript-eslint/parser": "^7.11.0",
"@vitejs/plugin-react": "^4.3.1",
"autoprefixer": "^9.0.0",
"eslint": "^8",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^16.1.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-config-airbnb-typescript": "^18.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react": "^7.34.2",
"husky": "^7.0.4",
"lint-staged": "^12.3.5",
"postcss": "^8.4.8",
Expand All @@ -64,7 +69,10 @@
"react-app-rewire-postcss": "^3.0.2",
"react-app-rewired": "^2.2.1",
"react-snap": "^1.23.0",
"typescript": "^4.6.2"
"typescript": "^5.4.5",
"vite": "^5.3.1",
"vite-plugin-svgr": "^4.2.0",
"vite-tsconfig-paths": "^4.3.2"
},
"resolutions": {
"postcss": "^8.4.8"
Expand Down
2 changes: 1 addition & 1 deletion src/api/constants.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export const getTokenPublicUrl = (filePath: string) =>
`${process.env.PUBLIC_URL}/coins/${filePath}`;
new URL(`/coins/${filePath}`, import.meta.url).href;

export const tokenIconUrls = {
UNI: getTokenPublicUrl('uni.svg'),
Expand Down
19 changes: 12 additions & 7 deletions src/components/App.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useEffect } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import MainContent from './MainContent/MainContent';
import Footer from './Footer/Footer';
import s from './App.module.css';
Expand All @@ -13,6 +14,8 @@ function Main() {
);
}

const queryClient = new QueryClient();

function App() {
useEffect(() => {
if (window.location.pathname.startsWith('/discord')) {
Expand All @@ -21,13 +24,15 @@ function App() {
}, [window.location.pathname]);

return (
<BrowserRouter>
<Routes>
{['/', '/discord'].map(path => (
<Route path={path} element={<Main />} key={path} />
))}
</Routes>
</BrowserRouter>
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<Routes>
{['/', '/discord'].map(path => (
<Route path={path} element={<Main />} key={path} />
))}
</Routes>
</BrowserRouter>
</QueryClientProvider>
);
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/Banner/Banner.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import cn from 'classnames';
import s from './Banner.module.css';
import { ReactComponent as Close } from './assets/close.svg';
import Close from './assets/close.svg?react';

interface IBannerProps {
className?: string;
Expand Down
6 changes: 3 additions & 3 deletions src/components/Benefits/Benefits.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import cn from 'classnames';
import { ReactComponent as Octahedron } from './assets/1.svg';
import { ReactComponent as Shield } from './assets/2.svg';
import { ReactComponent as Dots } from './assets/3.svg';
import Octahedron from './assets/1.svg?react';
import Shield from './assets/2.svg?react';
import Dots from './assets/3.svg?react';
import Container from '../Container/Container';
import s from './Benefits.module.css';

Expand Down
4 changes: 2 additions & 2 deletions src/components/Footer/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import React from 'react';
import cn from 'classnames';
import Container from '../Container/Container';
import NavigationLinks from '../NavigationLinks/NavigationLinks';
import { ReactComponent as Logo } from '../Header/assets/logo.svg';
import { ReactComponent as LogoMobile } from './assets/logoSmall.svg';
import Logo from '../Header/assets/logo.svg?react';
import LogoMobile from './assets/logoSmall.svg?react';
import SocialLinks from './SocialLinks';
import s from './Footer.module.css';
import Link from '../Link/Link';
Expand Down
8 changes: 4 additions & 4 deletions src/components/Footer/SocialLinks.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import cn from 'classnames';
import { ReactComponent as IconTelegram } from './assets/telegram.svg';
import { ReactComponent as IconDiscord } from './assets/discord.svg';
import { ReactComponent as IconTwitter } from './assets/twitter.svg';
import { ReactComponent as IconGithub } from './assets/github.svg';
import IconTelegram from './assets/telegram.svg?react';
import IconDiscord from './assets/discord.svg?react';
import IconTwitter from './assets/twitter.svg?react';
import IconGithub from './assets/github.svg?react';
import s from './SocialLinks.module.css';

interface ISocialLinksProps {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Header/Header.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
import ScrollLock from 'react-scrolllock';
import cn from 'classnames';
import { ReactComponent as Logo } from './assets/logo.svg';
import Logo from './assets/logo.svg?react';
import NavigationLinks from '../NavigationLinks/NavigationLinks';
import MenuMobile from './MenuMobile';
import LinkLaunchApp from '../Link/LinkLaunchApp';
Expand Down
2 changes: 1 addition & 1 deletion src/components/MainContent/Intro.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import Container from '../Container/Container';
import { ReactComponent as IconArrow } from './assets/arrow.svg';
import IconArrow from './assets/arrow.svg?react';
import LinkLaunchApp from '../Link/LinkLaunchApp';
import Link from '../Link/Link';
import s from './Intro.module.css';
Expand Down
2 changes: 1 addition & 1 deletion src/components/Safety/Auditor.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import cn from 'classnames';
import s from './Safety.module.css';
import { ReactComponent as Arrow } from './assets/arrow.svg';
import Arrow from './assets/arrow.svg?react';

interface ISafetyProps {
className?: string;
Expand Down
2 changes: 1 addition & 1 deletion src/components/Safety/SafetyScore.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import cn from 'classnames';
import s from './Safety.module.css';
import { ReactComponent as Score90 } from './assets/score90.svg';
import Score90 from './assets/score90.svg?react';

interface ISafetyProps {
className?: string;
Expand Down
30 changes: 15 additions & 15 deletions src/components/Safety/index.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import React from 'react';
import cn from 'classnames';
import Container from '../Container/Container';
import { ReactComponent as PessimisticLogo } from './assets/pessimisticLogo.svg';
import { ReactComponent as PessimisticLogoGray } from './assets/pessimisticLogoGray.svg';
import { ReactComponent as CantinaLogo } from './assets/cantinaLogo.svg';
import { ReactComponent as CantinaLogoGray } from './assets/cantinaLogoGray.svg';
import { ReactComponent as PeckShieldLogo } from './assets/peckShieldLogo.svg';
import { ReactComponent as PeckShieldLogoGray } from './assets/peckShieldLogoGray.svg';
import { ReactComponent as CertikLogo } from './assets/certikLogo.svg';
import { ReactComponent as CertikLogoGray } from './assets/certikLogoGray.svg';
import { ReactComponent as OpenZeppelinLogo } from './assets/openZeppelinLogo.svg';
import { ReactComponent as OpenZeppelinLogoGray } from './assets/openZeppelinLogoGray.svg';
import { ReactComponent as QuantstampLogo } from './assets/quantstampLogo.svg';
import { ReactComponent as QuantstampLogoGray } from './assets/quantstampLogoGray.svg';
import { ReactComponent as Code4renaLogo } from './assets/code4renaLogo.svg';
import { ReactComponent as Code4renaLogoGray } from './assets/code4renaLogoGray.svg';
import PessimisticLogo from './assets/pessimisticLogo.svg?react';
import PessimisticLogoGray from './assets/pessimisticLogoGray.svg?react';
import CantinaLogo from './assets/cantinaLogo.svg?react';
import CantinaLogoGray from './assets/cantinaLogoGray.svg?react';
import PeckShieldLogo from './assets/peckShieldLogo.svg?react';
import PeckShieldLogoGray from './assets/peckShieldLogoGray.svg?react';
import CertikLogo from './assets/certikLogo.svg?react';
import CertikLogoGray from './assets/certikLogoGray.svg?react';
import OpenZeppelinLogo from './assets/openZeppelinLogo.svg?react';
import OpenZeppelinLogoGray from './assets/openZeppelinLogoGray.svg?react';
import QuantstampLogo from './assets/quantstampLogo.svg?react';
import QuantstampLogoGray from './assets/quantstampLogoGray.svg?react';
import Code4renaLogo from './assets/code4renaLogo.svg?react';
import Code4renaLogoGray from './assets/code4renaLogoGray.svg?react';
import s from './Safety.module.css';
import SafetyScore from './SafetyScore';
import Auditor from './Auditor';
Expand Down Expand Up @@ -80,7 +80,7 @@ const Safety: React.FC<ISafetyProps> = ({ className }) => (
<SafetyScore className={s.safetyScoreMobile} />
<div className={s.logos}>
{auditors.map(a => (
<Auditor auditor={a} />
<Auditor key={`${a.href}-${a.audits}`} auditor={a} />
))}
<OtherAuditors />
</div>
Expand Down
Loading

0 comments on commit 9317a18

Please sign in to comment.