Tôi hiện đang làm việc trên một quá trình chuyển đổi của một dự án front-end cũ. Dự án cũ sử dụng Vue làm framework front-end. Cách kết nối với ví của hệ sinh thái Sui luôn là vấn đề đau đầu đối với tôi. Trong quá trình phát triển trước đây, nếu tôi sử dụng framework react, tôi có thể dễ dàng sử dụng khung chính thức @mysten /dapp-kit để xây dựng một tập hợp hoàn chỉnh các kết nối ví, bắt đầu giao dịch và các phương thức ký tên.

Trong số các phương pháp được cung cấp bởi mysten labs, có @mysten/wallet-standardthư viện này, @mysten/suicanđược sử dụng để xây dựng các phương thức tương ứng cho kết nối ví và giao dịch chữ ký. Quá trình kết nối với ví như sau:

Xác định xem người dùng đã kết nối với ví chưa:

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

Kết nối ví của bạn

// 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);
  }
}

Sau đây là hoạt động chuyển nhượng. Tất cả các giao dịch có thể là wallet.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);
  }
}

Cuối cùng, bạn có thể tạo một chức năng để ngắt kết nối ví trên web:

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 ');
  }
},