@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 async></script>
<link rel="stylesheet" href="https://unpkg.com/@layerzerolabs/aptos-bridge-widget@latest/element.css" />

and then use it as a regular HTML element:

<aptos-bridge />

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(() => {
  // optional
  // see https://layerzero.gitbook.io/docs/technical-reference/mainnet/supported-chain-ids
  aptosBridge.config.setChains([20008, 20121]);
  // optional
  aptosBridge.config.setTokens(['ETH', 'WETH', 'USDC', 'USDT']);
  // optional
  aptosBridge.config.setWallets(['Pontem', 'Martian', 'Fewcha', 'MetaMask', 'CoinBase']);
});

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