From c24462d7dbef0a430e6f2f95bd3db292cc33bb31 Mon Sep 17 00:00:00 2001
From: PRavaga <trueravaga@gmail.com>
Date: Fri, 23 Jun 2023 15:25:41 +0200
Subject: [PATCH] address, alias and amount validation

Signed-off-by: PRavaga <trueravaga@gmail.com>
---
 src/app/components/UI/MyInput/MyInput.jsx     |   7 +-
 .../WalletSend/AddressInput/AddressInput.jsx  | 100 ------------------
 .../AddressInput/AddressInput.module.scss     |  69 ------------
 src/app/components/WalletSend/WalletSend.jsx  |  51 +++++++--
 4 files changed, 44 insertions(+), 183 deletions(-)
 delete mode 100644 src/app/components/WalletSend/AddressInput/AddressInput.jsx
 delete mode 100644 src/app/components/WalletSend/AddressInput/AddressInput.module.scss

diff --git a/src/app/components/UI/MyInput/MyInput.jsx b/src/app/components/UI/MyInput/MyInput.jsx
index 5615b60..879ceeb 100644
--- a/src/app/components/UI/MyInput/MyInput.jsx
+++ b/src/app/components/UI/MyInput/MyInput.jsx
@@ -2,10 +2,9 @@ import React from "react";
 import nextId from "react-id-generator";
 import s from "./MyInput.module.scss";
 
-const MyInput = ({ label, value, noActiveBorder, ...props }) => {
+const MyInput = ({ label, value, noActiveBorder, isValid, ...props }) => {
   const id = nextId();
-  const inputClasses =
-    value.length && !noActiveBorder > 0 ? "_input-filled" : "";
+  const inputClasses = isValid && !noActiveBorder > 0 ? "_input-filled" : "";
 
   return (
     <div className={s.myInput}>
@@ -21,4 +20,4 @@ const MyInput = ({ label, value, noActiveBorder, ...props }) => {
   );
 };
 
-export default MyInput;
\ No newline at end of file
+export default MyInput;
diff --git a/src/app/components/WalletSend/AddressInput/AddressInput.jsx b/src/app/components/WalletSend/AddressInput/AddressInput.jsx
deleted file mode 100644
index 4f7ed5c..0000000
--- a/src/app/components/WalletSend/AddressInput/AddressInput.jsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import checkIcon from "../../../assets/svg/check.svg";
-import aliasIcon from "../../../assets/svg/contacts.svg";
-import mainStyles from "../WalletSend.module.scss";
-import s from "./AddressInput.module.scss";
-import { getAliasDetails, getAlias } from "../../../../background/wallet";
-
-const AddressInput = ({ address }) => {
-  const textareaRef = useRef(null);
-  const [aliasVisible, setAliasVisible] = useState(false);
-  const [alias, setAlias] = useState({ value: "", address: "" });
-
-  const buttonClasses = aliasVisible
-    ? [s.addAliasBtn, s.active].join(" ")
-    : s.addAliasBtn;
-
-  const getTextAreaClasses = () => {
-    const aliasVisibleClass = aliasVisible && address.value && s.thinText;
-    const inputFilledClass = address.value.length && "_input-filled";
-    return [aliasVisibleClass, inputFilledClass].join(" ");
-  };
-
-  useEffect(() => {
-    handleInput();
-  }, []);
-
-  const handleInput = () => {
-    textareaRef.current.style.height = "41px";
-    textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
-  };
-
-  const toggleAlias = async () => {
-    if (!aliasVisible && address.value) {
-      const aliasValue = await getAlias(address.value);
-      if (aliasValue) {
-        setAlias({ value: aliasValue, address: address.value });
-        setAliasVisible(true);
-      } else {
-        const addr = await getAliasDetails(address.value);
-        if (addr) {
-          setAlias({ value: address.value, address: addr });
-          setAliasVisible(true);
-        }
-      }
-    } else {
-      setAliasVisible(!aliasVisible);
-    }
-  };
-
-  const handleAliasChange = async (e) => {
-    const aliasValue = e.target.value;
-    const addr = await getAliasDetails(aliasValue);
-    if (addr) {
-      setAlias({ value: aliasValue, address: addr });
-      address.onChange({ target: { value: addr } }); // set address to resolved address from alias
-      setAliasVisible(true);
-    }
-  };
-
-  return (
-    <div>
-      <label className={mainStyles.label} htmlFor="address-wallet-send">
-        Address:
-        {address.value && (
-          <button className={buttonClasses} onClick={toggleAlias}>
-            <img src={aliasIcon} alt="add alias button icon" />
-          </button>
-        )}
-      </label>
-
-      <div className={s.textArea}>
-        {aliasVisible && (
-          <div className={s.textAreaAlias}>
-            @ <input value={alias.value} onChange={handleAliasChange} />
-            <span>
-              <img src={checkIcon} alt="check icon" />
-            </span>
-          </div>
-        )}
-
-        <textarea
-          disabled={aliasVisible}
-          ref={textareaRef}
-          value={alias.address || address.value}
-          onChange={address.onChange}
-          onInput={handleInput}
-          placeholder={
-            aliasVisible
-              ? alias.address
-              : "Enter the Recipient's Address or Alias"
-          }
-          className={getTextAreaClasses()}
-          id="address-wallet-send"
-        />
-      </div>
-    </div>
-  );
-};
-
-export default AddressInput;
diff --git a/src/app/components/WalletSend/AddressInput/AddressInput.module.scss b/src/app/components/WalletSend/AddressInput/AddressInput.module.scss
deleted file mode 100644
index 07e4bcc..0000000
--- a/src/app/components/WalletSend/AddressInput/AddressInput.module.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-@use "sass:math";
-
-.textArea {
-  position: relative;
-}
-
-.textAreaAlias {
-  position: absolute;
-  top: 10px;
-  left: 0;
-  padding: 0 15px;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  input {
-    background-color: transparent;
-    color: #ffffff;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 100%;
-    padding-right: 40px;
-  }
-  span {
-    flex: 0 0 15px;
-    width: 15px;
-    height: 15px;
-    img {
-      max-width: 100%;
-    }
-  }
-}
-
-textarea {
-  border: 2px solid rgba(255, 255, 255, 0.2);
-  border-radius: 8px;
-  background-color: #0C0C3A;
-  width: 100%;
-  resize: none;
-  min-height: 41px;
-  font-weight: 300;
-  line-height: math.div(21, 18);
-  color: #ffffff;
-  padding: 8px 12px 8px 12px;
-  transition: all 0.1s ease 0s;
-  transition-property: padding, font-size, color;
-  overflow: hidden;
-  &:focus {
-    border-color: rgba(255, 255, 255, 0.4);
-  }
-  &::placeholder {
-    color: rgba(255, 255, 255, 0.3);
-  }
-  &.thinText {
-    color: rgba(255, 255, 255, 0.5);
-    font-size: 16px;
-    padding: 35px 12px 12px 12px;
-  }
-}
-
-.addAliasBtn {
-  opacity: 0.7;
-  transition: opacity 0.2s ease 0s;
-  &.active {
-    opacity: 1;
-    pointer-events: auto;
-  }
-}
\ No newline at end of file
diff --git a/src/app/components/WalletSend/WalletSend.jsx b/src/app/components/WalletSend/WalletSend.jsx
index a9f27c8..9fdd806 100644
--- a/src/app/components/WalletSend/WalletSend.jsx
+++ b/src/app/components/WalletSend/WalletSend.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { popToTop } from "react-chrome-extension-router";
 import failedImage from "../../assets/images/failed-round.png";
 import successImage from "../../assets/images/success-round.png";
@@ -9,10 +9,10 @@ import MyButton from "../UI/MyButton/MyButton";
 import MyInput from "../UI/MyInput/MyInput";
 import RoutersNav from "../UI/RoutersNav/RoutersNav";
 import AdditionalDetails from "./AdditionalDetails/AdditionalDetails";
-import AddressInput from "./AddressInput/AddressInput";
 import AssetsSelect from "./AssetsSelect/AssetsSelect";
 import s from "./WalletSend.module.scss";
 import { fetchBackground } from "../../utils/utils";
+import { getAliasDetails } from "../../../background/wallet";
 
 const WalletSend = () => {
   const { state } = useContext(Store);
@@ -20,8 +20,9 @@ const WalletSend = () => {
   const [transactionSuccess, setTransactionSuccess] = useState(false);
   const [txId, setTxId] = useState("");
   // Form data
-  const address = useInput("");
+  const [address, setAddress] = useState("");
   const [asset, setAsset] = useState(state.wallet.assets[0]);
+  const [submitAddress, setSubmitAddress] = useState("");
   const amount = useInput("");
   const comment = useInput("");
   const mixin = useInput(10);
@@ -71,6 +72,28 @@ const WalletSend = () => {
     );
   };
 
+  useEffect(() => {
+    (async () => {
+      if (address.startsWith("@")) {
+        const alias = address.slice(1);
+        const resolvedAddress = await fetchAddress(alias);
+        if (resolvedAddress) {
+          setSubmitAddress(resolvedAddress);
+        } else {
+          setSubmitAddress("");
+        }
+      } else {
+        if (address.length === 97) {
+          setSubmitAddress(address);
+        } else {
+          setSubmitAddress("");
+        }
+      }
+    })();
+  }, [address]);
+
+  const fetchAddress = async (alias) => await getAliasDetails(alias);
+
   return (
     <>
       {(() => {
@@ -80,18 +103,26 @@ const WalletSend = () => {
             return (
               <div>
                 <RoutersNav title="Send" />
-
                 <div className={s.sendForm}>
-                  <AddressInput address={address} />
-
+                  <MyInput
+                    placeholder="Address or alias"
+                    label="Address"
+                    value={address}
+                    onChange={(e) => setAddress(e.target.value)}
+                    isValid={submitAddress ? true : false}
+                  />
                   <AssetsSelect value={asset} setValue={setAsset} />
-
                   <MyInput
                     type="number"
                     placeholder="Amount to transfer"
                     label="Amount:"
                     value={amount.value}
                     onChange={amount.onChange}
+                    isValid={
+                      !isNaN(amount.value) &&
+                      amount.value >= 0.000000000001 &&
+                      amount.value <= 1000000000
+                    }
                   />
 
                   <MyInput
@@ -109,7 +140,7 @@ const WalletSend = () => {
                   />
 
                   <MyButton
-                    disabled={!address.value || !amount.value}
+                    disabled={!submitAddress || !amount.value}
                     onClick={() => setActiveStep(1)}
                   >
                     Send
@@ -129,7 +160,7 @@ const WalletSend = () => {
                     value={amount.value + " " + asset.ticker}
                   />
                   <TableRow label="From" value={state.wallet.address} />
-                  <TableRow label="To" value={address.value} />
+                  <TableRow label="To" value={address} />
                   <TableRow label="Comment" value={comment.value} />
                   <TableRow label="Fee" value={fee.value} />
                 </div>
@@ -137,7 +168,7 @@ const WalletSend = () => {
                 <MyButton
                   onClick={async () => {
                     const transferStatus = await sendTransfer(
-                      address.value,
+                      submitAddress,
                       amount.value,
                       comment.value,
                       asset.assetId