SvelteKit+Vite - Fix config issue with sveltekit and vite config - Add docs

docs/package.json

@@ -77,7 +77,7 @@
     "@web3-onboard/trezor": "^2.3.3",
     "@web3-onboard/trust": "^2.0.0",
     "@web3-onboard/uauth": "^2.0.1",
-    "@web3-onboard/walletconnect": "^2.2.1",
+    "@web3-onboard/walletconnect": "^2.3.1",
     "@web3-onboard/web3auth": "^2.1.4",
     "@web3-onboard/xdefi": "^2.0.0",
     "animejs": "^3.2.1",

docs/src/lib/services/onboard.js

@@ -56,7 +56,12 @@ const intiOnboard = async (theme) => {
   const infinityWallet = infinityWalletModule()
   const coinbase = coinbaseModule()
   const dcent = dcentModule()
-  const walletConnect = walletConnectModule()
+  const walletConnect = walletConnectModule({    connectFirstChainId: true,
+    version: 2,
+    projectId: 'f6bd6e2911b56f5ac3bc8b2d0e2d7ad5',
+    qrcodeModalOptions: {
+    mobileLinks: ['rainbow', 'metamask', 'argent', 'trust', 'imtoken', 'pillar']
+    }})
   const ledger = ledgerModule()
   const keystone = keystoneModule()
   const keepkey = keepkeyModule()

docs/src/routes/docs/[...3]modules/core.md

@@ -202,7 +202,7 @@ type ConnectModalOptions = {
    * ENS resolution takes precedent over UNS
    * Defaults to false
    */
-    disableUDResolution?: boolean
+  disableUDResolution?: boolean
 }
 ```
 
@@ -1383,8 +1383,103 @@ const config = {
 export default config
 ```
 
+### SvelteKit + Vite
+
+Checkout a boilerplate example (here)[https://github.com/blocknative/web3-onboard/tree/develop/examples/with-sveltekit]
+
+Add the following dev dependencies:
+
+`yarn add rollup-plugin-polyfill-node -D`
+
+Then add the following to your `svelte.config.js` file:
+
+```javascript
+import adapter from '@sveltejs/adapter-auto'
+import preprocess from 'svelte-preprocess'
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://github.com/sveltejs/svelte-preprocess
+  // for more information about preprocessors
+  preprocess: preprocess(),
+
+  kit: {
+    adapter: adapter()
+  }
+}
+
+export default config
+```
+
+Then add the following to your `vite.config.js` file:
+
+```javascript
+import { sveltekit } from '@sveltejs/kit/vite'
+import inject from '@rollup/plugin-inject'
+
+import type { UserConfig } from 'vite'
+import nodePolyfills from 'rollup-plugin-polyfill-node'
+
+const MODE = process.env.NODE_ENV
+const development = MODE === 'development'
+
+/** @type {import('@sveltejs/kit').Config} */
+
+const config: UserConfig = {
+  plugins: [
+    sveltekit(),
+    development &&
+      nodePolyfills({
+        include: ['node_modules/**/*.js', new RegExp('node_modules/.vite/.*js'), 'http', 'crypto']
+      })
+  ],
+  resolve: {
+    alias: {
+      crypto: 'crypto-browserify',
+      stream: 'stream-browserify',
+      assert: 'assert'
+    }
+  },
+  build: {
+    rollupOptions: {
+      external: ['@web3-onboard/*'],
+      plugins: [
+        nodePolyfills({ include: ['crypto', 'http'] }),
+        inject({ Buffer: ['Buffer', 'Buffer'] })
+      ]
+    },
+    commonjsOptions: {
+      transformMixedEsModules: true
+    }
+  },
+  optimizeDeps: {
+    exclude: ['@ethersproject/hash', 'wrtc', 'http'],
+    include: [
+      '@web3-onboard/core',
+      '@web3-onboard/gas',
+      '@web3-onboard/sequence',
+      'js-sha3',
+      '@ethersproject/bignumber'
+    ],
+    esbuildOptions: {
+      // Node.js global to browser globalThis
+      define: {
+        global: 'globalThis'
+      }
+    }
+  },
+  define: {
+    global: 'window'
+  }
+}
+
+export default config
+```
+
 ### Vite
 
+Checkout a boilerplate example for Vite-React (here)[https://github.com/blocknative/web3-onboard/tree/develop/examples/with-vite-react]
+
 Add the following dev dependencies:
 
 `npm i --save-dev rollup-plugin-polyfill-node`
@@ -1402,9 +1497,7 @@ export default {
   plugins: [
     development &&
       nodePolyfills({
-        include: ['node_modules/**/*.js', new RegExp('node_modules/.vite/.*js')],
-        http: true,
-        crypto: true
+        include: ['node_modules/**/*.js', new RegExp('node_modules/.vite/.*js'), 'http', 'crypto']
       })
   ],
   resolve: {
@@ -1416,11 +1509,34 @@ export default {
   },
   build: {
     rollupOptions: {
-      plugins: [nodePolyfills({ crypto: true, http: true })]
+      external: ['@web3-onboard/*'],
+      plugins: [
+        nodePolyfills({ include: ['crypto', 'http'] }),
+        inject({ Buffer: ['Buffer', 'Buffer'] })
+      ]
     },
     commonjsOptions: {
       transformMixedEsModules: true
     }
+  },
+  optimizeDeps: {
+    exclude: ['@ethersproject/hash', 'wrtc', 'http'],
+    include: [
+      '@web3-onboard/core',
+      '@web3-onboard/gas',
+      '@web3-onboard/sequence',
+      'js-sha3',
+      '@ethersproject/bignumber'
+    ],
+    esbuildOptions: {
+      // Node.js global to browser globalThis
+      define: {
+        global: 'globalThis'
+      }
+    }
+  },
+  define: {
+    global: 'window'
   }
 }
 ```
@@ -1437,6 +1553,11 @@ build: {
 
 ### Next.js
 
+Checkout a boilerplate example for NextJS v13 (here)[https://github.com/blocknative/web3-onboard/tree/develop/examples/with-nextjs-13]
+
+Checkout a boilerplate example for NextJS (here)[https://github.com/blocknative/web3-onboard/tree/develop/examples/with-nextjs]
+
+
 :::admonition type=note
 
 If you are seeing an error during builds when dynamically importing Web3Onboard in a NextJS v13 project, try upgrading to to the Canary beta release of NextJS where this issue is fixed.