npm package: @layerzerolabs/aptos-bridge-widget
Description: ### The widget
Latest version: 0.0.0-alpha.27-mainnet.15

## 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:

```html
<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](https://unpkg.com/@layerzerolabs/aptos-bridge-widget@latest/element.js.sha384) file

and then use it as a regular HTML element:

```html
<aptos-bridge />
```

> see [example](https://unpkg.com/@layerzerolabs/aptos-bridge-widget@latest/index.html)

### 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.

```javascript
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

```typescript
// 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](https://doc.m-safe.io/msafe/developers/integrate-with-msafe-dapp/integration-test) 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:

```typescript
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:

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