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

import ThemeProvider from 'src/theme';

<Meta title="Guide/Introduction" component={ThemeProvider} />

## Installation

`yarn add @envanik/components`

or

`npm install @envanik/components`

#### Install below dependancies as its peer dependancies

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

#### components <-> sdk version mapping

| @envanik/components | @envanik/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                   | 5.3.1            |

## Getting started

In your main file wrap your app with `PangolinProvider`:

```tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { PangolinProvider } from '@envanik/components';

// 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>
    <PangolinProvider library={library} chainId={chainId} account={account} theme={theme}>
      <App />
    </PangolinProvider>
  </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.
