Merge pull request #1262 from blocknative/feature/vue2-example

adds vue 2 example
blocknative · Sep 13, 2022 · cf3f094 · cf3f094
2 parents 01937e8 + d55685d
commit cf3f094
Show file tree

Hide file tree

Showing 12 changed files with 255 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,5 @@ dist/
 package-lock.json
 .rpt2_cache
 .vscode
-yarn-error.log
+yarn-error.log
+.env
diff --git a/examples/with-vuejs-v2/.env.example b/examples/with-vuejs-v2/.env.example
@@ -0,0 +1 @@
+VITE_INFURA_KEY=<your-key>
diff --git a/examples/with-vuejs-v2/README.md b/examples/with-vuejs-v2/README.md
@@ -0,0 +1,11 @@
+# vite-vue2-starter
+
+A simple start for using vue2 with vite, using [underfin's vite-plugin-vue2](https://github.com/underfin/vite-plugin-vue2).
+
+## Scripts
+
+```bash
+  npm run dev # start dev server
+  npm run build # build for production
+  npm run serve # locally preview production build
+```
diff --git a/examples/with-vuejs-v2/index.html b/examples/with-vuejs-v2/index.html
@@ -0,0 +1,13 @@
+<!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>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/examples/with-vuejs-v2/package.json b/examples/with-vuejs-v2/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "vue2-vite",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@web3-onboard/injected-wallets": "^2.2.0",
+    "@web3-onboard/vue": "^2.2.1",
+    "vue": "^2.6.12",
+    "vue-template-compiler": "^2.7.10"
+  },
+  "devDependencies": {
+    "vite": "^2.0.5",
+    "vite-plugin-vue2": "^2.0.1"
+  }
+}
diff --git a/examples/with-vuejs-v2/public/favicon.ico b/examples/with-vuejs-v2/public/favicon.ico
diff --git a/examples/with-vuejs-v2/src/App.vue b/examples/with-vuejs-v2/src/App.vue
@@ -0,0 +1,37 @@
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="./assets/logo.png" />
+    <HelloWorld msg="Web3-Onboard Vue 2 Demo" />
+  </div>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue';
+export default {
+  components: {
+    HelloWorld,
+  },
+};
+</script>
+
+<style>
+:root {
+  --vt-c-brand: #42b883;
+  --vt-c-brand-dark: #33a06f;
+  --vt-c-text-1: rgba(255, 255, 255, 0.87);
+  --vt-c-divider: rgba(84, 84, 84, 0.65);
+  --vt-c-black: #1a1a1a;
+  --vt-c-bg-soft: #242424;
+}
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.87);
+  margin-top: 60px;
+}
+html {
+  background-color: var(--vt-c-black);
+}
+</style>
diff --git a/examples/with-vuejs-v2/src/assets/logo.png b/examples/with-vuejs-v2/src/assets/logo.png
diff --git a/examples/with-vuejs-v2/src/components/HelloWorld.vue b/examples/with-vuejs-v2/src/components/HelloWorld.vue
@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <h1>{{ msg }}</h1>
+
+    <div class="container">
+      <div class="wallet" v-if="connectedWallet">
+        <div class="avatar" />
+        <div class="details">
+          <div v-if="ens">{{ ens.name }}</div>
+          <div v-if="address">{{ address }}</div>
+
+          <span>Connected Wallet: {{ connectedWallet.label }}</span>
+        </div>
+        <button type="button" @click="disconnect">Disconnect</button>
+      </div>
+      <div v-else>
+        <button type="button" @click="connect">Connect Wallet</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { init, useOnboard } from '@web3-onboard/vue';
+import injectedModule from '@web3-onboard/injected-wallets';
+
+const injected = injectedModule();
+// With vite
+const infuraKey = import.meta.env.VITE_INFURA_KEY;
+
+// Without vite
+//const infuraKey = process.env.INFURA_KEY;
+
+const rpcUrl = `https://mainnet.infura.io/v3/${infuraKey}`;
+
+const web3Onboard = init({
+  wallets: [injected],
+  chains: [
+    {
+      id: '0x1',
+      token: 'ETH',
+      label: 'Ethereum Mainnet',
+      rpcUrl,
+    },
+  ],
+});
+
+const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } =
+  useOnboard();
+
+const trunc = (address) =>
+  !!address ? address.slice(0, 6) + '...' + address.slice(-6) : null;
+
+export default {
+  props: {
+    msg: String,
+  },
+  data() {
+    return {
+      connectedWallet,
+      count: 0,
+    };
+  },
+  methods: {
+    connect: () => connectWallet(),
+    disconnect: () => disconnectConnectedWallet(),
+  },
+  computed: {
+    address: function () {
+      if (
+        this.connectedWallet.accounts &&
+        this.connectedWallet.accounts[0].address
+      ) {
+        console.log(this.connectedWallet.accounts[0].address);
+        return trunc(this.connectedWallet.accounts[0].address);
+      }
+    },
+    ens: function () {
+      if (
+        this.connectedWallet.accounts &&
+        this.connectedWallet.accounts[0].ens?.name
+      ) {
+        return trunc(this.connectedWallet.accounts[0].ens);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+a {
+  color: var(--vt-c-brand);
+  text-decoration: none;
+}
+
+button {
+  border: none;
+  border-radius: 4px;
+  padding: 0 12px;
+  letter-spacing: 0.8px;
+  line-height: 36px;
+  font-size: 13px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: var(--vt-c-brand);
+  transition: background-color 0.25s;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: var(--vt-c-brand-dark);
+}
+
+.container {
+  max-width: 64vw;
+  margin: auto;
+}
+
+.wallet {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 8px;
+  padding: 0.5rem 0.75rem;
+  font-size: 16px;
+  width: 100%;
+  transition: border-color 0.25s, background-color 0.25s;
+  margin: 28px 0;
+  border-radius: 8px;
+  overflow-x: auto;
+  transition: color 0.5s, background-color 0.5s;
+  position: relative;
+  font-size: 14px;
+  line-height: 1.6;
+  font-weight: 500;
+  background-color: var(--vt-c-bg-soft);
+}
+
+.avatar {
+  height: 36px;
+  width: 36px;
+  border-radius: 100%;
+  background-image: linear-gradient(
+    to right,
+    rgb(6, 182, 212),
+    rgb(59, 130, 246)
+  );
+}
+
+.details {
+  display: flex;
+  flex-flow: column;
+  align-items: flex-start;
+  margin-right: auto;
+  margin-left: 12px;
+  text-align: left;
+}
+</style>
diff --git a/examples/with-vuejs-v2/src/main.js b/examples/with-vuejs-v2/src/main.js
@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+new Vue({
+  render: (h) => h(App),
+}).$mount('#app');
diff --git a/examples/with-vuejs-v2/vite.config.js b/examples/with-vuejs-v2/vite.config.js
@@ -0,0 +1,8 @@
+const { createVuePlugin } = require('vite-plugin-vue2');
+
+module.exports = {
+  plugins: [createVuePlugin()],
+  define: {
+    'process.env': {}
+  }
+};
diff --git a/examples/with-vuejs-v2/with-vue-2.zip b/examples/with-vuejs-v2/with-vue-2.zip