tide-sdk v0.2.32

Tide Button SDK

The Tide Button SDK is an embeddable button that can be added to any website to check eligibility for a specific Tide campaign, perform some tasks, and mint a Participation Badge. This SDK is designed to be integrated into React projects and provides a convenient way to engage with Tide campaigns.

Features

• Check eligibility for a specific Tide campaign.
• Perform one or more tasks and mint an NFT badge with just one click. Only Web3 and Gitcoin tasks are currently supported.
• One simple React component for easy integration.

Getting Started

1. Install the tide-sdk npm package

First, you need to install the tide-sdk npm package as a dependency in your project. You can do this using npm or yarn, depending on your preference. Open your project directory in the terminal and run one of the following commands:

Using npm:

$ npm install tide-sdk

Using yarn:

$ yarn add tide-sdk

2. Import and use the TideButton component:

Once the package is installed, you can import and use the TideButton component in your React application. Here's an example of how to do it:

import React from 'react';
import { TideButton, SdkError } from 'tide-sdk';

function App() {
  // You need to provide a JSON RPC signer and a campaign ID to the `TideButton` component.
  // The `signer` should be an instance of `JsonRpcSigner` from the `ethers` package.
  // The `campaignId` is a string representing the campaign you want to claim. You can find the `campaignId` at the end of the campaign URL.
  // example: https://www.tideprotocol.xyz/users/campaign/d3b784db-4c10-4cca-b4f6-fca203f11b3c => `campaignId` = 'd3b784db-4c10-4cca-b4f6-fca203f11b3c'

  const signer = /* Your `JsonRpcSigner` instance */;
  const campaignId = /* Your `campaignId` as a string */;
  const onError = (error: SdkError) => {
    // Handle possible errors such as 'Campaign not deployed yet.' here"
    console.error('SDK Error:', error);
  };

  return (
    <div className="App">
      {/* Render the `TideButton` component */}
      <TideButton signer={signer} campaignId={campaignId} onError={onError} />
    </div>
  );
}

export default App;

3. Handling Errors:

The onError callback function is provided to handle errors that may occur during the interaction with the Tide SDK. You should implement error-handling logic within a separate function to provide feedback to users when errors occur. The function parameter type is described in SdkError:

(error: { code: string; message: string }) => void

Errors are mapped to the following:

Conclusions

That's it! With these steps, you can integrate the TideButton component into your React application and enable users to claim campaigns on the Tide Protocol with just one click.