Merge pull request #102 from MidasXIV/development

Development
MidasXIV · Jul 6, 2023 · d5865b8 · d5865b8 · vercel · Jul 6, 2023
2 parents 79bb0eb + 7d8db19
commit d5865b8
Show file tree

Hide file tree

Showing 69 changed files with 31,915 additions and 10,947 deletions.
diff --git a/next.config.js b/next.config.js
@@ -1,16 +1,16 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 // next.config.js
 const path = require("path");
-const withPWA = require("next-pwa");
+const withPWA = require("next-pwa")({
+  dest: "public",
+  disable: false,
+  // runtimeCaching,Aet this up
+  customWorkerDir: "src/service-worker"
+});
+
 const runtimeCaching = require("next-pwa/cache");
 
 module.exports = withPWA({
-  pwa: {
-    dest: "public",
-    disable: false,
-    runtimeCaching,
-    customWorkerDir: "src/service-worker"
-  },
   images: {
     domains: [
       "images.unsplash.com",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,16 +26,19 @@
     "pl:dev:desktop": "npm run profile-layout:dev -- -v desktop"
   },
   "dependencies": {
-    "@mantine/core": "^2.5.1",
-    "@mantine/hooks": "^2.5.1",
-    "axios": "^0.21.4",
+    "@emotion/react": "^11.11.1",
+    "@mantine/core": "^6.0.14",
+    "@mantine/form": "^6.0.14",
+    "@mantine/hooks": "^6.0.14",
+    "axios": "^1.4.0",
     "cheerio": "^1.0.0-rc.10",
     "classnames": "^2.3.1",
     "crypto": "^1.0.1",
+    "fast-memoize": "^2.5.2",
     "mongodb": "^4.10.0",
     "next": "^12.2.3",
     "next-auth": "^4.20.1",
-    "next-pwa": "^5.4.4",
+    "next-pwa": "^5.6.0",
     "nprogress": "^0.2.0",
     "react": "^18.2.0",
     "react-data-table-component": "^7.5.3",
@@ -44,7 +47,6 @@
     "slick-carousel": "^1.8.1",
     "styled-components": "^5.3.3",
     "swr": "^1.3.0",
-    "tailwindcss": "^2.2.19",
     "web-push": "^3.4.5"
   },
   "devDependencies": {
@@ -56,7 +58,7 @@
     "@types/react": "^17.0.38",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.14",
     "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -68,15 +70,14 @@
     "eslint-plugin-react": "^7.28.0",
     "jest": "^28.1.3",
     "jest-cucumber": "^3.0.1",
-    "postcss": "^8.4.5",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-preset-env": "^6.7.0",
+    "postcss": "^8.4.21",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
-    "puppeteer-core": "^10.4.0",
-    "rimraf": "^3.0.2",
+    "puppeteer-core": "^19.8.0",
+    "rimraf": "^4.4.1",
     "stdio": "^2.1.1",
+    "tailwindcss": "^3.2.7",
     "ts-jest": "^28.0.7",
-    "typescript": "^4.5.4"
+    "typescript": "^5.0.2"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,19 +1,6 @@
 module.exports = {
-  plugins: [
-    "tailwindcss",
-    "autoprefixer",
-    "postcss-flexbugs-fixes",
-    [
-      "postcss-preset-env",
-      {
-        autoprefixer: {
-          flexbox: "no-2009"
-        },
-        stage: 3,
-        features: {
-          "custom-properties": false
-        }
-      }
-    ]
-  ]
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
 };
diff --git a/src/components/add-asset-modal/add-crypto-form.tsx b/src/components/add-asset-modal/add-crypto-form.tsx
@@ -1,5 +1,5 @@
-import { useForm } from "@mantine/hooks";
-import { InputWrapper, NumberInput } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { Input, NumberInput } from "@mantine/core";
 import { FC, useState } from "react";
 import CryptocurrencySearchBox from "../cryptocurrency-search-box";
 import SlideToSubmit from "../slide-to-submit";
@@ -53,7 +53,7 @@ const AddCryptoForm: FC<AddCryptoFormProps> = ({ onSubmit }) => {
   return (
     <form>
       <section className="py-2 px-2">
-        <InputWrapper
+        <Input.Wrapper
           id="cryptocurrency-searchbox"
           required
           label="Token name"
@@ -68,38 +68,30 @@ const AddCryptoForm: FC<AddCryptoFormProps> = ({ onSubmit }) => {
               form.setFieldValue("token", token);
             }}
           />
-        </InputWrapper>
-        <InputWrapper
+        </Input.Wrapper>
+        <NumberInput
           id="cryptocurrency-holdings"
           required
           label="Token Holdings"
           description="Enter the number of tokens you own"
           className="pb-2"
-        >
-          <NumberInput
-            id="cryptocurrency-holdings"
-            placeholder="1000"
-            variant="filled"
-            value={form.values.holdings}
-            onChange={value => form.setFieldValue("holdings", value)}
-          />
-        </InputWrapper>
+          placeholder="1000"
+          variant="filled"
+          value={form.values.holdings}
+          onChange={value => form.setFieldValue("holdings", Number(value))}
+        />
 
-        <InputWrapper
+        <NumberInput
           id="cryptocurrency-fiat"
           required
           label="Fiat"
           description="Fiat spent on acquiring holdings"
           className="pb-2"
-        >
-          <NumberInput
-            id="cryptocurrency-fiat"
-            placeholder="500"
-            variant="filled"
-            value={form.values.fiat}
-            onChange={value => form.setFieldValue("fiat", value)}
-          />
-        </InputWrapper>
+          placeholder="500"
+          variant="filled"
+          value={form.values.fiat}
+          onChange={value => form.setFieldValue("fiat", Number(value))}
+        />
 
         {tokenInformation ? <CryptoInformationTable coin={tokenInformation} /> : null}
         <SlideToSubmit onSubmit={handleFormSubmit} />

diff --git a/src/components/add-asset-modal/add-stock-form.tsx b/src/components/add-asset-modal/add-stock-form.tsx
@@ -1,5 +1,5 @@
-import { useForm } from "@mantine/hooks";
-import { InputWrapper, NumberInput } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { Input, NumberInput } from "@mantine/core";
 import { FC, useState } from "react";
 import SlideToSubmit from "../slide-to-submit";
 import StockSearchCombobox from "../stock-search-combobox";
@@ -62,7 +62,7 @@ const AddStockForm: FC<AddStockFormProps> = ({ onSubmit }) => {
   return (
     <form>
       <section className="py-2 px-2">
-        <InputWrapper id="stock-searchbox" required label="Ticker" className="pb-2">
+        <Input.Wrapper id="stock-searchbox" required label="Ticker" className="pb-2">
           <StockSearchCombobox
             searchTerm={searchTerm}
             setSearchTerm={ticker => {
@@ -72,26 +72,26 @@ const AddStockForm: FC<AddStockFormProps> = ({ onSubmit }) => {
             }}
             state={searchState}
           />
-        </InputWrapper>
-        <InputWrapper id="stock-shares" required label="Shares" className="pb-2">
+        </Input.Wrapper>
+        <Input.Wrapper id="stock-shares" required label="Shares" className="pb-2">
           <NumberInput
             id="stock-shares"
             placeholder="10"
             variant="filled"
             value={form.values.shares}
-            onChange={shares => form.setFieldValue("shares", shares)}
+            onChange={shares => form.setFieldValue("shares", Number(shares))}
           />
-        </InputWrapper>
+        </Input.Wrapper>
 
-        <InputWrapper id="cryptocurrency-fiat" required label="Buy Price" className="pb-2">
+        <Input.Wrapper id="cryptocurrency-fiat" required label="Buy Price" className="pb-2">
           <NumberInput
             id="cryptocurrency-fiat"
             placeholder="500"
             variant="filled"
             value={form.values.fiat}
-            onChange={fiat => form.setFieldValue("fiat", fiat)}
+            onChange={fiat => form.setFieldValue("fiat", Number(fiat))}
           />
-        </InputWrapper>
+        </Input.Wrapper>
 
         {stockInformation ? <StockInformationTable stock={stockInformation} /> : null}
         <SlideToSubmit onSubmit={handleFormSubmit} />

diff --git a/src/components/double-click-button/index.tsx b/src/components/double-click-button/index.tsx
@@ -38,9 +38,8 @@ function DoubleClickButton({
     <Tooltip
       label={tooltipLabel}
       opened={isActive}
-      transition="fade"
-      placement="end"
-      transitionDuration={200}
+      transitionProps={{ transition: "fade", duration: 200 }}
+      position="bottom-end"
     >
       <button
         type="button"

diff --git a/src/components/economic-events-panel/index.tsx b/src/components/economic-events-panel/index.tsx
@@ -1,11 +1,11 @@
 import { FC, useEffect, useState } from "react";
 import cn from "classnames";
-import fetchEconomicEvents from "../../util/fetchEconomicEvents";
 import {
   buildEventDate,
   formatDateString,
   getTimeDifferenceString
 } from "../../util/timeAndDateHelpers";
+import api from "../../services/create-service";
 
 const LoadingListItem = () => (
   <li>
@@ -116,7 +116,7 @@ const EconomicEventsPanel: FC<any> = () => {
   useEffect(() => {
     setLoading(true);
 
-    fetchEconomicEvents().then(({ status, data }) => {
+    api.fetchEconomicEvents().then(({ status, data }) => {
       setLoading(false);
 
       if (status === 200) {

diff --git a/src/components/edit-asset-modal/edit-crypto-form.tsx b/src/components/edit-asset-modal/edit-crypto-form.tsx
@@ -1,5 +1,5 @@
-import { useForm } from "@mantine/hooks";
-import { InputWrapper, NumberInput } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { NumberInput } from "@mantine/core";
 import { FC, useEffect, useState } from "react";
 import SlideToSubmit from "../slide-to-submit";
 import { fetchCoinInfo } from "../../util/cryptocurrencyService";
@@ -60,38 +60,29 @@ const EditCryptoForm: FC<EditCryptoFormProps> = ({ asset, onSubmit }) => {
     <form>
       <section className="py-2 px-2">
         {tokenInformation ? <CryptoInformationTable coin={tokenInformation} /> : null}
-        <InputWrapper
+        <NumberInput
           id="cryptocurrency-holdings"
           required
           label="Token Holdings"
           description="Enter the number of tokens you own"
           className="pb-2"
-        >
-          <NumberInput
-            id="cryptocurrency-holdings"
-            placeholder="1000"
-            variant="filled"
-            value={form.values.holdings}
-            onChange={value => form.setFieldValue("holdings", value)}
-          />
-        </InputWrapper>
+          placeholder="1000"
+          variant="filled"
+          value={form.values.holdings}
+          onChange={value => form.setFieldValue("holdings", Number(value))}
+        />
 
-        <InputWrapper
+        <NumberInput
           id="cryptocurrency-fiat"
           required
           label="Fiat"
           description="Fiat spent on acquiring holdings"
           className="pb-2"
-        >
-          <NumberInput
-            id="cryptocurrency-fiat"
-            placeholder="500"
-            variant="filled"
-            value={form.values.fiat}
-            onChange={value => form.setFieldValue("fiat", value)}
-          />
-        </InputWrapper>
-
+          placeholder="500"
+          variant="filled"
+          value={form.values.fiat}
+          onChange={value => form.setFieldValue("fiat", Number(value))}
+        />
         <SlideToSubmit onSubmit={handleFormSubmit} />
       </section>
     </form>

diff --git a/src/components/exchanges-form/binance/button.tsx b/src/components/exchanges-form/binance/button.tsx
@@ -6,7 +6,9 @@ import { UserSettingsExchangeButton } from "../types";
 type BinanceButtonProps = UserSettingsExchangeButton;
 
 const BinanceButton: FC<BinanceButtonProps> = ({ onClick }) => (
-  <Button onClick={() => onClick(ExchangeKeys.BINANCE)}>Binance</Button>
+  <Button key="user-settings-binance-exchange-button" onClick={() => onClick(ExchangeKeys.BINANCE)}>
+    Binance
+  </Button>
 );
 
 export default BinanceButton;
diff --git a/src/components/exchanges-form/binance/index.tsx b/src/components/exchanges-form/binance/index.tsx
@@ -1,5 +1,5 @@
-import { useForm } from "@mantine/hooks";
-import { InputWrapper, Input, Button } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { TextInput, Button } from "@mantine/core";
 import { FC } from "react";
 import { encrypt, decrypt } from "../../../lib/crypto";
 
@@ -25,37 +25,28 @@ const BinanceForm: FC<unknown> = () => {
       })}
     >
       <section className="py-8">
-        <InputWrapper
+        <TextInput
           id="binance-api-key"
           required
           label="Binance API Key"
           description="Please enter your binance API key"
           className="pb-2"
-        >
-          <Input
-            id="binance-api-key"
-            placeholder="API key"
-            variant="filled"
-            value={form.values.binanceAPI}
-            onChange={event => form.setFieldValue("binanceAPI", event.currentTarget.value)}
-          />
-        </InputWrapper>
-        <InputWrapper
+          placeholder="API key"
+          variant="filled"
+          value={form.values.binanceAPI}
+          onChange={event => form.setFieldValue("binanceAPI", event.currentTarget.value)}
+        />
+        <TextInput
           id="binance-api-secret"
           required
           label="Binance API Secret"
           description="Please enter your binance API Secret"
           className="pb-2"
-        >
-          <Input
-            id="binance-api-secret"
-            placeholder="API secret"
-            variant="filled"
-            value={form.values.binanceSecret}
-            onChange={event => form.setFieldValue("binanceSecret", event.currentTarget.value)}
-          />
-        </InputWrapper>
-
+          placeholder="API secret"
+          variant="filled"
+          value={form.values.binanceSecret}
+          onChange={event => form.setFieldValue("binanceSecret", event.currentTarget.value)}
+        />
         <Button type="submit">Connect</Button>
       </section>
     </form>