Merge pull request #148 from vu3th/v1

core - alpha.8 vd-board - alpha.4 walletconnect - alpha.2
vu3th · Nov 24, 2023 · f411a1c · f411a1c
2 parents 590af2b + 436aada
commit f411a1c
Show file tree

Hide file tree

Showing 53 changed files with 608 additions and 2,769 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -1 +1 @@
-custom: ['https://arbiscan.io/address/0x9D75F4EbcB8e7669E59dcc27CBadC698E0F77187#internaltx']
+custom: ['https://arbiscan.io/address/0x9D75F4EbcB8e7669E59dcc27CBadC698E0F77187#internaltx', 'https://explorer.gitcoin.co/#/round/424/0xd4cc0dd193c7dc1d665ae244ce12d7fab337a008/0xd4cc0dd193c7dc1d665ae244ce12d7fab337a008-75']
diff --git a/README.md b/README.md
@@ -26,153 +26,55 @@
 
 </p>
 
-## Documentation
+# Vue Dapp
 
-- v1: Work in progress, see [Discussion#141](https://github.com/vu3th/vue-dapp/discussions/141)
-
-
-Brief versions and functionalities are as follows:
-
-- v0.12.x: Add bitget wallet
-- v0.11.x: Uses ethers v5 with WalletConnect dependencies update.
-- v0.10.x: Uses ethers v6 and supports WalletConnect v2.
-- v0.9.x: Uses ethers v5 and supports WalletConnect v2.
-- Before v0.8.x: Uses ethers v5 and does not support WalletConnect v2.
+Vue Dapp v1 is working in progress, see [Discussion#141](https://github.com/vu3th/vue-dapp/discussions/141). I would probably release a stable version by the end of 2023.
 
 I recommend keeping an eye on [vue3-dapp-starter](https://github.com/vu3th/vue3-dapp-starter) and [nuxt-dapp](https://github.com/vu3th/nuxt-dapp), as it strives to maintain a development-friendly version whenever possible.
 
-Please be cautious when using the documentation below, as it has not been updated for some time.
 
-- [Documentation (v0.9.x)](https://vue-dapp-docs.netlify.app/)
-- [Migrating to v0.5.x ~ v0.9.x](https://vue-dapp-docs.netlify.app/migration)
+## Monorepo Architecture
 
-## Packages
+library
 
-| Package                 | Description                                       |
+| Name                    | Description                                       |
 | ----------------------- | ------------------------------------------------- |
 | @vue-dapp/core          | useWalletStore, connector, utils, and metamask... |
 | @vue-dapp/vd-board      | Vue components for connecting wallet              |
 | @vue-dapp/walletconnect | WalletConnect integration                         |
-| @vue-dapp/legacy        | vue-dapp version below v1                         |
-| @vue-dapp/docs          | documentation                                     |
-| @vue-dapp/app           | Nuxt 3 demo for v1                                |
-| @vue-dapp/demo          | Vue 3 demo for @vue-dapp/legacy                   |
 
+app
 
-## Installation (below v0.10.x)
+| Name           | Description        |
+| -------------- | ------------------ |
+| @vue-dapp/app  | Nuxt 3 demo for v1 |
+| @vue-dapp/docs | documentation      |
 
-```bash
-yarn add ethers vue-dapp
-```
+legacy
 
-If you want to support more wallet providers not only MetaMask, you should install respective packages to enable the dynamic import.
+| Name             | Description                   |
+| ---------------- | ----------------------------- |
+| @vue-dapp/legacy | vue-dapp version below v1     |
+| @vue-dapp/demo   | Vue demo for @vue-dapp/legacy |
 
-- Support WalletConnect
-```bash
-yarn add @walletconnect/web3-provider
-```
 
-- Support Coinbase Wallet
-```bash
-yarn add @coinbase/wallet-sdk
-```
+## Installation
 
-- Support Gnosis Safe
 ```bash
-yarn add @gnosis.pm/safe-apps-provider @gnosis.pm/safe-apps-sdk
+yarn add @vue-dapp/core @vue-dapp/vd-board
 ```
 
-## Quick Start
-
-Step 1. Add plugin to your app:
-
-```javascript
-import { VueDapp } from "vue-dapp";
-const app = createApp(App);
-app.use(VueDapp);
-app.mount("#app");
-```
+If you want to support more wallet providers not only MetaMask, you should install respective packages.
 
-Step 2. By default, VueDapp includes `Mainnet` and `Goerli` networks, but you can extend it to include other networks:
-
-```javascript
-app.use(VueDapp, {
- autoConnect: true, // Automatically connect MetaMask wallet when the page is loaded
-  networks: {
-    80001: {
-      chainId: ethers.utils.hexValue(80001),
-      blockExplorerUrls: ['https://mumbai.polygonscan.com/'],
-      chainName: 'Mumbai',
-      rpcUrls: ['https://rpc-mumbai.maticvigil.com/'],
-      nativeCurrency: {
-        name: 'Mumbai',
-        decimals: 18,
-        symbol: 'MATIC',
-      },
-    },
-    42161: {
-      ...
-    },
-  },
-});
-
-```
-For more examples please check:
-https://github.com/wagmi-dev/wagmi/blob/main/packages/core/src/constants/chains.ts
-
-
-Step 3. Add `<vd-board />` to your `App.vue` and add a button to open the board:
-
-```vue
-<button @click="open">Connect Wallet</button>
-<vd-board :connectors="connectors" dark />
-```
-
-Step 4. Construct your connectors and use composable functions in your scripts:
-
-```js
-import {
-  MetaMaskConnector,
-  WalletConnectConnector,
-  CoinbaseWalletConnector,
-  useBoard,
-} from "vue-dapp";
-
-setup() {
-  const { open } = useBoard();
-  const infuraId = "";
-  const connectors = [
-    new MetaMaskConnector({
-      appUrl: "http://localhost:3000",
-    }),
-    new WalletConnectConnector({
-      qrcode: true,
-      rpc: {
-        1: `https://mainnet.infura.io/v3/${infuraId}`,
-        4: `https://rinkeby.infura.io/v3/${infuraId}`,
-      },
-    }),
-    new CoinbaseWalletConnector({
-      appName: "Vue Dapp",
-      jsonRpcUrl: `https://mainnet.infura.io/v3/${infuraId}`,
-    }),
-  ];
-  return {
-    connectors,
-    open,
-  };
-}
+### WalletConnect
+```bash
+yarn add @vue-dapp/walletconnect
 ```
 
-Take a look at [Configurations](https://vue-dapp-docs.netlify.app/configurations) for more informations about Vue CLI, Vite, and Nuxt3 configurations.
-
-To see the demo code, check it out [here](https://github.com/vu3th/vue-dapp/blob/main/demo/src/App.vue).
-
 ## Support 🙏
 
-Gitcoin Grants 18: https://explorer.gitcoin.co/#/round/10/0x8de918f0163b2021839a8d84954dd7e8e151326d/0x8de918f0163b2021839a8d84954dd7e8e151326d-43
+Gitcoin Grants 19: https://explorer.gitcoin.co/#/round/424/0xd4cc0dd193c7dc1d665ae244ce12d7fab337a008/0xd4cc0dd193c7dc1d665ae244ce12d7fab337a008-75
 
 ## MIT license
 
 Copyright (c) 2021-present, Johnson Chen ([@chnejohnson](https://twitter.com/chnejohnson))
-
diff --git a/app/components/Web3Provider.vue b/app/components/Web3Provider.vue
@@ -6,37 +6,42 @@ import { ethers } from 'ethers'
 import { MetaMaskConnector, useWalletStore } from '@vue-dapp/core'
 import { WalletConnectConnector } from '@vue-dapp/walletconnect'
 import { Board } from '@vue-dapp/vd-board'
+import '@vue-dapp/vd-board/dist/style.css'
 
 const dappStore = useDappStore()
 const { isConnected, user } = storeToRefs(dappStore)
 
-const { onActivated, onChanged, onDeactivated } = useWalletStore()
+const { onActivated, onChanged, onDeactivated, setDumb } = useWalletStore()
+setDumb(false)
 
-onActivated(async ({ address, provider }) => {
+onActivated(async ({ address, provider, chainId }) => {
+	console.log('onActivated')
 	const ethersProvider = new ethers.BrowserProvider(provider)
 	const signer = await ethersProvider.getSigner()
-	const network = await ethersProvider.getNetwork()
 
 	dappStore.setUser({
 		address,
 		signer,
-		chainId: Number(network.chainId),
+		chainId,
 	})
 })
 
-onChanged(async ({ address, provider }) => {
+onChanged(async ({ address, provider, chainId }) => {
+	console.log('onChanged')
+
 	const ethersProvider = new ethers.BrowserProvider(provider)
 	const signer = await ethersProvider.getSigner()
-	const network = await ethersProvider.getNetwork()
 
 	dappStore.setUser({
 		address,
 		signer,
-		chainId: Number(network.chainId),
+		chainId,
 	})
 })
 
 onDeactivated(() => {
+	console.log('onDeactivated')
+
 	dappStore.resetUser()
 })
 
@@ -93,6 +98,7 @@ watch(isConnected, () => {
 		<Board
 			:connectors="connectors"
 			dark
+			autoConnect
 			:autoConnectErrorHandler="autoConnectErrorHandler"
 			:connectErrorHandler="connectErrorHandler"
 		/>

diff --git a/app/components/wallet/UserStatus.vue b/app/components/wallet/UserStatus.vue
@@ -8,7 +8,7 @@ import { useBoardStore } from '@vue-dapp/vd-board'
 const { open } = useBoardStore()
 
 const { disconnect } = useWalletStore()
-const { connector, status, address, isConnected } = storeToRefs(useWalletStore())
+const { connector, status, address, isConnected, dumb } = storeToRefs(useWalletStore())
 
 const dappStore = useDappStore()
 const { isNetworkUnmatched } = storeToRefs(dappStore)

diff --git a/app/nuxt.config.ts b/app/nuxt.config.ts
@@ -1,5 +1,3 @@
-import { nodePolyfills } from 'vite-plugin-node-polyfills'
-
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
 	devtools: { enabled: true },
@@ -59,7 +57,4 @@ export default defineNuxtConfig({
 			],
 		},
 	},
-	vite: {
-		plugins: [nodePolyfills()],
-	},
 })
diff --git a/app/package.json b/app/package.json
@@ -17,8 +17,6 @@
 		"@vue-dapp/walletconnect": "workspace:^",
 		"@vueuse/core": "^10.5.0",
 		"@vueuse/nuxt": "^10.5.0",
-		"@walletconnect/ethereum-provider": "^2.10.2",
-		"@walletconnect/modal": "^2.6.2",
 		"copy-to-clipboard": "^3.3.3",
 		"ethers": "6.8.0",
 		"nuxt-icon": "^0.5.0",
@@ -36,7 +34,6 @@
 		"postcss": "^8.4.20",
 		"postcss-custom-properties": "^13.3.2",
 		"sass": "^1.69.3",
-		"vite-plugin-node-polyfills": "^0.15.0",
 		"vue": "^3.3.4",
 		"vue-router": "^4.2.5"
 	}

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -18,12 +18,12 @@ module.exports = {
 		repo: 'chnejohnson/vue-dapp',
 		nav: [
 			{
-				text: 'v0.7.1',
+				text: 'v1.0.0-alpha',
 				link: 'https://github.com/vu3th/vue-dapp/releases',
 			},
 			{
 				text: 'Demo',
-				link: 'https://vuedapp.vercel.app/',
+				link: 'https://vue-dapp.vercel.app/',
 			},
 		],
 		sidebar: [
@@ -34,66 +34,26 @@ module.exports = {
 						text: 'Getting Started',
 						link: '/',
 					},
+					// {
+					// 	text: 'Migrating to v1',
+					// 	link: '/migration',
+					// },
 					{
-						text: 'Migrating to v0.5.x',
-						link: '/migration',
-					},
-					{
-						text: 'Configurations',
-						link: '/configurations',
+						text: 'Examples',
+						link: '/examples',
 					},
 					{
 						text: 'Contributing',
 						link: '/contributing',
 					},
-					{
-						text: 'Resources',
-						link: '/resources',
-					},
 				],
 			},
 			{
 				text: 'API',
 				items: [
 					{
-						text: 'Plugin Options',
-						link: '/api/plugin-options',
-					},
-					{
-						text: 'Components',
-						link: '/api/components',
-					},
-					{
-						text: 'Connectors',
-						link: '/api/connectors',
-					},
-					{
-						text: 'Constants',
-						link: '/api/constants',
-					},
-					{
-						text: 'Directives',
-						link: '/api/directives',
-					},
-					{
-						text: 'useWallet',
-						link: '/api/use-wallet',
-					},
-					{
-						text: 'useEthers',
-						link: '/api/use-ethers',
-					},
-					{
-						text: 'useEthersHooks',
-						link: '/api/use-ethers-hooks',
-					},
-					{
-						text: 'useMulticall',
-						link: '/api/use-multicall',
-					},
-					{
-						text: 'Utilities',
-						link: '/api/utilities',
+						text: '@vue-dapp/vd-board',
+						link: '/api/vd-board.md',
 					},
 				],
 			},

diff --git a/docs/api/components.md b/docs/api/components.md
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		custom: ['https://arbiscan.io/address/0x9D75F4EbcB8e7669E59dcc27CBadC698E0F77187#internaltx']
		custom: ['https://arbiscan.io/address/0x9D75F4EbcB8e7669E59dcc27CBadC698E0F77187#internaltx', 'https://explorer.gitcoin.co/#/round/424/0xd4cc0dd193c7dc1d665ae244ce12d7fab337a008/0xd4cc0dd193c7dc1d665ae244ce12d7fab337a008-75']