1.0.1 • Published 4 months ago
use-ton-connect-sender v1.0.1
Helper hooks for TON contracts to make a bridge between TonConnect and contract wrappers
Purpose
Contains the set of React hooks:
useTonConnectSender
: If the component is connected to TON wallet withTonConnectUIProvider
, returns the sender used to send messages to TON contract wrappers object together with the objects returned byuseTonConnectUI
.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 networkuseAsyncInitialize
: Utility hook for asynchronous objects initialization
Installing
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:
// ...
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
:
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:
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