Add wallet connect beta provider

package.json

@@ -86,6 +86,9 @@
     "@gnosis.pm/dx-contracts": "2.0.0",
     "@gnosis.pm/gno-token": "2.0.0",
     "@gnosis.pm/util-contracts": "2.0.0",
+    "@walletconnect/browser": "^1.0.0-beta.18",
+    "@walletconnect/qrcode-modal": "^1.0.0-beta.18",
+    "@walletconnect/web3-provider": "^1.0.0-beta.18",
     "bignumber.js": "5.0.0",
     "connected-react-router": "4.4.1",
     "cross-env": "5.1.6",

src/assets/img/icons/providerIcons.js

@@ -6,3 +6,4 @@ export * from 'assets/img/icons/icon_metamask3.svg'
 export * from 'assets/img/icons/icon_status.svg'
 export * from 'assets/img/icons/icon_cross.svg'
 export * from 'assets/img/icons/icon_coinbase.png'
+export * from 'assets/img/icons/icon_walletconnect.svg'

src/containers/WalletIntegration/index.tsx

@@ -101,6 +101,7 @@ class WalletIntegration extends React.Component<WalletIntegrationProps, WalletIn
               <div className={!this.state.initialising ? 'ready' : ''}>
                 {Object.keys(Providers).map((provider: 'INJECTED_WALLET' | 'LEDGER', i: number) => {
                   const providerInfo = Providers[provider].providerName || provider
+                  const isBeta = Providers[provider].beta
                   return (
                     <div className="providerItem"
                       key={i}
@@ -110,6 +111,7 @@ class WalletIntegration extends React.Component<WalletIntegrationProps, WalletIn
                         src={provider2SVG(providerInfo)}
                       />}
                       <h4>{providerInfo}</h4>
+                      {isBeta && <small>BETA</small>}
                     </div>
                   )
                 })}

src/globals/index.ts

@@ -83,13 +83,14 @@ export enum AuctionStatus {
   ENDED = 'ended',
 }
 
-export enum ProviderType { INJECTED_WALLET = 'INJECTED_WALLET', HARDWARE_WALLET = 'HARDWARE_WALLET' }
+export enum ProviderType { INJECTED_WALLET = 'INJECTED_WALLET', HARDWARE_WALLET = 'HARDWARE_WALLET', WALLET_CONNECT = 'WALLET_CONNECT' }
 export enum ProviderName {
   COINBASE = 'COINBASE',
   METAMASK = 'METAMASK',
   MIST = 'MIST',
   STATUS = 'STATUS',
   'GNOSIS SAFE' = 'GNOSIS SAFE',
+  'WALLET CONNECT' = 'WALLET CONNECT',
 
   LEDGER = 'LEDGER',
   INJECTED_WALLET = 'INJECTED_WALLET',

src/integrations/provider/index.ts

@@ -6,6 +6,10 @@
 // import RpcSubprovider from 'web3-provider-engine/subproviders/rpc.js'
 // import Eth from '@ledgerhq/hw-app-eth'
 
+// @ts-ignore
+import WalletConnectProvider from '@walletconnect/web3-provider'
+import Web3 from 'web3'
+
 import { getTime } from 'api'
 import { setupWeb3 } from 'api/web3Provider'
 
@@ -59,6 +63,7 @@ export const grabProviderState = async (provider: WalletProvider) => {
 const Providers = {
   // runtime providers (METAMASK/MIST/PARITY)
   INJECTED_WALLET: {
+    beta: false,
     priority: 90,
     providerType: 'INJECTED_WALLET',
     keyName: 'INJECTED_WALLET',
@@ -89,6 +94,43 @@ const Providers = {
       return this.web3
     },
   },
+  WALLET_CONNECT: {
+    beta: true,
+    priority: 80,
+    providerName: 'WALLET CONNECT',
+    providerType: 'INJECTED_WALLET',
+    keyName: 'WALLET_CONNECT',
+
+    async checkAvailability() {
+      return this.walletAvailable = true
+    },
+
+    async initialize() {
+      if (!this.checkAvailability()) return
+
+      const provider = WalletConnectProvider({
+        bridge: 'https://bridge.walletconnect.org',
+      })
+      provider._providers[6] = {
+        // @ts-ignore
+        setEngine: _ => _,
+        // @ts-ignore
+        handleRequest: async (payload, next, end) => {
+          const walletConnector = await provider.getWalletConnector()
+          try {
+            const resp = await walletConnector.sendCustomRequest(payload)
+            end(null, resp)
+          } catch (e) {
+            end(e)
+          }
+        },
+      }
+      this.web3 = new Web3(provider)
+      this.state = {}
+
+      return this.web3
+    },
+  },
   // Hardware Provider - LEDGER
   /* LEDGER: {
     priority: 80,

src/integrations/types.ts

@@ -13,7 +13,7 @@ export interface ProviderState {
 export interface WalletProvider {
   keyName: ProviderName | ProviderType,
   providerName: WALLET_PROVIDER,
-  providerType: 'HARDWARE_WALLET' | 'INJECTED_WALLET',
+  providerType: 'HARDWARE_WALLET' | 'INJECTED_WALLET' | 'WALLET_CONNECT',
   // controls which provider is considered default
   priority: number,
   // internal flag determining if rovider was even injected

src/utils/index.ts

@@ -14,10 +14,10 @@ import STATUS_SVG from 'assets/img/icons/icon_status.svg'
 import LEDGER_SVG from 'assets/img/icons/icon_ledger.svg'
 import METAMASK_SVG from 'assets/img/icons/icon_metamask3.svg'
 import COINBASE_PNG from 'assets/img/icons/icon_coinbase.png'
+import WALLET_CONNECT_SVG from 'assets/img/icons/icon_walletconnect.svg'
 import DEFAULT_PROVIDER_SVG from 'assets/img/icons/icon_defaultWallet.svg'
 
 export const getDutchXOptions = (provider: any) => {
-  console.log('FIRING getDutchXOptions')
   const opts: any = {}
 
   if (provider && provider.name === WALLET_PROVIDER.METAMASK) {
@@ -198,6 +198,9 @@ export const provider2SVG = (providerName: ProviderName | ProviderType) => {
     case 'COINBASE':
       return COINBASE_PNG
 
+    case 'WALLET CONNECT':
+      return WALLET_CONNECT_SVG
+
     default:
       return DEFAULT_PROVIDER_SVG
   }