From 14762c92cae7cd7a9662b35b0032c19a251a17d2 Mon Sep 17 00:00:00 2001
From: Johnson Chen <chnejohnson@gmail.com>
Date: Mon, 13 May 2024 13:18:42 +0800
Subject: [PATCH] fix(walletconnect,coinbase): vite hot reload issue #162

---
 app/app.vue                           | 43 ++++++++++++++-------------
 packages/coinbase/vite.config.ts      |  8 +++++
 packages/walletconnect/vite.config.ts |  3 +-
 3 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/app/app.vue b/app/app.vue
index a3c2b86..e8ea0f7 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -2,8 +2,9 @@
 import { BrowserWalletConnector, useVueDapp, type ConnWallet } from '@vue-dapp/core'
 import { VueDappModal } from '@vue-dapp/modal'
 import '@vue-dapp/modal/dist/style.css'
-// import { WalletConnectConnector } from '@vue-dapp/walletconnect'
-// import { CoinbaseWalletConnector } from '@vue-dapp/coinbase'
+import { WalletConnectConnector } from '@vue-dapp/walletconnect'
+import { CoinbaseWalletConnector } from '@vue-dapp/coinbase'
+import { INFURA_ID } from './constants'
 
 import { darkTheme, lightTheme, type GlobalThemeOverrides } from 'naive-ui'
 import { useAppStore } from './stores/appStore'
@@ -26,25 +27,25 @@ const { addConnectors, watchWalletChanged, watchDisconnect, onDisconnect, onAcco
 if (process.client) {
 	addConnectors([
 		new BrowserWalletConnector(),
-		// new WalletConnectConnector({
-		// 	projectId: 'd1e65611568666138126d315c0bafd7d',
-		// 	chains: [1],
-		// 	showQrModal: true,
-		// 	qrModalOptions: {
-		// 		themeMode: 'light',
-		// 		themeVariables: undefined,
-		// 		desktopWallets: undefined,
-		// 		walletImages: undefined,
-		// 		mobileWallets: undefined,
-		// 		enableExplorer: true,
-		// 		privacyPolicyUrl: undefined,
-		// 		termsOfServiceUrl: undefined,
-		// 	},
-		// }),
-		// new CoinbaseWalletConnector({
-		// 	appName: 'Vue Dapp',
-		// 	jsonRpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`,
-		// }),
+		new WalletConnectConnector({
+			projectId: 'd1e65611568666138126d315c0bafd7d',
+			chains: [1],
+			showQrModal: true,
+			qrModalOptions: {
+				themeMode: 'light',
+				themeVariables: undefined,
+				desktopWallets: undefined,
+				walletImages: undefined,
+				mobileWallets: undefined,
+				enableExplorer: true,
+				privacyPolicyUrl: undefined,
+				termsOfServiceUrl: undefined,
+			},
+		}),
+		new CoinbaseWalletConnector({
+			appName: 'Vue Dapp',
+			jsonRpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`,
+		}),
 	])
 }
 if (process.client) {
diff --git a/packages/coinbase/vite.config.ts b/packages/coinbase/vite.config.ts
index 6454332..72bbbdd 100644
--- a/packages/coinbase/vite.config.ts
+++ b/packages/coinbase/vite.config.ts
@@ -22,5 +22,13 @@ export default defineConfig({
 			fileName: name,
 		},
 		outDir: 'dist',
+		rollupOptions: {
+			external: ['vue'],
+			output: {
+				globals: {
+					vue: 'vue',
+				},
+			},
+		},
 	},
 })
diff --git a/packages/walletconnect/vite.config.ts b/packages/walletconnect/vite.config.ts
index dfe1f29..cd02f4a 100644
--- a/packages/walletconnect/vite.config.ts
+++ b/packages/walletconnect/vite.config.ts
@@ -23,10 +23,11 @@ export default defineConfig({
 		},
 		outDir: 'dist',
 		rollupOptions: {
-			external: ['@walletconnect/ethereum-provider'],
+			external: ['@walletconnect/ethereum-provider', 'vue'],
 			output: {
 				globals: {
 					'@walletconnect/ethereum-provider': 'EthereumProvider',
+					vue: 'vue',
 				},
 			},
 		},