Merge pull request #243 from polymorpher/taoalpha/walletconnect

Support Wallet Connect
polymorpher · Jan 2, 2024 · e30f6f8 · e30f6f8
2 parents 67ed087 + 7506ab7
commit e30f6f8
Show file tree

Hide file tree

Showing 28 changed files with 5,692 additions and 8,089 deletions.
diff --git a/.idea/compiler.xml b/.idea/compiler.xml
diff --git a/code/client/assets/wc.png b/code/client/assets/wc.png
diff --git a/code/client/package.json b/code/client/package.json
@@ -24,15 +24,15 @@
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.13.15",
     "@babel/preset-react": "^7.13.13",
-    "@babel/runtime": "^7.14.0",
-    "@svgr/webpack": "^6.2.1",
+    "@babel/runtime": "^7.23.6",
+    "@svgr/webpack": "^8.1.0",
     "@truffle/contract": "^4.3.43",
     "@truffle/debug-utils": "github:polymorpher/truffle-debug-utils",
     "babel-loader": "^8.2.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-preset-react": "^6.24.1",
     "base64-loader": "^1.0.0",
-    "copy-webpack-plugin": "^9.0.1",
+    "copy-webpack-plugin": "^11.0.0",
     "core-js": "^3.13.0",
     "css-loader": "^5.2.6",
     "eslint": "^7.26.0",
@@ -45,21 +45,20 @@
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-truffle": "^0.3.1",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.3.1",
-    "less": "^4.1.1",
-    "less-loader": "^9.1.0",
+    "html-webpack-plugin": "^5.6.0",
+    "less": "^4.2.0",
+    "less-loader": "^11.1.4",
     "mini-css-extract-plugin": "^1.6.0",
     "react-player": "^2.9.0",
     "sass": "^1.34.1",
     "sass-loader": "^12.0.0",
     "style-loader": "^2.0.0",
     "tslib": "^2.3.0",
-    "webpack": "^5.33.2",
+    "webpack": "^5.89.0",
     "webpack-bundle-analyzer": "^3.6.1",
-    "webpack-cli": "4.8.0",
-    "webpack-dev-server": "^4.0.0",
-    "webpack-obfuscator": "^0.27.4"
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-obfuscator": "^3.5.1"
   },
   "browserslist": {
     "production": [
@@ -75,13 +74,15 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
+    "@babel/helper-string-parser": "^7.23.4",
     "@harmony-js/core": "^0.1.57",
     "@harmony-js/crypto": "^0.1.56",
     "@reduxjs/toolkit": "^1.6.0",
     "@sentry/browser": "^6.8.0",
     "@sentry/react": "^6.8.0",
     "@sentry/tracing": "^6.8.0",
     "@transak/transak-sdk": "^1.0.31",
+    "@walletconnect/web3wallet": "^1.10.0",
     "antd": "4.17.0",
     "axios": "^0.21.1",
     "bn.js": "^5.2.0",
@@ -116,10 +117,13 @@
     "svg-country-flags": "^1.2.10",
     "title-case": "^3.0.3",
     "unique-names-generator": "^4.5.0",
-    "uuid": "^8.3.2",
-    "web3": "^1.6.1"
+    "uuid": "^8.3.2"
   },
   "resolutions": {
-    "tar": ">=4.4.15"
+    "tar": ">=4.4.15",
+    "web3": "^4.3.0",
+    "web3-eth-abi": "^4.1.4",
+    "web3-eth-contract": "^4.1.4",
+    "web3-utils": "^4.1.0"
   }
 }
diff --git a/code/client/src/app.less b/code/client/src/app.less
@@ -1,5 +1,6 @@
 // https://ant.design/docs/react/customize-theme-variable
 // This relies on css variables: https://caniuse.com/css-variables
+
 @import 'antd/dist/antd.variable.min.css';
 
 @import './styles/ant.less'; // some overrides on ant styles from v1 ui

diff --git a/code/client/src/components/QrCodeScanner.jsx b/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>
     </>

diff --git a/code/client/src/components/SiderMenu.jsx b/code/client/src/components/SiderMenu.jsx
@@ -4,7 +4,6 @@ import Layout from 'antd/es/layout'
 import Image from 'antd/es/image'
 import Row from 'antd/es/row'
 import Menu from 'antd/es/menu'
-import Typography from 'antd/es/typography'
 import PlusCircleOutlined from '@ant-design/icons/PlusCircleOutlined'
 import UnorderedListOutlined from '@ant-design/icons/UnorderedListOutlined'
 import HistoryOutlined from '@ant-design/icons/HistoryOutlined'
@@ -23,24 +22,12 @@ import StakeIcon from '../assets/icons/stake.svg?el'
 import RestoreIcon from '../assets/icons/restore.svg?el'
 import config from '../config'
 import Paths from '../constants/paths'
-import styled from 'styled-components'
 import util, { useWindowDimensions } from '../util'
 import { useDispatch, useSelector } from 'react-redux'
 import { useTheme, getColorPalette } from '../theme'
 import { StatsInfo, LineDivider } from './StatsInfo'
 import { globalActions } from '../state/modules/global'
-const { Link } = Typography
-
-const SiderLink = styled(Link).attrs((e) => ({
-  ...e,
-  style: { ...e.style },
-  target: '_blank',
-  rel: 'noopener noreferrer'
-}))`
-  &:hover {
-    opacity: 0.8;
-  }
-`
+import { SiderLink } from './Text'
 
 const mobileMenuItemStyle = {
   padding: '0 10px',

diff --git a/code/client/src/components/Text.jsx b/code/client/src/components/Text.jsx
@@ -35,7 +35,7 @@ export const InputBox = styled(Input).attrs(({ $num, $decimal, type, autoComplet
   margin-bottom: ${props => props.$marginBottom || props.margin || '32px'};
   border: none;
   border-bottom: 1px dashed black;
-  font-size: 16px;
+  font-size: ${props => props.$fontSize || '16px'};
   &:hover{
     border-bottom: 1px dashed black;
   }
@@ -123,3 +123,14 @@ export const LabeledRow = ({ label, doubleRow = false, ultrawide = false, isMobi
     </AverageRow>
   )
 }
+
+export const SiderLink = styled(Link).attrs((e) => ({
+  ...e,
+  style: { ...e.style },
+  target: '_blank',
+  rel: 'noopener noreferrer'
+}))`
+  &:hover {
+    opacity: 0.8;
+  }
+`
diff --git a/code/client/src/config.js b/code/client/src/config.js
@@ -42,4 +42,6 @@ const config = mergeAll({}, baseConfig, {
   scanDelay: 250,
 })
 
+export const WalletConnectId = process.env.WALLET_CONNECT_ID || ''
+
 export default config
diff --git a/code/client/src/integration/WalletAuth.jsx b/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,11 @@ const WalletAuth = () => {
     }
   }, [network])
 
+  if (action === 'walletconnect') {
+    return <WalletConnect wcSesssionUri={wc} />
+    // return <></>
+  }
+
   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 (