Swap Widget

You can add Mayan cross-chain swap widget to your website by adding a few lines of code:

(example: buybonk.com)

 <script src="https://cdn.mayan.finance/widget_ultimate-0-4-5.js"
integrity="sha256-Dem40VAlLsczlbgJyd9U20HCZiihA1UFQy96wdDqVYQ="
  crossorigin="anonymous" onload="(function () {
    const config = {
          appIdentity: {
            name: 'My Project',
            icon: './logo.png',
            uri: 'https://myproject.io',
          }
        MayanSwap.init('swap_widget', config)
  })()"
  />

That's it! You now have a fully-functional cross-chain swap on your website.

You can also configure your widget to suit your use case. For example limiting the tokens or networks.

Here is a complete example that shows different params that you can set for your widget:

<html>
<body>
  ...
  <div id="swap_widget" />
  ...
 <script src="https://cdn.mayan.finance/widget_ultimate-0-4-5.js"
integrity="sha256-Dem40VAlLsczlbgJyd9U20HCZiihA1UFQy96wdDqVYQ="
  crossorigin="anonymous" onload="(function () {
    const config = {
          appIdentity: {
            name: 'My Project',
            icon: './logo.png',
            uri: 'https://myproject.io',
          },
          rpcs: {
            solana: 'https://example.rpc.com/solana',
            ethereum: 'https://example.rpc.com/ethereum',
            polygon: 'https://example.rpc.com/polygon',
            bsc: 'https://example.rpc.com/bsc',
            avalanche: 'https://example.rpc.com/avalanche'
          },
          sourceChains: ['ethereum', 'bsc'],
          destinationChains: ['solana'],
          tokens: {
            from: {
              solana: ['sampleMintAddress1', 'sampleMintAddress2'],
              ethereum: ['0xsampleContractAddress1', '0xsampleContractAddress2'],
            },
            to: {
              solana: ['sampleMintAddress3', 'sampleMintAddress4'],
              ethereum: ['0xsampleContractAddress3', '0xsampleContractAddress4'],
            }
          },
          defaultGasDrop: {
            solana: 0.04,
            ethereum: 0.005,
          },
          colors: {
            N500: '#FF00FF',
          },
          referrerAddress: 'mysolanawallet'
        }
        MayanSwap.init('swap_widget', config)
  })()"
  /> 
...
</body>
</html>

You can customize the following properties:

  • appIdentity: This object contains information about your project, such as the name, icon, and website URL.

  • rpcs: This object contains the RPC URLs for the blockchain networks you want to support. Make sure to update these URLs with your own URLs.

  • sourceChains: List of supported source chains by the widget. To fetch list of supported tokens you can use the Token List API.

  • destinationChains: List of supported destination chains by the widget. To fetch list of supported tokens you can use the Token List API.

  • tokens: This object contains the list of token mint/contract addresses for each network you want to support. You can add or remove tokens as needed. You can check the list of supported chains by Mayan using Chain List API.

  • defaultGasDrop: You can change the default gas of "Gas on destination" for each chain. if you don't set this parameter, widget will use values from the this table.

  • referrerAddress: if you wish to receive referrer fee you can assign your wallet address to this parameter.

If you don't specify list of tokens/chains, all the the supported tokens/chains will appear.

  • colors: This object allows you to customize the colors of the widget by setting the following properties: 

type Colors = {
    N000?: string;
    N100?: string;
    N300?: string;
    N500?: string;
    N600?: string;
    N700?: string;
    N900?: string;
    tLightBlue?: string;
    green?: string;
    lightGreen?: string;
    red?: string;
    lightRed?: string;
    lightYellow?: string;
    primary?: string;
    primaryGradient?: string;
    tWhiteLight?: string;
    tWhiteBold?: string;
    mainBox?: string;
    background?: string;
    darkPrimary?: string;
    alwaysWhite?: string;
    tableBg?: string;
    transparentBg?: string;
    transparentBgDark?: string;
    buttonBackground?: string;
    toastBgRed?: string;
    toastBgNatural?: string;
    toastBgGreen?: string;
}

You can try Mayan widget with your website's design in Figma:

Listeners:

You can set listeners if you need to trigger custom actions (e.g., show notification when the swap finishes)

Mayan Swap fires events upon swap initiation, completion, or refund.

MayanSwap.setSwapInitiateListener(callback: (swap: SwapInfo) => void)
MayanSwap.setSwapCompleteListener(callback: (swap: SwapInfo) => void)
MayanSwap.setSwapRefundListener(callback: (swap: SwapInfo) => void)
type SwapInfo = {
    hash: string,
    fromChain: string,
    toChain: string,
    fromToken: string,
    toToken: string,
    fromAmount: number
}

Note: even when the widget isn't on the DOM, the callbacks will still be invoked if you set them.

To avoid unexpected errors, you can remove the listeners:

MayanSwap.removeSwapInitiateListener() MayanSwap.removeSwapCompleteListener() MayanSwap.removeSwapRefundListener()

Default destination wallet

You can set default destination wallets so users don't need to connect their destination wallet:

destinationWallets: { 
    solana: 'solanaWalletAddress',
    ethereum: 'ethereumWalletAddress'
},
PreviousReferralNextUser Manual

Last updated