Skip to content

Commit 89444bc

Browse files
sdqedesdqede
authored
Merge pull request #43 from hyperweb-io/eth
Eth
2 parents 9774123 + 8040fec commit 89444bc

File tree

4 files changed

+146
-192
lines changed

4 files changed

+146
-192
lines changed

‎examples/ethereum/app/page.tsx‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ import { Box, Button, TextField, NumberField, FieldLabel, Callout } from "@inter
44
import React, { useState, useEffect } from "react"
55
import { Wallet, ArrowRight, RefreshCw, AlertCircle } from "lucide-react"
66
import { SignerFromBrowser } from "@interchainjs/ethereum/signers/SignerFromBrowser"
7+
import { parseEther, formatEther } from "@interchainjs/ethereum/utils/denominations"
78
import { MetaMaskInpageProvider } from "@metamask/providers";
8-
import BigNumber from "bignumber.js";
99
import { useChain } from '@interchain-kit/react'
1010
import { WalletState } from "@interchain-kit/core"
1111
import { BSC_TESTNET, HOLESKY_TESTNET, SEPOLIA_TESTNET } from "./provider"
1212

13+
const CHAIN_INFO = SEPOLIA_TESTNET
14+
1315
type EthereumProvider = MetaMaskInpageProvider
1416

1517
// Alias Card components
@@ -26,16 +28,17 @@ export default function WalletPage() {
2628
const [recipient, setRecipient] = useState("")
2729
const [amount, setAmount] = useState<number>(0)
2830
const [error, setError] = useState("")
31+
const [txLink, setTxLink] = useState("") // ← add success link state
2932
const [ethereum, setEthereum] = useState<EthereumProvider>()
3033

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

3336
useEffect(() => {
3437
console.log('status from useChain:', status)
3538
if (status === WalletState.Connected) {
3639
const setEthProviderFromWallet = async () => {
3740
await new Promise(resolve => setTimeout(resolve, 500))
38-
const ethProviderFromWallet = await wallet.getProvider(SEPOLIA_TESTNET.chainId) as EthereumProvider
41+
const ethProviderFromWallet = await wallet.getProvider(CHAIN_INFO.chainId) as EthereumProvider
3942
console.log("Ethereum provider:", ethProviderFromWallet)
4043
setEthereum(ethProviderFromWallet)
4144
}
@@ -68,7 +71,7 @@ export default function WalletPage() {
6871
console.log('wallet in getBalance:', wallet)
6972
const balance = await wallet.getBalance()
7073
console.log('balance in getBalance:', balance)
71-
setBalance(new BigNumber(balance.toString()).div(10 ** 18).toString())
74+
setBalance(formatEther(balance))
7275
} catch (err: any) {
7376
console.error("Failed to get balance:", err)
7477
setError(err.message || "Failed to get balance")
@@ -87,6 +90,7 @@ export default function WalletPage() {
8790
const sendTransaction = async () => {
8891
setIsLoading(true)
8992
setError("")
93+
setTxLink("") // ← clear old link
9094

9195
try {
9296
if (!recipient || amount <= 0) {
@@ -98,18 +102,12 @@ export default function WalletPage() {
98102
}
99103

100104
const signer = new SignerFromBrowser(ethereum!)
101-
102-
// Create transaction
103-
const tx = {
104-
to: recipient,
105-
value: BigInt(new BigNumber(amount).shiftedBy(18).integerValue(BigNumber.ROUND_DOWN).toString())
106-
}
107-
108-
// Send transaction
105+
const tx = { to: recipient, value: parseEther(amount) }
109106
const transaction = await signer.send(tx)
110107

111108
// Wait for confirmation
112109
await transaction.wait()
110+
setTxLink(`${CHAIN_INFO.blockExplorerUrls[0]}/tx/${transaction.txHash}`) // ← set explorer link
113111

114112
// Update balance
115113
await getBalance()
@@ -228,6 +226,20 @@ export default function WalletPage() {
228226
{error}
229227
</Callout>
230228
)}
229+
230+
{txLink && ( // ← success message
231+
<Callout title="Success" className="mt-6" intent="success">
232+
Transaction sent.{" "}
233+
<a
234+
href={txLink}
235+
target="_blank"
236+
rel="noopener noreferrer"
237+
className="underline"
238+
>
239+
View on Explorer
240+
</a>
241+
</Callout>
242+
)}
231243
</main>
232244
)
233245
}

‎examples/ethereum/app/provider.tsx‎

Lines changed: 7 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ 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';
9+
import { createAssetListFromEthereumChainInfo, createChainFromEthereumChainInfo } from '@/lib/eth-test-net';
1010

1111
for (const asset of assetList.assets) {
1212
if (asset.symbol === 'ETH') {
@@ -33,6 +33,7 @@ export const SEPOLIA_TESTNET = {
3333
blockExplorerUrls: ["https://sepolia.etherscan.io"],
3434
}
3535
const sepoliaChain = createChainFromEthereumChainInfo(SEPOLIA_TESTNET)
36+
const sepoliaAssetList = createAssetListFromEthereumChainInfo(SEPOLIA_TESTNET)
3637

3738
// reference: https://github.com/hyperweb-io/interchain-kit/blob/main/examples/react/src/main.tsx#L86
3839
export const HOLESKY_TESTNET = {
@@ -48,6 +49,7 @@ export const HOLESKY_TESTNET = {
4849
};
4950

5051
const holeskyChain = createChainFromEthereumChainInfo(HOLESKY_TESTNET)
52+
const holeskyAssetList = createAssetListFromEthereumChainInfo(HOLESKY_TESTNET)
5153

5254
export const BSC_TESTNET = {
5355
chainId: "97",
@@ -62,49 +64,8 @@ export const BSC_TESTNET = {
6264
};
6365

6466
const bscChain = createChainFromEthereumChainInfo(BSC_TESTNET)
67+
const bscAssetList = createAssetListFromEthereumChainInfo(BSC_TESTNET)
6568

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-
]
10869

10970
export default function Provider({
11071
children,
@@ -126,7 +87,9 @@ export default function Provider({
12687
wallets={_wallets}
12788
assetLists={[{
12889
...assetList,
129-
// assets: [...assetList.assets, ...assets]
90+
...sepoliaAssetList,
91+
...holeskyAssetList,
92+
...bscAssetList
13093
}]}
13194
signerOptions={{}}
13295
>

‎examples/ethereum/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@
1111
"dependencies": {
1212
"@chain-registry/v2": "^1.71.188",
1313
"@hookform/resolvers": "^3.9.1",
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",
14+
"@interchain-kit/core": "0.3.23",
15+
"@interchain-kit/keplr-extension": "0.3.23",
16+
"@interchain-kit/metamask-extension": "0.3.23",
17+
"@interchain-kit/react": "0.3.23",
1818
"@interchain-ui/react": "1.26.1",
19-
"@interchainjs/ethereum": "^1.11.4",
19+
"@interchainjs/ethereum": "1.11.9",
2020
"@keplr-wallet/types": "^0.12.221",
2121
"@metamask/providers": "^22.0.0",
2222
"autoprefixer": "^10.4.20",

0 commit comments

Comments
 (0)