​
How to use the Adapter Integration

We offer Google, Apple, Twitter and Ethereum sign in options to your Solana dApp.


​
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 { registerMoonGateWallet } from "@moongate/moongate-adapter";

Then just add the Wallet Adapter above the wallets memo like this, you can change the order the wallets by changing the order of the registerMoonGateWallet functions:

registerMoonGateWallet({ authMode: "Ethereum", position: "top-left", logoDataUri: "OPTIONAL ADD IN-WALLET LOGO URL HERE", buttonLogoUri: "ADD OPTIONAL LOGO FOR WIDGET BUTTON HERE" })
registerMoonGateWallet({ authMode: "Google", position: "top-right", logoDataUri: "OPTIONAL ADD IN-WALLET LOGO URL HERE", buttonLogoUri: "ADD OPTIONAL LOGO FOR WIDGET BUTTON HERE" })
registerMoonGateWallet({ authMode: "Twitter", position: "top-right", logoDataUri: "OPTIONAL ADD IN-WALLET LOGO URL HERE", buttonLogoUri: "ADD OPTIONAL LOGO FOR WIDGET BUTTON HERE" })
registerMoonGateWallet({ authMode: "Apple", position: "top-right", logoDataUri: "OPTIONAL ADD IN-WALLET LOGO URL HERE", buttonLogoUri: "ADD OPTIONAL LOGO FOR WIDGET BUTTON HERE" })
const wallets = useMemo(
  () => [
    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

registerMoonGateWallet({ authMode: "Ethereum", position: "top-left", logoDataUri: "OPTIONAL ADD IN-WALLET LOGO URL HERE", buttonLogoUri: "ADD OPTIONAL LOGO FOR WIDGET BUTTON HERE" })
const wallets = useMemo(
  () => [
    new UnsafeBurnerWalletAdapter(),
  ],
  [network]
);
Full SDK Integration