I'm currently working on a transformation of an old front-end project. The old project uses Vue as the front-end framework. How to connect to the wallet of the Sui ecosystem has always been a headache for me. In previous development, if I used the react framework, I could easily use the official one @mysten/dapp-kitto build a complete set of wallet connections, initiate transactions, and sign methods.

Among the methods provided by mysten labs, there is @mysten/wallet-standard this library, which @mysten/suican be used to build the corresponding methods for wallet connection and signature transactions. The process of connecting to the wallet is as follows:

Determine whether the user has connected to the wallet:

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

Connect your wallet

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

The following is the transfer operation. All transactions can be 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);
  }
}

Finally, you can create a function to disconnect the wallet on the 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 ');
  }
},