From bbc738d29caa2de2be3fb45c5bfc4ac7333ebbf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Mart=C3=ADnez?= <germaga92@gmail.com>
Date: Thu, 16 May 2019 20:07:33 +0200
Subject: [PATCH] Identify the Safe web3 provider

---
 src/logic/wallets/getWeb3.js                  | 22 ++++++++++++++-----
 .../welcome/components/Layout.stories.js      | 10 ++++++---
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/logic/wallets/getWeb3.js b/src/logic/wallets/getWeb3.js
index 724c5b41..edd5d304 100644
--- a/src/logic/wallets/getWeb3.js
+++ b/src/logic/wallets/getWeb3.js
@@ -12,6 +12,7 @@ export const ETHEREUM_NETWORK = {
 }
 
 export const WALLET_PROVIDER = {
+  SAFE: 'SAFE',
   METAMASK: 'METAMASK',
   PARITY: 'PARITY',
   REMOTE: 'REMOTE',
@@ -36,12 +37,23 @@ export const openTxInEtherScan = (tx: string, network: string) => `https://${net
 export const getEtherScanLink = (address: string, network: string) => `https://${network}.etherscan.io/address/${address}`
 
 let web3
-export const getWeb3 = () => web3 || new Web3(window.web3.currentProvider)
+export const getWeb3 = () => web3
 
-const isMetamask: Function = (web3Provider): boolean => {
-  const isMetamaskConstructor = web3Provider.currentProvider.constructor.name === 'MetamaskInpageProvider'
+const getProviderName: Function = (web3Provider): boolean => {
+  let name
 
-  return isMetamaskConstructor || web3Provider.currentProvider.isMetaMask
+  switch (web3Provider.currentProvider.constructor.name) {
+  case 'SafeWeb3Provider':
+    name = WALLET_PROVIDER.SAFE
+    break
+  case 'MetamaskInpageProvider':
+    name = WALLET_PROVIDER.METAMASK
+    break
+  default:
+    name = 'UNKNOWN'
+  }
+
+  return name
 }
 
 const getAccountFrom: Function = async (web3Provider): Promise<string | null> => {
@@ -76,7 +88,7 @@ export const getProviderInfo: Function = async (): Promise<ProviderProps> => {
 
   web3 = new Web3(web3Provider)
 
-  const name = isMetamask(web3) ? WALLET_PROVIDER.METAMASK : 'UNKNOWN'
+  const name = getProviderName(web3)
   const account = await getAccountFrom(web3)
   const network = await getNetworkIdFrom(web3)
 
diff --git a/src/routes/welcome/components/Layout.stories.js b/src/routes/welcome/components/Layout.stories.js
index fc696c66..d5b5c62c 100644
--- a/src/routes/welcome/components/Layout.stories.js
+++ b/src/routes/welcome/components/Layout.stories.js
@@ -9,15 +9,19 @@ const FrameDecorator = story => <div className={styles.frame}>{story()}</div>
 
 storiesOf('Routes /welcome', module)
   .addDecorator(FrameDecorator)
+  .add('Welcome with Gnosis Safe connected', () => {
+    const provider = select('Status by Provider', ['', 'UNKNOWN', 'SAFE', 'METAMASK', 'PARITY'], 'SAFE')
+    return <Component provider={provider} fetchProvider={() => {}} />
+  })
   .add('Welcome with Metamask connected', () => {
-    const provider = select('Status by Provider', ['', 'UNKNOWN', 'METAMASK', 'PARITY'], 'METAMASK')
+    const provider = select('Status by Provider', ['', 'UNKNOWN', 'SAFE', 'METAMASK', 'PARITY'], 'METAMASK')
     return <Component provider={provider} fetchProvider={() => {}} />
   })
   .add('Welcome with unknown wallet', () => {
-    const provider = select('Status by Provider', ['', 'UNKNOWN', 'METAMASK', 'PARITY'], 'UNKNOWN')
+    const provider = select('Status by Provider', ['', 'UNKNOWN', 'SAFE', 'METAMASK', 'PARITY'], 'UNKNOWN')
     return <Component provider={provider} fetchProvider={() => {}} />
   })
   .add('Welcome without wallet connected', () => {
-    const provider = select('Status by Provider', ['', 'UNKNOWN', 'METAMASK', 'PARITY'], '')
+    const provider = select('Status by Provider', ['', 'UNKNOWN', 'SAFE', 'METAMASK', 'PARITY'], '')
     return <Component provider={provider} fetchProvider={() => {}} />
   })