From 7bc988ed9e2b5adc399edab5fc1db7636ae4572b Mon Sep 17 00:00:00 2001 From: Georges KABBOUCHI Date: Mon, 6 Sep 2021 19:31:40 +0300 Subject: [PATCH] Add gnosis safe app --- composables/useEagerConnect.ts | 29 +++++++++++++------------ composables/useSafeAppConnection.ts | 33 +++++++++++++++++++++++++++++ connectors/index.ts | 14 ++++++++++-- package.json | 2 ++ yarn.lock | 24 +++++++++++++++++++-- 5 files changed, 85 insertions(+), 17 deletions(-) create mode 100644 composables/useSafeAppConnection.ts diff --git a/composables/useEagerConnect.ts b/composables/useEagerConnect.ts index a4f1fda..a93a600 100644 --- a/composables/useEagerConnect.ts +++ b/composables/useEagerConnect.ts @@ -1,22 +1,25 @@ import { useWeb3 } from "@instadapp/vue-web3"; -import { injected } from "../connectors"; -import { onMounted, ref, watch } from "@nuxtjs/composition-api"; +import { injected, gnosisSafe } from "../connectors"; +import { onMounted, ref, watch, watchEffect } from "@nuxtjs/composition-api"; +import { useSafeAppConnection } from "./useSafeAppConnection"; export function useEagerConnect() { const { activate, active } = useWeb3(); - + const { tried: triedToConnectToSafe } = useSafeAppConnection(gnosisSafe); const tried = ref(false); - onMounted(() => { - injected.isAuthorized().then((isAuthorized: boolean) => { - if (isAuthorized) { - activate(injected, undefined, true).catch(() => { + watchEffect(() => { + if (triedToConnectToSafe.value && !active.value) { + injected.isAuthorized().then((isAuthorized: boolean) => { + if (isAuthorized) { + activate(injected, undefined, true).catch(() => { + tried.value = true; + }); + } else { tried.value = true; - }); - } else { - tried.value = true; - } - }); + } + }); + } }); // if the connection worked, wait until we get confirmation of that to flip the flag @@ -29,4 +32,4 @@ export function useEagerConnect() { return { tried }; -} \ No newline at end of file +} diff --git a/composables/useSafeAppConnection.ts b/composables/useSafeAppConnection.ts new file mode 100644 index 0000000..36b5cb3 --- /dev/null +++ b/composables/useSafeAppConnection.ts @@ -0,0 +1,33 @@ +import { useWeb3 } from "@instadapp/vue-web3"; +import { injected } from "../connectors"; +import { onMounted, ref, watch } from "@nuxtjs/composition-api"; +import { SafeAppConnector } from "@gnosis.pm/safe-apps-web3-react"; + +export function useSafeAppConnection(connector?: SafeAppConnector) { + const { activate, active } = useWeb3(); + + const tried = ref(false); + + onMounted(() => { + connector?.isSafeApp().then((loadedInSafe: boolean) => { + if (loadedInSafe) { + activate(connector, undefined, true).catch(() => { + tried.value = true; + }); + } else { + tried.value = true; + } + }); + }); + + // if the connection worked, wait until we get confirmation of that to flip the flag + watch([tried, active], () => { + if (!tried.value && active.value) { + tried.value = true; + } + }); + + return { + tried + }; +} \ No newline at end of file diff --git a/connectors/index.ts b/connectors/index.ts index e8e2426..c496959 100644 --- a/connectors/index.ts +++ b/connectors/index.ts @@ -7,6 +7,7 @@ import { WalletLinkConnector } from "@web3-react/walletlink-connector"; import INSTADAPP_LOGO_URL from "~/assets/logo/instadapp-logo-icon.svg?inline"; import Web3 from "web3"; +import { SafeAppConnector } from "@gnosis.pm/safe-apps-web3-react/dist/connector"; setWeb3LibraryCallback(provider => new Web3(provider)); @@ -22,11 +23,10 @@ export const walletconnect = new WalletConnectConnector({ supportedChainIds: [1, 137] }); - // mainnet only export const portis = new PortisConnector({ dAppId: process.env.PORTIS_ID as string, - networks: [1], + networks: [1] }); export const walletlink = new WalletLinkConnector({ @@ -34,3 +34,13 @@ export const walletlink = new WalletLinkConnector({ appName: "Instadapp", appLogoUrl: INSTADAPP_LOGO_URL }); + +let gnosisSafe = null; + +if (process.client) { + gnosisSafe = new SafeAppConnector({ + supportedChainIds: [1, 137] + }); +} + +export { gnosisSafe }; diff --git a/package.json b/package.json index 8513c41..a438659 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@gnosis.pm/safe-apps-sdk": "^4.2.0", + "@gnosis.pm/safe-apps-web3-react": "^0.6.2", "@gnosis.pm/safe-apps-web3modal": "^2.0.0", "@instadapp/vue-web3": "^0.3.0", "@nuxtjs/axios": "^5.13.6", @@ -19,6 +20,7 @@ "@tailwindcss/typography": "^0.4.1", "@vueuse/core": "^5.1.4", "@walletconnect/web3-provider": "^1.4.1", + "@web3-react/core": "^6.1.9", "@web3-react/injected-connector": "^6.0.7", "@web3-react/portis-connector": "^6.1.9", "@web3-react/walletconnect-connector": "^6.2.4", diff --git a/yarn.lock b/yarn.lock index 01642b3..ba64d91 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1047,7 +1047,7 @@ "@ethersproject/properties" "^5.4.0" "@ethersproject/strings" "^5.4.0" -"@ethersproject/keccak256@^5.0.3", "@ethersproject/keccak256@^5.4.0": +"@ethersproject/keccak256@^5.0.0-beta.130", "@ethersproject/keccak256@^5.0.3", "@ethersproject/keccak256@^5.4.0": version "5.4.0" resolved "https://registry.yarnpkg.com/@ethersproject/keccak256/-/keccak256-5.4.0.tgz#7143b8eea4976080241d2bd92e3b1f1bf7025318" integrity sha512-FBI1plWet+dPUvAzPAeHzRKiPpETQzqSUWR1wXJGHVWi4i8bOSrpC3NwpkPjgeXG7MnugVc1B42VbfnQikyC/A== @@ -1149,6 +1149,15 @@ resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-apps-sdk/-/safe-apps-sdk-4.2.0.tgz#77069de1b4f3db724d1ded1fab39e1feacc7bc05" integrity sha512-GpaxIbi658+KLtJpTGq6qdpVkbW7OQUKh8i0uhZ04SiAoIAtR9QNbP7V04OvvuqhKjhvCnvh37mJH2RZ2zZHDA== +"@gnosis.pm/safe-apps-web3-react@^0.6.2": + version "0.6.2" + resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-apps-web3-react/-/safe-apps-web3-react-0.6.2.tgz#6d3a08d666b314190c96a704302c3f2139d1db25" + integrity sha512-3+epb5hifBTv/7x4YMNzGZI9A8jh2OHPIoOYZ4L5qZuZqNPbjFMqAk35UgvBP0+3PoF3p0/xduj1enrkGa5c+A== + dependencies: + "@gnosis.pm/safe-apps-provider" "0.7.1" + "@gnosis.pm/safe-apps-sdk" "4.2.0" + "@web3-react/abstract-connector" "6.0.7" + "@gnosis.pm/safe-apps-web3modal@^2.0.0": version "2.0.0" resolved "https://registry.yarnpkg.com/@gnosis.pm/safe-apps-web3modal/-/safe-apps-web3modal-2.0.0.tgz#4da6ab5d62191d5454d3d8eecbfbb6daf38aa92b" @@ -2569,13 +2578,24 @@ dependencies: "@walletconnect/window-getters" "^1.0.0" -"@web3-react/abstract-connector@^6.0.7": +"@web3-react/abstract-connector@6.0.7", "@web3-react/abstract-connector@^6.0.7": version "6.0.7" resolved "https://registry.yarnpkg.com/@web3-react/abstract-connector/-/abstract-connector-6.0.7.tgz#401b3c045f1e0fab04256311be49d5144e9badc6" integrity sha512-RhQasA4Ox8CxUC0OENc1AJJm8UTybu/oOCM61Zjg6y0iF7Z0sqv1Ai1VdhC33hrQpA8qSBgoXN9PaP8jKmtdqg== dependencies: "@web3-react/types" "^6.0.7" +"@web3-react/core@^6.1.9": + version "6.1.9" + resolved "https://registry.yarnpkg.com/@web3-react/core/-/core-6.1.9.tgz#5f5daa0545a8ea07770a699580ced552583afc97" + integrity sha512-P877DslsbAkWIlMANpWiK7pCvNwlz0kJC0EGckuVh0wlA23J4UnFxq6xyOaxkxaDCu14rA/tAO0NbwjcXTQgSA== + dependencies: + "@ethersproject/keccak256" "^5.0.0-beta.130" + "@web3-react/abstract-connector" "^6.0.7" + "@web3-react/types" "^6.0.7" + tiny-invariant "^1.0.6" + tiny-warning "^1.0.3" + "@web3-react/injected-connector@^6.0.7": version "6.0.7" resolved "https://registry.yarnpkg.com/@web3-react/injected-connector/-/injected-connector-6.0.7.tgz#1e0be23f51fa07fe6547fe986768a46b74c3a426"