Merge pull request #133 from multiversx/update-vite-cert

Update Vite Config
multiversx · Oct 23, 2024 · 558586a · 558586a
2 parents 0a9026c + a7de699
commit 558586a
Show file tree

Hide file tree

Showing 22 changed files with 544 additions and 699 deletions.
diff --git a/package.json b/package.json
@@ -100,6 +100,7 @@
     "@types/ua-parser-js": "0.7.39",
     "@typescript-eslint/eslint-plugin": "5.61.0",
     "@typescript-eslint/parser": "5.61.0",
+    "@vitejs/plugin-basic-ssl": "1.1.0",
     "@vitejs/plugin-react-swc": "3.3.2",
     "cross-env": "7.0.3",
     "cypress": "13.1.0",
@@ -116,8 +117,7 @@
     "run-script-os": "1.1.6",
     "sass": "1.62.1",
     "typescript": "5.1.6",
-    "vite": "4.4.12",
-    "vite-plugin-mkcert": "1.16.0",
+    "vite": "4.5.0",
     "vite-plugin-node-polyfills": "0.9.0",
     "vite-plugin-svgr": "3.2.0",
     "vite-tsconfig-paths": "4.2.0"

diff --git a/src/appConstants/index.ts b/src/appConstants/index.ts
@@ -1,6 +1,6 @@
 export * from './apiFields';
 
-export const BRAND_NAME = process.env.VITE_APP_BRAND_NAME ?? 'MultiversX';
+export const BRAND_NAME = import.meta.env.VITE_APP_BRAND_NAME ?? 'MultiversX';
 
 export const METACHAIN_SHARD_ID = 4294967295;
 export const MAIN_SHARD_ID = 4294967293;

diff --git a/src/components/ErrorElement/ErrorElement.tsx b/src/components/ErrorElement/ErrorElement.tsx
@@ -5,7 +5,7 @@ import { faTimes } from 'icons/regular';
 
 export const ErrorElement = () => {
   const { pathname } = useLocation();
-  const explorerVersion = process.env.VITE_APP_CACHE_BUST;
+  const explorerVersion = import.meta.env.VITE_APP_CACHE_BUST;
   const error = useRouteError();
   console.error(error);
 

diff --git a/src/config/helpers/getInternalLinks.ts b/src/config/helpers/getInternalLinks.ts
@@ -2,17 +2,20 @@ import { DEFAULT_HOSTNAME } from 'config';
 import { NetworkType, NetworkUrlType } from 'types/network.types';
 
 export const getInternalLinks = (networks: NetworkType[]): NetworkUrlType[] => {
-  if (
-    process.env.NODE_ENV === 'production' &&
-    process.env.VITE_APP_SHARE_PREFIX === 'internal-'
-  ) {
+  const isInternal =
+    import.meta.env.NODE_ENV === 'production' &&
+    import.meta.env.VITE_APP_SHARE_PREFIX === 'internal-';
+
+  if (isInternal) {
     const internalLinks = networks
       .filter(({ id, name, isCustom }) => id && name && !isCustom)
       .map(({ id = '', name = '' }) => {
         return {
           id,
           name,
-          url: `https://${id}.${process.env.VITE_APP_SHARE_PREFIX}${DEFAULT_HOSTNAME}`
+          url: `https://${id}.${
+            import.meta.env.VITE_APP_SHARE_PREFIX
+          }${DEFAULT_HOSTNAME}`
         };
       });
 

diff --git a/src/config/helpers/getInternalNetworks.ts b/src/config/helpers/getInternalNetworks.ts
@@ -1,11 +1,11 @@
 import { NetworkAdapterEnum, NetworkType } from 'types';
 
 export const getInternalNetworks = (): NetworkType[] => {
-  if (process.env.VITE_APP_INTERNAL_NETWORKS) {
+  const internalNetworks = import.meta.env.VITE_APP_INTERNAL_NETWORKS;
+
+  if (internalNetworks) {
     try {
-      const decodedNetworks = atob(
-        String(process.env.VITE_APP_INTERNAL_NETWORKS)
-      );
+      const decodedNetworks = atob(String(internalNetworks));
 
       const parsedNetworks = JSON.parse(decodedNetworks);
       if (parsedNetworks && parsedNetworks.length > 0) {

diff --git a/src/config/sharedConfig.ts b/src/config/sharedConfig.ts
@@ -27,12 +27,12 @@ export {
   GAS_PRICE
 };
 
-export const SHARE_PREFIX = process.env.VITE_APP_SHARE_PREFIX
-  ? process.env.VITE_APP_SHARE_PREFIX.replace('-', '')
-  : '';
+const ENV_PREFIX = import.meta.env.VITE_APP_SHARE_PREFIX;
+
+export const SHARE_PREFIX = ENV_PREFIX ? ENV_PREFIX.replace('-', '') : '';
 
 export const DEFAULT_HOSTNAME =
-  process.env.VITE_APP_DEFAULT_HOSTNAME ?? 'explorer.multiversx.com';
+  import.meta.env.VITE_APP_DEFAULT_HOSTNAME ?? 'explorer.multiversx.com';
 
 export const hasExtraNetworks = true;
 

diff --git a/src/helpers/cookie.ts b/src/helpers/cookie.ts
@@ -3,7 +3,9 @@ import { DEFAULT_HOSTNAME } from 'config/sharedConfig';
 
 type KeyType = typeof CUSTOM_NETWORK_ID;
 
-const domain = `domain=.${process.env.VITE_APP_SHARE_PREFIX}${DEFAULT_HOSTNAME}`;
+const domain = `domain=.${
+  import.meta.env.VITE_APP_SHARE_PREFIX
+}${DEFAULT_HOSTNAME}`;
 
 export const cookie = {
   saveToCookies: ({

diff --git a/src/helpers/downloadFile.ts b/src/helpers/downloadFile.ts
@@ -20,7 +20,7 @@ export const getFileMetadata = (type: DownloadFileType['fileType']) => {
 };
 
 export const downloadFile = ({ data, name, fileType }: DownloadFileType) => {
-  if (data && name && process.env.NODE_ENV !== 'test') {
+  if (data && name && import.meta.env.NODE_ENV !== 'test') {
     const type = getFileMetadata(fileType);
     const blob = new Blob([data], { type });
 

diff --git a/src/hooks/fetch/useFetchMarkers.ts b/src/hooks/fetch/useFetchMarkers.ts
@@ -17,7 +17,7 @@ const schema = object({
 
 export const useFetchMarkers = () => {
   const dispatch = useDispatch();
-  const markerUrl = process.env.VITE_APP_MARKERS_API_URL;
+  const markerUrl = import.meta.env.VITE_APP_MARKERS_API_URL;
   const { getMarkers } = useAdapter();
   const { isFetched } = useSelector(markersSelector);
 

diff --git a/src/hooks/useCheckVersion.ts b/src/hooks/useCheckVersion.ts
@@ -15,8 +15,8 @@ export const useCheckVersion = () => {
 
   const isMainnetExplorer =
     window.location.origin === 'https://explorer.multiversx.com';
-  const explorerVersion = process.env.VITE_APP_CACHE_BUST;
-  const explorerVersionUrl = process.env.VITE_APP_VERSION_URL;
+  const explorerVersion = import.meta.env.VITE_APP_CACHE_BUST;
+  const explorerVersionUrl = import.meta.env.VITE_APP_VERSION_URL;
 
   const withinInterval = moment()
     .subtract(refreshRate, 'ms')

diff --git a/src/hooks/useGetShardText.ts b/src/hooks/useGetShardText.ts
@@ -38,7 +38,7 @@ export const useGetShardText = () => {
       return 'All Shards';
     }
     if (Number(shard) === 0 && isSovereign) {
-      return name ?? process.env.VITE_APP_BRAND_NAME ?? 'Sovereign Chain';
+      return name ?? import.meta.env.VITE_APP_BRAND_NAME ?? 'Sovereign Chain';
     }
     return `Shard ${shard}`;
   };

diff --git a/src/layouts/Layout/components/Footer/Footer.tsx b/src/layouts/Layout/components/Footer/Footer.tsx
@@ -6,7 +6,7 @@ import { faHeart } from 'icons/solid';
 import { version } from '../../../../../package.json';
 
 export const Footer = () => {
-  const explorerVersion = process.env.VITE_APP_CACHE_BUST;
+  const explorerVersion = import.meta.env.VITE_APP_CACHE_BUST;
 
   return (
     <footer

diff --git a/src/layouts/Layout/components/Hero/Hero.tsx b/src/layouts/Layout/components/Hero/Hero.tsx
@@ -149,7 +149,7 @@ export const Hero = () => {
                   <TransactionsStatsCard />
                   <AccountsStatsCard />
                   <BlockHeightStatsCard />
-                  {isMainnet && process.env.VITE_APP_MARKERS_API_URL && (
+                  {isMainnet && import.meta.env.VITE_APP_MARKERS_API_URL && (
                     <ValidatorsStatusCard isSmall />
                   )}
                 </div>

diff --git a/src/pages/AccountDetails/AccountVerifiedContract/AccountVerifiedContract.tsx b/src/pages/AccountDetails/AccountVerifiedContract/AccountVerifiedContract.tsx
@@ -75,7 +75,7 @@ export const AccountVerifiedContract = ({
     return null;
   }
 
-  const walletConnectV2ProjectId = process.env.VITE_APP_WALLETCONNECT_ID;
+  const walletConnectV2ProjectId = import.meta.env.VITE_APP_WALLETCONNECT_ID;
 
   const customClassNames = {
     cardClassName: 'card card-black',

diff --git a/src/pages/PageNotFound/PageNotFound.tsx b/src/pages/PageNotFound/PageNotFound.tsx
@@ -5,7 +5,7 @@ import { faTimes } from 'icons/regular';
 
 export const PageNotFound = () => {
   const { pathname } = useLocation();
-  const explorerVersion = process.env.VITE_APP_CACHE_BUST;
+  const explorerVersion = import.meta.env.VITE_APP_CACHE_BUST;
 
   if (explorerVersion !== undefined) {
     analytics.sendEvent({

diff --git a/src/redux/slices/interface.ts b/src/redux/slices/interface.ts
@@ -17,7 +17,7 @@ export function getInitialInterfaceState(): InterfaceSliceType {
   // const media = window.matchMedia('(prefers-color-scheme: dark)')?.matches;
   // const systemTheme = media ? ThemesEnum.default : ThemesEnum.default;
 
-  // const defaultTheme = Boolean(process.env.VITE_APP_TESTNET)
+  // const defaultTheme = Boolean(import.meta.env.VITE_APP_TESTNET)
   //   ? ThemesEnum.testnet
   //   : systemTheme;
 

diff --git a/src/redux/slices/metaTags.ts b/src/redux/slices/metaTags.ts
@@ -10,7 +10,9 @@ const DEFAULT_TITLE = `${BRAND_NAME}${
 } Explorer`;
 const DEFAULT_DESCRIPTION =
   'A highly scalable, fast and secure blockchain platform for distributed apps, enterprise use cases and the new internet economy.';
-const DEFAULT_PREVIEW = `https://${process.env.VITE_APP_SHARE_PREFIX}${DEFAULT_HOSTNAME}/${process.env.VITE_APP_SHARE_PREFIX}share.jpg`;
+const DEFAULT_PREVIEW = `https://${
+  import.meta.env.VITE_APP_SHARE_PREFIX
+}${DEFAULT_HOSTNAME}/${import.meta.env.VITE_APP_SHARE_PREFIX}share.jpg`;
 
 export const getInitialMetaTagsState = (): MetaTagsType => {
   return {

diff --git a/src/widgets/HeroHome/HeroHome.tsx b/src/widgets/HeroHome/HeroHome.tsx
@@ -46,7 +46,7 @@ export const HeroHome = () => {
                 </div>
                 <TransactionsStatsCard />
                 <AccountsStatsCard />
-                {isMainnet && process.env.VITE_APP_MARKERS_API_URL && (
+                {isMainnet && import.meta.env.VITE_APP_MARKERS_API_URL && (
                   <ValidatorsStatusCard isSmall />
                 )}
               </div>

diff --git a/src/widgets/ValidatorsStatusCard/components/LargeCard.tsx b/src/widgets/ValidatorsStatusCard/components/LargeCard.tsx
@@ -28,15 +28,17 @@ export const LargeCard = ({
       </div>
       <div className='row flex-wrap-reverse'>
         <ShardList className='col-md-5' />
-        {process.env.NODE_ENV !== 'test' && markers.length > 0 && isMainnet && (
-          <>
-            <ValidatorMap
-              markers={markers}
-              className='col-md-7 position-relative'
-            />
-            <ContinentsRank continentsRank={continentsRank} />
-          </>
-        )}
+        {import.meta.env.NODE_ENV !== 'test' &&
+          markers.length > 0 &&
+          isMainnet && (
+            <>
+              <ValidatorMap
+                markers={markers}
+                className='col-md-7 position-relative'
+              />
+              <ContinentsRank continentsRank={continentsRank} />
+            </>
+          )}
         <div
           className={
             isMainnet

diff --git a/src/widgets/ValidatorsStatusCard/components/SmallCard.tsx b/src/widgets/ValidatorsStatusCard/components/SmallCard.tsx
@@ -19,7 +19,7 @@ export const SmallCard = ({
             {totalValidators ?? ELLIPSIS}
           </h2>
         </div>
-        {process.env.NODE_ENV !== 'test' && markers.length > 0 && (
+        {import.meta.env.NODE_ENV !== 'test' && markers.length > 0 && (
           <ValidatorMap markers={markers} />
         )}
       </div>

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,18 +1,16 @@
 import dns from 'dns';
 import path from 'path';
+import basicSsl from '@vitejs/plugin-basic-ssl';
 import react from '@vitejs/plugin-react-swc';
 import { defineConfig, loadEnv, splitVendorChunkPlugin } from 'vite';
-import mkcert from 'vite-plugin-mkcert';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import svgr from 'vite-plugin-svgr';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 // https://vitejs.dev/config/
 (dns as any).setDefaultResultOrder('verbatim');
 
-export default ({ mode }) => {
-  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
-
+export default () => {
   const shouldUseTSL =
     process.env.VITE_APP_USE_HTTPS?.toLowerCase() !== 'false';
 
@@ -25,16 +23,13 @@ export default ({ mode }) => {
       nodePolyfills({
         globals: { Buffer: true, global: true, process: true }
       }),
-      ...(shouldUseTSL ? [mkcert()] : [])
+      ...(shouldUseTSL ? [basicSsl()] : [])
     ],
     resolve: {
       alias: {
         '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
       }
     },
-    define: {
-      'process.env': process.env
-    },
     build: {
       outDir: 'build',
       cssMinify: true,