@layerzerolabs/aptos-bridge-widget

Aptos Bridge Widget

The widget

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 integrity attribute is published in element.js.sha384 file

and then use it as a regular HTML element:

<aptos-bridge />

see example

Configuration

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']);
});

Interacting with wallets

// 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();
}

MSafe Wallet

To connect via MSafe wallet follow the documentation but use the following url instead of the format provided in the docs.

https://testnet.m-safe.io/0x3025ea6f5d45f0e4d03d920ef935d80473d4b3e8ecb2d08e17eb5620d84a1c57/apps?0url=http://localhost:3099/bridge

Bridge API

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);

Theming

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);