Update AddressInput.jsx

chienj1 · Jan 17, 2022 · 8879429 · 8879429
1 parent 2067f70
commit 8879429
Showing 1 changed file with 142 additions and 77 deletions.
diff --git a/packages/react-app/src/components/AddressInput.jsx b/packages/react-app/src/components/AddressInput.jsx
@@ -1,30 +1,25 @@
 import { CameraOutlined, QrcodeOutlined } from "@ant-design/icons";
-import { Badge, Input } from "antd";
-import { useLookupAddress } from "eth-hooks/dapps/ens";
+import { Badge, Input, message, Spin } from "antd";
+import { useLookupAddress } from "eth-hooks";
 import React, { useCallback, useState } from "react";
 import QrReader from "react-qr-reader";
 import Blockie from "./Blockie";
-import { ethers } from "ethers";
+
 
 // probably we need to change value={toAddress} to address={toAddress}
 
 /*
   ~ What it does? ~
-
   Displays an address input with QR scan option
-
   ~ How can I use? ~
-
   <AddressInput
     autoFocus
     ensProvider={mainnetProvider}
     placeholder="Enter address"
     value={toAddress}
     onChange={setToAddress}
   />
-
   ~ Features ~
-
   - Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
               (ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address
   - Provide placeholder="Enter address" value for the input
@@ -33,99 +28,169 @@ import { ethers } from "ethers";
                           or onChange={address => { setToAddress(address);}}
 */
 
-const isENS = (address = "") => address.endsWith(".eth") || address.endsWith(".xyz");
-
 export default function AddressInput(props) {
-  const { ensProvider, onChange } = props;
-  const [value, setValue] = useState(props.value);
+  const [value, setValue] = useState(props.address);
   const [scan, setScan] = useState(false);
 
   const currentValue = typeof props.value !== "undefined" ? props.value : value;
   const ens = useLookupAddress(props.ensProvider, currentValue);
 
+  const scannerButton = (
+    <div
+      style={{ marginTop: 4, cursor: "pointer" }}
+      onClick={() => {
+        setScan(!scan);
+      }}
+    >
+      <Badge count={<CameraOutlined style={{ color: "#000000", fontSize: 9 }} />}>
+        <QrcodeOutlined style={{ color: "#000000", fontSize: 18 }} />
+      </Badge>{" "}
+      Scan
+    </div>
+  );
+
+  const { ensProvider, onChange } = props;
   const updateAddress = useCallback(
     async newValue => {
       if (typeof newValue !== "undefined") {
-        let address = newValue;
-        if (isENS(address)) {
-          try {
-            const possibleAddress = await ensProvider.resolveName(address);
-            if (possibleAddress) {
-              address = possibleAddress;
-            }
-            // eslint-disable-next-line no-empty
-          } catch (e) {}
+
+        console.log("SCAN",newValue)
+
+        /*console.log("🔑 Incoming Private Key...");
+        rawPK = incomingPK;
+        burnerConfig.privateKey = rawPK;
+        window.history.pushState({}, "", "/");
+        const currentPrivateKey = window.localStorage.getItem("metaPrivateKey");
+        if (currentPrivateKey && currentPrivateKey !== rawPK) {
+          window.localStorage.setItem("metaPrivateKey_backup" + Date.now(), currentPrivateKey);
         }
-        setValue(address);
-        if (typeof onChange === "function") {
-          onChange(address);
+        window.localStorage.setItem("metaPrivateKey", rawPK);*/
+        if(newValue && newValue.indexOf && newValue.indexOf("wc:")===0){
+          props.walletConnect(newValue)
+        }else{
+          let address = newValue;
+          setValue(address);
+          if (address.indexOf(".eth") > 0 || address.indexOf(".xyz") > 0) {
+            try {
+              const possibleAddress = await ensProvider.resolveName(address);
+              if (possibleAddress) {
+                address = possibleAddress;
+              }
+              // eslint-disable-next-line no-empty
+            } catch (e) {}
+          }
+          setValue(address);
+          if (typeof onChange === "function") {
+            onChange(address);
+          }
         }
       }
     },
     [ensProvider, onChange],
   );
 
-  return (
-    <div>
-      {scan ? (
-        <div
-          style={{
-            zIndex: 256,
-            position: "absolute",
-            left: 0,
-            top: 0,
-            width: "100%",
-          }}
-          onClick={() => {
-            setScan(false);
-          }}
-        >
-          <QrReader
-            delay={250}
-            resolution={1200}
-            onError={e => {
-              console.log("SCAN ERROR", e);
+  const scanner = scan ? (
+    <div
+      style={{
+        zIndex: 256,
+        position: "absolute",
+        left: "-25%",
+        top: "-150%",
+        width: "150%",
+        backgroundColor: "#333333",
+      }}
+      onClick={() => {
+        setScan(false);
+      }}
+    >
+      <div
+        style={{ fontSize: 16, position: "absolute", width: "100%", textAlign: "center", top: "25%", color: "#FFFFFF" }}
+      >
+        <Spin /> connecting to camera...
+      </div>
+      <QrReader
+        delay={250}
+        resolution={1200}
+        onError={e => {
+          console.log("SCAN ERROR", e);
+          setScan(false);
+          message.error("Camera Error: " + e.toString());
+        }}
+        onScan={newValue => {
+          if (newValue) {
+            console.log("SCAN VALUE",newValue);
+
+            if(newValue && newValue.length==66 && newValue.indexOf("0x")===0){
+              console.log("This might be a PK...",newValue)
+              setTimeout(()=>{
+                console.log("opening...")
+                let a = document.createElement("a");
+                document.body.appendChild(a);
+                a.style = "display: none";
+                //a.href = "https://punkwallet.io/pk#"+newValue;
+                a.click();
+                document.body.removeChild(a);
+              },250)
               setScan(false);
-            }}
-            onScan={newValue => {
-              if (newValue) {
-                console.log("SCAN VALUE", newValue);
-                let possibleNewValue = newValue;
-                if (possibleNewValue.indexOf("/") >= 0) {
-                  possibleNewValue = possibleNewValue.substr(possibleNewValue.lastIndexOf("0x"));
-                  console.log("CLEANED VALUE", possibleNewValue);
-                }
-                setScan(false);
-                updateAddress(possibleNewValue);
+              updateAddress();
+            }else if(newValue && newValue.indexOf && newValue.indexOf("http")===0){
+              console.log("this is a link, following...")
+              setTimeout(()=>{
+                console.log("opening...")
+                let a = document.createElement("a");
+                document.body.appendChild(a);
+                a.style = "display: none";
+                a.href = newValue;
+                a.click();
+                document.body.removeChild(a);
+              },250)
+
+              setScan(false);
+              updateAddress();
+            }else{
+              let possibleNewValue = newValue;
+              possibleNewValue = possibleNewValue.replace("ethereum:", "");
+              possibleNewValue = possibleNewValue.replace("eth:", "");
+              console.log("possibleNewValue",possibleNewValue)
+              if (possibleNewValue.indexOf("/") >= 0) {
+                possibleNewValue = possibleNewValue.substr(possibleNewValue.lastIndexOf("0x"));
+                console.log("CLEANED VALUE", possibleNewValue);
               }
-            }}
-            style={{ width: "100%" }}
-          />
-        </div>
-      ) : (
-        ""
-      )}
+              setScan(false);
+              updateAddress(possibleNewValue);
+            }
+
+          }
+        }}
+        style={{ width: "100%" }}
+      />
+    </div>
+  ) : (
+    ""
+  );
+
+  const part1 = currentValue && currentValue.substr && currentValue.substr(2, 20);
+  const part2 = currentValue && currentValue.substr && currentValue.substr(22);
+  const x = parseInt(part1, 16) % 100;
+  const y = parseInt(part2, 16) % 100;
+
+  props.hoistScanner(() => {
+    setScan(!scan);
+  });
+
+  return (
+    <div>
+      {scanner}
+
       <Input
+        disabled={props.disabled}
         id="0xAddress" // name it something other than address for auto fill doxxing
         name="0xAddress" // name it something other than address for auto fill doxxing
         autoComplete="off"
         autoFocus={props.autoFocus}
         placeholder={props.placeholder ? props.placeholder : "address"}
-        prefix={<Blockie address={currentValue} size={8} scale={3} />}
-        value={ethers.utils.isAddress(currentValue) && !isENS(currentValue) && isENS(ens) ? ens : currentValue}
-        addonAfter={
-          <div
-            style={{ marginTop: 4, cursor: "pointer" }}
-            onClick={() => {
-              setScan(!scan);
-            }}
-          >
-            <Badge count={<CameraOutlined style={{ fontSize: 9 }} />}>
-              <QrcodeOutlined style={{ fontSize: 18 }} />
-            </Badge>{" "}
-            Scan
-          </div>
-        }
+        value={ens || currentValue}
+        addonAfter={scannerButton}
         onChange={e => {
           updateAddress(e.target.value);
         }}