toki-app/README.md

Toki - frontend packages

<h1 align="center">
   <b>
        <a href="https://www.toki.mn"><img src="https://www.toki.mn/wp-content/uploads/2022/08/Asset-1@3x.png" width="100"  /></a><br>
    </b>
</h1>
<p align="center">For integration with Toki app && Speed up development ⚡</p>

<p align="center">
    <a href="https://www.toki.mn/"><b>Website</b></a> •
</p>

## Mini application for Toki

For UI components: <a href="https://library.toki.mn/"><b>Components</b></a>

## Installation

The package can be installed via npm:

```bash
npm install toki-app
```

## Table of Contents

- [UI Components](#ui-components)
- [App provided functions](#app-provided-functions)
- [Examples](#function-examples)

### UI Components

#### Button

```ts
import { Button } from "toki-app";
...
function handleClick(event){
}
return  <Button
            text="title"
            type="primary" // "primary" | "secondary" | "text" | "warning"
            onClick={handleClick}>
        </Button>
```

#### Input

```ts
import { Input } from "toki-app";
...
function handleChange(event){
    setState()
}
return  <Input
            placeholder="Username"
            value={state}
            onChange={handleChange} />
```

### App provided functions

##### app.buy()

##### app.selectContact()

##### app.checkNotification()

##### app.setColor()

##### app.openLink()

##### app.buyfromDynamiclink()

##### app.setScreenProtection()

##### app.downloadImage()

##### app.closeWebView()

### Function examples

#### - Buy

```ts
import { app } from "toki-app";
...
function test() {
    // Merchant ID
    const merchantId = "qwerty"
    // Payment amount
    const amount = 100
    // Unique Order ID
    const orderId = "ORD-1234"
    const description = "Test order"

    /*
        Webhook URL for success, failed transactions
        Method: POST
        Body: orderID, transactionID, statusCode, transRequestId, token, amount
    */
    const backendCallbackUrl = "http://localhost:3001/api/v1/order"

    app.buy(
        merchantId,
        amount,
        orderId,
        description,
        (
            transactionID: string,
            orderID: string,
            status: string,
            statusCode: any,
            transRequestId: string
        ) => {
            // Callback for front-end
            onGetOrder();
        },
        backendCallbackUrl
    );
}

function onGetOrder() {
    console.log("Transaction done")
}
```