Using vanilla components in Vue (#52)

* refactor: changing vanilla config to single function

* refactor: changing vanilla config to single function

* refactor: change wallet kit options

* fix: vanilla imports

* feat: vue using common components

README.md

@@ -1,6 +1,7 @@
 # vechain-dapp-kit
 
-VeWorld WalletKit is a typescript library that facilitates seamless interaction between VeChain wallets (veworld, sync 2) and dApps, enhancing user experience and developer convenience.
+VeWorld WalletKit is a typescript library that facilitates seamless interaction between VeChain wallets (veworld, sync2)
+and dApps, enhancing user experience and developer convenience.
 
 ## Why ?
 
@@ -50,6 +51,14 @@ yarn dev
 yarn clean
 ```
 
+### Purge project
+
+-   Runs yarn clean and removes all node_modules
+
+```bash
+yarn purge
+```
+
 ### Install yarn packages
 
 ```bash

apps/sample-react-app/package.json

@@ -6,12 +6,13 @@
     "main": "src/index.js",
     "scripts": {
         "build": "yarn compile && react-app-rewired build",
-        "clean": "rm -rf build node_modules .turbo cache artifacts src/hardhat",
+        "clean": "rm -rf build .turbo cache artifacts src/hardhat",
         "compile": "yarn hardhat compile",
         "dev": "react-app-rewired start",
         "eject": "react-app-rewired eject",
         "postinstall": "yarn compile",
         "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
+        "purge": "yarn clean && rm -rf node_modules",
         "start": "HTTPS=true react-app-rewired start",
         "test": "echo 'Not yet testing'"
     },

apps/sample-vanilla-app/index.js

@@ -1,9 +1,6 @@
 // eslint-disable-next-line eslint-comments/disable-enable-pair
 /* eslint-disable no-undef */
-import {
-    VechainWalletKit,
-    VechainWalletKitModal,
-} from '@vechain/vanilla-wallet-kit';
+import { configureThorModal } from '@vechain/vanilla-wallet-kit';
 
 const walletConnectOptions = {
     projectId: 'a0b855ceaf109dbc8426479a4c3d38d8',
@@ -21,6 +18,4 @@ const vechainWalletKitOptions = {
     walletConnectOptions,
 };
 
-const walletKit = new VechainWalletKit(vechainWalletKitOptions);
-const vechainWalletKit = new VechainWalletKitModal(walletKit);
-vechainWalletKit.initModalListeners();
+configureThorModal(vechainWalletKitOptions);

apps/sample-vanilla-app/package.json

@@ -6,7 +6,9 @@
     "author": "",
     "type": "module",
     "scripts": {
+        "clean": "rm -rf dist",
         "dev": "parcel index.html --open",
+        "purge": "yarn clean && rm -rf node_modules",
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "dependencies": {

apps/sample-vue-app/package.json

@@ -4,9 +4,10 @@
     "private": true,
     "scripts": {
         "build": "vue-cli-service build",
-        "clean": "rm -rf dist node_modules .turbo",
+        "clean": "rm -rf dist .turbo",
         "dev": "vue-cli-service serve",
-        "lint": "vue-cli-service lint"
+        "lint": "vue-cli-service lint",
+        "purge": "yarn clean && rm -rf node_modules"
     },
     "browserslist": [
         "> 1%",
@@ -30,6 +31,7 @@
         "root": true
     },
     "dependencies": {
+        "@vechain/vanilla-wallet-kit": "*",
         "@vechain/wallet-kit": "*",
         "core-js": "^3.8.3",
         "node-polyfill-webpack-plugin": "^2.0.1",

apps/sample-vue-app/src/App.vue

@@ -2,24 +2,21 @@
     <ConnexProvider>
         <img alt="Vue logo" src="./assets/logo.png" />
         <div id="app">
-            <button class="btn" type="button" @click="showModal">
-                Open Modal!
-            </button>
-
+            <vwk-connect-button-with-modal
+                mode="DARK"
+            ></vwk-connect-button-with-modal>
             <ConnectWalletModal v-show="isModalVisible" @close="closeModal" />
         </div>
     </ConnexProvider>
 </template>
 
 <script lang="ts">
-import ConnectWalletModal from './components/ConnectWalletModal.vue';
 import { defineComponent, ref } from 'vue';
 import ConnexProvider from '@/connex/ConnexProvider.vue';
 
 export default defineComponent({
     components: {
         ConnexProvider,
-        ConnectWalletModal,
     },
 
     setup() {

apps/sample-vue-app/src/connex/ConnexProvider.vue

@@ -13,6 +13,7 @@ import {
 } from '@/connex/keys';
 import { WalletActions, WalletState } from '@/connex/types';
 import { WalletConnectOptions } from '@vechain/wallet-connect';
+import { configureThorModal } from '@vechain/vanilla-wallet-kit';
 
 const initWallets = (hasWcOptions: boolean) => {
     const wallets: WalletSource[] = ['sync2'];
@@ -62,6 +63,8 @@ export default defineComponent({
             walletConnectOptions,
         });
 
+        configureThorModal(connex);
+
         const updateAccount = (addr: string) => {
             walletState.account = addr;
         };

apps/sample-vue-app/src/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue';
 import App from './App.vue';
+import '@vechain/vanilla-wallet-kit';
 
 createApp(App).mount('#app');

apps/sample-vue-app/vue.config.js

@@ -12,4 +12,16 @@ module.exports = defineConfig({
             },
         },
     },
+    chainWebpack: (config) => {
+        config.module
+            .rule('vue')
+            .use('vue-loader')
+            .tap((options) => {
+                options.compilerOptions = {
+                    ...options.compilerOptions,
+                    isCustomElement: (tag) => tag.startsWith('vwk-'),
+                };
+                return options;
+            });
+    },
 });

package.json

@@ -8,12 +8,13 @@
         "build": "turbo run build",
         "build-react-kit": "turbo run build  --filter='@vechain/react-wallet-kit'",
         "build:deps": "turbo build --no-daemon --filter='@vechain/*'",
-        "clean": "npx turbo@latest run clean && rm -rf node_modules .turbo .parcel-cache",
+        "clean": "rm -rf .turbo .parcel-cache build && npx turbo@latest run clean",
         "dev": "turbo run dev --no-daemon",
         "format": "prettier --write \"**/*.{ts,tsx,md,json,js,jsx}\"",
         "install:all": "yarn && yarn run build:deps",
         "lint": "turbo run lint",
         "prepare": "husky install",
+        "purge": "npx turbo@latest run purge && rm -rf node_modules",
         "reinstall": "yarn clean && yarn && yarn run build:deps",
         "test": "turbo run test"
     },