From e1f8be88dffabaa7c0a81ffe961b3c56ce66cc96 Mon Sep 17 00:00:00 2001
From: sansx <xiathxth@gmail.com>
Date: Sun, 8 Sep 2024 12:37:05 +0800
Subject: [PATCH] fix: update injections components & watch options change

---
 src/components/TonConnectUIProvider.vue | 71 ++++++++++++++++++-------
 1 file changed, 52 insertions(+), 19 deletions(-)

diff --git a/src/components/TonConnectUIProvider.vue b/src/components/TonConnectUIProvider.vue
index 129872c..1145132 100644
--- a/src/components/TonConnectUIProvider.vue
+++ b/src/components/TonConnectUIProvider.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-import { ref, provide, defineComponent, h, isVue2 } from "vue-demi";
-import { TonConnectUI } from "@tonconnect/ui";
+import { provide, defineComponent, h, isVue2, shallowRef, watch, onMounted, onUnmounted, toRaw, PropType } from "vue-demi";
+import { TonConnectUI, Wallet } from "@tonconnect/ui";
 import { isClientSide } from "../utils/web";
 import { TonConnectUIProviderProps } from "../utils/UIProvider";
 
@@ -8,20 +8,62 @@ export default defineComponent({
   name: "TonConnectUIProvider",
   props: {
     options: {
-      type: Object,
+      type: Object as PropType<TonConnectUIProviderProps | null>,
     },
   },
-  setup(props: { options: TonConnectUIProviderProps }, { slots }) {
-    console.log("setup");
-
-    const tonConnectUI = ref<TonConnectUI | null>(null);
+  setup(props: { options: TonConnectUIProviderProps | null },{slots}) {
+    // Create a shallow reactive reference for TonConnectUI instance
+    const tonConnectUI = shallowRef<TonConnectUI | null>(null);
+    // Create reactive references for wallet and unsubscribe function
+    const wallet = shallowRef<Wallet | null>(null);
+    const unsubscribe = shallowRef(() => {});
+    
     if (isClientSide() && !tonConnectUI.value) {
-      tonConnectUI.value = new TonConnectUI(props.options);
+        unsubscribe.value();
+        tonConnectUI.value = new TonConnectUI(toRaw(props.options) || {});
     }
 
+    // Watch for changes in options
+    watch(
+      () => props.options,
+      () => {
+        if (isClientSide() && tonConnectUI.value && props.options) {
+          // create new instance, but will cause warning
+          // tonConnectUI.value = new TonConnectUI(toRaw(props.options) || {});
+
+          // update options
+          tonConnectUI.value.uiOptions = toRaw(props.options);
+        }
+      },
+      { deep: true }
+    );
+
+    // Provide the TonConnectUI instance to child components
     provide("tonConnectUI", tonConnectUI.value);
 
-    console.log("provide")
+    onMounted(() => {
+      // Watch for changes in tonConnectUI
+      watch(tonConnectUI, (actualTonConnectUI) => {
+        if (actualTonConnectUI) {
+          // Unsubscribe from previous subscription
+          unsubscribe.value();
+
+          // Update wallet value
+          wallet.value = actualTonConnectUI.wallet;
+
+          // Subscribe to status changes
+          unsubscribe.value = actualTonConnectUI.onStatusChange((value) => {
+            wallet.value = value;
+          });
+        }
+      }, { immediate: true });
+    });
+
+    // Clean up subscription on component unmount
+    onUnmounted(() => {
+      unsubscribe.value();
+    });
+
     return () => {
       if (isVue2) {
         return h("div", slots?.default as any);
@@ -31,15 +73,6 @@ export default defineComponent({
         slots.default ? (slots.default as any)() : "nothing"
       );
     };
-  },
-  render() {
-    if (isVue2) {
-      return h("div", this.$slots.default ? this.$slots.default : "nothing");
-    }
-    return h(
-      "div",
-      this.$slots.default ? (this.$slots.default as any)() : "nothing"
-    );
-  },
+  }
 });
 </script>
\ No newline at end of file