fix bug (#1)

* fix bug

* fix bug

* update readme

* Remove redundant comments

* change config

* replace with new License copyrigh

* replace with new License

---------

Co-authored-by: cici090 <[email protected]>

.gitignore

@@ -1,6 +1,6 @@
 .DS_Store
 node_modules
-/dist
+/lib
 
 
 # local env files

LICENSE

@@ -186,16 +186,19 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2022 tonkeeper
+   Copyright 2024 Townsquare Labs
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+      http://www.apache.org/licenses/LICENSE-2.0
 
    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
+
+   Portions of this software are based on the work of Original Software Project:
+      Copyright 2022 tonkeeper

README.md

@@ -17,29 +17,40 @@ You can find more details and the protocol specification in the [docs](https://d
 # Getting started
 
 ## Installation with npm
-`npm i @townsquarexyz/ui-vue`
+`npm i @townsquarelabs/ui-vue`
+## Installation with npm
+`yarn add @townsquarelabs/ui-vue`
 
 # Usage
 
 ## Add TonConnectUIProvider
 Add TonConnectUIProvider to the root of the app. You can specify UI options using props.
-[See all available options](https://ton-connect.github.io/sdk/types/_tonconnect_ui_vue.TonConnectUIProviderProps.html)
+// todo
+<!-- [See all available options](https://ton-connect.github.io/sdk/types/_tonconnect_ui_react.TonConnectUIProviderProps.html) -->
 
 All TonConnect UI hooks calls and `<TonConnectButton />` component must be placed inside `<TonConnectUIProvider>`.
 
 ```vue
 <template>
-  <TonConnectUIProvider :manifestUrl="'https://<YOUR_APP_URL>/tonconnect-manifest.json'">
+  <TonConnectUIProvider :options="options">
     <!-- Your app -->
   </TonConnectUIProvider>
 </template>
 
 <script>
-import { TonConnectUIProvider } from '@townsquarexyz/ui-vue';
+import { TonConnectUIProvider } from '@townsquarelabs/ui-vue';
 
 export default {
   components: {
     TonConnectUIProvider
+  },
+  setup(){
+    const options = {
+      manifestUrl:"https://<YOUR_APP_URL>/tonconnect-manifest.json",
+    };
+    return {
+      options
+    }
   }
 }
 </script>
@@ -53,12 +64,12 @@ It is recommended to place it in the top right corner of your app.
 <template>
   <header>
     <span>My App with Vue UI</span>
-    <TonConnectButton />
+    <TonConnectButton/>
   </header>
 </template>
 
 <script>
-import { TonConnectButton } from '@townsquarexyz/ui-vue';
+import { TonConnectButton } from '@townsquarelabs/ui-vue';
 
 export default {
   components: {
@@ -86,7 +97,7 @@ Use it to get user's current ton wallet address. Pass boolean parameter isUserFr
 </template>
 
 <script>
-import { useTonAddress } from '@townsquarexyz/ui-vue';
+import { useTonAddress } from '@townsquarelabs/ui-vue';
 
 export default {
   setup() {
@@ -106,9 +117,9 @@ export default {
 Use it to get user's current ton wallet. If wallet is not connected hook will return null.
 
 See all wallet's properties
-
-[Wallet interface](https://ton-connect.github.io/sdk/interfaces/_tonconnect_sdk.Wallet.html)
-[WalletInfo interface](https://ton-connect.github.io/sdk/types/_tonconnect_sdk.WalletInfo.html)
+// todo
+<!-- [Wallet interface](https://ton-connect.github.io/sdk/interfaces/_tonconnect_sdk.Wallet.html) -->
+<!-- [WalletInfo interface](https://ton-connect.github.io/sdk/types/_tonconnect_sdk.WalletInfo.html) -->
 
 ```vue
 <template>
@@ -119,7 +130,7 @@ See all wallet's properties
 </template>
 
 <script>
-import { useTonWallet } from '@townsquarexyz/ui-vue';
+import { useTonWallet } from '@townsquarelabs/ui-vue';
 
 export default {
   setup() {
@@ -148,10 +159,9 @@ Use this hook to access the functions for opening and closing the modal window.
 </template>
 
 <script>
-import { useTonConnectModal } from '@townsquarexyz/ui-vue';
+import { useTonConnectModal } from '@townsquarelabs/ui-vue';
 
 export default {
-  name: 'ModalControl',
   setup() {
     const { state, open, close } = useTonConnectModal();
     return { state, open, close };
@@ -177,13 +187,14 @@ Use it to get access to the `TonConnectUI` instance and UI options updating func
       <select @change="onLanguageChange($event.target.value)">
         <option value="en">en</option>
         <option value="ru">ru</option>
+        <option value="zh">zh</option>
       </select>
     </div>
   </div>
 </template>
 
 <script>
-import { Locales, useTonConnectUI } from '@townsquarexyz/ui-vue';
+import { Locales, useTonConnectUI } from '@townsquarelabs/ui-vue';
 
 export default {
   name: 'Settings',
@@ -227,13 +238,13 @@ You can use it to detect when connection restoring process if finished.
 ```vue
 <template>
   <div>
-    <Loader v-if="!connectionRestored">Please wait...</Loader>
+    <div v-if="!connectionRestored">Please wait...</div>
     <MainPage v-else />
   </div>
 </template>
 
 <script>
-import { useIsConnectionRestored } from '@townsquarexyz/ui-vue';
+import { useIsConnectionRestored } from '@townsquarelabs/ui-vue';
 
 export default {
   name: 'EntrypointPage',
@@ -253,7 +264,7 @@ This function takes one parameter:
 Set state to 'loading' while you are waiting for the response from your backend. If user opens connect wallet modal at this moment, he will see a loader.
 ```ts
 import { ref } from 'vue';
-import { useTonConnectUI } from '@townsquarexyz/ui-vue';
+import { useTonConnectUI } from '@townsquarelabs/ui-vue';
 
 const tonConnectUI = useTonConnectUI();
 
@@ -267,7 +278,7 @@ or
 Set state to 'ready' and define `tonProof` value. Passed parameter will be applied to the connect request (QR and universal link).
 ```ts
 import { ref } from 'vue';
-import { useTonConnectUI } from '@townsquarexyz/ui-vue';
+import { useTonConnectUI } from '@townsquarelabs/ui-vue';
 
 const tonConnectUI = useTonConnectUI();
 
@@ -284,7 +295,7 @@ or
 Remove loader if it was enabled via `state: 'loading'` (e.g. you received an error instead of a response from your backend). Connect request will be created without any additional parameters.
 ```ts
 import { ref } from 'vue';
-import { useTonConnectUI } from '@townsquarexyz/ui-vue';
+import { useTonConnectUI } from '@townsquarelabs/ui-vue';
 
 const tonConnectUI = useTonConnectUI();
 
@@ -297,7 +308,7 @@ You can call `tonConnectUI.setConnectRequestParameters` multiple times if your t
 
 ```ts
 import { ref } from 'vue';
-import { useTonConnectUI } from '@townsquarexyz/ui-vue';
+import { useTonConnectUI } from '@townsquarelabs/ui-vue';
 
 const tonConnectUI = useTonConnectUI();
 
@@ -325,7 +336,7 @@ You can find `ton_proof` result in the `wallet` object when wallet will be conne
 
 ```ts
 import { ref, onMounted } from 'vue';
-import { useTonConnectUI } from '@townsquarexyz/ui-vue';
+import { useTonConnectUI } from '@townsquarelabs/ui-vue';
 
 const tonConnectUI = useTonConnectUI();
 
@@ -339,35 +350,6 @@ onMounted(() =>
 
 # Troubleshooting
 
-## Android Back Handler
-
-If you encounter any issues with the Android back handler, such as modals not closing properly when the back button is pressed, or conflicts with `history.pushState()` if you are manually handling browser history in your application, you can disable the back handler by setting `enableAndroidBackHandler` to `false`:
-
-```vue
-<template>
-  <TonConnectUIProvider 
-    :manifestUrl="'https://<YOUR_APP_URL>/tonconnect-manifest.json'"
-    :enableAndroidBackHandler="false"
-  >
-    <!-- Your app -->
-  </TonConnectUIProvider>
-</template>
-
-<script>
-import { TonConnectUIProvider } from '@townsquarexyz/ui-vue';
-
-export default {
-  components: {
-    TonConnectUIProvider
-  }
-}
-</script>
-```
-
-This will disable the custom back button behavior on Android, and you can then handle the back button press manually in your application.
-
-While we do not foresee any problems arising with the Android back handler, but if you find yourself needing to disable it due to an issue, please describe the problem in on [GitHub Issues](https://github.com/ton-connect/sdk/issues), so we can assist you further.
-
 ## Animations not working
 
 If you are experiencing issues with animations not working in your environment, it might be due to a lack of support for the Web Animations API. To resolve this issue, you can use the `web-animations-js` polyfill.
@@ -395,28 +377,3 @@ Alternatively, you can include the polyfill via CDN by adding the following scri
 ```
 
 Both methods will provide a fallback implementation of the Web Animations API and should resolve the animation issues you are facing.
-
-## Warning about 'encoding' module in Nuxt.js
-
-If you are using Nuxt.js and see a warning similar to the following:
-
-```
- ⚠ ./node_modules/node-fetch/lib/index.js
-Module not found: Can't resolve 'encoding' in '.../node_modules/node-fetch/lib'
-
-Import trace for requested module:
-./node_modules/node-fetch/lib/index.js
-./node_modules/@tonconnect/isomorphic-fetch/index.mjs
-./node_modules/@tonconnect/sdk/lib/esm/index.mjs
-./node_modules/@tonconnect/ui/lib/esm/index.mjs
-./node_modules/@townsquarexyz/ui-vue/lib/esm/index.js
-```
-
-Please note that this is just a warning and should not affect the functionality of your application. If you wish to suppress the warning, you have two options:
-
-1. (Recommended) Wait for us to remove the dependency on `@tonconnect/isomorphic-fetch` in future releases. This dependency will be removed when we drop support for Node.js versions below 18.
-
-2. (Optional) Install the `encoding` package, to resolve the warning:
-```shell
-npm install encoding
-```

components.d.ts

@@ -0,0 +1,21 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ElButton: typeof import('element-ui/lib/button')['default']
+    ElMenu: typeof import('element-ui/lib/menu')['default']
+    ElMenuItem: typeof import('element-ui/lib/menu-item')['default']
+    ElMenuItemGroup: typeof import('element-ui/lib/menu-item-group')['default']
+    ElSubmenu: typeof import('element-ui/lib/submenu')['default']
+    ElTable: typeof import('element-ui/lib/table')['default']
+    ElTableColumn: typeof import('element-ui/lib/table-column')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    TheChart: typeof import('./src/components/TheChart.vue')['default']
+    TonConnectButton: typeof import('./src/components/TonConnectButton.vue')['default']
+    TonConnectUIProvider: typeof import('./src/components/TonConnectUIProvider.vue')['default']
+  }
+}

index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script>
+      !(function (t) {
+        function e() {
+          var e = this || self;
+          (e.globalThis = e), delete t.prototype._T_;
+        }
+        "object" != typeof globalThis &&
+          (this
+            ? e()
+            : (t.defineProperty(t.prototype, "_T_", {
+                configurable: !0,
+                get: e,
+              }),
+              _T_));
+      })(Object)
+    </script>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>