Skip to content
Documentation
Getting Started

Getting Started

To develop for OpenMask, install OpenMask in the browser of your choice on your development machine. Download here.

💡
This guide assumes intermediate knowledge of HTML, CSS, and JavaScript.

Once OpenMask is installed and running (make sure you back up your Secret Recovery Phrase), you should find that new browser tabs have a window.ton object available in the developer console. This is how your website will interact with OpenMask.

You can review the full API for that object here.

Basic Considerations

Web3 Browser Detection

To verify if the browser is running OpenMask, copy and paste the code snippet below in the developer console of your web browser:

if (typeof window.ton !== 'undefined') {
  console.log('OpenMask is installed!');
}

You can review the full API for the window.ton object here.

Detecting OpenMask

If you want to differentiate MetaMask from other TON-compatible browsers, you can detect OpenMask using ton.isOpenMask.

User State

Currently there are a few stateful things to consider when interacting with this API:

  • What is the current network?
  • What is the current account?

Connecting to OpenMask

"Connecting" or "logging in" to OpenMask effectively means "to access the user's TON account(s)".

You should only initiate a connection request in response to direct user action, such as clicking a button. You should always disable the "connect" button while the connection request is pending. You should never initiate a connection request on page load.

We recommend that you provide a button to allow the user to connect OpenMask to your dapp. Clicking this button should call the following method:

provider.send('ton_requestAccounts');

Examples

Connect

export default () => {
  const [address, setAddress] = useState("");
  const [balance, setBalance] = useState("");

  const connect = async () => {
    const provider = window.ton;
    try {
      const accounts = await provider.send("ton_requestAccounts");
      const account = accounts[0];
      setAddress(account);

      const balance = await provider.send("ton_getBalance");
      setBalance(String(Number(balance) / 1000000000));
    } catch (e) {
      console.error(e);
    }
  };

  return (
    <div>
      <button onClick={connect}>
        Connect OpenMask
      </button>
      {address && (<div>{address}<br />{balance} TON</div>)}
    </div>
  );
};

Transaction

export default () => {
  const [disabled, setDisabled] = useState(false);
  const [isSent, setSent] = useState(false);
  const [isConfirm, setConfirm] = useState(false);

  const send = async () => {
    const provider = window.ton;

    console.log("isOpenMask=", provider.isOpenMask);
    setDisabled(true);
    try {
      const seqNo = await provider.send("ton_sendTransaction", [{
        to: "EQCV4FC_GjwyRDx4RAfI9-f1z3Tfi6JBxEOHol8SUpI2xTxT",
        value: "100000000",
        data: "Donate",
      }]);
      setSent(true);
      await provider.send("ton_confirmWalletSeqNo", [seqNo]);
      setConfirm(true);
    } catch (e) {
      console.error(e);
    } finally {
      setDisabled(false);
    }
  };

  return (
    <div>
      <div>
        OpenMask donate address: "EQCV4FC_GjwyRDx4RAfI9-f1z3Tfi6JBxEOHol8SUpI2xTxT"
      </div>
      <button disabled={disabled} onClick={send}>
        Send 0.1 TON
      </button>
      {isSent && (
        <div>
          {isConfirm
            ? "Success. Transaction confirm!"
            : "Transaction Pending... ~15 sec"}
        </div>
      )}
    </div>
  );
};
OpenMask donate address: "EQCV4FC_GjwyRDx4RAfI9-f1z3Tfi6JBxEOHol8SUpI2xTxT"
Introduction
Wallet Permissions