​

How to use the Adapter Integration

For the best user experience and maximize your conversions for both Ethereum & Solana wallet users, we recommend

This is what your user will see once they press the connect wallet button.

​

Requirements

Take-off Safety Procedures Before we accelerate, let’s check if you’re ready to go. Please ensure you are using the Solana Labs Wallet adapter in your dApp. - This SDK is built for projects utilising the Solana Labs Wallet Adapter. If you are looking to implement using another stack, talk to our staff on Discord. - If you are using a custom wallet adapter instead of the Solana Labs Wallet Adapter - speak to a member of our staff on Discord and we will custom cater our integration for you.

​

How to Integrate full SDK:

Alright, we’re ready to start integrating!

​

Step 1

On your frontend, install the dependencies using npm.

npm i @moongate/moongate-adapter

​

Step 2

Navigate to your Solana Labs wallet adapter where the wallets are defined.

It should look something like this:

const wallets = useMemo(
  () => [new UnsafeBurnerWalletAdapter()],
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [network]
);

​

Step 3

Then, import the wallet adapter from the top of the file like follows:

import { MoongateWalletAdapter } from "@moongate/moongate-adapter";

Then just add the Wallet Adapter like this:

const wallets = useMemo(
  () => [
    new MoongateWalletAdapter(), // just add this line - the higher it is in the array, the higher it will be in the wallet list
    new UnsafeBurnerWalletAdapter(),
  ],
  [network]
);

The modalStyles prop takes in a string that you can use to customize the modal. You can define your own styles in your CSS file and pass in the class name here.

​

Customisation

​

Customising the wallet pop-up position

You can customise the position of the wallet pop-up by passing in the following props to the adapter with the following list of options:

top-left
top-right
bottom-left
bottom-right

const wallets = useMemo(
  () => [
    new UnsafeBurnerWalletAdapter(),
    new MoongateWalletAdapter({ position: "top-right" }), // you can choose the location by passing in the prop here
  ],
  [network]
);