Add Gnosis Safe connector

[johnson86tw]

Issues

• Add Gnosis Safe #52
• Issue with flag autoConnect: true when using inside Gnosis-safe.io #89

Reference

• https://github.com/safe-global/safe-apps-sdk/tree/master/packages/safe-apps-wagmi
• https://github.com/sushiswap/sushiswap/pull/217/files
• https://github.com/re2005/vue-gnosis-safe
• https://ethereum.stackexchange.com/questions/120269/auto-safeapp-detection/120339#120339
• https://stackoverflow.com/questions/67259947/access-to-web-manifest-blocked-by-cors-policy

Test

1. yarn build:demo and yarn serve:demo
2. check http://localhost:4173 in the Safe app (Safe App > Apps > Add custom app)

[netlify]

✅ Deploy Preview for vue-dapp-docs ready!

Name	Link
🔨 Latest commit	59d5e26
🔍 Latest deploy log	https://app.netlify.com/sites/vue-dapp-docs/deploys/6361dddc5e108800083f4e30
😎 Deploy Preview	https://deploy-preview-94--vue-dapp-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for vue-dapp ready!

Name	Link
🔨 Latest commit	59d5e26
🔍 Latest deploy log	https://app.netlify.com/sites/vue-dapp/deploys/6361dddccb8527000a9debd2
😎 Deploy Preview	https://deploy-preview-94--vue-dapp.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[johnson86tw]

@re2005 Please help me review the code and feel free to give me any advice to improve it, thanks

[re2005]

Would be nice to export these flags, so users can use it on their apps to conditionally include the connector or NOT.

Like inside GnosisSafe, the only connector you should use if the Safe, the other won't work.

For example in my dapo I'm doing this:

const isServer = typeof window === 'undefined';
const isIframe = !isServer && window?.parent !== window;

const connectors: any = [
    new MetaMaskConnector({
        appUrl: window.location.href,
    }),
    new WalletConnectConnector({
        qrcode: true,
        rpc: Object.values(supportedChains).reduce((acc, cur) => ({ ...acc, [cur.chainId]: cur.rpcUrls[0] }), {}),
    }),
];

if (isIframe) {
    connectors.push(new SafeConnector({}));
}

Maybe is nice if I can import from 'vue-dapp`

import {isGnosisSafe} from 'vue-dapp'

I believe users shouldn't show other connectors in here, only GnosisSafe

[re2005]

Somehow the Gnosis is missing the manifest. Perhaps it should be linked on the index.html of the demo.

Could try adding it ?

[re2005]

Overall it's looking good. Very nice feature to have.

Later this weekend I'll test within my own dapps and post here more feedbacks.

Nice work @chnejohnson!

[johnson86tw]

Thanks @re2005 for your feedback!

In the commit 59d5e26, isNotSafeApp only check whether it's in the iframe to detect Safe app. So it's possible that the app is in the iframe but not inside Gnosis Safe app.

if (!isNotSafeApp()) {
  const safe = new SafeConnector()
  connectors = [safe, connectors[0]]
}

A strict way is to use safe.isSafeApp() to detect the Safe app.
But to check whether it's exactly a safe app, it has to call a Promise, and it will lead to some bugs happening in the Board.vue's props.connectors

const safe = new SafeConnector()
const isSafeApp = await safe.isSafeApp()
if (isSafeApp) {
  connectors = [safe, connectors[0]]
}

At the moment, I haven't found a good solution to solve this. So just implement the first one for the feature of conditional connector inclusion.

[johnson86tw]

Besides, I added the manifest link but it seems that it still cannot be detected on Netlify preview site.
Maybe the formal site can be detected.

[re2005]

Hi @chnejohnson thanks for the update. I've tested not only the demo, but also on my application. It all looks good, including the metadata.

I believe you can move on and merge it.

Great job!

[github-actions]

🎉 This PR is included in version 0.6.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[johnson86tw]

@re2005 glad to hear that, thanks for your review!

[johnson86tw]

In the commit 59d5e26, isNotSafeApp only check whether it's in the iframe to detect Safe app. So it's possible that the app is in the iframe but not inside Gnosis Safe app.

if (!isNotSafeApp()) {
  const safe = new SafeConnector()
  connectors = [safe, connectors[0]]
}

A strict way is to use safe.isSafeApp() to detect the Safe app. But to check whether it's exactly a safe app, it has to call a Promise, and it will lead to some bugs happening in the Board.vue's props.connectors

const safe = new SafeConnector()
const isSafeApp = await safe.isSafeApp()
if (isSafeApp) {
  connectors = [safe, connectors[0]]
}

At the moment, I haven't found a good solution to solve this. So just implement the first one for the feature of conditional connector inclusion.

I found a solution to detect the Safe app in a strict way.

const connectorsCreated = ref(false)

onMounted(async () => {
  const safe = new SafeConnector()
  if (await safe.isSafeApp()) {
    connectors = [safe]
  }
  connectorsCreated.value = true
})

 <vd-board v-if="connectorsCreated" :connectors="connectors" dark>