diff --git a/README.md b/README.md index d602f6e..7f77494 100644 --- 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 index 7e600f5..6514f67 100644 --- 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 = () => { @@ -129,7 +130,7 @@ const Footer: React.FC = () => { @@ -140,7 +141,7 @@ const Footer: React.FC = () => { diff --git a/src/Components/Modules/InternalNav.tsx b/src/Components/Modules/InternalNav.tsx deleted file mode 100644 index a1b5087..0000000 --- a/src/Components/Modules/InternalNav.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React from "react"; -import {ITheme, makeStyles, createStyles} from "@chainsafe/common-theme"; -import {Typography} from "@chainsafe/common-components"; - -const useStyles = makeStyles( - ({constants, palette, breakpoints}: ITheme) => { - return createStyles({ - container: { - paddingTop: "70px", - display: "flex", - justifyContent: "center", - background: "#292929", - height: "auto", - }, - linksContainer: { - display: "flex", - justifyContent: "center", - alignItems: "center", - [breakpoints.up("sm")]:{ - margin: "0 1rem", - padding: ".6rem .5rem", - }, - [breakpoints.down("sm")]: { - margin: "0", - padding: 0, - }, - height: "40px", - }, - navlink: { - fontSize: "18px", - color: palette.primary.main, - [breakpoints.up("sm")]:{ - margin: `0 ${constants.generalUnit * 2}px`, - }, - [breakpoints.down("sm")]: { - margin: `0 ${constants.generalUnit}px`, - fontSize: "14px", - }, - margin: "0 1rem", - textDecoration: "none", - "&:hover": { - filter: "brightness(0.5)", - } - }, - bold: { - fontWeight: 600, - } - }) - } -) - -const InternalNav: React.FC = () => { - const classes = useStyles() - return( -
-
- - 1.x docs - - -
-
- ) -} - -export default InternalNav; \ No newline at end of file diff --git a/src/Components/Modules/MobileMenu.tsx b/src/Components/Modules/MobileMenu.tsx index 0e73c68..9a9f214 100644 --- 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 index 0543585..f2de12c 100644 --- 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 index a063259..5d6e0a1 100644 --- 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 = () => { - 1.x Docs + Docs Community @@ -149,7 +150,7 @@ const NavBar: React.FC = () => { GitHub diff --git a/src/Components/Subpages/CodeBlocks.tsx b/src/Components/Subpages/CodeBlocks.tsx index 1d5773c..294f4ac 100644 --- 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,54 +65,47 @@ const CodeBlocks: React.FC = () => {
-

Interact with smart contracts.

Examine recent transfer events by querying or subscribing to their events.

-
-
+
+

Listen for on-chain events.

Subscribe to changes on smart contracts and more.

-
-
+
+

Fetch data from the blockchain.

Get an Ethereum account balance with a simple query to a node provider via JSON-RPC.

-
-
+
+

Simplify your code with built-in utilities.

@@ -120,6 +113,13 @@ const CodeBlocks: React.FC = () => { Calculate the sha3 hash of your input data, convert your Ether values in wei, and more.

+
diff --git a/src/Components/Subpages/CodeBlocks/CodeBlocks.tsx b/src/Components/Subpages/CodeBlocks/CodeBlocks.tsx deleted file mode 100644 index 192e271..0000000 --- a/src/Components/Subpages/CodeBlocks/CodeBlocks.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import React, { Fragment } from 'react'; -import './index.scss'; -import { CopyBlock, monokaiSublime } from 'react-code-blocks'; -import sample from './snippets'; - -export const CodeBlocks2: React.FC = () => { - const codeCSS = { - fontSize: '16px', - fontWeight: 600, - padding: '16px', - minHeight: '400px', - maxHeight: '400px', - overflowWrap: 'break-word', - overflowY: 'scroll', - borderRadius: '20px', - }; - return ( - -
-
-
- -

Interact with smart contracts.

-

- Examine recent transfer events by querying or subscribing to their - events. -

-
-
- -

Listen for on-chain envents.

-

- Subscribe to changes on smart contracts and more. -

-
-
- -

Fetch data from the blockchain.

-

- Get an Ethereum account balance with a simple query to a node - provider via JSON-RPC. -

-
-
- -

- Simplify your code with built-in utilities. -

-

- Calculate the sha3 hash of your input data, convert your Ether - values in wei, and more. -

-
-
-
- - ); -}; diff --git a/src/Components/Subpages/CodeBlocks/index.scss b/src/Components/Subpages/CodeBlocks/index.scss deleted file mode 100644 index 65ebe3d..0000000 --- a/src/Components/Subpages/CodeBlocks/index.scss +++ /dev/null @@ -1,59 +0,0 @@ -@import 'src/styles/breakpoints.scss'; -@import 'src/styles/colors.scss'; -@import 'src/styles/typography.scss'; - -.code-blocks { - @media #{$mq-xl} { - max-width: 90%; - margin: 0 auto; - left: 50%; - transform: translateX(-50%); - } - - @media #{$mq-md} { - flex-direction: row; - } - - @media #{$mq-sm} { - padding: 2rem 2rem 0 2rem; - } - - display: flex; - flex-direction: column; - - .demo-wrapper { - - @media #{$mq-md} { - flex-direction: row; - flex-wrap: wrap; - } - - display: flex; - flex-direction: column; - - .demo { - - @media #{$mq-md} { - max-width: 50%; - &:nth-of-type(1n) { - margin-right: 1rem; - } - } - - &--header { - @extend %body-lg; - color: $gray-300; - font-weight: 600; - } - - &--desc { - @extend %body; - color: $gray-700; - max-width: 85%; - - } - } - - } - -} \ No newline at end of file diff --git a/src/Components/Subpages/CodeBlocks/snippets.tsx b/src/Components/Subpages/CodeBlocks/snippets.tsx deleted file mode 100644 index ca14a87..0000000 --- a/src/Components/Subpages/CodeBlocks/snippets.tsx +++ /dev/null @@ -1,90 +0,0 @@ - -const sample = { - interact: `const Web3 = require("web3"); - // set a provider in the ropsten testnet using infura - const web3 = new Web3("https://ropsten.infura.io/v3/endpoint"); - - // interacting with the smart contract - const abi = [ - { - outputs: [ - { - internalType: "uint256", - name: "newValue", - type: "uint256", - }, - ], - name: "getValue", - stateMutability: "nonpayable", - type: "function", - }, - ] as const; - - const address = "0xe435e2a3cb5dc62c75d8bb2dba8470771405911d"; - - // create a new contract object, providing the ABI and address - const contract = new web3.eth.Contract(abi, address); - - // using contract.methods to get value - contract.methods - .getValue() - .call() - .then(console.log);`, - - listen: `const Web3 = require("web3"); - - // set a provider in the ropsten testnet using infura - const web3 = new Web3("https://ropsten.infura.io/v3/endpoint"); - - // interacting with the smart contract - const abi = [ - { - inputs: [ - { - internalType: "uint256", - name: "newValue", - type: "uint256", - }, - ], - name: "VALUE_CHANGE", - type: "event", - }, - ] as const; - - const address = "0xe435e2a3cb5dc62c75d8bb2dba8470771405911d"; - - // create a new contract object, providing the ABI and address - const contract = new web3.eth.Contract(abi, address); - -// using contract.methods to get value -const subscription = await contract.events.VALUE_CHANGE(); -subscription.on("data", console.log); // new value every time the event is emitted -`, -fetch: ` -const Web3 = require("web3") - -// set a provider such as using infura -const web3 = new Web3("https://mainnet.infura.io/v3/endpoint") - -// Get the balance of an Ethereum address -web3.eth.getBalance("0x1b3cB81E51011b549d78bf720b0d924ac763A7C2").then(console.log) // result: BigInt(560000000065000000000000) - -// Get the latest block number - web3.eth.getBlockNumber().then(console.log) // result: BigInt(13497160) -`, -simplify: ` -const Web3 = require("web3") - -// Create a sha3 hash of a string input -Web3.utils.sha3("example") // '0x6fd43e7cffc31bb581d7421c8698e29aa2bd8e7186a394b85299908b4eb9b175' - -// Convert any ether value into wei - Web3.utils.toWei('1', 'ether') // 1000000000000000000 - Web3.utils.toWei('1', 'gwei') // 1000000000 - -// Adds a padding on the left of a string, useful for adding paddings to HEX strings. -Web3.utils.padLeft('0x3456ff', 20); // '0x000000000000003456ff' -`, -} - -export default sample; diff --git a/src/Components/Subpages/FullTimeline.tsx b/src/Components/Subpages/FullTimeline.tsx index c87fabb..366629b 100644 --- a/src/Components/Subpages/FullTimeline.tsx +++ b/src/Components/Subpages/FullTimeline.tsx @@ -167,12 +167,6 @@ const FullTimeline: React.FC = () => {
Back to home
- {/*
-
Visit Docs/Ethereum API -
-
-
Follow Tutorial -
*/} diff --git a/src/Components/Subpages/Hero/Hero.tsx b/src/Components/Subpages/Hero/Hero.tsx index aac8b11..e2309a3 100644 --- a/src/Components/Subpages/Hero/Hero.tsx +++ b/src/Components/Subpages/Hero/Hero.tsx @@ -2,6 +2,7 @@ import React, { Fragment } from 'react'; import './index.scss'; import web3js from "../../../assets/images/web3js.png" import hero from "../../../assets/images/hero.png" +import { discordUrl, docsUrl } from '../../../urls'; export const Hero: React.FC = () => { @@ -19,7 +20,7 @@ export const Hero: React.FC = () => {
Download on npm @@ -29,7 +30,7 @@ export const Hero: React.FC = () => {
4.x Docs @@ -39,7 +40,7 @@ export const Hero: React.FC = () => {
Join Discord diff --git a/src/Components/Subpages/Hero2.tsx b/src/Components/Subpages/Hero2.tsx index cc275a5..1597d12 100644 --- a/src/Components/Subpages/Hero2.tsx +++ b/src/Components/Subpages/Hero2.tsx @@ -4,6 +4,7 @@ import clsx from "clsx"; import { Typography } from "@chainsafe/common-components"; import web3js from "../../assets/images/web3js.png" import hero from "../../assets/images/hero.png" +import { discordUrl, docsUrl, npmUrl } from "../../urls"; const useStyles = makeStyles( ({ constants, palette, breakpoints, typography }: ITheme) => { @@ -168,13 +169,13 @@ const Hero2: React.FC = () => {
-
Download on npm +
Download on npm
-
4.x Docs +
Docs
-
Join Discord +
Join Discord
diff --git a/src/Components/Subpages/Timeline.tsx b/src/Components/Subpages/Timeline.tsx index dc4688e..74bc00f 100644 --- a/src/Components/Subpages/Timeline.tsx +++ b/src/Components/Subpages/Timeline.tsx @@ -2,6 +2,7 @@ import React from "react"; import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"; import clsx from "clsx"; import { Link, Typography } from '@chainsafe/common-components'; +import { discordUrl } from "../../urls"; const useStyles = makeStyles( ({ constants, palette, breakpoints, typography }: ITheme) => { @@ -127,7 +128,7 @@ const Timeline: React.FC = () => { About the maintainers Join Discord @@ -138,28 +139,28 @@ const Timeline: React.FC = () => {
-
+
-

Web3.js Repository Migration Announcement

+

Announcing the Full Release of Web3.js V4
-

Alpha Release of Web3.js v4.x

+

Web3.js Repository Migration Announcement
-

The Future of web3.js

+

Alpha Release of Web3.js v4.x
diff --git a/src/Components/Subpages/UsedBy.tsx b/src/Components/Subpages/UsedBy.tsx index 152e108..ff80b62 100644 --- a/src/Components/Subpages/UsedBy.tsx +++ b/src/Components/Subpages/UsedBy.tsx @@ -3,13 +3,13 @@ import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"; import clsx from "clsx"; import { Typography } from "@chainsafe/common-components"; import truffle from "../../assets/images/truffle.png" -import yfi from "../../assets/images/yfi.png" +import remix from "../../assets/images/remix.png" import oz from "../../assets/images/oz.png" -import ens from "../../assets/images/ens.png" -import opensea from "../../assets/images/opensea.png" +import embark from "../../assets/images/embark.svg" +import dydx from "../../assets/images/dydx.svg" const useStyles = makeStyles( - ({ constants, palette, breakpoints, typography }: ITheme) => { + ({ palette, breakpoints }: ITheme) => { return createStyles({ container: { flexDirection: "column", @@ -72,6 +72,7 @@ const useStyles = makeStyles( logosContainer: { display: "grid", alignContent: "center", + alignItems: "center", gridTemplateColumns: "repeat(4, 1fr)", [breakpoints.up(1199)]: { gridTemplateColumns: "repeat(5, 1fr)", @@ -112,17 +113,17 @@ const UsedBy: React.FC = () => { Truffle Suite Logo - - Yearn Finance DeFi Yield Aggregator Logo - Open Zeppelin, Smart Contract Development Tools Logo - - Ethereum Name Service Logo + + Remix + + + Embark - - OpenSea NFT Platform Logo + + DyDx
diff --git a/src/Components/Subpages/snippets.tsx b/src/Components/Subpages/snippets.tsx index 95d85cf..26d7146 100644 --- a/src/Components/Subpages/snippets.tsx +++ b/src/Components/Subpages/snippets.tsx @@ -1,39 +1,42 @@ const sample = { - interact: `const Web3 = require("web3"); - // set a provider in the ropsten testnet using infura - const web3 = new Web3("https://ropsten.infura.io/v3/endpoint"); + interact: ` + import {Web3} from "web3"; - // interacting with the smart contract - const abi = [ + // set a provider in the sepolia testnet using node rpc url + const web3 = new Web3("https://rpc.sepolia.org"); + + // interacting with the smart contract + const abi = [ { - outputs: [ + outputs: [ { - internalType: "uint256", - name: "newValue", - type: "uint256", + internalType: "uint256", + name: "randomNo", + type: "uint256", }, - ], - name: "getValue", - stateMutability: "nonpayable", - type: "function", + ], + name: "generateRandomNumber", + stateMutability: "nonpayable", + type: "function", }, - ] as const; - - const address = "0xe435e2a3cb5dc62c75d8bb2dba8470771405911d"; - - // create a new contract object, providing the ABI and address - const contract = new web3.eth.Contract(abi, address); - - // using contract.methods to get value - contract.methods - .getValue() + ] as const; + + const address = "0xA36432F7B12f160F685717c4Ab12EB883a682810"; + + // create a new contract object, providing the ABI and address + const contract = new web3.eth.Contract(abi, address); + + // using contract.methods to get value + contract.methods + .generateRandomNumber() .call() .then(console.log);`, - listen: `const Web3 = require("web3"); + listen: ` + import {Web3} from "web3"; - // set a provider in the ropsten testnet using infura - const web3 = new Web3("https://ropsten.infura.io/v3/endpoint"); + // set a provider to the sepolia testner using node rpc url + const web3 = new Web3("wss://sepolia.infura.io/ws/v3/API_KEY"); // interacting with the smart contract const abi = [ @@ -41,48 +44,48 @@ const sample = { inputs: [ { internalType: "uint256", - name: "newValue", + name: "randomNo", type: "uint256", }, ], - name: "VALUE_CHANGE", + name: "RandomNo", type: "event", }, ] as const; - const address = "0xe435e2a3cb5dc62c75d8bb2dba8470771405911d"; + const address = "0xA36432F7B12f160F685717c4Ab12EB883a682810"; // create a new contract object, providing the ABI and address const contract = new web3.eth.Contract(abi, address); // using contract.methods to get value -const subscription = await contract.events.VALUE_CHANGE(); +const subscription = contract.events.RandomNo() subscription.on("data", console.log); // new value every time the event is emitted `, fetch: ` -const Web3 = require("web3") + import {Web3} from "web3" -// set a provider such as using infura -const web3 = new Web3("https://mainnet.infura.io/v3/endpoint") - -// Get the balance of an Ethereum address -web3.eth.getBalance("0x1b3cB81E51011b549d78bf720b0d924ac763A7C2").then(console.log) // result: BigInt(560000000065000000000000) - -// Get the latest block number - web3.eth.getBlockNumber().then(console.log) // result: BigInt(13497160) + // set a provider such as using infura + const web3 = new Web3("https://rpc.sepolia.org") + + // Get the balance of an Ethereum address + web3.eth.getBalance("0xF8561Dc64E577B0CF53dd3FC11329e80B1A8343e").then(console.log) // result: 1.000.000 eth + + // Get the latest block number + web3.eth.getBlockNumber().then(console.log) // result: BigInt(xxx) `, simplify: ` -const Web3 = require("web3") - -// Create a sha3 hash of a string input -Web3.utils.sha3("example") // '0x6fd43e7cffc31bb581d7421c8698e29aa2bd8e7186a394b85299908b4eb9b175' - -// Convert any ether value into wei - Web3.utils.toWei('1', 'ether') // 1000000000000000000 - Web3.utils.toWei('1', 'gwei') // 1000000000 + import {Web3} from "web3"; -// Adds a padding on the left of a string, useful for adding paddings to HEX strings. -Web3.utils.padLeft('0x3456ff', 20); // '0x000000000000003456ff' + // Create a sha3 hash of a string input + console.log(Web3.utils.sha3("example")) // '0x6fd43e7cffc31bb581d7421c8698e29aa2bd8e7186a394b85299908b4eb9b175' + + // Convert any ether value into wei + console.log(Web3.utils.toWei('1', 'ether')) // 1000000000000000000 + console.log(Web3.utils.toWei('1', 'gwei')) // 1000000000 + + // Adds a padding on the left of a string, useful for adding paddings to HEX strings. + console.log(Web3.utils.padLeft('0x3456ff', 20)); // '0x000000000000003456ff' `, }; diff --git a/src/assets/images/dydx.svg b/src/assets/images/dydx.svg new file mode 100644 index 0000000..bfe1e10 --- /dev/null +++ b/src/assets/images/dydx.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/embark.svg b/src/assets/images/embark.svg new file mode 100644 index 0000000..d9f7ca6 --- /dev/null +++ b/src/assets/images/embark.svg @@ -0,0 +1 @@ +Embark_Logo-01 \ No newline at end of file diff --git a/src/assets/images/ens.png b/src/assets/images/ens.png deleted file mode 100644 index 0df6d15..0000000 Binary files a/src/assets/images/ens.png and /dev/null differ diff --git a/src/assets/images/opensea.png b/src/assets/images/opensea.png deleted file mode 100644 index 2059617..0000000 Binary files a/src/assets/images/opensea.png and /dev/null differ diff --git a/src/assets/images/remix.png b/src/assets/images/remix.png new file mode 100644 index 0000000..1d6bcd0 Binary files /dev/null and b/src/assets/images/remix.png differ diff --git a/src/assets/images/yearn.png b/src/assets/images/yearn.png deleted file mode 100644 index bf61a67..0000000 Binary files a/src/assets/images/yearn.png and /dev/null differ diff --git a/src/urls.ts b/src/urls.ts new file mode 100644 index 0000000..a6e451a --- /dev/null +++ b/src/urls.ts @@ -0,0 +1,4 @@ +export const discordUrl = "https://discord.gg/yhHVtK5Wqt" +export const docsUrl = "https://docs.web3js.org/" +export const npmUrl = "https://www.npmjs.com/package/web3" +export const blogUrl = "https://blog.chainsafe.io/tagged/web3js" \ No newline at end of file