Update docs for gnosis/safe package for building within vue env (#2257)

* Update docs for gnosis/safe package for building within vue env * Add clarity and remoinder for peerDeps
blocknative · Jul 15, 2024 · 1392442 · 1392442
1 parent 8b8e41c
commit 1392442
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 3 deletions.
diff --git a/docs/src/routes/docs/[...3]modules/[...1]core/+page.md b/docs/src/routes/docs/[...3]modules/[...1]core/+page.md
@@ -441,6 +441,7 @@ const sendTransaction = async () => {
   console.log(result)
 }
 ```
+
 ---
 
 #### disableFontDownload
@@ -1902,7 +1903,9 @@ export default {
       '@web3-onboard/gas',
       '@web3-onboard/sequence',
       'js-sha3',
-      '@ethersproject/bignumber'
+      '@ethersproject/bignumber',
+      '@safe-global/safe-apps-sdk',
+      '@safe-global/safe-apps-provider'
     ],
     esbuildOptions: {
       // Node.js global to browser globalThis

diff --git a/docs/src/routes/docs/[...3]modules/[...7]vue/+page.md b/docs/src/routes/docs/[...3]modules/[...7]vue/+page.md
@@ -503,6 +503,9 @@ export default {
     commonjsOptions: {
       transformMixedEsModules: true
     }
+  },
+  optimizeDeps: {
+    include: ['@safe-global/safe-apps-sdk', '@safe-global/safe-apps-provider']
   }
 }
 ```

diff --git a/docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md b/docs/src/routes/docs/[...4]wallets/[...12]gnosis/+page.md
@@ -80,3 +80,21 @@ Note: With the `safeTxGas` you will see additional value on the `gasLimit` displ
 ## Build Environments
 
 For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments)
+
+## Vue Build Configuration
+
+If using Vue be sure to include the necessary peerDeps in the `vite.config.ts` specifically within the `optimizeDeps.include` list and install the necessary peer deps `npm i @safe-global/safe-apps-provider @safe-global/safe-apps-sdk`.
+
+```typescript
+export default defineConfig({
+  plugins: [vue(), vueJsx(), VueDevTools()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  optimizeDeps: {
+    include: ['@safe-global/safe-apps-sdk', '@safe-global/safe-apps-provider']
+  }
+})
+```
diff --git a/packages/core/README.md b/packages/core/README.md
@@ -1670,7 +1670,9 @@ const config: UserConfig = {
       '@web3-onboard/gas',
       '@web3-onboard/sequence',
       'js-sha3',
-      '@ethersproject/bignumber'
+      '@ethersproject/bignumber',
+      '@safe-global/safe-apps-sdk',
+      '@safe-global/safe-apps-provider'
     ],
     esbuildOptions: {
       // Node.js global to browser globalThis

diff --git a/packages/gnosis/README.md b/packages/gnosis/README.md
@@ -57,3 +57,22 @@ let trans = await wallet.instance.txs.send({txs:[tx], params})
 ```
 
 Note: With the `safeTxGas` you will see additional value on the `gasLimit` displayed in the Safe. Check [Safe docs](https://github.com/safe-global/safe-contracts/blob/a6504a9afdeac186a8cdb29ad68b189523c80eda/docs/safe_tx_gas.md) for full details on that computation.
+
+
+## Vue Build Configuration
+
+If using Vue be sure to include the necessary peerDeps in the `vite.config.ts` specifically within the `optimizeDeps.include` list and install the necessary peer deps `npm i @safe-global/safe-apps-provider @safe-global/safe-apps-sdk`.
+
+```typescript
+export default defineConfig({
+  plugins: [vue(), vueJsx(), VueDevTools()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  },
+  optimizeDeps: {
+    include: ['@safe-global/safe-apps-sdk', '@safe-global/safe-apps-provider']
+  }
+})
+```
diff --git a/packages/gnosis/package.json b/packages/gnosis/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/gnosis",
-  "version": "2.3.1",
+  "version": "2.3.2-alpha.1",
   "description": "Safe module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",