Merge pull request #322 from reveloper/Websites-guide

added_ton_proof_draft-1

docs/develop/dapps/ton-connect/message-builders.mdx

@@ -5,10 +5,6 @@ import TabItem from '@theme/TabItem';
 
 While using TON Connect, you should construct the Message Body for the Payload used in various transactions. On this page you can find the most relevant examples of payload for use with the TON Connect SDKs.
 
-:::warning
-The page is under development.
-:::
-
 :::info
 It is expected, that you learn basics on the creating TON Connect connection. Learn more with the [integration manual](/develop/dapps/ton-connect/integration).
 :::

docs/develop/dapps/ton-connect/sign.mdx

@@ -0,0 +1,54 @@
+# Sign and Verification
+
+
+:::warning
+The page is under development.
+:::
+
+
+Signature in works in TON Connect with a special `TonProof` entity, which implemented inside connector.
+
+```js
+type TonProofItemReply = TonProofItemReplySuccess | TonProofItemReplyError;
+
+type TonProofItemReplySuccess = {
+  name: "ton_proof";
+  proof: {
+    timestamp: string; // 64-bit unix epoch time of the signing operation (seconds)
+    domain: {
+      lengthBytes: number; // AppDomain Length
+      value: string;  // app domain name (as url part, without encoding)
+    };
+    signature: string; // base64-encoded signature
+    payload: string; // payload from the request
+  }
+}
+
+```
+
+## How to use TON Proof (High-Level)
+
+- Send dApp id to client(nested in the QR code typically)
+- Got signed transaction with message from client in the ton proof entity
+- Verify TON Proof on the back-end side
+
+![](\img\docs\ton-connect\ton_proof_scheme.png?raw=true)
+
+
+## How to Check TON Proof on Server Side(Low-Level)
+
+Obtain from the frontend the following data: wallet address, domain, timestamp, walletStateInit, signature
+
+* Verify that the domain corresponds to the domain of your application
+* Check that this payload was issued recently (you can issue cookies with the payload before authorization, and when checking ton_proof, verify the presence of a cookie for this client)
+* Assemble a message according to the scheme from the previous slide
+* Obtain the wallet's pubkey via the wallet contract's get method
+* If the contract is not active, then obtaining the key in this manner will be impossible; you will need to parse the walletStateInit, which is provided by the frontend
+* Verify that the signature from the frontend actually signs the assembled message and corresponds to the public key of the address
+
+
+### Examples of TON Proof verification
+
+* [GO demo app](https://github.com/ton-connect/demo-dapp-backend/blob/master/proof.go)
+* [TS example](https://gist.github.com/TrueCarry/cac00bfae051f7028085aa018c2a05c6)
+* [Python example](https://github.com/disintar/ton-connect-python-proof/blob/master/check_proof.ipynb?short_path=8776c84)

docs/develop/dapps/ton-connect/web.mdx

@@ -1,3 +1,76 @@
+
+
+import Button from '@site/src/components/button'
+import ThemedImage from '@theme/ThemedImage';
+
+
+:::warning
+The page is under development.
+:::
+
+
+TODO: add description with TON Connect UI + low-level SDK
+
 # TON Connect for the Web with the JavaScript SDK
 
-TODO: add description with TON Connect UI + low-level SDK
+Telegram Web Apps (TWA) are web applications that run inside the Telegram messenger. They are built using web technologies — HTML, CSS, and JavaScript. TWA can be used to create bots, games, and other types of apps that can be run inside Telegram.
+
+
+<Button href="/develop/dapps/ton-connect/integration" colorType={'primary'} sizeType={'sm'}>Start Tutorial</Button>
+<Button href="/develop/dapps/ton-connect/web#ton-connect-for-web-sites"
+        colorType="secondary" sizeType={'sm'}>
+    Choose an SDK
+</Button>
+
+
+
+
+### Web Sites SDK list
+
+
+## TON Web Sites
+
+- [Telegram Web Apps documentation](https://docs.twa.dev/docs/introduction/about-platform) — a community-driven documentation for TWA.
+- [TWA Documentation by Telegram](https://core.telegram.org/bots/webapps) — full description on Telegram website.
+
+### Community
+
+Join a Telegram [Community Chat](https://t.me/tondev_eng) for TON developers if you're interested.
+
+## TON Connect for Web Apps
+
+
+Recommended TON Connect SDK for Telegram Web Apps is a UI React SDK. It is a React component that provides a high-level way to interact with TON Connect.
+
+```bash
+npm i @tonconnect/ui-react
+```
+
+- [GitHub](https://github.com/ton-connect/sdk/tree/main/packages/ui-react)
+- [NPM](https://www.npmjs.com/package/@tonconnect/ui-react)
+- [API Documentation](https://ton-connect.github.io/sdk/modules/_tonconnect_ui_react.html)
+
+### Basic usage
+
+TonConnect UI React is a React UI kit for TonConnect SDK. Use it to connect your app to TON wallets via TonConnect protocol in React apps.
+
+```jsx
+import { TonConnectUIProvider } from '@tonconnect/ui-react';
+
+export function App() {
+    return (
+        <TonConnectUIProvider manifestUrl="https://<YOUR_APP_URL>/tonconnect-manifest.json">
+            { /* Your app */ }
+        </TonConnectUIProvider>
+    );
+}
+```
+
+* Example of a DApp with `@tonconnect/ui-react`: [GitHub](https://github.com/ton-connect/demo-dapp-with-react-ui)
+* Example of deployed `demo-dapp-with-react-ui`: [GitHub](https://ton-connect.github.io/demo-dapp-with-react-ui/)
+
+### SDKs for other frameworks
+
+- If you don't use React for your app, take a look at TonConnect UI.
+- If you want to use TonConnect on the server side, you should use the TonConnect SDK.
+- Check the [supported SDKs](/develop/dapps/ton-connect/developers) list and choose the one that suits you best.

sidebars.js

@@ -373,6 +373,7 @@ const sidebars = {
             'develop/dapps/ton-connect/integration',
             'develop/dapps/ton-connect/message-builders',
             'develop/dapps/ton-connect/transactions',
+            'develop/dapps/ton-connect/sign'
           ],
         },
         {