From b588843b5d99ea588b9909e463cd1867e4d31b1e Mon Sep 17 00:00:00 2001
From: Johnson Chen <chnejohnson@gmail.com>
Date: Mon, 13 May 2024 14:42:17 +0800
Subject: [PATCH] docs: add installation and update readme

---
 README.md                           | 33 +++++++-------
 app/app.vue                         | 21 ++-------
 app/components/content/Contract.vue |  4 +-
 app/content/examples/contract.md    |  2 +-
 app/content/installation.md         | 71 +++++++++++++++++++++++++++++
 app/core/sidebar.ts                 | 11 +++++
 6 files changed, 107 insertions(+), 35 deletions(-)
 create mode 100644 app/content/installation.md

diff --git a/README.md b/README.md
index dd97912..46f30a2 100644
--- a/README.md
+++ b/README.md
@@ -45,10 +45,7 @@
 
 <img src="https://github.com/vu3th/vue-dapp/blob/main/app/public/images/overview.png" alt="Vue Dapp Overview" style="max-width:100%;" width="800">
 
-
-## Getting Started
-
-### SPA with Vite
+## Installation
 
 ```bash
 npm install pinia @vue-dapp/core @vue-dapp/modal
@@ -59,6 +56,18 @@ import { createPinia } from 'pinia'
 app.use(createPinia())
 ```
 
+### Nuxt
+
+```bash
+npm install pinia @pinia/nuxt @vue-dapp/core @vue-dapp/nuxt @vue-dapp/modal
+```
+
+```ts
+modules: ['@pinia/nuxt', '@vue-dapp/nuxt']
+```
+
+## Getting Started
+
 ```vue
 <script lang="ts" setup>
 import { BrowserWalletConnector, useVueDapp } from '@vue-dapp/core'
@@ -91,16 +100,6 @@ function onClickConnectButton() {
 </template>
 ```
 
-### SSR with Nuxt 3
-
-```bash
-npm install pinia @pinia/nuxt @vue-dapp/core @vue-dapp/nuxt @vue-dapp/modal
-```
-
-```ts
-modules: ['@pinia/nuxt', '@vue-dapp/nuxt']
-```
-
 ## Examples
 
 - [vue-dapp-starter](https://github.com/vu3th/vue-dapp-starter) 
@@ -108,12 +107,14 @@ modules: ['@pinia/nuxt', '@vue-dapp/nuxt']
 
 ## Development
 
-```
-pnpm i
+```bash
+pnpm install
 pnpm build
 pnpm -F core watch
 pnpm -F modal watch
 pnpm dev
+pnpm build
+pnpm build:app
 ```
 
 
diff --git a/app/app.vue b/app/app.vue
index e8ea0f7..42ffdca 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -4,7 +4,6 @@ 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 { INFURA_ID } from './constants'
 
 import { darkTheme, lightTheme, type GlobalThemeOverrides } from 'naive-ui'
 import { useAppStore } from './stores/appStore'
@@ -23,7 +22,7 @@ useHead({
 	},
 })
 
-const { addConnectors, watchWalletChanged, watchDisconnect, onDisconnect, onAccountsChanged } = useVueDapp()
+const { addConnectors, watchWalletChanged, watchDisconnect } = useVueDapp()
 if (process.client) {
 	addConnectors([
 		new BrowserWalletConnector(),
@@ -44,26 +43,16 @@ if (process.client) {
 		}),
 		new CoinbaseWalletConnector({
 			appName: 'Vue Dapp',
-			jsonRpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`,
+			jsonRpcUrl: 'https://ethereum-rpc.publicnode.com',
 		}),
 	])
 }
-if (process.client) {
-	onAccountsChanged(() => {
-		console.log('Disconnected')
-	})
-}
 
 const { setWallet, resetWallet } = useEthers()
 
-watchWalletChanged(
-	async (wallet: ConnWallet) => {
-		setWallet(wallet.provider)
-	},
-	{
-		immediate: true,
-	},
-)
+watchWalletChanged(async (wallet: ConnWallet) => {
+	setWallet(wallet.provider)
+})
 
 watchDisconnect(() => {
 	resetWallet()
diff --git a/app/components/content/Contract.vue b/app/components/content/Contract.vue
index 730f231..4379075 100644
--- a/app/components/content/Contract.vue
+++ b/app/components/content/Contract.vue
@@ -20,7 +20,7 @@ const contract = new ethers.Contract(contractAddress, iface, defaultProvider)
 
 // ======================== Wallet ========================
 
-const { isConnected, wallet, error: ConnectError } = useVueDapp()
+const { isConnected, wallet, error: connectError } = useVueDapp()
 
 onMounted(() => {
 	fetchData()
@@ -165,7 +165,7 @@ const isReady = computed(() => isConnected.value && !showSwitchButton.value)
 			</n-button>
 		</div>
 
-		<div class="text-red-500">{{ error || ConnectError }}</div>
+		<div class="text-red-500">{{ error || connectError }}</div>
 
 		<!-- Event logs -->
 		<div>
diff --git a/app/content/examples/contract.md b/app/content/examples/contract.md
index 568ed47..2667c27 100644
--- a/app/content/examples/contract.md
+++ b/app/content/examples/contract.md
@@ -39,7 +39,7 @@ const contract = new ethers.Contract(contractAddress, iface, defaultProvider)
 
 // ======================== Wallet ========================
 
-const { isConnected, wallet, error: ConnectError } = useVueDapp()
+const { isConnected, wallet, error: connectError } = useVueDapp()
 
 onMounted(() => {
 	fetchData()
diff --git a/app/content/installation.md b/app/content/installation.md
new file mode 100644
index 0000000..52d7d48
--- /dev/null
+++ b/app/content/installation.md
@@ -0,0 +1,71 @@
+---
+description: ''
+head:
+  meta:
+    - name: 'keywords'
+      content: ''
+---
+
+# Installation
+
+```bash
+npm install pinia @vue-dapp/core @vue-dapp/modal
+```
+
+```ts [main.ts]
+import { createPinia } from 'pinia'
+app.use(createPinia())
+```
+
+## Nuxt
+
+```bash
+npm install pinia @pinia/nuxt @vue-dapp/core @vue-dapp/nuxt @vue-dapp/modal
+```
+
+```ts
+modules: ['@pinia/nuxt', '@vue-dapp/nuxt']
+```
+
+## Add Connectors
+
+```bash
+npm install @vue-dapp/walletconnect
+```
+
+```bash
+npm install @vue-dapp/coinbase
+```
+
+```ts
+import { BrowserWalletConnector, useVueDapp } from '@vue-dapp/core'
+import { WalletConnectConnector } from '@vue-dapp/walletconnect'
+import { CoinbaseWalletConnector } from '@vue-dapp/coinbase'
+
+const { addConnectors } = useVueDapp()
+
+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://ethereum-rpc.publicnode.com'
+	}),
+])
+```
+
+<!-- ## Integrate with Ethers.js -->
\ No newline at end of file
diff --git a/app/core/sidebar.ts b/app/core/sidebar.ts
index 9354fc1..1c807f9 100644
--- a/app/core/sidebar.ts
+++ b/app/core/sidebar.ts
@@ -12,6 +12,17 @@ export const sidebarMenu = [
 			),
 		key: '/overview',
 	},
+	{
+		label: () =>
+			h(
+				NuxtLink,
+				{
+					to: '/installation',
+				},
+				{ default: () => 'Installation' },
+			),
+		key: '/installation',
+	},
 	{
 		label: () =>
 			h(