React应用如何迁移到EIP8650与Drinks实现虚拟饮品NFT功能

将现有的React应用接入EIP8650标准并结合Drinks协议实现虚拟饮品NFT，本质上是在前端引入一套离线授权与代付燃料费的链上交互模型。传统React项目通常直接调用钱包扩展发起交易，用户自己承担gas并等待区块确认。而EIP8650允许一个委托者先离线签署授权单，由另一个_relayer_代为提交并付费，Drinks则利用该机制把饮品NFT的铸造和兑换抽象成普通业务函数。理解这套分工，是迁移时不破坏原有页面逻辑的前提。

理解EIP8650与Drinks的协作边界

EIP8650核心是一份结构化离线消息，它记录了授权方地址、被委托方地址、允许执行的函数选择器、最大燃料上限以及一次性随机数。Drinks合约在收到_relayer_提交的交易时，会先校验这份签名是否有效，再执行具体的饮品NFT操作，比如给用户发一瓶链上可乐或咖啡。这样做的好处是终端用户不需要持有原生代币也能获得NFT，特别适合营销活动场景。

在React侧，我们必须厘清哪些状态属于本地UI，哪些状态必须等待链上回执。很多团队误把EIP8650的授权签名当成交易，在useEffect里重复触发，造成用户钱包弹窗轰炸。正确认知是：签名动作只产生一段字符串凭证，它不会消耗燃料，也不改变链上状态，只有Drinks合约被_relayer_调用时才真正落账。明确这一边界，才能把授权逻辑从原有的交易流程中干净地抽离。

另外一个常见混淆是Drinks的饮品元数据存放位置。Drinks通常将饮品名称、图片、库存等放在链下索引加链上指针的混合结构中，前端读取时需要通过合约返回的tokenURI再请求网关。这与传统React调用REST接口拿图片URL不同，需要增加一层异步解析，否则界面会先渲染空白卡片。我们在迁移时应封装统一的useDrinksMetadata钩子来处理这种延迟。

重构React状态层以容纳委托凭证

原有React应用多以account和chainId作为全局状态核心。迁移后，需要新增delegation状态保存EIP8650签名结果，以及drinksBalance表示用户持有的虚拟饮品数量。建议用React Context或者轻量状态库统一管理，避免每层组件都去监听钱包事件。下面代码展示了一个最小化的委托钩子，它只负责取得签名不发送交易。

import { useCallback, useState } from 'react';
import { ethers } from 'ethers';

// 离线授权类型，对应EIP8650草稿结构
const EIP8650_DOMAIN = {
  name: 'DrinksDelegation',
  version: '1',
  chainId: 11155111
};

export function useDelegation() {
  const [delegation, setDelegation] = useState(null);

  const signDelegation = useCallback(async (relayer, selector, maxGas) => {
    if (!window.ethereum) throw new Error('未安装钱包');
    const provider = new ethers.BrowserProvider(window.ethereum);
    const signer = await provider.getSigner();
    const nonce = Math.floor(Math.random() * 1e9);
    const payload = {
      types: {
        Delegation: [
          { name: 'from', type: 'address' },
          { name: 'relayer', type: 'address' },
          { name: 'selector', type: 'bytes4' },
          { name: 'maxGas', type: 'uint256' },
          { name: 'nonce', type: 'uint256' }
        ]
      },
      domain: EIP8650_DOMAIN,
      message: {
        from: await signer.getAddress(),
        relayer: relayer,
        selector: selector,
        maxGas: maxGas,
        nonce: nonce
      }
    };
    // 只签名不发送
    const signature = await signer.signTypedData(payload.domain, payload.types, payload.message);
    const result = { payload: payload.message, signature: signature };
    setDelegation(result);
    return result;
  }, []);

  return { delegation, signDelegation };
}

上面的钩子把签名过程完全隔离，组件调用signDelegation后拿到的是纯数据。这样做让原有页面在用户点击“领取饮品”时，先本地生成委托凭证，再交给后端_relayer_，React不需要进入交易等待态，体验更顺滑。同时随机数在本地生成，降低了与链上nonce同步的复杂度，但要求_relayer_端做去重，防止重放。

对于饮品余额展示，我们可以在委托成功后轮询Drinks合约事件，或者由_relayer_返回交易哈希后前端用useQuery监听确认。这里要注意，React严格模式会双重调用effect，若直接在其中发起签名会导致重复弹窗，因此必须用useRef锁住执行，或者把签名绑定到明确的点击事件而非渲染副作用。

接入Drinks合约与兑换链路实现

Drinks合约一般提供mintDrink(address user, uint256 drinkId, bytes delegation)这类方法，由_relayer_调用。前端要做的就是把前面拿到的委托凭证和饮品编号发给自己的服务端，服务端组装交易。下面示例展示前端如何请求后端并刷新界面，不涉及直接gas操作。

async function claimDrink(drinkId, delegation) {
  const res = await fetch('https://ipipp.com/api/drinks/claim', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      drinkId: drinkId,
      from: delegation.payload.from,
      signature: delegation.signature,
      message: delegation.payload
    })
  });
  if (!res.ok) throw new Error('兑换请求失败');
  const data = await res.json();
  // data.txHash可用于后续查询
  return data.txHash;
}

这种前后端分工让React应用保持“薄前端”特性：它只负责收集用户意图和签名，重活交给服务端_relayer_。对比原先每个用户自己发交易，新方案把燃料成本转移到了运营方，且用户路径缩短为“点按钮、签授权、看到账”。在活动页中，我们还可以用乐观更新先展示饮品卡片，等链上确认后再置为有效状态，避免界面卡顿。

迁移时还需处理错误分支。比如EIP8650签名如果过期或_relayer_地址不匹配，Drinks会回退交易。前端应捕获后端返回的特定错误码，提示用户重新授权而非笼统报错。建议在useDelegation旁扩展一个clearDelegation方法，在失败流程中清空旧凭证，防止用脏数据重复请求。经过这样分层改造，原有React代码改动集中在少数钩子和API封装，业务组件几乎无感，就完成了虚拟饮品NFT能力的平滑接入。

ReactEIP8650Drinks_NFT修改时间：2026-08-17 12:56:18