Alternative

client/package.json

@@ -10,8 +10,11 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
+    "ethereum-cryptography": "^2.1.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.15.0",
+    "secp256k1": "^5.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.17",

client/src/App.jsx

@@ -4,18 +4,24 @@ import "./App.scss";
 import { useState } from "react";
 
 function App() {
-  const [balance, setBalance] = useState(0);
-  const [address, setAddress] = useState("");
+  const [loggedInAddress, setLoggedInAddress] = useState(""); 
+  const [loggedInBalance, setLoggedInBalance] = useState(0);
+  const [publicKey, setPublicKey] = useState("");
 
+  const handleLogin = (address,balance,newPublicKey) => {
+    setLoggedInAddress(address);
+    setLoggedInBalance(balance);
+    setPublicKey(newPublicKey);
+  };
+  const handleAddressChange = (address) => {
+    setLoggedInAddress(address);
+  };
   return (
     <div className="app">
-      <Wallet
-        balance={balance}
-        setBalance={setBalance}
-        address={address}
-        setAddress={setAddress}
-      />
-      <Transfer setBalance={setBalance} address={address} />
+     <Wallet onLogin={handleLogin} />
+
+     <Transfer senderAddress={loggedInAddress} publicKey={publicKey}/>
+
     </div>
   );
 }

client/src/App.scss

@@ -1,17 +1,17 @@
 body {
   font-family: "Muli", sans-serif;
   font-weight: 300;
-  background-color: #e2e8f0;
+  background-color: #111;
   padding: 40px;
 }
 
 label {
   display: flex;
   flex-direction: column;
   letter-spacing: 0.05rem;
-  font-size: .8em;
+  font-size: 0.8em;
   font-weight: 400;
-  color: #222;
+  color: #33ff33;
 }
 
 .app {
@@ -25,10 +25,10 @@ label {
 .container {
   flex-grow: 1;
   margin: 0 20px;
-  background-color: #fff;
-  border: 1px solid #cbd5e0;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  border-radius: 0.375rem;
+  background-color: #000;
+  border: 1px solid #33ff33;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
   padding: 40px;
 
   label {
@@ -41,26 +41,29 @@ label {
 }
 
 input {
-  padding: 10px 0;
-  border-radius: 0.125rem;
-  border: 1px solid rgb(226, 232, 240);
-  background-color: #fdfdfe;
-  padding-inline-start: 0.75rem;
-  font-size: 0.875rem;
+  padding: 12px 16px;
+  border-radius: 6px;
+  border: 1px solid #33ff33;
+  background-color: #000;
+  color: #33ff33;
+  font-size: 0.9rem;
 }
 
 .button {
-  background-color: #319795;
-  border-radius: 0.125rem;
-  padding: 10px 20px;
-  color: white;
+  background-color: #33ff33;
+  border: none;
+  border-radius: 6px;
+  padding: 12px 20px;
+  color: #000;
   display: inline-flex;
   text-transform: uppercase;
   letter-spacing: 1px;
-  font-weight: 400;
-  font-size: .9em;
+  font-weight: 500;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out;
   &:hover {
-    cursor: pointer;
+    background-color: #008800;
   }
 }
 
@@ -71,16 +74,24 @@ input {
   .balance {
     text-transform: uppercase;
     letter-spacing: 1px;
-    font-weight: 400;
-    font-size: .9em;
+    font-weight: 500;
+    font-size: 0.9rem;
     display: inline-flex;
     margin-top: 10px;
-    padding: 0.75rem;
-    background-color: #f4f6f8;
+    padding: 10px;
+    background-color: black;
+    border-radius: 6px;
   }
 }
 
 .transfer {
   display: flex;
   flex-direction: column;
+
+  label {
+    font-weight: 500;
+    font-size: 0.9rem;
+    color: #33ff33;
+    margin-bottom: 6px;
+  }
 }

client/src/LogInPage.jsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import { UsersData } from "../../server/scripts/accounts_array.js";
+
+export const LogInComponent = ({ onLogin }) => {
+  const [address, setAddress] = useState("");
+
+  const handleLogin = async () => {
+    try {
+      const userData = UsersData();
+      const generatedAddress = userData.address;
+      setAddress(generatedAddress);
+      onLogin(generatedAddress, userData.balance,userData.privatKey,userData.publicKey);
+    } catch (error) {
+      console.error("Error generating address:", error);
+    }
+  };
+
+  return (
+    <form className="container login" onSubmit={(event) => event.preventDefault()}>
+      <input type="button" className="button" value="Get the account address" onClick={handleLogin} />
+    </form>
+  );
+};

client/src/Transfer.jsx

@@ -1,29 +1,76 @@
-import { useState } from "react";
-import server from "./server";
+import React, { useState,useEffect } from "react"; // Обратите внимание на добавление React
+import { arr } from "../../server/scripts/accounts_array.js";
+import  Operation  from "../../server/scripts/balance_operation.js";
+import { veryfication } from "../../server/scripts/verification.js";
+import { Sign } from "../../server/scripts/Signification.js";
+import  { keccak256 } from "ethereum-cryptography/keccak";
+import { utf8ToBytes } from "ethereum-cryptography/utils.js";
+import { toHex } from "ethereum-cryptography/utils.js";
+
 
-function Transfer({ address, setBalance }) {
-  const [sendAmount, setSendAmount] = useState("");
-  const [recipient, setRecipient] = useState("");
 
+ const Transfer = ({ senderAddress,publicKey }) => {
+  const [sendAmount, setSendAmount] = useState(0);
+  const [recipient, setRecipient] = useState("");
+  const [senderBalance, setBalance] = useState(0);
+  const [errorMessage, setErrorMessage] = useState("");
+  const [isChecked, setIsChecked] = useState(false);
+  const [privateKey, setPrivateKey] = useState("");
+
   const setValue = (setter) => (evt) => setter(evt.target.value);
 
   async function transfer(evt) {
     evt.preventDefault();
-
+    CheckSenderAddressValidity();
+  }
+  const CheckSenderAddressValidity = () => {
     try {
-      const {
-        data: { balance },
-      } = await server.post(`send`, {
-        sender: address,
-        amount: parseInt(sendAmount),
-        recipient,
-      });
-      setBalance(balance);
-    } catch (ex) {
-      alert(ex.response.data.message);
+      let validRecipient = false; 
+      for (var i = 0; i < arr.length; i++) {
+        if (recipient === arr[i].address) {
+          validRecipient = true; 
+          setBalance(arr[i].balance);
+          setRecipient(arr[i].address); //встановити адресу яку вводить користувач 
+          setErrorMessage(""); 
+          break;
+        }
+      }
+      if (!validRecipient) {
+        setErrorMessage("Invalid recipient address"); // Устанавливаем ошибку, если адрес неправильный
+      }
+    } catch (error) {
+      setErrorMessage("Something went wrong: " + error.message);
     }
-  }
+  };
+  const CallBalanceChange = (sendAmount, senderAddress, recipient) => {
+    console.log("CallBalanceChange function called");
+    console.log("sendAmount:", sendAmount);
+    console.log("senderAddress:", senderAddress);
+    console.log("recipient:", recipient);
 
+    const operationInstance = new Operation();
+    const recipientObj = operationInstance.RecipientChange(recipient);
+    const senderObj = operationInstance.SenderChange(senderAddress);
+    const updatedRecipientBalance = operationInstance.updateBalanceForRecipient(recipientObj, sendAmount);
+    const updatedSenderBalance = operationInstance.updateBalanceForSender(senderObj, sendAmount);
+    console.log(updatedRecipientBalance);
+    console.log(updatedSenderBalance);
+  };
+  const handleOptionChange = (privateKey) => {
+    if (isChecked) {
+      return Sign(recipient,senderAddress,sendAmount,privateKey);
+    }
+  };
+ const verify =()=>{
+    const isVeryfied = veryfication(handleOptionChange(privateKey),recipient,senderAddress,sendAmount,publicKey);
+    return isVeryfied;
+ }
+  useEffect(() => {
+    if (isChecked) {
+      handleOptionChange(privateKey);
+    }
+
+  }, [isChecked, privateKey]);
   return (
     <form className="container transfer" onSubmit={transfer}>
       <h1>Send Transaction</h1>
@@ -34,7 +81,7 @@ function Transfer({ address, setBalance }) {
           placeholder="1, 2, 3..."
           value={sendAmount}
           onChange={setValue(setSendAmount)}
-        ></input>
+        />
       </label>
 
       <label>
@@ -43,10 +90,44 @@ function Transfer({ address, setBalance }) {
           placeholder="Type an address, for example: 0x2"
           value={recipient}
           onChange={setValue(setRecipient)}
-        ></input>
+        />
+      </label>
+      {errorMessage && <p className="error-message">{errorMessage}</p>}
+      <div>
+      <div>
+      <label>
+
+        <input
+          placeholder="Type your private key to make a sign"
+          value={privateKey}
+          onChange={(evt) => setPrivateKey(evt.target.value)}
+        />
+         <input
+          type="checkbox"
+          checked={isChecked}
+          onChange={(evt) => {
+            setIsChecked(evt.target.checked);
+          }}
+
+        />
+        <h3>Press for sing </h3>
       </label>
+    </div>
+  <p>Стан чекбокса: {isChecked ? "Обрано" : "Не обрано"}</p>
+</div>
+      <input
+  type="submit"
+  className="button"
+  value="Transfer"
+  onClick={() => CallBalanceChange(sendAmount, senderAddress, recipient)}
+/>
+<div className="verification">
+  <button
+    onClick={verify}>
+    Verification
+  </button>
+</div>
 
-      <input type="submit" className="button" value="Transfer" />
     </form>
   );
 }