ignite · ilgooz · Mar 2, 2021 · Mar 2, 2021 · Mar 2, 2021
diff --git a/starport/templates/app/stargate/vue/.gitignore b/starport/templates/app/stargate/vue/.gitignore
@@ -2,6 +2,7 @@
 node_modules
 /dist
 
+
 # local env files
 .env.local
 .env.*.local

diff --git a/starport/templates/app/stargate/vue/babel.config.js b/starport/templates/app/stargate/vue/babel.config.js
@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
+	presets: ['@vue/cli-plugin-babel/preset']
 }
diff --git a/starport/templates/app/stargate/vue/package-lock.json b/starport/templates/app/stargate/vue/package-lock.json
diff --git a/starport/templates/app/stargate/vue/package.json b/starport/templates/app/stargate/vue/package.json
@@ -5,23 +5,43 @@
   "scripts": {
     "dev": "npm install && vue-cli-service serve",
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "@cosmjs/launchpad": "0.23.2",
-    "@cosmjs/proto-signing": "0.24.0-alpha.26",
-    "@cosmjs/stargate": "0.24.0-alpha.26",
-    "@tendermint/vue": "0.1.12",
-    "core-js": "^3.6.5",
-    "vue": "^2.6.11",
-    "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
+    "@cosmjs/crypto": "^0.23.2",
+    "@cosmjs/encoding": "^0.23.2",
+    "@cosmjs/proto-signing": "^0.24.0-alpha.26",
+    "@cosmjs/stargate": "^0.24.0-alpha.26",
+    "@starport/vue": "^0.1.20",
+    "@starport/vuex": "^0.1.20",
+    "bip39": "^3.0.3",
+    "core-js": "^3.9.1",
+    "crypto-js": "^4.0.0",
+    "file-saver": "^2.0.5",
+    "moment": "^2.29.1",
+    "vue": "^3.0.7",
+    "vue-router": "^4.0.3",
+    "vue-uuid": "^2.0.2",
+    "vuex": "^4.0.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.4.0",
-    "@vue/cli-plugin-router": "^4.4.0",
-    "@vue/cli-plugin-vuex": "^4.4.6",
-    "@vue/cli-service": "^4.4.0",
-    "vue-template-compiler": "^2.6.11"
+    "@babel/core": "^7.13.8",
+    "@babel/node": "^7.13.0",
+    "@vue/cli-plugin-babel": "^4.5.11",
+    "@vue/cli-plugin-eslint": "^4.5.11",
+    "@vue/cli-plugin-vuex": "^4.5.11",
+    "@vue/cli-service": "^4.5.11",
+    "@vue/compiler-sfc": "^3.0.7",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.21.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^7.7.0",
+    "node-sass": "^5.0.0",
+    "prettier": "^2.2.1",
+    "protobufjs": "^6.10.2",
+    "sass-loader": "^10.1.1"
   }
 }
diff --git a/starport/templates/app/stargate/vue/public/index.html b/starport/templates/app/stargate/vue/public/index.html
@@ -6,12 +6,14 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
   </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>
+    <div id="app" class="app"></div>
     <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/starport/templates/app/stargate/vue/src/App.vue b/starport/templates/app/stargate/vue/src/App.vue
@@ -1,21 +1,72 @@
 <template>
-  <div>
-    <router-view />
-  </div>
+	<div v-if="initialized">
+		<SpWallet ref="wallet" v-on:dropdown-opened="$refs.menu.closeDropdown()" />
+		<SpLayout>
+			<template v-slot:sidebar>
+				<SpSidebar
+					v-on:sidebar-open="sidebarOpen = true"
+					v-on:sidebar-close="sidebarOpen = false"
+				>
+					<template v-slot:header>
+						<SpLogo />
+					</template>
+					<template v-slot:default>
+						<SpLinkIcon link="/" text="Dashboard" icon="Dashboard" />
+						<SpLinkIcon link="/modules" text="Modules" icon="Modules" />
+						<SpLinkIcon
+							link="/transactions"
+							text="Transactions"
+							icon="Transactions"
+						/>
+						<SpLinkIcon link="/types" text="Custom Type" icon="Form" />
+						<div class="sp-dash"></div>
+						<SpLinkIcon link="/settings" text="Settings" icon="Settings" />
+						<SpLinkIcon link="/docs" text="Documentation" icon="Docs" />
+					</template>
+					<template v-slot:footer>
+						<SpStatusAPI :showText="sidebarOpen" />
+						<SpStatusRPC :showText="sidebarOpen" />
+						<SpStatusWS :showText="sidebarOpen" />
+						<div class="sp-text">Build: v0.3.8</div>
+					</template>
+				</SpSidebar>
+			</template>
+			<template v-slot:content>
+				<router-view />
+			</template>
+		</SpLayout>
+	</div>
 </template>
 
 <style>
-.sp-container {
-  margin: 0 auto;
-  max-width: 800px;
-  padding: 1rem;
+body {
+	margin: 0;
 }
 </style>
 
 <script>
+import './scss/app.scss'
+import '@starport/vue/lib/starport-vue.css'
+
 export default {
-  created() {
-    this.$store.dispatch("cosmos/init");
-  },
-};
+	data() {
+		return {
+			initialized: false,
+			sidebarOpen: true
+		}
+	},
+	computed: {
+		hasWallet() {
+			return this.$store.hasModule(['chain', 'common', 'wallet'])
+		}
+	},
+	async created() {
+		await this.$store.dispatch('chain/common/env/init')
+		this.initialized = true
+	},
+	errorCaptured(err) {
+		console.log(err)
+		return false
+	}
+}
 </script>
diff --git a/starport/templates/app/stargate/vue/src/main.js b/starport/templates/app/stargate/vue/src/main.js
@@ -1,12 +1,9 @@
-import Vue from "vue";
-import App from "./App.vue";
-import router from "./router";
-import store from "./store";
+import { createApp } from 'vue'
+import App from './App.vue'
+import store from './store'
+import router from './router'
+import vueLib from '@starport/vue'
 
-Vue.config.productionTip = false;
-
-new Vue({
-  router,
-  store,
-  render: (h) => h(App),
-}).$mount("#app");
+const app = createApp(App)
+app.config.globalProperties._depsLoaded = true
+app.use(store).use(router).use(vueLib).mount('#app')
diff --git a/starport/templates/app/stargate/vue/src/router/index.js b/starport/templates/app/stargate/vue/src/router/index.js
@@ -1,20 +1,29 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
-import Index from "../views/Index.vue";
-
-Vue.use(VueRouter);
+import { createRouter, createWebHistory } from 'vue-router'
+import Index from '@/views/Index.vue'
+import Address from '@/views/Address.vue'
+import Block from '@/views/Block.vue'
+import Blocks from '@/views/Blocks.vue'
+import Send from '@/views/Send.vue'
+import Wallet from '@/views/Wallet.vue'
+import Legacy from '@/views/Legacy.vue'
 
+const routerHistory = createWebHistory()
 const routes = [
-  {
-    path: "/",
-    component: Index,
-  },
-];
+	{
+		path: '/',
+		component: Index
+	},
+	{ path: '/address/:address', component: Address },
+	{ path: '/block/:block', component: Block },
+	{ path: '/blocks/:page?', component: Blocks },
+	{ path: '/send/', component: Send },
+	{ path: '/wallet/', component: Wallet },
+	{ path: '/legacy/', component: Legacy }
+]
 
-const router = new VueRouter({
-  mode: "history",
-  base: process.env.BASE_URL,
-  routes,
-});
+const router = createRouter({
+	history: routerHistory,
+	routes
+})
 
-export default router;
+export default router
diff --git a/starport/templates/app/stargate/vue/src/scss/app.scss b/starport/templates/app/stargate/vue/src/scss/app.scss
@@ -0,0 +1 @@
+//Your custom styles here
diff --git a/starport/templates/app/stargate/vue/src/store/chain/index.js b/starport/templates/app/stargate/vue/src/store/chain/index.js
@@ -0,0 +1,3 @@
+import CosmosBankV1beta1 from './cosmos/cosmos-sdk/cosmos.bank.v1beta1'
+// To be filled with rest of sdk modules
+export default { CosmosBankV1beta1 }
diff --git a/starport/templates/app/stargate/vue/src/store/config.js b/starport/templates/app/stargate/vue/src/store/config.js
@@ -0,0 +1,11 @@
+import { env, starport, blocks, wallet } from '@starport/vuex'
+import generated from './chain'
+export default function init(store) {
+	for (const moduleInit of Object.values(generated)) {
+		moduleInit(store)
+	}
+	starport(store)
+	blocks(store)
+	env(store)
+	wallet(store)
+}
diff --git a/starport/templates/app/stargate/vue/src/store/index.js b/starport/templates/app/stargate/vue/src/store/index.js
@@ -1,9 +1,15 @@
-import Vue from "vue";
-import Vuex from "vuex";
-import cosmos from "@tendermint/vue/src/store/cosmos.js";
+import { createStore, createLogger } from 'vuex'
+//import { createStore } from 'vuex'
+import init from './config'
 
-Vue.use(Vuex);
-
-export default new Vuex.Store({
-  modules: { cosmos },
-});
+const store = createStore({
+	state() {
+		return {}
+	},
+	mutations: {},
+	actions: {},
+	chain: {},
+	plugins: [createLogger()]
+})
+init(store)
+export default store
diff --git a/starport/templates/app/stargate/vue/src/views/Address.vue b/starport/templates/app/stargate/vue/src/views/Address.vue
@@ -0,0 +1,17 @@
+<template>
+	<div>
+		<div class="container">
+			<SpBankBalances :address="address" :refresh="true" v-if="address" />
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	computed: {
+		address() {
+			return this.$route.params.address
+		}
+	}
+}
+</script>
diff --git a/starport/templates/app/stargate/vue/src/views/Block.vue b/starport/templates/app/stargate/vue/src/views/Block.vue
@@ -0,0 +1,41 @@
+<template>
+	<div>
+		<div class="container">
+			<SpBlockDisplayFull :block="block" v-if="block" />
+		</div>
+	</div>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+	data() {
+		return {
+			block: null
+		}
+	},
+	async created() {
+		const blockDetails = await axios.get(
+			this.$store.getters['chain/common/env/apiTendermint'] +
+				'/block?height=' +
+				this.$route.params.block
+		)
+
+		const txDecoded = blockDetails.data.result.block.data.txs.map(async (x) => {
+			const dec = await this.$store.getters[
+				'chain/common/env/apiClient'
+			].decodeTx(x)
+			return dec
+		})
+		const txs = await Promise.all(txDecoded)
+		this.block = {
+			height: blockDetails.data.result.block.header.height,
+			timestamp: blockDetails.data.result.block.header.time,
+			hash: blockDetails.data.result.block_id.hash,
+			details: blockDetails.data.result.block,
+			txDecoded: [...txs]
+		}
+	}
+}
+</script>