Merge pull request #9 from TownSquareXYZ/fix-issues

Fix issues
TownSquareXYZ · Sep 8, 2024 · c26a6e7 · c26a6e7
2 parents aa74390 + e1f8be8
commit c26a6e7
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 30 deletions.
diff --git a/src/components/TonConnectButton.vue b/src/components/TonConnectButton.vue
@@ -10,17 +10,9 @@ export default defineComponent({
       required: false,
       default: "ton-connect-button",
     },
-    className: {
-      type: String,
-      required: false,
-    },
-    styles: {
-      type: Object,
-      required: false,
-    },
   },
   setup(
-    props: { className?: string; styles?: any; buttonRootId?: string },
+    props: { buttonRootId?: string },
     { slots }
   ) {
     const [_, setOptions] = useTonConnectUI();
@@ -37,12 +29,11 @@ export default defineComponent({
       return h(
         "div",
         {
-          class: props.className,
           id: props.buttonRootId || "",
           attrs: {
             id: props.buttonRootId || "",
           },
-          style: { width: "fit-content", ...props.styles },
+          style: { width: "fit-content" },
         } as any,
         (slots as any)?.default?.()
       );

diff --git a/src/components/TonConnectUIProvider.vue b/src/components/TonConnectUIProvider.vue
@@ -1,27 +1,69 @@
 <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";
 
 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>