6 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/Button.tsx:
--------------------------------------------------------------------------------
1 | type Props = {
2 | type: 'primary' | 'secondary' | 'link' | 'frosted' | 'pluginDownload';
3 | children: any;
4 | href?: string;
5 | className?: string;
6 | };
7 |
8 | export default function Button({ type, children, href, className }: Props) {
9 | let styles;
10 | if (type === 'primary') {
11 | styles = `transition-all rounded-full border border-brand-400 text-brand-400 px-8 py-1 text-lg font-medium shadow-sm hover:brightness-[80%] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-200`;
12 |
13 | } else if (type === 'secondary') {
14 | styles = `transition-all rounded-full border-[1px] border-gray-700 text-gray-300 px-8 py-1 text-lg font-medium shadow-sm hover:brightness-[80%] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-200`;
15 | } else if (type === 'frosted') {
16 | styles = `transition-all rounded-xl bg-gray-100/20 px-3.5 py-2.5 text-md font-medium text-white shadow-sm hover:brightness-[90%] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-200`;
17 | } else if (type === 'pluginDownload') {
18 | styles = `transition-all rounded-full border-[1px] border-zinc-700 text-gray-300 px-3 py-1 text-md font-medium shadow-sm hover:brightness-[80%] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-200`
19 | }
20 | else {
21 | styles = `transition-all text-md font-medium leading-6 hover:text-primary-100 `;
22 | }
23 |
24 | return (
25 |
30 | {children}
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @next/next/no-img-element */
2 | import { discordUrl, blogUrl, docsUrl, githubUrl } from "./urls";
3 |
4 |
5 | export const navigation = {
6 | 'resources': [
7 | {
8 | 'name': 'Plugins',
9 | 'url': '/plugins',
10 | },
11 | {
12 | 'name': 'Documentation',
13 | 'url': docsUrl,
14 | },
15 |
16 | ],
17 | 'community': [
18 | {
19 | 'name': 'Github',
20 | 'url': githubUrl,
21 | },
22 | {
23 | 'name': 'Discord',
24 | 'url': discordUrl,
25 | },
26 | {
27 | 'name': 'Blog',
28 | 'url': blogUrl,
29 | },
30 | ],
31 | 'support': [
32 | {
33 | 'name': 'Report a Plugin',
34 | 'url': '',
35 | },
36 | ],
37 | }
38 |
39 | export default function Footer() {
40 |
41 | const currentYear = new Date().getFullYear();
42 |
43 | return (
44 |
111 | );
112 | }
113 |
--------------------------------------------------------------------------------
/src/components/Navbar.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | /* eslint-disable @next/next/no-img-element */
4 | import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
5 | import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
6 | import { useState } from 'react'
7 | import { docsUrl } from './urls'
8 |
9 | const navigation = [
10 | { name: 'About', href: '/', current: true },
11 | { name: 'Plugins', href: '/plugins', current: false },
12 | { name: 'Docs', href: docsUrl, current: false }
13 | ]
14 |
15 | function classNames(...classes: string[]) {
16 | return classes.filter(Boolean).join(' ')
17 | }
18 |
19 | export default function Navbar() {
20 | const [isCurrentPage, setIsCurrentPage] = useState('');
21 | return (
22 | 7 | Web3.js libraries are being sunset on March 4th, 2025. For migration guides and more details please refer to 8 | 9 | Chainsafe blog 10 | 11 |
12 |
24 |
64 |
65 |
25 |
63 |
26 | {/* Mobile menu button*/}
27 |
28 |
29 | Open main menu
30 |
31 |
32 |
33 |
34 |
35 |
61 |
62 |
36 | 
41 |
43 |
41 | Web3.js
42 |
44 |
60 |
45 | {navigation.map((item) => (
46 |
55 | {item.name}
56 |
57 | ))}
58 |
59 |
67 | {navigation.map((item) => (
68 |
78 | {item.name}
79 |
80 | ))}
81 |
82 |
11 | {children}
12 |
13 | )
14 | }
--------------------------------------------------------------------------------
/src/components/PluginCard.tsx:
--------------------------------------------------------------------------------
1 | import Button from "./Button";
2 | import { StarIcon } from "@heroicons/react/24/outline";
3 |
4 | type Props = {
5 | name: string;
6 | isFeatured: boolean | undefined;
7 | description?: string;
8 | downloadsCount?: string | number;
9 | authors?: string | string[];
10 | downloadUrl?: string;
11 | error?: string;
12 |
13 | }
14 | export default function PluginCard({isFeatured, name, description, authors, downloadUrl, error, downloadsCount }: Props) {
15 | return (
16 |
17 |
38 | )
39 | }
--------------------------------------------------------------------------------
/src/components/SectionHeading.tsx:
--------------------------------------------------------------------------------
1 | type Props = {
2 | type?: 'primary' | 'secondary'
3 | children: any;
4 | className?: string;
5 | };
6 |
7 | export default function SectionHeading({ children, type, className }: Props) {
8 | let styles;
9 | if (type === 'primary') {
10 | styles = `text-4xl font-medium tracking-tight text-cream sm:text-9xl`;
11 |
12 | } else if (type === 'secondary') {
13 | styles = `text-3xl font-semibold tracking-tight text-white sm:text-4xl`;
14 | }
15 |
16 | return (
17 |
18 | {isFeatured ?
26 | {!error && (
27 |
19 |
: null }
23 | {name}
24 | {description ?
20 |
22 | {description}
: null } 25 |
28 |
36 | )}
37 |
29 | {authors ?
32 | {authors}
:Unknown
} 30 | {/*{downloadsCount} Downloads
*/} 31 |
33 |
34 |
35 | 19 | {children} 20 |
21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/components/SectionPadding.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from 'react' 2 | 3 | type Props = { 4 | children: ReactNode | any; 5 | type: 'default' | 'thinner' | 'thin'; 6 | className?: string; 7 | } 8 | 9 | export default function PagePadding({type, className, children}: Props) { 10 | 11 | let outerStyles; 12 | let innerStyles; 13 | 14 | if (type === 'default') { 15 | outerStyles = `relative h-full w-full md:min-h-[50vh]`; 16 | innerStyles = `elative flex flex-col justify-center py-14 px-8` 17 | } 18 | 19 | return ( 20 |
21 |
25 | )
26 | }
--------------------------------------------------------------------------------
/src/components/TextDescription.tsx:
--------------------------------------------------------------------------------
1 | type Props = {
2 | type?: 'primary' | 'secondary'
3 | children: any;
4 | className?: string;
5 | };
6 |
7 | export default function TextDescription({ children, type, className }: Props) {
8 | let styles;
9 | if (type === 'primary') {
10 | styles = `text-xl font-semibold text-white`;
11 |
12 | } else if (type === 'secondary') {
13 | styles = `text-xl font-semibold text-slate-400`;
14 | }
15 |
16 | return (
17 |
22 | {children}
23 |
24 | 19 | {children} 20 |
21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/components/TextWithCheckIcon.tsx: -------------------------------------------------------------------------------- 1 | 2 | import React, {ReactNode} from 'react' 3 | import {CheckCircleIcon } from "@heroicons/react/24/outline"; 4 | type Props = { 5 | children?: any; 6 | } 7 | 8 | export default function TextWithCheckIcon({children }: Props) { 9 | return ( 10 |
11 |
15 |
19 | )
20 | }
--------------------------------------------------------------------------------
/src/components/sections/Ambassadors.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @next/next/no-img-element */
2 | import SectionHeading from "../SectionHeading"
3 |
4 | const ambassadors = [
5 | {
6 | name: 'Anum Qudsia',
7 | country: 'Norway',
8 | imageUrl: '/ambassadors/0.png'
9 | },
10 | {
11 | name: 'Eloi Sanchez',
12 | country: 'Germany',
13 | imageUrl: '/ambassadors/0.png'
14 | },
15 | {
16 | name: 'Alejandro Soto Diaz',
17 | country: 'Columbia',
18 | imageUrl: '/ambassadors/1.png'
19 | },
20 | {
21 | name: 'Labore Kodjo',
22 | country: 'Togo',
23 | imageUrl: '/ambassadors/2.png'
24 | },
25 | {
26 | name: 'Adefisayo Adejumo',
27 | country: 'Nigeria',
28 | imageUrl: '/ambassadors/3.png'
29 | },
30 | {
31 | name: 'Ese Monday',
32 | country: 'Nigeria',
33 | imageUrl: '/ambassadors/4.png'
34 | },
35 | ]
36 |
37 | export default function Ambassadors() {
38 | return (
39 |
16 |
18 | {children}
17 |
40 |
57 | )
58 | }
59 |
--------------------------------------------------------------------------------
/src/components/sections/CTAWithBg.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from 'react';
2 | import SectionHeading from '../SectionHeading';
3 |
4 | type Props = {
5 | title: string;
6 | }
7 |
8 | export default function CTAWithBg({title}: Props) {
9 |
10 |
11 | return (
12 |
41 |
56 |
42 | Web3js Ambassadors
43 |
44 | -
47 | {ambassadors.map((person) => (
48 |
-
49 |
50 |
{person.name}
51 |{person.country}
52 |
53 | ))}
54 |
13 |
23 | )
24 | };
--------------------------------------------------------------------------------
/src/components/sections/Features.tsx:
--------------------------------------------------------------------------------
1 |
2 | "use client"
3 |
4 | import { useInView } from 'react-intersection-observer';
5 | import { motion, useAnimation } from 'framer-motion';
6 | import { useEffect } from "react";
7 | import { ChatBubbleLeftRightIcon, ArrowsRightLeftIcon, RocketLaunchIcon, CircleStackIcon, BellIcon } from '@heroicons/react/24/outline';
8 | import SectionHeading from "../SectionHeading";
9 |
10 | const cards = [
11 | {
12 | icon:
14 |
22 |
15 |
16 | {title}
17 |
18 |
19 |
20 |
21 |
56 |
72 | )
73 | }
74 |
--------------------------------------------------------------------------------
/src/components/sections/Hero.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @next/next/no-img-element */
2 | import Button from '../Button';
3 | import SectionHeading from '../SectionHeading';
4 |
5 | export default function Hero() {
6 | return (
7 |
57 | Web3.js Features
58 |
59 |
71 |
60 | {cards.map((card, index) => (
61 |
70 |
62 |
68 | ))}
69 |
63 |
65 | {card.icon}
64 | {card.title}
66 |{card.desc}
67 |
8 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/sections/LogoCloud.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @next/next/no-img-element */
2 |
3 | export const companiesList = [
4 | {
5 | 'name': 'Ethereum',
6 | 'imgUrl': '/logos/eth.png',
7 | },
8 | {
9 | 'name': 'Zksync',
10 | 'imgUrl': '/logos/zksync.png',
11 | },
12 | {
13 | 'name': 'Chainlink',
14 | 'imgUrl': '/logos/chainlink.png',
15 | },
16 | {
17 | 'name': 'Chainstack',
18 | 'imgUrl': '/logos/chainstack.png',
19 | },
20 | {
21 | 'name': 'ENS',
22 | 'imgUrl': '/logos/ens.png',
23 | },
24 | {
25 | 'name': 'Near',
26 | 'imgUrl': '/logos/near.png',
27 | },
28 | {
29 | 'name': 'Optimism',
30 | 'imgUrl': '/logos/optimism.png',
31 | },
32 | ];
33 |
34 | export default function LogoCloud() {
35 | return (
36 |
9 |
23 |
10 |
22 |
11 |
12 | Build dApps on any EVM Chain with TypeScript Libraries
13 |
14 |
18 |
15 |
16 |
17 |
19 | 
20 |
21 |
20 |
37 |
51 | )
52 | }
--------------------------------------------------------------------------------
/src/components/sections/PluginsList.tsx:
--------------------------------------------------------------------------------
1 | import React, { useMemo } from "react";
2 | import { PluginsData } from "../../hooks/usePlugins";
3 | import PluginCard from "../PluginCard";
4 | import SectionHeading from "../SectionHeading";
5 |
6 | interface IPluginsList {
7 | pluginData: PluginsData;
8 | }
9 |
10 | const PluginsList: React.FC
38 |
50 | Trusted by
39 |
40 | {companiesList ? companiesList.map((item, index) => (
41 |
49 |
42 | 
47 | )) : }
48 | loading plugin details...
)
18 |
19 | return (
20 |
21 | 
22 | Web3js Plugins
23 | {error &&
39 | )
40 | }
41 |
42 | export default PluginsList;
--------------------------------------------------------------------------------
/src/components/sections/PluginsWithWeb3js.tsx:
--------------------------------------------------------------------------------
1 |
2 | // import { motion } from "framer-motion";
3 | // import {
4 | // fadeInVariant,
5 | // parentVariant,
6 | // childVariants,
7 | // } from "@/styles/animations";
8 |
9 | import SectionHeading from "../SectionHeading";
10 |
11 | export default function PluginsWithWeb3js() {
12 | return (
13 |
22 | {error}
}
24 |
25 |
38 |
26 | {memoizedPluginsList.map((plugin) =>
27 |
37 |
14 |
25 | );
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/sections/Stats.tsx:
--------------------------------------------------------------------------------
1 | import SectionHeading from "../SectionHeading"
2 |
3 | export default function Stats() {
4 | return (
5 |
17 |
24 |
18 |
23 |
19 | With Web3.js plugins, you can
20 |
21 |
22 |
6 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/sections/Testimonials.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @next/next/no-img-element */
2 | import SectionHeading from "../SectionHeading"
3 |
4 | export const testimonials = [
5 | {
6 | imgUrl: '/logos/chainstack.png',
7 | text: '“At Chainstack, Web3.js has been instrumental in developing our RPC API documentation and tutorials. Its robust features and seamless integration allow us to showcase use cases effectively, enabling developers to leverage the full potential of blockchain technology quickly. Web3.js is a foundational tool that enhances our ability to support developers in building scalable and innovative applications on multiple blockchains.”'
8 | },
9 | {
10 | imgUrl: '/logos/namespace.png',
11 | text: '“Developing the Namespace ENS plugin for Web3.js was a smooth experience. Developer docs are concise and easy to follow, and their SDK made the process even more frictionless. On top of that, the DevRel team was always available to provide any support if needed.”'
12 | },
13 | {
14 | imgUrl: '/logos/defisaver.png',
15 | text: '“We have been relying on Web3.js to build DeFi Saver since 2020. With us having built a lot of custom infra in-house, Web3.js had been a great tool for this purpose. The API has been stable and it provided us enough visibility and control over the entire stack. It has also been here for a while and all the tooling around it is stable and ready, so theres hardly ever any issues.”'
16 | },
17 | ]
18 | export default function Testimonials() {
19 |
20 | return (
21 |
7 |
17 |
8 |
16 |
9 | Why Web3.js?
10 |
14 |
15 | 11 | Web3.js was established in 2014, making it the oldest web3 library. With extensive documentation, an active community and modular design, Web3.js is powerful and easy-to-use. 12 |
13 |
22 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/sections/ThreeSteps.tsx:
--------------------------------------------------------------------------------
1 |
2 | "use client"
3 |
4 | import { CopyBlock, monokaiSublime } from 'react-code-blocks';
5 | import sample from '../snippets';
6 |
7 | export default function ThreeSteps() {
8 | const codeCSS = {
9 | fontSize: '16px',
10 | fontWeight: '600',
11 | padding: '16px',
12 | minHeight: '400px',
13 | maxHeight: '400px',
14 | overflowWrap: 'break-word',
15 | overflowY: 'scroll',
16 | borderRadius: '20px',
17 | };
18 | return (
19 |
23 | Testimonials
24 |
35 |
25 | {testimonials.map((card, index) => (
26 |
34 |
27 |
32 | ))}
33 | {card.text}
28 |
29 | 
30 |
31 |
30 |
20 |
58 | )
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/sections/WhyBeAmbassador.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { useInView } from 'react-intersection-observer';
4 | import { motion, useAnimation } from 'framer-motion';
5 | import { ChatBubbleLeftRightIcon, StarIcon, FaceSmileIcon, HeartIcon, ArrowTrendingUpIcon, BoltIcon } from '@heroicons/react/24/outline';
6 |
7 | import { useEffect } from "react";
8 | import SectionHeading from "../SectionHeading";
9 |
10 | const cards = [
11 | {
12 | icon:
21 |
57 |
22 | {/* step 1 */}
23 |
56 |
24 |
33 | {/* step 2 */}
34 | Step 1. Import Web3 module.
25 |
35 |
44 | {/* step 3 */}
45 | Step 2. Initialize a Web3 provider.
36 |
46 |
55 | Step 3. Start querying; i.e, current block number.
47 |
66 | Why be an ambassador
67 |
77 |
68 | {cards.map((card, index) => (
69 |
70 |
74 | ))}
75 |
76 | {card.icon}
71 | {card.title}
72 |{card.desc}
73 |
16 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/snippets.tsx:
--------------------------------------------------------------------------------
1 | const sample = {
2 | interact: `
3 | import {Web3} from "web3";
4 |
5 | // set a provider in the sepolia testnet using node rpc url
6 | const web3 = new Web3("https://rpc.sepolia.org");
7 |
8 | // interacting with the smart contract
9 | const abi = [
10 | {
11 | outputs: [
12 | {
13 | internalType: "uint256",
14 | name: "randomNo",
15 | type: "uint256",
16 | },
17 | ],
18 | name: "generateRandomNumber",
19 | stateMutability: "nonpayable",
20 | type: "function",
21 | },
22 | ] as const;
23 |
24 | const address = "0xA36432F7B12f160F685717c4Ab12EB883a682810";
25 |
26 | // create a new contract object, providing the ABI and address
27 | const contract = new web3.eth.Contract(abi, address);
28 |
29 | // using contract.methods to get value
30 | contract.methods
31 | .generateRandomNumber()
32 | .call()
33 | .then(console.log);`,
34 |
35 | listen: `
36 | import {Web3} from "web3";
37 |
38 | // set a provider to the sepolia testner using node rpc url
39 | const web3 = new Web3("wss://sepolia.infura.io/ws/v3/API_KEY");
40 |
41 | // interacting with the smart contract
42 | const abi = [
43 | {
44 | inputs: [
45 | {
46 | internalType: "uint256",
47 | name: "randomNo",
48 | type: "uint256",
49 | },
50 | ],
51 | name: "RandomNo",
52 | type: "event",
53 | },
54 | ] as const;
55 |
56 | const address = "0xA36432F7B12f160F685717c4Ab12EB883a682810";
57 |
58 | // create a new contract object, providing the ABI and address
59 | const contract = new web3.eth.Contract(abi, address);
60 |
61 | // using contract.methods to get value
62 | const subscription = contract.events.RandomNo()
63 | subscription.on("data", console.log); // new value every time the event is emitted
64 | `,
65 | fetch: `
66 | import {Web3} from "web3"
67 |
68 | // set a provider such as using infura
69 | const web3 = new Web3("https://rpc.sepolia.org")
70 |
71 | // Get the balance of an Ethereum address
72 | web3.eth.getBalance("0xF8561Dc64E577B0CF53dd3FC11329e80B1A8343e").then(console.log) // result: 1.000.000 eth
73 |
74 | // Get the latest block number
75 | web3.eth.getBlockNumber().then(console.log) // result: BigInt(xxx)
76 | `,
77 | simplify: `
78 | import {Web3} from "web3";
79 |
80 | // Create a sha3 hash of a string input
81 | console.log(Web3.utils.sha3("example")) // '0x6fd43e7cffc31bb581d7421c8698e29aa2bd8e7186a394b85299908b4eb9b175'
82 |
83 | // Convert any ether value into wei
84 | console.log(Web3.utils.toWei('1', 'ether')) // 1000000000000000000
85 | console.log(Web3.utils.toWei('1', 'gwei')) // 1000000000
86 |
87 | // Adds a padding on the left of a string, useful for adding paddings to HEX strings.
88 | console.log(Web3.utils.padLeft('0x3456ff', 20)); // '0x000000000000003456ff'
89 | `,
90 | };
91 |
92 | export default sample;
93 |
--------------------------------------------------------------------------------
/src/components/urls.ts:
--------------------------------------------------------------------------------
1 | export const discordUrl = "https://discord.gg/yhHVtK5Wqt"
2 | export const docsUrl = "https://docs.web3js.org/"
3 | export const npmUrl = "https://www.npmjs.com/package/web3"
4 | export const blogUrl = "https://blog.chainsafe.io/web3js/"
5 | export const blogPostv4 = "https://blog.chainsafe.io/announcing-the-full-release-of-web3-js-v4-e9e26275a3dc";
6 | export const githubUrl = "https://github.com/web3/web3.js";
7 |
--------------------------------------------------------------------------------
/src/hooks/usePlugins.ts:
--------------------------------------------------------------------------------
1 | "use client"
2 | import { getPackageManifest, getPackageDownloads, PackageDownloads } from 'query-registry';
3 | import { useEffect, useState } from 'react';
4 | import pluginList from '@/pluginList';
5 |
6 | export interface PluginMetadata {
7 | name: string;
8 | description?: string;
9 | version?: string;
10 | author?: string;
11 | homepage?: string;
12 | donwloads?: number;
13 | license?: string;
14 | isFeatured?: boolean;
15 | }
16 |
17 | const pluginsJSON = pluginList.map((plugin) => {
18 | return {
19 | name: plugin.name,
20 | isFeatured: plugin.isFeatured === true
21 | }
22 | });
23 |
24 | export interface PluginsData {
25 | loading: boolean;
26 | pluginsList: PluginMetadata[];
27 | error?: string;
28 | }
29 | export const usePlugins = (): PluginsData => {
30 | const [loading, setLoading] = useState(true);
31 | const [error, setError] = useState
17 |
30 |
18 |
29 |
19 | With Web3.js, you can
20 |
21 | -
22 | {stats.map((stat, index) => (
23 |
24 | {stat}
25 |
26 | ))}
27 |