update for ton-connect ui

ton-community · Aug 23, 2023 · da3b623 · da3b623
1 parent 45cb016
commit da3b623
Showing 1 changed file with 30 additions and 17 deletions.
diff --git a/docs/develop/dapps/ton-connect/web.mdx b/docs/develop/dapps/ton-connect/web.mdx
@@ -12,13 +12,6 @@ If you use React for your DApp, take a look at [TON Connect UI React SDK](/devel
 ### 1) Installation
 
 <Tabs groupId="Installation">
-  <TabItem value="NPM" label="NPM">
-To begin the integration of TON Connect into your app, install the @tonconnect/ui package:
-
-```bash npm2yarn
-npm i @tonconnect/ui
-```
-  </TabItem>
   <TabItem value="CDN" label="CDN">
 Add script in the HEAD element of your website:
     <br/>
@@ -27,6 +20,13 @@ Add script in the HEAD element of your website:
 
 ```html
 <script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>
+```
+  </TabItem>
+  <TabItem value="NPM" label="NPM">
+    To begin the integration of TON Connect into your app, install the @tonconnect/ui package:
+
+```bash npm2yarn
+npm i @tonconnect/ui
 ```
   </TabItem>
 </Tabs>
@@ -35,7 +35,13 @@ Add script in the HEAD element of your website:
 
 After installing the package, you should create a `manifest.json` file for your application. More information on how to create a manifest.json file can be found [here](/develop/dapps/ton-connect/manifest).
 
-Add a script for a connector `tonConnectUI` in `<body>` part of application page:
+Add a button with `ton-connect` id to connect to the wallet:
+
+```html
+<div id="ton-connect"></div>
+```
+
+*After this tag* add a script for `tonConnectUI` in `<body>` part of application page:
 
 ```html
 <script>
@@ -46,18 +52,25 @@ Add a script for a connector `tonConnectUI` in `<body>` part of application page
 </script>
 ```
 
-Add a button with `ton-connect` id to connect to the wallet:
-
-```html
-<div id="ton-connect"></div>
-```
-
 ### 3) Connect to the Wallet
 
-"Connect" button (which is added at `buttonRootId`) automatically handles clicks and calls connect. But you are still able to open "connect modal" programmatically, e.g. after click on your custom connect button:
+"Connect" button (which is added at `buttonRootId`) automatically handles clicks.
 
-```js
-const connectedWallet = await tonConnectUI.connectWallet();
+But you can open "connect modal" programmatically, e.g. after click on custom button:
+
+```html
+<script>
+    async function connectToWallet() {
+        const connectedWallet = await tonConnectUI.connectWallet();
+        // Do something with connectedWallet if needed
+        console.log(connectedWallet);
+    }
+
+    // Call the function
+    connectToWallet().catch(error => {
+        console.error("Error connecting to wallet:", error);
+    });
+</script>
 ```
 
 ### 4) Redirects