Closed WoodyDark closed 2 months ago
@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)
@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
I am also able to run the internal svelte demo that is part of the web3-onboard project locally.
https://github.com/blocknative/web3-onboard
and run yarn && yarn dev
which starts the app at http://localhost:8080/
Allow CORS: Access-Control-Allow-Orig...
on ChromeI suspect you have something a little off in your vite.config
file
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']
}
})
PR to add reminders and clarity to docs and readme: https://github.com/blocknative/web3-onboard/pull/2257
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
npm install
,npm run dev
http://localhost:5173
as Safe App URLWhat 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
Anything else?
No response
Sanity Check