Skip to main content

Web3Modal with React and web3js

Live code editor

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

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

<!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

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({
web3Config,
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

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

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 React!

info
  • For additional information take a look into the interactive code editor above.
  • Learn more about Web3modal here