From de32d4c39997e03744e4850a779edd9b291452eb Mon Sep 17 00:00:00 2001
From: murluki <timofeli.work@gmail.com>
Date: Mon, 13 Mar 2023 15:55:15 +0100
Subject: [PATCH 1/3] nft hooks

---
 package-lock.json            | 47 ++++++++++++++++++++++++++++++++----
 package.json                 |  1 +
 utils/useAsyncInitialize.ts  | 12 +++++++++
 utils/useNftLogicContract.ts | 33 +++++++++++++++++++++++++
 utils/useTonClient.ts        | 12 +++++++++
 5 files changed, 100 insertions(+), 5 deletions(-)
 create mode 100644 utils/useAsyncInitialize.ts
 create mode 100644 utils/useNftLogicContract.ts
 create mode 100644 utils/useTonClient.ts

diff --git a/package-lock.json b/package-lock.json
index 11f35c6..3058968 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,12 @@
 {
-  "name": "vpnxton",
+  "name": "front",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "hasInstallScript": true,
       "dependencies": {
+        "react": "^18.2.0",
         "vite-plugin-vuetify": "^1.0.2",
         "vuetify": "^3.1.6"
       },
@@ -4336,8 +4337,7 @@
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "node_modules/jsesc": {
       "version": "2.5.2",
@@ -4593,6 +4593,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -6091,6 +6102,17 @@
         "flat": "^5.0.2"
       }
     },
+    "node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -11357,8 +11379,7 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "jsesc": {
       "version": "2.5.2",
@@ -11578,6 +11599,14 @@
         "is-unicode-supported": "^1.1.0"
       }
     },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
     "lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -12654,6 +12683,14 @@
         "flat": "^5.0.2"
       }
     },
+    "react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index a4458f5..f694f76 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "nuxt": "^3.2.2"
   },
   "dependencies": {
+    "react": "^18.2.0",
     "vite-plugin-vuetify": "^1.0.2",
     "vuetify": "^3.1.6"
   }
diff --git a/utils/useAsyncInitialize.ts b/utils/useAsyncInitialize.ts
new file mode 100644
index 0000000..dd1a1fd
--- /dev/null
+++ b/utils/useAsyncInitialize.ts
@@ -0,0 +1,12 @@
+import { useEffect, useState } from 'react';
+
+export function useAsyncInitialize<T>(func: () => Promise<T>, deps: any[] = []) {
+  const [state, setState] = useState<T | undefined>();
+  useEffect(() => {
+    (async () => {
+      setState(await func());
+    })();
+  }, deps);
+
+  return state;
+}
diff --git a/utils/useNftLogicContract.ts b/utils/useNftLogicContract.ts
new file mode 100644
index 0000000..921acdf
--- /dev/null
+++ b/utils/useNftLogicContract.ts
@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import NftLogic from '../contracts/NftLogic';
+import { useTonClient } from './useTonClient';
+import { useAsyncInitialize } from './useAsyncInitialize';
+import { Address, OpenedContract } from 'ton-core';
+
+export function useNftLogicContract() {
+  const client = useTonClient();
+  const [val, setVal] = useState<null | number>();
+
+  const NftLogicContract = useAsyncInitialize(async () => {
+    if (!client) return;
+    const contract = new NftLogic(
+      Address.parse('EQBYLTm4nsvoqJRvs_L-IGNKwWs5RKe19HBK_lFadf19FUfb') // replace with your address 
+    );
+    return client.open(contract) as OpenedContract<NftLogic>;
+  }, [client]);
+
+  useEffect(() => {
+    async function getValue() {
+      if (!NftLogicContract) return;
+      setVal(null);
+      const val = await NftLogicContract.getNftLogic();
+      setVal(Number(val));
+    }
+    getValue();
+  }, [NftLogicContract]);
+
+  return {
+    value: val,
+    address: NftLogicContract?.address.toString(),
+  };
+}
diff --git a/utils/useTonClient.ts b/utils/useTonClient.ts
new file mode 100644
index 0000000..26f50eb
--- /dev/null
+++ b/utils/useTonClient.ts
@@ -0,0 +1,12 @@
+import { getHttpEndpoint } from '@orbs-network/ton-access';
+import { TonClient } from 'ton';
+import { useAsyncInitialize } from './useAsyncInitialize';
+
+export function useTonClient() {
+  return useAsyncInitialize(
+    async () =>
+      new TonClient({
+        endpoint: await getHttpEndpoint({ network: 'testnet' }),
+      })
+  );
+}
\ No newline at end of file

From e6145a37e65e476a2dc3d94e2a192e5573c34731 Mon Sep 17 00:00:00 2001
From: murluki <timofeli.work@gmail.com>
Date: Mon, 13 Mar 2023 20:47:31 +0100
Subject: [PATCH 2/3] work on ton connect button

---
 app.vue                          |   2 +
 components/navigation/Header.vue |  16 +-
 package-lock.json                | 421 ++++++++++++++++++++++++++++++-
 package.json                     |   1 +
 4 files changed, 424 insertions(+), 16 deletions(-)

diff --git a/app.vue b/app.vue
index 837536d..3f95d5e 100644
--- a/app.vue
+++ b/app.vue
@@ -5,3 +5,5 @@
     </NuxtLayout>
   </v-app>
 </template>
+
+<script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>
diff --git a/components/navigation/Header.vue b/components/navigation/Header.vue
index 8a2088c..aae68e0 100644
--- a/components/navigation/Header.vue
+++ b/components/navigation/Header.vue
@@ -6,10 +6,20 @@
         <v-spacer></v-spacer>
         <v-btn v-for="route in routes" :key="route.path" :to="route.path">{{ route.title }}</v-btn>
         <v-spacer></v-spacer>
-        <v-btn variant="flat" color="primary">
-          Connect wallet
-        </v-btn>
+
+        <div v-if="state.status"> 
+          <v-btn variant="flat" color="primary" @click="connectUserWallet">
+          Connected
+           </v-btn>
+           <v-btn variant="flat" color="primary" @click="disconnectUser">
+          Disconnected
+           </v-btn>
+        </div>
+        <v-btn v-else variant="flat" color="primary" @click="connectUserWallet">
+          Connect Wallet
+           </v-btn>
       </div>
+
     </v-container>
   </v-app-bar>
 </template>
diff --git a/package-lock.json b/package-lock.json
index 3058968..1877ba4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
     "": {
       "hasInstallScript": true,
       "dependencies": {
+        "@tonconnect/ui-react": "^0.0.14",
         "react": "^18.2.0",
         "vite-plugin-vuetify": "^1.0.2",
         "vuetify": "^3.1.6"
@@ -896,6 +897,19 @@
         "node": ">=12"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.3.tgz",
+      "integrity": "sha512-upVRtrNZuYNsw+EoxkiBFRPROnU8UTy/u/dZ9U0W14BlemPYODwhhxYXSR2Y9xOnvr1XtptJRWx7gL8Te1qaog=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.4.tgz",
+      "integrity": "sha512-4+k+BLhtWj+peCU60gp0+rHeR8+Ohqx6kjJf/lHMnJ8JD5Qj6jytcq1+SZzRwD7rvHKRhR7TDiWWddrNrfwQLg==",
+      "dependencies": {
+        "@floating-ui/core": "^1.2.3"
+      }
+    },
     "node_modules/@ioredis/commands": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
@@ -1476,6 +1490,98 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "dev": true
     },
+    "node_modules/@solid-primitives/context": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/context/-/context-0.1.4.tgz",
+      "integrity": "sha512-k7lwcepYQJazsctHMkz88GAxEH6J7NYUprYjcnpkgD95qqWav8KaaQ3n+uTrB2seSVLMMqok1YyP8dqsiN5ltQ==",
+      "peerDependencies": {
+        "solid-js": "^1.6.0"
+      }
+    },
+    "node_modules/@solid-primitives/i18n": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/i18n/-/i18n-1.2.1.tgz",
+      "integrity": "sha512-IfpIFPqpKX6pRnGv4qc+02+CGRZl+IGirpbX3Oxk04sEDnOyYOUs9S5+na6jntcU3aAEirchViOxJUheRbJmHQ==",
+      "dependencies": {
+        "@solid-primitives/context": "^0.1.4"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.0"
+      }
+    },
+    "node_modules/@tonconnect/protocol": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@tonconnect/protocol/-/protocol-2.2.5.tgz",
+      "integrity": "sha512-kR0E+CWZl6JrE/30283v+sRiAvEu21t1xOLFx6f/BxlCNLY2wki39+L32+iicX8gn/Ig99L1flr9TAI9QW9bnQ==",
+      "dependencies": {
+        "tweetnacl": "^1.0.3",
+        "tweetnacl-util": "^0.15.1"
+      }
+    },
+    "node_modules/@tonconnect/sdk": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@tonconnect/sdk/-/sdk-2.0.7.tgz",
+      "integrity": "sha512-MDbA5RhkVbSQQYXsLuVXLATROSQgDJSIx9Y2HIPohfU44PH6vaJ1cBrv9nogIoAQUM2tNuBXC0w+RcFT+eRTCg==",
+      "dependencies": {
+        "@tonconnect/protocol": "^2.0.1",
+        "deepmerge": "^4.2.2",
+        "eventsource": "^2.0.2",
+        "node-fetch": "^2.6.7",
+        "tweetnacl": "^1.0.3"
+      }
+    },
+    "node_modules/@tonconnect/sdk/node_modules/node-fetch": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.9.tgz",
+      "integrity": "sha512-DJm/CJkZkRjKKj4Zi4BsKVZh3ValV5IR5s7LVZnW+6YMh0W1BfNA8XSs6DLMGYlId5F3KnA70uu2qepcR08Qqg==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@tonconnect/ui": {
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@tonconnect/ui/-/ui-0.0.17.tgz",
+      "integrity": "sha512-uKHpQPzE4BYG65nuzA/DTrGgVkBnaKGWzmT4WcJ2yJ+OJ/MJH2sCv17vNDIiDW62PL+MG790KX0MUNcDT2ojEQ==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.12",
+        "@solid-primitives/i18n": "^1.1.2",
+        "@tonconnect/sdk": "^2.0.7",
+        "classnames": "^2.3.2",
+        "deepmerge": "^4.2.2",
+        "is-plain-object": "^5.0.0",
+        "qrcode-generator": "^1.4.4",
+        "solid-floating-ui": "^0.2.0",
+        "solid-js": "^1.5.1",
+        "solid-styled-components": "^0.28.5",
+        "solid-transition-group": "^0.0.12"
+      }
+    },
+    "node_modules/@tonconnect/ui-react": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/@tonconnect/ui-react/-/ui-react-0.0.14.tgz",
+      "integrity": "sha512-tmPS6ZEDUlUCoQNiypm7ekbgWGr+fxSifJGxzQy1m0jrNXt+a1HHX/ntDuS2i/B/YYYiBqAFC42mPzEpc0DtkA==",
+      "dependencies": {
+        "@tonconnect/sdk": "^2.0.7",
+        "@tonconnect/ui": "^0.0.17",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -2461,6 +2567,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/cli-cursor": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz",
@@ -2985,7 +3096,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz",
       "integrity": "sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3339,6 +3449,14 @@
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "dev": true
     },
+    "node_modules/eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/execa": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
@@ -4229,6 +4347,14 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-primitive": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-3.0.1.tgz",
@@ -6047,6 +6173,11 @@
       "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
       "dev": true
     },
+    "node_modules/qrcode-generator": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
+      "integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6113,6 +6244,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -6409,6 +6552,14 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "node_modules/scule": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/scule/-/scule-1.0.0.tgz",
@@ -6595,6 +6746,64 @@
       "integrity": "sha512-V21+XeNni+tTyiST1MHsa84AQhT1aFZipzPpOFAVB8DkHzwJyjjAmt9bgwnuZiZWnIbMo2duE29wybxv/7HWUw==",
       "dev": true
     },
+    "node_modules/solid-floating-ui": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/solid-floating-ui/-/solid-floating-ui-0.2.1.tgz",
+      "integrity": "sha512-ZWVigPZjisSY7GkAKzZpDoY6Eb0NWSakaF7tut5jkW0ls9BB/bk7Jhsxd8l0JoU3KaxYH15GYcpuM0fU06kc/A==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@floating-ui/dom": "^1.0",
+        "solid-js": "^1.3"
+      }
+    },
+    "node_modules/solid-js": {
+      "version": "1.6.14",
+      "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.6.14.tgz",
+      "integrity": "sha512-9SSpGWZqzq8n/JhIt2PsYzLreG4PySmAexLnRM386oMeG5oSWa9QIRoiok45rLNJg148USEfI9wlkJkMrA2qGg==",
+      "dependencies": {
+        "csstype": "^3.1.0"
+      }
+    },
+    "node_modules/solid-js/node_modules/csstype": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+    },
+    "node_modules/solid-styled-components": {
+      "version": "0.28.5",
+      "resolved": "https://registry.npmjs.org/solid-styled-components/-/solid-styled-components-0.28.5.tgz",
+      "integrity": "sha512-vwTcdp76wZNnESIzB6rRZ3U55NgcSAQXCiiRIiEFhxTFqT0bEh/warNT1qaRZu4OkAzrBkViOngF35ktI8sc4A==",
+      "dependencies": {
+        "csstype": "^3.1.0",
+        "goober": "^2.1.10"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.4.4"
+      }
+    },
+    "node_modules/solid-styled-components/node_modules/csstype": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+    },
+    "node_modules/solid-styled-components/node_modules/goober": {
+      "version": "2.1.12",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.12.tgz",
+      "integrity": "sha512-yXHAvO08FU1JgTXX6Zn6sYCUFfB/OJSX8HHjDSgerZHZmFKAb08cykp5LBw5QnmyMcZyPRMqkdyHUSSzge788Q==",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
+    "node_modules/solid-transition-group": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/solid-transition-group/-/solid-transition-group-0.0.12.tgz",
+      "integrity": "sha512-Eu4MfNZSSxM67C+4EXaoDiWr4BFbDLg3j30JQJgQEIH9UDOfgNPfZlsFDhT/PxwJqhe6sn85W+dbmYJzBmjpAA==",
+      "peerDependencies": {
+        "solid-js": "^1.0.0"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
@@ -6957,8 +7166,7 @@
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "node_modules/tslib": {
       "version": "2.5.0",
@@ -6966,6 +7174,16 @@
       "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
       "dev": true
     },
+    "node_modules/tweetnacl": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",
+      "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw=="
+    },
+    "node_modules/tweetnacl-util": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/tweetnacl-util/-/tweetnacl-util-0.15.1.tgz",
+      "integrity": "sha512-RKJBIj8lySrShN4w6i/BonWp2Z/uxwC3h4y7xsRrpP59ZboCd0GpEVsOnMDYLMmKBpYhb5TgHzZXy7wTfYFBRw=="
+    },
     "node_modules/type-fest": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.6.0.tgz",
@@ -8012,8 +8230,7 @@
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
@@ -8034,7 +8251,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
       "dependencies": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
@@ -8828,6 +9044,19 @@
       "dev": true,
       "optional": true
     },
+    "@floating-ui/core": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.3.tgz",
+      "integrity": "sha512-upVRtrNZuYNsw+EoxkiBFRPROnU8UTy/u/dZ9U0W14BlemPYODwhhxYXSR2Y9xOnvr1XtptJRWx7gL8Te1qaog=="
+    },
+    "@floating-ui/dom": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.4.tgz",
+      "integrity": "sha512-4+k+BLhtWj+peCU60gp0+rHeR8+Ohqx6kjJf/lHMnJ8JD5Qj6jytcq1+SZzRwD7rvHKRhR7TDiWWddrNrfwQLg==",
+      "requires": {
+        "@floating-ui/core": "^1.2.3"
+      }
+    },
     "@ioredis/commands": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
@@ -9256,6 +9485,80 @@
         }
       }
     },
+    "@solid-primitives/context": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/context/-/context-0.1.4.tgz",
+      "integrity": "sha512-k7lwcepYQJazsctHMkz88GAxEH6J7NYUprYjcnpkgD95qqWav8KaaQ3n+uTrB2seSVLMMqok1YyP8dqsiN5ltQ==",
+      "requires": {}
+    },
+    "@solid-primitives/i18n": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/i18n/-/i18n-1.2.1.tgz",
+      "integrity": "sha512-IfpIFPqpKX6pRnGv4qc+02+CGRZl+IGirpbX3Oxk04sEDnOyYOUs9S5+na6jntcU3aAEirchViOxJUheRbJmHQ==",
+      "requires": {
+        "@solid-primitives/context": "^0.1.4"
+      }
+    },
+    "@tonconnect/protocol": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@tonconnect/protocol/-/protocol-2.2.5.tgz",
+      "integrity": "sha512-kR0E+CWZl6JrE/30283v+sRiAvEu21t1xOLFx6f/BxlCNLY2wki39+L32+iicX8gn/Ig99L1flr9TAI9QW9bnQ==",
+      "requires": {
+        "tweetnacl": "^1.0.3",
+        "tweetnacl-util": "^0.15.1"
+      }
+    },
+    "@tonconnect/sdk": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@tonconnect/sdk/-/sdk-2.0.7.tgz",
+      "integrity": "sha512-MDbA5RhkVbSQQYXsLuVXLATROSQgDJSIx9Y2HIPohfU44PH6vaJ1cBrv9nogIoAQUM2tNuBXC0w+RcFT+eRTCg==",
+      "requires": {
+        "@tonconnect/protocol": "^2.0.1",
+        "deepmerge": "^4.2.2",
+        "eventsource": "^2.0.2",
+        "node-fetch": "^2.6.7",
+        "tweetnacl": "^1.0.3"
+      },
+      "dependencies": {
+        "node-fetch": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.9.tgz",
+          "integrity": "sha512-DJm/CJkZkRjKKj4Zi4BsKVZh3ValV5IR5s7LVZnW+6YMh0W1BfNA8XSs6DLMGYlId5F3KnA70uu2qepcR08Qqg==",
+          "requires": {
+            "whatwg-url": "^5.0.0"
+          }
+        }
+      }
+    },
+    "@tonconnect/ui": {
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@tonconnect/ui/-/ui-0.0.17.tgz",
+      "integrity": "sha512-uKHpQPzE4BYG65nuzA/DTrGgVkBnaKGWzmT4WcJ2yJ+OJ/MJH2sCv17vNDIiDW62PL+MG790KX0MUNcDT2ojEQ==",
+      "requires": {
+        "@floating-ui/dom": "^1.0.12",
+        "@solid-primitives/i18n": "^1.1.2",
+        "@tonconnect/sdk": "^2.0.7",
+        "classnames": "^2.3.2",
+        "deepmerge": "^4.2.2",
+        "is-plain-object": "^5.0.0",
+        "qrcode-generator": "^1.4.4",
+        "solid-floating-ui": "^0.2.0",
+        "solid-js": "^1.5.1",
+        "solid-styled-components": "^0.28.5",
+        "solid-transition-group": "^0.0.12"
+      }
+    },
+    "@tonconnect/ui-react": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/@tonconnect/ui-react/-/ui-react-0.0.14.tgz",
+      "integrity": "sha512-tmPS6ZEDUlUCoQNiypm7ekbgWGr+fxSifJGxzQy1m0jrNXt+a1HHX/ntDuS2i/B/YYYiBqAFC42mPzEpc0DtkA==",
+      "requires": {
+        "@tonconnect/sdk": "^2.0.7",
+        "@tonconnect/ui": "^0.0.17",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -9995,6 +10298,11 @@
       "integrity": "sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==",
       "dev": true
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "cli-cursor": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz",
@@ -10386,8 +10694,7 @@
     "deepmerge": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz",
-      "integrity": "sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og==",
-      "dev": true
+      "integrity": "sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og=="
     },
     "defaults": {
       "version": "1.0.4",
@@ -10654,6 +10961,11 @@
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "dev": true
     },
+    "eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA=="
+    },
     "execa": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
@@ -11299,6 +11611,11 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true
     },
+    "is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
+    },
     "is-primitive": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-3.0.1.tgz",
@@ -12645,6 +12962,11 @@
       "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
       "dev": true
     },
+    "qrcode-generator": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
+      "integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw=="
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -12691,6 +13013,15 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -12888,6 +13219,14 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
     "scule": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/scule/-/scule-1.0.0.tgz",
@@ -13047,6 +13386,55 @@
       "integrity": "sha512-V21+XeNni+tTyiST1MHsa84AQhT1aFZipzPpOFAVB8DkHzwJyjjAmt9bgwnuZiZWnIbMo2duE29wybxv/7HWUw==",
       "dev": true
     },
+    "solid-floating-ui": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/solid-floating-ui/-/solid-floating-ui-0.2.1.tgz",
+      "integrity": "sha512-ZWVigPZjisSY7GkAKzZpDoY6Eb0NWSakaF7tut5jkW0ls9BB/bk7Jhsxd8l0JoU3KaxYH15GYcpuM0fU06kc/A==",
+      "requires": {}
+    },
+    "solid-js": {
+      "version": "1.6.14",
+      "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.6.14.tgz",
+      "integrity": "sha512-9SSpGWZqzq8n/JhIt2PsYzLreG4PySmAexLnRM386oMeG5oSWa9QIRoiok45rLNJg148USEfI9wlkJkMrA2qGg==",
+      "requires": {
+        "csstype": "^3.1.0"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+          "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+        }
+      }
+    },
+    "solid-styled-components": {
+      "version": "0.28.5",
+      "resolved": "https://registry.npmjs.org/solid-styled-components/-/solid-styled-components-0.28.5.tgz",
+      "integrity": "sha512-vwTcdp76wZNnESIzB6rRZ3U55NgcSAQXCiiRIiEFhxTFqT0bEh/warNT1qaRZu4OkAzrBkViOngF35ktI8sc4A==",
+      "requires": {
+        "csstype": "^3.1.0",
+        "goober": "^2.1.10"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+          "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+        },
+        "goober": {
+          "version": "2.1.12",
+          "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.12.tgz",
+          "integrity": "sha512-yXHAvO08FU1JgTXX6Zn6sYCUFfB/OJSX8HHjDSgerZHZmFKAb08cykp5LBw5QnmyMcZyPRMqkdyHUSSzge788Q==",
+          "requires": {}
+        }
+      }
+    },
+    "solid-transition-group": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/solid-transition-group/-/solid-transition-group-0.0.12.tgz",
+      "integrity": "sha512-Eu4MfNZSSxM67C+4EXaoDiWr4BFbDLg3j30JQJgQEIH9UDOfgNPfZlsFDhT/PxwJqhe6sn85W+dbmYJzBmjpAA==",
+      "requires": {}
+    },
     "source-map": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
@@ -13323,8 +13711,7 @@
     "tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
     },
     "tslib": {
       "version": "2.5.0",
@@ -13332,6 +13719,16 @@
       "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
       "dev": true
     },
+    "tweetnacl": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",
+      "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw=="
+    },
+    "tweetnacl-util": {
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/tweetnacl-util/-/tweetnacl-util-0.15.1.tgz",
+      "integrity": "sha512-RKJBIj8lySrShN4w6i/BonWp2Z/uxwC3h4y7xsRrpP59ZboCd0GpEVsOnMDYLMmKBpYhb5TgHzZXy7wTfYFBRw=="
+    },
     "type-fest": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.6.0.tgz",
@@ -13963,8 +14360,7 @@
     "webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
     "webpack-sources": {
       "version": "3.2.3",
@@ -13982,7 +14378,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
       "requires": {
         "tr46": "~0.0.3",
         "webidl-conversions": "^3.0.0"
diff --git a/package.json b/package.json
index f694f76..e07e537 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "nuxt": "^3.2.2"
   },
   "dependencies": {
+    "@tonconnect/ui-react": "^0.0.14",
     "react": "^18.2.0",
     "vite-plugin-vuetify": "^1.0.2",
     "vuetify": "^3.1.6"

From 227b85fa10e7b53935b17cc0dca05c2c34eb9332 Mon Sep 17 00:00:00 2001
From: Eli <126903409+murluki@users.noreply.github.com>
Date: Tue, 14 Mar 2023 01:34:03 +0100
Subject: [PATCH 3/3] TonConnectButton

What's left to do is to find out how can we wrap this app with <TonConnectUIProvider manifestUrl={manifestUrl}>
    <App />
  </TonConnectUIProvider>. I have never worked with vue and combination of vue/typescript/ton could be tricky. Will try to do it with plugin or something like this:
https://markus.oberlehner.net/blog/automatic-dependency-injection-in-vue-with-context-providers/
https://markus.oberlehner.net/blog/context-aware-props-in-vuejs-components/
---
 components/navigation/Header.vue | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/components/navigation/Header.vue b/components/navigation/Header.vue
index aae68e0..8031802 100644
--- a/components/navigation/Header.vue
+++ b/components/navigation/Header.vue
@@ -6,25 +6,20 @@
         <v-spacer></v-spacer>
         <v-btn v-for="route in routes" :key="route.path" :to="route.path">{{ route.title }}</v-btn>
         <v-spacer></v-spacer>
-
-        <div v-if="state.status"> 
-          <v-btn variant="flat" color="primary" @click="connectUserWallet">
-          Connected
-           </v-btn>
-           <v-btn variant="flat" color="primary" @click="disconnectUser">
-          Disconnected
-           </v-btn>
-        </div>
-        <v-btn v-else variant="flat" color="primary" @click="connectUserWallet">
-          Connect Wallet
-           </v-btn>
+        <v-btn variant="flat" color="primary">
+          Connect wallet
+        </v-btn>
+        <h1>{{ TonConnectButton }}</h1>
       </div>
-
     </v-container>
   </v-app-bar>
 </template>
 
 <script lang="ts" setup>
+
+import { TonConnectButton } from '@tonconnect/ui-react';
+
+
 const routes = [
   {
     path: '/',
@@ -43,4 +38,5 @@ const routes = [
     title: 'whitepaper'
   },
 ]
+
 </script>