introduction.stories.mdx

import { Canvas, Meta, Story } from '@storybook/addon-docs';

import ThemeProvider from 'src/theme';

Installation

yarn add @pangolindex/components

or

npm install @pangolindex/components

Install below dependancies as its peer dependancies

react
react-dom
@pangolindex/sdk ( for version see below mapping )

components <-> sdk version mapping

@pangolindex/components	@pangolindex/sdk
4.0.4	2.1.11
<4.1.0	3.0.1
4.1.0	3.1.2
4.1.1 - <=4.2.0	3.1.3
4.2.1-rc.0 - <=4.3.0	3.1.12
4.4.0	3.1.13
5.0.0	4.0.0
5.1.0	4.2.0
5.2.0	4.3.0
5.3.0 - 5.4.0	4.4.0
5.5.0	4.4.1
5.6.0	4.5.0
6.0.0	5.0.0
6.0.2	5.0.1
7.1.0	5.1.0
7.1.4	5.1.1
7.1.5	5.1.2
7.2.0	5.2.0
7.3.0	5.3.0
>=7.3.1 <7.3.5	5.3.1
>=7.3.5 <7.3.9	5.3.2
7.3.9	5.3.4

Getting started

In your main file wrap your app with PangolinProvider and Web3ReactProvider:

Use version 6.0.9 of @web3-react/core package.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { NetworkContextName, PangolinProvider } from '@pangolindex/components';
import { createWeb3ReactRoot, Web3ReactProvider } from '@web3-react/core';

const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName);

function getLibrary(provider: any): Web3Provider {
  try {
    const library = new Web3Provider(provider, 'any');
    library.pollingInterval = 15000;
    return library;
  } catch (error) {
    return provider;
  }
}

// library -> web3.js provider
// chainId -> chain id with which user is connected
// account -> user's connected wallet address
// theme -> optional ( refer Theme guide to customize it )
ReactDOM.render(
  <React.StrictMode>
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <PangolinProvider library={library} chainId={chainId} account={account} theme={theme}>
          <App />
        </PangolinProvider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

Customizing Theme

In PangolinProvider you can pass custom theme. Follow Guide -> Theme to customize theme.

Redux

If you are using redux in your application then you will need to use custom context https://react-redux.js.org/api/hooks#custom-context with your Provider.

setup example repo

1. do yarn in example directory.
2. copy .env.sample to .env

development flow

1. do yarn in components.
2. make sure you follow setup example repo steps
3. do yarn dev:example which will start app from example directory.
4. as you develop components in src folder, you can keep testing it in example app.
5. once its developed you can use those new changes in interface repo.

Publish flow

• do yarn publish which will build the components and publish to npm.