From 01096a494cb9900a83cac7a40010788812a7bbfd Mon Sep 17 00:00:00 2001
From: Eason Smith <eason@smi.th>
Date: Tue, 3 Dec 2024 10:24:52 +0800
Subject: [PATCH] test keplr ethereum provider

---
 pages/ethers/index.tsx | 83 ++++++++++++++++++++++++++++++++++++++----
 1 file changed, 75 insertions(+), 8 deletions(-)

diff --git a/pages/ethers/index.tsx b/pages/ethers/index.tsx
index 23b1d96..8262dd5 100644
--- a/pages/ethers/index.tsx
+++ b/pages/ethers/index.tsx
@@ -1,7 +1,12 @@
 import { Box, Button, Text } from "@interchain-ui/react";
 import { ethers } from "ethers";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import abi from './abi.json'
+import { IEthereumProvider } from "@keplr-wallet/types";
+import { MetaMaskInpageProvider } from "@metamask/providers";
+
+type EthereumProvider = MetaMaskInpageProvider | IEthereumProvider | undefined
+type EthereumProviderType = 'keplr' | 'metamask'
 
 export default function Index() {
   const verifyingContract = '0xf67a42D581eB7d83135De8Dfe2fCccE58e5259bc'
@@ -9,31 +14,42 @@ export default function Index() {
 
   const [balance, setBalance] = useState('--')
   const [result, setResult] = useState<object | null>(null)
+  const [ethereum, setEthereum] = useState<EthereumProvider>()
+  const [selectedWallet, setSelectedWallet] = useState<EthereumProviderType>('metamask')
+
+  useEffect(()=>{
+    let ethereum:EthereumProvider = window.ethereum
+    if (selectedWallet === 'keplr') {
+      ethereum = window.keplr?.ethereum
+    }
+    setEthereum(ethereum)
+  }, [selectedWallet])
 
   const send = async () => {
     setResult(null)
-    if (!window.ethereum) {
+    if (!ethereum) {
       alert('Please install MetaMask')
       return
     }
-    const provider = new ethers.BrowserProvider(window.ethereum)
+    const provider = new ethers.BrowserProvider(ethereum)
     const wallet = await provider.getSigner()
     // wallet.signTypedData()
     const tx = await wallet.sendTransaction({
       to: addr0,
       value: '1'
     })
+    console.log('tx', tx)
     const res = await tx.wait();
     setResult(res)
     getBalance()
   }
 
   const getBalance = async () => {
-    if (!window.ethereum) {
+    if (!ethereum) {
       alert('Please install MetaMask')
       return
     }
-    const provider = new ethers.BrowserProvider(window.ethereum)
+    const provider = new ethers.BrowserProvider(ethereum)
     const wallet = await provider.getSigner()
     const address = await wallet.getAddress()
     console.log('address', address)
@@ -42,13 +58,13 @@ export default function Index() {
   }
 
   const signTypedDataTest = async () => {
-    if (!window.ethereum) {
+    if (!ethereum) {
       alert('Please install MetaMask')
       return
     }
     
     try {
-      const provider = new ethers.BrowserProvider(window.ethereum);
+      const provider = new ethers.BrowserProvider(ethereum);
       await provider.send("eth_requestAccounts", []);
       const wallet = await provider.getSigner();
 
@@ -96,13 +112,64 @@ export default function Index() {
     }
   }
 
-  return <Box display="flex" flexDirection="column" alignItems="center" justifyContent="center" height="100vh">
+  async function addEthereumChain() {
+    if (ethereum) {
+      try {
+        await ethereum.request({
+          method: "wallet_addEthereumChain",
+          params: [
+            {
+              chainId: '0x61',
+              chainName: "BSC Test",
+              nativeCurrency: {
+                name: "tBNB",
+                symbol: "tBNB",
+                decimals: 18,
+              },
+              rpcUrls: ["https://data-seed-prebsc-1-s1.binance.org:8545"],
+              blockExplorerUrls: ["https://testnet.bscscan.com"]
+            },
+          ],
+        });
+        console.log("added");
+      } catch (error) {
+        console.error("error wallet_addEthereumChain", error);
+      }
+    } else {
+      console.error("metamask not installed");
+    }
+  }
+
+  return <Box display="flex" flexDirection="column" alignItems="center" justifyContent="center" minHeight="100vh">
+    <Box marginY='1rem'>
+      <label>
+        <input
+          type="radio"
+          name="options"
+          value="keplr"
+          checked={selectedWallet === "keplr"}
+          onChange={(e)=>setSelectedWallet(e.target.value as EthereumProviderType)}
+        />
+        <Text as="span">Keplr</Text>
+      </label>
+      <label>
+        <input
+          type="radio"
+          name="options"
+          value="metamask"
+          checked={selectedWallet === "metamask"}
+          onChange={(e)=>setSelectedWallet(e.target.value as EthereumProviderType)}
+        />
+        <Text as="span">MetaMask</Text>
+      </label>
+    </Box>
     <Box display="flex" flexDirection="row" alignItems="center" justifyContent="center" marginBottom="1rem">
       <Text attributes={{marginRight: '1rem'}}>Balance: {balance}</Text>
       <Button onClick={getBalance} size="sm">Fetch</Button>
     </Box>
     <Button onClick={send}>Send</Button>
     <Button onClick={signTypedDataTest} attributes={{marginTop: '1rem'}}>signTypedDataTest</Button>
+    <Button onClick={addEthereumChain} attributes={{marginTop: '1rem'}}>addEthereumChain</Button>
     {result && <Text attributes={{whiteSpace: 'pre-line', padding: '2rem'}} as="div">{JSON.stringify(result, null, 2)}</Text>}
   </Box>
 }
\ No newline at end of file