a

orbs-network · Apr 1, 2024 · 827fe42 · 827fe42
1 parent 2a7facf
commit 827fe42
Show file tree

Hide file tree

Showing 21 changed files with 882 additions and 174 deletions.
diff --git a/packages/baseswap/src/index.tsx b/packages/baseswap/src/index.tsx
@@ -1,4 +1,4 @@
-import { GlobalStyles, ThemeProvider, useTheme } from "@mui/material";
+import { GlobalStyles, styled, ThemeProvider, Typography, useTheme } from "@mui/material";
 import { Components, Styles as TwapStyles, Translations, TwapAdapter, TWAPProps, useTwapContext, store, Orders, TwapContextUIPreferences, hooks } from "@orbs-network/twap-ui";
 import translations from "./i18n/en.json";
 import { Configs, TokenData } from "@orbs-network/twap";
@@ -16,7 +16,8 @@ import {
   StyledOrdersPanel,
   StyledOrderSummaryModal,
   StyledPriceCard,
-  StyledSubmitButton,
+  StyledReset,
+  StyledSubmitContainer,
   StyledTokenBalance,
   StyledTokenPanel,
   StyledTokenPanelBalanceAndMax,
@@ -30,15 +31,16 @@ import { isNativeAddress } from "@defi.org/web3-candies";
 import { memo, ReactNode } from "react";
 import { BsQuestionCircle } from "@react-icons/all-files/bs/BsQuestionCircle";
 import { AiOutlineArrowDown } from "@react-icons/all-files/ai/AiOutlineArrowDown";
+import { GrPowerReset } from "@react-icons/all-files/gr/GrPowerReset";
 
 const config = Configs.BaseSwap;
 
 const Button = (props: any) => {
   const DappButton = useAdapterContext().Button;
 
   return (
-    <DappButton text={props.text} onClick={props.onClick} disabled={props.disabled || props.loading} isLoading={props.loading}>
-      {props.children}
+    <DappButton text={props.text} onClick={props.onClick} disabled={props.disabled} isLoading={props.loading}>
+      {props.loading ? "Loading..." : props.children}
     </DappButton>
   );
 };
@@ -47,6 +49,8 @@ const uiPreferences: TwapContextUIPreferences = {
   infoIcon: BsQuestionCircle,
   switchVariant: "ios",
   Button,
+  usdSuffix: " USD",
+  usdPrefix: `≈ `,
 };
 
 const storeOverride = {
@@ -59,7 +63,7 @@ const storeOverride = {
 const OrderSummary = ({ children }: { children: ReactNode }) => {
   const theme = useTheme();
   return (
-    <StyledOrderSummaryModal theme={theme}>
+    <StyledOrderSummaryModal theme={theme} title="Review order">
       <TwapStyles.StyledColumnFlex gap={14}>
         <TwapStyles.StyledColumnFlex gap={14}>
           <Components.Base.Card>
@@ -84,7 +88,9 @@ const OrderSummary = ({ children }: { children: ReactNode }) => {
             <Components.OutputAddress />
           </TwapStyles.StyledColumnFlex>
         </Components.Base.Card>
-        <Components.SubmitButton />
+        <StyledSubmitContainer>
+          <StyledSubmitButton />
+        </StyledSubmitContainer>
       </TwapStyles.StyledColumnFlex>
     </StyledOrderSummaryModal>
   );
@@ -215,7 +221,7 @@ const TWAPPanel = () => {
       <TradeSize />
       <TradeInterval />
       <MaxDuration />
-      <StyledSubmitButton />
+      <StyledSubmitButton isMain={true} />
       <OrderSummary>
         <Components.OrderSummaryDetails />
       </OrderSummary>
@@ -238,7 +244,7 @@ const LimitPanel = () => {
       </StyledTopGrid>
       <StyledMarketPrice />
       <LimitPrice limit={true} />
-      <StyledSubmitButton />
+      <StyledSubmitButton isMain={true} />
       <OrderSummary>
         <TwapStyles.StyledColumnFlex>
           <Components.OrderSummaryDetailsDeadline />
@@ -276,7 +282,17 @@ const LimitPrice = ({ limit }: { limit?: boolean }) => {
     <StyledPriceCard>
       <TwapStyles.StyledColumnFlex>
         <TwapStyles.StyledRowFlex justifyContent="space-between">
-          <Components.Labels.LimitPriceLabel />
+          <TwapStyles.StyledRowFlex style={{ width: "auto" }}>
+            <Components.Labels.LimitPriceLabel />
+            <Components.ResetLimitButton>
+              <StyledReset>
+                <TwapStyles.StyledRowFlex gap={8}>
+                  <Components.Base.Icon icon={<GrPowerReset />} />
+                  <Typography>Reset</Typography>
+                </TwapStyles.StyledRowFlex>
+              </StyledReset>
+            </Components.ResetLimitButton>
+          </TwapStyles.StyledRowFlex>
           {!limit && <Components.LimitPriceToggle variant="ios" />}
         </TwapStyles.StyledRowFlex>
         <StyledLimitPriceInput reverse={true} placeholder="0" theme={theme} hideSymbol={true} />
@@ -313,3 +329,23 @@ const TradeInterval = () => {
 const memoizedTWAP = memo(TWAP);
 const memoizedOrders = memo(Orders);
 export { memoizedOrders as Orders, memoizedTWAP as TWAP };
+
+export const SubmitButton = ({ className = "", isMain }: { className?: string; isMain?: boolean }) => {
+  const { loading, onClick, disabled, text } = hooks.useSubmitButton(isMain);
+  const createOrderLoading = store.useTwapStore((state) => state.loading);
+  return (
+    <Button
+      text={text}
+      className={`twap-submit ${className}`}
+      loading={createOrderLoading ? false : loading}
+      onClick={onClick || (() => {})}
+      disabled={createOrderLoading ? false : disabled}
+    >
+      {text}
+    </Button>
+  );
+};
+
+export const StyledSubmitButton = styled(SubmitButton)({
+  marginTop: 10,
+});
diff --git a/packages/baseswap/src/styles.ts b/packages/baseswap/src/styles.ts
@@ -52,7 +52,6 @@ const buttonStyles = (theme: Theme) => {
     fontSize: 16,
     fontWeight: 600,
     cursor: "pointer",
-    border: `2px solid white!important`,
     transition: "opacity 0.2s",
     textTransform: "uppercase",
     "&:hover": {
@@ -130,8 +129,6 @@ export const StyledMarketPrice = styled(Components.MarketPrice)({
   },
 });
 
-// const getButtonStyles = (theme: Theme) => {};
-
 export const StyledLimitPriceInput = styled(Components.LimitPriceInput)(({ theme }) => {
   return {
     background: baseStyles(theme).secondaryBackground,
@@ -176,9 +173,17 @@ export const StyledChangeTokensOrder = styled(Components.ChangeTokensOrder)(({ t
       svg: {
         width: 18,
         height: 18,
+        "*": {
+          color: "black!important",
+        },
       },
       "&:hover": {
         background: "black",
+        svg: {
+          "*": {
+            color: "white!important",
+          },
+        },
       },
     },
   };
@@ -188,10 +193,6 @@ export const StyledTradeSize = styled(Components.Base.Card)({});
 
 export const StyledPriceCard = styled(Components.Base.Card)({});
 
-export const StyledSubmitButton = styled(Components.SubmitButton)({
-  marginTop: 10,
-});
-
 export const StyledOrdersPanel = styled(OrdersPanel)(({ theme }) => {
   const styles = baseStyles(theme);
   return {
@@ -206,7 +207,7 @@ export const StyledOrdersPanel = styled(OrdersPanel)(({ theme }) => {
         background: `white!important`,
         ".MuiLinearProgress-bar": {
           height: 4,
-          background: `${styles.button}!important`,
+          background: `linear-gradient(to top, rgb(1, 84, 254), rgb(55, 192, 223))!important`,
         },
         "&:after": {
           display: "none",
@@ -229,9 +230,11 @@ export const StyledOrdersPanel = styled(OrdersPanel)(({ theme }) => {
     color: styles.textColor,
     ".twap-orders-header-tabs": {
       border: "1px solid white",
+      borderRadius: 12,
       ".Mui-selected": {
-        background: styles.button,
+        background: "linear-gradient(to top, rgb(1, 84, 254), rgb(55, 192, 223))",
         color: styles.textColor,
+        borderRadius: 8,
       },
       ".MuiTabs-indicator": {
         display: "none",
@@ -245,7 +248,6 @@ export const StyledOrdersPanel = styled(OrdersPanel)(({ theme }) => {
 
 export const StyledOrderSummaryModal = styled(Components.OrderSummaryModalContainer)(({ theme }) => ({
   ".twap-modal-content": {
-    paddingTop: 50,
     a: {
       color: baseStyles(theme).textColor,
     },
@@ -261,6 +263,16 @@ export const configureStyles = (theme: Theme) => {
   const styles = baseStyles(theme);
   const darkMode = isDark(theme);
   return {
+    ".twap-usd": {
+      fontSize: 12,
+      "*": {
+        color: "#ccc!important",
+      },
+    },
+    ".twap-order-expanded-cancel-wraper": {
+      marginTop: 30,
+      marginBottom: 30,
+    },
     ".twap-submit": {
       marginLeft: "auto",
       marginRight: "auto",
@@ -349,7 +361,6 @@ export const configureStyles = (theme: Theme) => {
       ".twap-time-selector-selected": {
         padding: ".5rem",
         border: darkMode ? "1px solid white" : "1px solid rgba(0,0,0,0.5)",
-        marginBottom: "5px",
         borderRadius: "8px",
       },
       ".twap-input": {
@@ -497,3 +508,36 @@ export const configureStyles = (theme: Theme) => {
     },
   };
 };
+
+export const StyledReset = styled("div")(({ theme }) => {
+  const styles = baseStyles(theme);
+  return {
+    border: "1px solid #fff",
+    padding: "0px 10px",
+    borderRadius: 12,
+    cursor: "pointer",
+    color: styles.textColor,
+    p: {
+      fontSize: 13,
+    },
+    svg: {
+      width: 12,
+      height: 12,
+      path: {
+        stroke: styles.iconsColor,
+      },
+    },
+    "&:hover": {
+      opacity: 0.8,
+    },
+  };
+});
+
+export const StyledSubmitContainer = styled("div")({
+  width: "100%",
+  button: {
+    width: "100%",
+    boxShadow: "none!important",
+    border: "unset!important",
+  },
+});
diff --git a/packages/dapp-example/src/PancakeSwap.tsx b/packages/dapp-example/src/PancakeSwap.tsx
@@ -1,5 +1,5 @@
 import { StyledModalContent, StyledPancake, StyledPancakeBackdrop, StyledPancakeLayout, StyledPancakeOrders, StyledPancakeTwap } from "./styles";
-import { TWAP, Orders, parseToken, OrderSummary } from "@orbs-network/twap-ui-pancake";
+import { TWAP, Orders, parseToken } from "@orbs-network/twap-ui-pancake";
 import { useConnectWallet, useGetTokens, useIsMobile, usePriceUSD, useTheme, useTrade } from "./hooks";
 import { Configs } from "@orbs-network/twap";
 import { useWeb3React } from "@web3-react/core";

diff --git a/packages/lib/src/components/Components.tsx b/packages/lib/src/components/Components.tsx
@@ -658,6 +658,10 @@ export const MinDstAmountOut = ({ translations: _translations }: { translations?
 };
 
 export const OrderSummaryDetailsMinDstAmount = ({ subtitle, translations }: { subtitle?: boolean; translations?: Translations }) => {
+  const isLimitOrder = useTwapStore((store) => store.isLimitOrder);
+
+  if (!isLimitOrder) return null;
+
   return (
     <StyledSummaryRow className="twap-order-summary-details-item">
       <OrderSummaryMinDstAmountOutLabel subtitle={subtitle} translations={translations} />
@@ -944,7 +948,12 @@ const StyledTradeInfoExplanation = styled(StyledColumnFlex)({
   overflow: "auto",
   gap: 10,
   "*": {
-    fontSize: 16,
+    fontSize: 14,
+  },
+  "@media (max-width: 700px)": {
+    "*": {
+      fontSize: 12,
+    },
   },
 });
 

diff --git a/packages/lib/src/components/Wizard.tsx b/packages/lib/src/components/Wizard.tsx
@@ -11,9 +11,7 @@ export function Wizard() {
   const store = useWizardStore();
   const content = useContent();
 
-  const onClose = useCallback(() => {
-    store.setOpen(false);
-  }, []);
+  const onClose = () => store.setOpen(false);
 
   return (
     <Modal open={store.open} onClose={onClose}>

diff --git a/packages/lib/src/components/base/Modal.tsx b/packages/lib/src/components/base/Modal.tsx
@@ -61,6 +61,7 @@ export default Modal;
 
 const StyledHeader = styled(StyledRowFlex)({
   justifyContent: "space-between",
+  marginBottom: 10,
 });
 
 const StyledSeparator = styled(Box)({

diff --git a/packages/lib/src/consts.ts b/packages/lib/src/consts.ts
@@ -1,4 +1,4 @@
-export const REFETCH_ORDER_HISTORY = 10_000;
+export const REFETCH_ORDER_HISTORY = 20_000;
 export const REFETCH_USD = 10_000;
 export const REFETCH_BALANCE = 10_000;
 export const REFETCH_GAS_PRICE = 10_000;
@@ -14,5 +14,3 @@ export const QUERY_PARAMS = {
   INPUT_AMOUNT: "inputAmount",
   TRADES_AMOUNT: "tradesAmount",
 };
-
-export const QUERY_PARAMS_ENABLED = true;
diff --git a/packages/lib/src/context.tsx b/packages/lib/src/context.tsx
@@ -9,7 +9,7 @@ import { useTwapStore } from "./store";
 import { TwapErrorWrapper } from "./ErrorHandling";
 import { Wizard } from "./components";
 import { getQueryParam } from "./utils";
-import { QUERY_PARAMS, QUERY_PARAMS_ENABLED } from "./consts";
+import { QUERY_PARAMS } from "./consts";
 
 analytics.onModuleLoad();
 
@@ -55,19 +55,21 @@ const Listener = (props: TwapLibProps) => {
 
   useEffect(() => {
     const limitPriceQueryParam = getQueryParam(QUERY_PARAMS.LIMIT_PRICE);
-    if (!QUERY_PARAMS_ENABLED || !limitPriceQueryParam || !srcAmount || dstAmount || !srcToken) return;
+    if (!props.enableQueryParams || !limitPriceQueryParam || !srcAmount || dstAmount || !srcToken) return;
 
     setLimitPriceUi({ priceUi: limitPriceQueryParam, inverted: false });
-  }, [srcAmount, setLimitPriceUi, dstAmount, srcToken]);
+  }, [srcAmount, setLimitPriceUi, dstAmount, srcToken, props.enableQueryParams]);
 
   const setTokensFromDappCallback = useSetTokensFromDapp();
   const initLib = useInitLib();
   const updateStoreOveride = useUpdateStoreOveride();
   const result = props.useTrade?.(srcToken?.address, dstToken?.address, srcAmount === "0" ? undefined : srcAmount);
 
   useEffect(() => {
-    !result?.isLoading && setOutAmount(result?.outAmount, result?.isLoading);
-  }, [result?.isLoading, result?.outAmount, setOutAmount]);
+    const limitPriceQueryParam = getQueryParam(QUERY_PARAMS.LIMIT_PRICE);
+    const custom = props.enableQueryParams && !!limitPriceQueryParam;
+    !result?.isLoading && setOutAmount(result?.outAmount, result?.isLoading, custom);
+  }, [result?.isLoading, result?.outAmount, setOutAmount, props.enableQueryParams]);
 
   useEffect(() => {
     updateStoreOveride(props.storeOverride);