Aptos Bridge Widget is an HTML customElement. To use it, import the file like any other javascript file in your HTML, together with the custom styles:
<script
src="https://unpkg.com/@layerzerolabs/aptos-bridge-widget@latest/element.js"
defer
integrity="sha384-${checksum}"
async
></script>
<link
rel="stylesheet"
href="https://unpkg.com/@layerzerolabs/aptos-bridge-widget@latest/element.css"
/>checksum used in the
integrityattribute is published in element.js.sha384 file
and then use it as a regular HTML element:
<aptos-bridge />see example
Customize your widget instance using the globally accessible using aptosBridge.config where you can modify the list of enabled chains, tokens and wallets. Omitting any value will fallback to defaults.
customElements.whenDefined('aptos-bridge').then(() => {
const {config} = aptosBridge;
// optional
config.setChains([108, 121, 106]); // see https://layerzero.gitbook.io/docs/technical-reference/mainnet/supported-chain-ids
// optional
config.setTokens(['ETH', 'WETH', 'USDC', 'USDT']);
// optional
config.setWallets(['Pontem', 'Martian', 'MetaMask', 'Petra', 'CoinBase']);
});// connect specific wallet
await aptosBridge.wallet.connect('MetaMask');
// access wallet info
const {evm, aptos} = aptosBridge.wallet;
if (evm) {
const {account, chainId, type} = evm;
console.log(`EVM wallet`, {account, chainId, type});
// EVM wallet {account: '0x6d9798053f498451bec79c0397f7f95b079bdcd6', chainId: 101, type: 'MetaMask'}
// disconnect
evm.disconnect();
}
if (aptos) {
const {account, chainId, type} = aptos;
console.log(`APTOS wallet`, {account, chainId, type});
// APTOS wallet {account: '0xd6efdf2b47f5cf5cae14c7f61668e816bfd34079037a9ce9eecd99a83568900b', chainId: 108, type: 'Pontem'}
// disconnect
aptos.disconnect();
}To connect via MSafe wallet follow the documentation but use the following url instead of the format provided in the docs.
In case your application needs to support deep links following API is provided:
const {bridge} = aptosBridge;
// set amount
bridge.setAmount('12');
// set chain
bridge.setSrcChainId(101);
// or
bridge.setDstChainId(101);
// set airdrop
bridge.setDstNativeAmount('0.01');
// or
bridge.setDstNativeAmount('MAX');
// get currency options
const {currencies} = bridge;
// USDC - ETH
const usdc = currencies.find((i) => i.symbol === 'USDC' && i.chainId == 101);
// select currency
bridge.setSrcCurrency(usdc);
// or
bridge.setDstCurrency(usdc);To customize the widget, change the collors, spacing or fonts in the Material UI Theme object and pass it as a string to the element:
const theme = {
breakpoints: {
keys: ['xs', 'sm', 'md', 'lg', 'xl'],
values: {
xs: 0,
sm: 600,
md: 900,
lg: 1200,
xl: 1536,
},
unit: 'px',
},
palette: {
mode: 'dark',
primary: {
main: '#2DD8A7',
light: '#2CD4A4',
contrastText: '#000000',
},
secondary: {
main: '#2E3231',
light: '#363A39',
contrastText: '#FFFFFF',
},
info: {
main: '#4CB3D4',
},
success: {
main: '#2DD8A7',
},
error: {
main: '#F44336',
},
warning: {
main: '#ED8B00',
},
text: {
primary: '#FAFAFA',
secondary: '#999A9A',
},
divider: 'rgba(250, 250, 250, 0.12)',
background: {
paper: '#1A1E1D',
default: '#121615',
},
},
shape: {
borderRadius: 0,
},
typography: {
fontFamily: '"lft-etica-mono", "Roboto Mono", monospace',
},
};
// set theme
document.querySelector('aptos-widget').setTheme(theme);