Swap Widget
You can add Mayan cross-chain swap widget to your website by adding few lines of code:
<html>
<body>
...
<div id="swap_widget" />
...
<script src="https://cdn.mayan.finance/widget_ultimate-0-3-4.js"
integrity="sha256-VbdFDCwKQ4gyP5EaT1awOft2cgMN6eqz+rr0FnUeylg="
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>
In the example configuration object above, 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, you can get the list of all supported chains from Chains. 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;
}
Mayan Widget Color Pallet
You can try Mayan widget with your website's design in Figma:
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()Last modified 8d ago