рубрика ответы на вопросы

как с фронта на реакте отправить транзакцию на смарт контракт с определенными параметрами?

1) создаём в проекте папку contracts и закидываем туда файл с контрактом, например collections.ts

/src/contracts/collection.ts

2) В файле создаем класс, который будет хранить всё что нужно для взаимодействия с ним, внизу показан пример

import { ActionConfiguration, TonConnectUI } from "@tonconnect/ui-react";

export const tonConnectOptions: ActionConfiguration = {
  modals: [],
  notifications: [],
  twaReturnUrl: "https://t.me/MetaMinterBot/app",
};

export type MintNftData = {
  tonConnect: TonConnectUI;
  userAddress: string;
  collectionAddress: string;
  price: number;
  quantity: number;
};

export class CollectionContract {
  constructor() {}

  async mint({ tonConnect, collectionAddress, price, quantity }: MintNftData) {
    try {
      return await tonConnect.sendTransaction(
        {
          validUntil: Math.floor(Date.now() / 1000) + 90, // время на подтверждение транзакции
          messages: [ // сообщение транзакции
            {
              address: collectionAddress,
              amount: toNano(price * quantity).toString(),
              payload: this.createBodyMessage(quantity)
                .toBoc()
                .toString("base64"),
            },
          ],
        },
        tonConnectOptions // настройки tonConnect
      );
    } catch (e) {
      throw new Error("Cannot mint nft. Some error occurred");
    }
  }
}

3) Вызываем отправку транзакции в любом из наших файлов

import { useTonAddress, useTonConnectUI } from "@tonconnect/ui-react";

export const Page: React.FC = () => {
  const [tonConnect] = useTonConnectUI();
  const collectionContract = new CollectionContract();
  const userAddress = useTonAddress();

  const handleMint = async () => {
    await collectionContract.mint({
      tonConnect,
      userAddress,
      collectionAddress: COLLECTION_ADDRESS,
      quantity: QUANTITY,
      price: NFT_PRICE,
    });
  };

Так делается красиво 💪