Merge branch 'add-lazy-load' of github.com:lanchana/bitcore

bitpay · Dec 31, 2024 · 3961d55 · 3961d55
2 parents f1efdbe + fcfe6e4
commit 3961d55
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 57 deletions.
diff --git a/packages/insight/package-lock.json b/packages/insight/package-lock.json
diff --git a/packages/insight/package.json b/packages/insight/package.json
@@ -27,7 +27,7 @@
   "dependencies": {
     "@reduxjs/toolkit": "2.3.0",
     "assert": "2.1.0",
-    "axios": "0.21.1",
+    "axios": "1.7.9",
     "bitcore-lib": "^10.0.23",
     "bitcore-lib-cash": "^10.0.23",
     "bitcore-lib-doge": "^10.0.21",
@@ -40,6 +40,7 @@
     "process": "0.11.10",
     "qrcode.react": "3.0.1",
     "react": "18.1.0",
+    "react-app-rewired": "2.2.1",
     "react-copy-to-clipboard": "5.1.0",
     "react-dom": "18.1.0",
     "react-infinite-scroll-component": "6.1.0",
@@ -55,10 +56,10 @@
     "swr": "1.3.0",
     "url": "0.11.4",
     "vm-browserify": "1.1.2",
-    "web-vitals": "2.1.4",
-    "react-app-rewired": "2.2.1"
+    "web-vitals": "2.1.4"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "13.0.1",
     "@testing-library/user-event": "13.5.0",

diff --git a/packages/insight/src/App.tsx b/packages/insight/src/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {BrowserRouter} from 'react-router-dom';
 import {SWRConfig} from 'swr';
 import {fetcher} from './api/api';
@@ -13,7 +13,10 @@ import nProgress from 'nprogress';
 function App() {
   const theme = useAppSelector(({APP}) => APP.theme);
   const colorScheme = theme === 'dark' ? BitPayDarkTheme : BitPayLightTheme;
-  nProgress.configure({showSpinner: false});
+
+  useEffect(() => {
+    nProgress.configure({showSpinner: false});
+  }, []);
 
   return (
     <ThemeProvider theme={colorScheme}>

diff --git a/packages/insight/src/Routing.tsx b/packages/insight/src/Routing.tsx
@@ -0,0 +1,27 @@
+import React, {lazy, Suspense} from 'react';
+import {Navigate, Route, Routes} from 'react-router-dom';
+import Home from './pages';
+const Blocks = lazy(() => import('./pages/blocks'));
+const Block = lazy(() => import('./pages/block'));
+const TransactionHash = lazy(() => import('./pages/transaction'));
+const Address = lazy(() => import('./pages/address'));
+const Search = lazy(() => import('./pages/search'));
+
+function Routing() {
+  return (
+    <Suspense>
+      <Routes>
+        <Route path='/' element={<Home />} />
+        <Route path='/:currency/:network/blocks' element={<Blocks />} />
+        <Route path='/:currency/:network/block/:block' element={<Block />} />
+        <Route path='/:currency/:network/tx/:tx' element={<TransactionHash />} />
+        <Route path='/:currency/:network/address/:address' element={<Address />} />
+        <Route path='/search' element={<Search />} />
+        {/* 404 redirect to home page */}
+        <Route path='*' element={<Navigate to='/' />} />
+      </Routes>
+    </Suspense>
+  );
+}
+
+export default Routing;
diff --git a/packages/insight/src/components/body.tsx b/packages/insight/src/components/body.tsx
@@ -1,26 +1,11 @@
 import React from 'react';
-import {Routes, Route, Navigate} from 'react-router-dom';
 import Layout from './layout';
-import Home from '../pages';
-import Blocks from '../pages/blocks';
-import Block from '../pages/block';
-import TransactionHash from '../pages/transaction';
-import Address from '../pages/address';
-import Search from '../pages/search';
+import Routing from '../Routing';
 
 function Body() {
   return (
     <Layout>
-      <Routes>
-        <Route path='/' element={<Home />} />
-        <Route path='/:currency/:network/blocks' element={<Blocks />} />
-        <Route path='/:currency/:network/block/:block' element={<Block />} />
-        <Route path='/:currency/:network/tx/:tx' element={<TransactionHash />} />
-        <Route path='/:currency/:network/address/:address' element={<Address />} />
-        <Route path='/search' element={<Search />} />
-        {/* 404 redirect to home page */}
-        <Route path='*' element={<Navigate to='/' />} />
-      </Routes>
+      <Routing />
     </Layout>
   );
 }

diff --git a/packages/insight/src/components/copy-text.tsx b/packages/insight/src/components/copy-text.tsx
@@ -8,6 +8,17 @@ import TickSvg from '../assets/images/tick.svg';
 const CopyImg = styled(motion.div)`
   margin: auto 0.25rem;
   display: inline-block;
+  width: 12px;
+  height: 12px;
+  position: relative;
+`;
+
+const IconImage = styled(motion.img)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 `;
 
 interface CopyTextProps {
@@ -49,25 +60,33 @@ const CopyText: FC<CopyTextProps> = ({text}) => {
   };
 
   return (
-    <AnimatePresence>
-      {copied ? (
-        <CopyImg key='tick' variants={copyAnime} exit='exit' initial='initial' animate='animate'>
-          <img src={TickSvg} width={12} height={12} alt='tick' />
-        </CopyImg>
-      ) : (
-        <CopyToClipboard text={text} onCopy={() => onClickCopy()}>
-          <CopyImg
-            key='copy'
+    <CopyImg>
+      <AnimatePresence mode={'wait'}>
+        {copied ? (
+          <IconImage
+            key='tick'
+            src={TickSvg}
+            alt='tick'
             variants={copyAnime}
-            whileHover='whileHover'
-            exit='exit'
             initial='initial'
-            animate='animate'>
-            <img src={CopySvg} width={12} height={12} alt='copy' />
-          </CopyImg>
-        </CopyToClipboard>
-      )}
-    </AnimatePresence>
+            animate='animate'
+            exit='exit'
+          />
+        ) : (
+          <CopyToClipboard text={text} onCopy={() => onClickCopy()}>
+            <IconImage
+              key='copy'
+              src={CopySvg}
+              alt='copy'
+              variants={copyAnime}
+              initial='initial'
+              animate='animate'
+              whileHover='whileHover'
+            />
+          </CopyToClipboard>
+        )}
+      </AnimatePresence>
+    </CopyImg>
   );
 };
 

diff --git a/packages/insight/src/index.tsx b/packages/insight/src/index.tsx
@@ -2,13 +2,19 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import {Provider} from 'react-redux';
-// import reportWebVitals from './reportWebVitals';
 import {store} from './store';
 
-const initialURL = window.location.href;
-if (initialURL.includes('/#/')) {
-  window.location.href = initialURL.replace('/#/', '/');
-} else {
+// Handle redirection for hash-based URLs
+const handleURLRedirection = () => {
+  const initialURL = window.location.href;
+  if (initialURL.includes('/#/')) {
+    window.location.href = initialURL.replace('/#/', '/');
+    return true;
+  }
+  return false;
+};
+
+const initializeApp = () => {
   const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
   root.render(
     <React.StrictMode>
@@ -17,9 +23,14 @@ if (initialURL.includes('/#/')) {
       </Provider>
     </React.StrictMode>,
   );
+};
 
-  // If you want to start measuring performance in your app, pass a function
-  // to log results (for example: reportWebVitals(console.log))
-  // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-  // reportWebVitals();
+if (!handleURLRedirection()) {
+  // Initialize the app only if redirection is not needed
+  initializeApp();
 }
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+// reportWebVitals();
diff --git a/packages/insight/src/pages/transaction.tsx b/packages/insight/src/pages/transaction.tsx
@@ -195,7 +195,7 @@ const TransactionHash: React.FC = () => {
                       message={`This transaction was replaced by another transaction that ${
                         transaction.chain === 'ETH'
                           ? 'used the same nonce'
-                          : "spent some of it's inputs"
+                          : 'spent some of it\'s inputs'
                       }.`}
                       type={'error'}
                     />