🌐 Web

1. Install Map3 Supercharge SDK

Ensure you have the latest version of the SDK running on your clients by installing the script below.

<head>
	<!-- other scripts and metadata !-->
	<script defer src="https://api.map3.xyz/console/relay/gh/supercharge/master/dist/global/index.js"></script>
	<link defer href="https://api.map3.xyz/console/relay/gh/supercharge/master/dist/index.css" rel="stylesheet"></link>
</head>

2. Initialize the Map3 Supercharge SDK

const initialize = () => {
  const supercharge = initMap3Supercharge({
    anonKey: '<YOUR_MAP3_ANON_KEY>',
    options: {
      callbacks: {
     		onAddressRequested: async (coin, network) => {
          // generate a deposit address to display to the user
          // we'll call this callback function before displaying
          // an address or generating a payment for the user to sign.
          const depositAddress = await getDepositAddress(coin, network);

          return { address: depositAddress };
        }, 	
      }
    }
    userId: '<YOUR_END_USER_ID>' // a user identifier (like an email or UUID)
  });
  supercharge.open()
}

document.addEventListener('DOMContentLoaded', initialize);

🚧

defer script and style

So the SDK does not block additional rendering of your app we recommend using the defer attribute.

You will need to add an event listener on the document (DOMContentLoaded) before initializing the SDK. Below you'll find an example.

window.addEventListener('DOMContentLoaded', (event) => {
	initialize()
});