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:

| Error Code | Message | | ---------- | ------------------------------------------------------------------------------------------------------------- | | C01 | Campaign not deployed yet. | | C02 | Campaign not found. | | G01 | Enviroment variable not set. | | G02 | Chain not found. | | G03 | Address not found. | | G04 | Verifier private key not found. | | R01 | Not part of any eligible audiences. | | R02 | Reward has already claimed. | | R03 | Signature generation failed | | R04 | Generic error: could not claim reward | | T01 | Task not found. | | T02 | Task platform not found. | | GT01 | Gitcoin task not found. | | GT02 | Passport score too low. | | NET01 | Wrong network error. | | WT01 | NFT holding task not found. | | WT02 | Token ID not found. | | WT03 | Invalid NFT type. | | WT04 | Your wallet is not holding the correct NFT. | | WT05 | No interaction found, if you have done the task, please wait a minute and try again. | | WT06 | The parameter bound to this event was not found. | | WT07 | The operator bound to this advanced setting not found. | | WT08 | None of your interactions satisfy the required parameters. | | WT09 | Fetch to https://coins.llama.fi didn't return any data | | WT10 | An interaction was found, but the USD value of the transaction was too low | | WT11 | Invalid configuration for cumulative track event task. Good web3 task not found. | | WT12 | Invalid configuration for cumulative track event task. Good cumulative advanced setting value is not a number | | WT13 | An interaction was found, but the threshold has not been reached . | | WT14 | Invalid configuration for cumulative track event task. Bad cumulative advanced setting not found | | WT15 | Invalid configuration for cumulative track event task. Bad cumulative advanced setting value is not a number. | | WT16 | Your interaction was invalidated by an action you took, please complete the task again | | WT17 | The Web3 task bound to this task was not found. | | WT18 | Your wallet does not hold the required token | | WT19 | Your wallet does not hold enough tokens to complete this task. | | WT20 | ProtocolTransactionTask not found | | WT21 | Your wallet has not made enough transactions to complete this task. | | WT22 | Expected parameters. | | WT23 | An interaction was found, but not enough time has passed. | | WT24 | Your interaction was invalidated by an action you took |

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.