Create vote escrow popup

[deep-ink-ventures]

Visually the same pop up as in https://github.com/deep-ink-ventures/genesis-dao-frontend/issues/291

Tooltip for Vote Escrow

Implement a tooltip for the Vote Escrow feature on the asset page. This tooltip should be activated when the vote_escrow field in the asset holding item is not null.

Vote Escrow Popup Details

When users click on the Vote Escrow tooltip, a popup should display the following information about the locked tokens:

Amount: The total amount of tokens locked. Created Time: The block number when the tokens were locked. Unlock Time: The block number when the tokens will be unlocked.

Include a "Withdraw" button in the popup. This button should trigger the withdrawal process. Ensure to catch any errors during the withdrawal process and display them to the user. This approach simplifies handling different states of the locked tokens.

Lock information:

// Replace with the actual AccountId
const account = '...';

// Query locked token information
const lockInfo = await contract.query.getLock(account, { gasLimit: -1 }, account);
if (lockInfo.result.isOk) {
  const [amount, createdTime, unlockTime] = lockInfo.output.toHuman();
  console.log(`Amount: ${amount}, Created Time: ${createdTime}, Unlock Time: ${unlockTime}`);
} else {
  console.error('Error fetching lock information');
}

Withdraw:

// Replace with the actual AccountId
const account = '...';

// Withdraw locked tokens
await contract.tx.withdraw({ value, gasLimit }, account)
  .signAndSend(sender, (result) => {
    if (result.status.isInBlock) {
      console.log('Withdrawal in a block');
    } else if (result.status.isFinalized) {
      console.log('Withdrawal finalized');
    }
  }).catch((error) => {
    console.error('Withdrawal error:', error);
  });