Merge pull request #203 from DeXter-on-Radix/fix-npm-audit-warnings

Fix npm audit warnings

__tests__/orderBookSlice.test.ts

@@ -2,7 +2,7 @@ import { OrderbookLine } from "alphadex-sdk-js";
 import {
   OrderBookRowProps,
   toOrderBookRowProps,
-} from "../src/app/redux/orderBookSlice";
+} from "../src/app/state/orderBookSlice";
 
 const MOCK_SELLS = [
   new OrderbookLine(25, 1, 1, 1, 1, false),

next.config.js

@@ -1,6 +1,11 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: "export",
+
+  // React strict mode causes the dApp to render twice.
+  // For some reason this does not play well with dApp toolkit.
+  // https://discord.com/channels/417762285172555786/1181329944811413555/1181336985609175080
+  reactStrictMode: false,
 };
 
 module.exports = nextConfig;

package.json

@@ -10,8 +10,8 @@
     "test": "jest __tests__ --watch"
   },
   "dependencies": {
-    "@radixdlt/radix-dapp-toolkit": "^1.0.0",
-    "@reduxjs/toolkit": "^1.9.5",
+    "@radixdlt/radix-dapp-toolkit": "^1.4.0",
+    "@reduxjs/toolkit": "^2.0.1",
     "@tailwindcss/container-queries": "^0.1.1",
     "@types/node": "20.3.3",
     "@types/react": "18.2.14",
@@ -20,9 +20,9 @@
     "autoprefixer": "10.4.14",
     "eslint-config-next": "13.4.7",
     "lightweight-charts": "^4.0.1",
-    "next": "^13.4.19",
-    "postcss": "8.4.24",
-    "react": "18.2.0",
+    "next": "^14.0.3",
+    "postcss": "^8.4.32",
+    "react": "^18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.11.0",
     "react-imask": "^7.1.3",

src/app/components/AccountHistory.tsx

@@ -5,7 +5,7 @@ import {
   fetchAccountHistory,
   selectOpenOrders,
   setSelectedTable,
-} from "redux/accountHistorySlice";
+} from "state/accountHistorySlice";
 import { DisplayTable } from "./DisplayTable";
 
 function OrdersTabs() {

src/app/components/DisplayTable.tsx

@@ -10,9 +10,8 @@ import {
   cancelOrder,
   selectOpenOrders,
   selectTradeHistory,
-  selectOrderHistory,
-} from "../redux/accountHistorySlice";
-import { AccountHistoryState, Tables } from "../redux/accountHistorySlice";
+} from "../state/accountHistorySlice";
+import { AccountHistoryState, Tables } from "../state/accountHistorySlice";
 interface TableProps {
   data: AccountHistoryState["orderHistory"];
 }
@@ -85,7 +84,9 @@ export function DisplayTable() {
     (state) => state.accountHistory.selectedTable
   );
   const openOrders = useAppSelector(selectOpenOrders);
-  const orderHistory = useAppSelector(selectOrderHistory);
+  const orderHistory = useAppSelector(
+    (state) => state.accountHistory.orderHistory
+  );
   const tradeHistory = useAppSelector(selectTradeHistory);
 
   const tableToShow = useMemo(() => {

src/app/components/OrderBook.tsx

@@ -2,7 +2,7 @@ import { CSSProperties } from "react";
 
 import "../styles/orderbook.css";
 import * as utils from "../utils";
-import { OrderBookRowProps, orderBookSlice } from "../redux/orderBookSlice";
+import { OrderBookRowProps, orderBookSlice } from "../state/orderBookSlice";
 import { useAppDispatch, useAppSelector } from "../hooks";
 
 const N_DIGITS = 8;

src/app/components/PairSelector.tsx

@@ -1,5 +1,5 @@
 import { useAppSelector, useAppDispatch } from "../hooks";
-import { selectPairAddress } from "../redux/pairSelectorSlice";
+import { selectPairAddress } from "../state/pairSelectorSlice";
 import { useRef, useState } from "react";
 
 interface PairInfo {

src/app/components/PriceChart.tsx

@@ -7,7 +7,7 @@ import {
   handleCrosshairMove,
   // fetchCandlesForInitialPeriod,
   initializeLegend,
-} from "../redux/priceChartSlice";
+} from "../state/priceChartSlice";
 import { useAppDispatch, useAppSelector } from "../hooks";
 import { displayNumber } from "../utils";
 import * as tailwindConfig from "../../../tailwind.config";

src/app/components/order_input/AmountInput.tsx

@@ -8,7 +8,7 @@ import {
   selectBalanceByAddress,
   selectTargetToken,
   selectValidationByAddress,
-} from "redux/orderInputSlice";
+} from "state/orderInputSlice";
 import { BottomRightErrorLabel } from "components/BottomRightErrorLabel";
 import { getLocaleSeparators } from "utils";
 import { IMaskInput } from "react-imask";

src/app/components/order_input/LimitOrderInput.tsx

@@ -7,7 +7,7 @@ import {
   orderInputSlice,
   selectBalanceByAddress,
   validatePriceInput,
-} from "redux/orderInputSlice";
+} from "state/orderInputSlice";
 import {
   AmountInput,
   PayReceive,

src/app/components/order_input/MarketOrderInput.tsx

@@ -8,7 +8,7 @@ import {
   selectBalanceByAddress,
   selectTargetToken,
   validateSlippageInput,
-} from "redux/orderInputSlice";
+} from "state/orderInputSlice";
 import { numberOrEmptyInput } from "utils";
 import {
   AmountInput,

src/app/components/order_input/OrderInput.tsx

@@ -7,8 +7,8 @@ import {
   submitOrder,
   validatePriceInput,
   validateSlippageInput,
-} from "redux/orderInputSlice";
-import { fetchBalances } from "redux/pairSelectorSlice";
+} from "state/orderInputSlice";
+import { fetchBalances } from "state/pairSelectorSlice";
 import { LimitOrderInput } from "./LimitOrderInput";
 import { MarketOrderInput } from "./MarketOrderInput";
 import { OrderSideTabs } from "./OrderSideTabs";

src/app/components/order_input/OrderSideTabs.tsx

@@ -1,5 +1,5 @@
 import { useAppDispatch, useAppSelector } from "hooks";
-import { OrderSide, orderInputSlice } from "redux/orderInputSlice";
+import { OrderSide, orderInputSlice } from "state/orderInputSlice";
 
 export function OrderSideTabs() {
   const dispatch = useAppDispatch();

src/app/components/order_input/OrderTypeTabs.tsx

@@ -1,5 +1,5 @@
 import { useAppDispatch, useAppSelector } from "hooks";
-import { OrderTab, orderInputSlice } from "redux/orderInputSlice";
+import { OrderTab, orderInputSlice } from "state/orderInputSlice";
 
 export function OrderTypeTabs() {
   const activeTab = useAppSelector((state) => state.orderInput.tab);

src/app/hooks.ts

@@ -1,6 +1,6 @@
 import { useDispatch, useSelector } from "react-redux";
 import type { TypedUseSelectorHook } from "react-redux";
-import type { RootState, AppDispatch } from "./redux/store";
+import type { RootState, AppDispatch } from "./state/store";
 
 // https://redux-toolkit.js.org/tutorials/typescript#define-typed-hooks
 export const useAppDispatch: () => AppDispatch = useDispatch;

src/app/layout.tsx

@@ -4,7 +4,7 @@ import "./styles/globals.css";
 
 import { Footer } from "./components/Footer";
 import { Navbar } from "./components/NavBar";
-import { store } from "./redux/store";
+import { store } from "./state/store";
 import { Provider } from "react-redux";
 import { usePathname } from "next/navigation";
 

src/app/page.tsx

@@ -8,11 +8,11 @@ import { PairSelector } from "components/PairSelector";
 import { PriceChart } from "components/PriceChart";
 import { AccountHistory } from "components/AccountHistory";
 import { PriceInfo } from "components/PriceInfo";
-import { fetchBalances } from "redux/pairSelectorSlice";
+import { fetchBalances } from "state/pairSelectorSlice";
 import { useAppDispatch } from "hooks";
-import { fetchAccountHistory } from "redux/accountHistorySlice";
+import { fetchAccountHistory } from "state/accountHistorySlice";
 import { initializeSubscriptions, unsubscribeAll } from "./subscriptions";
-import { store } from "./redux/store";
+import { store } from "./state/store";
 
 export default function Home() {
   const dispatch = useAppDispatch();

src/app/redux/accountHistorySlice.ts → src/app/state/accountHistorySlice.ts

@@ -150,11 +150,6 @@ export const selectOpenOrders = createSelector(
   (orderHistory) => orderHistory.filter((order) => order.status === "PENDING")
 );
 
-export const selectOrderHistory = createSelector(
-  (state: RootState) => state.accountHistory.orderHistory,
-  (orderHistory) => orderHistory
-);
-
 export const selectTradeHistory = createSelector(
   (state: RootState) => state.accountHistory.orderHistory,
   (orderHistory) => orderHistory.filter((order) => order.status === "COMPLETED")

src/app/subscriptions.ts

@@ -5,15 +5,15 @@ import {
   RadixNetwork,
 } from "@radixdlt/radix-dapp-toolkit";
 import * as adex from "alphadex-sdk-js";
-import { radixSlice, WalletData } from "./redux/radixSlice";
-import { fetchBalances } from "./redux/pairSelectorSlice";
-import { pairSelectorSlice } from "./redux/pairSelectorSlice";
-import { orderBookSlice } from "./redux/orderBookSlice";
-import { updateCandles } from "./redux/priceChartSlice";
-import { updatePriceInfo } from "./redux/priceInfoSlice";
-import { accountHistorySlice } from "./redux/accountHistorySlice";
-import { orderInputSlice } from "redux/orderInputSlice";
-import { AppStore } from "./redux/store";
+import { radixSlice, WalletData } from "./state/radixSlice";
+import { fetchBalances } from "./state/pairSelectorSlice";
+import { pairSelectorSlice } from "./state/pairSelectorSlice";
+import { orderBookSlice } from "./state/orderBookSlice";
+import { updateCandles } from "./state/priceChartSlice";
+import { updatePriceInfo } from "./state/priceInfoSlice";
+import { accountHistorySlice } from "./state/accountHistorySlice";
+import { orderInputSlice } from "state/orderInputSlice";
+import { AppStore } from "./state/store";
 
 export type RDT = ReturnType<typeof RadixDappToolkit>;