Merge branch '4.x' into junaid/6201multiprovider

docs/docs/guides/resources/resources.md

@@ -0,0 +1,28 @@
+---
+sidebar_position: 16
+sidebar_label: '📚 Resources'
+---
+# Resources
+
+## [Web3.js v4 course](https://www.youtube.com/watch?v=3ZO_t-Kyr1g&list=PLPn3rQCo3XrP4LbQcOyyHQR8McV7w3HZT)
+
+This comprehensive 14-part video course from ChainSafe equips you with the skills to conquer the blockchain using web3.js v4. Unlock the potential of web3.js v4 and build cutting-edge dApps. This course caters to all skill levels.
+
+[![Web3.js v4 course](https://img.youtube.com/vi/3ZO_t-Kyr1g/0.jpg)](https://www.youtube.com/watch?v=3ZO_t-Kyr1g&list=PLPn3rQCo3XrP4LbQcOyyHQR8McV7w3HZT)
+
+
+## [Web3.js series](https://www.youtube.com/watch?v=BQ_bDH91S4k&list=PLPn3rQCo3XrNf__8irs4-MjMt4fJqW2I_)
+
+This series of 3 videos takes you on a journey through web3.js. Whether you're a complete beginner or want to refine your skills, these videos have something for you:
+
+1. Getting Started: Kick off your web3 adventure by learning the ropes of web3.js. Master the basics, from installation to making your first call to the blockchain.
+
+2. Essential Tools: Unleash the power of web3.js utilities! From generating random bytes to hashing and checksumming addresses, you'll gain mastery of essential tools for Ethereum development.
+
+3. Sending Transactions: Dive deep into wallets and accounts. Learn how to sign and send transactions to the network, empowering you to interact with the blockchain directly.
+
+[![Web3.js series](https://img.youtube.com/vi/BQ_bDH91S4k/0.jpg)](https://www.youtube.com/watch?v=BQ_bDH91S4k&list=PLPn3rQCo3XrNf__8irs4-MjMt4fJqW2I_)
+
+## Hackathons
+
+You'll find the latest hackathons opportunities by following [web3js](https://twitter.com/web3_js) on X.

docs/docs/guides/wagmi_usage/_category_.yml

@@ -0,0 +1,5 @@
+label: '🔄 Wagmi usage'
+collapsible: true
+collapsed: true
+link: null
+position: 11

docs/docs/guides/wagmi_usage/wagmi.md

@@ -0,0 +1,131 @@
+---
+sidebar_position: 1
+sidebar_label: 'Wagmi Web3js Adapter'
+title: 'Wagmi Web3js Adapter'
+---
+
+
+### Reference Implementation
+If you're using [Wagmi](https://wagmi.sh/react/getting-started#use-wagmi) and want to add web3.js, use this code in your project. This snippet will help you to convert a `Viem` client to a `web3.js` instance for signing transactions and interacting with the blockchain:
+
+
+```typescript
+import {Web3} from 'web3'
+import {useMemo} from 'react'
+import type {Chain, Client, Transport} from 'viem'
+import {type Config, useClient, useConnectorClient} from 'wagmi'
+
+export function clientToWeb3js(client?: Client<Transport, Chain>) {
+    if (!client) {
+        return new Web3()
+    }
+
+    const {transport} = client
+
+    if (transport.type === 'fallback') {
+        return new Web3(transport.transports[0].value.url)
+    }
+    return new Web3(transport)
+}
+
+/** Action to convert a viem Client to a web3.js Instance. */
+export function useWeb3js({chainId}: { chainId?: number } = {}) {
+    const client = useClient<Config>({chainId})
+    return useMemo(() => clientToWeb3js(client), [client])
+}
+
+/** Action to convert a viem ConnectorClient to a web3.js Instance. */
+export function useWeb3jsSigner({chainId}: { chainId?: number } = {}) {
+    const {data: client} = useConnectorClient<Config>({chainId})
+    return useMemo(() => clientToWeb3js(client), [client])
+}
+```
+
+### Usage examples
+Get block data example:
+
+```typescript
+import {useWeb3js} from '../web3/useWeb3js'
+import {mainnet} from 'wagmi/chains'
+import {useEffect, useState} from "react";
+
+type Block = {
+    hash: string
+    extraData: string
+    miner: string
+
+}
+
+function Block() {
+    const web3js = useWeb3js({chainId: mainnet.id})
+    const [block, setBlock] = useState<Block>()
+
+    useEffect(() => {
+        web3js.eth.getBlock(19235006).then((b) => {
+            setBlock(b as Block)
+        }).catch(console.error)
+    }, [setBlock]);
+
+
+    if (!block) return (<div>Loading...</div>)
+
+    return (
+        <>
+            <div id='hash'>{block.hash}</div>
+            <div id='extraData'>{block.extraData}</div>
+            <div id='miner'>{block.miner}</div>
+
+        </>
+)
+}
+
+export default Block
+
+```
+
+Send transaction example:
+
+```typescript
+import {mainnet} from 'wagmi/chains'
+import {useAccount, useConnect} from "wagmi";
+import {useWeb3jsSigner} from "../web3/useWeb3js";
+import {useEffect} from "react";
+
+function SendTransaction() {
+    const account = useAccount()
+    const {connectors, connect,} = useConnect()
+    const web3js = useWeb3jsSigner({chainId: mainnet.id})
+
+    useEffect(() => {
+        if (account && account.address) {
+            web3js.eth.sendTransaction({
+                from: account.address,
+                to: '0x', // some address
+                value: '0x1' // set your value
+            }).then(console.log).catch(console.error)
+        }
+    }, [account])
+
+    return (
+        <>
+            {connectors.map((connector) => (
+                <button
+                    key={connector.uid}
+                    onClick={() => connect({connector})}
+                    type="button"
+                >
+                    {connector.name}
+                </button>
+            ))}
+        </>
+    )
+}
+
+export default SendTransaction
+
+```
+
+
+:::tip
+[This repository](https://github.com/avkos/wagmi-web3js-example-app) contains an example Wagmi app that demonstrates how to interact with the Ethereum blockchain using the web3.js library
+::: 

packages/web3-eth-abi/src/api/functions_api.ts

@@ -25,9 +25,9 @@ import { AbiFunctionFragment } from 'web3-types';
 import { isAbiFunctionFragment, jsonInterfaceMethodToString } from '../utils.js';
 import { encodeParameters } from './parameters_api.js';
 
-// todo Add link to JSON interface documentation
 /**
  * Encodes the function name to its ABI representation, which are the first 4 bytes of the sha3 of the function name including  types.
+ * The JSON interface spec documentation https://docs.soliditylang.org/en/latest/abi-spec.html#json
  * @param functionName - The function name to encode or the `JSON interface` object of the function.
  * If the passed parameter is a string, it has to be in the form of `functionName(param1Type,param2Type,...)`. eg: myFunction(uint256,uint32[],bytes10,bytes)
  * @returns - The ABI signature of the function.
@@ -75,9 +75,9 @@ export const encodeFunctionSignature = (functionName: string | AbiFunctionFragme
 	return sha3Raw(name).slice(0, 10);
 };
 
-// todo Add link to JSON interface documentation
 /**
  * Encodes a function call using its `JSON interface` object and given parameters.
+ * The JSON interface spec documentation https://docs.soliditylang.org/en/latest/abi-spec.html#json
  * @param jsonInterface - The `JSON interface` object of the function.
  * @param params - The parameters to encode
  * @returns - The ABI encoded function call, which, means the function signature and the parameters passed.