Add Vite example (#1010)

* Add Vite example * Exclude frameworks examples from build to optimize CI times * Fix yarn build on vite example
xchainjs · Jan 27, 2024 · 97ba6f2 · 97ba6f2
1 parent 54343bb
commit 97ba6f2
Show file tree

Hide file tree

Showing 23 changed files with 3,697 additions and 1 deletion.
diff --git a/examples/frameworks/vite-example/README.md b/examples/frameworks/vite-example/README.md
@@ -0,0 +1,69 @@
+# base
+
+## Project setup
+
+```
+# yarn
+yarn
+
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# bun
+bun install
+```
+
+### Compiles and hot-reloads for development work well
+
+```
+# yarn
+yarn dev
+
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# bun
+pnpm run dev
+```
+
+### Compiles and minifies for production failed with yarn (with others haven't tested)
+
+```
+# yarn
+yarn build
+
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# bun
+pnpm run build
+```
+
+### Lints and fixes files
+
+```
+# yarn
+yarn lint
+
+# npm
+npm run lint
+
+# pnpm
+pnpm lint
+
+# bun
+pnpm run lint
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://vitejs.dev/config/).
diff --git a/examples/frameworks/vite-example/index.html b/examples/frameworks/vite-example/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Welcome to Vuetify 3</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
diff --git a/examples/frameworks/vite-example/package.json b/examples/frameworks/vite-example/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "xchainjs-vue3-vite",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@cosmos-client/core": "^0.46.1",
+    "@mdi/font": "7.0.96",
+    "@rollup/plugin-inject": "^5.0.3",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@xchainjs/xchain-client": "^0.16.1",
+    "@xchainjs/xchain-cosmos": "file:../../../packages/xchain-cosmos",
+    "@xchainjs/xchain-cosmos-sdk": "file:../../../packages/xchain-cosmos-sdk",
+    "@xchainjs/xchain-crypto": "file:../../../packages/xchain-crypto",
+    "@xchainjs/xchain-kujira": "file:../../../packages/xchain-kujira",
+    "@xchainjs/xchain-thorchain": "file:../../../packages/xchain-thorchain",
+    "@xchainjs/xchain-util": "file:../../../packages/xchain-util",
+    "axios": "^1.6.1",
+    "bech32-buffer": "^0.2.1",
+    "buffer": "^6.0.3",
+    "core-js": "^3.29.0",
+    "crypto-browserify": "^3.12.0",
+    "node-stdlib-browser": "^1.2.0",
+    "roboto-fontface": "*",
+    "stream-browserify": "^3.0.0",
+    "vite-plugin-comlink": "^3.0.5",
+    "vite-plugin-node-stdlib-browser": "^0.2.1",
+    "vue": "^3.2.0",
+    "vue-router": "^4.0.0",
+    "vuetify": "^3.0.0"
+  },
+  "devDependencies": {
+    "@babel/types": "^7.21.4",
+    "@rollup/plugin-replace": "^5.0.1",
+    "@types/node": "^18.15.0",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "eslint": "^8.22.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "sass": "^1.60.0",
+    "typescript": "^5.0.0",
+    "unplugin-fonts": "^1.0.3",
+    "vite": "^4.2.0",
+    "vite-plugin-vuetify": "^1.0.0",
+    "vue-tsc": "^1.2.0"
+  }
+}
diff --git a/examples/frameworks/vite-example/public/favicon.ico b/examples/frameworks/vite-example/public/favicon.ico
diff --git a/examples/frameworks/vite-example/src/App.vue b/examples/frameworks/vite-example/src/App.vue
@@ -0,0 +1,7 @@
+<template>
+  <router-view />
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
diff --git a/examples/frameworks/vite-example/src/assets/logo.png b/examples/frameworks/vite-example/src/assets/logo.png
diff --git a/examples/frameworks/vite-example/src/assets/logo.svg b/examples/frameworks/vite-example/src/assets/logo.svg
diff --git a/examples/frameworks/vite-example/src/components/HelloWorld.vue b/examples/frameworks/vite-example/src/components/HelloWorld.vue
@@ -0,0 +1,112 @@
+<template>
+  <v-container class="fill-height">
+    <v-responsive class="align-center text-center fill-height">
+      <div class="text-h2 font-weight-light mb-n1">Vite + XchainJS example</div>
+
+      <div class="py-14" />
+      <v-row class="d-flex align-center justify-center">
+        <v-col cols="12">
+          <v-textarea
+            variant="filled"
+            label="Enter your mnemonic phrase to connect"
+            v-model="phrase"
+            :class="{ 'v-field--error': errors }"
+            :error-messages="errorPhrase"
+          ></v-textarea>
+        </v-col>
+        <v-col cols="auto">
+          <v-btn min-width="164" variant="outlined" @click="connectWallet"> connect </v-btn>
+        </v-col>
+      </v-row>
+
+      <div class="py-14" />
+
+      <v-row class="d-flex align-center justify-center" v-if="thorAddress">
+        <v-col cols="auto"> address: {{ thorAddress }} </v-col>
+
+        <v-col cols="auto"> with balance: {{ thorBalance || 0 }} </v-col>
+      </v-row>
+      <v-row class="d-flex align-center justify-center" v-if="kujiAddress">
+        <v-col cols="auto"> address: {{ kujiAddress }} </v-col>
+
+        <v-col cols="auto"> with balance: {{ kujiBalance || 0 }} </v-col>
+      </v-row>
+      <v-row class="d-flex align-center justify-center">
+        <v-col cols="auto">
+          <v-btn
+            href="https://github.com/mihoz-fe/xchainjs-vue3-vite"
+            min-width="164"
+            rel="noopener noreferrer"
+            target="_blank"
+            variant="text"
+          >
+            <v-icon icon="mdi-github" size="large" start />
+            Repository
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-responsive>
+  </v-container>
+</template>
+
+<script lang="ts" setup>
+import { Client } from '@xchainjs/xchain-thorchain'
+import { baseToAsset } from '@xchainjs/xchain-util'
+import { computed, ref, watch } from 'vue'
+import { Client as KujiraClient } from '@xchainjs/xchain-kujira'
+import { validatePhrase } from '@xchainjs/xchain-crypto'
+
+const thorAddress = ref('')
+const thorBalance = ref<Number | string>('')
+const kujiAddress = ref('')
+const kujiBalance = ref<Number | string>('')
+const errors = ref<string>('')
+const errorPhrase = computed(() => {
+  return errors.value ? 'invalid phrase' : ''
+})
+
+const phrase = ref<string>(import.meta.env.VITE_PHRASE || '')
+
+// Create new instance of the client and query chain for balances.
+const connectWallet = async () => {
+  const isPhraseValid = validatePhrase(phrase.value)
+
+  if (isPhraseValid) {
+    const thorClient = new Client({ phrase: phrase.value })
+    const kujiClient = new KujiraClient({ phrase: phrase.value })
+
+    phrase.value = ''
+
+    const address = await thorClient.getAddressAsync()
+    const addressKuji = await kujiClient.getAddressAsync()
+    thorAddress.value = address
+    kujiAddress.value = addressKuji
+
+    try {
+      const balance = await thorClient.getBalance(address)
+      const assetAmount = baseToAsset(balance[0].amount).amount()
+      thorBalance.value = assetAmount.toNumber()
+      phrase.value = ''
+    } catch (error) {
+      console.error(`Caught ${error}`)
+    }
+
+    try {
+      const balance = await kujiClient.getBalance(addressKuji)
+      const assetAmount = baseToAsset(balance[0].amount).amount()
+      kujiBalance.value = assetAmount.toNumber()
+    } catch (error) {
+      console.error(`kuji balance ${error}`)
+    }
+  } else {
+    errors.value = 'phrase invalid'
+    setTimeout(() => {
+      errors.value = ''
+    }, 3000)
+  }
+}
+watch(phrase, () => {
+  errors.value = ''
+})
+if (phrase.value) connectWallet()
+</script>
diff --git a/examples/frameworks/vite-example/src/layouts/default/AppBar.vue b/examples/frameworks/vite-example/src/layouts/default/AppBar.vue
@@ -0,0 +1,13 @@
+<template>
+  <v-app-bar flat>
+    <v-app-bar-title>
+      <v-icon icon="mdi-circle-slice-4" />
+
+      Base Preset
+    </v-app-bar-title>
+  </v-app-bar>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
diff --git a/examples/frameworks/vite-example/src/layouts/default/Default.vue b/examples/frameworks/vite-example/src/layouts/default/Default.vue
@@ -0,0 +1,12 @@
+<template>
+  <v-app>
+    <default-bar />
+
+    <default-view />
+  </v-app>
+</template>
+
+<script lang="ts" setup>
+  import DefaultBar from './AppBar.vue'
+  import DefaultView from './View.vue'
+</script>
diff --git a/examples/frameworks/vite-example/src/layouts/default/View.vue b/examples/frameworks/vite-example/src/layouts/default/View.vue
@@ -0,0 +1,9 @@
+<template>
+  <v-main>
+    <router-view />
+  </v-main>
+</template>
+
+<script lang="ts" setup>
+  //
+</script>
diff --git a/examples/frameworks/vite-example/src/main.ts b/examples/frameworks/vite-example/src/main.ts
@@ -0,0 +1,20 @@
+/**
+ * main.ts
+ *
+ * Bootstraps Vuetify and other plugins then mounts the App`
+ */
+
+// Components
+import App from './App.vue'
+
+// Composables
+import { createApp } from 'vue'
+
+// Plugins
+import { registerPlugins } from '@/plugins'
+
+const app = createApp(App)
+
+registerPlugins(app)
+
+app.mount('#app')
diff --git a/examples/frameworks/vite-example/src/plugins/index.ts b/examples/frameworks/vite-example/src/plugins/index.ts
@@ -0,0 +1,18 @@
+/**
+ * plugins/index.ts
+ *
+ * Automatically included in `./src/main.ts`
+ */
+
+// Plugins
+import vuetify from './vuetify'
+import router from '../router'
+
+// Types
+import type { App } from 'vue'
+
+export function registerPlugins (app: App) {
+  app
+    .use(vuetify)
+    .use(router)
+}
diff --git a/examples/frameworks/vite-example/src/plugins/vuetify.ts b/examples/frameworks/vite-example/src/plugins/vuetify.ts
@@ -0,0 +1,26 @@
+/**
+ * plugins/vuetify.ts
+ *
+ * Framework documentation: https://vuetifyjs.com`
+ */
+
+// Styles
+import '@mdi/font/css/materialdesignicons.css'
+import 'vuetify/styles'
+
+// Composables
+import { createVuetify } from 'vuetify'
+
+// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
+export default createVuetify({
+  theme: {
+    themes: {
+      light: {
+        colors: {
+          primary: '#1867C0',
+          secondary: '#5CBBF6',
+        },
+      },
+    },
+  },
+})
diff --git a/examples/frameworks/vite-example/src/router/index.ts b/examples/frameworks/vite-example/src/router/index.ts
@@ -0,0 +1,26 @@
+// Composables
+import { createRouter, createWebHistory } from 'vue-router'
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('@/layouts/default/Default.vue'),
+    children: [
+      {
+        path: '',
+        name: 'Home',
+        // route level code-splitting
+        // this generates a separate chunk (about.[hash].js) for this route
+        // which is lazy-loaded when the route is visited.
+        component: () => import(/* webpackChunkName: "home" */ '@/views/Home.vue'),
+      },
+    ],
+  },
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+})
+
+export default router