Getting Started
Quick Start

Quick Start Guide

Introduction

Welcome to the Tenderizers SDK Quick Start Guide. This guide will help you get up and running quickly with the Tenderizers SDK by providing a complete example of how to set up and use the SDK in your application.

Installation

First, install the Tenderizers SDK using your preferred package manager:

npm i @tenderize/sdk

Tenderizer Configuration

The Tenderize SDK supports Matic, Livepeer, and Graph tokens. For each token, provide the address of the corresponding tenderizer to enable staking, withdrawing, and swapping within the SDK.

TENDERIZERS
import { TokenSlugEnums, TenderizersConfig } from "@tenderize/sdk";
 
const TENDERIZERS: TenderizersConfig = {
  [TokenSlugEnums.MATIC]: "0x4557B18E779944BFE9d78A672452331C186a9f48",
  [TokenSlugEnums.LIVEPEER]: "0x4557B18E779944BFE9d78A672452331C186a9f48",
  [TokenSlugEnums.GRAPH]: "0x4557B18E779944BFE9d78A672452331C186a9f48",
};

Chain Configuration

To ensure smooth operation, set up the mainnet and Arbitrum chain configurations. The SDK supports both the mainnet and Arbitrum chains. The mainnet chain is used for Matic tokens, while the Arbitrum chain supports Livepeer and Graph tokens.

First, install the recommended package to manage the chains:

npm i wagmi
ℹ️

While any chain provider can be used, we recommend wagmi for its seamless integration with our SDK.

Chains
import { arbitrum, mainnet } from "wagmi/chains";
// Note: While any chain provider can be used, we recommend wagmi for its seamless integration with our SDK.
 
import { TokenSlugEnums } from "@tenderize/sdk";
 
const mainnetChain = {
  ...mainnet,
};
 
const arbitrumChain = {
  ...arbitrum,
};
 
const CHAINS: TenderizeChains = {
  [TokenSlugEnums.MATIC]: mainnetChain, // Matic on mainnet
  [TokenSlugEnums.LIVEPEER]: arbitrumChain, // Livepeer on arbitrum
  [TokenSlugEnums.GRAPH]: arbitrumChain, // Graph on arbitrum
};

Set up config

Here is an example of how to set up the config for Tenderizers SDK in your application:

Set up config
import {
  createTenderizeConfig,
  TenderizeProvider,
  Web3Provider,
  ThemeProvider,
  TokenSlugEnums,
} from "@tenderize/sdk";
 
// Configuration setup using createTenderizeConfig
const config = createTenderizeConfig({
  appName: "Tenderize App",
  tenderizers: TENDERIZERS,
  chains: CHAINS,
  tokens: [TokenSlugEnums.MATIC, TokenSlugEnums.LIVEPEER, TokenSlugEnums.GRAPH],
  apiKey: ALCHEMY_API_KEY as string,
   walletConnectProjectId: WALLETCONNECT_PROJECT_ID as string,
});

Comprehensive Integration Example with Default web3 Configuration

Here’s how you can integrate everything together in your application using the TenderizeProvider, Web3Provider, and ThemeProvider components. In this example, we use the default web3 configuration from config.web3.

Example Usage

CompleteExample
import {
  createTenderizeConfig,
  TenderizeProvider,
  Web3Provider,
  ThemeProvider,
} from "@tenderize/sdk";
// Configuration setup using createTenderizeConfig
const config = createTenderizeConfig({
  appName: "Tenderize App",
  tenderizers: TENDERIZERS,
  chains: CHAINS,
  tokens: [TokenSlugEnums.MATIC, TokenSlugEnums.LIVEPEER, TokenSlugEnums.GRAPH],
  apiKey: ALCHEMY_API_KEY as string,
  walletConnectProjectId: WALLETCONNECT_PROJECT_ID as string,
});
// Application structure using TenderizeProvider, Web3Provider, and ThemeProvider
<TenderizeProvider config={config}>
  {/* Default web3 configuration */}
  <Web3Provider config={config.web3}>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </Web3Provider>
</TenderizeProvider>;

Explanation

Configuration Setup

Application Structure

  • Enclose the application within TenderizeProvider, Web3Provider, and ThemeProvider to supply the necessary context and configuration to the application components.

Integrating a Custom Web3 Provider

If you have a custom Web3 provider, you can integrate it seamlessly into your application by passing it to the Web3Provider component. This approach demonstrates the flexibility of using a custom Web3 provider with the Tenderize SDK.

Important Note

ℹ️

Ensure that the CustomWeb3Provider is configured correctly to avoid any errors within the SDK. The following example illustrates how to pass your custom provider to the Web3Provider component.

Example Usage

CustomWeb3Provider
import { YourWeb3Provider } from "@your-provider";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
const queryClient = new QueryClient();
 
function CustomWeb3Provider({ children }: { children: React.ReactNode }) {
  return (
    <YourWeb3Provider config={config.web3}>
      <QueryClientProvider client={queryClient}>
        <WalletConnectProvider>{children}</WalletConnectProvider>
      </QueryClientProvider>
    </YourWeb3Provider>
  );
}
 
export default CustomWeb3Provider;
ℹ️

Note: The Tenderize SDK uses ConnectKitProvider for wallet connection. Ensure that you configure your WalletConnectProvider inside your CustomWeb3Provider.

Complete Example with Custom Web3 Configuration

Below is a comprehensive example of how to integrate the Tenderize SDK using a custom web3 configuration. This demonstrates the flexibility and customization options available for integrating your own web3 provider.

Example Usage

CompleteExampleWithCustomWeb3
import {
  createTenderizeConfig,
  TenderizeProvider,
  ThemeProvider,
} from "@tenderize/sdk";
import { CustomWeb3Provider } from "@your-provider";
 
// Configuration setup using createTenderizeConfig
const config = createTenderizeConfig({
  appName: "Tenderize App",
  tenderizers: TENDERIZERS,
  chains: CHAINS,
  tokens: [TokenSlugEnums.MATIC, TokenSlugEnums.LIVEPEER, TokenSlugEnums.GRAPH],
  apiKey: ALCHEMY_API_KEY as string,
  walletConnectProjectId: WALLETCONNECT_PROJECT_ID as string,
});
 
// Application structure using TenderizeProvider, CustomWeb3Provider, and ThemeProvider
const App = () => (
  <TenderizeProvider config={config}>
    {/* Custom web3 configuration */}
    <CustomWeb3Provider config={config.web3}>
      <ThemeProvider>
        <YourAppComponents />
      </ThemeProvider>
    </CustomWeb3Provider>
  </TenderizeProvider>
);
 
export default App;

Quick Start Guide for Tenderize SDK's Iframe Integration

This guide provides a concise walkthrough on integrating the Tenderize SDK's Iframe functionality into your application. By following these steps, you will be able to generate a query string that reflects your token configurations and any specific UI customizations, such as disabling certain tabs.

Prerequisites

Before you begin, ensure you have the following:

  • An application where you can integrate the Tenderize SDK Iframe.

Installation

First, install the Tenderize SDK via npm:

npm i @tenderize/sdk

Generating the Iframe Query String

The generateIframeQueryString function is used to create a query string based on your token configurations and UI customizations. Below is an example demonstrating how to generate this query string:

Generate
import {
  generateIframeQueryString,
  TabEnum,
  TokenSlugEnums,
} from "@tenderize/sdk";
 
const queryString = generateIframeQueryString({
  [TokenSlugEnums.MATIC]: "0x4557B18E779944BFE9d78A672452331C186a9f48",
  [TokenSlugEnums.LIVEPEER]: "0x4557B18E779944BFE9d78A672452331C186a9f48",
  [TokenSlugEnums.GRAPH]: "0x4557B18E779944BFE9d78A672452331C186a9f48",
  disabledTabs: [TabEnum.SWAP],
});

Integrating the Iframe in Your Application

The following example demonstrates how to integrate the generated query string into an Iframe within a React application:

App.tsx
import React from "react";
import {
  generateIframeQueryString,
  TabEnum,
  TokenSlugEnums,
} from "@tenderize/sdk";
 
function App() {
  const queryString = generateIframeQueryString({
    [TokenSlugEnums.MATIC]: "0x4557B18E779944BFE9d78A672452331C186a9f48",
    [TokenSlugEnums.LIVEPEER]: "0x4557B18E779944BFE9d78A672452331C186a9f48",
    [TokenSlugEnums.GRAPH]: "0x4557B18E779944BFE9d78A672452331C186a9f48",
    disabledTabs: [TabEnum.SWAP],
  });
 
  return (
    <iframe
      src={`https://sdk-sdk.vercel.app?${queryString}`}
      height="660px"
      width="100vw"
      style={{
        border: 0,
        width: "100%",
        minWidth: "300px",
      }}
    />
  );
}
 
export default App;

Conclusion

By following these steps, you can quickly and effectively integrate the Tenderize SDK's Iframe functionality into your application. This allows you to customize the UI and manage token configurations with ease.

Next Steps

Having gained a foundational understanding of how to set up and utilize the Tenderizers SDK, you are now prepared to explore more advanced features and configurations. For comprehensive information, please refer to the complete documentation provided in this guide.

By following this Quick Start Guide, you will be able to seamlessly integrate the Tenderizers SDK into your application and begin leveraging its features immediately.

Last updated on
OverviewConfiguration Modules