Merge pull request anza-xyz#139 from lorisleiva/feature/fix-overflow-…

…hidden [Vue] Overflow hidden bug and stores can be undefined
tkey · Oct 25, 2021 · 74a3174 · 74a3174
2 parents de489d9 + 6d734b6
commit 74a3174
Show file tree

Hide file tree

Showing 4 changed files with 1,072 additions and 650 deletions.
diff --git a/packages/core/vue/src/useWallet.ts b/packages/core/vue/src/useWallet.ts
@@ -53,8 +53,11 @@ export interface WalletStoreProps {
 
 const walletStoreKey: InjectionKey<WalletStore> = Symbol();
 
-export const useWallet = (): WalletStore | undefined => {
-    return inject(walletStoreKey);
+export const useWallet = (): WalletStore => {
+    const walletStore = inject(walletStoreKey);
+    if (!walletStore)
+        throw new Error('Wallet not initialized. Please use the `WalletProvider` component to initialize the wallet.');
+    return walletStore;
 };
 
 export const initWallet = ({

diff --git a/packages/ui/vue-ui/src/WalletModal.vue b/packages/ui/vue-ui/src/WalletModal.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { useWallet } from "@solana/wallet-adapter-vue";
 import { WalletName } from "@solana/wallet-adapter-wallets";
-import { computed, defineComponent, ref, watchPostEffect } from "vue";
+import { computed, defineComponent, ref, watch } from "vue";
 import { useWalletModal } from "./useWalletModal";
 import WalletButton from "./WalletButton.vue";
 import WalletListItem from "./WalletListItem.vue";
@@ -54,7 +54,7 @@ export default defineComponent({
             }
         };
 
-        watchPostEffect(onInvalidate => {
+        watch(visible, (newVisible, oldVisible, onInvalidate) => {
             const handleKeyDown = (event: KeyboardEvent) => {
                 if (event.key === 'Escape') {
                     hideModal();
@@ -64,18 +64,27 @@ export default defineComponent({
             };
 
             // Get original overflow
-            const { overflow } = window.getComputedStyle(document.body);
-            // Prevent scrolling on mount
-            document.body.style.overflow = 'hidden';
-            // Listen for keydown events
-            window.addEventListener('keydown', handleKeyDown, false);
+            let overflow = window.getComputedStyle(document.body).overflow;
+
+            if (newVisible) {
+                // Refetch original overflow
+                overflow = window.getComputedStyle(document.body).overflow;
+                // Prevent scrolling on mount
+                document.body.style.overflow = 'hidden';
+                // Listen for keydown events
+                window.addEventListener('keydown', handleKeyDown, false);
+            } else {
+                // Re-enable scrolling when component unmounts
+                document.body.style.overflow = overflow;
+                window.removeEventListener('keydown', handleKeyDown, false);
+            }
 
             onInvalidate(() => {
                 // Re-enable scrolling when component unmounts
                 document.body.style.overflow = overflow;
                 window.removeEventListener('keydown', handleKeyDown, false);
             });
-        });
+        }, { immediate: true });
 
         return {
             container,

diff --git a/packages/ui/vue-ui/src/useWalletModal.ts b/packages/ui/vue-ui/src/useWalletModal.ts
@@ -8,8 +8,13 @@ export interface WalletModalStore {
 
 const walletModalStoreKey: InjectionKey<WalletModalStore> = Symbol();
 
-export const useWalletModal = (): WalletModalStore | undefined => {
-    return inject(walletModalStoreKey);
+export const useWalletModal = (): WalletModalStore => {
+    const walletModalStore = inject(walletModalStoreKey);
+    if (!walletModalStore)
+        throw new Error(
+            'Wallet modal not initialized. Please use the `WalletModalProvider` component to initialize the wallet modal.'
+        );
+    return walletModalStore;
 };
 
 export const initWalletModal = (initiallyVisible = false): void => {