import Callout from 'nextra-theme-docs/callout' import Link from 'next/link' import Connect from 'components/example/connect' import Transaction from 'components/example/transaction'
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.
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.
If you want to differentiate MetaMask from other TON-compatible browsers, you can detect OpenMask using ton.isOpenMask
.
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" 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');
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>
);
};
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>
);
};