如何在Next.js应用中使用Meteor Wallet在NEAR上签名消息？

1. 安装必要依赖 #

先安装NEAR核心库和Meteor Wallet适配包：

npm install near-api-js @near-wallet-selector/core @near-wallet-selector/meteor-wallet

2. 编写Next.js客户端组件 #

钱包交互需在浏览器端执行，组件要添加'use client'指令，以下是完整实现示例：

'use client';

import { useEffect, useState } from 'react';
import { setupWalletSelector } from '@near-wallet-selector/core';
import { setupMeteorWallet } from '@near-wallet-selector/meteor-wallet';
import { utils } from 'near-api-js';

export default function SignMessagePage() {
  const [selector, setSelector] = useState(null);
  const [wallet, setWallet] = useState(null);
  const [signedResult, setSignedResult] = useState(null);

  // 初始化钱包选择器
  useEffect(() => {
    const initSelector = async () => {
      const selectorInstance = await setupWalletSelector({
        network: 'testnet', // 切换为'mainnet'即可适配主网
        modules: [setupMeteorWallet()],
      });
      setSelector(selectorInstance);

      // 检测已连接的钱包
      const existingWallet = await selectorInstance.wallet();
      if (existingWallet) setWallet(existingWallet);
    };

    initSelector();
  }, []);

  // 连接Meteor Wallet
  const connectWallet = async () => {
    if (!selector) return;
    const walletInstance = await selector.wallet('meteor-wallet');
    await walletInstance.signIn({
      contractId: 'your-test-account.testnet', // 填写测试网账户/合约ID，主网对应修改格式
    });
    setWallet(walletInstance);
  };

  // 签名"hello"消息
  const signHelloMessage = async () => {
    if (!wallet) return;

    // 将字符串消息转为NEAR签名要求的Uint8Array格式
    const message = new TextEncoder().encode('hello');
    // 调用钱包签名方法
    const signature = await wallet.signMessage({
      message,
      recipient: 'your-backend-account.testnet', // 可选，填写后端账户ID或留空
    });

    // 格式化签名结果为可读格式
    const formattedResult = {
      publicKey: signature.publicKey.toString(),
      signature: utils.convertUint8ArrayToHex(signature.signature),
      message: 'hello',
    };
    setSignedResult(formattedResult);
  };

  return (
    <div>
      <h2>NEAR消息签名测试</h2>
      {!wallet ? (
        <button onClick={connectWallet}>连接Meteor Wallet</button>
      ) : (
        <>
          <p>已连接账户: {wallet.accountId}</p>
          <button onClick={signHelloMessage}>签名"hello"消息</button>
        </>
      )}
      {signedResult && (
        <div>
          <h3>签名结果:</h3>
          <p>公钥: {signedResult.publicKey}</p>
          <p>签名值: {signedResult.signature}</p>
        </div>
      )}
    </div>
  );
}

关键说明 #

• 网络适配：切换network值即可在测试网/主网间切换，同时对应修改账户/合约ID的后缀格式。
• 消息格式：NEAR签名要求消息必须为Uint8Array，因此需要用TextEncoder转换字符串。
• 场景区分：你之前参考的后端登录逻辑是用于账户授权登录场景，而签名消息直接调用钱包实例的signMessage方法即可，无需复用登录流程代码。
• Next.js限制：必须标记为客户端组件（添加'use client'），因为钱包交互依赖浏览器环境。

内容的提问来源于stack exchange，提问作者Matthew M