https://github.com/delab-team/connect

Modal package with different TON wallets for React JS
https://github.com/delab-team/connect

blockchain connect ton web3

Last synced: about 2 months ago
JSON representation

Modal package with different TON wallets for React JS

• Host: GitHub
• URL: https://github.com/delab-team/connect
• Owner: delab-team
• License: mit
• Created: 2022-11-02T11:44:53.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-06-13T23:04:16.000Z (over 1 year ago)
• Last Synced: 2024-10-20T14:42:19.869Z (2 months ago)
• Topics: blockchain, connect, ton, web3
• Language: TypeScript
• Homepage: https://connect-example.delab.team
• Size: 6.37 MB
• Stars: 42
• Watchers: 1
• Forks: 8
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-ton - delab-team/connect - SDK that combines multiple protocols in one modal. (🌐 Authentication / Get Help)

README

        
# DeLab Connect

![Typescript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)

[![TON](https://img.shields.io/badge/based%20on-TON-blue?style=for-the-badge)](https://ton.org/)

[![npm](https://img.shields.io/npm/v/@delab-team/connect?style=for-the-badge)](https://www.npmjs.com/package/@delab-team/connect)



Modal package with different TON wallets for React JS.

![example](./example/img/example.png)

## Install

- as local project package

```

yarn add @delab-team/connect

```

## Usage

possible types of event

- `connect`

- `disconnect`

- `error`

- `error-transaction`

- `error-toncoinwallet`

- `error-tonhub`

- `error-tonkeeper`

```typescript

import {

    DeLabModal,

    DeLabButton,

    DeLabConnect,

    DeLabConnecting,

    DeLabTransaction,

    DeLabEvent

} from '@delab-team/connect'

// DeLabConnect must be created outside of the React Component

const DeLabConnector = new DeLabConnect('https://example.com', 'Example', 'mainnet', 'https://yourapp.com/tonconnect_manifest.json')

// - URL your DApp

// - Name your DApp

// - network

// - tonconnect-manifest (optional)

DeLabConnector.on('connect', (data: DeLabEvent) => {

    const connectConfig: DeLabConnecting = data.data

    const trans: DeLabTransaction = {

        to: 'EQCkR1cGmnsE45N4K0otPl5EnxnRakmGqeJUNua5fkWhales',

        value: '1000000' // string value in nano-coins

    }

    const data = await DeLabConnector.sendTransaction(trans)

})

DeLabConnector.on('disconnect', () => {

    console.log('disconect')

})

// Use loadWallet() after the subscriptions are installed

DeLabConnector.loadWallet()

```

DeLabModal must be children of the root React Component

```tsx

// supported scheme: 'light' | 'dark'

// ...

```

# License

[MIT License Copyright (c) 2022 DeLab Team](LICENSE)