Merge pull request #5 from cosmology-tech/interchain-ethereum

sent ETH successfully by interchainjs/ethereum

package.json

@@ -32,6 +32,7 @@
     "@interchain-kit/react": "0.0.1-beta.39",
     "@interchain-ui/react": "^1.23.29",
     "@interchain-ui/react-no-ssr": "^0.1.6",
+    "@interchainjs/ethereum": "1.7.0",
     "@keplr-wallet/types": "^0.12.157",
     "@metamask/providers": "^18.1.1",
     "@tanstack/react-query": "4.29.1",

pages/ethereum/index.tsx

@@ -0,0 +1,114 @@
+import { Box, Button, Text } from "@interchain-ui/react";
+import { SignerFromBrowser } from "@interchainjs/ethereum/signers/SignerFromBrowser"
+import { useEffect, useState } from "react";
+import abi from '../ethers/abi.json'
+import { IEthereumProvider } from "@keplr-wallet/types";
+import { MetaMaskInpageProvider } from "@metamask/providers";
+import BigNumber from "bignumber.js";
+
+type EthereumProvider = MetaMaskInpageProvider | IEthereumProvider | undefined
+type EthereumProviderType = 'keplr' | 'metamask'
+
+export default function Index() {
+  const verifyingContract = '0xf67a42D581eB7d83135De8Dfe2fCccE58e5259bc'
+  const addr0 = '0x0000000000000000000000000000000000000000'
+
+  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 (!ethereum) {
+      alert('Please install MetaMask')
+      return
+    }
+    const wallet = new SignerFromBrowser(ethereum)
+    const tx = await wallet.sendLegacyTransactionAutoGas(addr0, 1n, '0x', 21000n)
+    console.log('tx', tx)
+    const res = await tx.wait();
+    setResult(res)
+    getBalance()
+  }
+
+  const getBalance = async () => {
+    if (!ethereum) {
+      alert('Please install MetaMask')
+      return
+    }
+    const wallet = new SignerFromBrowser(ethereum)
+    const address = await wallet.getAddress()
+    console.log('address', address)
+    const balance = await wallet.getBalance()
+    setBalance(new BigNumber(balance.toString()).div(10**18).toString())
+  }
+
+  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={addEthereumChain} attributes={{marginTop: '1rem'}}>addEthereumChain</Button>
+    {result && <Text attributes={{whiteSpace: 'pre-line', padding: '2rem'}} as="div">{JSON.stringify(result, null, 2)}</Text>}
+  </Box>
+}

yarn.lock

@@ -1404,7 +1404,7 @@
   dependencies:
     "@ethersproject/bignumber" "^5.7.0"
 
-"@ethersproject/[email protected]":
+"@ethersproject/[email protected]", "@ethersproject/hash@^5.7.0":
   version "5.7.0"
   resolved "https://registry.yarnpkg.com/@ethersproject/hash/-/hash-5.7.0.tgz#eb7aca84a588508369562e16e514b539ba5240a7"
   integrity sha512-qX5WrQfnah1EFnO5zJv1v46a8HW0+E5xuBBDTwMFZLuVTx0tbU2kkx15NqdjxecrLGatQN9FGQKpb1FKdHCt+g==
@@ -1830,6 +1830,20 @@
     "@noble/hashes" "^1.3.1"
     decimal.js "^10.4.3"
 
+"@interchainjs/[email protected]":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@interchainjs/ethereum/-/ethereum-1.7.0.tgz#547dad8018ffedf4f1cac9bc95f79578f995ccd5"
+  integrity sha512-JFKi5/MYDHWUFIkdhEozmu9SYnFlV+1u97b1cvgkAjISPZMccJ8GSYK2OtdcbcCfmmsPDWRZfbDEeNkZKsBV7Q==
+  dependencies:
+    "@ethersproject/bignumber" "^5.7.0"
+    "@ethersproject/bytes" "^5.7.0"
+    "@ethersproject/hash" "^5.7.0"
+    "@ethersproject/transactions" "^5.7.0"
+    "@interchainjs/types" "1.6.3"
+    "@interchainjs/utils" "1.6.3"
+    "@noble/hashes" "^1.3.1"
+    ethers "^6.13.4"
+
 "@interchainjs/[email protected]":
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/@interchainjs/types/-/types-1.6.3.tgz#12765da49521f1512a1223687d2b0e9a33eeec8f"