69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
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<string | null>(null);
|
|
|
|
// 4. Fetch Balance on click with ethers.js
|
|
const getBalance = async () => {
|
|
const balanceFromEthers = await ethersWeb3Provider
|
|
.getSigner(provider.accounts[0])
|
|
.getBalance();
|
|
const remainder = balanceFromEthers.mod(1e14);
|
|
setBalance(ethers.utils.formatEther(balanceFromEthers.sub(remainder)));
|
|
};
|
|
|
|
// 5. Handle Disconnect
|
|
const refresh = () => {
|
|
provider.disconnect();
|
|
window.localStorage.clear();
|
|
setConnected(false);
|
|
};
|
|
|
|
if (connected) {
|
|
return (
|
|
<>
|
|
<button onClick={getBalance}>Balance</button>
|
|
<button onClick={refresh}>Refresh</button>
|
|
<p>
|
|
balance: {balance ? `${balance} ETH` : `click "Balance" to fetch`}
|
|
</p>
|
|
</>
|
|
);
|
|
}
|
|
return <button onClick={connect}>Connect with ethereum-provider</button>;
|
|
}
|
|
|
|
export default App;
|