Merge pull request #22 from decentraland/feat/approbable-wallets

feat: support approbable wallets

src/modules/wallet/sagas.ts

@@ -7,17 +7,17 @@ import {
   all
 } from 'redux-saga/effects'
 import { eth, Contract } from 'decentraland-eth'
-import { BaseWallet } from './types'
+import { EthereumWindow, BaseWallet } from './types'
 import {
   connectWalletSuccess,
   connectWalletFailure,
   CONNECT_WALLET_REQUEST
 } from './actions'
-import { connectEthereumWallet } from './utils'
+import { isApprovableWallet, connectEthereumWallet } from './utils'
 import { getData } from './selectors'
 
 export type WalletSagaOptions = {
-  provider: string
+  provider: object | string
   contracts: Contract[]
   eth: typeof eth
 }
@@ -29,6 +29,17 @@ export function createWalletSaga({
 }: WalletSagaOptions): () => IterableIterator<ForkEffect> {
   function* handleConnectWalletRequest() {
     try {
+      if (isApprovableWallet()) {
+        const { ethereum } = window as EthereumWindow
+        yield call(() => ethereum!.enable())
+
+        // Unfortunately we need to override the provider supplied to this method
+        // if we're dealing with approbable wallets (the first being Metamask, probably more to come).
+        // When a wallet is needs to call `enable` to work (to whitelist the URL), the correct provider is `ethereum`
+        // but if we're using a different kind of wallet (like a Ledger) the user supplied provider should be ok.
+        provider = ethereum!
+      }
+
       const walletData: BaseWallet = yield select(getData)
 
       yield call(() =>

src/modules/wallet/types.ts

@@ -17,3 +17,12 @@ export interface BaseWallet {
   locale?: string
   derivationPath?: string
 }
+
+export interface EthereumWindow {
+  ethereum?: {
+    _metamask: { isApproved: () => Promise<boolean> }
+    isApproved: () => Promise<boolean>
+
+    enable: () => Promise<string[]>
+  }
+}

src/modules/wallet/utils.ts

@@ -1,9 +1,10 @@
 import { eth, wallets, Contract } from 'decentraland-eth'
 import { isMobile } from '../../lib/utils'
+import { EthereumWindow } from './types'
 
 interface ConnectOptions {
   address: string
-  provider: string
+  provider: object | string
   contracts: Contract[]
   derivationPath?: string
   eth: typeof eth
@@ -49,3 +50,21 @@ function getWallets(
 export function isLedgerWallet() {
   return eth.wallet instanceof wallets.LedgerWallet
 }
+
+export function isApprovableWallet() {
+  const { ethereum } = window as EthereumWindow
+  return ethereum !== undefined && typeof ethereum.enable === 'function'
+}
+
+export async function isWalletApproved() {
+  const { ethereum } = window as EthereumWindow
+
+  if (ethereum === undefined) {
+    return false
+  }
+
+  // `isApproved` is not standard. It's supported by MetaMask and it's expected to be implemented by other wallet vendors
+  // but we need to check just in case.
+  const aprobable = ethereum._metamask || ethereum
+  return aprobable.isApproved ? await aprobable.isApproved() : true
+}

src/providers/WalletProvider/WalletProvider.ts

@@ -1,14 +1,28 @@
 import * as React from 'react'
+import {
+  isApprovableWallet,
+  isWalletApproved
+} from '../../modules/wallet/utils'
 import { DefaultProps, Props } from './WalletProvider.types'
 
 export default class WalletProvider extends React.PureComponent<Props> {
   static defaultProps: DefaultProps = {
     children: null
   }
 
-  componentWillMount() {
+  async componentWillMount() {
     const { onConnect } = this.props
-    onConnect()
+
+    if (await this.shouldConnect()) {
+      onConnect()
+    }
+  }
+
+  async shouldConnect() {
+    return (
+      !isApprovableWallet() ||
+      (isApprovableWallet() && (await isWalletApproved()))
+    )
   }
 
   render() {