started styling

2025-02-11 17:55:49 +00:00 · 2024-04-14 21:14:13 +03:00 · 2024-04-14 21:14:13 +03:00 · d052f68f94
commit d052f68f94
parent 81742c7ca0
42 changed files with 736 additions and 227 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -17,12 +17,14 @@
        "buffer": "6.0.3",
        "jssha": "3.3.1",
        "react": "^18.2.0",
+        "react-copy-to-clipboard": "^5.1.0",
        "react-countdown-circle-timer": "^3.2.1",
        "react-dom": "^18.2.0",
        "react-dropzone": "^14.2.3"
      },
      "devDependencies": {
        "@types/react": "^18.2.64",
+        "@types/react-copy-to-clipboard": "^5.0.7",
        "@types/react-dom": "^18.2.21",
        "@typescript-eslint/eslint-plugin": "^7.1.1",
        "@typescript-eslint/parser": "^7.1.1",
@ -1697,6 +1699,15 @@
        "csstype": "^3.0.2"
      }
    },
+    "node_modules/@types/react-copy-to-clipboard": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/@types/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.7.tgz",
+      "integrity": "sha512-Gft19D+as4M+9Whq1oglhmK49vqPhcLzk8WfvfLvaYMIPYanyfLy0+CwFucMJfdKoSFyySPmkkWn8/E6voQXjQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/react-dom": {
      "version": "18.2.22",
      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.22.tgz",
@ -2219,6 +2230,14 @@
      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
      "dev": true
    },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
    "node_modules/cosmiconfig": {
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@ -3522,6 +3541,18 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-copy-to-clipboard": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
+      "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
+      "dependencies": {
+        "copy-to-clipboard": "^3.3.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || 16 || 17 || 18"
+      }
+    },
    "node_modules/react-countdown-circle-timer": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/react-countdown-circle-timer/-/react-countdown-circle-timer-3.2.1.tgz",
@ -3861,6 +3892,11 @@
        "node": ">=8.0"
      }
    },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
    "node_modules/ts-api-utils": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
--- a/package.json
+++ b/package.json
@ -19,12 +19,14 @@
    "buffer": "6.0.3",
    "jssha": "3.3.1",
    "react": "^18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
    "react-countdown-circle-timer": "^3.2.1",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.3"
  },
  "devDependencies": {
    "@types/react": "^18.2.64",
+    "@types/react-copy-to-clipboard": "^5.0.7",
    "@types/react-dom": "^18.2.21",
    "@typescript-eslint/eslint-plugin": "^7.1.1",
    "@typescript-eslint/parser": "^7.1.1",
--- a/src/App-styles.ts
+++ b/src/App-styles.ts
@ -0,0 +1,178 @@
+import {
+  AppBar,
+  Button,
+  Toolbar,
+  Typography,
+  Box,
+  TextField,
+  InputLabel,
+} from "@mui/material";
+import { styled } from "@mui/system";
+
+export const AppContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  flexDirection: 'column',
+  width: "100vw",
+  background: "rgba(39, 40, 44, 1)",
+  height: "100vh",
+  radius: "15px"
+}));
+export const AuthenticatedContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  justifyContent: "space-between"
+}));
+export const AuthenticatedContainerInnerLeft = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  flexDirection: 'column',
+  height: "100%",
+  width: "100%"
+}));
+export const AuthenticatedContainerInnerRight = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  flexDirection: 'column',
+  width: "60px",
+  height: "100%",
+  background: "rgba(0, 0, 0, 0.1)"
+
+}));
+
+export const TextP = styled(Typography)(({ theme }) => ({
+  fontSize: "13px",
+  fontWeight: 600,
+  fontFamily: "Inter",
+  color: "white"
+}));
+
+export const TextItalic = styled("span")(({ theme }) => ({
+  fontSize: "13px",
+  fontWeight: 600,
+  fontFamily: "Inter",
+  color: "white",
+  fontStyle: "italic"
+}));
+
+export const TextSpan = styled("span")(({ theme }) => ({
+  fontSize: "13px",
+  fontFamily: "Inter",
+  fontWeight: 800,
+  color: "white"
+}));
+
+export const AddressBox = styled(Box)`
+display: flex;
+border: 1px solid var(--50-white, rgba(255, 255, 255, 0.5));
+justify-content: space-between;
+align-items: center;
+width: 132px;
+height: 25px;
+padding: 5px 15px 5px 15px;
+gap: 5px;
+border-radius: 100px;
+font-family: Inter;
+font-size: 12px;
+font-weight: 600;
+line-height: 14.52px;
+text-align: left;
+color: var(--50-white, rgba(255, 255, 255, 0.5));
+cursor: pointer;
+transition: all 0.2s;
+&:hover {
+    background-color: rgba(41, 41, 43, 1);
+    color: white;
+    svg path {
+      fill: white; // Fill color changes to white on hover
+    }
+  }
+
+`
+
+export const CustomButton = styled(Box)`
+
+/* Authenticate */
+
+box-sizing: border-box;
+
+padding: 15px 20px;
+gap: 10px;
+
+
+border: 0.5px solid rgba(255, 255, 255, 0.5);
+filter: drop-shadow(1px 4px 10.5px rgba(0, 0, 0, 0.3));
+border-radius: 5px;
+
+  display: inline-flex;
+
+  justify-content: center;
+  align-items: center;
+
+  width: fit-content;
+  transition: all 0.2s;
+  color: black;
+  min-width: 160px;
+  cursor: pointer;
+  font-weight: 600;
+  font-family: Inter;
+  color: white;
+  text-align: center;
+  &:hover {
+    background-color: rgba(41, 41, 43, 1);
+    color: white;
+    svg path {
+      fill: white; // Fill color changes to white on hover
+    }
+  }
+`;
+
+
+export const CustomInput = styled(TextField)({
+  width: "183px", // Adjust the width as needed
+  borderRadius: "5px",
+  // backgroundColor: "rgba(30, 30, 32, 1)",
+  outline: "none",
+  input: {
+    fontSize: 10,
+    fontFamily: "Inter",
+    fontWeight: 400,
+    color: "white",
+    "&::placeholder": {
+      fontSize: 16,
+      color: "rgba(255, 255, 255, 0.2)",
+    },
+    outline: "none",
+    padding: "10px",
+  },
+  "& .MuiOutlinedInput-root": {
+    "& fieldset": {
+      border: '0.5px solid rgba(255, 255, 255, 0.5)',
+    },
+    "&:hover fieldset": {
+     border: '0.5px solid rgba(255, 255, 255, 0.5)',
+    },
+    "&.Mui-focused fieldset": {
+     border: '0.5px solid rgba(255, 255, 255, 0.5)',
+    },
+  },
+  "& .MuiInput-underline:before": {
+    borderBottom: "none",
+  },
+  "& .MuiInput-underline:hover:not(.Mui-disabled):before": {
+    borderBottom: "none",
+  },
+  "& .MuiInput-underline:after": {
+    borderBottom: "none",
+  },
+});
+
+export const CustomLabel = styled(InputLabel)`
+  font-weight: 400;
+  font-family: Inter;
+  font-size: 10px;
+  line-height: 12px;
+  color: rgba(255, 255, 255, 0.5);
+
+`
--- a/src/App.css
+++ b/src/App.css
@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
--- a/src/App.tsx
+++ b/src/App.tsx
@ -6,7 +6,13 @@ import { useDropzone } from "react-dropzone";
 import { Box, Input, InputLabel, Typography } from "@mui/material";
 import { decryptStoredWallet } from "./utils/decryptWallet";
 import { CountdownCircleTimer } from "react-countdown-circle-timer";
-
+import Logo1 from "./assets/svgs/Logo1.svg";
+import Logo2 from "./assets/svgs/Logo2.svg";
+import Copy from "./assets/svgs/Copy.svg";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import Download from "./assets/svgs/Download.svg";
+import Logout from "./assets/svgs/Logout.svg";
+import Return from "./assets/svgs/Return.svg";
 import {
  createAccount,
  generateRandomSentence,
@ -16,6 +22,20 @@ import { kdf } from "./deps/kdf";
 import { generateSaveWalletData } from "./utils/generateWallet/storeWallet";
 import { crypto, walletVersion } from "./constants/decryptWallet";
 import PhraseWallet from "./utils/generateWallet/phrase-wallet";
+import {
+  AddressBox,
+  AppContainer,
+  AuthenticatedContainer,
+  AuthenticatedContainerInnerLeft,
+  AuthenticatedContainerInnerRight,
+  CustomButton,
+  CustomInput,
+  CustomLabel,
+  TextItalic,
+  TextP,
+  TextSpan,
+} from "./App-styles";
+import { Spacer } from "./common/Spacer";

 type extStates =
  | "not-authenticated"
@ -45,8 +65,10 @@ function App() {
  const [walletToBeDownloaded, setWalletToBeDownloaded] = useState<any>(null);
  const [walletToBeDownloadedPassword, setWalletToBeDownloadedPassword] =
    useState<string>("");
-    const [walletToBeDownloadedPasswordConfirm, setWalletToBeDownloadedPasswordConfirm] =
-    useState<string>("");
+  const [
+    walletToBeDownloadedPasswordConfirm,
+    setWalletToBeDownloadedPasswordConfirm,
+  ] = useState<string>("");
  const [walletToBeDownloadedError, setWalletToBeDownloadedError] =
    useState<string>("");

@ -101,7 +123,6 @@ function App() {
        setRawWallet(pf);
        setExtstate("authenticated");
        setdecryptedWallet(null);
-      
      } catch (e) {
        console.log(e);

@ -110,8 +131,6 @@ function App() {
    },
  });

-
-
  // const storeDecryptedWallet = async () => {
  //   const res = await decryptStoredWallet("password", rawWallet);
  //   const wallet2 = new PhraseWallet(res, walletVersion);
@ -153,17 +172,17 @@ function App() {
  const saveWalletFunc = async (password: string) => {
    console.log({ decryptedWallet });
    let wallet = structuredClone(rawWallet);
-  
-      console.log("no", wallet);
-      const res = await decryptStoredWallet(password, wallet);
-      const wallet2 = new PhraseWallet(res, walletVersion);
-      console.log({ wallet2 });
-      wallet = await wallet2.generateSaveWalletData(
-        password,
-        crypto.kdfThreads,
-        () => {}
-      );
-    
+
+    console.log("no", wallet);
+    const res = await decryptStoredWallet(password, wallet);
+    const wallet2 = new PhraseWallet(res, walletVersion);
+    console.log({ wallet2 });
+    wallet = await wallet2.generateSaveWalletData(
+      password,
+      crypto.kdfThreads,
+      () => {}
+    );
+
    setWalletToBeDownloaded({
      wallet,
      qortAddress: rawWallet.address0,
@ -294,7 +313,7 @@ function App() {
        setCountdown(message.payload);
      }
    });
-  }, []); // Ensure this effect runs only once after component mount
+  }, []);

  console.log({ sendqortState });
  //param = isDecline
@ -427,153 +446,261 @@ function App() {
        setWalletToBeDownloadedError("Please confirm your password");
        return;
      }
-      if (walletToBeDownloadedPasswordConfirm !== walletToBeDownloadedPassword) {
+      if (
+        walletToBeDownloadedPasswordConfirm !== walletToBeDownloadedPassword
+      ) {
        setWalletToBeDownloadedError("Password fields do not match!");
        return;
      }
-        const res = await createAccount();
-        console.log("new account", res);
-        const wallet = await res.generateSaveWalletData(
-          walletToBeDownloadedPassword,
-          crypto.kdfThreads,
-          () => {}
-        );
-        setRawWallet(wallet);
-        storeWalletInfo(wallet);
-        setWalletToBeDownloaded({
-          wallet,
-          qortAddress: wallet.address0,
-        });
-    
+      const res = await createAccount();
+      console.log("new account", res);
+      const wallet = await res.generateSaveWalletData(
+        walletToBeDownloadedPassword,
+        crypto.kdfThreads,
+        () => {}
+      );
+      setRawWallet(wallet);
+      storeWalletInfo(wallet);
+      setWalletToBeDownloaded({
+        wallet,
+        qortAddress: wallet.address0,
+      });
    } catch (error: any) {
      setWalletToBeDownloadedError(error?.message);
    }
  };

-  const logoutFunc = ()=> {
+  const logoutFunc = () => {
    try {
      chrome.runtime.sendMessage({ action: "logout" }, (response) => {
        if (response) {
-          window.close()
+          window.close();
        }
      });
-    } catch (error) {
-      
-    }
+    } catch (error) {}
+  };
+
+  const returnToMain = ()=> {
+    setPaymentTo("");
+    setPaymentAmount(0);
+    setPaymentPassword("");
+    setSendPaymentError("");
+    setSendPaymentSuccess("");
+    setCountdown(null);
+    setWalletToBeDownloaded(null);
+    setWalletToBeDownloadedPassword("");
+    setExtstate("authenticated")
  }
  return (
-    <>
-      {/* {requestConnection && (
-        <>
-          <p>
-            the application {requestConnection?.hostname} is requesting a
-            connection
-          </p>
-          <button
-            onClick={() =>
-              responseToConnectionRequest(
-                true,
-                requestConnection?.hostname,
-                requestConnection.interactionId
-              )
-            }
-          >
-            accept
-          </button>
-          <button
-            onClick={() =>
-              responseToConnectionRequest(
-                false,
-                requestConnection?.hostname,
-                requestConnection.interactionId
-              )
-            }
-          >
-            decline
-          </button>
-        </>
-      )} */}
-
-      {/* <button onClick={storeDecryptedWallet}>Decrypt rawWallet</button> */}
-      {/* <button onClick={getWalletInfoFunc}>get saved Wallet info</button> */}
-      {/* <button onClick={getNameFunc}>Get Name</button> */}
-      {/* <button onClick={getBalanceFunc}>Get Balance</button> */}
-
+    <AppContainer>
      {extState === "not-authenticated" && (
        <>
-          <button onClick={()=> {
-            setExtstate("create-wallet")
-          }}>Create account</button>
-
-          <button {...getRootProps()}>
+          <Spacer height="48px" />
+          <img src={Logo1} />
+          <Spacer height="38px" />
+          <TextP
+            sx={{
+              textAlign: "center",
+              lineHeight: "15px",
+            }}
+          >
+            WELCOME TO <TextItalic>YOUR</TextItalic> <br></br>
+            <TextSpan> QORTAL WALLET</TextSpan>
+          </TextP>
+          <Spacer height="38px" />
+          <CustomButton {...getRootProps()}>
            <input {...getInputProps()} />
-            Existing account
-          </button>
+            Authenticate
+          </CustomButton>
+          <Spacer height="6px" />
+          <CustomButton
+            onClick={() => {
+              setExtstate("create-wallet");
+            }}
+          >
+            Create account
+          </CustomButton>
        </>
      )}
-      {extState !== "not-authenticated" && (
+      {/* {extState !== "not-authenticated" && (
        <button onClick={logoutFunc}>logout</button>
-      )}
+      )} */}
      {extState === "authenticated" && (
-        <>
-          <p>{userInfo?.name}</p>
-          <p>balance: {balance}</p>
-          <div>
-            {rawWallet?.address0 && <p>Welcome {rawWallet?.address0}</p>}
-          </div>
-          <button
+        <AuthenticatedContainer>
+          <AuthenticatedContainerInnerLeft>
+            <Spacer height="48px" />
+            <img src={Logo2} />
+            <Spacer height="32px" />
+            <TextP
+              sx={{
+                textAlign: "center",
+                lineHeight: "24px",
+                fontSize: "20px",
+              }}
+            >
+              {userInfo?.name}
+            </TextP>
+            <Spacer height="10px" />
+            <CopyToClipboard text={rawWallet?.address0}>
+              <AddressBox>
+                {rawWallet?.address0?.slice(0, 6)}...
+                {rawWallet?.address0?.slice(-4)} <img src={Copy} />
+              </AddressBox>
+            </CopyToClipboard>
+            <Spacer height="10px" />
+            <TextP
+              sx={{
+                textAlign: "center",
+                lineHeight: "24px",
+                fontSize: "20px",
+                fontWeight: 700,
+              }}
+            >
+              {balance?.toFixed(2)} QORT
+            </TextP>
+            {/* <p>balance: {balance}</p> */}
+            <Spacer height="55px" />
+
+            {/* <CustomButton
            onClick={() => {
              setExtstate("download-wallet");
            }}
          >
            Download Wallet
-          </button>
-          <button
-            onClick={() => {
-              setExtstate("send-qort");
-            }}
-          >
-            Send Coin
-          </button>
-        </>
+          </CustomButton> */}
+            <CustomButton
+              onClick={() => {
+                setExtstate("send-qort");
+              }}
+            >
+              Transfer QORT
+            </CustomButton>
+          </AuthenticatedContainerInnerLeft>
+          <AuthenticatedContainerInnerRight>
+            <Spacer height="20px" />
+            <img
+              onClick={() => {
+                setExtstate("download-wallet");
+              }}
+              src={Download}
+              style={{
+                cursor: "pointer",
+              }}
+            />
+            <Spacer height="20px" />
+            <img
+              src={Logout}
+              onClick={logoutFunc}
+              style={{
+                cursor: "pointer",
+              }}
+            />
+          </AuthenticatedContainerInnerRight>
+        </AuthenticatedContainer>
      )}
      {extState === "send-qort" && (
        <>
-          <p>balance: {balance}</p>
+          <Spacer height="22px" />
+          <Box
+            sx={{
+              display: "flex",
+              width: "100%",
+              justifyContent: "flex-start",
+              paddingLeft: '22px',
+              boxSizing: 'border-box'
+            }}
+          >
+            <img
+              style={{
+                cursor: "pointer",
+              }}
+              onClick={returnToMain}
+              src={Return}
+            />
+          </Box>
+          <Spacer height="35px" />
+          <Box sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+          }}>
+          <TextP
+            sx={{
+              textAlign: "start",
+              lineHeight: "24px",
+              fontSize: "20px",
+              fontWeight: 600,
+            }}
+          >
+            Transfer QORT
+          </TextP>
+          <Spacer height="35px" />
+          <TextP
+            sx={{
+              textAlign: "start",
+              lineHeight: "16px",
+              fontSize: "20px",
+              fontWeight: 600,
+              color: "rgba(255, 255, 255, 0.5)",
+            }}
+          >
+            Balance:
+          </TextP>
+          <TextP
+            sx={{
+              textAlign: "start",
+              lineHeight: "24px",
+              fontSize: "20px",
+              fontWeight: 700,
+            }}
+          >
+            {balance?.toFixed(2)} QORT
+          </TextP>
+          </Box>
+          <Spacer height="35px" />
+
          <Box>
-            <InputLabel htmlFor="standard-adornment-name">To</InputLabel>
-            <Input
+            <CustomLabel htmlFor="standard-adornment-name">To</CustomLabel>
+            <Spacer height="5px" />
+            <CustomInput
              id="standard-adornment-name"
              value={paymentTo}
              onChange={(e) => setPaymentTo(e.target.value)}
+              autoComplete="off"
            />
-
-            <InputLabel htmlFor="standard-adornment-amount">Amount</InputLabel>
-            <Input
+            <Spacer height="6px" />
+            <CustomLabel htmlFor="standard-adornment-amount">Amount</CustomLabel>
+            <Spacer height="5px" />
+            <CustomInput
              id="standard-adornment-amount"
              type="number"
              value={paymentAmount}
              onChange={(e) => setPaymentAmount(+e.target.value)}
+              autoComplete="off"
            />
-            <InputLabel htmlFor="standard-adornment-password">
+            <Spacer height="6px" />
+            <CustomLabel htmlFor="standard-adornment-password">
              Confirm wallet password
-            </InputLabel>
-            <Input
+            </CustomLabel>
+            <Spacer height="5px" />
+            <CustomInput
              type="password"
              id="standard-adornment-password"
              value={paymentPassword}
              onChange={(e) => setPaymentPassword(e.target.value)}
+              autoComplete="off"
            />
          </Box>
          <Typography color="errror">{sendPaymentError}</Typography>
          <Typography>{sendPaymentSuccess}</Typography>
-          <button
+          <Spacer height="25px" />
+          <CustomButton
            onClick={() => {
              sendCoinFunc();
            }}
          >
-            Send Coin
-          </button>
+            Send
+          </CustomButton>
        </>
      )}
      {extState === "web-app-request-payment" && (
@ -632,9 +759,13 @@ function App() {
        <>
          <p>the application {requestConnection?.hostname} you Authenticate</p>
          <p>Either create a new account or import an existing one</p>
-          <button onClick={()=> {
-            setExtstate("create-wallet")
-          }}>Create account</button>
+          <button
+            onClick={() => {
+              setExtstate("create-wallet");
+            }}
+          >
+            Create account
+          </button>
          <button {...getRootProps()}>
            <input {...getInputProps()} />
            Existing account
@ -662,7 +793,9 @@ function App() {
              <button onClick={confirmPasswordToDownload}>
                Confirm password
              </button>
-              <Typography color="errror">{walletToBeDownloadedError}</Typography>
+              <Typography color="errror">
+                {walletToBeDownloadedError}
+              </Typography>
            </>
          )}

@ -675,7 +808,6 @@ function App() {
      )}
      {extState === "create-wallet" && (
        <>
-         
          {!walletToBeDownloaded && (
            <>
              <InputLabel htmlFor="standard-adornment-password">
@ -689,7 +821,7 @@ function App() {
                  setWalletToBeDownloadedPassword(e.target.value)
                }
              />
-               <InputLabel htmlFor="standard-adornment-password">
+              <InputLabel htmlFor="standard-adornment-password">
                Confirm wallet password
              </InputLabel>
              <Input
@ -700,10 +832,10 @@ function App() {
                  setWalletToBeDownloadedPasswordConfirm(e.target.value)
                }
              />
-              <button onClick={createAccountFunc}>
-                Create Account
-              </button>
-              <Typography color="errror">{walletToBeDownloadedError}</Typography>
+              <button onClick={createAccountFunc}>Create Account</button>
+              <Typography color="errror">
+                {walletToBeDownloadedError}
+              </Typography>
            </>
          )}

@ -728,7 +860,7 @@ function App() {
          {({ remainingTime }) => remainingTime}
        </CountdownCircleTimer>
      )}
-    </>
+    </AppContainer>
  );
 }

--- a/src/assets/svgs/Copy.svg
+++ b/src/assets/svgs/Copy.svg
@ -0,0 +1,3 @@
+<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.92857 0.5H8.57143C9.36071 0.5 10 1.13929 10 1.92857V6.57143C10 7.36071 9.36071 8 8.57143 8H8.21429V4.42857C8.21429 3.24643 7.25357 2.28571 6.07143 2.28571H2.5V1.92857C2.5 1.13929 3.13929 0.5 3.92857 0.5ZM1.42857 3H6.07143C6.86041 3 7.5 3.63959 7.5 4.42857V9.07143C7.5 9.86041 6.86041 10.5 6.07143 10.5H1.42857C0.639593 10.5 0 9.86041 0 9.07143V4.42857C0 3.63959 0.639593 3 1.42857 3Z" fill="white" fill-opacity="0.5"/>
+</svg>
--- a/src/assets/svgs/Download.svg
+++ b/src/assets/svgs/Download.svg
@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8047 0.393196V7.21185H16.3036L10.0003 13.5139L3.69697 7.21185H7.19584V0H12.8045L12.8047 0.393196ZM2.7047 16.8587V13.9861H0V18.6179C0 19.3774 0.622589 20 1.38213 20H18.6179C19.3774 20 20 19.3774 20 18.6179V13.9861H17.2962V17.2963L2.70461 17.2954L2.7047 16.8587Z" fill="white" fill-opacity="0.5"/>
+</svg>
--- a/src/assets/svgs/Info.svg
+++ b/src/assets/svgs/Info.svg
@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4.06452 0 0 4.06452 0 9C0 13.9355 4.06452 18 9 18C13.9355 18 18 13.9355 18 9C18 4.06452 13.8629 0 9 0ZM9 16.8387C4.71774 16.8387 1.16129 13.2823 1.16129 9C1.16129 4.71774 4.71774 1.16129 9 1.16129C13.2823 1.16129 16.8387 4.71774 16.8387 9C16.8387 13.2823 13.2823 16.8387 9 16.8387ZM9.79861 13.2097C9.79861 13.5726 9.50829 13.9355 9.0728 13.9355H8.85506C8.49216 13.9355 8.12926 13.6451 8.12926 13.2097V7.18545C8.12926 6.82255 8.41958 6.45965 8.85506 6.45965H9.0728C9.43571 6.45965 9.79861 6.74997 9.79861 7.18545V13.2097ZM9.79823 4.86286C9.79823 5.30379 9.44078 5.66125 8.99984 5.66125C8.5589 5.66125 8.20145 5.30379 8.20145 4.86286C8.20145 4.42192 8.5589 4.06447 8.99984 4.06447C9.44078 4.06447 9.79823 4.42192 9.79823 4.86286Z" fill="white" fill-opacity="0.5"/>
+</svg>
--- a/src/assets/svgs/Level.svg
+++ b/src/assets/svgs/Level.svg
@ -0,0 +1,3 @@
+<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 2L1 7V17L10 22L19 17V7L10 2Z" stroke="white" stroke-opacity="0.5" stroke-width="2"/>
+</svg>
--- a/src/assets/svgs/Logo1.svg
+++ b/src/assets/svgs/Logo1.svg
--- a/src/assets/svgs/Logo2.svg
+++ b/src/assets/svgs/Logo2.svg
--- a/src/assets/svgs/Logout.svg
+++ b/src/assets/svgs/Logout.svg
@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.56485 0H16.3611C17.2662 0 18 0.727797 18 1.62558V18.3744C18 19.2722 17.2662 20 16.3611 20H7.56485C6.65969 20 5.92593 19.2722 5.92593 18.3744V12.6013H10.6168C11.4569 12.6013 12.1404 11.9039 12.1404 11.0467V8.87329C12.1404 8.01613 11.4569 7.31875 10.6168 7.31875H5.92593V1.62558C5.92593 0.727797 6.65969 0 7.56485 0ZM11.1667 11.0467C11.1667 11.3719 10.9205 11.6354 10.6168 11.6354H4.8144C4.74521 11.6354 4.68911 11.6955 4.68911 11.7696V12.8632C4.68911 13.3492 4.17007 13.6259 3.8078 13.3329L0.218431 10.4298C-0.0728102 10.1942 -0.0728102 9.72579 0.218431 9.49024L3.8078 6.58709C4.17005 6.29409 4.68911 6.57077 4.68911 7.05684V8.1504C4.68911 8.2245 4.74521 8.28454 4.8144 8.28454H10.6168C10.9205 8.28454 11.1667 8.54813 11.1667 8.87329V11.0467Z" fill="white" fill-opacity="0.5"/>
+</svg>
--- a/src/assets/svgs/Return.svg
+++ b/src/assets/svgs/Return.svg
@ -0,0 +1,3 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.645 5.81803H15C15.9471 5.81803 16.8557 6.20131 17.5257 6.88278C18.195 7.56497 18.5714 8.49007 18.5714 9.45445V10.909C18.5714 11.8734 18.195 12.7985 17.5257 13.4807C16.8557 14.1622 15.9471 14.5454 15 14.5454C12.0164 14.5454 8.57143 14.5454 8.57143 14.5454C8.17714 14.5454 7.85714 14.8713 7.85714 15.2727C7.85714 15.6742 8.17714 16 8.57143 16H15C16.3264 16 17.5979 15.464 18.5357 14.5091C19.4736 13.5541 20 12.2596 20 10.909C20 10.4268 20 9.93664 20 9.45445C20 8.10461 19.4736 6.80932 18.5357 5.8544C17.5979 4.9002 16.3264 4.36347 15 4.36347H2.645L6.17929 1.27906C6.47857 1.01797 6.51286 0.55832 6.25643 0.253588C6 -0.0511433 5.54857 -0.0860541 5.24929 0.175041L0.249285 4.53874C0.0914279 4.67692 0 4.87838 0 5.09075C0 5.30312 0.0914279 5.50458 0.249285 5.64276L5.24929 10.0065C5.54857 10.2676 6 10.2326 6.25643 9.92791C6.51286 9.62318 6.47857 9.16353 6.17929 8.90244L2.645 5.81803Z" fill="white" fill-opacity="0.5"/>
+</svg>
--- a/src/common/Spacer.tsx
+++ b/src/common/Spacer.tsx
@ -0,0 +1,13 @@
+import { Box } from "@mui/material";
+
+export const Spacer = ({ height }: any) => {
+    return (
+      <Box
+        sx={{
+          height: height,
+          display: 'flex',
+          flexShrink: 0
+        }}
+      />
+    );
+  };
--- a/src/index.css
+++ b/src/index.css
@ -1,68 +1,32 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
+@font-face {
+  font-family: 'Inter';
+  src: url('./styles/fonts/Inter-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('./styles/fonts/Inter-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('./styles/fonts/Inter-Bold.ttf') format('truetype');
+  font-weight: 700;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('./styles/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }

-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
+
+:root {
+  padding: 0px;
+  margin: 0px;
+  box-sizing: border-box !important;
 }

 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+  margin: 0px;
+}
--- a/src/styles/fonts/Cairo.ttf
+++ b/src/styles/fonts/Cairo.ttf
--- a/src/styles/fonts/Cambon-Light.ttf
+++ b/src/styles/fonts/Cambon-Light.ttf
--- a/src/styles/fonts/Catamaran.ttf
+++ b/src/styles/fonts/Catamaran.ttf
--- a/src/styles/fonts/Inter-Black.ttf
+++ b/src/styles/fonts/Inter-Black.ttf
--- a/src/styles/fonts/Inter-Bold.ttf
+++ b/src/styles/fonts/Inter-Bold.ttf
--- a/src/styles/fonts/Inter-ExtraBold.ttf
+++ b/src/styles/fonts/Inter-ExtraBold.ttf
--- a/src/styles/fonts/Inter-ExtraLight.ttf
+++ b/src/styles/fonts/Inter-ExtraLight.ttf
--- a/src/styles/fonts/Inter-Light.ttf
+++ b/src/styles/fonts/Inter-Light.ttf
--- a/src/styles/fonts/Inter-Medium.ttf
+++ b/src/styles/fonts/Inter-Medium.ttf
--- a/src/styles/fonts/Inter-Regular.ttf
+++ b/src/styles/fonts/Inter-Regular.ttf
--- a/src/styles/fonts/Inter-SemiBold.ttf
+++ b/src/styles/fonts/Inter-SemiBold.ttf
--- a/src/styles/fonts/Inter-Thin.ttf
+++ b/src/styles/fonts/Inter-Thin.ttf
--- a/src/styles/fonts/Oxygen.ttf
+++ b/src/styles/fonts/Oxygen.ttf
--- a/src/styles/fonts/Raleway.ttf
+++ b/src/styles/fonts/Raleway.ttf
--- a/src/styles/fonts/Roboto-Black.ttf
+++ b/src/styles/fonts/Roboto-Black.ttf
--- a/src/styles/fonts/Roboto-BlackItalic.ttf
+++ b/src/styles/fonts/Roboto-BlackItalic.ttf
--- a/src/styles/fonts/Roboto-Bold.ttf
+++ b/src/styles/fonts/Roboto-Bold.ttf
--- a/src/styles/fonts/Roboto-BoldItalic.ttf
+++ b/src/styles/fonts/Roboto-BoldItalic.ttf
--- a/src/styles/fonts/Roboto-Italic.ttf
+++ b/src/styles/fonts/Roboto-Italic.ttf
--- a/src/styles/fonts/Roboto-Light.ttf
+++ b/src/styles/fonts/Roboto-Light.ttf
--- a/src/styles/fonts/Roboto-LightItalic.ttf
+++ b/src/styles/fonts/Roboto-LightItalic.ttf
--- a/src/styles/fonts/Roboto-Medium.ttf
+++ b/src/styles/fonts/Roboto-Medium.ttf
--- a/src/styles/fonts/Roboto-MediumItalic.ttf
+++ b/src/styles/fonts/Roboto-MediumItalic.ttf
--- a/src/styles/fonts/Roboto-Regular.ttf
+++ b/src/styles/fonts/Roboto-Regular.ttf
--- a/src/styles/fonts/Roboto-Thin.ttf
+++ b/src/styles/fonts/Roboto-Thin.ttf
--- a/src/styles/fonts/Roboto-ThinItalic.ttf
+++ b/src/styles/fonts/Roboto-ThinItalic.ttf
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@ -0,0 +1,184 @@
+import { createTheme } from '@mui/material/styles'
+
+
+// Extend the Theme interface
+
+const commonThemeOptions = {
+  typography: {
+    fontFamily: [
+      'Roboto'
+    ].join(','),
+    h1: {
+      fontSize: '2rem',
+      fontWeight: 600
+    },
+    h2: {
+      fontSize: '1.75rem',
+      fontWeight: 500
+    },
+    h3: {
+      fontSize: '1.5rem',
+      fontWeight: 500
+    },
+    h4: {
+      fontSize: '1.25rem',
+      fontWeight: 500
+    },
+    h5: {
+      fontSize: '1rem',
+      fontWeight: 500
+    },
+    h6: {
+      fontSize: '0.875rem',
+      fontWeight: 500
+    },
+    body1: {
+      fontSize: '23px',
+      fontWeight: 400,
+      lineHeight: 1.5,
+      letterSpacing: '0.5px'
+    },
+
+    body2: {
+      fontSize: '18px',
+      fontWeight: 400,
+      lineHeight: 1.4,
+      letterSpacing: '0.2px'
+    }
+  },
+  spacing: 8,
+  shape: {
+    borderRadius: 4
+  },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 900,
+      lg: 1200,
+      xl: 1536
+    }
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          backgroundColor: 'inherit',
+          transition: 'filter 0.3s ease-in-out',
+          '&:hover': {
+            filter: 'brightness(1.1)'
+          }
+        }
+      },
+      defaultProps: {
+        disableElevation: true,
+        disableRipple: true
+      }
+    },
+    MuiModal: {
+      styleOverrides: {
+        root: {
+          zIndex: 50000,
+        },
+      }
+
+    }
+  }
+}
+
+const lightTheme = createTheme({
+  ...commonThemeOptions,
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#f4f4fb',
+      dark: '#eaecf4',
+      light: '#f9f9fd'
+    },
+    secondary: {
+      main: '#1EAAF1'
+    },
+    background: {
+      default: '#fafafa',
+      paper: '#f0f0f0'
+    },
+    text: {
+      primary: '#000000',
+      secondary: '#525252'
+    }
+  },
+
+  components: {
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          boxShadow:
+            'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;',
+          borderRadius: '8px',
+          transition: 'all 0.3s ease-in-out',
+          '&:hover': {
+            cursor: 'pointer',
+            boxShadow:
+              'rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;'
+          }
+        }
+      }
+    },
+    MuiIcon: {
+      defaultProps: {
+        style: {
+          color: '#000000'
+        }
+      }
+    }
+  },
+})
+
+const darkTheme = createTheme({
+  ...commonThemeOptions,
+  palette: {
+    mode: 'dark',
+    primary: {
+      main: '#2e3d60',
+      dark: "#1a2744",
+      light: "#3f4b66",
+    },
+    secondary: {
+      main: '#45adff'
+    },
+
+    background: {
+      default: '#313338',
+      paper: "#1e1e20"
+    },
+    text: {
+      primary: '#ffffff',
+      secondary: '#b3b3b3'
+    }
+  },
+  components: {
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          boxShadow: "none",
+          borderRadius: '8px',
+          transition: 'all 0.3s ease-in-out',
+          '&:hover': {
+            cursor: 'pointer',
+            boxShadow:
+              ' 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);'
+          }
+        }
+      }
+    },
+    MuiIcon: {
+      defaultProps: {
+        style: {
+          color: '#ffffff'
+        }
+      }
+    }
+  },
+})
+
+export { lightTheme, darkTheme }