Eth

examples/ethereum/app/page.tsx

@@ -4,12 +4,14 @@ import { Box, Button, TextField, NumberField, FieldLabel, Callout } from "@inter
 import React, { useState, useEffect } from "react"
 import { Wallet, ArrowRight, RefreshCw, AlertCircle } from "lucide-react"
 import { SignerFromBrowser } from "@interchainjs/ethereum/signers/SignerFromBrowser"
+import { parseEther, formatEther } from "@interchainjs/ethereum/utils/denominations"
 import { MetaMaskInpageProvider } from "@metamask/providers";
-import BigNumber from "bignumber.js";
 import { useChain } from '@interchain-kit/react'
 import { WalletState } from "@interchain-kit/core"
 import { BSC_TESTNET, HOLESKY_TESTNET, SEPOLIA_TESTNET } from "./provider"
 
+const CHAIN_INFO = SEPOLIA_TESTNET
+
 type EthereumProvider = MetaMaskInpageProvider
 
 // Alias Card components
@@ -26,16 +28,17 @@ export default function WalletPage() {
   const [recipient, setRecipient] = useState("")
   const [amount, setAmount] = useState<number>(0)
   const [error, setError] = useState("")
+  const [txLink, setTxLink] = useState("") // ← add success link state
   const [ethereum, setEthereum] = useState<EthereumProvider>()
 
-  const { wallet, status, connect, address: account, disconnect } = useChain(SEPOLIA_TESTNET.chainName) // chain name must be same as getProvider chain id
+  const { wallet, status, connect, address: account, disconnect } = useChain(CHAIN_INFO.chainName) // chain name must be same as getProvider chain id
 
   useEffect(() => {
     console.log('status from useChain:', status)
     if (status === WalletState.Connected) {
       const setEthProviderFromWallet = async () => {
         await new Promise(resolve => setTimeout(resolve, 500))
-        const ethProviderFromWallet = await wallet.getProvider(SEPOLIA_TESTNET.chainId) as EthereumProvider
+        const ethProviderFromWallet = await wallet.getProvider(CHAIN_INFO.chainId) as EthereumProvider
         console.log("Ethereum provider:", ethProviderFromWallet)
         setEthereum(ethProviderFromWallet)
       }
@@ -68,7 +71,7 @@ export default function WalletPage() {
       console.log('wallet in getBalance:', wallet)
       const balance = await wallet.getBalance()
       console.log('balance in getBalance:', balance)
-      setBalance(new BigNumber(balance.toString()).div(10 ** 18).toString())
+      setBalance(formatEther(balance))
     } catch (err: any) {
       console.error("Failed to get balance:", err)
       setError(err.message || "Failed to get balance")
@@ -87,6 +90,7 @@ export default function WalletPage() {
   const sendTransaction = async () => {
     setIsLoading(true)
     setError("")
+    setTxLink("") // ← clear old link
 
     try {
       if (!recipient || amount <= 0) {
@@ -98,18 +102,12 @@ export default function WalletPage() {
       }
 
       const signer = new SignerFromBrowser(ethereum!)
-
-      // Create transaction
-      const tx = {
-        to: recipient,
-        value: BigInt(new BigNumber(amount).shiftedBy(18).integerValue(BigNumber.ROUND_DOWN).toString())
-      }
-
-      // Send transaction
+      const tx = { to: recipient, value: parseEther(amount) }
       const transaction = await signer.send(tx)
 
       // Wait for confirmation
       await transaction.wait()
+      setTxLink(`${CHAIN_INFO.blockExplorerUrls[0]}/tx/${transaction.txHash}`) // ← set explorer link
 
       // Update balance
       await getBalance()
@@ -228,6 +226,20 @@ export default function WalletPage() {
           {error}
         </Callout>
       )}
+
+      {txLink && (  // ← success message
+        <Callout title="Success" className="mt-6" intent="success">
+          Transaction sent.{" "}
+          <a
+            href={txLink}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline"
+          >
+            View on Explorer
+          </a>
+        </Callout>
+      )}
     </main>
   )
 }

examples/ethereum/app/provider.tsx

@@ -6,7 +6,7 @@ import { ThemeProvider } from "@interchain-ui/react";
 import { ChainProvider } from "@interchain-kit/react";
 import { metaMaskWallet } from '@interchain-kit/metamask-extension'
 import { assetList, chain } from '@chain-registry/v2/mainnet/ethereum'
-import { createChainFromEthereumChainInfo } from '@/lib/eth-test-net';
+import { createAssetListFromEthereumChainInfo, createChainFromEthereumChainInfo } from '@/lib/eth-test-net';
 
 for (const asset of assetList.assets) {
   if (asset.symbol === 'ETH') {
@@ -33,6 +33,7 @@ export const SEPOLIA_TESTNET = {
   blockExplorerUrls: ["https://sepolia.etherscan.io"],
 }
 const sepoliaChain = createChainFromEthereumChainInfo(SEPOLIA_TESTNET)
+const sepoliaAssetList = createAssetListFromEthereumChainInfo(SEPOLIA_TESTNET)
 
 // reference: https://github.com/hyperweb-io/interchain-kit/blob/main/examples/react/src/main.tsx#L86
 export const HOLESKY_TESTNET = {
@@ -48,6 +49,7 @@ export const HOLESKY_TESTNET = {
 };
 
 const holeskyChain = createChainFromEthereumChainInfo(HOLESKY_TESTNET)
+const holeskyAssetList = createAssetListFromEthereumChainInfo(HOLESKY_TESTNET)
 
 export const BSC_TESTNET = {
   chainId: "97",
@@ -62,49 +64,8 @@ export const BSC_TESTNET = {
 };
 
 const bscChain = createChainFromEthereumChainInfo(BSC_TESTNET)
+const bscAssetList = createAssetListFromEthereumChainInfo(BSC_TESTNET)
 
-const assets = [
-  {
-    "description": "",
-    "extendedDescription": "",
-    "denomUnits": [
-      {
-        "denom": "wei",
-        "exponent": 0
-      },
-      {
-        "denom": "gwei",
-        "exponent": 9
-      },
-      {
-        "denom": "eth",
-        "exponent": 18,
-        "aliases": [
-          "ether"
-        ]
-      }
-    ],
-    "typeAsset": "evm-base",
-    "base": "wei",
-    "name": "Holesky ETH",
-    "display": "eth",
-    "symbol": "ETH",
-    "logoURIs": {
-      "png": "https://raw.githubusercontent.com/cosmos/chain-registry/master/_non-cosmos/ethereum/images/eth-white.png",
-      "svg": "https://raw.githubusercontent.com/cosmos/chain-registry/master/_non-cosmos/ethereum/images/eth-white.svg"
-    },
-    "coingeckoId": "ethereum",
-    "images": [
-      {
-        "png": "https://raw.githubusercontent.com/cosmos/chain-registry/master/_non-cosmos/ethereum/images/eth-white.png",
-        "svg": "https://raw.githubusercontent.com/cosmos/chain-registry/master/_non-cosmos/ethereum/images/eth-white.svg",
-        "theme": {
-          "primaryColorHex": "#303030"
-        }
-      }
-    ]
-  }
-]
 
 export default function Provider({
   children,
@@ -126,7 +87,9 @@ export default function Provider({
         wallets={_wallets}
         assetLists={[{
           ...assetList,
-          // assets: [...assetList.assets, ...assets]
+          ...sepoliaAssetList,
+          ...holeskyAssetList,
+          ...bscAssetList
         }]}
         signerOptions={{}}
       >

examples/ethereum/package.json

@@ -11,12 +11,12 @@
   "dependencies": {
     "@chain-registry/v2": "^1.71.188",
     "@hookform/resolvers": "^3.9.1",
-    "@interchain-kit/core": "0.3.18",
-    "@interchain-kit/keplr-extension": "0.3.18",
-    "@interchain-kit/metamask-extension": "0.3.18",
-    "@interchain-kit/react": "0.3.18",
+    "@interchain-kit/core": "0.3.23",
+    "@interchain-kit/keplr-extension": "0.3.23",
+    "@interchain-kit/metamask-extension": "0.3.23",
+    "@interchain-kit/react": "0.3.23",
     "@interchain-ui/react": "1.26.1",
-    "@interchainjs/ethereum": "^1.11.4",
+    "@interchainjs/ethereum": "1.11.9",
     "@keplr-wallet/types": "^0.12.221",
     "@metamask/providers": "^22.0.0",
     "autoprefixer": "^10.4.20",