Exchange App

.eslintrc

@@ -21,6 +21,7 @@
       {
         "extensions": [".js", ".jsx"]
       }
-    ]
+    ],
+    "prettier/prettier": ["error", { "endOfLine": "auto" }]
   }
 }

package.json

@@ -8,7 +8,10 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1",
+    "react-router-dom": "^6.14.1",
     "react-scripts": "^5.0.1",
+    "styled-components": "^6.0.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.css

@@ -1,38 +1,42 @@
-.App {
-  text-align: center;
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
+#main {
+  width: 100vw;
+  height: fit-content;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  background-color: #1b182e;
+}
+
+#nav {
+  width: 100vw;
+  background-color: #1f1e25;
+  color: #fff;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 0.4rem 5rem;
+}
+.welcome {
+  font-size: 3rem;
+  background: -webkit-linear-gradient(#083fd0, #0179be, #00efc5);
+  background-clip: initial;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
-.App-link {
-  color: #61dafb;
+small {
+  color: #1b182e;
+  font-size: 1rem;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+h3 {
+  font-size: 1.5rem;
+  text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4);
+  font-weight: 500;
 }

src/App.jsx

@@ -1,26 +1,107 @@
-import logo from './logo.svg';
+/* eslint-disable react/jsx-no-constructed-context-values */
+import React, { useState, useEffect } from 'react';
 import './App.css';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import MyContext from './context/context';
+import Transaction from './pages/Transaction_Page/Transaction';
+import { getFromLocalStorage, saveToLocalStorage } from './services/utils';
 
 function App() {
+  const ApiKey = '6ebde43530287d1fef886116a4bd36a0';
+  const options = { method: 'GET', headers: { accept: 'application/json' } };
+  const [baseCurrency, setMyBaseCurrency] = useState({
+    baseAmnt: 0,
+    baseCurr: '',
+  });
+  const [dispWallet, setDispWallet] = useState(null);
+  const [wallet, setWallet] = useState([]);
+  const [modal, setModal] = useState(false);
+  const [transModal, setTransModal] = useState(false);
+  const [modal2, setModal2] = useState(false);
+  const [fetchedCurrencyRates, setFetchedCurrencyRates] = useState([]);
+
+  useEffect(() => {
+    const baseC = getFromLocalStorage('baseCurr');
+    const baseA = getFromLocalStorage('baseAmount');
+    const fetchData = async () => {
+      try {
+        const response = await fetch(
+          `https://api.fastforex.io/fetch-all?api_key=${ApiKey}`,
+          options
+        );
+        const data = await response.json();
+        setFetchedCurrencyRates(data.results);
+        if (!baseC && !baseA) {
+          setMyBaseCurrency((prev) => ({
+            ...prev,
+            baseCurr: data.base,
+            baseAmnt: 0,
+          }));
+          saveToLocalStorage('baseCurr', data.base);
+          saveToLocalStorage('baseAmount', baseCurrency.baseAmnt);
+        } else {
+          setMyBaseCurrency((prev) => ({
+            ...prev,
+            baseCurr: baseC,
+            baseAmnt: baseA,
+          }));
+        }
+      } catch (err) {
+        throw new Error(err);
+      }
+    };
+    fetchData();
+
+    const walletFromLocalStorage = getFromLocalStorage('wallet') || [];
+    // const baseFromLocalStorage = getFromLocalStorage('baseCurr');
+    // setMyBaseCurrency(baseFromLocalStorage);
+    // sumWallet(
+    //   walletFromLocalStorage,
+    //   baseCurrency.baseCurr,
+    //   fetchedCurrencyRates
+    // );
+
+    setDispWallet(walletFromLocalStorage);
+    setMyBaseCurrency((prev) => ({ ...prev, baseAmnt: baseA }));
+  }, []);
+
+  const toogleModal2 = () => {
+    setModal2((prev) => !prev);
+  };
+
+  const toogleModal = () => {
+    setModal((prev) => !prev);
+  };
+
+  const toogleTransModal = () => {
+    setTransModal((prev) => !prev);
+  };
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit
-          <code>src/App.js</code>
-          and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <MyContext.Provider
+      value={{
+        // fetchedCurrencyOptions,
+        fetchedCurrencyRates,
+        toogleModal,
+        modal,
+        wallet,
+        setWallet,
+        baseCurrency,
+        setMyBaseCurrency,
+        dispWallet,
+        setDispWallet,
+        toogleModal2,
+        modal2,
+        transModal,
+        toogleTransModal,
+      }}
+    >
+      <BrowserRouter>
+        <Routes>
+          <Route index path="/" element={<Transaction />} />
+        </Routes>
+      </BrowserRouter>
+    </MyContext.Provider>
   );
 }
 

src/App.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 import { render, screen } from '@testing-library/react';
 import App from './App';
 

src/components/DepositModal/DepositModal.jsx

@@ -0,0 +1,114 @@
+import React, { useState, useContext } from 'react';
+import {
+  Main,
+  MainM,
+  DepositInput,
+  DepositForm,
+  Inputsec,
+  Input,
+  Select,
+} from './styles';
+import { Button } from '../../pages/Transaction_Page/styles';
+import MyContext from '../../context/context';
+import { saveToLocalStorage, toBaseCurrency } from '../../services/utils';
+import CloseBtn from '../currency-card/CloseBtn/CloseBtn';
+
+function DepositModal() {
+  const [money, setMoney] = useState({ amount: 0, currency: '' });
+  const {
+    wallet,
+    dispWallet,
+    setDispWallet,
+    fetchedCurrencyRates,
+    toogleModal,
+    baseCurrency,
+    setMyBaseCurrency,
+  } = useContext(MyContext);
+
+  const depositToWallet = () => {
+    const prevCur = dispWallet.find((wall) => wall.currency === money.currency);
+    if (prevCur) {
+      const update = dispWallet.map((cur) => {
+        if (cur.currency === money.currency) {
+          return { ...cur, amount: +cur.amount + +money.amount };
+        }
+        return cur;
+      });
+
+      // calculate baseAmount;
+      const res = toBaseCurrency(update, baseCurrency, fetchedCurrencyRates);
+      // console.log({ res, update, baseCurrency, fetchedCurrencyRates });
+      setMyBaseCurrency((prev) => ({ ...prev, baseAmnt: res }));
+
+      setDispWallet([...update]);
+      saveToLocalStorage('wallet', [...update]);
+      return;
+    }
+    const update = wallet;
+    update.push(money);
+    setDispWallet([...update]);
+    const res = toBaseCurrency(update, baseCurrency, fetchedCurrencyRates);
+    // console.log({ res, update, baseCurrency, fetchedCurrencyRates });
+    setMyBaseCurrency((prev) => ({ ...prev, baseAmnt: res }));
+    saveToLocalStorage('wallet', [...update]);
+  };
+
+  const handleAmntChange = (e) => {
+    setMoney((prev) => ({
+      ...prev,
+      amount: e.target.value,
+    }));
+  };
+
+  const handleCurrChange = (e) => {
+    setMoney((prev) => ({
+      ...prev,
+      currency: e.target.value,
+    }));
+  };
+
+  return (
+    <Main>
+      <CloseBtn onClick={toogleModal} />
+      <MainM>
+        <h1>Make a deposit!</h1>
+        <DepositInput>
+          <DepositForm
+            onSubmit={(e) => {
+              e.preventDefault(e);
+              depositToWallet();
+              toogleModal();
+            }}
+          >
+            <Inputsec>
+              <Input
+                type="number"
+                id="amount"
+                value={money.amount}
+                placeholder="Make Deposit here"
+                onChange={handleAmntChange}
+                required
+              />
+              <Select
+                name="currency"
+                id="money"
+                value={money.currency}
+                onChange={handleCurrChange}
+              >
+                {[...Object.keys(fetchedCurrencyRates)].map((option) => (
+                  <option value={option} id="option" key={option}>
+                    {option}
+                    {/* {`${option} : ${fetchedCurrencyRates[option]}`} */}
+                  </option>
+                ))}
+              </Select>
+            </Inputsec>
+            <Button type="submit">Deposit +</Button>
+          </DepositForm>
+        </DepositInput>
+      </MainM>
+    </Main>
+  );
+}
+
+export default DepositModal;