- balance: {balance ? `${balance} ETH` : `click "Balance" to fetch`} -
- > - ); - } - return ; -} - -export default App; +import "./App.css"; + +import { EthereumProvider } from "@walletconnect/ethereum-provider"; +import { ethers } from "ethers"; +import React, { useState } from "react"; + +const projectId = import.meta.env.VITE_PROJECT_ID as string; + +// 1. Create a new EthereumProvider instance +const provider = await EthereumProvider.init({ + projectId, + chains: [1], + methods: ["personal_sign", "eth_sendTransaction"], + showQrModal: true, + qrModalOptions: { + themeMode: "light", + }, +}); + +provider.on("display_uri", (uri) => { + console.log("display_uri", uri); +}); + +// 2. Pass the provider to ethers.js +const ethersWeb3Provider = new ethers.providers.Web3Provider(provider); + +function App() { + // 3. Handle Connect + const connect = () => { + provider.connect().then(() => { + setConnected(true); + }); + }; + + const [connected, setConnected] = useState(false); + const [balance, setBalance] = useState+ balance: {balance ? `${balance} ETH` : `click "Balance" to fetch`} +
+ > + ); + } + return ; +} + +export default App; diff --git a/basic/dapps/ethereum-provider/src/assets/react.svg b/dapps/ethereum-provider/src/assets/react.svg similarity index 100% rename from basic/dapps/ethereum-provider/src/assets/react.svg rename to dapps/ethereum-provider/src/assets/react.svg diff --git a/basic/dapps/ethereum-provider/src/index.css b/dapps/ethereum-provider/src/index.css similarity index 100% rename from basic/dapps/ethereum-provider/src/index.css rename to dapps/ethereum-provider/src/index.css diff --git a/basic/dapps/ethereum-provider/src/main.tsx b/dapps/ethereum-provider/src/main.tsx similarity index 96% rename from basic/dapps/ethereum-provider/src/main.tsx rename to dapps/ethereum-provider/src/main.tsx index 2b581d3..02055fd 100644 --- a/basic/dapps/ethereum-provider/src/main.tsx +++ b/dapps/ethereum-provider/src/main.tsx @@ -1,10 +1,10 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import App from "./App"; -import "./index.css"; - -ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( -- Public Key: - {address} -
-+ Public Key: + {address} +
+