如何通过safe-apps-react-sdk实现跨设备多签交易确认？

核心逻辑说明 #

Safe的2/2多签交易确认，纯前端实现的核心是：用户A发起交易后，用户B需在Safe Web App中打开你的自定义侧边栏应用，通过SDK拉取待确认交易并完成签名——所有交易数据由Safe官方服务同步，无需自建后端。

步骤1：用户B端获取待签交易 #

用户B打开应用后，先通过SDK获取当前Safe的待处理交易，再筛选出需要自己签名的目标交易：

import { useSafeAppsSDK } from '@safe-global/safe-apps-react-sdk';

const { safe, sdk } = useSafeAppsSDK();

// 获取当前Safe下需要自己签名的交易
const fetchPendingTransactions = async () => {
  try {
    // 拉取Safe的所有待处理交易
    const pendingTxs = await sdk.txs.getPending();
    
    // 筛选条件：2/2多签、已有1个签名（用户A的）、当前用户未签名
    const myPendingTxs = pendingTxs.filter(tx => {
      const hasMySignature = tx.signatures.some(sig => sig.signer === safe.safeAddress);
      return tx.threshold === 2 && tx.signatures.length === 1 && !hasMySignature;
    });
    
    return myPendingTxs;
  } catch (err) {
    console.error('获取待签交易失败:', err);
    return [];
  }
};

步骤2：用户B完成签名 #

找到目标交易后，调用SDK的签名接口，SDK会自动触发Safe的签名授权弹窗，完成后同步状态：

const signTargetTransaction = async (txId) => {
  try {
    // 传入交易ID发起签名请求
    const signRes = await sdk.txs.sign(txId);
    
    if (signRes.success) {
      alert('签名完成');
      // 刷新待签交易列表
      fetchPendingTransactions();
    }
  } catch (err) {
    console.error('签名失败:', err);
    alert('签名失败，请重试');
  }
};

步骤3：状态同步与监听 #

可以通过SDK的事件监听，自动同步交易状态变化：

import { useEffect } from 'react';

useEffect(() => {
  // 监听交易确认/执行事件
  const handleSafeEvent = (event) => {
    if (['TRANSACTION_CONFIRMED', 'TRANSACTION_EXECUTED'].includes(event.type)) {
      fetchPendingTransactions();
    }
  };

  sdk.events.on('safeEvent', handleSafeEvent);
  return () => sdk.events.off('safeEvent', handleSafeEvent);
}, [sdk]);

关键注意事项 #

• 交易标识优化：用户A发起交易时，可在交易data字段或备注中加入唯一标识（比如自定义业务ID），方便用户B的应用快速定位目标交易，避免筛选误差。
• 跨设备兼容性：所有交易数据由Safe官方服务维护，用户B无论用什么设备打开应用，都能通过SDK拉取到最新的待签交易，天然支持跨设备同步。
• 权限自动校验：SDK会自动验证当前用户是否为Safe所有者，非所有者无法发起签名，无需额外处理权限逻辑。

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