tide-sdk

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.