How to detect when DOM has been updated by solana-wallets-vue with Vue3?-CodePudding

solana-wallets-vue is the VueJS version of solana-wallet. It added a button to connect your browser wallet.

This works, and connects a wallet, but right after connecting the wallet I need to know what the wallet address (public key) is.

Using all of Vue3's life cycle hooks, I can only determine what the wallet address is if I refresh, and it will then show up in onMounted

Their component is added like so

<!-- ? Wallet Connect -->
<wallet-multi-button dark></wallet-multi-button>

This is the markup that is injected into the app with their component

<div >
  <button > Select Wallet </button>
</div>

After I connect my Solana wallet, the markup will change like so, but no Vue Lifecycle event triggers:

<div >
  <div >
    <button
      
      aria-expanded="false"
      title="DqabcUFkt9UvV9wDEtK59nySRPhy71n3JuFkCcw854vL"
      style="pointer-events: auto;"
    >
      <i >
        <img src="data:image/svg xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjM0IiB3aWR0aD0iMzQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI" alt="Phantom icon">
      </i>
      <p>Dqab..54vL</p>
    </button>
    <ul aria-label="dropdown-list"  role="menu">
      <li  role="menuitem">Copy address</li>
      <li  role="menuitem"> Change wallet </li>
      <li  role="menuitem"> Disconnect </li>
    </ul>
  </div>
</div>

In the onMounted LifeCycle, I am able to see the wallet address / public, but again only if I refresh:

onMounted(async () => {
  console.log('onMounted')
  const { publicKey, sendTransaction } = useWallet()
  
  if (publicKey && publicKey.value) {
    console.log('publicKey', publicKey.value.toBase58())
  }
})

CodePudding user response：

Used watch to be able to accomplish this task.

Doc: https://vuejs.org/guide/essentials/watchers.html#basic-example

Real world example: https://www.netlify.com/blog/2021/01/29/deep-dive-into-the-vue-composition-apis-watch-method/

import { ref, computed, watch } from 'vue'

const connectedWallet = computed(() => {
  const { publicKey, sendTransaction } = useWallet()

  if (publicKey && publicKey.value) {
    return publicKey.value.toBase58()
  }
})

This watches for the change when you use the solana-wallet connect

watch(connectedWallet, async (currentValue) => {
  console.log('currentValue', currentValue)
})