Your Wallet
+
-
+ {/* User address input */}
+
+ {/* User public key input */}
+
+
+ {/* Display user balance */}
Balance: {balance}
+
+ {/* Button to check user balance */}
+
+
+
Your Data
+
Keep your private key secret!
+
+ {/* Display user data */}
+
+
Address: {address}
+
Balance: {balance}
+
Public Key: {publicKey}
+
Private Key: {privateKey}
+
+
+ {/* Input for recipient's public key */}
+
+
+ {/* Button to perform recipient public key related action */}
+
);
-}
+};
export default Wallet;
diff --git a/client/src/Wallet.scss b/client/src/Wallet.scss
new file mode 100644
index 00000000..71afed09
--- /dev/null
+++ b/client/src/Wallet.scss
@@ -0,0 +1,78 @@
+// Wallet.scss
+
+$primaryColor: #33ff33;
+$backgroundColor: #111;
+$textColor: #33ff33;
+
+.wallet {
+ background-color: $backgroundColor;
+ color: $textColor;
+ padding: 40px;
+ border-radius: 10px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+
+ h1 {
+ font-size: 24px;
+ margin-bottom: 20px;
+ }
+
+
+
+ .usersData {
+ margin-top: 20px;
+ p {
+ margin: 5px 0;
+ }
+ }
+
+ .recipientPublicKey {
+ margin-top: 30px;
+ input {
+ width: 100%;
+ padding: 10px;
+ border: none;
+ background-color: $primaryColor;
+ color: $backgroundColor;
+ border-radius: 6px;
+ margin-right: 10px;
+ margin-bottom: 10px;
+ }
+ .button {
+ background-color: #33ff33;
+ border: none;
+ border-radius: 6px;
+ padding: 12px 20px;
+ color: #000;
+ display: inline-flex;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ font-weight: 500;
+ font-size: 0.9rem;
+ cursor: pointer;
+ transition: background-color 0.3s ease-in-out;
+ &:hover {
+ background-color: #008800;
+ }
+ }
+
+.balance {
+ background-color: transparent black ; // Set background-color to transparent
+ padding: 10px 20px;
+ border-radius: 6px;
+ margin-top: 10px;
+ text-transform: uppercase;
+ font-weight: 500;
+ font-size: 0.9rem;
+ position: relative; // Add position relative
+ z-index: 1; // Add a higher z-index to bring text above the background
+ &::before {
+ content: "Balance: "; // Add the text using pseudo-element
+ position: absolute;
+ left: 20px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: black;
+ }
+}
+ }
+}
diff --git a/client/src/main.jsx b/client/src/main.jsx
index a7c77000..68be7b80 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -1,6 +1,7 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
+//import LogInPage from "./LogInPage.jsx";
ReactDOM.createRoot(document.getElementById("root")).render(