Actualmente estoy trabajando en la transformación de un antiguo proyecto de front-end. El proyecto anterior usa Vue como marco de interfaz. Cómo conectarme a la billetera del ecosistema Sui siempre ha sido un quebradero de cabeza para mí. En desarrollos anteriores, si utilizaba el framework react, podía usar fácilmente el oficial @mysten /dapp-kit para crear un conjunto completo de conexiones de monederos, iniciar transacciones y firmar métodos.

Entre los métodos proporcionados por mysten labs, se encuentra @mysten/wallet-standardesta biblioteca, que @mysten/suicansirve para crear los métodos correspondientes para la conexión con monederos y las transacciones de firma. El proceso de conexión a la billetera es el siguiente:

Determine si el usuario se ha conectado a la billetera:

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

Conecta tu billetera

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

La siguiente es la operación de transferencia. Todas las transacciones pueden ser 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);
  }
}

Por último, puedes crear una función para desconectar el monedero en la 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 ');
  }
},