@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="URL to NPM package/element.js" defer async></script>
<link rel="stylesheet" href="URL to NPM package/element.css" />

and then use it as a regular HTML element:

<aptos-bridge />

Configuration

Customise your widget instance using the globally accessible aptosBridgeConfig store, where you can modify the list of enabled chains, tokens and wallets. Ommiting any value will fallback to defaults.

customElements.whenDefined('aptos-bridge').then(() => {
  // optional
  // see https://layerzero.gitbook.io/docs/technical-reference/mainnet/supported-chain-ids
  aptosBridgeConfig.setChains([20008, 20121]);
  // optional
  aptosBridgeConfig.setTokens(['ETH', 'WETH', 'USDC', 'USDT']);
  // optional
  aptosBridgeConfig.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);