Зараз я працюю над перетворенням старого фронтенд-проекту. Старий проект використовує Vue як фронт-енд фреймворк. Як підключитися до гаманця екосистеми Sui завжди було для мене головним болем. У попередній розробці, якби я використовував фреймворк react, я міг би легко використовувати офіційний @mysten /dapp-kit, щоб побудувати повний набір підключень до гаманця, ініціювати транзакції та підписувати методи.

Серед методів, що надаються лабораторіями mysten, є @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);
  }
}

Далі йде операція передачі. Усі транзакції можуть бути 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);
  }
}

Нарешті, ви можете створити функцію відключення гаманця в Інтернеті:

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