Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on Mar 5, 2025. It is now read-only.

Commit 2f73aa5

Browse files
author
Alex
authored
web3modal documentation (#7041)
* add web3modal guide * update docs * update link * update link * update examples * update docs positions * update emoji
1 parent 866469d commit 2f73aa5

File tree

7 files changed

+261
-4
lines changed

7 files changed

+261
-4
lines changed

‎docs/docs/guides/advanced/_category_.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@ label: '🧠 Advanced'
22
collapsible: true
33
collapsed: true
44
link: null
5-
position: 14
5+
position: 15

‎docs/docs/guides/feedback/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
sidebar_position: 17
2+
sidebar_position: 18
33
sidebar_label: '🗣️ Feedback'
44
---
55

‎docs/docs/guides/resources_and_troubleshooting/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
sidebar_position: 16
2+
sidebar_position: 17
33
sidebar_label: '📚 Resources & Troubleshooting'
44
---
55
# Resources & Troubleshooting

‎docs/docs/guides/web3_config/_category_.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@ label: '⚙️ Web3 config'
22
collapsible: true
33
collapsed: true
44
link: null
5-
position: 15
5+
position: 16

‎docs/docs/guides/web3_modal_guide/_category_.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
label: '📱 WalletConnect Tutorial'
2+
collapsible: true
3+
collapsed: true
4+
link: null
5+
position: 14

‎docs/docs/guides/web3_modal_guide/index.mdx‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
---
2+
sidebar_position: 1
3+
sidebar_label: 'Getting started'
4+
---
5+
6+
# Getting Started
7+
8+
Welcome to the Web3modal📱 Guide.
9+
10+
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.
11+
12+
In this guide, you will learn how to set up Walletconnect with web3js.
13+
14+
15+
16+
## Preview
17+
:::info
18+
Switch your browsers if the preview doesn't load.
19+
:::
20+
<iframe width="100%" height="700px" src="https://stackblitz.com/edit/vitejs-vite-cg7ctd?embed=1&file=src%2FApp.tsx"></iframe>
21+
22+
23+
24+
## Installation
25+
26+
```bash
27+
npm install web3modal-web3js web3js
28+
```
29+
30+
## Implementation
31+
32+
```typescript
33+
34+
import { createWeb3Modal, defaultConfig } from 'web3modal-web3/react'
35+
36+
// 1. Get projectId, Your Project ID can be obtained from walletconnect.com
37+
const projectId = 'YOUR_PROJECT_ID'
38+
39+
// 2. Set chains
40+
const mainnet = {
41+
chainId: 1,
42+
name: 'Ethereum',
43+
currency: 'ETH',
44+
explorerUrl: 'https://etherscan.io',
45+
rpcUrl: 'https://cloudflare-eth.com'
46+
}
47+
48+
// 3. Create a metadata object
49+
const metadata = {
50+
name: 'My Website',
51+
description: 'My Website description',
52+
url: 'https://mywebsite.com', // origin must match your domain & subdomain
53+
icons: ['https://avatars.mywebsite.com/']
54+
}
55+
56+
// 4. Create web3 config
57+
const web3Config = defaultConfig({
58+
/*Required*/
59+
metadata,
60+
61+
/*Optional*/
62+
enableEIP6963: true, // true by default
63+
enableInjected: true, // true by default
64+
enableCoinbase: true, // true by default
65+
rpcUrl: '...', // used for the Coinbase SDK
66+
defaultChainId: 1, // used for the Coinbase SDK
67+
})
68+
69+
// 5. Create a Web3Modal instance
70+
createWeb3Modal({
71+
ethersConfig,
72+
chains: [mainnet],
73+
projectId,
74+
enableAnalytics: true // Optional - defaults to your Cloud configuration
75+
})
76+
77+
export default function App() {
78+
return <YourApp />
79+
}
80+
```
81+
82+
## Triggering the modal
83+
84+
```Typescript
85+
86+
export default function ConnectButton() {
87+
return <w3m-button/>
88+
}
89+
90+
```
91+
92+
## Smart Contract Interaction
93+
94+
<iframe width="100%" height="700px" src="https://stackblitz.com/edit/vitejs-vite-itfrzf?embed=1&file=src%2FApp.tsx"></iframe>
95+
96+
Web3js can help us interact with wallets and smart contracts:
97+
98+
```Typescript
99+
import Web3 from 'web3';
100+
import { ERC20ABI } from './contracts/ERC20';
101+
102+
const USDTAddress = '0xdac17f958d2ee523a2206206994597c13d831ec7';
103+
104+
function Components() {
105+
const { isConnected } = useWeb3ModalAccount()
106+
const { walletProvider } = useWeb3ModalProvider()
107+
const [USDTBalance, setUSDTBalance] = useState(0);
108+
const [smartContractName, setSmartContractName] = useState('');
109+
110+
async function getContractInfo() {
111+
if (!isConnected) throw Error('not connected');
112+
const web3 = new Web3({
113+
provider: walletProvider,
114+
config: { defaultNetworkId: chainId },
115+
});
116+
const contract = new web3.eth.Contract(ERC20ABI, USDTAddress);
117+
const balance = await contract.methods.balanceOf(address).call();
118+
const name = (await contract.methods.name().call()) as string;
119+
setUSDTBalance(Number(balance));
120+
setSmartContractName(name);
121+
}
122+
123+
return <> <button onClick={getContractInfo}>Get User Balance and Contract name</button> <p> Balance: {USDTBalance} smartContractName: {smartContractName}</p></>
124+
}
125+
126+
```
127+
128+
:::info
129+
- To learn how to set up Web3modal with vue, click [here](/guides/web3_modal_guide/vue).
130+
:::

‎docs/docs/guides/web3_modal_guide/vue.md‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
---
2+
sidebar_position: 1
3+
sidebar_label: 'Web3Modal with Vue'
4+
---
5+
6+
# Web3Modal with Vue and web3js
7+
8+
## Live code editor
9+
10+
<iframe width="100%" height="700px" src="https://stackblitz.com/edit/vitejs-vite-cg7ctd?embed=1&file=src%2FApp.tsx"></iframe>
11+
12+
13+
14+
## Installation
15+
16+
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
17+
18+
```bash
19+
npm install web3modal-web3js react react-dom
20+
npm install --save-dev vite @vitejs/plugin-react
21+
```
22+
23+
## Implementation
24+
25+
Within the root of the project create `index.html`
26+
```html
27+
<!doctype html>
28+
<html lang="en">
29+
<head>
30+
<meta charset="UTF-8" />
31+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
32+
<title>React Web3 example</title>
33+
</head>
34+
<body>
35+
<div id="app"></div>
36+
<script type="module" src="/src/main.tsx"></script>
37+
</body>
38+
</html>
39+
```
40+
41+
Now we will add the Web3modal code within `src/Web3modal.tsx`
42+
```typescript
43+
44+
import { createWeb3Modal, defaultConfig } from 'web3modal-web3/react'
45+
46+
// 1. Get projectId, Your Project ID can be obtained from walletconnect.com
47+
const projectId = 'YOUR_PROJECT_ID'
48+
49+
// 2. Set chains
50+
const mainnet = {
51+
chainId: 1,
52+
name: 'Ethereum',
53+
currency: 'ETH',
54+
explorerUrl: 'https://etherscan.io',
55+
rpcUrl: 'https://cloudflare-eth.com'
56+
}
57+
58+
// 3. Create a metadata object
59+
const metadata = {
60+
name: 'My Website',
61+
description: 'My Website description',
62+
url: 'https://mywebsite.com', // origin must match your domain & subdomain
63+
icons: ['https://avatars.mywebsite.com/']
64+
}
65+
66+
// 4. Create web3 config
67+
const web3Config = defaultConfig({
68+
/*Required*/
69+
metadata,
70+
71+
/*Optional*/
72+
enableEIP6963: true, // true by default
73+
enableInjected: true, // true by default
74+
enableCoinbase: true, // true by default
75+
rpcUrl: '...', // used for the Coinbase SDK
76+
defaultChainId: 1, // used for the Coinbase SDK
77+
})
78+
79+
// 5. Create a Web3Modal instance
80+
createWeb3Modal({
81+
ethersConfig,
82+
chains: [mainnet],
83+
projectId,
84+
enableAnalytics: true // Optional - defaults to your Cloud configuration
85+
})
86+
87+
export default function App() {
88+
return <YourApp />
89+
}
90+
```
91+
92+
Set up vite configs within root `vite.config.js`
93+
```javascript
94+
import react from '@vitejs/plugin-react'
95+
import { defineConfig } from 'vite'
96+
97+
export default defineConfig({
98+
plugins: [react()]
99+
})
100+
```
101+
102+
And finally add react to the app `src/main.tsx`
103+
```typescript
104+
import React from 'react'
105+
import ReactDOM from 'react-dom/client'
106+
import App from './App.js'
107+
108+
ReactDOM.createRoot(document.getElementById('app')!).render(
109+
<React.StrictMode>
110+
<App />
111+
</React.StrictMode>
112+
)
113+
```
114+
115+
You are finished and have successfully created Web3modal with Vue!
116+
117+
:::info
118+
- For additional information take a look into the interactive code editor above.
119+
- You can view different examples of setting up walletconnect with web3.js [here](https://github.com/ChainSafe/web3modal/tree/add-examples/examples/vue-web3)
120+
- Learn more about Web3modal [here](https://docs.walletconnect.com/web3modal/about)
121+
:::
122+

0 commit comments

Comments
 (0)