Safe integration does not work on https://app.safe.global with @web3-onboard/gnosis

[WoodyDark]

Current Behavior

Attempting to connect the wallet via https://app.safe.global/ will show a SafeAppProvider is not a constructor error. I've attached the screenshot below.

Expected Behavior

It should connect as expected.

Steps To Reproduce

I've created a repo brand new Vue repo with the default Web3-onboard setup instructions to demo it here:
https://github.com/WoodyDark/web3-onboard-safe-wallet-report

1. Clone the repo, run npm install, npm run dev
2. Visit the https://app.safe.global/ (you must have a working Safe wallet to reproduce), connect and select your wallet, select "Apps" on the left, then go to the "My custom apps" tab.
3. Click on "Add a custom Safe App" and paste http://localhost:5173 as Safe App URL
4. Enter the app and connect wallet, choose "Safe" option. It should fail as per the instructions

What package is effected by this issue?

@web3-onboard/gnosis

Is this a build or a runtime issue?

Runtime

Package Version

2.22.1

Node Version

No response

What browsers are you seeing the problem on?

Chrome

Relevant log output

SafeAppProvider is not a constructor

Anything else?

No response

Sanity Check

• If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a Minimal, Reproducible Example.

[anhntbk08]

@Adamj1232 Hello there, any progress so far? We're implementing another type of smart wallet (using ERC1271, similar to Safe wallet) but are unable to integrate it with other integrated Blocknative app (ie Pendle)

[Adamj1232]

@anhntbk08 have you tried this with a built and deployed version of your application?
I am able to open our reactdemo project which is deployed at https://reactdemo.blocknative.com/ using the above steps and adding that url as a custom dapp.
Code for that react-demo project is open source and can be found here - https://github.com/blocknative/react-demo

[Adamj1232]

I am also able to run the internal svelte demo that is part of the web3-onboard project locally.

• Clone the repo from https://github.com/blocknative/web3-onboard and run yarn && yarn dev which starts the app at http://localhost:8080/
• Visit the https://app.safe.global/ (you must have a working Safe wallet to reproduce), connect and select your wallet, select "Apps" on the left, then go to the "My custom apps" tab.
• Enable a local cors blocker extension - I use Allow CORS: Access-Control-Allow-Orig... on Chrome
• Click on "Add a custom Safe App" and paste http://localhost:8080 as Safe App URL
• Enter the app and connect wallet, choose "Safe" option. It should fail as per the instructions
• The dapp displays and works as expected

I suspect you have something a little off in your vite.config file

[Adamj1232]

I have a working version of your project on a branch but I cant push as I dont have permissions.

Also, be sure to enable your preffered way of handling local CORS issues. I like to use the Allow CORS browser extension.

Changes I made to get it working was add the necessary dep noted in the docs:

  "dependencies": {
    "@safe-global/safe-apps-provider": "^0.18.2",
    "@safe-global/safe-apps-sdk": "^8.0.0",
    "@web3-onboard/core": "^2.22.1",
    "@web3-onboard/gnosis": "^2.3.1",
    "@web3-onboard/injected-wallets": "^2.11.1",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },

Update the vite.config.ts to include an optimizeDeps prop and directive:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import VueDevTools from 'vite-plugin-vue-devtools'

// https://vitejs.dev/config/
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']
}
})

[Adamj1232]

PR to add reminders and clarity to docs and readme: #2257