fbda1b4beb
Some checks failed
Deploy to Phoenix / deploy (push) Has been cancelled
- ADD_CHAIN138_TO_LEDGER_LIVE: Ledger form done; public code review repo bis-innovations/LedgerLive; init/push commands - CONTRACT_DEPLOYMENT_RUNBOOK: Chain 138 gas price 1 gwei, 36-addr check, TransactionMirror workaround - CONTRACT_*: AddressMapper, MirrorManager deployed 2026-02-12; 36-address on-chain check - NEXT_STEPS_FOR_YOU: Ledger done; steps completable now (no LAN); run-completable-tasks-from-anywhere - MASTER_INDEX, OPERATOR_OPTIONAL, SMART_CONTRACTS_INVENTORY_SIMPLE: updates - LEDGER_BLOCKCHAIN_INTEGRATION_COMPLETE: bis-innovations/LedgerLive reference Co-authored-by: Cursor <cursoragent@cursor.com>
92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
/**
|
|
* Example: React component using the dual-chain provider
|
|
* (Chain 138 + Ethereum Mainnet, token list, oracle price)
|
|
*
|
|
* In your app, import from the provider path, e.g.:
|
|
* import { addChainsToWallet, switchChain, getEthUsdPrice, getTokensByChain } from '../provider'
|
|
* (adjust path to where metamask-integration/provider lives relative to your app)
|
|
*/
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { ethers } from 'ethers'
|
|
// In your app: import from your provider path, e.g. '../provider' or '../../provider'
|
|
import {
|
|
addChainsToWallet,
|
|
switchChain,
|
|
getEthUsdPrice,
|
|
getTokensByChain,
|
|
addTokenToWallet,
|
|
} from '../../../metamask-integration/provider/index.js'
|
|
|
|
export function DualChainConnect() {
|
|
const [account, setAccount] = useState<string | null>(null)
|
|
const [chainId, setChainId] = useState<number | null>(null)
|
|
const [ethPrice, setEthPrice] = useState<number | null>(null)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
const ethereum = typeof window !== 'undefined' ? window.ethereum : null
|
|
|
|
// Connect and sync chain
|
|
useEffect(() => {
|
|
if (!ethereum) return
|
|
ethereum.request({ method: 'eth_requestAccounts', params: [] }).then((accounts: string[]) => {
|
|
if (accounts.length) setAccount(accounts[0])
|
|
})
|
|
ethereum.request({ method: 'eth_chainId', params: [] }).then((hex: string) => {
|
|
setChainId(parseInt(hex, 16))
|
|
})
|
|
}, [ethereum])
|
|
|
|
// ETH/USD price from oracle (Chain 138 or Mainnet)
|
|
useEffect(() => {
|
|
if (!ethereum || chainId === null) return
|
|
const provider = new ethers.BrowserProvider(ethereum)
|
|
getEthUsdPrice(provider, chainId).then((result) => {
|
|
if (result) setEthPrice(result.price)
|
|
})
|
|
}, [ethereum, chainId])
|
|
|
|
const handleAddChains = async () => {
|
|
if (!ethereum) return setError('No wallet')
|
|
setError(null)
|
|
const result = await addChainsToWallet(ethereum)
|
|
console.log('Add chains:', result)
|
|
}
|
|
|
|
const handleSwitchChain = async (id: number) => {
|
|
if (!ethereum) return setError('No wallet')
|
|
setError(null)
|
|
try {
|
|
await switchChain(ethereum, id)
|
|
const hex = await ethereum.request({ method: 'eth_chainId', params: [] })
|
|
setChainId(parseInt(hex, 16))
|
|
} catch (e: any) {
|
|
setError(e.message)
|
|
}
|
|
}
|
|
|
|
const handleAddTokens = async () => {
|
|
if (!ethereum || chainId === null) return
|
|
const tokens = getTokensByChain(chainId).filter((t) => !t.tags?.includes('oracle'))
|
|
for (const token of tokens) {
|
|
try {
|
|
await addTokenToWallet(ethereum, token)
|
|
} catch (_) {}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h2>Dual-Chain (138 + Mainnet)</h2>
|
|
{account && <p>Account: {account.slice(0, 10)}…</p>}
|
|
{chainId !== null && <p>Chain ID: {chainId}</p>}
|
|
{ethPrice !== null && <p>ETH/USD: ${ethPrice.toFixed(2)}</p>}
|
|
{error && <p style={{ color: 'red' }}>{error}</p>}
|
|
<button onClick={handleAddChains}>Add Chain 138 + Mainnet</button>
|
|
<button onClick={() => handleSwitchChain(138)}>Switch to Chain 138</button>
|
|
<button onClick={() => handleSwitchChain(1)}>Switch to Mainnet</button>
|
|
<button onClick={handleAddTokens}>Add tokens for current chain</button>
|
|
</div>
|
|
)
|
|
}
|