git.iko.soy/bridge
on master help sign in
ux: WalletConnect login

- only supports Default HD Path for now - added @walletconnect deps - a few open questions to be discussed in PR conversation - how to handle session_update event - how to fix the BridgeForm behavior - input from design team on look and feel

commit0cd0df92fb5622b11faf57cd4820765b52a32e86 authortomholford <tomholford@users.noreply.github.com> dateMon 2 Aug 2021, 00:39 (5 years ago) parent08a6c15
9 files changed+873−15
compare with master
unifiedsplit
package-lock.json+430 package.json+2 src/lib/authToken.ts+71−15 src/lib/constants.ts+2 src/lib/types/BridgeWallet.ts+5 src/lib/types/WalletConnectWallet.ts+5 src/lib/useWalletConnect.ts+186 src/views/Login/Other.js+4 src/views/Login/WalletConnect.tsx+168
package-lock.json+430
@@ -8782,6 +8782,208 @@
87828782 "eslint-visitor-keys": "^2.0.0"
87838783 }
87848784 },
8785+ "@walletconnect/browser-utils": {
8786+ "version": "1.5.1",
8787+ "resolved": "https://registry.npmjs.org/@walletconnect/browser-utils/-/browser-utils-1.5.1.tgz",
8788+ "integrity": "sha512-pH5xnTaFvOsrxgLlazKqFhfiUE0zxmErgcrwV2B4vFKHLf3/j1MPxZmOpnqC/VsMAUNcJr2/xrrHu4O1Jy7rPg==",
8789+ "requires": {
8790+ "@walletconnect/safe-json": "1.0.0",
8791+ "@walletconnect/types": "^1.5.1",
8792+ "@walletconnect/window-getters": "1.0.0",
8793+ "@walletconnect/window-metadata": "1.0.0",
8794+ "detect-browser": "5.2.0"
8795+ }
8796+ },
8797+ "@walletconnect/client": {
8798+ "version": "1.5.1",
8799+ "resolved": "https://registry.npmjs.org/@walletconnect/client/-/client-1.5.1.tgz",
8800+ "integrity": "sha512-/NODRyToXmtNYfPZF3aPc9VGF1B8C6J+EmKtf4cKhAifir8S2XIWk7zLTHRm9DmSFuDF8hWQhTip14Bovp9WZw==",
8801+ "requires": {
8802+ "@walletconnect/core": "^1.5.1",
8803+ "@walletconnect/iso-crypto": "^1.5.1",
8804+ "@walletconnect/types": "^1.5.1",
8805+ "@walletconnect/utils": "^1.5.1"
8806+ }
8807+ },
8808+ "@walletconnect/core": {
8809+ "version": "1.5.1",
8810+ "resolved": "https://registry.npmjs.org/@walletconnect/core/-/core-1.5.1.tgz",
8811+ "integrity": "sha512-WGcZS+22395s70C0lAJyc6FnE3F362AZ4S85mGD8JRlRTDiVxZ+nbyaU+6GRLq3MJK2W65Ffw6gMmwniUdVrEw==",
8812+ "requires": {
8813+ "@walletconnect/socket-transport": "^1.5.1",
8814+ "@walletconnect/types": "^1.5.1",
8815+ "@walletconnect/utils": "^1.5.1"
8816+ }
8817+ },
8818+ "@walletconnect/crypto": {
8819+ "version": "1.0.0",
8820+ "resolved": "https://registry.npmjs.org/@walletconnect/crypto/-/crypto-1.0.0.tgz",
8821+ "integrity": "sha512-G2eQ7xD8q+8fDEtdULlLtGinmuqDTcG5oZ5xGaKkEqDEaHA56B1UV99GvISXbSHGCkFhPFWAokBK05AGQgzZeg==",
8822+ "requires": {
8823+ "@walletconnect/encoding": "^1.0.0",
8824+ "@walletconnect/environment": "^1.0.0",
8825+ "@walletconnect/randombytes": "^1.0.0",
8826+ "aes-js": "^3.1.2",
8827+ "hash.js": "^1.1.7"
8828+ },
8829+ "dependencies": {
8830+ "aes-js": {
8831+ "version": "3.1.2",
8832+ "resolved": "https://registry.npmjs.org/aes-js/-/aes-js-3.1.2.tgz",
8833+ "integrity": "sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ=="
8834+ }
8835+ }
8836+ },
8837+ "@walletconnect/encoding": {
8838+ "version": "1.0.0",
8839+ "resolved": "https://registry.npmjs.org/@walletconnect/encoding/-/encoding-1.0.0.tgz",
8840+ "integrity": "sha512-4nkJFnS0QF5JdieG/3VPD1/iEWkLSZ14EBInLZ00RWxmC6EMZrzAeHNAWIgm+xP3NK0lqz+7lEsmWGtcl5gYnQ==",
8841+ "requires": {
8842+ "is-typedarray": "1.0.0",
8843+ "typedarray-to-buffer": "3.1.5"
8844+ }
8845+ },
8846+ "@walletconnect/environment": {
8847+ "version": "1.0.0",
8848+ "resolved": "https://registry.npmjs.org/@walletconnect/environment/-/environment-1.0.0.tgz",
8849+ "integrity": "sha512-4BwqyWy6KpSvkocSaV7WR3BlZfrxLbJSLkg+j7Gl6pTDE+U55lLhJvQaMuDVazXYxcjBsG09k7UlH7cGiUI5vQ=="
8850+ },
8851+ "@walletconnect/iso-crypto": {
8852+ "version": "1.5.1",
8853+ "resolved": "https://registry.npmjs.org/@walletconnect/iso-crypto/-/iso-crypto-1.5.1.tgz",
8854+ "integrity": "sha512-OAak844/EBynQyg/TnoPCajkYw2rsVZOASAh+Bb7U7NMuyJ+xQ37RBLuL/a3BaGXS3t/mpJJ5RuHGzoU8USB+A==",
8855+ "requires": {
8856+ "@walletconnect/crypto": "^1.0.0",
8857+ "@walletconnect/types": "^1.5.1",
8858+ "@walletconnect/utils": "^1.5.1"
8859+ }
8860+ },
8861+ "@walletconnect/jsonrpc-types": {
8862+ "version": "1.0.0",
8863+ "resolved": "https://registry.npmjs.org/@walletconnect/jsonrpc-types/-/jsonrpc-types-1.0.0.tgz",
8864+ "integrity": "sha512-11QXNq5H1PKZk7bP8SxgmCw3HRaDuPOVE+wObqEvmhc7OWYUZqfuaaMb+OXGRSOHL3sbC+XHfdeCxFTMXSFyng==",
8865+ "requires": {
8866+ "keyvaluestorage-interface": "^1.0.0"
8867+ }
8868+ },
8869+ "@walletconnect/jsonrpc-utils": {
8870+ "version": "1.0.0",
8871+ "resolved": "https://registry.npmjs.org/@walletconnect/jsonrpc-utils/-/jsonrpc-utils-1.0.0.tgz",
8872+ "integrity": "sha512-qUHbKUK6sHeHn67qtHZoLoYk5hS6x1arTPjKDRkY93/6Fx+ZmNIpdm1owX3l6aYueyegJ7mz43FpvYHUqJ8xcw==",
8873+ "requires": {
8874+ "@walletconnect/environment": "^1.0.0",
8875+ "@walletconnect/jsonrpc-types": "^1.0.0"
8876+ }
8877+ },
8878+ "@walletconnect/mobile-registry": {
8879+ "version": "1.4.0",
8880+ "resolved": "https://registry.npmjs.org/@walletconnect/mobile-registry/-/mobile-registry-1.4.0.tgz",
8881+ "integrity": "sha512-ZtKRio4uCZ1JUF7LIdecmZt7FOLnX72RPSY7aUVu7mj7CSfxDwUn6gBuK6WGtH+NZCldBqDl5DenI5fFSvkKYw=="
8882+ },
8883+ "@walletconnect/qrcode-modal": {
8884+ "version": "1.5.1",
8885+ "resolved": "https://registry.npmjs.org/@walletconnect/qrcode-modal/-/qrcode-modal-1.5.1.tgz",
8886+ "integrity": "sha512-eu+CudCdfSRI8nCPGmzTQAFEF/BsqGf9wcE7fL9H8mv5Zpl86gbXKcBHekqr7fgnZ6wmkeDdRK7wLhHL3L6fpw==",
8887+ "requires": {
8888+ "@walletconnect/browser-utils": "^1.5.1",
8889+ "@walletconnect/mobile-registry": "^1.4.0",
8890+ "@walletconnect/types": "^1.5.1",
8891+ "copy-to-clipboard": "^3.3.1",
8892+ "preact": "10.4.1",
8893+ "qrcode": "1.4.4"
8894+ }
8895+ },
8896+ "@walletconnect/randombytes": {
8897+ "version": "1.0.0",
8898+ "resolved": "https://registry.npmjs.org/@walletconnect/randombytes/-/randombytes-1.0.0.tgz",
8899+ "integrity": "sha512-vP9HQIzz9PWH+ohQHqXeKZUbSivyTe3Le4c6oQPCExtw2P0ps4jKOyk4UGTxgcN2Rllj8ftPjiYQlQHKHXZuTA==",
8900+ "requires": {
8901+ "@walletconnect/encoding": "^1.0.0",
8902+ "@walletconnect/environment": "^1.0.0",
8903+ "randombytes": "^2.1.0"
8904+ }
8905+ },
8906+ "@walletconnect/safe-json": {
8907+ "version": "1.0.0",
8908+ "resolved": "https://registry.npmjs.org/@walletconnect/safe-json/-/safe-json-1.0.0.tgz",
8909+ "integrity": "sha512-QJzp/S/86sUAgWY6eh5MKYmSfZaRpIlmCJdi5uG4DJlKkZrHEF7ye7gA+VtbVzvTtpM/gRwO2plQuiooIeXjfg=="
8910+ },
8911+ "@walletconnect/socket-transport": {
8912+ "version": "1.5.1",
8913+ "resolved": "https://registry.npmjs.org/@walletconnect/socket-transport/-/socket-transport-1.5.1.tgz",
8914+ "integrity": "sha512-DSjXH539IvCdE2SRB94Jn270x9nJbNZmRRVwuY7KbGXaiU93qVD4QFl/O1+QLmrpdL/zA9L0mH8TWIP6PTGrHA==",
8915+ "requires": {
8916+ "@walletconnect/types": "^1.5.1",
8917+ "@walletconnect/utils": "^1.5.1",
8918+ "ws": "7.3.0"
8919+ },
8920+ "dependencies": {
8921+ "ws": {
8922+ "version": "7.3.0",
8923+ "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.0.tgz",
8924+ "integrity": "sha512-iFtXzngZVXPGgpTlP1rBqsUK82p9tKqsWRPg5L56egiljujJT3vGAYnHANvFxBieXrTFavhzhxW52jnaWV+w2w=="
8925+ }
8926+ }
8927+ },
8928+ "@walletconnect/types": {
8929+ "version": "1.5.1",
8930+ "resolved": "https://registry.npmjs.org/@walletconnect/types/-/types-1.5.1.tgz",
8931+ "integrity": "sha512-e3Tzy4NbNyM5yyLzKLNKRnMq4IZWjH0GsWQRNMl2WCSdssHPgSC4LQlxVtmMZt9NwceeGjmCZb4G25eD6hcbLA=="
8932+ },
8933+ "@walletconnect/utils": {
8934+ "version": "1.5.1",
8935+ "resolved": "https://registry.npmjs.org/@walletconnect/utils/-/utils-1.5.1.tgz",
8936+ "integrity": "sha512-ME6LvPCH2jB4sCCvtTJc+ztZY7mBCUT+FijDNH/RIU4KM7+E+fhEzRsNcJM3FPREVEJepaZJkjWPmEVnXp2mkA==",
8937+ "requires": {
8938+ "@walletconnect/browser-utils": "^1.5.1",
8939+ "@walletconnect/encoding": "^1.0.0",
8940+ "@walletconnect/jsonrpc-utils": "^1.0.0",
8941+ "@walletconnect/types": "^1.5.1",
8942+ "bn.js": "4.11.8",
8943+ "js-sha3": "0.8.0",
8944+ "query-string": "6.13.5"
8945+ },
8946+ "dependencies": {
8947+ "bn.js": {
8948+ "version": "4.11.8",
8949+ "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",
8950+ "integrity": "sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA=="
8951+ },
8952+ "js-sha3": {
8953+ "version": "0.8.0",
8954+ "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
8955+ "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
8956+ },
8957+ "query-string": {
8958+ "version": "6.13.5",
8959+ "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.13.5.tgz",
8960+ "integrity": "sha512-svk3xg9qHR39P3JlHuD7g3nRnyay5mHbrPctEBDUxUkHRifPHXJDhBUycdCC0NBjXoDf44Gb+IsOZL1Uwn8M/Q==",
8961+ "requires": {
8962+ "decode-uri-component": "^0.2.0",
8963+ "split-on-first": "^1.0.0",
8964+ "strict-uri-encode": "^2.0.0"
8965+ }
8966+ },
8967+ "strict-uri-encode": {
8968+ "version": "2.0.0",
8969+ "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
8970+ "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
8971+ }
8972+ }
8973+ },
8974+ "@walletconnect/window-getters": {
8975+ "version": "1.0.0",
8976+ "resolved": "https://registry.npmjs.org/@walletconnect/window-getters/-/window-getters-1.0.0.tgz",
8977+ "integrity": "sha512-xB0SQsLaleIYIkSsl43vm8EwETpBzJ2gnzk7e0wMF3ktqiTGS6TFHxcprMl5R44KKh4tCcHCJwolMCaDSwtAaA=="
8978+ },
8979+ "@walletconnect/window-metadata": {
8980+ "version": "1.0.0",
8981+ "resolved": "https://registry.npmjs.org/@walletconnect/window-metadata/-/window-metadata-1.0.0.tgz",
8982+ "integrity": "sha512-9eFvmJxIKCC3YWOL97SgRkKhlyGXkrHwamfechmqszbypFspaSk+t2jQXAEU7YClHF6Qjw5eYOmy1//zFi9/GA==",
8983+ "requires": {
8984+ "@walletconnect/window-getters": "^1.0.0"
8985+ }
8986+ },
87858987 "@webassemblyjs/ast": {
87868988 "version": "1.9.0",
87878989 "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
@@ -11508,12 +11710,31 @@
1150811710 "ieee754": "^1.1.13"
1150911711 }
1151011712 },
11713+ "buffer-alloc": {
11714+ "version": "1.2.0",
11715+ "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
11716+ "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
11717+ "requires": {
11718+ "buffer-alloc-unsafe": "^1.1.0",
11719+ "buffer-fill": "^1.0.0"
11720+ }
11721+ },
11722+ "buffer-alloc-unsafe": {
11723+ "version": "1.1.0",
11724+ "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
11725+ "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg=="
11726+ },
1151111727 "buffer-compare": {
1151211728 "version": "1.1.1",
1151311729 "resolved": "https://registry.npmjs.org/buffer-compare/-/buffer-compare-1.1.1.tgz",
1151411730 "integrity": "sha1-W+e+hTr4kZjR9N3AkNHWakiu9ZY=",
1151511731 "optional": true
1151611732 },
11733+ "buffer-fill": {
11734+ "version": "1.0.0",
11735+ "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
11736+ "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw="
11737+ },
1151711738 "buffer-from": {
1151811739 "version": "1.1.0",
1151911740 "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.0.tgz",
@@ -13508,6 +13729,11 @@
1350813729 "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
1350913730 "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
1351013731 },
13732+ "detect-browser": {
13733+ "version": "5.2.0",
13734+ "resolved": "https://registry.npmjs.org/detect-browser/-/detect-browser-5.2.0.tgz",
13735+ "integrity": "sha512-tr7XntDAu50BVENgQfajMLzacmSe34D+qZc4zjnniz0ZVuw/TZcLcyxHQjYpJTM36sGEkZZlYLnIM1hH7alTMA=="
13736+ },
1351113737 "detect-indent": {
1351213738 "version": "4.0.0",
1351313739 "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz",
@@ -13571,6 +13797,11 @@
1357113797 "randombytes": "^2.0.0"
1357213798 }
1357313799 },
13800+ "dijkstrajs": {
13801+ "version": "1.0.2",
13802+ "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.2.tgz",
13803+ "integrity": "sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg=="
13804+ },
1357413805 "dir-glob": {
1357513806 "version": "3.0.1",
1357613807 "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -22707,6 +22938,11 @@
2270722938 "json-buffer": "3.0.0"
2270822939 }
2270922940 },
22941+ "keyvaluestorage-interface": {
22942+ "version": "1.0.0",
22943+ "resolved": "https://registry.npmjs.org/keyvaluestorage-interface/-/keyvaluestorage-interface-1.0.0.tgz",
22944+ "integrity": "sha512-8t6Q3TclQ4uZynJY9IGr2+SsIGwK9JHcO6ootkHCGA0CrQCRy+VkouYNO2xicET6b9al7QKzpebNow+gkpCL8g=="
22945+ },
2271022946 "killable": {
2271122947 "version": "1.0.1",
2271222948 "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -26371,6 +26607,11 @@
2637126607 "integrity": "sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==",
2637226608 "optional": true
2637326609 },
26610+ "pngjs": {
26611+ "version": "3.4.0",
26612+ "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
26613+ "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w=="
26614+ },
2637426615 "pnglib": {
2637526616 "version": "0.0.1",
2637626617 "resolved": "https://registry.npmjs.org/pnglib/-/pnglib-0.0.1.tgz",
@@ -28044,6 +28285,11 @@
2804428285 }
2804528286 }
2804628287 },
28288+ "preact": {
28289+ "version": "10.4.1",
28290+ "resolved": "https://registry.npmjs.org/preact/-/preact-10.4.1.tgz",
28291+ "integrity": "sha512-WKrRpCSwL2t3tpOOGhf2WfTpcmbpxaWtDbdJdKdjd0aEiTkvOmS4NBkG6kzlaAHI9AkQ3iVqbFWM3Ei7mZ4o1Q=="
28292+ },
2804728293 "prelude-ls": {
2804828294 "version": "1.1.2",
2804928295 "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -28322,6 +28568,185 @@
2832228568 "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
2832328569 "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
2832428570 },
28571+ "qrcode": {
28572+ "version": "1.4.4",
28573+ "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.4.4.tgz",
28574+ "integrity": "sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q==",
28575+ "requires": {
28576+ "buffer": "^5.4.3",
28577+ "buffer-alloc": "^1.2.0",
28578+ "buffer-from": "^1.1.1",
28579+ "dijkstrajs": "^1.0.1",
28580+ "isarray": "^2.0.1",
28581+ "pngjs": "^3.3.0",
28582+ "yargs": "^13.2.4"
28583+ },
28584+ "dependencies": {
28585+ "ansi-regex": {
28586+ "version": "4.1.0",
28587+ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
28588+ "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
28589+ },
28590+ "ansi-styles": {
28591+ "version": "3.2.1",
28592+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
28593+ "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
28594+ "requires": {
28595+ "color-convert": "^1.9.0"
28596+ }
28597+ },
28598+ "buffer-from": {
28599+ "version": "1.1.1",
28600+ "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
28601+ "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
28602+ },
28603+ "camelcase": {
28604+ "version": "5.3.1",
28605+ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
28606+ "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
28607+ },
28608+ "cliui": {
28609+ "version": "5.0.0",
28610+ "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
28611+ "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
28612+ "requires": {
28613+ "string-width": "^3.1.0",
28614+ "strip-ansi": "^5.2.0",
28615+ "wrap-ansi": "^5.1.0"
28616+ }
28617+ },
28618+ "color-convert": {
28619+ "version": "1.9.3",
28620+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
28621+ "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
28622+ "requires": {
28623+ "color-name": "1.1.3"
28624+ }
28625+ },
28626+ "color-name": {
28627+ "version": "1.1.3",
28628+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
28629+ "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
28630+ },
28631+ "emoji-regex": {
28632+ "version": "7.0.3",
28633+ "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
28634+ "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
28635+ },
28636+ "find-up": {
28637+ "version": "3.0.0",
28638+ "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
28639+ "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
28640+ "requires": {
28641+ "locate-path": "^3.0.0"
28642+ }
28643+ },
28644+ "is-fullwidth-code-point": {
28645+ "version": "2.0.0",
28646+ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
28647+ "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
28648+ },
28649+ "isarray": {
28650+ "version": "2.0.5",
28651+ "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
28652+ "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
28653+ },
28654+ "locate-path": {
28655+ "version": "3.0.0",
28656+ "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
28657+ "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
28658+ "requires": {
28659+ "p-locate": "^3.0.0",
28660+ "path-exists": "^3.0.0"
28661+ }
28662+ },
28663+ "p-limit": {
28664+ "version": "2.3.0",
28665+ "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
28666+ "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
28667+ "requires": {
28668+ "p-try": "^2.0.0"
28669+ }
28670+ },
28671+ "p-locate": {
28672+ "version": "3.0.0",
28673+ "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
28674+ "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
28675+ "requires": {
28676+ "p-limit": "^2.0.0"
28677+ }
28678+ },
28679+ "p-try": {
28680+ "version": "2.2.0",
28681+ "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
28682+ "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
28683+ },
28684+ "require-main-filename": {
28685+ "version": "2.0.0",
28686+ "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
28687+ "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
28688+ },
28689+ "string-width": {
28690+ "version": "3.1.0",
28691+ "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
28692+ "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
28693+ "requires": {
28694+ "emoji-regex": "^7.0.1",
28695+ "is-fullwidth-code-point": "^2.0.0",
28696+ "strip-ansi": "^5.1.0"
28697+ }
28698+ },
28699+ "strip-ansi": {
28700+ "version": "5.2.0",
28701+ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
28702+ "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
28703+ "requires": {
28704+ "ansi-regex": "^4.1.0"
28705+ }
28706+ },
28707+ "wrap-ansi": {
28708+ "version": "5.1.0",
28709+ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
28710+ "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
28711+ "requires": {
28712+ "ansi-styles": "^3.2.0",
28713+ "string-width": "^3.0.0",
28714+ "strip-ansi": "^5.0.0"
28715+ }
28716+ },
28717+ "y18n": {
28718+ "version": "4.0.3",
28719+ "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
28720+ "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
28721+ },
28722+ "yargs": {
28723+ "version": "13.3.2",
28724+ "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
28725+ "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
28726+ "requires": {
28727+ "cliui": "^5.0.0",
28728+ "find-up": "^3.0.0",
28729+ "get-caller-file": "^2.0.1",
28730+ "require-directory": "^2.1.1",
28731+ "require-main-filename": "^2.0.0",
28732+ "set-blocking": "^2.0.0",
28733+ "string-width": "^3.0.0",
28734+ "which-module": "^2.0.0",
28735+ "y18n": "^4.0.0",
28736+ "yargs-parser": "^13.1.2"
28737+ }
28738+ },
28739+ "yargs-parser": {
28740+ "version": "13.1.2",
28741+ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
28742+ "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
28743+ "requires": {
28744+ "camelcase": "^5.0.0",
28745+ "decamelize": "^1.2.0"
28746+ }
28747+ }
28748+ }
28749+ },
2832528750 "qs": {
2832628751 "version": "6.7.0",
2832728752 "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
@@ -31790,6 +32215,11 @@
3179032215 }
3179132216 }
3179232217 },
32218+ "split-on-first": {
32219+ "version": "1.1.0",
32220+ "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
32221+ "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
32222+ },
3179332223 "split-string": {
3179432224 "version": "3.1.0",
3179532225 "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
package.json+2
@@ -31,6 +31,8 @@
3131 "@types/styled-components": "^5.1.10",
3232 "@types/styled-system": "^5.1.11",
3333 "@types/styled-system__css": "^5.0.15",
34+ "@walletconnect/client": "^1.5.1",
35+ "@walletconnect/qrcode-modal": "^1.5.1",
3436 "@welldone-software/why-did-you-render": "^3.2.3",
3537 "async-retry": "^1.2.3",
3638 "azimuth-js": "^0.22.1",
src/lib/authToken.ts+71−15
@@ -1,9 +1,12 @@
11import { crypto } from 'bitcoinjs-lib';
22import { ecdsaSign } from 'secp256k1';
3+import Web3 from 'web3';
4+import WalletConnect from '@walletconnect/client';
35
46import { WALLET_TYPES } from './constants';
57import { ledgerSignMessage } from './ledger';
68import { trezorSignMessage } from './trezor';
9+import BridgeWallet from './types/BridgeWallet';
710
811const MESSAGE = 'Bridge Authentication Token';
912
@@ -22,25 +25,78 @@ function signMessage(privateKey: Buffer) {
2225 return ethSignature;
2326}
2427
25−export const getAuthToken = async ({
26− wallet,
27− walletType,
28− walletHdPath,
29− web3,
30−}) => {
31− if (walletType === WALLET_TYPES.METAMASK) {
32− return web3.eth.personal.sign(MESSAGE, wallet.address, '');
33− }
34− if (walletType === WALLET_TYPES.LEDGER) {
35− return ledgerSignMessage(MESSAGE, walletHdPath);
36− }
37− if (walletType === WALLET_TYPES.TREZOR) {
38− return trezorSignMessage(MESSAGE, walletHdPath);
39− }
28+type MetamaskAuthTokenArgs = {
29+ address: string;
30+ web3: Web3;
31+ walletType: symbol;
32+};
33+
34+type LedgerAuthTokenArgs = {
35+ walletHdPath: string;
36+ walletType: symbol;
37+};
38+
39+type TrezorAuthTokenArgs = LedgerAuthTokenArgs;
40+
41+type WalletConnectAuthTokenArgs = {
42+ address: string;
43+ connector: WalletConnect;
44+ walletType: symbol;
45+};
46+
47+type DefaultAuthTokenArgs = {
48+ wallet: BridgeWallet;
49+ walletType?: symbol;
50+};
51+
52+type GetAuthTokenArgs =
53+ | MetamaskAuthTokenArgs
54+ | LedgerAuthTokenArgs
55+ | TrezorAuthTokenArgs
56+ | WalletConnectAuthTokenArgs
57+ | DefaultAuthTokenArgs;
4058
59+const getMetamaskAuthToken = ({ address, web3 }: MetamaskAuthTokenArgs) => {
60+ return web3.eth.personal.sign(MESSAGE, address, '');
61+};
62+
63+const getLedgerAuthToken = ({ walletHdPath }: LedgerAuthTokenArgs) => {
64+ return ledgerSignMessage(MESSAGE, walletHdPath);
65+};
66+
67+const getTrezorAuthToken = ({ walletHdPath }: TrezorAuthTokenArgs) => {
68+ return trezorSignMessage(MESSAGE, walletHdPath);
69+};
70+
71+const getWalletConnectAuthToken = ({
72+ address,
73+ connector,
74+}: WalletConnectAuthTokenArgs) => {
75+ return connector.signPersonalMessage([MESSAGE, address]);
76+};
77+
78+const getDefaultAuthToken = ({ wallet }: DefaultAuthTokenArgs) => {
4179 const signature = signMessage(wallet.privateKey);
4280
4381 const token = `0x${Buffer.from(signature).toString('hex')}`;
4482
4583 return token;
4684};
85+
86+export const getAuthToken = async ({
87+ walletType,
88+ ...args
89+}: GetAuthTokenArgs) => {
90+ switch (walletType) {
91+ case WALLET_TYPES.METAMASK:
92+ return getMetamaskAuthToken(args);
93+ case WALLET_TYPES.LEDGER:
94+ return getLedgerAuthToken(args);
95+ case WALLET_TYPES.TREZOR:
96+ return getTrezorAuthToken(args);
97+ case WALLET_TYPES.WALLET_CONNECT:
98+ return getWalletConnectAuthToken(args);
99+ default:
100+ return getDefaultAuthToken(args);
101+ }
102+};
src/lib/constants.ts+2
@@ -87,12 +87,14 @@ const WALLET_TYPES = {
8787 PRIVATE_KEY: Symbol('PRIVATE_KEY'),
8888 KEYSTORE: Symbol('KEYSTORE'),
8989 METAMASK: Symbol('METAMASK'),
90+ WALLET_CONNECT: Symbol('WALLET_CONNECT'),
9091};
9192
9293const NONCUSTODIAL_WALLETS = new Set([
9394 WALLET_TYPES.METAMASK,
9495 WALLET_TYPES.TREZOR,
9596 WALLET_TYPES.LEDGER,
97+ WALLET_TYPES.WALLET_CONNECT,
9698]);
9799
98100export {
src/lib/types/BridgeWallet.tsnew file+5
@@ -0,0 +1,5 @@
1+import { BIP32Interface } from 'bitcoinjs-lib';
2+
3+export default interface BridgeWallet extends BIP32Interface {
4+ address: string;
5+}
src/lib/types/WalletConnectWallet.tsnew file+5
@@ -0,0 +1,5 @@
1+type WalletConnectWallet = {
2+ address: string;
3+};
4+
5+export default WalletConnectWallet;
src/lib/useWalletConnect.tsnew file+186
@@ -0,0 +1,186 @@
1+import WalletConnect from '@walletconnect/client';
2+import QRCodeModal from '@walletconnect/qrcode-modal';
3+import { useEffect, useState } from 'react';
4+import { Just } from 'folktale/maybe';
5+
6+import { useWallet } from 'store/wallet';
7+import { getAuthToken } from './authToken';
8+import { DEFAULT_HD_PATH, WALLET_TYPES } from './constants';
9+import WalletConnectWallet from './types/WalletConnectWallet';
10+
11+type PeerMeta = {
12+ description: string;
13+ icons: string[];
14+ name: string;
15+ url: string;
16+};
17+
18+type ConnectEvent = {
19+ event: 'connect';
20+ params: [
21+ {
22+ accounts: string[];
23+ chainId: number;
24+ peerId: string;
25+ peerMeta: PeerMeta;
26+ }
27+ ];
28+};
29+
30+export const useWalletConnect = () => {
31+ const { setWallet, setWalletHdPath, setAuthToken, resetWallet } = useWallet();
32+ const [connector, setConnector] = useState<WalletConnect | null>(null);
33+ const [address, setAddress] = useState<string | null>(null);
34+ const [peerMeta, setPeerMeta] = useState<PeerMeta | null>(null);
35+
36+ // Init connector
37+ useEffect(() => {
38+ const newConnector = new WalletConnect({
39+ bridge: 'https://bridge.walletconnect.org',
40+ qrcodeModal: QRCodeModal,
41+ });
42+
43+ setConnector(newConnector);
44+
45+ // restore state from cached connection
46+ if (newConnector.accounts.length > 0) {
47+ setAddress(newConnector.accounts[0]);
48+ }
49+
50+ if (newConnector.peerMeta) {
51+ setPeerMeta(newConnector.peerMeta);
52+ }
53+ // eslint-disable-next-line react-hooks/exhaustive-deps
54+ }, []);
55+
56+ // Behavior
57+ const connect = () => {
58+ if (!connector || connector.connected) {
59+ return;
60+ }
61+
62+ connector.createSession();
63+ };
64+
65+ const disconnect = () => {
66+ if (!connector) {
67+ console.warn('Nothing to disconnect');
68+ return;
69+ }
70+
71+ connector.killSession();
72+ };
73+
74+ type AuthenticateArgs = {
75+ hdPath?: string;
76+ };
77+
78+ const authenticate = async ({
79+ hdPath = DEFAULT_HD_PATH,
80+ }: AuthenticateArgs) => {
81+ if (!(address && connector)) {
82+ return;
83+ }
84+
85+ const authToken = await getAuthToken({
86+ address,
87+ connector,
88+ walletType: WALLET_TYPES.WALLET_CONNECT,
89+ });
90+
91+ // Inspired by the MetamaskWallet implementation :)
92+ // TODO: We should refactor / unify how we handle wallets
93+ const wallet: WalletConnectWallet = {
94+ address,
95+ };
96+
97+ setAuthToken(Just(authToken));
98+ setWallet(Just(wallet));
99+ setWalletHdPath(hdPath);
100+ };
101+
102+ const isConnected = () => {
103+ if (!connector) {
104+ return false;
105+ }
106+
107+ return connector.connected;
108+ };
109+
110+ const initConnectHandler = () => {
111+ if (!connector) {
112+ return;
113+ }
114+
115+ connector.on('connect', async (error, payload: ConnectEvent) => {
116+ if (error) {
117+ throw error;
118+ }
119+
120+ const address = payload.params[0].accounts[0];
121+ setAddress(address);
122+ setPeerMeta(payload.params[0].peerMeta);
123+ });
124+ };
125+
126+ const initDisconnectHandler = () => {
127+ if (!connector) {
128+ return;
129+ }
130+
131+ connector.on('disconnect', (error, _payload) => {
132+ if (error) {
133+ throw error;
134+ }
135+
136+ setAddress(null);
137+ setPeerMeta(null);
138+ resetWallet();
139+ });
140+ };
141+
142+ const initSessionUpdateHandler = () => {
143+ if (!connector) {
144+ return;
145+ }
146+
147+ connector.on('session_update', (error, payload) => {
148+ if (error) {
149+ throw error;
150+ }
151+
152+ // TODO: Confirm what should happen on update?
153+ // For now, disconnect and logout
154+ disconnect();
155+ });
156+ };
157+
158+ // Init and clean up
159+ useEffect(() => {
160+ if (!connector) {
161+ return;
162+ }
163+
164+ initConnectHandler();
165+ initDisconnectHandler();
166+ initSessionUpdateHandler();
167+
168+ return () => {
169+ // Clean up listeners
170+ connector.off('connect');
171+ connector.off('disconnect');
172+ connector.off('session_update');
173+ };
174+ // eslint-disable-next-line react-hooks/exhaustive-deps
175+ }, [connector]);
176+
177+ return {
178+ address,
179+ authenticate,
180+ connect,
181+ connector,
182+ disconnect,
183+ isConnected,
184+ peerMeta,
185+ };
186+};
src/views/Login/Other.js+4
@@ -11,6 +11,7 @@ import Ledger from './Ledger';
1111import Metamask from './Metamask';
1212import Trezor from './Trezor';
1313import Mnemonic from './Mnemonic';
14+import WalletConnect from './WalletConnect';
1415
1516const NAMES = {
1617 PRIVATE_KEY: 'PRIVATE_KEY',
@@ -19,6 +20,7 @@ const NAMES = {
1920 TREZOR: 'TREZOR',
2021 METAMASK: 'METAMASK',
2122 MNEMONIC: 'MNEMONIC',
23+ WALLET_CONNECT: 'WALLET_CONNECT',
2224};
2325
2426const VIEWS = {
@@ -28,6 +30,7 @@ const VIEWS = {
2830 [NAMES.TREZOR]: Trezor,
2931 [NAMES.METAMASK]: Metamask,
3032 [NAMES.MNEMONIC]: Mnemonic,
33+ [NAMES.WALLET_CONNECT]: WalletConnect,
3134};
3235
3336const OPTIONS = [
@@ -37,6 +40,7 @@ const OPTIONS = [
3740 { text: 'Trezor', value: NAMES.TREZOR },
3841 { text: 'Ethereum Private Key', value: NAMES.PRIVATE_KEY },
3942 { text: 'Ethereum Keystore', value: NAMES.KEYSTORE },
43+ { text: 'WalletConnect', value: NAMES.WALLET_CONNECT },
4044];
4145
4246const isHardware = name => !![NAMES.TREZOR, NAMES.LEDGER].find(n => n === name);
src/views/Login/WalletConnect.tsxnew file+168
@@ -0,0 +1,168 @@
1+import { useCallback, useMemo } from 'react';
2+import { Image } from '@tlon/indigo-react';
3+import BridgeForm from 'form/BridgeForm';
4+import Condition from 'form/Condition';
5+import FormError from 'form/FormError';
6+import { HdPathInput } from 'form/Inputs';
7+import SubmitButton from 'form/SubmitButton';
8+import {
9+ buildCheckboxValidator,
10+ buildHdPathValidator,
11+ composeValidator,
12+} from 'form/validators';
13+import { CheckboxInput, Grid, Text as LegacyText } from 'indigo-react';
14+import { DEFAULT_HD_PATH, WALLET_TYPES } from 'lib/constants';
15+import useLoginView from 'lib/useLoginView';
16+import { useWalletConnect } from 'lib/useWalletConnect';
17+import { abbreviateAddress } from 'lib/utils/address';
18+import { ForwardButton, RestartButton } from 'components/Buttons';
19+
20+const WalletConnectLogin = ({ className, goHome }) => {
21+ useLoginView(WALLET_TYPES.WALLET_CONNECT);
22+
23+ const {
24+ address,
25+ authenticate,
26+ connect,
27+ connector,
28+ disconnect,
29+ isConnected,
30+ peerMeta,
31+ } = useWalletConnect();
32+
33+ const handleConnectButtonClick = () => {
34+ if (isConnected()) {
35+ disconnect();
36+ } else {
37+ connect();
38+ }
39+ };
40+
41+ const initialValues = useMemo(
42+ () => ({
43+ useCustomPath: false,
44+ hdPath: DEFAULT_HD_PATH,
45+ }),
46+ []
47+ );
48+
49+ const validate = useMemo(
50+ () =>
51+ composeValidator({
52+ useCustomPath: buildCheckboxValidator(),
53+ hdPath: buildHdPathValidator(),
54+ }),
55+ []
56+ );
57+
58+ const onValues = useCallback(({ valid, values, form }) => {
59+ if (!valid) {
60+ return;
61+ }
62+
63+ if (!values.useCustomPath) {
64+ form.change('hdPath', DEFAULT_HD_PATH);
65+ }
66+ }, []);
67+
68+ const onSubmit = async (values: typeof initialValues) => {
69+ await authenticate({ hdPath: values.hdPath });
70+ return;
71+ };
72+
73+ return (
74+ connector && (
75+ <>
76+ <Grid className={className}>
77+ {!isConnected() && (
78+ <Grid.Item full as={LegacyText} className="f6 gray4 mb3">
79+ Connect a peer that supports WalletConnect
80+ </Grid.Item>
81+ )}
82+
83+ {isConnected() && peerMeta && (
84+ <Grid.Item full className="f6 gray5 mt3 mb3">
85+ <Grid>
86+ <Grid.Item style={{ gridArea: 'auto / 3 / auto / 5' }}>
87+ {peerMeta.icons.length > 0 ? (
88+ <Image src={peerMeta.icons[0]} />
89+ ) : (
90+ <LegacyText>Icon Unavailable</LegacyText>
91+ )}
92+ </Grid.Item>
93+ <Grid.Item
94+ className={'flex-col align-center justify-center'}
95+ style={{ gridArea: 'auto / 6 / auto / 11' }}>
96+ <LegacyText as="div">{peerMeta.name}</LegacyText>
97+ <LegacyText as="div">
98+ {address ? abbreviateAddress(address) : null}
99+ </LegacyText>
100+ <RestartButton
101+ as="a"
102+ className={'gray3'}
103+ onClick={handleConnectButtonClick}>
104+ disconnect
105+ </RestartButton>
106+ </Grid.Item>
107+ </Grid>
108+ </Grid.Item>
109+ )}
110+
111+ <BridgeForm
112+ validate={validate}
113+ onSubmit={onSubmit}
114+ onValues={onValues}
115+ afterSubmit={goHome}
116+ initialValues={initialValues}>
117+ {({ handleSubmit, submitting }) => (
118+ <>
119+ {isConnected() ? (
120+ <>
121+ <Grid.Item
122+ full
123+ as={CheckboxInput}
124+ className="mv3"
125+ name="useCustomPath"
126+ label="Custom HD Path"
127+ />
128+
129+ <Condition when="useCustomPath" is={true}>
130+ <Grid.Item
131+ full
132+ as={HdPathInput}
133+ name="hdPath"
134+ label="HD Path"
135+ />
136+ </Condition>
137+
138+ <Grid.Item full as={FormError} />
139+
140+ <Grid.Item
141+ full
142+ as={SubmitButton}
143+ handleSubmit={handleSubmit}>
144+ {submitting
145+ ? 'Please check your WalletConnect peer'
146+ : 'Authenticate'}
147+ </Grid.Item>
148+ </>
149+ ) : (
150+ <>
151+ <Grid.Item
152+ full
153+ as={ForwardButton}
154+ onClick={handleConnectButtonClick}>
155+ {'Connect'}
156+ </Grid.Item>
157+ </>
158+ )}
159+ </>
160+ )}
161+ </BridgeForm>
162+ </Grid>
163+ </>
164+ )
165+ );
166+};
167+
168+export default WalletConnectLogin;