我目前正在对一个旧的前端项目进行改造. 旧项目使用 Vue 作为前端框架. 如何连接到Sui生态系统的钱包一直是我头疼的问题. 在之前的开发中，如果我使用反应框架，我可以轻松地使用官方的 @mysten /dapp-kit来构建一套完整的钱包连接、启动交易和签署方法.

在mysten labs提供的方法中，有@mysten/wallet-standard这个库，@mysten/suican用于为钱包连接和签名交易构建相应的方法.
连接钱包的过程如下：

确定用户是否已连接到钱包：

 initWallet() {
      const connectedWallet = window.localStorage.getItem("connectedWallet")
      const connectedAddress = window.localStorage.getItem("connectedAddress")
      if (connectedWallet && this.supportWallets.includes(connectedWallet) && connectedAddress) {
        this.connectWallet(connectedWallet)
      }
    }

连接你的钱包

// Connect Wallet (e.g., Slush)
async connectWallet(walletName) {
  try {
    const availableWallets = getWallets().get();
    let wallet = availableWallets.find(e => e.name === walletName);
    await wallet.features['standard:connect'].connect();

    if (wallet.accounts.length > 0) {
      // Usually the first account is the currently active address
      const address = wallet.accounts[0].address;
      this.connectedWallet = wallet.name;
      this.address = address;
      window.localStorage.setItem("connectedAddress", address);
      window.localStorage.setItem("connectedWallet", wallet.name);
    }

    // Listen for wallet address changes or disconnection
    wallet.features['standard:events'].on('change', (event) => {
      // Logic for when the current wallet address doesn't match the stored address or when disconnected
      if (event.accounts.length === 0 || event.accounts[0].address !== this.address) {
        console.log('User changed accounts or disconnected...');
        setTimeout(() => {
          window.localStorage.removeItem("connectedAddress");
          window.localStorage.removeItem("connectedWallet");
          window.location.reload();
        }, 1000);
      }
    });
  } catch (error) {
    console.log(error);
  }
}

以下是传输操作.
所有交易都可以是钱包. features ['sui: signTransaction'] .signTransactionSigned:

async transferSui() {
  try {
    const wallet = getWallets().get().find(e => e.name === this.connectedWallet)
    const amount = this.amount
    const toAddress = this.toAddress
    const tx = new Transaction()
    const [coin] = tx.splitCoins(tx.gas, [amount * 1e9])
    tx.transferObjects([coin], toAddress)
    const { bytes, signature } = await wallet.features['sui:signTransaction'].signTransaction({
      transaction: tx,
      account: wallet.accounts[0],
      chain: `sui:${import.meta.env.VITE_SUPPORT_NETWORK}`
    });
    const executeRes = await suiClient.executeTransactionBlock({
      transactionBlock: bytes,
      signature: signature,
      options: {
        showEffects: true,
        showObjectChanges: true,
        showBalanceChanges: true,
        showEvents: true,
        showInput: true
      }
    });
    this.hash = executeRes.digest
  } catch (error) {
    console.log(error);
  }
}

最后，你可以创建一个函数来断开网络上钱包的连接：

async disconnectWallet() {
  try {
    const availableWallets = getWallets().get();
    const walletName = window.localStorage.getItem("connectedWallet")
    let wallet = availableWallets.find(e => e.name === walletName)
    await wallet.features['standard:disconnect'].disconnect();
    window.localStorage.removeItem("connectedAddress")
    window.localStorage.removeItem("connectedWallet")
    window.location.reload()
  } catch (error) {
    console.log('meet some errors ');
  }
},