Merge pull request #7 from mathanraj0601/feat/Add-Wallet

Feat/add wallet

package.json

@@ -13,7 +13,7 @@
     "deploy": "gh-pages -d dist"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.0",
+    "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",

src/components/Conditions/Conditions.css

@@ -0,0 +1,13 @@
+.conditions {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.25rem;
+}
+
+.conditions > p {
+  font-weight: 500;
+  color: var(--text-900);
+  text-wrap: wrap;
+  line-break: loose;
+}

src/components/Conditions/Conditions.tsx

@@ -0,0 +1,36 @@
+import { Checkbox } from "@mui/material";
+import Theme from "../../Utility/Theme";
+import { useState } from "react";
+import "./Conditions.css";
+
+interface ConditionsProps {
+  value: string;
+  onChange: any;
+}
+
+function Conditions({ value, onChange }: ConditionsProps) {
+  const [checked, setChecked] = useState(true);
+
+  const handleChange = () => {
+    setChecked(!checked);
+    onChange(checked);
+  };
+  return (
+    <div className="conditions">
+      <Checkbox
+        sx={{
+          color: Theme["primary500"],
+          "&.Mui-checked": {
+            color: Theme["primary500"],
+          },
+          padding: 0,
+        }}
+        checked={checked}
+        onChange={handleChange}
+      />
+      <p>{value}</p>
+    </div>
+  );
+}
+
+export default Conditions;

src/components/NavBar/NavBar.tsx

@@ -5,6 +5,7 @@ import CloseIcon from "@mui/icons-material/Close";
 import "./NavBar.css";
 import useMobile from "../../Utility/Hooks/setMobile";
 import logo from "../../assets/logo.png";
+import Profile from "../Profile/Profile";
 
 function NavBar() {
   const menus = [
@@ -70,6 +71,7 @@ function NavBar() {
         </ul>
         <div className="nav-bar-options">
           <ColorToggle className="nav-bar-option" />
+          <Profile name={"Mathan raj"} />
           {isMobile && (
             <button onClick={toggleNavOpen}>
               {isNavOpen ? (

src/components/Profile/Profile.css

@@ -0,0 +1,16 @@
+.profile {
+  box-shadow: var(--text-900) 0px 1px 1px, var(--text-900) 0px 0px 1px 1px;
+  cursor: pointer;
+  padding: 0.3rem 0.25rem;
+  border-radius: 20%;
+  user-select: none;
+}
+
+.profile-text {
+  font-size: 1rem;
+  font-weight: 800;
+}
+
+.profile:hover {
+  background-color: var(--primary-400);
+}

src/components/Profile/Profile.tsx

@@ -0,0 +1,18 @@
+import "./Profile.css";
+
+interface ProfileProps {
+  name: string;
+}
+
+function Profile({ name }: ProfileProps) {
+  const IconText = (
+    name.split(" ")[0][0] + name.split(" ")[1][0]
+  ).toUpperCase();
+  return (
+    <div className="profile">
+      <span className="profile-text">{IconText}</span>
+    </div>
+  );
+}
+
+export default Profile;

src/components/SecretPhraseGrid/SecretPhraseGrid.css

@@ -1,17 +1,22 @@
 .secret-phrase-grid-container {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
   gap: 1rem;
+  grid-template-columns: repeat(4, 1fr);
   /* max-width: calc(800px + 1rem); */
-  /* min-width: 300px; */
   justify-content: center;
   align-items: center;
-  padding-block: 1.6rem;
-  border-radius: 5px;
+  padding: 1rem;
+  width: 100%;
 }
 
-.secret-phrase-grid-container > .secret-phrase-input {
-  width: 20%;
-  min-width: 100px;
-  max-width: 200px;
+@media screen and (max-width: 900px) {
+  .secret-phrase-grid-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .secret-phrase-grid-container {
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  }
 }

src/components/SecretPhraseInput/SecretPhraseInput.css

@@ -11,4 +11,9 @@
 
 .secret-phrase-input:focus {
   outline: 2px solid var(--primary-900);
+  background-color: var(--primary-400);
+}
+
+.secret-phrase-input:hover {
+  background-color: var(--primary-400);
 }

src/components/WalletItem/WalletItem.css

@@ -29,10 +29,3 @@
   gap: 0.8rem;
   padding-top: 10px;
 }
-
-.wallet-item:hover {
-  box-shadow: var(--primary-300) 0px 1px 1px, var(--primary-300) 0px 0px 1px 1px;
-
-  transform: scaleX(1.01);
-  transition: transform 0.2s ease-in-out;
-}

src/components/WalletItem/WalletItem.tsx

@@ -1,3 +1,4 @@
+import Conditions from "../Conditions/Conditions";
 import WalletKey from "../WalletKey/WalletKey";
 import WalletPharse from "../WalletPhrase/WalletPhrase";
 import "./WalletItem.css";
@@ -33,6 +34,11 @@ function WalletItem() {
     //   isCopyable: true,
     // },
   ];
+
+  const handleChecked = (e: boolean) => {
+    console.log(e, "checked");
+  };
+
   return (
     <div className="wallet-item">
       <div className="wallet-item-header">
@@ -51,6 +57,10 @@ function WalletItem() {
         ))}
         <WalletPharse />
       </div>
+      <Conditions
+        value={"I Accept the terms and conditions "}
+        onChange={handleChecked}
+      />
     </div>
   );
 }

src/components/WalletKey/WalletKey.css

@@ -19,7 +19,7 @@
 
 .wallet-key-body {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   padding: 0.5rem 1rem;
   gap: 0.4rem;

src/components/WalletKey/WalletKey.tsx

@@ -23,7 +23,7 @@ function WalletKey({ title, value, isProtected, isCopyable }: WalletKeyProps) {
           <p>{isShow ? value : text}</p>
         </div>
         <div className="wallet-key-options">
-          {isCopyable && (
+          {isCopyable && isShow && (
             <div className="wallet-key-option">
               <CopyAllIcon />
             </div>