Skip to content

Commit 9774123

Browse files
sdqedesdqede
authored
Merge pull request #42 from hyperweb-io/eth
Eth
2 parents c4ca37e + e3783f9 commit 9774123

File tree

5 files changed

+315
-162
lines changed

5 files changed

+315
-162
lines changed

‎examples/ethereum/app/page.tsx

+12-4
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { MetaMaskInpageProvider } from "@metamask/providers";
88
import BigNumber from "bignumber.js";
99
import { useChain } from '@interchain-kit/react'
1010
import { WalletState } from "@interchain-kit/core"
11+
import { BSC_TESTNET, HOLESKY_TESTNET, SEPOLIA_TESTNET } from "./provider"
1112

1213
type EthereumProvider = MetaMaskInpageProvider
1314

@@ -27,14 +28,14 @@ export default function WalletPage() {
2728
const [error, setError] = useState("")
2829
const [ethereum, setEthereum] = useState<EthereumProvider>()
2930

30-
const { wallet, status, connect, address: account, disconnect } = useChain('ethereum')
31+
const { wallet, status, connect, address: account, disconnect } = useChain(SEPOLIA_TESTNET.chainName) // chain name must be same as getProvider chain id
3132

3233
useEffect(() => {
3334
console.log('status from useChain:', status)
3435
if (status === WalletState.Connected) {
3536
const setEthProviderFromWallet = async () => {
3637
await new Promise(resolve => setTimeout(resolve, 500))
37-
const ethProviderFromWallet = await wallet.getProvider('1') as EthereumProvider
38+
const ethProviderFromWallet = await wallet.getProvider(SEPOLIA_TESTNET.chainId) as EthereumProvider
3839
console.log("Ethereum provider:", ethProviderFromWallet)
3940
setEthereum(ethProviderFromWallet)
4041
}
@@ -156,8 +157,15 @@ export default function WalletPage() {
156157
</Box>
157158

158159
<Box className="flex flex-col space-y-1">
159-
<Box className="flex justify-between items-center">
160-
<FieldLabel htmlFor="balance" label="ETH Balance">ETH Balance</FieldLabel>
160+
<Box className="flex items-center">
161+
<Box className="flex-1">
162+
<FieldLabel htmlFor="balance" label="ETH Balance">ETH Balance</FieldLabel>
163+
</Box>
164+
<Button size="sm" className="mr-2">
165+
<a href="https://cloud.google.com/application/web3/faucet/ethereum/sepolia"
166+
target="_blank"
167+
>Faucet</a>
168+
</Button>
161169
<Button onClick={refreshBalance} disabled={isLoading} size="sm">
162170
<RefreshCw className="h-4 w-4" />
163171
</Button>

‎examples/ethereum/app/provider.tsx

+107-2
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,128 @@ import { ThemeProvider } from "@interchain-ui/react";
66
import { ChainProvider } from "@interchain-kit/react";
77
import { metaMaskWallet } from '@interchain-kit/metamask-extension'
88
import { assetList, chain } from '@chain-registry/v2/mainnet/ethereum'
9+
import { createChainFromEthereumChainInfo } from '@/lib/eth-test-net';
10+
11+
for (const asset of assetList.assets) {
12+
if (asset.symbol === 'ETH') {
13+
asset.logoURIs = {
14+
png: 'https://raw.githubusercontent.com/cosmos/chain-registry/master/_non-cosmos/ethereum/images/eth-white.png',
15+
svg: 'https://raw.githubusercontent.com/cosmos/chain-registry/master/_non-cosmos/ethereum/images/eth-white.svg'
16+
}
17+
}
18+
}
919

1020
const _wallets = [
1121
metaMaskWallet,
1222
];
1323

24+
export const SEPOLIA_TESTNET = {
25+
chainId: "11155111", // 11155111(0xaa36a7)
26+
chainName: "Sepolia",
27+
rpcUrls: ["https://1rpc.io/sepolia"],
28+
nativeCurrency: {
29+
name: "Sepolia ETH",
30+
symbol: "ETH",
31+
decimals: 18,
32+
},
33+
blockExplorerUrls: ["https://sepolia.etherscan.io"],
34+
}
35+
const sepoliaChain = createChainFromEthereumChainInfo(SEPOLIA_TESTNET)
36+
37+
// reference: https://github.com/hyperweb-io/interchain-kit/blob/main/examples/react/src/main.tsx#L86
38+
export const HOLESKY_TESTNET = {
39+
chainId: "17000", // 17000 | 0x4268
40+
chainName: "Holesky",
41+
rpcUrls: ["https://1rpc.io/holesky"],
42+
nativeCurrency: {
43+
name: "Holesky ETH",
44+
symbol: "ETH",
45+
decimals: 18,
46+
},
47+
blockExplorerUrls: ["https://holesky.etherscan.io"],
48+
};
49+
50+
const holeskyChain = createChainFromEthereumChainInfo(HOLESKY_TESTNET)
51+
52+
export const BSC_TESTNET = {
53+
chainId: "97",
54+
chainName: "Binance Smart Chain Testnet",
55+
rpcUrls: ["https://data-seed-prebsc-1-s1.binance.org:8545"],
56+
nativeCurrency: {
57+
name: "BSC Testnet",
58+
symbol: "tBNB",
59+
decimals: 18,
60+
},
61+
blockExplorerUrls: ["https://testnet.bscscan.com"],
62+
};
63+
64+
const bscChain = createChainFromEthereumChainInfo(BSC_TESTNET)
65+
66+
const assets = [
67+
{
68+
"description": "",
69+
"extendedDescription": "",
70+
"denomUnits": [
71+
{
72+
"denom": "wei",
73+
"exponent": 0
74+
},
75+
{
76+
"denom": "gwei",
77+
"exponent": 9
78+
},
79+
{
80+
"denom": "eth",
81+
"exponent": 18,
82+
"aliases": [
83+
"ether"
84+
]
85+
}
86+
],
87+
"typeAsset": "evm-base",
88+
"base": "wei",
89+
"name": "Holesky ETH",
90+
"display": "eth",
91+
"symbol": "ETH",
92+
"logoURIs": {
93+
"png": "https://raw.githubusercontent.com/cosmos/chain-registry/master/_non-cosmos/ethereum/images/eth-white.png",
94+
"svg": "https://raw.githubusercontent.com/cosmos/chain-registry/master/_non-cosmos/ethereum/images/eth-white.svg"
95+
},
96+
"coingeckoId": "ethereum",
97+
"images": [
98+
{
99+
"png": "https://raw.githubusercontent.com/cosmos/chain-registry/master/_non-cosmos/ethereum/images/eth-white.png",
100+
"svg": "https://raw.githubusercontent.com/cosmos/chain-registry/master/_non-cosmos/ethereum/images/eth-white.svg",
101+
"theme": {
102+
"primaryColorHex": "#303030"
103+
}
104+
}
105+
]
106+
}
107+
]
108+
14109
export default function Provider({
15110
children,
16111
}: Readonly<{
17112
children: React.ReactNode
18113
}>) {
114+
console.log('chain', chain)
115+
console.log('assetList', assetList)
19116
return (
20117
<ThemeProvider themeMode='light'>
21118
<ChainProvider
22-
chains={[chain]}
119+
chains={[
120+
chain, // chainid = 0x1
121+
holeskyChain,
122+
bscChain,
123+
sepoliaChain
124+
]}
23125
// @ts-ignore
24126
wallets={_wallets}
25-
assetLists={[assetList]}
127+
assetLists={[{
128+
...assetList,
129+
// assets: [...assetList.assets, ...assets]
130+
}]}
26131
signerOptions={{}}
27132
>
28133
{children}

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

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
2+
import { AssetList, Chain } from "@chain-registry/v2-types";
3+
import ethereumChain from '@chain-registry/v2/mainnet/ethereum/chain'
4+
5+
type EthereumChainConfig = {
6+
chainId: string; // Chain ID in hexadecimal format
7+
chainName: string; // Human-readable name of the chain
8+
rpcUrls: string[]; // Array of RPC URLs for the chain
9+
nativeCurrency: {
10+
name: string; // Name of the native currency (e.g., "Goerli ETH")
11+
symbol: string; // Symbol of the native currency (e.g., "ETH")
12+
decimals: number; // Number of decimals for the native currency
13+
};
14+
blockExplorerUrls?: string[]; // Optional array of block explorer URLs
15+
};
16+
17+
export const createChainFromEthereumChainInfo = (etherChainInfo: EthereumChainConfig): Chain => {
18+
const newChain = {
19+
...ethereumChain,
20+
chainId: etherChainInfo.chainId,
21+
chainName: etherChainInfo.chainName,
22+
apis: {
23+
rpc: etherChainInfo.rpcUrls.map((address) => ({ address })),
24+
},
25+
}
26+
return newChain
27+
}
28+
29+
export const createAssetListFromEthereumChainInfo = (etherChainInfo: EthereumChainConfig): AssetList => {
30+
return {
31+
$schema: '../../assetlist.schema.json',
32+
chainName: etherChainInfo.chainName,
33+
assets: [
34+
{
35+
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.',
36+
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.',
37+
denomUnits: [
38+
{
39+
denom: 'wei',
40+
exponent: 0
41+
},
42+
{
43+
denom: 'gwei',
44+
exponent: 9
45+
},
46+
{
47+
denom: 'eth',
48+
exponent: etherChainInfo.nativeCurrency.decimals,
49+
aliases: ['ether']
50+
}
51+
],
52+
typeAsset: 'evm-base',
53+
base: 'wei',
54+
name: etherChainInfo.chainName,
55+
display: 'eth',
56+
symbol: etherChainInfo.nativeCurrency.symbol,
57+
logoURIs: {
58+
png: 'https://raw.githubusercontent.com/cosmos/chain-registry/master/_non-cosmos/ethereum/images/eth-white.png',
59+
svg: 'https://raw.githubusercontent.com/cosmos/chain-registry/master/_non-cosmos/ethereum/images/eth-white.svg'
60+
},
61+
coingeckoId: 'ethereum',
62+
images: [{
63+
png: 'https://raw.githubusercontent.com/cosmos/chain-registry/master/_non-cosmos/ethereum/images/eth-white.png',
64+
svg: 'https://raw.githubusercontent.com/cosmos/chain-registry/master/_non-cosmos/ethereum/images/eth-white.svg',
65+
theme: {
66+
primaryColorHex: '#303030'
67+
}
68+
}]
69+
}
70+
]
71+
}
72+
}
73+

‎examples/ethereum/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
"dependencies": {
1212
"@chain-registry/v2": "^1.71.188",
1313
"@hookform/resolvers": "^3.9.1",
14-
"@interchain-kit/core": "0.3.8",
15-
"@interchain-kit/keplr-extension": "^0.3.3",
16-
"@interchain-kit/metamask-extension": "0.3.8",
17-
"@interchain-kit/react": "0.3.8",
14+
"@interchain-kit/core": "0.3.18",
15+
"@interchain-kit/keplr-extension": "0.3.18",
16+
"@interchain-kit/metamask-extension": "0.3.18",
17+
"@interchain-kit/react": "0.3.18",
1818
"@interchain-ui/react": "1.26.1",
1919
"@interchainjs/ethereum": "^1.11.4",
2020
"@keplr-wallet/types": "^0.12.221",

0 commit comments

Comments
 (0)