style: update market, TWAP, and limit orders

packages/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orbs-network/twap-ui",
-  "version": "0.10.14",
+  "version": "0.0.1",
   "description": "TWAP UI",
   "license": "MIT",
   "author": "Orbs",

packages/lib/src/components/Components.tsx

@@ -8,7 +8,7 @@ import {
   Slider,
   Switch,
   TimeSelector,
-  PriceImpactSelector,
+  PriceProtectionSelector,
   TokenName,
   TokenPriceCompare,
   Tooltip,
@@ -346,11 +346,11 @@ export function TradeIntervalSelector({ placeholder }: { placeholder?: string })
   return <TimeSelector placeholder={placeholder} onChange={setFillDelay} value={fillDelay} />;
 }
 
-export const PriceProtectionSelector = ({ placeholder, icon }: { placeholder?: string; icon?: any }) => {
+export const PriceProtectionSelect = ({ placeholder, icon }: { placeholder?: string; icon?: any }) => {
   const setPriceImpact = useTwapStore((store) => store.setPriceImpact);
   const priceImpact = useTwapStore((store) => store.getPriceImpact)();
 
-  return <PriceImpactSelector placeholder={placeholder} onChange={setPriceImpact} value={priceImpact} icon={icon} />;
+  return <PriceProtectionSelector placeholder={placeholder} onChange={setPriceImpact} value={priceImpact} icon={icon} />;
 };
 
 interface TokenSelectProps extends TWAPTokenSelectProps {

packages/lib/src/components/OrdersComponents.tsx

@@ -6,6 +6,7 @@ import { useOrdersHistoryQuery, useOrdersTabs } from "../hooks";
 import { useOrdersStore } from "../store";
 import { StyledOrdersLists, StyledOrdersTab, StyledOrdersTabs } from "../styles";
 import OrdersList from "../orders/OrdersList";
+import { OrdersList_1 } from "../orders/OrdersList";
 
 function a11yProps(index: number) {
   return {
@@ -60,3 +61,25 @@ export const SelectedOrders = ({ className = "" }: { className?: string }) => {
     </StyledOrdersLists>
   );
 };
+
+export const SelectedOrders_1 = ({ className = "" }: { className?: string }) => {
+  const { orders, isLoading } = useOrdersHistoryQuery();
+  const { tab } = useOrdersStore();
+  const tabs = useOrdersTabs();
+  return (
+    <StyledOrdersLists className={`twap-orders-lists ${className}`}>
+      {_.keys(tabs).map((key: any) => {
+        const tabValue = _.keys(tabs)[tab];
+
+        const selected = tabValue === key;
+
+        if (!selected) return null;
+        if (tabValue === "All") {
+          return <OrdersList_1 key={key} isLoading={isLoading} orders={_.flatMap(orders)} />;
+        }
+
+        return <OrdersList_1 key={key} isLoading={isLoading} status={key as any as Status} orders={orders[key as any as Status] as ParsedOrder[]} />;
+      })}
+    </StyledOrdersLists>
+  );
+};

packages/lib/src/components/base/index.ts

@@ -5,7 +5,7 @@ export { default as Label } from "./Label";
 export { default as SmallLabel } from "./SmallLabel";
 export * from "./Switch";
 export { default as TimeSelector } from "./TimeSelector";
-export { default as PriceImpactSelector } from "./PriceImpactSelector";
+export { default as PriceProtectionSelector } from "./PriceProtectionSelector";
 export { default as TokenLogo } from "./TokenLogo";
 export { default as TokenName } from "./TokenName";
 export { default as Layout } from "./Layout";

packages/lib/src/orders/OrdersList.tsx

@@ -1,4 +1,4 @@
-import { Box, styled } from "@mui/material";
+import { Box, styled, Typography, Button } from "@mui/material";
 import { useState } from "react";
 import Order, { OrderLoader } from "./Order/Order";
 import CircularProgress from "@mui/material/CircularProgress";
@@ -9,6 +9,8 @@ import { usePagination } from "../hooks";
 import { StyledColumnFlex } from "../styles";
 import { Pagination } from "../components/base";
 import { useTwapStore } from "../store";
+import Bear from "./assets/components/Bear";
+import ArrowOutward from "./assets/components/ArrowOutward";
 
 function OrdersList({ orders, status, isLoading }: { orders?: ParsedOrder[]; status?: string; isLoading: boolean }) {
   const { uiPreferences } = useTwapContext();
@@ -28,6 +30,24 @@ function OrdersList({ orders, status, isLoading }: { orders?: ParsedOrder[]; sta
   return <List orders={orders} status={status} />;
 }
 
+export function OrdersList_1({ orders, status, isLoading }: { orders?: ParsedOrder[]; status?: string; isLoading: boolean }) {
+  const { uiPreferences } = useTwapContext();
+
+  const showPagination = uiPreferences.orders?.paginationChunks && _.size(orders) > uiPreferences.orders?.paginationChunks;
+
+  if (isLoading) {
+    return (
+      <StyledLoader>
+        <CircularProgress className="twap-spinner" />
+      </StyledLoader>
+    );
+  }
+  if (showPagination) {
+    return <PaginationList orders={orders} status={status} />;
+  }
+  return <List_1 orders={orders} status={status} />;
+}
+
 const PaginationList = ({ orders, status }: { orders?: ParsedOrder[]; status?: string }) => {
   const paginationChunks = useTwapContext().uiPreferences.orders?.paginationChunks;
 
@@ -72,8 +92,53 @@ const List = ({ orders, status }: { orders?: ParsedOrder[]; status?: string }) =
   );
 };
 
+const List_1 = ({ orders, status }: { orders?: ParsedOrder[]; status?: string }) => {
+  const [selected, setSelected] = useState<number | undefined>(undefined);
+  const { translations, isDarkTheme } = useTwapContext();
+  const waitingForOrdersUpdate = useTwapStore((s) => s.waitingForOrdersUpdate);
+
+  const onSelect = (value: number) => {
+    setSelected((prevState) => (prevState === value ? undefined : value));
+  };
+
+  if (!_.size(orders)) {
+    return waitingForOrdersUpdate ? (
+      <OrderLoader status={status} />
+    ) : (
+      <StyledContainer className="twap-orders-list">
+        <StyledEmptyList_1 className="twap-orders-empty-list">
+          <Bear />
+          <StyledEmtpyListTitle>No Open Orders</StyledEmtpyListTitle>
+          {!status ? "You currently don't have orders" : "Currently, there are no open orders, create a new one !"}
+          <StyledEmptyListButton>
+            Learn More
+            <ArrowOutward />
+          </StyledEmptyListButton>
+        </StyledEmptyList_1>
+      </StyledContainer>
+    );
+  }
+
+  return (
+    <StyledContainer className="twap-orders-list">
+      {waitingForOrdersUpdate && <OrderLoader status={status} />}
+      {orders?.map((order, index) => {
+        return <Order order={order} key={index} expanded={order.order.id === selected} onExpand={() => onSelect(order.order.id)} />;
+      })}
+    </StyledContainer>
+  );
+};
+
 export default OrdersList;
 
+const StyledEmptyList_1 = styled(Box)({
+  textAlign: "center",
+  paddingTop: 40,
+  marginBottom: 40,
+  display: "flex",
+  flexDirection: "column",
+});
+
 const StyledEmptyList = styled(Box)({
   textAlign: "center",
   paddingTop: 40,
@@ -96,3 +161,23 @@ const StyledLoader = styled(StyledContainer)({
     color: "white",
   },
 });
+
+const StyledEmtpyListTitle = styled(Typography)({
+  fontSize: 18,
+  fontWeight: 700,
+  fontFamily: "Slackey",
+});
+
+const StyledEmptyListButton = styled(Button)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 5,
+  marginTop: 20,
+  width: 200,
+  height: 40,
+  borderRadius: 16,
+  backgroundColor: "transparent",
+  color: theme.palette.mode === "dark" ? "#FBF4EF" : "#453936",
+  border: `1px solid ${theme.palette.mode === "dark" ? "#353531" : "#D5BAA5"}`,
+  fontFamily: "Slackey",
+}));

packages/lib/src/orders/assets/components/ArrowOutward.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+const SvgArrowOutward = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#453936"
+      fillRule="evenodd"
+      d="M13 5a1 1 0 1 0 0 2h2.586l-6.293 6.293a1 1 0 1 0 1.414 1.414L17 8.414V11a1 1 0 1 0 2 0V5h-6m-3 2a5 5 0 0 0-5 5v2a5 5 0 0 0 5 5h2a5 5 0 0 0 5-5 1 1 0 1 0-2 0 3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3 1 1 0 1 0 0-2"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgArrowOutward;