4.x update (#28)

Signed-off-by: Marin Petrunic <marin.petrunic@gmail.com>
web3 · Jun 28, 2023 · dbe3bca · dbe3bca
1 parent 3291bad
commit dbe3bca
Show file tree

Hide file tree

Showing 23 changed files with 151 additions and 419 deletions.
diff --git a/README.md b/README.md
@@ -9,4 +9,4 @@ This project is built on create-react-app so to run the development version:
 - install dependencies with `yarn`
 - run `yarn run start` and the website should open in your default browser
 
-For any questions, reach out on [Discord](http://discord.gg/n2U6x9c)
+For any questions, reach out on [Discord](https://discord.gg/yhHVtK5Wqt)
diff --git a/src/Components/Modules/Footer.tsx b/src/Components/Modules/Footer.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"
 import { Grid, Typography } from "@chainsafe/common-components"
 import {Trans} from "@lingui/macro";
+import { blogUrl, discordUrl, docsUrl } from "../../urls";
 
 const useStyles = makeStyles(({ palette, constants, breakpoints }: ITheme) => {
   return createStyles({
@@ -100,7 +101,7 @@ const Footer: React.FC = () => {
             </Grid>
             <Grid item className={classes.item}>
               <a
-                href="https://web3js.readthedocs.io/en/latest/"
+                href={docsUrl}
                 rel="noopener noreferrer"
                 target="_blank"
               >
@@ -129,7 +130,7 @@ const Footer: React.FC = () => {
             </Grid>
             <Grid item className={classes.item}>
               <a
-                href="http://discord.gg/n2U6x9c"
+                href={discordUrl}
                 rel="noopener noreferrer"
                 target="_blank"
               >
@@ -140,7 +141,7 @@ const Footer: React.FC = () => {
           </Grid>
           <Grid item className={classes.item}>
             <a
-              href="https://blog.chainsafe.io/tagged/ethereum"
+              href={blogUrl}
               target="_blank"
               rel="noopener noreferrer"
             >

diff --git a/src/Components/Modules/InternalNav.tsx b/src/Components/Modules/InternalNav.tsx
diff --git a/src/Components/Modules/MobileMenu.tsx b/src/Components/Modules/MobileMenu.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { motion } from 'framer-motion';
 import { MobileMenuItem } from './MobileMenuItem';
 import { createStyles, ITheme, makeStyles } from '@chainsafe/common-theme';
+import { discordUrl, docsUrl } from '../../urls';
 
 const variants = {
   open: {
@@ -19,28 +20,24 @@ export interface NavLink {
 }
 
 const navlinks: NavLink[] = [
+
   {
     id: 1,
-    name: '1.x Docs',
-    linkUrl: 'https://web3js.readthedocs.io/en/v1.7.5/',
-  },
-  {
-    id: 1,
-    name: '4.x Docs',
-    linkUrl: 'https://docs.web3js.org/',
+    name: 'Docs',
+    linkUrl: docsUrl,
   },
   {
-    id: 3,
+    id: 2,
     name: 'Join Discord',
-    linkUrl: 'http://discord.gg/n2U6x9c',
+    linkUrl: discordUrl,
   },
   {
-    id: 4,
+    id: 3,
     name: 'Blog',
     linkUrl: 'https://medium.com/chainsafe-systems',
   },
   {
-    id: 5,
+    id: 4,
     name: 'GitHub',
     linkUrl: 'https://github.com/chainsafe/web3.js',
   },

diff --git a/src/Components/Modules/MobileNav2.tsx b/src/Components/Modules/MobileNav2.tsx
@@ -6,6 +6,7 @@ import "./styles.css";
 import {
   createStyles, ITheme, makeStyles
 } from "@chainsafe/common-theme";
+import { discordUrl, docsUrl } from "../../urls";
 
 const sidebar = {
   open: (height = 1000) => ({
@@ -73,22 +74,22 @@ const navlinks: NavLink[] = [
   {
     id: 1,
     name: "Docs",
-    linkUrl: "https://web3js.readthedocs.io/en/v1.5.2/"
+    linkUrl: docsUrl
   },
   {
-    id: 3,
+    id: 2,
     name: "Join Discord",
-    linkUrl: "http://discord.gg/n2U6x9c"
+    linkUrl: discordUrl
   },
   {
-    id: 4,
+    id: 3,
     name: "Blog",
     linkUrl: "https://medium.com/chainsafe-systems"
   },
   {
-    id: 5,
+    id: 4,
     name: "GitHub",
-    linkUrl: "https://github.com/chainsafe/web3.js"
+    linkUrl: "https://github.com/web3/web3.js"
   },
 ]
 

diff --git a/src/Components/Modules/NavBar.tsx b/src/Components/Modules/NavBar.tsx
@@ -6,6 +6,7 @@ import { Grid, Link, Typography, useScrollToTop } from "@chainsafe/common-compon
 import { Trans } from "@lingui/macro"
 import { MobileNav } from "./MobileNav";
 import web3js from "../../assets/images/web3js.png"
+import { discordUrl, docsUrl } from "../../urls";
 
 const useStyles = makeStyles(({ breakpoints, palette, zIndex, constants }: ITheme) => {
   return createStyles({
@@ -119,17 +120,17 @@ const NavBar: React.FC = () => {
               <a
                 target="_blank"
                 rel="noopener noreferrer"
-                href="https://web3js.readthedocs.io/en/v1.7.5/"
+                href={docsUrl}
                 className={classes.navlink}
               >
-                <Trans>1.x Docs</Trans>
+                <Trans>Docs</Trans>
               </a>
             </Typography>
             <Typography variant="h5">
               <a
                 target="_blank"
                 rel="noopener noreferrer"
-                href="http://discord.gg/n2U6x9c"
+                href={discordUrl}
                 className={classes.navlink}
               >
                 <Trans>Community</Trans>
@@ -149,7 +150,7 @@ const NavBar: React.FC = () => {
               <a
                 target="_blank"
                 rel="noopener noreferrer"
-                href="https://github.com/chainsafe/web3.js"
+                href="https://github.com/web3/web3.js"
                 className={classes.navlink}
               >
                 <Trans>GitHub</Trans>

diff --git a/src/Components/Subpages/CodeBlocks.tsx b/src/Components/Subpages/CodeBlocks.tsx
@@ -34,7 +34,7 @@ const useStyles = makeStyles(({ constants, palette, breakpoints }: ITheme) => {
     desc: {
       fontSize: '22px',
       lineHeight: '28px',
-      maxWidth: '85%',
+      minHeight: '4rem',
       color: palette.additional['gray'][7],
     },
     demosWrapper: {
@@ -65,61 +65,61 @@ const CodeBlocks: React.FC = () => {
     <div className={classes.container}>
       <div className={classes.demosWrapper}>
         <div className={classes.demo}>
-          <CopyBlock
-            text={sample['interact']}
-            language='javascript'
-            theme={monokaiSublime}
-            wrapLines={true}
-            customStyle={codeCSS}
-          />
           <h1 className={classes.header}>Interact with smart contracts.</h1>
           <p className={classes.desc}>
             Examine recent transfer events by querying or subscribing to their
             events.
           </p>
-        </div>
-        <div className={classes.demo}>
           <CopyBlock
-            text={sample['listen']}
+            text={sample['interact']}
             language='javascript'
             theme={monokaiSublime}
             wrapLines={true}
             customStyle={codeCSS}
           />
+        </div>
+        <div className={classes.demo}>
           <h1 className={classes.header}>Listen for on-chain events.</h1>
           <p className={classes.desc}>
             Subscribe to changes on smart contracts and more.
           </p>
-        </div>
-        <div className={classes.demo}>
           <CopyBlock
-            text={sample['fetch']}
+            text={sample['listen']}
             language='javascript'
             theme={monokaiSublime}
             wrapLines={true}
             customStyle={codeCSS}
           />
+        </div>
+        <div className={classes.demo}>
           <h1 className={classes.header}>Fetch data from the blockchain.</h1>
           <p className={classes.desc}>
             Get an Ethereum account balance with a simple query to a node
             provider via JSON-RPC.
           </p>
-        </div>
-        <div className={classes.demo}>
           <CopyBlock
-            text={sample['simplify']}
+            text={sample['fetch']}
             language='javascript'
             theme={monokaiSublime}
             wrapLines={true}
             customStyle={codeCSS}
           />
+        </div>
+        <div className={classes.demo}>
           <h1 className={classes.header}>
             Simplify your code with built-in utilities.
           </h1>
           <p className={classes.desc}>
             Calculate the sha3 hash of your input data, convert your Ether
             values in wei, and more.
           </p>
+          <CopyBlock
+            text={sample['simplify']}
+            language='javascript'
+            theme={monokaiSublime}
+            wrapLines={true}
+            customStyle={codeCSS}
+          />
         </div>
       </div>
     </div>

diff --git a/src/Components/Subpages/CodeBlocks/CodeBlocks.tsx b/src/Components/Subpages/CodeBlocks/CodeBlocks.tsx