@tonhub/utils

This is a library for the main button component to use MainButton API in Tonhub Wallet dApp Browser applications.

Installation

To install this library, run the following command in your terminal:

npm install @tonhub/utils

or using yarn:

yarn add @tonhub/utils

Usage

As a hook

import { useTonhubMainButton } from '@tonhub/utils';

function MyComponent() {
  const mainButton = useTonhubMainButton();

  // Check if the main button is enabled
  if (mainButton.isEnabled) {
    // Set the click handler for the main button
    mainButton.onClick(() => {
      console.log('Main button clicked!');
    });

    // Set the parameters of the main button
    mainButton.setParams({
      text: 'Click me',
      textColor: '#F7F8F9',
      color: '#564CE2',
      isVisible: true,
      isActive: true
    });
  }

  // Render your component
  return <div>My Component</div>;
}

As a component

import { TonhubMainButton } from '@tonhub/utils';

function MyComponent() {
  return (
    <TonhubMainButton
      params={{
        text: 'Click me',
        textColor: '#F7F8F9',
        color: '#564CE2',
        isVisible: true,
        isActive: true
      }}
      onClick={() => {
        console.log('Main button clicked!');
      }}
    />
  );
}

StatusBar

import { TonhubStatusBar } from '@tonhub/utils';

function MyComponent() {
  return (
    <TonhubStatusBar
      style="light"
      backgroundColor="#564CE2"
    />
  );
}

import { useTonhubStatusBar } from '@tonhub/utils';

function MyComponent() {
  const statusBar = useTonhubStatusBar();

  // Check if the status bar is enabled
  if (statusBar.isEnabled) {
    // Set the status bar style
    statusBar.setStatusBarStyle('light');

    // Set the status bar background color
    statusBar.setStatusBarBackgroundColor('#564CE2');
  }

  // Render your component
  return <div>My Component</div>;
}

import { useTonhubBridge } from '@tonhub/utils';

function MyComponent() {
    const tonhubBridge = useTonhubBridge();

    // Render your component
    return (
        <button onClick={() => tonhubBridge.send({/* your SendTxArgs here */})}>
            Request transaction
        </button>
    );
}

The useDappEmitter hook provides an emitter function for interacting with Tonhub.

import { useDappEmitter } from '@tonhub/utils';

function MyComponent() {
  const { appReady, isAvailable } = useDappEmitter();
  // Your definition of readiness
  const myAppIsReady = true;

  // Check if the emitter is available
  if (isAvailable && myAppIsReady) {
    // Trigger the APP_READY event
    appReady();
  }

  // Render your component
  return <div>My Component</div>;
}

License

MIT