# use-ton-connect-sender

> Helper hooks for TON contracts to make a bridge between TonConnect and contract wrappers

Latest version **1.0.1** (published 2024-08-31) · ISC license · 0 weekly downloads

## Install

```sh
npm install use-ton-connect-sender
pnpm add use-ton-connect-sender
yarn add use-ton-connect-sender
bun add use-ton-connect-sender
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2024-08-31 |
| First published | 2024-08-31 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=20.0.0 |
| Dependencies | 6 |
| Unpacked size | 9.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Nikit Zykov |
| Maintainers | cvdsfif |
| Keywords | ton, blockchain, react, typescript |

## Links

- npm: https://www.npmjs.com/package/use-ton-connect-sender
- Repository: https://github.com/cvdsfif/use-ton-connect-sender
- Homepage: https://github.com/cvdsfif/use-ton-connect-sender#readme
- Issues: https://github.com/cvdsfif/use-ton-connect-sender/issues
- npm.io page: https://npm.io/package/use-ton-connect-sender

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^18.3.1
- [@ton/ton](https://npm.io/package/@ton/ton.md) ^15.0.0
- [@ton/core](https://npm.io/package/@ton/core.md) ^0.57.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.3.1
- [@tonconnect/ui-react](https://npm.io/package/@tonconnect/ui-react.md) ^2.0.9
- [@orbs-network/ton-access](https://npm.io/package/@orbs-network/ton-access.md) ^2.3.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2024-08-31
- 1.0.0-beta.4 (beta) — 2024-08-31
- 1.0.0 — 2024-08-31

## README

# Helper hooks for TON contracts to make a bridge between TonConnect and contract wrappers

![Coverage](./badges/coverage.svg) [![npm version](https://badge.fury.io/js/use-ton-connect-sender.svg)](https://badge.fury.io/js/![use-ton-connect-sender](https://badge.fury.io/js/use-ton-connect-sender.svg)) [![Node version](https://img.shields.io/node/v/use-ton-connect-sender.svg?style=flat)](https://nodejs.org/)

## Purpose

Contains the set of React hooks:

- `useTonConnectSender`: If the component is connected to TON wallet with `TonConnectUIProvider`, returns the sender used to send messages to TON contract wrappers object together with the objects returned by `useTonConnectUI`.
- `useTonContract`: Asynchronously connects a TON contract on a given address after getting a TON client connection

There are also two utility hooks used by the hooks above:

- `useTonClient`: Asynchronously initializes the TON client on a given network
- `useAsyncInitialize`: Utility hook for asynchronous objects initialization

## Installing

```bash
npm i use-ton-connect-sender
```

## Usage

The component using the hooks contained in this package has to be wrapped inside a `TonConnectUIProvider`. The general usage schema is the following:

```ts
// ...

const ConnectedComponent = () => {
    // ...
    const mainContract = useTonContract(
        contractAddress === CONTRACT_MAINNET_ADDRESS ? "mainnet" : "testnet",
        contractAddress,
        NzComTact
    )

    const { sender, setOptions } = useTonConnectSender()
    const sendDeposit = async () => {
        if(!sender) return
        await mainContract?.send(
            sender!, 
            {
                value: toNano(`${depositAmount}`),
            },
            {
                $$type: 'Deposit'
            }
        )
    }

    useEffect(()=>{
        setOptions({ language })
    }, [language])

}

function App() {
  return <TonConnectUIProvider manifestUrl="https://www.zykov.com/manifest.json">
    <ConnectedComponent />
  </TonConnectUIProvider>
}

export default App
```

## Testing

I recommend to mock these hooks in your Jest tests. First, before the import of the tested module, prepare them for setting `spyOn`:

```ts
const makeImportsSpyable = (toCheck: { path: string, componentsToMock?: string[] }[]) =>
toCheck.forEach(({ path, componentsToMock: propsToMock }) => jest.mock(path, () => ({
    __esModule: true,
    ...jest.requireActual(path),
    ...propsToMock?.reduce((acc: any, curr) => {
        acc[curr] = jest.fn()
        return acc
    }, {})
})))

makeImportsSpyable([
    { path: "use-ton-connect-sender" },
])
```

Then, in the `beforeEach` section, override them by your test objects:

```ts
jest.spyOn(await import("use-ton-connect-sender"), "useTonConnectSender")
    .mockImplementation(() => ({
        sender: senderAvailable ? senderStub : undefined,
        tonConnectUI: jest.fn() as any,
        setOptions: setOptionsMock
    }))
useTonContractMock = jest.spyOn(await import("use-ton-connect-sender"), "useTonContract")
    .mockReturnValue(tonContractStub) as any
```

For an example of a fully tested project using these hooks, refer to [this article](https://medium.com/stackademic/ton-contracts-made-easier-an-example-in-tact-language-5a4dd812ecfd?sk=51a74ca49c99b0126fd8ae7ed4d37dd5)

---
_Source: https://npm.io/package/use-ton-connect-sender · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._