Feat/vite react (#1002)

* initial commit * initial commit * fix code * fix svg * ignore dist * fix http * chore: remove vitest * chore: udpate indexer url * chore: add build script * chore: update ourdir * chore: add cmd serve build file * fix: fixed error load build file * chore: remove redundant code * chore: remove redundant code * fix: import missed token * fix: import missed token * chore: update svg * fix: add bbase url for all relative url in document --------- Co-authored-by: Pham Tu <[email protected]>
oraidex · Oct 30, 2024 · ea563ec · ea563ec
1 parent d9b6a33
commit ea563ec
Show file tree

Hide file tree

Showing 154 changed files with 1,851 additions and 7,391 deletions.
diff --git a/.env.example b/.env.example
@@ -1,9 +1,9 @@
 PUBLIC_URL=https://app.oraidex.io
-REACT_APP_SITE_TITLE=OraiDEX
-REACT_APP_SITE_DESC="OraiDEX is an IBC and CosmWasm-based decentralized exchange platform with multichain interoperability, optimal speed, and a lot of liquidity options for users."
+VITE_APP_SITE_TITLE=OraiDEX
+VITE_APP_SITE_DESC="OraiDEX is an IBC and CosmWasm-based decentralized exchange platform with multichain interoperability, optimal speed, and a lot of liquidity options for users."
 
-REACT_APP_BASE_API_URL=https://api.oraidex.io
+VITE_APP_BASE_API_URL=https://api.oraidex.io
 
-REACT_APP_KADO_API_KEY=df0d2b3f-d829-4453-a4f6-1d6e8870e8f4
-REACT_APP_MIX_PANEL_ENVIRONMENT=acbafd21a85654933cbb0332c5a6f4f8
-REACT_APP_STRAPI_BASE_URL=https://nice-fireworks-d26703b63e.strapiapp.com
+VITE_APP_KADO_API_KEY=df0d2b3f-d829-4453-a4f6-1d6e8870e8f4
+VITE_APP_MIX_PANEL_ENVIRONMENT=acbafd21a85654933cbb0332c5a6f4f8
+VITE_APP_STRAPI_BASE_URL=https://nice-fireworks-d26703b63e.strapiapp.com
diff --git a/.github/workflows/legacy.yml b/.github/workflows/legacy.yml
@@ -38,7 +38,7 @@ jobs:
           cp .env.example .env
           yarn build
         env:
-          REACT_APP_SENTRY_ENVIRONMENT: staging
+          VITE_APP_SENTRY_ENVIRONMENT: staging
           CI: false
       - name: Deploy to firebase
         run: yarn firebase deploy --only hosting:oraiswap-legacy --token ${{ secrets.FIREBASE_TOKEN }} -m '${{ github.event.head_commit.message }}'
diff --git a/.github/workflows/mainnet.yml b/.github/workflows/mainnet.yml
@@ -61,7 +61,7 @@ jobs:
         run: yarn build
         env:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          REACT_APP_SENTRY_ENVIRONMENT: production
+          VITE_APP_SENTRY_ENVIRONMENT: production
           CI: false
       - name: Deploy to firebase
         run: yarn firebase deploy --only hosting:oraiswap --token ${{ secrets.FIREBASE_TOKEN }}

diff --git a/.github/workflows/pre-mainnet.yml b/.github/workflows/pre-mainnet.yml
@@ -38,7 +38,7 @@ jobs:
           cp .env.example .env
           yarn build
         env:
-          REACT_APP_SENTRY_ENVIRONMENT: staging
+          VITE_APP_SENTRY_ENVIRONMENT: staging
           CI: false
       - name: Deploy to firebase
         run: yarn firebase deploy --only hosting:oraiswap-pre-mainnet --token ${{ secrets.FIREBASE_TOKEN }} -m '${{ github.event.head_commit.message }}'
diff --git a/.github/workflows/staging-v2.yml b/.github/workflows/staging-v2.yml
@@ -38,7 +38,7 @@ jobs:
           cp .env.example .env
           yarn build
         env:
-          REACT_APP_SENTRY_ENVIRONMENT: staging
+          VITE_APP_SENTRY_ENVIRONMENT: staging
           CI: false
       - name: Deploy to firebase
         run: yarn firebase deploy --only hosting:oraiswap-staging-v1 --token ${{ secrets.FIREBASE_TOKEN }} -m '${{ github.event.head_commit.message }}'
diff --git a/.github/workflows/staging.yml b/.github/workflows/staging.yml
@@ -39,7 +39,7 @@ jobs:
           rm -rf node_modules/.cache
           yarn build
         env:
-          REACT_APP_SENTRY_ENVIRONMENT: staging
+          VITE_APP_SENTRY_ENVIRONMENT: staging
           CI: false
       - name: Deploy to firebase
         run: yarn firebase deploy --only hosting:oraiswap-staging --token ${{ secrets.FIREBASE_TOKEN }} -m '${{ github.event.head_commit.message }}'
diff --git a/.github/workflows/test-optimize-cicd.yml b/.github/workflows/test-optimize-cicd.yml
@@ -57,5 +57,5 @@ jobs:
         run: yarn build
         env:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          REACT_APP_SENTRY_ENVIRONMENT: production
+          VITE_APP_SENTRY_ENVIRONMENT: production
           CI: false
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,7 @@
 
 # vendor 
 vendor
+dist/
 public/vendor.*
 
 # misc

diff --git a/.husky/pre-push b/.husky/pre-push
@@ -1,5 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-yarn test:ci
-yarn ts-check
+
diff --git a/codegen.ts b/codegen.ts
@@ -1,7 +1,7 @@
 import { CodegenConfig } from '@graphql-codegen/cli';
 
 // https://subql-staging.orai.io/
-export const endpoint_gql = `https//staging-ammv3-indexer.oraidex.io/`;
+export const endpoint_gql = `https//ammv3-indexer.oraidex.io/`;
 const config: CodegenConfig = {
   schema: endpoint_gql,
   documents: ['src/**/*.tsx'],

diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
+    <link rel="icon" href="/favicon.svg" />
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-8T22XRLHXY"></script>
     <script>
@@ -14,31 +14,36 @@
       gtag('config', 'G-8T22XRLHXY');
     </script>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-    <title>%REACT_APP_SITE_TITLE%</title>
+    <title>%VITE_APP_SITE_TITLE%</title>
+
+    <base href="/" />
+
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="%REACT_APP_SITE_DESC%" />
+    <meta name="description" content="%VITE_APP_SITE_DESC%" />
 
     <meta name="keywords" content="OraiDEX, copyright, AI, Blockchain, Swap" />
 
     <meta property="og:type" content="website" />
-    <meta property="og:title" content="%REACT_APP_SITE_TITLE%" />
-    <meta property="og:description" content="%REACT_APP_SITE_DESC%" />
+    <meta property="og:title" content="%VITE_APP_SITE_TITLE%" />
+    <meta property="og:description" content="%VITE_APP_SITE_DESC%" />
     <meta property="og:image" content="%PUBLIC_URL%/thumbnail_oraidex_final.png" />
     <meta property="og:image:width" content="1024" />
     <meta property="og:image:height" content="576" />
     <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content="%REACT_APP_SITE_TITLE%" />
-    <meta name="twitter:description" content="%REACT_APP_SITE_DESC%" />
-
+    <meta name="twitter:title" content="%VITE_APP_SITE_TITLE%" />
+    <meta name="twitter:description" content="%VITE_APP_SITE_DESC%" />
     <meta name="twitter:image" content="%PUBLIC_URL%/thumbnail_oraidex_final.png" />
 
     <meta property="twitter:url" content="%PUBLIC_URL%" />
     <meta property="twitter:domain" content="%PUBLIC_URL%" />
+    <script>
+      var exports = {};
+    </script>
   </head>
   <body>
     <div id="oraiswap"></div>
     <script src="https://do.featurebase.app/js/sdk.js" id="featurebase-sdk"></script>
-    <script src="/vendor.%VENDOR_VERSION%.js"></script>
+    <script type="module" src="/src/index.tsx"></script>
     <script type="text/javascript">
       (function (c, l, a, r, i, t, y) {
         c[a] =

diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "repository": "https://github.com/oraichain/oraiswap-frontend.git",
   "author": "Oraichain Labs",
   "license": "Apache-2.0",
+  "type": "module",
   "dependencies": {
     "@babel/plugin-proposal-import-wasm-source": "^7.24.7",
     "@cosmjs/cosmwasm-stargate": "^0.31.0",
@@ -31,6 +32,7 @@
     "@tanstack/react-query": "^4.32.6",
     "@tharsis/proto": "^0.1.17",
     "@tippyjs/react": "^4.2.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "@visx/curve": "^2.17.0",
     "@visx/gradient": "^3.3.0",
     "@visx/responsive": "^2.17.0",
@@ -67,7 +69,9 @@
     "redux-persist": "^6.0.0",
     "serialize-error": "8.0.0",
     "tronweb": "^5.1.0",
-    "urql": "^4.1.0"
+    "urql": "^4.1.0",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^5.0.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
@@ -81,6 +85,7 @@
     "@oraichain/oraidex-contracts-build": "1.0.22",
     "@oraichain/oraiswap-v3": "0.1.22",
     "@sentry/webpack-plugin": "^2.10.3",
+    "@testing-library/jest-dom": "^6.5.0",
     "@types/classnames": "^2.2.10",
     "@types/jest": "^29.5.10",
     "@types/lodash": "^4.14.182",
@@ -89,36 +94,41 @@
     "@types/react-dom": "^18.0.11",
     "@types/react-modal": "^3.13.1",
     "@types/react-router-dom": "^5.3.3",
+    "@vitest/coverage-v8": "2.0.2",
     "crypto-browserify": "^3.12.0",
     "firebase-tools": "^11.30.0",
     "graphql": "^16.9.0",
     "https-browserify": "^1.0.0",
     "husky": "^8.0.3",
+    "jsdom": "^25.0.0",
     "node-polyfill-webpack-plugin": "^3.0.0",
     "patch-package": "^6.5.1",
     "process": "^0.11.10",
-    "react-app-rewired": "^2.2.1",
-    "react-scripts": "^5.0.1",
     "sass": "^1.65.1",
     "source-map-explorer": "^2.5.3",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "ts-jest": "^29.1.1",
     "typed-scss-modules": "^7.1.4",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "vite": "^5.4.10",
+    "vite-plugin-wasm": "^3.3.0",
+    "vitest": "2.0.2"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "start": "cross-env IMAGE_INLINE_SIZE_LIMIT=1000 GENERATE_SOURCEMAP=false react-app-rewired start",
-    "build": "cross-env IMAGE_INLINE_SIZE_LIMIT=1000 GENERATE_SOURCEMAP=false DISABLE_ESLINT_PLUGIN=true react-app-rewired build",
-    "test": "react-app-rewired test --watchAll",
-    "test:ci": "react-app-rewired test --watchAll=false",
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite serve",
     "ts-check": "tsc --noEmit",
     "postinstall": "patch-package",
     "prepare": "husky install",
     "ts-css": "typed-scss-modules src --watch --implementation sass -n all -e default",
     "clear-module-cache": "rm -rf node_modules/.cache/vendor & rm -rf public/vendor*",
-    "codegen": "graphql-codegen"
+    "codegen": "graphql-codegen",
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage --watch=false"
   },
   "eslintConfig": {
     "extends": "react-app"

diff --git a/patches/@cosmjs+tendermint-rpc+0.31.3.patch b/patches/@cosmjs+tendermint-rpc+0.31.3.patch
@@ -1,40 +1,3 @@
-diff --git a/node_modules/@cosmjs/tendermint-rpc/build/rpcclients/http.js b/node_modules/@cosmjs/tendermint-rpc/build/rpcclients/http.js
-index 8c72817..2b810d2 100644
---- a/node_modules/@cosmjs/tendermint-rpc/build/rpcclients/http.js
-+++ b/node_modules/@cosmjs/tendermint-rpc/build/rpcclients/http.js
-@@ -34,9 +34,11 @@ function isExperimental(nodeJsFunc) {
-  */
- // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
- async function http(method, url, headers, request) {
-+    const timeout = Number(process.env.HTTP_TIMEOUT || 30000);
-     if (typeof fetch === "function" && !isExperimental(fetch)) {
-         const settings = {
-             method: method,
-+            signal: AbortSignal.timeout(timeout),
-             body: request ? JSON.stringify(request) : undefined,
-             headers: {
-                 // eslint-disable-next-line @typescript-eslint/naming-convention
-@@ -50,7 +52,7 @@ async function http(method, url, headers, request) {
-     }
-     else {
-         return axios_1.default
--            .request({ url: url, method: method, data: request, headers: headers })
-+            .request({ url: url, method: method, data: request, headers: headers, timeout: timeout })
-             .then((res) => res.data);
-     }
- }
-diff --git a/node_modules/@cosmjs/tendermint-rpc/build/tendermint34/adaptor/responses.js b/node_modules/@cosmjs/tendermint-rpc/build/tendermint34/adaptor/responses.js
-index a426641..9f33204 100644
---- a/node_modules/@cosmjs/tendermint-rpc/build/tendermint34/adaptor/responses.js
-+++ b/node_modules/@cosmjs/tendermint-rpc/build/tendermint34/adaptor/responses.js
-@@ -320,6 +320,7 @@ function decodeTxProof(data) {
- }
- function decodeTxResponse(data) {
-     return {
-+        ...data,
-         tx: (0, encoding_1.fromBase64)((0, encodings_1.assertNotEmpty)(data.tx)),
-         result: decodeTxData((0, encodings_1.assertObject)(data.tx_result)),
-         height: (0, inthelpers_1.apiToSmallInt)((0, encodings_1.assertNotEmpty)(data.height)),
 diff --git a/node_modules/@cosmjs/tendermint-rpc/build/tendermint34/tendermint34client.js b/node_modules/@cosmjs/tendermint-rpc/build/tendermint34/tendermint34client.js
 index f822f39..8889b81 100644
 --- a/node_modules/@cosmjs/tendermint-rpc/build/tendermint34/tendermint34client.js
@@ -60,4 +23,4 @@ index 8f78cc6..a307de1 100644
 +        // const _version = await this.detectVersion(rpcClient);
          return Tendermint37Client.create(rpcClient);
      }
-     /**
+     /**
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,7 @@ @@
     # vendor
     vendor
+    dist/
     public/vendor.*
     # misc
@@ Expand Down @@