diff --git a/vue/vue-wagmi-siwx/.env.example b/vue/vue-wagmi-siwx/.env.example new file mode 100644 index 0000000..557effb --- /dev/null +++ b/vue/vue-wagmi-siwx/.env.example @@ -0,0 +1 @@ +VITE_PROJECT_ID=your_project_id \ No newline at end of file diff --git a/vue/vue-wagmi-siwx/.gitignore b/vue/vue-wagmi-siwx/.gitignore new file mode 100644 index 0000000..bb586c6 --- /dev/null +++ b/vue/vue-wagmi-siwx/.gitignore @@ -0,0 +1,29 @@ +# 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? + +dist + +.env +.vite \ No newline at end of file diff --git a/vue/vue-wagmi-siwx/README.md b/vue/vue-wagmi-siwx/README.md new file mode 100644 index 0000000..d4d115a --- /dev/null +++ b/vue/vue-wagmi-siwx/README.md @@ -0,0 +1,18 @@ +# Reown AppKit Example using wagmi (Vite + Vue) + +This is a [Vite](https://vitejs.dev) project together with Vue. + +## Usage + +1. Go to [Reown Cloud](https://cloud.reown.com) and create a new project. +2. Copy your `Project ID` +3. Rename `.env.example` to `.env` and paste your `Project ID` as the value for `VITE_PROJECT_ID` +4. Run `pnpm install` to install dependencies +5. Run `pnpm run dev` to start the development server + +## Resources + +- [Reown — Docs](https://docs.reown.com) +- [Vite — GitHub](https://github.com/vitejs/vite) +- [Vite — Docs](https://vitejs.dev/guide/) +- [Vue - Docs](https://vuejs.org/guide/introduction) diff --git a/vue/vue-wagmi-siwx/env.d.ts b/vue/vue-wagmi-siwx/env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/vue/vue-wagmi-siwx/env.d.ts @@ -0,0 +1 @@ +/// diff --git a/vue/vue-wagmi-siwx/index.html b/vue/vue-wagmi-siwx/index.html new file mode 100644 index 0000000..81d7cd0 --- /dev/null +++ b/vue/vue-wagmi-siwx/index.html @@ -0,0 +1,13 @@ + + + + + + + AppKit Vue Example App + + +
+ + + diff --git a/vue/vue-wagmi-siwx/package.json b/vue/vue-wagmi-siwx/package.json new file mode 100644 index 0000000..690458a --- /dev/null +++ b/vue/vue-wagmi-siwx/package.json @@ -0,0 +1,33 @@ +{ + "name": "appkit-vue-wagmi-example", + "version": "0.0.1", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "run-p type-check \"build-only {@}\" --", + "preview": "vite preview", + "build-only": "vite build", + "type-check": "vue-tsc --build --force" + }, + "dependencies": { + "@reown/appkit": "1.7.1", + "@reown/appkit-adapter-wagmi": "1.7.1", + "@reown/appkit-siwx": "1.7.1", + "@tanstack/vue-query": "^5.59.16", + "@wagmi/vue": "^0.0.56", + "viem": "^2.21.39", + "vue": "^3.5.12" + }, + "devDependencies": { + "@tsconfig/node20": "^20.1.4", + "@types/node": "^20.17.0", + "@vitejs/plugin-vue": "^5.1.4", + "@vitejs/plugin-vue-jsx": "^4.0.1", + "@vue/tsconfig": "^0.5.1", + "npm-run-all2": "^7.0.1", + "typescript": "~5.6.0", + "vite": "^6.2.0", + "vue-tsc": "^2.1.6" + } +} diff --git a/vue/vue-wagmi-siwx/public/favicon.ico b/vue/vue-wagmi-siwx/public/favicon.ico new file mode 100644 index 0000000..db58b9a Binary files /dev/null and b/vue/vue-wagmi-siwx/public/favicon.ico differ diff --git a/vue/vue-wagmi-siwx/public/reown.svg b/vue/vue-wagmi-siwx/public/reown.svg new file mode 100644 index 0000000..99353d6 --- /dev/null +++ b/vue/vue-wagmi-siwx/public/reown.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/vue/vue-wagmi-siwx/src/App.vue b/vue/vue-wagmi-siwx/src/App.vue new file mode 100644 index 0000000..f490358 --- /dev/null +++ b/vue/vue-wagmi-siwx/src/App.vue @@ -0,0 +1,59 @@ + + + + + \ No newline at end of file diff --git a/vue/vue-wagmi-siwx/src/assets/main.css b/vue/vue-wagmi-siwx/src/assets/main.css new file mode 100644 index 0000000..a6e1001 --- /dev/null +++ b/vue/vue-wagmi-siwx/src/assets/main.css @@ -0,0 +1,109 @@ +:root { + --background: #ffffff; + --foreground: #171717; +} + +html, +body { + max-width: 100vw; + overflow-x: hidden; +} + +body { + color: var(--foreground); + background: var(--background); + font-family: Arial, Helvetica, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +a { + color: inherit; + text-decoration: none; +} + +@media (prefers-color-scheme: dark) { + html { + color-scheme: dark; + } +} + +section { + border: 1px solid #e0e0e0; + border-radius: 8px; + padding: 16px; + background-color: #f9f9f9; + padding: 13px; + margin: 10px; + width: 90%; + text-align: left; +} + +.pages { + align-items: center; + justify-items: center; + text-align: center; +} + +button { + padding: 10px 15px; + background-color: white; + color: black; + border: 2px solid black; + border-radius: 6px; + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + margin: 15px; /* Space between buttons */ +} + +button:hover { + background-color: black; + color: white; +} + +button:active { + background-color: #333; /* Dark gray on click */ + color: white; +} + +h1 { + margin: 20px; +} + +pre { + white-space: pre-wrap; /* Wrap text */ + word-wrap: break-word; /* Break long words */ + word-break: break-all; +} + + +.link-button { + background-color: black; + color: white; + padding: 5px 10px; + text-decoration: none; + border-radius: 5px; +} + +.link-button:hover { + background-color: #333; /* Darken the background on hover */ +} + +.link-button:hover { + background-color: white; /* Change background to white on hover */ + color: black; /* Change text color to black on hover */ +} + +.advice { + text-align: 'center'; + margin-bottom: 10px; + line-height: 25px; +} \ No newline at end of file diff --git a/vue/vue-wagmi-siwx/src/components/ActionButton.vue b/vue/vue-wagmi-siwx/src/components/ActionButton.vue new file mode 100644 index 0000000..37049d5 --- /dev/null +++ b/vue/vue-wagmi-siwx/src/components/ActionButton.vue @@ -0,0 +1,39 @@ + + + + \ No newline at end of file diff --git a/vue/vue-wagmi-siwx/src/components/InfoList.vue b/vue/vue-wagmi-siwx/src/components/InfoList.vue new file mode 100644 index 0000000..3144800 --- /dev/null +++ b/vue/vue-wagmi-siwx/src/components/InfoList.vue @@ -0,0 +1,67 @@ + + + \ No newline at end of file diff --git a/vue/vue-wagmi-siwx/src/config/index.ts b/vue/vue-wagmi-siwx/src/config/index.ts new file mode 100644 index 0000000..fc02c05 --- /dev/null +++ b/vue/vue-wagmi-siwx/src/config/index.ts @@ -0,0 +1,14 @@ +import { WagmiAdapter } from '@reown/appkit-adapter-wagmi' +import { mainnet, polygon, base, type AppKitNetwork } from '@reown/appkit/networks' + +export const projectId = import.meta.env.VITE_PROJECT_ID || "b56e18d47c72ab683b10814fe9495694" // this is a public projectId only to use on localhost +if (!projectId) { + throw new Error('VITE_PROJECT_ID is not set') +} + +export const networks: [AppKitNetwork, ...AppKitNetwork[]] = [mainnet, polygon, base] + +export const wagmiAdapter = new WagmiAdapter({ + networks, + projectId +}) \ No newline at end of file diff --git a/vue/vue-wagmi-siwx/src/main.ts b/vue/vue-wagmi-siwx/src/main.ts new file mode 100644 index 0000000..3ab62db --- /dev/null +++ b/vue/vue-wagmi-siwx/src/main.ts @@ -0,0 +1,15 @@ +import './assets/main.css' + +import { createApp } from 'vue' +import { WagmiPlugin } from '@wagmi/vue' +import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query' +import { wagmiAdapter } from './config/index' +import App from './App.vue' + +const queryClient = new QueryClient() + +createApp(App) + // @ts-ignore + .use(WagmiPlugin, { config: wagmiAdapter.wagmiConfig }) + .use(VueQueryPlugin, { queryClient }) + .mount('#app') diff --git a/vue/vue-wagmi-siwx/src/shims-vue.d.ts b/vue/vue-wagmi-siwx/src/shims-vue.d.ts new file mode 100644 index 0000000..40d71cc --- /dev/null +++ b/vue/vue-wagmi-siwx/src/shims-vue.d.ts @@ -0,0 +1,5 @@ +declare module '*.vue' { + import { DefineComponent } from 'vue'; + const component: DefineComponent<{}, {}, any>; + export default component; + } \ No newline at end of file diff --git a/vue/vue-wagmi-siwx/tsconfig.app.json b/vue/vue-wagmi-siwx/tsconfig.app.json new file mode 100644 index 0000000..e14c754 --- /dev/null +++ b/vue/vue-wagmi-siwx/tsconfig.app.json @@ -0,0 +1,14 @@ +{ + "extends": "@vue/tsconfig/tsconfig.dom.json", + "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], + "exclude": ["src/**/__tests__/*"], + "compilerOptions": { + "composite": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", + + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/vue/vue-wagmi-siwx/tsconfig.json b/vue/vue-wagmi-siwx/tsconfig.json new file mode 100644 index 0000000..66b5e57 --- /dev/null +++ b/vue/vue-wagmi-siwx/tsconfig.json @@ -0,0 +1,11 @@ +{ + "files": [], + "references": [ + { + "path": "./tsconfig.node.json" + }, + { + "path": "./tsconfig.app.json" + } + ] +} diff --git a/vue/vue-wagmi-siwx/tsconfig.node.json b/vue/vue-wagmi-siwx/tsconfig.node.json new file mode 100644 index 0000000..f094063 --- /dev/null +++ b/vue/vue-wagmi-siwx/tsconfig.node.json @@ -0,0 +1,19 @@ +{ + "extends": "@tsconfig/node20/tsconfig.json", + "include": [ + "vite.config.*", + "vitest.config.*", + "cypress.config.*", + "nightwatch.conf.*", + "playwright.config.*" + ], + "compilerOptions": { + "composite": true, + "noEmit": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + + "module": "ESNext", + "moduleResolution": "Bundler", + "types": ["node"] + } +} diff --git a/vue/vue-wagmi-siwx/vite.config.ts b/vue/vue-wagmi-siwx/vite.config.ts new file mode 100644 index 0000000..ed77ecf --- /dev/null +++ b/vue/vue-wagmi-siwx/vite.config.ts @@ -0,0 +1,22 @@ +import { fileURLToPath, URL } from 'node:url' + +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +// https://vite.dev/config/ +export default defineConfig({ + resolve: { + alias: { + buffer: 'buffer/' + } + }, + plugins: [ + vue({ + template: { + compilerOptions: { + isCustomElement: (tag) => ['w3m-button', 'w3m-network-button'].includes(tag), + }, + }, + }), + ] +})