web: Implement Neon qr-code connection, closes #194

Signed-off-by: Mikhail Petrov <[email protected]>
nspcc-dev · Apr 15, 2024 · a52ab06 · a52ab06
1 parent 0c905eb
commit a52ab06
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "react-bulma-components": "^4.1.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^17.0.2",
+    "react-qr-code": "^2.0.12",
     "react-router-dom": "^6.21.3"
   },
   "scripts": {

diff --git a/src/App.css b/src/App.css
@@ -381,7 +381,7 @@ label.panel-block:hover {
     font-size: 12px;
     border-radius: 4px;
     color: #fff;
-    top: -80%;
+    top: -24px;
 }
 
 .tooltip:after {
@@ -614,10 +614,12 @@ label.panel-block:hover {
     color: #003 !important;
     background: #f0f5f6;
     display: flex;
+    justify-content: center;
     padding: 10px;
     border-radius: 4px;
     word-break: break-all;
     margin: 10px 10px 20px;
+    position: relative;
 }
 
 .modal_highlighted_copy span {

diff --git a/src/App.js b/src/App.js
@@ -26,6 +26,7 @@ import Neon from "@cityofzion/neon-js";
 import { useWalletConnect } from "@cityofzion/wallet-connect-sdk-react";
 import { BaseDapi } from '@neongd/neo-dapi';
 import neo3Dapi from "neo3-dapi";
+import QRCode from "react-qr-code";
 import 'bulma/css/bulma.min.css';
 import './App.css';
 
@@ -750,7 +751,7 @@ export const App = () => {
 				}
 			} else {
 				const { uri, approval } = await wcSdk.createConnection(`neo3:${activeNet.toLowerCase()}`, ['invokeFunction', 'testInvoke', 'signMessage', 'verifyMessage']);
-				window.open(`https://neon.coz.io/connect?uri=${uri}`, '_blank').focus();
+				onModal('connectWallet', uri);
 				const session = await approval();
 				wcSdk.setSession(session);
 			}
@@ -804,6 +805,56 @@ export const App = () => {
 					</div>
 				</div>
 			)}
+			{modal.current === 'connectWallet' && (
+				<div className="modal">
+					<div
+						className="modal_close_panel"
+						onClick={onModal}
+					/>
+					<div className="modal_content" style={{ maxWidth: 400 }}>
+						<div
+							className="modal_close"
+							onClick={onModal}
+						>
+							<img
+								src="/img/icons/close.svg"
+								height={30}
+								width={30}
+								alt="loader"
+							/>
+						</div>
+						<Heading align="center" size={5} weight="bold">Please select an option</Heading>
+						<Heading align="center" size={6} style={{ marginBottom: 10 }}>QR code connection</Heading>
+						<Heading align="center" size={7} weight="normal">Please scan QR code to connect your wallet on a compatible device</Heading>
+						<div style={{ margin: "0 auto 20px", width: 128 }}>
+							<QRCode
+								value={modal.text}
+								style={{ height: "auto", maxWidth: "100%", width: "100%" }}
+							/>
+						</div>
+						<Heading align="center" size={6} style={{ marginBottom: 10 }}>Connection URL</Heading>
+						<Heading align="center" size={7} weight="normal">Copy and paste the connection URL into the Add connection page in your wallet</Heading>
+						<CopyToClipboard
+							text={modal.text}
+							className="modal_highlighted_copy"
+							style={{ marginBottom: 0 }}
+							onCopy={() => {
+								setCopy(true);
+								setTimeout(() => {
+									setCopy(false);
+								}, 700);
+							}}
+						>
+							<div>
+								{modal.text}
+								{isCopied && (
+									<div className="tooltip">Copied!</div>
+								)}
+							</div>
+						</CopyToClipboard>
+					</div>
+				</div>
+			)}
 			{modal.current === 'installWallet' && (
 				<div className="modal">
 					<div