hyperweb-io · skylinezum · Aug 19, 2024 · Aug 20, 2024 · Sep 3, 2024 · Sep 3, 2024
diff --git a/packages/example-vue/.babelrc b/packages/example-vue/.babelrc
@@ -0,0 +1,8 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": ["@babel/plugin-transform-runtime", "@vue/babel-plugin-jsx"]
+}
diff --git a/packages/example-vue/.gitignore b/packages/example-vue/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/example-vue/.vscode/extensions.json b/packages/example-vue/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
diff --git a/packages/example-vue/README.md b/packages/example-vue/README.md
@@ -0,0 +1,5 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
diff --git a/packages/example-vue/index.html b/packages/example-vue/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/packages/example-vue/package.json b/packages/example-vue/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "example-vue",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "vue": "^3.4.37",
+    "vue-router": "4.4.3",
+    "@cosmos-kit/core": "^2.12.0",
+    "@cosmos-kit/keplr": "^2.10.1",
+    "@cosmos-kit/react": "2.12.0",
+    "@dao-dao/cosmiframe": "^0.1.0",
+    "@testing-library/jest-dom": "5.14.1",
+    "vite-plugin-node-polyfills": "^0.22.0",
+    "element-plus": "^2.8.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vue/test-utils": "^2.3.3",
+    "@chain-registry/types": "^0.41.3",
+    "buffer": "^6.0.3",
+    "vite": "^5.4.1",
+    "jsdom": "^21.1.0"
+  },
+  "peerDependencies": {
+    "@interchain-ui/vue": "^1.3.0"
+  },
+  "vitest": {
+    "environment": "jsdom"
+  }
+}
diff --git a/packages/example-vue/public/index.html b/packages/example-vue/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue 3 Cosmos Project</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/packages/example-vue/public/vite.svg b/packages/example-vue/public/vite.svg
diff --git a/packages/example-vue/src/App.vue b/packages/example-vue/src/App.vue
@@ -0,0 +1,49 @@
+<template>
+  <div id="app">
+    <h1>Welcome to Example-Vue</h1>
+    <ChainProvider
+      :chains="chains"
+      :wallets="wallets"
+      :assetLists="assets"
+      :walletConnectOptions="walletConnectOptions"
+      :walletModal="CustomModal"
+      :defaultNameService="icns"
+    >
+      <router-view />
+    </ChainProvider>
+  </div>
+</template>
+
+<script setup>
+import { ChainProvider } from "../../vue";
+import CustomModal from "./components/CustomModal.vue";
+import { assets as _assets, chains as _chains } from "chain-registry";
+import { wallets as keplrExtension } from "@cosmos-kit/keplr-extension";
+
+const chains = [..._chains];
+const wallets = [...keplrExtension];
+const assets = [..._assets];
+const walletConnectOptions = {
+  signClient: {
+    projectId: "a8510432ebb71e6948cfd6cde54b70f7",
+    relayUrl: "wss://relay.walletconnect.org",
+    metadata: {
+      name: "CosmosKit Example",
+      description: "CosmosKit test dapp",
+      url: "https://test.cosmoskit.com/",
+      icons: [
+        "https://raw.githubusercontent.com/cosmology-tech/cosmos-kit/main/packages/docs/public/favicon-96x96.png",
+      ],
+    },
+  },
+};
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
diff --git a/packages/example-vue/src/assets/vue.svg b/packages/example-vue/src/assets/vue.svg
diff --git a/packages/example-vue/src/components/CustomModal.vue b/packages/example-vue/src/components/CustomModal.vue
@@ -0,0 +1,134 @@
+<template>
+  <el-dialog
+    v-model="isOpen"
+    title="Choose Wallet"
+    width="60%"
+    style="max-width: 400px"
+    @close="onCloseModal"
+    class="wallet-modal"
+  >
+    <el-row
+      v-for="wallet in walletRepo?.wallets"
+      :key="wallet.walletName"
+      type="flex"
+      class="wallet-row"
+    >
+      <el-col :span="12" class="wallet-info">
+        <el-image
+          :src="walletRepo.chainLogo"
+          style="width: 35px; height: 35px"
+        />
+        <span>{{ wallet.walletInfo.prettyName }}</span>
+        <span class="wallet-status">{{ wallet.walletStatus }}</span>
+      </el-col>
+      <el-col :span="12" class="wallet-actions">
+        <template v-if="wallet.walletStatus === 'Disconnected'">
+          <el-button type="primary" @click="connectWallet(wallet)"
+            >Connect</el-button
+          >
+        </template>
+        <template v-else-if="wallet.walletStatus === 'NotExist'">
+          <el-button type="warning">Install</el-button>
+        </template>
+        <template v-else-if="wallet.walletStatus === 'Connected'">
+          <el-button type="success" @click="disconnectWallet(wallet)"
+            >Disconnect</el-button
+          >
+        </template>
+        <template v-else-if="wallet.walletStatus === 'Error'">
+          <el-alert :title="wallet.message" type="error" />
+        </template>
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, watch } from "vue";
+import {
+  ElDialog,
+  ElRow,
+  ElCol,
+  ElButton,
+  ElAlert,
+  ElImage,
+} from "element-plus";
+import type { WalletModalProps } from "@cosmos-kit/core";
+
+const props = defineProps<WalletModalProps>();
+const isOpen = ref(props.isOpen);
+const walletRepo = ref(props.walletRepo);
+
+watch(
+  () => props.isOpen,
+  (newValue) => {
+    isOpen.value = newValue;
+  }
+);
+
+watch(
+  () => props.walletRepo,
+  (newValue) => {
+    walletRepo.value = newValue;
+  }
+);
+
+const connectWallet = (wallet) => {
+  wallet.connect().then(() => {
+    // 连接成功后的操作，如更新UI
+    props.setOpen(false);
+  });
+};
+
+const disconnectWallet = (wallet) => {
+  wallet.disconnect().then(() => {
+    // 断开成功后的操作，如更新UI
+    props.setOpen(false);
+  });
+};
+
+const onCloseModal = () => {
+  props.setOpen(false);
+};
+</script>
+
+<style scoped>
+.wallet-modal .el-dialog__header {
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.wallet-modal .el-dialog__title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.wallet-row {
+  margin-bottom: 10px;
+}
+
+.wallet-info {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 16px;
+}
+
+.wallet-status {
+  font-size: 14px;
+  color: #888;
+}
+
+.wallet-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.el-button {
+  margin-left: 10px;
+}
+
+.el-alert {
+  margin-top: 5px;
+}
+</style>
diff --git a/packages/example-vue/src/main.js b/packages/example-vue/src/main.js
@@ -0,0 +1,10 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+
+createApp(App)
+  .use(router)
+  .use(ElementPlus)
+  .mount('#app');
diff --git a/packages/example-vue/src/router.js b/packages/example-vue/src/router.js
@@ -0,0 +1,17 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import Home from './views/Home.vue';
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;