Sample vue app (#40)

* feat(vue): initial vue commit * feat(vue): init typescript * feat(vue): connect wallet working * feat(vue): minors * feat(vue): update yarn.lock
vechain · Nov 1, 2023 · fb9ca9f · fb9ca9f
1 parent ef95049
commit fb9ca9f
Show file tree

Hide file tree

Showing 27 changed files with 1,919 additions and 137 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
-  "eslint.workingDirectories": [
-    {
-      "mode": "auto"
-    }
-  ]
+    "eslint.workingDirectories": [
+        {
+            "mode": "auto"
+        }
+    ]
 }
diff --git a/apps/sample-react-app/src/Constants/Constants.ts b/apps/sample-react-app/src/Constants/Constants.ts
@@ -1,4 +1,4 @@
-import { WalletSource } from '@vechain/wallet-kit';
+import type { WalletSource } from '@vechain/wallet-kit';
 
 export const NODE_URL = 'https://testnet.vechain.org/';
 export const NODE_NETWORK = 'test';
@@ -11,19 +11,19 @@ interface SourceInfo {
 const baseLogoUrl = `${process.env.PUBLIC_URL}/images/logo`;
 
 export const WalletSources: Record<WalletSource, SourceInfo> = {
-    [WalletSource.WalletConnect]: {
+    'wallet-connect': {
         name: 'Wallet Connect',
         logo: `${baseLogoUrl}/wallet-connect-logo.png`,
     },
-    [WalletSource.VeWorldExtension]: {
+    'veworld-extension': {
         name: 'VeWorld Extension',
         logo: `${baseLogoUrl}/veworld_black.png`,
     },
-    [WalletSource.Sync]: {
+    sync: {
         name: 'Sync',
         logo: `${baseLogoUrl}/sync.png`,
     },
-    [WalletSource.Sync2]: {
+    sync2: {
         name: 'Sync 2',
         logo: `${baseLogoUrl}/sync2.png`,
     },

diff --git a/apps/sample-vue-app/.gitignore b/apps/sample-vue-app/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/apps/sample-vue-app/README.md b/apps/sample-vue-app/README.md
@@ -0,0 +1,29 @@
+# sample-vue-app
+
+## Project setup
+
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+
+```
+yarn build
+```
+
+### Lints and fixes files
+
+```
+yarn lint
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/apps/sample-vue-app/babel.config.js b/apps/sample-vue-app/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+    presets: ['@vue/cli-plugin-babel/preset'],
+};
diff --git a/apps/sample-vue-app/package.json b/apps/sample-vue-app/package.json
@@ -0,0 +1,53 @@
+{
+    "name": "sample-vue-app",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "build": "vue-cli-service build",
+        "dev": "vue-cli-service serve",
+        "lint": "vue-cli-service lint"
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not dead",
+        "not ie 11"
+    ],
+    "eslintConfig": {
+        "env": {
+            "node": true
+        },
+        "parserOptions": {
+            "parser": "@typescript-eslint/parser"
+        },
+        "extends": [
+            "plugin:vue/vue3-essential",
+            "eslint:recommended",
+            "@vue/typescript"
+        ],
+        "rules": {},
+        "root": true
+    },
+    "dependencies": {
+        "@vechain/wallet-kit": "*",
+        "core-js": "^3.8.3",
+        "node-polyfill-webpack-plugin": "^2.0.1",
+        "vue": "^3.2.13",
+        "vue-class-component": "^8.0.0-0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.12.16",
+        "@babel/eslint-parser": "^7.12.16",
+        "@typescript-eslint/eslint-plugin": "^5.4.0",
+        "@typescript-eslint/parser": "^5.4.0",
+        "@vechain/repo-config": "https://github.com/vechainfoundation/repo-config#v0.0.2",
+        "@vue/cli-plugin-babel": "~5.0.8",
+        "@vue/cli-plugin-eslint": "~5.0.8",
+        "@vue/cli-plugin-typescript": "~5.0.0",
+        "@vue/cli-service": "~5.0.8",
+        "@vue/eslint-config-typescript": "^9.1.0",
+        "eslint": "^7.32.0",
+        "eslint-plugin-vue": "^8.0.3",
+        "typescript": "~4.5.5"
+    }
+}
diff --git a/apps/sample-vue-app/public/favicon.ico b/apps/sample-vue-app/public/favicon.ico
diff --git a/apps/sample-vue-app/public/index.html b/apps/sample-vue-app/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/apps/sample-vue-app/src/App.vue b/apps/sample-vue-app/src/App.vue
@@ -0,0 +1,54 @@
+<template>
+    <ConnexProvider>
+        <img alt="Vue logo" src="./assets/logo.png" />
+        <div id="app">
+            <button class="btn" type="button" @click="showModal">
+                Open Modal!
+            </button>
+
+            <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() {
+        const isModalVisible = ref(false);
+
+        const showModal = () => {
+            isModalVisible.value = true;
+        };
+
+        const closeModal = () => {
+            isModalVisible.value = false;
+        };
+
+        return {
+            isModalVisible,
+            showModal,
+            closeModal,
+        };
+    },
+});
+</script>
+
+<style>
+#app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
+    margin-top: 60px;
+}
+</style>
diff --git a/apps/sample-vue-app/src/assets/logo.png b/apps/sample-vue-app/src/assets/logo.png