store redesign

packages/baseswap/src/index.tsx

@@ -97,7 +97,7 @@ const OrderSummary = ({ children }: { children: ReactNode }) => {
 };
 
 const MaxButton = () => {
-  const { onPercentClick } = hooks.useCustomActions();
+  const onPercentClick = hooks.useCustomActions();
   const translations = useTwapContext().translations;
 
   return <StyledMaxButton onClick={() => onPercentClick(1)}>{translations.max.toUpperCase()}</StyledMaxButton>;

packages/chronos/src/index.tsx

@@ -198,7 +198,7 @@ const USD = ({ children, disabled }: { children: ReactNode; disabled: boolean })
 const percent = [0.25, 0.5, 0.75, 1];
 
 const SrcTokenPercentSelector = () => {
-  const onPercentClick = hooks.useCustomActions().onPercentClick;
+  const onPercentClick = hooks.useCustomActions();
   const translations = useTwapContext().translations;
 
   const onClick = (value: number) => {
@@ -278,10 +278,12 @@ const Recipient = () => {
 };
 
 const TokenSummary = () => {
-  const srcAmount = store.useTwapStore((store) => store.srcAmountUi);
-  const dstAmount = store.useTwapStore((store) => store.getDstAmountUi());
-  const srcToken = store.useTwapStore((store) => store.srcToken);
-  const dstToken = store.useTwapStore((store) => store.dstToken);
+  const { srcAmount, srcToken, dstToken } = store.useTwapStore((store) => ({
+    srcAmount: store.srcAmountUi,
+    srcToken: store.srcToken,
+    dstToken: store.dstToken,
+  }));
+  const dstAmount = hooks.useDstAmount().outAmount.ui;
 
   const srcAmountFormatted = hooks.useFormatNumber({ value: srcAmount });
   const srcAmountFormattedTooltip = hooks.useFormatNumber({ value: srcAmount, decimalScale: 18 });
@@ -654,7 +656,7 @@ const BigBorder = ({ children, style = {}, className = "" }: { children?: ReactN
 };
 
 const ChunksSlider = () => {
-  const show = store.useTwapStore((s) => s.getChunksBiggerThanOne());
+  const show = hooks.useChunksBiggerThanOne();
 
   if (!show) return null;
   return (

packages/dapp-example/src/PancakeSwap.tsx

@@ -10,9 +10,9 @@ import _ from "lodash";
 import { erc20s, isNativeAddress, zeroAddress } from "@defi.org/web3-candies";
 import { SelectorOption, TokenListItem } from "./types";
 import { Box } from "@mui/system";
-import { Button, styled, Tooltip } from "@mui/material";
-import { Components, hooks } from "@orbs-network/twap-ui";
-
+import { Button, styled, Tooltip, Typography } from "@mui/material";
+import { Components, hooks, Styles } from "@orbs-network/twap-ui";
+import BN from "bignumber.js";
 const config = Configs.PancakeSwap;
 
 let native = {
@@ -180,8 +180,8 @@ const TWAPComponent = ({ limit }: { limit?: boolean }) => {
     <StyledPancakeTwap isDarkTheme={isDarkTheme ? 1 : 0}>
       <TWAP
         account={account}
-        srcToken={config.wToken.address}
-        dstToken="CAKE"
+        srcToken="CAKE"
+        dstToken={config.wToken.address}
         dappTokens={dappTokens}
         isDarkTheme={isDarkTheme}
         limit={limit}
@@ -200,6 +200,7 @@ const TWAPComponent = ({ limit }: { limit?: boolean }) => {
         SwapTransactionErrorContent={SwapTransactionErrorContent}
         SwapPendingModalContent={SwapPendingModalContent}
         SwapTransactionReceiptModalContent={SwapPendingModalContent}
+        TradePrice={TradePrice}
       />
     </StyledPancakeTwap>
   );
@@ -277,3 +278,39 @@ const dapp: Dapp = {
 };
 
 export default dapp;
+
+const TradePrice = (props: { inputCurrency: any; outputCurrency: any; inputAmount: string; outAmount: string; onClick: any }) => {
+  const [inverted, setInverted] = useState(false);
+
+  const { price, leftToken, rightToken } = useMemo(() => {
+    const inputAmount = amountUi(props.inputCurrency.decimals, BN(props.inputAmount));
+    const outAmount = amountUi(props.outputCurrency.decimals, BN(props.outAmount));
+
+    return {
+      price: inverted ? BN(outAmount).div(inputAmount).toNumber() : BN(inputAmount).div(outAmount).toNumber(),
+      leftToken: inverted ? props.inputCurrency.symbol : props.outputCurrency.symbol,
+      rightToken: inverted ? props.outputCurrency.symbol : props.inputCurrency.symbol,
+    };
+  }, [props.inputAmount, props.outAmount, props.inputCurrency, props.outputCurrency, inverted]);
+
+  const priceUi = hooks.useFormatNumber({ value: price });
+
+  const onClick = () => {
+    setInverted(!inverted);
+    props.onClick();
+  };
+
+  return (
+    <div onClick={onClick}>
+      <Typography>
+        1 {leftToken} = {priceUi} {rightToken}
+      </Typography>
+    </div>
+  );
+};
+
+export const amountUi = (decimals?: number, amount?: BN) => {
+  if (!decimals || !amount) return "";
+  const percision = BN(10).pow(decimals || 0);
+  return amount.times(percision).idiv(percision).div(percision).toString();
+};

packages/dapp-example/src/SyncSwap.tsx

@@ -12,7 +12,6 @@ import { erc20s, zeroAddress, isNativeAddress } from "@defi.org/web3-candies";
 import { create } from "zustand";
 import { Styles } from "@orbs-network/twap-ui";
 import { Button, styled } from "@mui/material";
-import BN from "bignumber.js";
 const config = Configs.SyncSwap;
 
 const palletes = [

packages/dapp-example/src/hooks.tsx

@@ -211,7 +211,7 @@ export const useTrade = (fromToken?: string, toToken?: string, srcAmount?: strin
     queryKey: ["useTrade", fromToken, toToken, srcAmount, chainId],
     queryFn: async () => {
       if (!fromTokenDecimals || !toTokenDecimals) return "0";
-      await delay(1000);
+      await delay(2_000);
       const result = convertDecimals(
         BigNumber(srcAmount!)
           .times(fromTokenUsd || "0")

packages/kinetix/src/index.tsx

@@ -92,7 +92,7 @@ const OrderSummary = ({ children }: { children: ReactNode }) => {
 };
 
 const MaxSelector = () => {
-  const onPercentClick = hooks.useCustomActions().onPercentClick;
+  const onPercentClick = hooks.useCustomActions();
 
   const onClick = (value: number) => {
     onPercentClick(value);

packages/lib/src/analytics.ts

@@ -47,7 +47,17 @@ const onWrapSuccess = () => {
   sendAnalyticsEvent(Category.TWAPPanel, "onWrapSuccess");
 };
 
-const onConfirmationCreateOrderClick = () => {
+const onConfirmationCreateOrderClick = ({
+  minAmountOut,
+  totalTrades,
+  tradeSize,
+  deadline,
+}: {
+  minAmountOut: string;
+  totalTrades: number;
+  tradeSize: BigNumber;
+  deadline: number;
+}) => {
   const lib = useTwapStore.getState().lib;
 
   const srcToken = useTwapStore.getState().srcToken;
@@ -58,11 +68,11 @@ const onConfirmationCreateOrderClick = () => {
     srcToken: useTwapStore.getState().srcToken?.address,
     dstToken: useTwapStore.getState().dstToken?.address,
     srcTokenAmount: amountUi(srcToken, useTwapStore.getState().getSrcAmount()),
-    tradeSize: amountUi(srcToken, useTwapStore.getState().getSrcChunkAmount()),
-    minAmountOut: amountUi(dsToken, BigNumber(useTwapStore.getState().dstAmount || "0")),
-    deadline: useTwapStore.getState().getDeadline(),
+    tradeSize: amountUi(srcToken, tradeSize),
+    minAmountOut,
+    deadline,
     tradeInterval: useTwapStore.getState().getFillDelayUiMillis(),
-    totalTrades: useTwapStore.getState().getChunks(),
+    totalTrades,
   });
 };