Eth

examples/ethereum/app/page.tsx

@@ -8,6 +8,7 @@ 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"
 
 type EthereumProvider = MetaMaskInpageProvider
 
@@ -27,14 +28,14 @@ export default function WalletPage() {
   const [error, setError] = useState("")
   const [ethereum, setEthereum] = useState<EthereumProvider>()
 
-  const { wallet, status, connect, address: account, disconnect } = useChain('ethereum')
+  const { wallet, status, connect, address: account, disconnect } = useChain(SEPOLIA_TESTNET.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('1') as EthereumProvider
+        const ethProviderFromWallet = await wallet.getProvider(SEPOLIA_TESTNET.chainId) as EthereumProvider
         console.log("Ethereum provider:", ethProviderFromWallet)
         setEthereum(ethProviderFromWallet)
       }
@@ -156,8 +157,15 @@ export default function WalletPage() {
                 </Box>
 
                 <Box className="flex flex-col space-y-1">
-                  <Box className="flex justify-between items-center">
-                    <FieldLabel htmlFor="balance" label="ETH Balance">ETH Balance</FieldLabel>
+                  <Box className="flex items-center">
+                    <Box className="flex-1">
+                      <FieldLabel htmlFor="balance" label="ETH Balance">ETH Balance</FieldLabel>
+                    </Box>
+                    <Button size="sm" className="mr-2">
+                      <a href="https://cloud.google.com/application/web3/faucet/ethereum/sepolia"
+                        target="_blank"
+                      >Faucet</a>
+                    </Button>
                     <Button onClick={refreshBalance} disabled={isLoading} size="sm">
                       <RefreshCw className="h-4 w-4" />
                     </Button>

examples/ethereum/app/provider.tsx

@@ -6,23 +6,128 @@ 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';
+
+for (const asset of assetList.assets) {
+  if (asset.symbol === 'ETH') {
+    asset.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'
+    }
+  }
+}
 
 const _wallets = [
   metaMaskWallet,
 ];
 
+export const SEPOLIA_TESTNET = {
+  chainId: "11155111", // 11155111(0xaa36a7)	
+  chainName: "Sepolia",
+  rpcUrls: ["https://1rpc.io/sepolia"],
+  nativeCurrency: {
+    name: "Sepolia ETH",
+    symbol: "ETH",
+    decimals: 18,
+  },
+  blockExplorerUrls: ["https://sepolia.etherscan.io"],
+}
+const sepoliaChain = createChainFromEthereumChainInfo(SEPOLIA_TESTNET)
+
+// reference: https://github.com/hyperweb-io/interchain-kit/blob/main/examples/react/src/main.tsx#L86
+export const HOLESKY_TESTNET = {
+  chainId: "17000", // 17000 | 0x4268
+  chainName: "Holesky",
+  rpcUrls: ["https://1rpc.io/holesky"],
+  nativeCurrency: {
+    name: "Holesky ETH",
+    symbol: "ETH",
+    decimals: 18,
+  },
+  blockExplorerUrls: ["https://holesky.etherscan.io"],
+};
+
+const holeskyChain = createChainFromEthereumChainInfo(HOLESKY_TESTNET)
+
+export const BSC_TESTNET = {
+  chainId: "97",
+  chainName: "Binance Smart Chain Testnet",
+  rpcUrls: ["https://data-seed-prebsc-1-s1.binance.org:8545"],
+  nativeCurrency: {
+    name: "BSC Testnet",
+    symbol: "tBNB",
+    decimals: 18,
+  },
+  blockExplorerUrls: ["https://testnet.bscscan.com"],
+};
+
+const bscChain = createChainFromEthereumChainInfo(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,
 }: Readonly<{
   children: React.ReactNode
 }>) {
+  console.log('chain', chain)
+  console.log('assetList', assetList)
   return (
     <ThemeProvider themeMode='light'>
       <ChainProvider
-        chains={[chain]}
+        chains={[
+          chain, // chainid = 0x1
+          holeskyChain,
+          bscChain,
+          sepoliaChain
+        ]}
         // @ts-ignore
         wallets={_wallets}
-        assetLists={[assetList]}
+        assetLists={[{
+          ...assetList,
+          // assets: [...assetList.assets, ...assets]
+        }]}
         signerOptions={{}}
       >
         {children}

examples/ethereum/lib/eth-test-net.ts

@@ -0,0 +1,73 @@
+
+import { AssetList, Chain } from "@chain-registry/v2-types";
+import ethereumChain from '@chain-registry/v2/mainnet/ethereum/chain'
+
+type EthereumChainConfig = {
+  chainId: string; // Chain ID in hexadecimal format
+  chainName: string; // Human-readable name of the chain
+  rpcUrls: string[]; // Array of RPC URLs for the chain
+  nativeCurrency: {
+    name: string; // Name of the native currency (e.g., "Goerli ETH")
+    symbol: string; // Symbol of the native currency (e.g., "ETH")
+    decimals: number; // Number of decimals for the native currency
+  };
+  blockExplorerUrls?: string[]; // Optional array of block explorer URLs
+};
+
+export const createChainFromEthereumChainInfo = (etherChainInfo: EthereumChainConfig): Chain => {
+  const newChain = {
+    ...ethereumChain,
+    chainId: etherChainInfo.chainId,
+    chainName: etherChainInfo.chainName,
+    apis: {
+      rpc: etherChainInfo.rpcUrls.map((address) => ({ address })),
+    },
+  }
+  return newChain
+}
+
+export const createAssetListFromEthereumChainInfo = (etherChainInfo: EthereumChainConfig): AssetList => {
+  return {
+    $schema: '../../assetlist.schema.json',
+    chainName: etherChainInfo.chainName,
+    assets: [
+      {
+        description: 'Ethereum is a decentralized blockchain platform for running smart contracts and dApps, with Ether (ETH) as its native cryptocurrency, enabling a versatile ecosystem beyond just digital currency.',
+        extendedDescription: 'Ethereum, symbolized as ETH, is a groundbreaking cryptocurrency and blockchain platform introduced in 2015 by a team led by Vitalik Buterin. Unlike Bitcoin, which primarily serves as a digital currency, Ethereum is designed to be a decentralized platform for running smart contracts and decentralized applications (dApps). These smart contracts are self-executing contracts with the terms directly written into code, enabling trustless and automated transactions without intermediaries. Ethereum\'s blockchain can host a wide variety of applications, from financial services to gaming, making it a versatile and powerful tool in the world of blockchain technology.\n\nOne of the most notable features of Ethereum is its native cryptocurrency, Ether (ETH), which is used to pay for transaction fees and computational services on the network. Ethereum has also been the backbone for the explosive growth of decentralized finance (DeFi), which seeks to recreate traditional financial systems with blockchain-based alternatives. Additionally, Ethereum is undergoing a significant upgrade known as Ethereum 2.0, which aims to improve scalability, security, and energy efficiency through a shift from proof-of-work (PoW) to proof-of-stake (PoS) consensus mechanisms. This transition is expected to enhance the network\'s performance and reduce its environmental impact, further solidifying Ethereum\'s position as a leading platform in the blockchain ecosystem.',
+        denomUnits: [
+          {
+            denom: 'wei',
+            exponent: 0
+          },
+          {
+            denom: 'gwei',
+            exponent: 9
+          },
+          {
+            denom: 'eth',
+            exponent: etherChainInfo.nativeCurrency.decimals,
+            aliases: ['ether']
+          }
+        ],
+        typeAsset: 'evm-base',
+        base: 'wei',
+        name: etherChainInfo.chainName,
+        display: 'eth',
+        symbol: etherChainInfo.nativeCurrency.symbol,
+        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'
+          }
+        }]
+      }
+    ]
+  }
+}
+

examples/ethereum/package.json

@@ -11,10 +11,10 @@
   "dependencies": {
     "@chain-registry/v2": "^1.71.188",
     "@hookform/resolvers": "^3.9.1",
-    "@interchain-kit/core": "0.3.8",
-    "@interchain-kit/keplr-extension": "^0.3.3",
-    "@interchain-kit/metamask-extension": "0.3.8",
-    "@interchain-kit/react": "0.3.8",
+    "@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-ui/react": "1.26.1",
     "@interchainjs/ethereum": "^1.11.4",
     "@keplr-wallet/types": "^0.12.221",