a

orbs-network · Apr 28, 2024 · 8de05cc · 8de05cc
1 parent ca3ccf1
commit 8de05cc
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 30 deletions.
diff --git a/packages/dapp-example/src/PancakeSwap.tsx b/packages/dapp-example/src/PancakeSwap.tsx
@@ -201,6 +201,7 @@ const TWAPComponent = ({ limit }: { limit?: boolean }) => {
         SwapPendingModalContent={SwapPendingModalContent}
         SwapTransactionReceiptModalContent={SwapPendingModalContent}
         TradePrice={TradePrice}
+        TradePriceToggle={TradePriceToggle}
       />
     </StyledPancakeTwap>
   );
@@ -279,13 +280,15 @@ const dapp: Dapp = {
 
 export default dapp;
 
-const TradePrice = (props: { leftSymbol?: string; rightSymbol?: string; price?: string; onClick?: () => void }) => {
+const TradePriceToggle = ({ onClick }: { onClick: () => void }) => {
+  return <button onClick={onClick}>T</button>;
+};
+
+const TradePrice = (props: { leftSymbol?: string; rightSymbol?: string; price?: string }) => {
   return (
-    <div onClick={props.onClick}>
-      <Typography>
-        1 {props.leftSymbol} = {props.price} {props.rightSymbol}
-      </Typography>
-    </div>
+    <Typography>
+      1 {props.leftSymbol} = {props.price} {props.rightSymbol}
+    </Typography>
   );
 };
 

diff --git a/packages/lib/src/hooks.ts b/packages/lib/src/hooks.ts
@@ -767,12 +767,18 @@ export const useFormatNumber = ({
     return !count ? decimalScale : count + decimalScale;
   }, [value, decimalScale]);
 
+  const isBiggerThan1 = useMemo(() => {
+    return BN(value || "0").gt(1);
+  }, [value]);
+
+  const _disableDynamicDecimals = disableDynamicDecimals || isBiggerThan1;
+
   const result = useNumericFormat({
     allowLeadingZeros: true,
     thousandSeparator: ",",
     displayType: "text",
     value: value || "",
-    decimalScale: disableDynamicDecimals ? decimalScale : decimals,
+    decimalScale: _disableDynamicDecimals ? decimalScale : decimals,
     prefix,
     suffix,
   });
@@ -1338,9 +1344,9 @@ export const useLimitPriceV2 = () => {
 
   const limitPrice = useMemo(() => {
     const getOriginal = (percent: number) => {
-      if (limitPriceStore.isCustom && limitPriceStore.inverted) {
+      if (limitPriceStore.limitPrice && limitPriceStore.isCustom && limitPriceStore.inverted) {
         return BN(1)
-          .dividedBy(limitPriceStore.limitPrice || "0")
+          .dividedBy(limitPriceStore.limitPrice || "")
           .toString();
       }
       if (limitPriceStore.isCustom) {
@@ -1357,17 +1363,12 @@ export const useLimitPriceV2 = () => {
     const toggled = getToggled(limitPriceStore.inverted);
     const original = getOriginal(0.95);
     return {
-      toggled: BN(toggled || "0").isZero()
-        ? ""
-        : limitPriceStore.isCustom
-        ? toggled
-        : BN(toggled || "")
-            .decimalPlaces(6)
-            .toString(),
+      toggled: BN(toggled || "0").isZero() ? "" : toggled,
       original: BN(original || "0").isZero() ? "" : original,
     };
   }, [marketPrice, enableQueryParams, limitPriceStore.inverted, limitPriceStore.limitPrice, limitPriceStore.isCustom, limitPriceStore.priceFromQueryParams]);
-
+  console.log({limitPrice});
+
   const onInvert = useCallback(() => {
     limitPriceStore.toggleInverted();
   }, [limitPriceStore.toggleInverted, limitPrice]);
@@ -1441,7 +1442,7 @@ export const useFillWarning = () => {
     if ((srcBalance && srcAmount.gt(srcBalance)) || isNativeTokenAndValueBiggerThanMax) return translation.insufficientFunds;
     if (chunkSize.isZero()) return translation.enterTradeSize;
     if (durationUi.amount === 0) return translation.enterMaxDuration;
-    if (isLimitOrder && BN(dstAmountOut || "").gt(0) && BN(limitPrice?.original || "0").isZero()) return translation.insertLimitPriceWarning;
+    if (isLimitOrder && BN(dstAmountOut || "").gt(0) && BN(limitPrice?.original || "0").isZero()) return translation.placeOrder || "Place order";
     const valuesValidation = lib?.validateOrderInputs(srcToken!, dstToken!, srcAmount, chunkSize, dstMinAmountOut, deadline, fillDelayMillis, srcUsd);
 
     if (valuesValidation === OrderInputValidation.invalidTokens) {
@@ -1638,20 +1639,22 @@ export const useSrcChunkAmount = () => {
 };
 
 export const useDurationUi = () => {
-  const { lib, fillDelayUiMillis } = useTwapStore((s) => ({
+  const { lib, fillDelayUiMillis, customDuration } = useTwapStore((s) => ({
     lib: s.lib,
     fillDelayUiMillis: s.getFillDelayUiMillis(),
+    customDuration: s.customDuration,
   }));
   const chunks = useChunks();
   return useMemo(() => {
     if (!lib) {
       return { resolution: TimeResolution.Minutes, amount: 0 };
     }
+    if (customDuration.amount !== undefined) return customDuration;
 
     const _millis = fillDelayUiMillis * 2 * chunks;
     const resolution = _.find([TimeResolution.Days, TimeResolution.Hours, TimeResolution.Minutes], (r) => r <= _millis) || TimeResolution.Minutes;
     return { resolution, amount: Number(BN(_millis / resolution).toFixed(2)) };
-  }, [lib, chunks, fillDelayUiMillis]);
+  }, [lib, chunks, fillDelayUiMillis, customDuration]);
 };
 
 export const useDurationMillis = () => {

diff --git a/packages/pancake/src/components.tsx b/packages/pancake/src/components.tsx
@@ -5,7 +5,7 @@ import { StyledMarketPriceContainer } from "./styles";
 import { styled } from "@mui/material";
 import { useMemo } from "react";
 
-export function Price({ onClick }: { onClick?: () => void }) {
+export function Price() {
   const { TradePrice: DappTradePrice } = useAdapterContext();
   const { srcToken, dstToken, srcAmount, isLimitOrder } = store.useTwapStore((s) => ({
     srcToken: s.srcToken,
@@ -17,7 +17,7 @@ export function Price({ onClick }: { onClick?: () => void }) {
   const { limitPrice, isLoading, inverted } = hooks.useLimitPriceV2();
   const { marketPrice } = hooks.useMarketPriceV2(inverted);
 
-  const price = hooks.useFormatNumber({ value: isLimitOrder ? limitPrice?.toggled : marketPrice?.toggled, decimalScale: 4 });
+  const price = hooks.useFormatNumber({ value: isLimitOrder ? limitPrice?.toggled : marketPrice?.toggled, decimalScale: 3, disableDynamicDecimals: false });
 
   if (!DappTradePrice) {
     return <Components.OrderSummaryLimitPrice />;
@@ -34,7 +34,7 @@ export function Price({ onClick }: { onClick?: () => void }) {
     <StyledMarketPriceContainer>
       <Components.Base.Label>Price</Components.Base.Label>
       <div style={{ opacity: isLoading ? 0 : 1 }}>
-        <DappTradePrice onClick={onClick || (() => {})} loading={isLoading} leftSymbol={leftSymbol} rightSymbol={rightSymbol} price={price} />
+        <DappTradePrice leftSymbol={leftSymbol} rightSymbol={rightSymbol} price={price} />
       </div>
       <StyledLoader loading={isLoading ? 1 : 0} />
     </StyledMarketPriceContainer>

diff --git a/packages/pancake/src/context.ts b/packages/pancake/src/context.ts
@@ -17,6 +17,7 @@ export interface AdapterProps extends TWAPProps {
   SwapTransactionReceiptModalContent?: any;
   AddToWallet?: any;
   TradePrice?: any;
+  TradePriceToggle: FC<{ onClick: () => void; loading: boolean }>;
 }
 
 const AdapterContext = createContext({} as AdapterProps);

diff --git a/packages/pancake/src/index.tsx b/packages/pancake/src/index.tsx
@@ -178,7 +178,7 @@ const TokenPanel = ({ isSrcToken = false }: { isSrcToken?: boolean }) => {
       </Card.Header>
       <Card.Body editable={true}>
         <Styles.StyledColumnFlex width="auto" gap={1} style={{ alignItems: "flex-end" }}>
-          <StyledTokenPanelInput dstDecimalScale={3} isSrc={isSrcToken} />
+          <StyledTokenPanelInput dstDecimalScale={dstToken?.decimals || 3} isSrc={isSrcToken} />
           <StyledUSD decimalScale={2} isSrc={isSrcToken} emptyUi={<StyledEmptyUSD />} />
         </Styles.StyledColumnFlex>
         {isSrcToken && <SrcTokenPercentSelector />}
@@ -363,7 +363,7 @@ const LimitPanel = () => {
         <TopPanel />
         <TwapStyles.StyledColumnFlex>
           <LimitPrice limitOnly={true} />
-          <Price onClick={onInvert} />
+          <Price />
         </TwapStyles.StyledColumnFlex>
         <OpenConfirmationModalButton />
       </StyledColumnFlex>
@@ -374,14 +374,12 @@ const LimitPanel = () => {
 };
 
 const TWAPPanel = () => {
-  const { onInvert } = hooks.useLimitPriceV2();
-
   return (
     <div className="twap-container">
       <StyledColumnFlex>
         <TopPanel />
         <LimitPrice />
-        <Price onClick={onInvert} />
+        <Price />
         <TotalTrades />
         <TradeSize />
         <TradeInterval />
@@ -472,7 +470,8 @@ const TradeInterval = () => {
 
 const LimitPrice = ({ limitOnly }: { limitOnly?: boolean }) => {
   const isLimitOrder = store.useTwapStore((store) => store.isLimitOrder);
-  const { onChange, limitPrice } = hooks.useLimitPriceV2();
+  const { onInvert, isLoading } = hooks.useLimitPriceV2();
+  const { TradePriceToggle } = useAdapterContext();
 
   return (
     <StyledLimitPrice>
@@ -490,7 +489,10 @@ const LimitPrice = ({ limitOnly }: { limitOnly?: boolean }) => {
                 </StyledReset>
               </Components.ResetLimitButton>
             </StyledLimitPriceLabel>
-            {!limitOnly && <Components.LimitPriceToggle />}
+            <TwapStyles.StyledRowFlex style={{ width: "auto", gap: 0 }}>
+              {!limitOnly && <Components.LimitPriceToggle />}
+              <TradePriceToggle onClick={onInvert} loading={!!isLoading} />
+            </TwapStyles.StyledRowFlex>
           </TwapStyles.StyledRowFlex>
         </Card.Header>
         {isLimitOrder && (