Support Wallet Connect

code/client/package.json

@@ -81,6 +81,7 @@
     "@sentry/react": "^6.8.0",
     "@sentry/tracing": "^6.8.0",
     "@transak/transak-sdk": "^1.0.31",
+    "@walletconnect/client": "^1.7.1",
     "antd": "^4.16.2",
     "axios": "^0.21.1",
     "bn.js": "^5.2.0",

code/client/src/app.less

@@ -10,6 +10,7 @@
 @import '~antd/es/image/style/index.less';
 @import '~antd/es/input/style/index.less';
 @import '~antd/es/layout/style/index.less';
+@import '~antd/es/list/style/index.less';
 @import '~antd/es/menu/style/index.less';
 @import '~antd/es/modal/style/index.less';
 @import '~antd/es/notification/style/index.less';

code/client/src/components/QrCodeScanner.jsx

@@ -11,7 +11,7 @@ import UploadOutlined from '@ant-design/icons/UploadOutlined'
 import jsQR from 'jsqr'
 import { getDataURLFromFile, getTextFromFile } from './Common'
 
-const QrCodeScanner = ({ onScan, shouldInit, style }) => {
+const QrCodeScanner = ({ onScan, shouldInit, style, uploadBtnText = 'Use Image or JSON Instead' }) => {
   const ref = useRef()
   const { isMobile } = useWindowDimensions()
   const [videoDevices, setVideoDevices] = useState([])
@@ -160,7 +160,7 @@ const QrCodeScanner = ({ onScan, shouldInit, style }) => {
           beforeUpload={beforeUpload}
           onChange={onQrcodeChange}
         >
-          <Button shape='round' icon={qrCodeImageUploading ? <LoadingOutlined /> : <UploadOutlined />}>Use Image or JSON Instead</Button>
+          <Button shape='round' icon={qrCodeImageUploading ? <LoadingOutlined /> : <UploadOutlined />}>{uploadBtnText}</Button>
         </Upload>
       </Row>
     </>

code/client/src/integration/Common.jsx

@@ -22,7 +22,6 @@ export const WalletSelector = ({ from, onAddressSelected, filter = e => e, disab
   const network = useSelector(state => state.global.network)
   const wallets = useSelector(state => state.wallet)
   const walletList = Object.keys(wallets).map(e => wallets[e]).filter(e => e.network === network && (showOlderVersions ? (!e.temp || !util.isEmptyAddress(e.forwardAddress)) : !e.temp))
-  console.log(wallets, walletList)
   from = util.safeNormalizedAddress(from)
   const selectedWallet = from && wallets[from]
   // console.log('selectedWallet', from, selectedWallet)

code/client/src/integration/WalletAuth.jsx

@@ -12,6 +12,7 @@ import AnimatedSection from '../components/AnimatedSection'
 import RequestSignature from './RequestSignature'
 import message from '../message'
 import { Text } from '../components/Text'
+import WalletConnect from './WalletConnect'
 
 const WalletAuth = () => {
   const dispatch = useDispatch()
@@ -21,8 +22,7 @@ const WalletAuth = () => {
 
   const qs = querystring.parse(location.search)
   const callback = qs.callback && Buffer.from(qs.callback, 'base64').toString()
-  const caller = qs.caller
-  const network = qs.network
+  const { wc, caller, network } = qs
   const { amount, dest, from, calldata } = qs
   const { message: msg, raw, duration, comment } = qs
   // if (!action || !callback || !caller) {
@@ -40,6 +40,10 @@ const WalletAuth = () => {
     }
   }, [network])
 
+  if (action === 'walletconnect') {
+    return <WalletConnect wc={wc} />
+  }
+
   if (!action || !callback || !caller) {
     message.error('The app did not specify a callback, an action, or its identity. Please ask the app developer to fix it.')
     return (

code/client/src/integration/WalletConnect.jsx

@@ -0,0 +1,271 @@
+import React, { useState, useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import WalletConnectClient from '@walletconnect/client'
+import { InputBox, Link, Text } from '../components/Text'
+import Image from 'antd/es/image'
+import { Row } from 'antd/es/grid'
+import ConfigProvider from 'antd/es/config-provider'
+import Button from 'antd/es/button'
+import cacheActions from '../state/modules/cache/actions'
+import AnimatedSection from '../components/AnimatedSection'
+import message from '../message'
+import Spin from 'antd/es/spin'
+import util, { checkCamera } from '../util'
+import QrCodeScanner from '../components/QrCodeScanner'
+import { WalletSelector } from './Common'
+import Send from '../pages/Show/Send'
+import List from 'antd/es/list'
+
+const PromptView = ({ peerMeta, approveSession, rejectSession }) => {
+  return (
+    <>
+      <Row type='flex' justify='center' align='middle'>
+        <Image style={{ maxWidth: '100px' }} src={peerMeta.icons[0]} alt={peerMeta.name} />
+      </Row>
+      <Row type='flex' justify='center' align='middle'>
+        <Text>{peerMeta.name}</Text>
+      </Row>
+      <Row type='flex' justify='center' align='middle'>
+        <Text>{peerMeta.description}</Text>
+      </Row>
+      <Row type='flex' justify='center' align='middle'>
+        <Link target='_blank' href={peerMeta.url} rel='noreferrer'>{peerMeta.url}</Link>
+      </Row>
+      <Row type='flex' justify='center' align='middle' style={{ marginTop: '24px' }}>
+        <Button style={{ marginRight: '24px' }} onClick={approveSession}>Approve</Button>
+        <Button onClick={rejectSession}>Reject</Button>
+      </Row>
+    </>
+  )
+}
+
+const WalletConnect = ({ wc }) => {
+  const dispatch = useDispatch()
+  const wallets = useSelector(state => state.wallet)
+  const walletConnectSession = useSelector(state => state.cache.walletConnectSession)
+  const walletList = Object.keys(wallets).filter(addr => util.safeNormalizedAddress(addr))
+  const [selectedAddress, setSelectedAddress] = useState({ value: walletList[0] })
+  const [connected, setConnected] = useState(false)
+  const [loading, setLoading] = useState(false)
+  // Default to QR unless wc provided.
+  const [isScanMode, setScanMode] = useState(!wc)
+  const [hasCamera, setHasCamera] = useState(false)
+  const [uri, setUri] = useState('')
+  const [connector, setConnector] = useState(null)
+  const [peerMeta, setPeerMeta] = useState(null)
+  const [requests, setRequests] = useState([])
+
+  useEffect(() => {
+    const f = async () => {
+      const [hasCamera] = await checkCamera()
+      setHasCamera(hasCamera)
+    }
+
+    f()
+  }, [])
+
+  useEffect(() => {
+    if (wc) {
+      initWalletConnect(wc)
+    }
+  }, [wc])
+
+  const subscribeToEvents = (connector) => {
+    if (connector) {
+      connector.on('session_request', (error, payload) => {
+        if (error) {
+          throw error
+        }
+        //  dispatch(cacheActions.fetchVersion({ network }))
+        const { peerMeta } = payload.params[0]
+        setPeerMeta(peerMeta)
+      })
+
+      connector.on('session_update', error => {
+        if (error) {
+          throw error
+        }
+
+        dispatch(cacheActions.updateWalletConnectSession(connector.session))
+      })
+
+      connector.on('call_request', async (error, payload) => {
+        console.log('EVENT', 'call_request', 'method', payload.method)
+        if (error) {
+          throw error
+        }
+
+        setRequests(requests => ([...requests, payload]))
+      })
+
+      connector.on('connect', (error, payload) => {
+        if (error) {
+          throw error
+        }
+
+        setConnected(true)
+        dispatch(cacheActions.updateWalletConnectSession(connector.session))
+      })
+
+      connector.on('disconnect', (error, payload) => {
+        if (error) {
+          throw error
+        }
+
+        setConnected(false)
+        setLoading(false)
+        setConnector(null)
+        setPeerMeta(null)
+        dispatch(cacheActions.updateWalletConnectSession(null))
+      })
+
+      if (connector.connected) {
+        setConnected(true)
+      }
+
+      setConnector(connector)
+    }
+  }
+
+  useEffect(() => {
+    if (walletConnectSession) {
+      const connector = new WalletConnectClient({ session: walletConnectSession })
+      subscribeToEvents(connector)
+    }
+  }, [])
+
+  const initWalletConnect = async (uri, reportOnError = true) => {
+    setLoading(true)
+
+    try {
+      const connector = new WalletConnectClient({
+        uri,
+        clientMeta: {
+          description: '1Wallet',
+          url: 'https://1wallet.crazy.one',
+          icons: ['https://1wallet.crazy.one/1wallet.png'],
+          name: '1Wallet',
+        }
+      })
+
+      if (!connector.connected) {
+        await connector.createSession()
+      }
+
+      setLoading(false)
+
+      subscribeToEvents(connector)
+    } catch (error) {
+      if (reportOnError) {
+        message.error('Failed to connect.', 15)
+      }
+      setLoading(false)
+    }
+  }
+
+  const approveSession = () => {
+    if (connector) {
+      connector.approveSession({ chainId: connector.chainId, accounts: [selectedAddress.value] })
+    }
+  }
+
+  const rejectSession = () => {
+    if (connector) {
+      connector.rejectSession()
+      setUri('')
+    }
+  }
+
+  const approveRequest = (request) => {
+    console.log(request)
+    if (connector) {
+      // TODO: Handle requests based on methods
+      // connector.approveRequest({
+      //   id: request.id,
+      //   result
+      // })
+      // setRequests(requests.filter(r => r.id !== request.id))
+    }
+  }
+
+  const rejectRequest = (request) => {
+    console.log(request)
+    if (connector) {
+      connector.rejectRequest({ id: request.id, error: { message: 'User rejected the requets.' } })
+      setRequests(requests.filter(r => r.id !== request.id))
+    }
+  }
+
+  const disconnect = () => {
+    if (connector) {
+      connector.killSession()
+      setUri('')
+    }
+  }
+
+  const onScan = (uri) => {
+    initWalletConnect(uri, /* reportOnError= */ false)
+  }
+
+  useEffect(() => {
+    if (!uri) {
+      return
+    }
+    initWalletConnect(uri)
+  }, [uri])
+
+  return (
+    <AnimatedSection>
+      {loading && (
+        <Row type='flex' justify='center' align='middle' style={{ minHeight: '100vh' }}>
+          <Spin size='large' />
+        </Row>)}
+      {!connected
+        ? (peerMeta && peerMeta.name
+            ? <PromptView peerMeta={peerMeta} approveSession={approveSession} rejectSession={rejectSession} />
+            : (
+              <>
+                <WalletSelector onAddressSelected={setSelectedAddress} filter={e => e.majorVersion >= 10} showOlderVersions={false} useHex={false} />
+                {/* If no camera or `uri` provided, do not show the qr scanner initially. */}
+                {(!isScanMode || !hasCamera) && (
+                  <>
+                    <InputBox margin='auto' width={440} value={uri} onChange={({ target: { value } }) => setUri(value)} placeholder='Paste wc: uri...' />
+                    {hasCamera && <Button onClick={() => setScanMode(true)}>Scan</Button>}
+                  </>)}
+                {selectedAddress.value && isScanMode && hasCamera && <QrCodeScanner shouldInit uploadBtnText='Upload QR Code Instead' onScan={onScan} />}
+              </>))
+        : (
+          <>
+            <Row type='flex' justify='center' align='middle'>
+              <Text>{selectedAddress.value}</Text>
+              <Button type='link' onClick={disconnect}>Disconnect</Button>
+            </Row>
+            <ConfigProvider renderEmpty={() => (
+              <Text>No pending requests for this wallet.</Text>
+            )}
+            >
+              <List
+                style={{ marginTop: '24px' }}
+                size='large'
+                bordered
+                dataSource={requests}
+                // TODO: customize item render based on request method type.
+                renderItem={item => (
+                  <List.Item
+                    actions={[<Button key='request-list-action-approve' onClick={() => approveRequest(item)}>Approve</Button>, <Button key='request-list-action-reject' onClick={() => rejectRequest(item)}>Reject</Button>]}
+                  >
+                    {item.method}
+                    {item.method === 'eth_sendTransaction' &&
+                      <Send
+                        address={selectedAddress.value} onSuccess={() => alert('a')}
+                        prefillAmount={10}
+                      />}
+                  </List.Item>)}
+              />
+            </ConfigProvider>
+          </>)}
+    </AnimatedSection>
+  )
+}
+
+export default WalletConnect

code/client/src/pages/Tools.jsx

@@ -240,6 +240,11 @@ const Tools = () => {
               <Button type='primary' shape='round' href='http://multisig.harmony.one' target='_blank'>Open Harmony MultiSig</Button>
               <Button type='primary' shape='round' onClick={() => openTool(Sections.SushiEncoder)}>SushiSwap Transaction Encoder</Button>
             </Space>
+            <Divider />
+            <Title level={3}>Auth</Title>
+            <Space wrap>
+              <Button type='primary' shape='round' href='/auth/walletconnect'>Wallet Connect</Button>
+            </Space>
             {dev &&
               <>
                 <Divider />

code/client/src/state/modules/cache/actions.js

@@ -7,6 +7,7 @@ const updateVersion = createAction('UPDATE_VERSION')
 const updateClientVersion = createAction('UPDATE_CLIENT_VERSION')
 const fetchGlobalStats = createAction('FETCH_GLOBAL_STATS')
 const updateGlobalStats = createAction('UPDATE_GLOBAL_STATS')
+const updateWalletConnectSession = createAction('UPDATE_WALLET_CONNECT_SESSION')
 
 export default {
   fetchCode,
@@ -16,5 +17,6 @@ export default {
   updateCode,
   clearCode,
   fetchGlobalStats,
-  updateGlobalStats
+  updateGlobalStats,
+  updateWalletConnectSession
 }

code/client/src/state/modules/cache/reducers.js

@@ -7,6 +7,7 @@ export const initialState = {
   version: {},
   clientVersion: '',
   needCodeUpdate: true,
+  walletConnectSession: null,
 }
 
 const reducer = handleActions(
@@ -43,6 +44,10 @@ const reducer = handleActions(
       ...state,
       global: { ...state.global, stats: action.payload }
     }),
+    [cacheActions.updateWalletConnectSession]: (state, action) => ({
+      ...state,
+      walletConnectSession: action.payload
+    }),
   },
   {
     ...initialState