Merge pull request #8 from OnGridSystems/integrate-graphql

feat: add react router, create transactions page

Author: njajkes

app/package-lock.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/client": "^3.7.10",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.11.11",
@@ -11,6 +12,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "graphql": "^16.6.0",
     "ethers": "^5.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

app/package.json

@@ -36,7 +36,7 @@ function App() {
               />
             }
           />
-          <Route path='/transactions/:page' element={<Transactions />} />
+          <Route path='/transactions' element={<Transactions />} />
         </Routes>
       </Container>
       <Footer />

app/src/App.js

@@ -10,7 +10,7 @@ const Footer = () => {
       maxWidth='100vw'
       height='80px'
       bgcolor='white'>
-      <img src='img/Ongrid.svg' alt='ongrid'></img>
+      <img src='/img/Ongrid.svg' alt='ongrid'></img>
     </Box>
   );
 };

app/src/components/Footer.js

@@ -0,0 +1,14 @@
+import { Box } from '@mui/material';
+import { MuiButton } from './Web3Status';
+
+const LoadMore = ({ onLoadMore }) => {
+  return (
+    <Box mt={3} justifyContent='center' width='100%' display='flex'>
+      <MuiButton onClick={onLoadMore} size='small' sx={{ height: '24px' }}>
+        Load more
+      </MuiButton>
+    </Box>
+  );
+};
+
+export default LoadMore;

app/src/components/LoadMore.js

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { Box } from '@mui/material';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 
 const PageLink = styled(Link)`
   text-decoration: none;
@@ -13,15 +13,26 @@ const PageLink = styled(Link)`
   font-size: 16px;
   line-height: 19px;
   &:hover {
-    border-bottom: 4px solid #68A8FF;
+    border-bottom: 4px solid #68a8ff;
   }
 `;
 
 const PagesLink = () => {
+  const { pathname } = useLocation();
   return (
     <Box gap='40px' display='flex' height='100%' alignItems='center'>
-      <PageLink to='/'>Marketplace</PageLink>
-      <PageLink to='/transactions/1'>Transactions</PageLink>
+      <PageLink
+        to='/'
+        style={{ borderBottom: pathname === '/' ? ' 4px solid #68a8ff' : '' }}>
+        Marketplace
+      </PageLink>
+      <PageLink
+        to='/transactions'
+        style={{
+          borderBottom: pathname === 'transactions' ? ' 4px solid #68a8ff' : '',
+        }}>
+        Transactions
+      </PageLink>
     </Box>
   );
 };