@liquide/react-liquide-sdk-staging

react-liquide-sdk

Made with love by Liquide

Overview

react-liquide-sdk is a React SDK created by Liquide to provide seamless integration with Liquide's trading functionalities. This SDK enables developers to easily embed Liquide's components into their React applications.

Installation

Install the SDK using npm:

Install

npm install @liquide/react-liquide-sdk

or

yarn add @liquide/react-liquide-sdk

Usage

First, initialize the SDK with your API key. Then, use the provided components in your application. The components will only render if the API key is valid.

Initialization

In your main application file, initialize the SDK with your API key:

import React, { useEffect } from 'react';
import { Liquide, LiquideTrades } from '@liquide/react-liquide-sdk';

const App = () => {
  useEffect(() => {
    Liquide.initialize('YOUR_API_KEY');
  }, []);

  return (
      <div>
        <LiquideTrades />
      </div>
  );
};

Login User

To interact with user-specific components in this project, a user access token is required for authentication and authorization.

import React, { useEffect } from 'react';
import { Liquide, LiquideTrades } from '@liquide/react-liquide-sdk';

const App = () => {
  useEffect(() => {
    Liquide.identifyUser('USER_ACCESS_TOKEN');
  }, ['USER_ACCESS_TOKEN']);

  return (
      <div>
        <LiquideTrades />
      </div>
  );
};

Capture Event

The setCaptureEvent method is responsible for capturing specific events triggered within the application. You can pass the method responsible for capturing events via the setCaptureEvent prop.

import React, { useEffect } from 'react';
import { Liquide, LiquideTrades } from '@liquide/react-liquide-sdk';

interface IEventData = {
  name: string
  action: 'click' | 'scroll' | 'hover'
  type: 'button' | 'card' | 'tab' | 'logo'
  context: string
  properties?: Record<string, any>
}

const App = () => {
  useEffect(() => {
    Liquide.setCaptureEvent((data: IEventData) => void)
  }, []);

  return (
      <div>
        <LiquideTrades />
      </div>
  );
};

Components

LiquideTrades

<LiquideTrades onPress={() => void} onBtnClick={()=> void} btnTitle={'View all'} />

LiquideDashboard

<LiquideDashboard onPress={() => void} navigateTo={'liquide_tab'} />

LiquidePastTrades

<LiquidePastTrades onPress={() => void } />

• onPress: () => void (optional)
  • This function is triggered when a user who is not logged in attempts to access user-specific components.
• onBtnClick: () => void (optional)
  • This function is triggered when the user clicks the call-to-action button in the LiquideTrades carousel.
• btnTitle: string (optional)
  • btnTitle prop specifies the label displayed on Liquide trade component button.
• navigateTo: string
  • The navigateTo prop is used to set the default view of the Liquide dashboard on initial render.
  • Possible values: liquide_tab, my_dashboard_tab, live_trade_details, past_trade_details, user_trade_details

License

MIT © liquide-life