Link Integration

Link integration is a quick and straightforward way to incorporate Meson's capabilities into your web3 application. It involves opening a link in a new popup window. You can achieve this using JavaScript's window.open() function.

Quick Start

Here is an example of how to open a Meson link using window.open().

Live Editor

function MesonLink() { const link = 'https://meson.to/polygon/0x243f22fbd4C375581aaACFCfff5A43793eb8A74d' return ( <button onClick={() => window.open(link, 'meson.to', 'width=375,height=640')}> Open Meson Link </button> ) }

function MesonLink() {
  const link = 'https://meson.to/polygon/0x243f22fbd4C375581aaACFCfff5A43793eb8A74d'
  return (
    <button onClick={() => window.open(link, 'meson.to', 'width=375,height=640')}>
      Open Meson Link
    </button>
  )
}

Result

Loading...

Clicking the "Open Meson Link" button will open a new window with the specified Meson link.

Link Structure

The Meson link structure is constructed as follows: https://meson.to/{chain}/{recipient_address}. The chain and recipient address are concatenated after the base URL. For testnets, replace the base URL with https://testnet.meson.to/. See supported chains and tokens.

Here's an example of a Meson link for the BNB Testnet:

Live Editor

function MesonLinkOnTestnet() { const link = 'https://testnet.meson.to/bnb-testnet/0x00C8B032c76BC8E669ce43b2bA03705Fd52A8edE' return ( <button onClick={() => window.open(link, 'meson.to', 'width=375,height=640')}> Open Meson Link on Testnet </button> ) }

function MesonLinkOnTestnet() {
  const link = 'https://testnet.meson.to/bnb-testnet/0x00C8B032c76BC8E669ce43b2bA03705Fd52A8edE'
  return (
    <button onClick={() => window.open(link, 'meson.to', 'width=375,height=640')}>
      Open Meson Link on Testnet
    </button>
  )
}

Result

Loading...

Additional Parameters

Specify Receiving Token

To specify the receiving token, append ?token={token} to the end of the link.

Live Editor

function MesonLinkWithSpecifiedToken() { const link = 'https://meson.to/polygon/0x243f22fbd4C375581aaACFCfff5A43793eb8A74d?token=usdt' return ( <button onClick={() => window.open(link, 'meson.to', 'width=375,height=640')}> Open Meson Link with Specified Token </button> ) }

function MesonLinkWithSpecifiedToken() {
  const link = 'https://meson.to/polygon/0x243f22fbd4C375581aaACFCfff5A43793eb8A74d?token=usdt'
  return (
    <button onClick={() => window.open(link, 'meson.to', 'width=375,height=640')}>
      Open Meson Link with Specified Token
    </button>
  )
}

Result

Loading...

Live Editor

function MesonLinkWithETHSpecified() { const link = 'https://meson.to/manta/0x243f22fbd4C375581aaACFCfff5A43793eb8A74d?token=eth' return ( <button onClick={() => window.open(link, 'meson.to', 'width=375,height=640')}> Open Meson Link with ETH Specified </button> ) }

function MesonLinkWithETHSpecified() {
  const link = 'https://meson.to/manta/0x243f22fbd4C375581aaACFCfff5A43793eb8A74d?token=eth'
  return (
    <button onClick={() => window.open(link, 'meson.to', 'width=375,height=640')}>
      Open Meson Link with ETH Specified
    </button>
  )
}

Result

Loading...

Specify Multiple Allowed Tokens

To set multiple allowed tokens, append ?token={t1},{t2} to the end of the link, with each token separated by a comma. The first option will be set as the default receiving token.

Live Editor

function MesonLinkWithMultipleAllowedToken() { const link = 'https://meson.to/bnb/0x243f22fbd4C375581aaACFCfff5A43793eb8A74d?token=busd,usdc' return ( <button onClick={() => window.open(link, 'meson.to', 'width=375,height=640')}> Open Meson Link with Multiple Allowed Tokens </button> ) }

function MesonLinkWithMultipleAllowedToken() {
  const link = 'https://meson.to/bnb/0x243f22fbd4C375581aaACFCfff5A43793eb8A74d?token=busd,usdc'
  return (
    <button onClick={() => window.open(link, 'meson.to', 'width=375,height=640')}>
      Open Meson Link with Multiple Allowed Tokens
    </button>
  )
}

Result

Loading...

In the above example, busd will be set as the default receiving token, and the user will also have the option deposit the recipient address with usdc.

Specify the Amount to Transfer

To specify the amount to transfer, append ?amount={amount} to the end of the link. The amount should be the actual amount of stablecoins, which can be a number with decimals.

Live Editor

function MesonLinkWithSpecifiedAmount() { const link = 'https://meson.to/polygon/0x243f22fbd4C375581aaACFCfff5A43793eb8A74d?amount=4.99' return ( <button onClick={() => window.open(link, 'meson.to', 'width=375,height=640')}> Open Meson Link with Specified Amount </button> ) }

function MesonLinkWithSpecifiedAmount() {
  const link = 'https://meson.to/polygon/0x243f22fbd4C375581aaACFCfff5A43793eb8A74d?amount=4.99'
  return (
    <button onClick={() => window.open(link, 'meson.to', 'width=375,height=640')}>
      Open Meson Link with Specified Amount
    </button>
  )
}

Result

Loading...

In the above example, the link will ask the user to transfer stablecoins with an amount of 4.99, which typically values $4.99.

It's worth noting that you can combine the use of token and amount parameters together to further customize the link. For example, appending ?token=usdt&amount=4.99 to the end of the link will specify both the token type and amount in the transfer request.

Further Integration with Meson.to SDK

For a more in-depth integration and enhanced control over the user experience, you can use the meson.to SDK which allows you to achieve the followings:

• Embed Meson within your application, eliminating the need for new windows or site redirections
• Display the name and icon of your app in Meson's popup window
• Directly interact with your app's smart contracts in a cross-chain transaction

Please check out our SDK Integration documentation for more details on how to use the Meson SDK.