[v3] Examples, vue (#1265)

reown-com · Aug 11, 2023 · 4fb6113 · 4fb6113 · vercel · Aug 11, 2023
1 parent 8c7a3c4
commit 4fb6113
Show file tree

Hide file tree

Showing 30 changed files with 1,930 additions and 1,203 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -18,7 +18,8 @@
     "out",
     "dist",
     ".next",
-    ".turbo"
+    ".turbo",
+    "examples"
   ],
   "rules": {
     // Core

diff --git a/apps/gallery/package.json b/apps/gallery/package.json
@@ -1,24 +1,24 @@
 {
   "name": "@apps/gallery",
-  "version": "3.0.0-91ecf92a",
+  "version": "3.0.0-8d5e8f4e",
   "private": true,
   "main": "index.js",
   "scripts": {
     "dev:gallery": "storybook dev -p 6006",
     "build:gallery": "storybook build -o out"
   },
   "dependencies": {
-    "@web3modal/ui": "3.0.0-91ecf92a",
+    "@web3modal/ui": "3.0.0-8d5e8f4e",
     "lit": "2.8.0",
-    "storybook": "7.2.1"
+    "storybook": "7.2.3"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "7.2.1",
-    "@storybook/addon-links": "7.2.1",
-    "@storybook/blocks": "7.2.1",
-    "@storybook/theming": "7.2.1",
-    "@storybook/web-components": "7.2.1",
-    "@storybook/web-components-vite": "7.2.1",
-    "file-system-cache": "2.4.3"
+    "@storybook/addon-essentials": "7.2.3",
+    "@storybook/addon-links": "7.2.3",
+    "@storybook/blocks": "7.2.3",
+    "@storybook/theming": "7.2.3",
+    "@storybook/web-components": "7.2.3",
+    "@storybook/web-components-vite": "7.2.3",
+    "file-system-cache": "2.4.4"
   }
 }
diff --git a/apps/laboratory/.env.local.example b/apps/laboratory/.env.local.example
diff --git a/apps/laboratory/package.json b/apps/laboratory/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@apps/laboratory",
-  "version": "3.0.0-91ecf92a",
+  "version": "3.0.0-8d5e8f4e",
   "private": true,
   "scripts": {
     "dev:laboratory": "next dev",
@@ -10,12 +10,10 @@
     "@chakra-ui/react": "2.8.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
+    "@web3modal/wagmi": "3.0.0-8d5e8f4e",
     "@sentry/browser": "7.63.0",
     "@sentry/react": "7.63.0",
-    "@web3modal/wagmi": "3.0.0-91ecf92a",
-    "framer-motion": "10.15.0",
-    "next": "13.4.12",
-    "viem": "1.5.3",
-    "wagmi": "1.3.9"
+    "framer-motion": "10.15.1",
+    "next": "13.4.13"
   }
 }
diff --git a/apps/laboratory/src/pages/index.tsx b/apps/laboratory/src/pages/index.tsx
@@ -43,7 +43,6 @@ const wagmiConfig = createConfig({
 // 3. Create Web3Modal
 export const modal = new Web3Modal({ wagmiConfig, projectId, chains })
 
-// 4. Create Home page
 export default function HomePage() {
   const [ready, setReady] = useState(false)
 

diff --git a/apps/laboratory/src/pages/react.tsx b/apps/laboratory/src/pages/react.tsx
diff --git a/examples/react-wagmi/index.html b/examples/react-wagmi/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React wagmi example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/examples/react-wagmi/package.json b/examples/react-wagmi/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@examples/react-wagmi",
+  "private": true,
+  "version": "3.0.0-8d5e8f4e",
+  "scripts": {
+    "dev:example": "vite --port 3001",
+    "build:example": "vite build"
+  },
+  "dependencies": {
+    "@web3modal/wagmi": "3.0.0-8d5e8f4e"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "4.0.4"
+  }
+}
diff --git a/examples/react-wagmi/src/App.jsx b/examples/react-wagmi/src/App.jsx
@@ -0,0 +1,36 @@
+import { useWeb3Modal } from '@web3modal/wagmi'
+import { WagmiConfig, configureChains, createConfig } from 'wagmi'
+import { arbitrum, mainnet } from 'wagmi/chains'
+import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'
+import { InjectedConnector } from 'wagmi/connectors/injected'
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
+import { publicProvider } from 'wagmi/providers/public'
+
+// 1. Get projectId
+const projectId = import.meta.env.VITE_PROJECT_ID
+if (!projectId) {
+  throw new Error('VITE_PROJECT_ID is not set')
+}
+
+// 2. Create wagmiConfig
+const { chains, publicClient } = configureChains([mainnet, arbitrum], [publicProvider()])
+const wagmiConfig = createConfig({
+  autoConnect: true,
+  connectors: [
+    new WalletConnectConnector({ chains, options: { projectId, showQrModal: false } }),
+    new InjectedConnector({ chains, options: { shimDisconnect: true } }),
+    new CoinbaseWalletConnector({ chains, options: { appName: 'Web3Modal' } })
+  ],
+  publicClient
+})
+
+export default function App() {
+  // 3. Create modal
+  const modal = useWeb3Modal({ wagmiConfig, projectId, chains })
+
+  return (
+    <WagmiConfig config={wagmiConfig}>
+      <button onClick={() => modal.open()}>Open Modal</button>
+    </WagmiConfig>
+  )
+}
diff --git a/examples/react-wagmi/src/main.jsx b/examples/react-wagmi/src/main.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('app')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/examples/react-wagmi/vite.config.js b/examples/react-wagmi/vite.config.js
@@ -0,0 +1,6 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [react()]
+})
diff --git a/examples/vue-wagmi/index.html b/examples/vue-wagmi/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue wagmi example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/examples/vue-wagmi/package.json b/examples/vue-wagmi/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@examples/vue-wagmi",
+  "private": true,
+  "version": "3.0.0-8d5e8f4e",
+  "scripts": {
+    "dev:example": "vite --port 3002",
+    "build:example": "vite build"
+  },
+  "dependencies": {
+    "@web3modal/wagmi": "3.0.0-8d5e8f4e"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "4.2.3"
+  }
+}
diff --git a/examples/vue-wagmi/src/App.vue b/examples/vue-wagmi/src/App.vue
@@ -0,0 +1,34 @@
+<script setup>
+import { useWeb3Modal } from '@web3modal/wagmi/vue'
+import { configureChains, createConfig } from '@wagmi/core'
+import { arbitrum, mainnet } from 'wagmi/chains'
+import { CoinbaseWalletConnector } from '@wagmi/core/connectors/coinbaseWallet'
+import { InjectedConnector } from '@wagmi/core/connectors/injected'
+import { WalletConnectConnector } from '@wagmi/core/connectors/walletConnect'
+import { publicProvider } from '@wagmi/core/providers/public'
+
+// 1. Get projectId
+const projectId = import.meta.env.VITE_PROJECT_ID
+if (!projectId) {
+  throw new Error('VITE_PROJECT_ID is not set')
+}
+
+// 2. Create wagmiConfig
+const { chains, publicClient } = configureChains([mainnet, arbitrum], [publicProvider()])
+const wagmiConfig = createConfig({
+  autoConnect: true,
+  connectors: [
+    new WalletConnectConnector({ chains, options: { projectId, showQrModal: false } }),
+    new InjectedConnector({ chains, options: { shimDisconnect: true } }),
+    new CoinbaseWalletConnector({ chains, options: { appName: 'Web3Modal' } })
+  ],
+  publicClient
+})
+
+// 3. Create modal
+const modal = useWeb3Modal({ wagmiConfig, projectId, chains })
+</script>
+
+<template>
+  <button @click="() => modal.open()">Open Modal</button>
+</template>
diff --git a/examples/vue-wagmi/src/main.js b/examples/vue-wagmi/src/main.js
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/examples/vue-wagmi/vite.config.js b/examples/vue-wagmi/vite.config.js
@@ -0,0 +1,6 @@
+import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [vue()]
+})
diff --git a/lerna.json b/lerna.json
@@ -5,9 +5,9 @@
     "packages/core",
     "packages/scaffold",
     "packages/wagmi",
-    "apps/gallery",
-    "apps/laboratory"
+    "apps/*",
+    "examples/*"
   ],
-  "version": "3.0.0-91ecf92a",
+  "version": "3.0.0-8d5e8f4e",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }