# tide-sdk

> ![Version](https://img.shields.io/badge/version-0.2.32-blue.svg)

Latest version **0.2.32** (published 2024-03-25) · 0 weekly downloads

## Install

```sh
npm install tide-sdk
pnpm add tide-sdk
yarn add tide-sdk
bun add tide-sdk
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.32 |
| Published | 2024-03-25 |
| First published | 2023-05-23 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 23 |
| Unpacked size | 205.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Tide Protocol |
| Maintainers | five-elements-labs |
| Keywords | react, typescript, tide-protocol |

## Links

- npm: https://www.npmjs.com/package/tide-sdk
- npm.io page: https://npm.io/package/tide-sdk

## Dependencies (23)

- [jest](https://npm.io/package/jest.md) ^29.7.0
- [react](https://npm.io/package/react.md) ^18.2.0
- [ethers](https://npm.io/package/ethers.md) ^6.8.1
- [parcel](https://npm.io/package/parcel.md) ^2.10.2
- [ts-jest](https://npm.io/package/ts-jest.md) ^29.1.1
- [prettier](https://npm.io/package/prettier.md) ^3.0.3
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [typescript](https://npm.io/package/typescript.md) ^4.9.5
- [@types/jest](https://npm.io/package/@types/jest.md) ^27.5.2
- [@types/node](https://npm.io/package/@types/node.md) ^16.18.60
- [cross-fetch](https://npm.io/package/cross-fetch.md) ^4.0.0
- [@types/react](https://npm.io/package/@types/react.md) ^18.2.37
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
- [use-async-memo](https://npm.io/package/use-async-memo.md) ^1.2.5
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.2.15
- [jest-canvas-mock](https://npm.io/package/jest-canvas-mock.md) ^2.5.2
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.4.0
- [eslint-config-prettier](https://npm.io/package/eslint-config-prettier.md) ^9.0.0
- [eslint-plugin-prettier](https://npm.io/package/eslint-plugin-prettier.md) ^5.0.1
- [jest-environment-jsdom](https://npm.io/package/jest-environment-jsdom.md) ^29.7.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.17.0
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0
- [my-react-typescript-package](https://npm.io/package/my-react-typescript-package.md) ^1.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.32 (latest) — 2024-03-25
- 0.2.31 — 2024-03-25
- 0.2.29 — 2024-03-08
- 0.2.28 — 2023-11-23
- 0.2.27 — 2023-11-17
- 0.2.25 — 2023-11-17
- 0.2.24 — 2023-11-16
- 0.2.23 — 2023-11-16
- 0.2.22 — 2023-11-16
- 0.2.21 — 2023-11-16
- 0.2.20 — 2023-11-13
- 0.2.19 — 2023-11-13
- 0.2.17 — 2023-11-13
- 0.2.16 — 2023-11-13
- 0.2.15 — 2023-11-13
- … 15 more at https://npm.io/package/tide-sdk/versions

## README

# Tide Button SDK

![Version](https://img.shields.io/badge/version-0.2.32-blue.svg)

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:

###

```shell
$ npm install tide-sdk
```

Using yarn:

```shell
$ 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:

```javascript
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`:

```javascript
(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.

---
_Source: https://npm.io/package/tide-sdk · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._