web3modal documentation (#7041)

* add web3modal guide

* update docs

* update link

* update link

* update examples

* update docs positions

* update emoji

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)
+:::
+