@snag/snag-sdk

Overview

Welcome to the Snag Solutions SDK! This software development kit allows you to seamlessly integrate the Snag platform into your applications, enabling users to buy and list tokens with ease. The SDK provides a simple interface for both purchasing and listing tokens on supported chains.

Getting Started

To use the Snag SDK in your project, follow these steps:

Installation

1. Install the SDK package in your project:

npm install @snag/snag-sdk

2. Import the required styles and the SnagSDK class into your project:

import '@snag/snag-sdk/dist/styles.css';
import { SnagSDK } from '@snag/snag-sdk';

Usage

Buying Tokens

To initiate a token purchase, create a new instance of the SnagSDK class and call the buyNow method:

const snagInstance = new SnagSDK({
  chainId: YOUR_CHAIN_ID,
});

snagInstance.buyNow({
  collectionId: TARGET_COLLECTION_ID,
  tokenId: TARGET_TOKEN_ID,
});

Listing Tokens

To list a token, use the listItem method:

const snagInstance = new SnagSDK({
  chainId: YOUR_CHAIN_ID,
});

snagInstance.listItem({
  collectionId: TARGET_COLLECTION_ID,
  tokenId: TARGET_TOKEN_ID,
});

Additional Configuration

You can pass an optional twitterAccount property to the SnagSDK constructor:

const snagInstance = new SnagSDK({
  chainId: YOUR_CHAIN_ID,
  twitterAccount: YOUR_TWITTER_ACCOUNT_ID,
});

If you provide a Twitter account ID, you'll be able to share purchase news on Twitter after purchase.

Gasless Support [alpha]

If you want to support gasless transactions you can pass an optional gaslessApiKey property to the SnagSDK constructor with your Gelato Relay api key. You can also force user to buy tokens with different currency if native doesn't support gasless. You can pass forceGaslessCurrency which is ERC20 address.

const snagInstance = new SnagSDK({
  chainId: YOUR_CHAIN_ID,
  gaslessApiKey: YOUR_GELATO_API_KEY,
  forceGaslessCurrency: YOUR_CURRENCY_ADDRESS_FOR_ABOVE_CHAIN_ID,
});

Callbacks

Both buyNow and listItem methods support the following optional callbacks:

snagInstance.buyNow({
  collectionId: TARGET_COLLECTION_ID,
  tokenId: TARGET_TOKEN_ID,
  onSuccess: (response) => {
    // Handle successful execution
  },
  onFailure: (response) => {
    // Handle execution failure
  },
  onValidationFailure: (error) => {
    // Handle validation errors
  },
});

Match Marketplace Theme

To use the Snag SDK with your marketplace theme, follow these steps:

1. Pass Additional Parameter to Class Constructor:

   When initializing the Snag SDK, make sure to pass an additional parameter to the class constructor with domain set to your marketplace domain url. For example:

   const snagInstance = new SnagSDK({
     chainId: YOUR_CHAIN_ID,
     domain: 'https://domain.marketplace.com',
   });

Custom Theme

To use the Snag SDK with a custom theme where you can set all of the colours on your own, follow these steps:

1. Include Custom Theme in CSS:

   Add the following CSS code to your stylesheets to apply a custom theme to the Snag SDK Components. This example sets a custom color palette and styling:

   <style type="text/css">
     #snag-modal[data-theme='custom'] {
       --snag-font-family: 'Inter', sans-serif;
       --snag-primary: 83 109 254;
       --snag-secondary: 206 18 18;
       --snag-primary-text: 255 255 255;
       --snag-secondary-text: 100 138 180;
       --snag-separator: 56 56 56;
       --snag-success: 76 175 80;
       --snag-error: 146 21 12;
       --snag-modal-background: 47 45 45;
       --snag-modal-border-radius: 16px;
       --snag-button-border-radius: 50px;
       --snag-input-border-radius: 4px;
     }
   </style>

Note: The color values in the custom theme are specified in RGB format without commas between the numbers.

2. Pass Additional Parameter to Class Constructor:

   When initializing the Snag SDK, make sure to pass an additional parameter to the class constructor with withCustomTheme set to true. For example:

   const snagInstance = new SnagSDK({
     chainId: YOUR_CHAIN_ID,
     withCustomTheme: true
   });```

Example

Here's a complete example demonstrating the usage of the Snag SDK:

import '@snag/snag-sdk/dist/styles.css';
import { SnagSDK } from '@snag/snag-sdk';

const snagInstance = new SnagSDK({
  chainId: YOUR_CHAIN_ID,
});

snagInstance.buyNow({
  collectionId: TARGET_COLLECTION_ID,
  tokenId: TARGET_TOKEN_ID,
  onSuccess: (response) => {
    console.log('Token purchased successfully!', response.txHash);
  },
  onFailure: (response) => {
    console.error('Token purchase failed:', response?.errors);
  },
});

Happy coding with Snag SDK! If you encounter any issues or have questions, please refer to our documentation or contact support.