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 25d1dfb
Show file tree
Hide file tree
Showing 22 changed files with 4,196 additions and 6,158 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
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,6 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Generated subgraph (GraphQL) client
src/subgraph/client
100 changes: 100 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#3A78FF" />
<meta
name="description"
content="Venus is a decentralized finance (DeFi) algorithmic money market protocol on BNB Chain."
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/android-chrome-192x192.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="/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="/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="/manifest.json" />
<!--
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", "/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`.
-->
<title>Venus Protocol</title>
<meta
name="keywords"
content="venus, venus protocol, defi, borrow, lend, crypto, blockchain, bsc, bnb, bnb chain, decentralized finance"
/>

<meta name="format-detection" content="telephone=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="twitter:site" content="@venusprotocol" />
<meta name="twitter:creator" content="@venusprotocol" />
<meta name="twitter:title" content="Venus Protocol" />
<meta
name="twitter:description"
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="/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="/share.png" />
<meta
property="og:description"
content="Venus is a decentralized finance (DeFi) algorithmic money market protocol on BNB Chain."
/>

<link href="https://venus.io/" rel="canonical" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
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 25d1dfb

Please sign in to comment.