Surface stake erc1155 token in user wallet exploration/button

[HIM92]

Description

Please perform a spike on a button or automation that would surface any stake purchased within Common to the user's wallet.

Ideal user story: I have just acquired 5 stake by minting it on Common -- I leave common by closing my browser. There is a button on common that automatically triggers them showing up in my wallet (making them visible). Later, I check my wallet and I see that my 5 stake are within my metamask (or other wallet), and then I can transfer them or keep them or do whatever I want.

[egetekiner]

Metamask supports adding custom tokens through UI/UX interactions.

To create a front-end button that adds a custom token to MetaMask, you can use the MetaMask browser extension's Ethereum API. This involves invoking the wallet_watchAsset method, which prompts the user to add a specified token to their MetaMask wallet.

Engineering Requirements:

1) UI/UX team: Needs to add a button in the design for adding tokens to the wallet. 2) Protocol/Front End team: Implement the same logic under the implementation guide.

Things to consider:

1) We need to decide what kind of button mechanism we are going to have. In Commonwealth, we are supporting a wide range of wallets and we should decide how we are going to represent multiple wallets in the UI?UX and implement the front-end logic.

Basic code implementation and implementation guide:

document.getElementById('addTokenButton').addEventListener('click', async () => {
  try {
    // Check if MetaMask is installed
    if (window.ethereum && window.ethereum.isMetaMask) {
      // ERC1155 token details
      const tokenAddress = '0xabcdef0123456789abcdef0123456789abcdef01'; // The token contract address
      const tokenId = '1337'; // The unique token ID for the ERC1155 token

      // Prompt user to add token to MetaMask
      const wasAdded = await ethereum.request({
        method: 'wallet_watchAsset',
        params: {
          type: 'ERC1155', // Specify the token type
          options: {
            address: tokenAddress, // The contract address of the ERC1155 token
            tokenId: tokenId, // The unique identifier of the token
            // Optional parameters
            symbol: 'TOKEN', // Token symbol (optional)
            decimals: 18, // Token decimals (optional)
            image: 'https://foo.io/token-image.svg', // Token image URL (optional)
          },
        },
      });

      if (wasAdded) {
        console.log('Token added!');
      } else {
        console.log('Token addition was cancelled.');
      }
    } else {
      alert('MetaMask is not installed. Please install it to use this feature.');
    }
  } catch (error) {
    console.error(error);
  }
});

Basic guide:

Front End: We should pass the address, tokenId, Symbol, and Decimals for each token. While we already implemented the balance of function for the front end, we should already have the functionality to get and pass those variables.

UI/UX: The design team should be aware that, the add token button must be unique for each communityStake token so, please implement the token accordingly.

Future Development:

For production, we will need to implement the same logic for multiple wallets we support.

Useful resources:

1) https://docs.metamask.io/wallet/reference/wallet_watchasset/ 2) https://shmoji.medium.com/prompt-users-to-add-token-to-metamask-af2b939e04b3 3) https://ethereum.stackexchange.com/questions/99343/how-to-automatically-add-a-custom-token-to-metamask-with-ethers-js

[dillchen]

@HIM92 should this be closed because we finished it?

[HIM92]

Closing for now, NFT was surfaced in a different way than was intended with this ticket.