feat: add tonkeeper wallet docs (#1274)

Author: verytactical

docs.json

@@ -51,6 +51,7 @@
             "group": "Wallet apps",
             "pages": [
               "ecosystem/wallet-apps/web",
+              "ecosystem/wallet-apps/tonkeeper",
               "ecosystem/wallet-apps/get-coins",
               "ecosystem/wallet-apps/deep-links",
               "ecosystem/wallet-apps/addresses-workflow"

ecosystem/wallet-apps/tonkeeper.mdx

@@ -0,0 +1,316 @@
+---
+title: "Tonkeeper"
+---
+
+import { Aside } from "/snippets/aside.jsx";
+import { Image } from '/snippets/image.jsx';
+
+[Tonkeeper](https://tonkeeper.com/) is a self‑custodial mobile wallet available on [iOS](https://apps.apple.com/us/app/tonkeeper-ton-wallet/id1587742107) and [Android](https://play.google.com/store/apps/details?id=com.ton_keeper).
+It supports regular [wallets](/standard/wallets/how-it-works), [Jettons](/standard/tokens/jettons/overview), [NFTs](/standard/tokens/nft/overview), and [TON Connect](/ecosystem/ton-connect). Its github repository can be found [here](https://github.com/tonkeeper).
+
+<div
+  style={{ display: "flex", justifyContent: "center" }}
+>
+  <Image
+    src="/resources/images/wallets/tonkeeper/main-int-light.png"
+    darkSrc="/resources/images/wallets/tonkeeper/main-int-dark.png"
+    width={228}
+    height={342}
+    alt="Tonkeeper main interface"
+  />
+</div>
+
+- 🟡 **Account balance** displays the total amount of Toncoin and other tokens held on account.
+- 🔴 **Account address** is shown as a base64-encoded string. It can be shared to receive TON, jettons, or NFTs.
+- 🟢 **Send/Receive/Scan buttons** are used to transfer TON or jettons to another account, receive TON or jettons to the wallet, and scan QR codes to confirm transactions, respectively.
+
+## Create a wallet
+
+A wallet is required to do any transactions on a public global network. It is the primary way to interact with the blockchain. This step-by-step guide explains how to use Tonkeeper app to create a testnet wallet account.
+
+Testnet is used instead of mainnet, because it is more suitable for development and experimentation, and test coins can be obtained for free on testnet. The procedure works the same way on mainnet, except funds will have to be procured in a different way.
+
+Overall procedure is:
+
+- Generate a mnemonic (a key). It uniquely determines wallet's address, but the wallet doesn't exist on blockchain yet, i.e. is in [`nonexist`](/foundations/status#status-variety) status.
+- Send some funds to the wallet's account. Now it will be in [`uninit`](/foundations/status#status-variety) status, i.e. already with some balance on it, but without any code yet.
+- Deploy wallet's code to this address. Some of these funds will be used to pay for the deploy process. Now the wallet is in [`active`](/foundations/status#status-variety) status, and can be used for any purpose.
+
+<Aside
+  type="danger"
+  title="Funds at risk"
+>
+  Addresses of both mainnet and testnet accounts can be derived from the same mnemonic, i.e. the same key might be used for both wallets. Beware these accounts exist only in their corresponding networks.
+
+  It's possible to forget switching to testnet, and accidentally spend real funds on mainnet.
+
+  It's possible to accidentally transfer funds to a testnet wallet address on mainnet. These funds will be impossible to recover.
+
+  Verify which network is used before any funds are sent.
+</Aside>
+
+### Generate a key
+
+1. Install Tonkeeper on [iOS](https://apps.apple.com/us/app/tonkeeper-ton-wallet/id1587742107) or [Android](https://play.google.com/store/apps/details?id=com.ton_keeper).
+
+1. Click <kbd>Create New Wallet</kbd>
+
+   <div
+     style={{ display: "flex", justifyContent: "center" }}
+   >
+     <Image
+       src="/resources/images/wallets/tonkeeper/create-wallet-light.png"
+       darkSrc="/resources/images/wallets/tonkeeper/create-wallet-dark.png"
+       width={228}
+       height={342}
+       alt="Create a wallet"
+     />
+   </div>
+
+1. Create a passcode and re-enter it. Passcode is used to encrypt the mnemonic.
+
+   <div
+     style={{ display: "flex", justifyContent: "center", gap: "16px" }}
+   >
+     <Image
+       src="/resources/images/wallets/tonkeeper/passcode-light.png"
+       darkSrc="/resources/images/wallets/tonkeeper/passcode-dark.png"
+       width={228}
+       height={342}
+       alt="Create a passcode"
+     />
+
+     <Image
+       src="/resources/images/wallets/tonkeeper/reenter-light.png"
+       darkSrc="/resources/images/wallets/tonkeeper/reenter-dark.png"
+       width={228}
+       height={342}
+       alt="Confirm the passcode"
+     />
+   </div>
+
+1. Click <kbd>Back up your recovery phrase</kbd> and <kbd>Back Up Manually</kbd>.
+
+   <div
+     style={{ display: "flex", justifyContent: "center", gap: "16px" }}
+   >
+     <Image
+       src="/resources/images/wallets/tonkeeper/backup-light.png"
+       darkSrc="/resources/images/wallets/tonkeeper/backup-dark.png"
+       width={228}
+       height={300}
+       alt="Back up"
+     />
+
+     <Image
+       src="/resources/images/wallets/tonkeeper/backup-manually-light.png"
+       darkSrc="/resources/images/wallets/tonkeeper/backup-manually-dark.png"
+       width={228}
+       height={342}
+       alt="Confirm the passcode"
+     />
+   </div>
+
+1. Save 24 words of the [mnemonic](/standard/wallets/mnemonics).
+
+   <Aside
+     type="danger"
+     title="Funds at risk"
+   >
+     Mnemonic is the text representation of wallet's secret key. Losing it is the same as losing access to the wallet.<br />
+     Anyone who has access to the mnemonic can take control of the wallet and move funds. If compromise is suspected, create a new wallet and transfer all funds immediately. Prefer not to store recovery words digitally; write them down and keep them offline.
+   </Aside>
+
+   <div
+     style={{ display: "flex", justifyContent: "center" }}
+   >
+     <Image
+       src="/resources/images/wallets/tonkeeper/recovery-light.png"
+       darkSrc="/resources/images/wallets/tonkeeper/recovery-dark.png"
+       width={228}
+       height={342}
+       alt="Recovery phrase"
+     />
+   </div>
+
+1. Pass the check that the mnemonic was saved.
+
+   <div
+     style={{ display: "flex", justifyContent: "center" }}
+   >
+     <Image
+       src="/resources/images/wallets/tonkeeper/backup-check-light.png"
+       darkSrc="/resources/images/wallets/tonkeeper/backup-check-dark.png"
+       width={228}
+       height={342}
+       alt="Recovery phrase"
+     />
+   </div>
+
+1. The main interface of the app should now appear.
+
+### Switch to testnet
+
+1. Click <kbd>wallet</kbd> to open the <kbd>Add Wallet</kbd> pop-up.
+
+   <div
+     style={{ display: "flex", justifyContent: "center" }}
+   >
+     <Image
+       src="/resources/images/wallets/tonkeeper/add-testnet-wallet-light.png"
+       darkSrc="/resources/images/wallets/tonkeeper/add-testnet-wallet-dark.png"
+       width={228}
+       height={342}
+       alt="Add testnet"
+     />
+   </div>
+
+1. In the "Add Wallet" window, scroll down to the "For developers" section. Click the "Testnet Account" card.
+
+   <div
+     style={{ display: "flex", justifyContent: "center" }}
+   >
+     <Image
+       src="/resources/images/wallets/tonkeeper/for-devs-light.png"
+       darkSrc="/resources/images/wallets/tonkeeper/for-devs-dark.png"
+       width={228}
+       height={342}
+       alt="Testnet account"
+     />
+   </div>
+
+1. Enter the recovery phrase that was provided when the wallet was created on Mainnet, then click <kbd>Confirm</kbd>.
+
+   <div
+     style={{ display: "flex", justifyContent: "center" }}
+   >
+     <Image
+       src="/resources/images/wallets/tonkeeper/recovery-test-light.png"
+       darkSrc="/resources/images/wallets/tonkeeper/recovery-test-dark.png"
+       width={228}
+       height={342}
+       alt="Recovery phrase for testnet"
+     />
+   </div>
+
+1. The main interface of the app should now appear, indicating that the testnet is used. Also address of the testnet wallet in the [user-friendly format](/foundations/addresses/formats#user-friendly-format) starts with `k` or `0`.
+
+   <div
+     style={{ display: "flex", justifyContent: "center" }}
+   >
+     <Image
+       src="/resources/images/wallets/tonkeeper/main-int-test-light.png"
+       darkSrc="/resources/images/wallets/tonkeeper/main-int-test-dark.png"
+       width={228}
+       height={342}
+       alt="Main interface with testnet note"
+     />
+   </div>
+
+### Add funds into the wallet
+
+To get free coins on testnet, follow [the guide](/ecosystem/wallet-apps/get-coins).
+
+#### Quick version
+
+1. Message [`@testgiver_ton_bot`](https://t.me/testgiver_ton_bot) in [Telegram](https://telegram.org/).
+1. Press the <kbd>Start</kbd> or send `/start` message.
+1. Pass the captcha test.
+1. Enter and send the testnet wallet address displayed by wallet.
+1. Soon after the "Request added to the queue" response, 2 TON will be sent to the wallet.
+1. There won't be any other message that the transfer happened. [Use an explorer](#check-the-account-state) to check the request status.
+1. The account should be in the `uninit` status now.
+
+<Image
+  src="/resources/images/wallets/wallet-ton-org/address_uninit_light.png"
+  darkSrc="/resources/images/wallets/wallet-ton-org/address_uninit_dark.png"
+  alt="Account status: uninit"
+/>
+
+### Deploy the code
+
+<Aside
+  type="danger"
+  title="Funds at risk"
+>
+  On-chain transfers are irreversible — verify the recipient and amount before confirming. Use testnet for practice; use mainnet only for real transfers.
+</Aside>
+
+To deploy the code, send any transaction from the wallet. The recipient can be any address, including the wallet itself.
+
+1. Click <kbd>Send</kbd> on the main interface, enter wallet address in "Address or name", and the "Amount" of TON. Click <kbd>Continue</kbd>.
+
+   <div
+     style={{ display: "flex", justifyContent: "center" }}
+   >
+     <Image
+       src="/resources/images/wallets/tonkeeper/send-light.png"
+       darkSrc="/resources/images/wallets/tonkeeper/send-dark.png"
+       width={228}
+       height={342}
+       alt="Send TON"
+     />
+   </div>
+
+1. Verify the transaction details and swipe if correct. Otherwise, tap <kbd>`<`</kbd> in the top-left corner to edit.
+
+   <div
+     style={{ display: "flex", justifyContent: "center" }}
+   >
+     <Image
+       src="/resources/images/wallets/tonkeeper/confirm-light.png"
+       darkSrc="/resources/images/wallets/tonkeeper/confirm-dark.png"
+       width={228}
+       height={342}
+       alt="Verify transaction"
+     />
+   </div>
+
+1. After confirmation, enter the passcode. Then, the "History" page displays the sent transaction.
+
+1. [Use an explorer](#check-the-account-state) to check wallet's status. It should be `active` now.
+
+## Check the account state
+
+Use a [blockchain explorer](/ecosystem/explorers/overview) to inspect the account. For **Testnet**, use [Tonviewer Testnet](https://testnet.tonviewer.com/).
+
+1. Paste the wallet address into the search bar.<br /><Image src="/resources/images/wallets/wallet-ton-org/tonviewer_light.png" darkSrc="/resources/images/wallets/wallet-ton-org/tonviewer_dark.png" alt="Insert address in Tonviewer search" />
+
+1. The account details will appear. In a newly created wallet, the status is `nonexist`, indicating the wallet is not deployed.<br /><Image src="/resources/images/wallets/wallet-ton-org/address_nonexist_light.png" darkSrc="/resources/images/wallets/wallet-ton-org/address_nonexist_dark.png" alt="Account status: nonexist" />
+
+## Verify wallet's version
+
+By default, Tonkeeper creates wallets with the [Wallet v5](/standard/wallets/v5) code deployed on them. To switch [wallet contract version](/standard/wallets/comparison) to [v4](/standard/wallets/v4):
+
+1. On the main menu, tap the gear icon <kbd><Icon icon="gear" size={16} /></kbd> in the upper-right corner.
+
+1. In "Settings", select <kbd>Wallet v4R2</kbd> and enter the passcode.
+
+   <div
+     style={{ display: "flex", justifyContent: "center" }}
+   >
+     <Image
+       src="/resources/images/wallets/tonkeeper/v4r2-light.png"
+       darkSrc="/resources/images/wallets/tonkeeper/v4r2-dark.png"
+       width={228}
+       height={342}
+       alt="V4R2"
+     />
+   </div>
+
+1. The wallet v4r2 is auto-generated and the app returns to the main menu.
+
+   - If v5 is highlighted, v4 has no visual indicator.
+   - To check, tap the wallet name — **wallet v4r2** — v5 is highlighted, while v4 is not.
+
+<div
+  style={{ display: "flex", justifyContent: "center" }}
+>
+  <Image
+    src="/resources/images/wallets/tonkeeper/wallet-v4r2-light.png"
+    darkSrc="/resources/images/wallets/tonkeeper/wallet-v4r2-dark.png"
+    width={228}
+    height={342}
+    alt="V4R2"
+  />
+</div>