MetaMask 入门指南
安装 MetaMask
首先，需要安装 MetaMask 扩展程序。可以在 Chrome、Firefox、Edge 等浏览器的扩展商店中找到 MetaMask，然后按照安装说明进行安装。
以下是在 HTML 中安装 MetaMask 的代码示例：
<-- 引入 MetaMask 的 JavaScript 库 -->
<script src="https://cdn.jsdelivr.net/npm/@metamask/detect-provider"></script>
<!-- 检查是否安装了 MetaMask -->
<script>
async function checkMetaMask() {
// 检查是否安装了 MetaMask
const provider = await detectEthereumProvider();
if (provider) {
console.log('MetaMask is installed!');
// 连接到以太坊网络
await provider.request({ method: 'eth_requestAccounts' });
console.log('Connected to Ethereum network!');
} else {
alert('Please install MetaMask to continue.');
}
}
checkMetaMask();
</script>
创建钱包
安装完成后，可以在浏览器右上角找到 MetaMask 图标。单击该图标，然后按照指示创建一个新钱包。记得仔细保存好助记词和密码，这些信息是重要的钱包恢复和安全保护措施。
以下是基于 MetaMask 在浏览器创建钱包的代码示例：
<!-- 引入 MetaMask 的 JavaScript 库 -->
<script src="https://cdn.jsdelivr.net/npm/@metamask/detect-provider"></script>
<script src="https://cdn.jsdelivr.net/npm/ethereumjs-util"></script>
<script>
async function createWallet() {
// 检查是否安装了 MetaMask
const provider = await detectEthereumProvider();
if (!provider) {
alert('Please install MetaMask to continue.');
return;
}
// 获取用户的钱包地址
const accounts = await provider.request({ method: 'eth_requestAccounts' });
const address = accounts[0];
console.log('Wallet address:', address);
// 生成助记词和私钥
const mnemonic = await ethereum.request({ method: 'eth_generateMnemonic' });
const privateKey = ethereumjs.Util.keccak256(mnemonic).toString('hex');
console.log('Mnemonic:', mnemonic);
console.log('Private key:', privateKey);
}
// 添加点击事件监听器
const createWalletBtn = document.getElementById('create-wallet-btn');
createWalletBtn.addEventListener('click', createWallet);
</script>
连接以太坊网络
在钱包创建完成后，可以连接以太坊网络。MetaMask 支持连接以太坊主网、测试网络和私有网络。单击 MetaMask 图标，然后选择要连接的网络。
以下是基于 MetaMask 连接以太坊网络的代码示例：
<script>
async function connectNetwork() {
// 检查是否安装了 MetaMask
const provider = await detectEthereumProvider();
if (!provider) {
alert('Please install MetaMask to continue.');
return;
}
// 获取当前网络 ID
const networkId = await provider.request({ method: 'net_version' });
console.log('Network ID:', networkId);
// 检查是否连接到正确的网络
if (networkId !== '1') {
alert('Please connect to the Ethereum mainnet to continue.');
return;
}
// 连接到以太坊网络
await provider.request({ method: 'eth_requestAccounts' });
console.log('Connected to Ethereum network!');
}
// 添加点击事件监听器
const connectNetworkBtn = document.getElementById('connect-network-btn');
connectNetworkBtn.addEventListener('click', connectNetwork);
</script>
添加代币
如果需要添加代币，可以单击 MetaMask 钱包页面上的“添加资产”按钮，然后选择要添加的代币。可以通过输入代币的名称、符号或合约地址来搜索代币。
以下是基于 MetaMask 添加代币的代码示例：
<script>
async function addToken() {
// 检查是否安装了 MetaMask
const provider = await detectEthereumProvider();
if (!provider) {
alert('Please install MetaMask to continue.');
return;
}
// 获取用户的钱包地址
const accounts = await provider.request({ method: 'eth_requestAccounts' });
const address = accounts[0];
console.log('Wallet address:', address);
// 添加代币到 MetaMask
await provider.request({
method: 'wallet_watchAsset',
params: {
type: 'ERC20',
options: {
address: '0x9f8f72aa9304c8b593d555f12ef6589cc3a579a2', // 代币合约地址
symbol: 'MKR', // 代币符号
decimals: 18, // 代币小数位数
image: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1518.png' // 代币图标
}
}
});
console.log('Token added to MetaMask!');
}
// 添加点击事件监听器
const addTokenBtn = document.getElementById('add-token-btn');
addTokenBtn.addEventListener('click', addToken);
</script>
使用 MetaMask 与 DApp 交互
现在，可以使用 MetaMask 与 DApp 交互了。许多 DApp 都已经集成了 MetaMask，所以只需单击 DApp 页面上的“连接钱包”按钮，然后选择 MetaMask 钱包即可。如果 DApp 没有集成 MetaMask，需要使用 Web3.js 或其他以太坊库将 DApp 连接到 MetaMask。
以下是使用 MetaMask 与 DApp 交互的代码示例：
<!DOCTYPE html>
<html>
<head>
<title>Interact with DApp Example</title>
<!-- 引入 MetaMask 的 JavaScript 库 -->
<script src="https://cdn.jsdelivr.net/npm/@metamask/detect-provider"></script>
<!-- 引入 Web3.js 的 JavaScript 库 -->
<script src="https://cdn.jsdelivr.net/npm/web3@1.3.5/dist/web3.min.js"></script>
</head>
<body>
<h1>Interact with DApp Example</h1>
<p>Please connect to a DApp with MetaMask to continue.</p>
<button id="connect-dapp-btn">Connect DApp</button>
<div id="dapp-content" style="display: none;">
<h2>My DApp</h2>
<p>Current account: <span id="account"></span></p>
<p>Balance: <span id="balance"></span> ETH</p>
<button id="send-transaction-btn">Send Transaction</button>
</div>
<script>
async function connectDApp() {
// 检查是否安装了 MetaMask
const provider = await detectEthereumProvider();
if (!provider) {
alert('Please install MetaMask to continue.');
return;
}
// 连接到以太坊网络
await provider.request({ method: 'eth_requestAccounts' });
console.log('Connected to Ethereum network!');
// 初始化 Web3.js
const web3 = new Web3(provider);
// 获取当前账户地址
const accounts = await web3.eth.getAccounts();
const address = accounts[0];
console.log('Wallet address:', address);
// 显示 DApp 内容
document.getElementById('dapp-content').style.display = 'block';
document.getElementById('account').textContent = address;
// 获取账户余额
const balance = await web3.eth.getBalance(address);
document.getElementById('balance').textContent = web3.utils.fromWei(balance, 'ether');
// 添加发送交易事件监听器
const sendTransactionBtn = document.getElementById('send-transaction-btn');
sendTransactionBtn.addEventListener('click', async () => {
const recipient = '0x1234567890123456789012345678901234567890'; // 收款人地址
const amount = web3.utils.toWei('0.1', 'ether'); // 转账金额
const gasPrice = await web3.eth.getGasPrice(); // 获取当前 Gas 价格
const gasLimit = 21000; // Gas 限制
const nonce = await web3.eth.getTransactionCount(address); // 获取当前账户的 nonce 值
const transaction = {
from: address,
to: recipient,
value: amount,
gasPrice: gasPrice,
gas: gasLimit,
nonce: nonce
};
// 签名并发送交易
const signedTransaction = await web3.eth.accounts.signTransaction(transaction, 'YOUR_PRIVATE_KEY');
const transactionResult = await web3.eth.sendSignedTransaction(signedTransaction.rawTransaction);
console.log('Transaction result:', transactionResult);
});
}
// 添加点击事件监听器
const connectDAppBtn = document.getElementById('connect-dapp-btn');
connectDAppBtn.addEventListener('click', connectDApp);
</script>
</body>
</html>
总之，MetaMask 的入门指南非常简单，只需按照上述步骤进行操作即可。需要注意的是，MetaMask 钱包中的资产是以太坊网络上的数字资产，因此需要谨慎保护好自己的钱包和私钥。
9072
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
