Merge branch '4.x' into ok/6777-Format-schema-with-list-of-objects-do…

…esn't-work-

docs/docs/guides/advanced/_category_.yml

@@ -2,4 +2,4 @@ label: '🧠 Advanced'
 collapsible: true
 collapsed: true
 link: null
-position: 14
+position: 15

docs/docs/guides/feedback/index.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 17
+sidebar_position: 18
 sidebar_label: '🗣️ Feedback'
 ---
 

docs/docs/guides/resources_and_troubleshooting/index.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 16
+sidebar_position: 17
 sidebar_label: '📚 Resources & Troubleshooting'
 ---
 # Resources & Troubleshooting

docs/docs/guides/web3_config/_category_.yml

@@ -2,4 +2,4 @@ label: '⚙️ Web3 config'
 collapsible: true
 collapsed: true
 link: null
-position: 15
+position: 16

docs/docs/guides/web3_modal_guide/_category_.yml

@@ -0,0 +1,5 @@
+label: '📱 WalletConnect Tutorial'
+collapsible: true
+collapsed: true
+link: null
+position: 14

docs/docs/guides/web3_modal_guide/index.mdx

@@ -0,0 +1,130 @@
+---
+sidebar_position: 1
+sidebar_label: 'Getting started'
+---
+
+# Getting Started
+
+Welcome to the Web3modal📱 Guide.
+
+The Web3Modal SDK allows you to easily connect your Web3 app with wallets. It provides a simple and intuitive interface for requesting actions such as signing transactions and interacting with smart contracts on the blockchain.
+
+In this guide, you will learn how to set up Walletconnect with web3js.
+
+
+
+## Preview
+:::info
+Switch your browsers if the preview doesn't load.
+:::
+<iframe width="100%" height="700px"  src="https://stackblitz.com/edit/vitejs-vite-cg7ctd?embed=1&file=src%2FApp.tsx"></iframe>
+
+
+
+## Installation
+
+```bash
+npm install web3modal-web3js web3js
+```
+
+## Implementation
+
+```typescript
+
+import { createWeb3Modal, defaultConfig } from 'web3modal-web3/react'
+
+// 1. Get projectId, Your Project ID can be obtained from walletconnect.com
+const projectId = 'YOUR_PROJECT_ID'
+
+// 2. Set chains
+const mainnet = {
+  chainId: 1,
+  name: 'Ethereum',
+  currency: 'ETH',
+  explorerUrl: 'https://etherscan.io',
+  rpcUrl: 'https://cloudflare-eth.com'
+}
+
+// 3. Create a metadata object
+const metadata = {
+  name: 'My Website',
+  description: 'My Website description',
+  url: 'https://mywebsite.com', // origin must match your domain & subdomain
+  icons: ['https://avatars.mywebsite.com/']
+}
+
+// 4. Create web3 config
+const web3Config = defaultConfig({
+  /*Required*/
+  metadata,
+
+  /*Optional*/
+  enableEIP6963: true, // true by default
+  enableInjected: true, // true by default
+  enableCoinbase: true, // true by default
+  rpcUrl: '...', // used for the Coinbase SDK
+  defaultChainId: 1, // used for the Coinbase SDK
+})
+
+// 5. Create a Web3Modal instance
+createWeb3Modal({
+  ethersConfig,
+  chains: [mainnet],
+  projectId,
+  enableAnalytics: true // Optional - defaults to your Cloud configuration
+})
+
+export default function App() {
+  return <YourApp />
+}
+```
+
+## Triggering the modal
+
+```Typescript
+
+export default function ConnectButton() {
+  return <w3m-button/>
+}
+
+```
+
+## Smart Contract Interaction
+
+<iframe width="100%" height="700px"  src="https://stackblitz.com/edit/vitejs-vite-itfrzf?embed=1&file=src%2FApp.tsx"></iframe>
+
+Web3js can help us interact with wallets and smart contracts:
+
+```Typescript
+import Web3 from 'web3';
+import { ERC20ABI } from './contracts/ERC20';
+
+const USDTAddress = '0xdac17f958d2ee523a2206206994597c13d831ec7';
+
+function Components() {
+  const { isConnected } = useWeb3ModalAccount()
+  const { walletProvider } = useWeb3ModalProvider()
+  const [USDTBalance, setUSDTBalance] = useState(0); 
+  const [smartContractName, setSmartContractName] = useState(''); 
+
+  async function getContractInfo() {
+    if (!isConnected) throw Error('not connected');
+    const web3 = new Web3({
+      provider: walletProvider,
+      config: { defaultNetworkId: chainId },
+    });
+    const contract = new web3.eth.Contract(ERC20ABI, USDTAddress);
+    const balance = await contract.methods.balanceOf(address).call();
+    const name = (await contract.methods.name().call()) as string;
+    setUSDTBalance(Number(balance));
+    setSmartContractName(name);
+  }
+
+  return <> <button onClick={getContractInfo}>Get User Balance and Contract name</button> <p> Balance: {USDTBalance} smartContractName: {smartContractName}</p></>
+}
+
+```
+
+:::info
+- To learn how to set up Web3modal with vue, click [here](/guides/web3_modal_guide/vue).
+:::

docs/docs/guides/web3_modal_guide/vue.md

@@ -0,0 +1,122 @@
+---
+sidebar_position: 1
+sidebar_label: 'Web3Modal with Vue'
+---
+
+# Web3Modal with Vue and web3js
+
+## Live code editor
+
+<iframe width="100%" height="700px"  src="https://stackblitz.com/edit/vitejs-vite-cg7ctd?embed=1&file=src%2FApp.tsx"></iframe>
+
+
+
+## Installation
+
+For this guide we will be creating a new project will need to install dependancies. We will be using vite to locally host the app, React and web3modal-web3js
+
+```bash
+npm install web3modal-web3js react react-dom
+npm install --save-dev vite @vitejs/plugin-react
+```
+
+## Implementation
+
+Within the root of the project create `index.html`
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Web3 example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+```
+
+Now we will add the Web3modal code within `src/Web3modal.tsx`
+```typescript
+
+import { createWeb3Modal, defaultConfig } from 'web3modal-web3/react'
+
+// 1. Get projectId, Your Project ID can be obtained from walletconnect.com
+const projectId = 'YOUR_PROJECT_ID'
+
+// 2. Set chains
+const mainnet = {
+  chainId: 1,
+  name: 'Ethereum',
+  currency: 'ETH',
+  explorerUrl: 'https://etherscan.io',
+  rpcUrl: 'https://cloudflare-eth.com'
+}
+
+// 3. Create a metadata object
+const metadata = {
+  name: 'My Website',
+  description: 'My Website description',
+  url: 'https://mywebsite.com', // origin must match your domain & subdomain
+  icons: ['https://avatars.mywebsite.com/']
+}
+
+// 4. Create web3 config
+const web3Config = defaultConfig({
+  /*Required*/
+  metadata,
+
+  /*Optional*/
+  enableEIP6963: true, // true by default
+  enableInjected: true, // true by default
+  enableCoinbase: true, // true by default
+  rpcUrl: '...', // used for the Coinbase SDK
+  defaultChainId: 1, // used for the Coinbase SDK
+})
+
+// 5. Create a Web3Modal instance
+createWeb3Modal({
+  ethersConfig,
+  chains: [mainnet],
+  projectId,
+  enableAnalytics: true // Optional - defaults to your Cloud configuration
+})
+
+export default function App() {
+  return <YourApp />
+}
+```
+
+Set up vite configs within root `vite.config.js`
+```javascript
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [react()]
+})
+```
+
+And finally add react to the app `src/main.tsx`
+```typescript
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.js'
+
+ReactDOM.createRoot(document.getElementById('app')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
+```
+
+You are finished and have successfully created Web3modal with Vue!
+
+:::info
+- For additional information take a look into the interactive code editor above.
+- You can view different examples of setting up walletconnect with web3.js [here](https://github.com/ChainSafe/web3modal/tree/add-examples/examples/vue-web3)
+- Learn more about Web3modal [here](https://docs.walletconnect.com/web3modal/about)
+:::
+

packages/web3-eth/CHANGELOG.md

@@ -242,3 +242,7 @@ Documentation:
 ### Changed
 
 -   Added parameter `customTransactionReceiptSchema` into methods `emitConfirmation`, `waitForTransactionReceipt`, `watchTransactionByPolling`, `watchTransactionBySubscription`, `watchTransactionForConfirmations` (#7000)
+
+### Fixed
+
+-   Fixed issue with simple transactions, Within `checkRevertBeforeSending` if there is no data set in transaction, set gas to be `21000` (#7043)

packages/web3-eth/src/utils/send_tx_helper.ts

@@ -122,7 +122,14 @@ export class SendTxHelper<
 
 	public async checkRevertBeforeSending(tx: TransactionCall) {
 		if (this.options.checkRevertBeforeSending !== false) {
-			const reason = await getRevertReason(this.web3Context, tx, this.options.contractAbi);
+			let formatTx = tx;
+			if (isNullish(tx.data) && isNullish(tx.input) && isNullish(tx.gas)) { // eth.call runs into error if data isnt filled and gas is not defined, its a simple transaction so we fill it with 21000
+				formatTx = {
+					...tx,
+					gas: 21000
+				}
+			}
+			const reason = await getRevertReason(this.web3Context, formatTx, this.options.contractAbi);
 			if (reason !== undefined) {
 				throw await getTransactionError<ReturnFormat>(
 					this.web3Context,

packages/web3-eth/test/unit/send_tx_helper.test.ts

@@ -21,6 +21,7 @@ import {
 	JsonRpcResponse,
 	TransactionReceipt,
 	Web3BaseWalletAccount,
+	TransactionCall
 } from 'web3-types';
 import { Web3Context, Web3EventMap, Web3PromiEvent } from 'web3-core';
 import {
@@ -151,6 +152,28 @@ describe('sendTxHelper class', () => {
 		expect(f).toHaveBeenCalledWith(error);
 		promiEvent.off('error', f);
 	});
+
+	it('add gas to simple transaction in checkRevertBeforeSending', async () => {
+		const _sendTxHelper = new SendTxHelper({
+			web3Context,
+			promiEvent: promiEvent as PromiEvent,
+			options: {
+				checkRevertBeforeSending: true,
+			},
+			returnFormat: DEFAULT_RETURN_FORMAT,
+		});
+
+		const tx = {from:"0x"} as TransactionCall
+
+        await _sendTxHelper.checkRevertBeforeSending(tx);
+
+        const expectedTx = {
+            ...tx,
+            gas: 21000,
+        };
+		expect(utils.getRevertReason).toHaveBeenCalledWith(web3Context, expectedTx, undefined);
+
+	});
 	it('emit handleError with handleRevert', async () => {
 		const error = new ContractExecutionError({ code: 1, message: 'error' });
 		web3Context.handleRevert = true;

packages/web3-utils/CHANGELOG.md

@@ -224,4 +224,5 @@ Documentation:
 
 ### Fixed
 
-- `toWei` support numbers in scientific notation (#6908)
+- `toWei` support numbers in scientific notation (#6908)
+- `toWei` and `fromWei` trims according to ether unit successfuly (#7044)