From 827fe422575e1aaf1723c62d1bba2987940a7ac3 Mon Sep 17 00:00:00 2001 From: denis-orbs Date: Mon, 1 Apr 2024 20:58:19 +0300 Subject: [PATCH] a --- packages/baseswap/src/index.tsx | 54 +- packages/baseswap/src/styles.ts | 66 ++- packages/dapp-example/src/PancakeSwap.tsx | 2 +- packages/lib/src/components/Components.tsx | 11 +- packages/lib/src/components/Wizard.tsx | 4 +- packages/lib/src/components/base/Modal.tsx | 1 + packages/lib/src/consts.ts | 4 +- packages/lib/src/context.tsx | 12 +- packages/lib/src/hooks.ts | 165 +++++- packages/lib/src/mock.ts | 492 ++++++++++++++++++ .../lib/src/orders/Order/OrderExpanded.tsx | 56 +- .../lib/src/orders/Order/OrderPreview.tsx | 49 +- packages/lib/src/orders/OrdersList.tsx | 2 +- packages/lib/src/store.ts | 51 +- packages/lib/src/styles.ts | 10 +- packages/lib/src/types.ts | 1 + packages/lib/src/utils.ts | 14 +- packages/pancake/src/OrderSummary.tsx | 10 +- packages/pancake/src/index.tsx | 20 +- packages/pancake/src/styles.tsx | 28 +- packages/pangolin/src/Orders.tsx | 4 +- 21 files changed, 882 insertions(+), 174 deletions(-) create mode 100644 packages/lib/src/mock.ts diff --git a/packages/baseswap/src/index.tsx b/packages/baseswap/src/index.tsx index ef014bec..7843df92 100644 --- 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,6 +31,7 @@ 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; @@ -37,8 +39,8 @@ const Button = (props: any) => { const DappButton = useAdapterContext().Button; return ( - - {props.children} + + {props.loading ? "Loading..." : props.children} ); }; @@ -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 ( - + @@ -84,7 +88,9 @@ const OrderSummary = ({ children }: { children: ReactNode }) => { - + + + ); @@ -215,7 +221,7 @@ const TWAPPanel = () => { - + @@ -238,7 +244,7 @@ const LimitPanel = () => { - + @@ -276,7 +282,17 @@ const LimitPrice = ({ limit }: { limit?: boolean }) => { - + + + + + + } /> + Reset + + + + {!limit && } @@ -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 ( + + ); +}; + +export const StyledSubmitButton = styled(SubmitButton)({ + marginTop: 10, +}); diff --git a/packages/baseswap/src/styles.ts b/packages/baseswap/src/styles.ts index 7c4e26d7..442d9d9d 100644 --- 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 index 42f7edef..f384e318 100644 --- 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 index 1075d76f..5fe754f6 100644 --- 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 ( @@ -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 index 62ba82bb..bec795a2 100644 --- 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 ( diff --git a/packages/lib/src/components/base/Modal.tsx b/packages/lib/src/components/base/Modal.tsx index d00f89bc..63231596 100644 --- 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 index 65b51ccb..9335a10f 100644 --- 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 index d1da0631..5ef49fb3 100644 --- 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,10 +55,10 @@ 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(); @@ -66,8 +66,10 @@ const Listener = (props: TwapLibProps) => { 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); diff --git a/packages/lib/src/hooks.ts b/packages/lib/src/hooks.ts index 59c88017..5a3b89e4 100644 --- a/packages/lib/src/hooks.ts +++ b/packages/lib/src/hooks.ts @@ -21,6 +21,7 @@ import { web3, parseEvents, sendAndWaitForConfirmations, + networks, } from "@defi.org/web3-candies"; import { useTwapStore, useWizardStore, WizardAction, WizardActionStatus } from "./store"; import { QUERY_PARAMS, REFETCH_BALANCE, REFETCH_GAS_PRICE, REFETCH_ORDER_HISTORY, REFETCH_USD, STALE_ALLOWANCE } from "./consts"; @@ -28,6 +29,9 @@ import { QueryKeys } from "./enums"; import { useNumericFormat } from "react-number-format"; import moment from "moment"; import { amountUi, getTokenFromTokensList, setQueryParam } from "./utils"; +import { ContractCallContext, Multicall } from "ethereum-multicall"; +import { mock } from "./mock"; +import lib from "qrcode.react"; /** * Actions @@ -177,6 +181,8 @@ export const useOnTokenSelect = (isSrc?: boolean) => { export const useCreateOrder = (disableWizard?: boolean, onSuccess?: () => void) => { const { maxFeePerGas, priorityFeePerGas } = useGasPriceQuery(); const store = useTwapStore(); + const { refetch } = useOrdersHistoryQuery(); + const setShowConfirmation = useTwapStore((store) => store.setShowConfirmation); const submitOrder = useSubmitOrderCallback(); @@ -199,6 +205,7 @@ export const useCreateOrder = (disableWizard?: boolean, onSuccess?: () => void) getSrcChunkAmount: store.getSrcChunkAmount(), getDeadline: store.getDeadline(), fillDelayMillis: store.getFillDelayUiMillis(), + isLimit: store.isLimitOrder, }); onTxSubmitted?.({ @@ -218,7 +225,7 @@ export const useCreateOrder = (disableWizard?: boolean, onSuccess?: () => void) analytics.onConfirmationCreateOrderClick(); store.setLoading(true); - return submitOrder( + const order = await submitOrder( store.setTxHash, store.srcToken!, dstToken, @@ -232,12 +239,15 @@ export const useCreateOrder = (disableWizard?: boolean, onSuccess?: () => void) priorityFeePerGas || zero, maxFeePerGas ); + + await refetch(); + return order; }, { onSuccess: async (result) => { analytics.onCreateOrderSuccess(result.orderId); onSuccess?.(); - store.setOrderCreatedTimestamp(Date.now()); + setShowConfirmation(false); !disableWizard && wizardStore.setStatus(WizardActionStatus.SUCCESS); }, onError: (error: Error) => { @@ -275,12 +285,12 @@ export const useInitLib = () => { export const useUpdateStoreOveride = () => { const setStoreOverrideValues = useTwapStore((state) => state.setStoreOverrideValues); - + const enableQueryParams = useTwapContext().enableQueryParams; return useCallback( (values?: Partial) => { - setStoreOverrideValues(values || {}); + setStoreOverrideValues(values || {}, enableQueryParams); }, - [setStoreOverrideValues] + [setStoreOverrideValues, enableQueryParams] ); }; @@ -475,11 +485,18 @@ export const usePriceUSD = (address?: string, onSuccess?: (value: BN) => void) = const _address = address && isNativeAddress(address) ? lib?.config.wToken.address : address; const usd = context.usePriceUSD?.(_address); + const [priceUsdPointer, setPriceUsdPointer] = useState(0); + + useEffect(() => { + if (context.priceUsd) { + setPriceUsdPointer((prev) => prev + 1); + } + }, [context.priceUsd, setPriceUsdPointer]); + const query = useQuery( - [QueryKeys.GET_USD_VALUE, _address], + [QueryKeys.GET_USD_VALUE, _address, priceUsdPointer], async () => { const res = await context.priceUsd!(_address!); - return new BN(res); }, { @@ -566,11 +583,10 @@ const useTokenList = () => { export const useOrdersHistoryQuery = () => { const tokenList = useTokenList(); - const orderCreatedTimestamp = useTwapStore((state) => state.orderCreatedTimestamp); const lib = useTwapStore((state) => state.lib); const query = useQuery( - [QueryKeys.GET_ORDER_HISTORY, lib?.maker, lib?.config.chainId, orderCreatedTimestamp], + [QueryKeys.GET_ORDER_HISTORY, lib?.maker, lib?.config.chainId], async () => { const orders = await lib!.getAllOrders(); @@ -599,6 +615,7 @@ export const useOrdersHistoryQuery = () => { onError: (error: any) => console.log(error), refetchOnWindowFocus: true, retry: 5, + staleTime: Infinity, } ); return { ...query, orders: query.data || {}, isLoading: query.isLoading && query.fetchStatus !== "idle" }; @@ -671,13 +688,10 @@ export const useOrderPastEvents = (order: OrderUI, enabled?: boolean) => { BN(0) ); - return { - dstAmountOut: amountUi(order!.ui.dstToken, dstAmountOut), - dstAmountOutUsdPrice: amountUi(order!.ui.dstToken, dstAmountOut.times(order!.ui.dstUsd)), - }; + return amountUi(order!.ui.dstToken, dstAmountOut); }, { - enabled: !!lib && !!_enabled && !!order, + enabled: !!lib && !!_enabled && !!order && lib.config.chainId !== networks.bsc.id, retry: 5, staleTime: Infinity, onSuccess: () => setHaveValue(true), @@ -685,7 +699,19 @@ export const useOrderPastEvents = (order: OrderUI, enabled?: boolean) => { ); }; -export const useFormatNumber = ({ value, decimalScale = 3, prefix, suffix }: { value?: string | number; decimalScale?: number; prefix?: string; suffix?: string }) => { +export const useFormatNumber = ({ + value, + decimalScale = 3, + prefix, + suffix, + disableDynamicDecimals = true, +}: { + value?: string | number; + decimalScale?: number; + prefix?: string; + suffix?: string; + disableDynamicDecimals?: boolean; +}) => { const decimals = useMemo(() => { if (!value) return 0; const [, decimal] = value.toString().split("."); @@ -709,7 +735,7 @@ export const useFormatNumber = ({ value, decimalScale = 3, prefix, suffix }: { v thousandSeparator: ",", displayType: "text", value: value || "", - decimalScale: decimals, + decimalScale: disableDynamicDecimals ? decimalScale : decimals, prefix, suffix, }); @@ -848,16 +874,19 @@ export const useSubmitButton = (isMain?: boolean, _translations?: Translations) warning: store.getFillWarning(translations), createOrderLoading: store.loading, })); + const reset = useResetStore(); const outAmountLoading = useOutAmountLoading(); const { srcUsdLoading, dstUsdLoading } = useLoadingState(); const { mutate: approve, isLoading: approveLoading } = useApproveToken(); - const { mutate: createOrder } = useCreateOrder(); + const { mutate: createOrder } = useCreateOrder(false, reset); const allowance = useHasAllowanceQuery(); const { mutate: unwrap, isLoading: unwrapLoading } = useUnwrapToken(); const { mutate: wrap, isLoading: wrapLoading } = useWrapToken(); const connect = useTwapContext()?.connect; const wizardStore = useWizardStore(); const { loading: changeNetworkLoading, changeNetwork } = useChangeNetwork(); + const { custom, limitPrice } = useLimitPrice(); + const waitForLimitPrice = !custom && !limitPrice; if (wrongNetwork) return { @@ -873,7 +902,7 @@ export const useSubmitButton = (isMain?: boolean, _translations?: Translations) loading: false, disabled: false, }; - if (outAmountLoading) { + if (outAmountLoading || waitForLimitPrice) { return { text: "", onClick: undefined, loading: true, disabled: true }; } if (warning) @@ -899,7 +928,7 @@ export const useSubmitButton = (isMain?: boolean, _translations?: Translations) }; if (createOrderLoading) { return { - text: "", + text: translations.confirmOrder, onClick: () => { if (!showConfirmation) { setShowConfirmation(true); @@ -945,7 +974,6 @@ export const useParseOrderUi = (o?: ParsedOrder) => { const lib = useTwapStore((s) => s.lib); const { value: srcUsd = zero } = usePriceUSD(o?.order.ask.srcToken); const { value: dstUsd = zero } = usePriceUSD(o?.order.ask.dstToken); - return useMemo(() => { if (!lib || !o) return; const srcToken = o.ui.srcToken; @@ -1084,3 +1112,100 @@ export const usePagination = (list: T[] = [], chunkSize = 5) => { text: `Page ${page + 1} of ${chunks.length}`, }; }; + +export const useGetFills = () => { + const lib = useTwapStore((s) => s.lib); + const { dataUpdatedAt } = useOrdersHistoryQuery(); + + return useQuery( + ["useGetFills", lib?.config.chainId, lib?.maker, dataUpdatedAt], + async ({ signal }) => { + const response = await fetch( + `https://api.bscscan.com/api?module=logs&action=getLogs&fromBlock=0&toBlock=latest&address=0x25a0A78f5ad07b2474D3D42F1c1432178465936d&topic0=0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9&topic0_2_opr=and&topic2=0x000000000000000000000000${lib?.maker.replace( + "0x", + "" + )}`, + { + signal, + } + ); + const fills = await response.json(); + // const fills = mock; + + const parsedFills = fills.result.map((fill: any) => { + try { + const parsedData = _.values(web3().eth.abi.decodeParameters(["uint256", "uint256", "uint256", "uint256"], fill.data)); + const dstAmount = parsedData[2]; + const orderId = web3().utils.hexToNumber(fill.topics[1]); + + return { + dstAmount, + orderId, + }; + } catch (error) { + return undefined; + } + }); + + const grouped = _.map( + _.groupBy( + _.filter(parsedFills, (it) => !!it), + "orderId" + ), + (fills, orderId) => { + return { + orderId: Number(orderId), + dstAmount: _.reduce(fills, (acc, it) => acc.plus(it!.dstAmount), BN(0)).toString(), + }; + } + ); + + const result = _.mapValues(_.keyBy(grouped, "orderId"), "dstAmount"); + console.log({ result }); + return result; + }, + { + enabled: !!lib && lib.config.chainId === networks.bsc.id && !!dataUpdatedAt, + staleTime: Infinity, + keepPreviousData: true, + } + ); +}; + +export const useOrderAmountOut = (order: OrderUI) => { + const { data: fills } = useGetFills(); + + return useMemo(() => { + if (!order || !fills) return undefined; + const dstAmount = fills[order.order.id]; + if (!dstAmount) { + return { + dstAmountOut: "0", + dstAmountOutUsdPrice: "0", + }; + } + return { + dstAmountOut: amountUi(order?.ui.dstToken, BN(dstAmount)), + dstAmountOutUsdPrice: amountUi(order!.ui.dstToken, BN(dstAmount).times(order!.ui.dstUsd)), + }; + }, [fills, order]); +}; + +export const useDstAmountOut = (order: OrderUI, expanded?: boolean) => { + const { data, isLoading } = useOrderPastEvents(order, expanded); + const orderAmountOut = useOrderAmountOut(order); + const chainId = useTwapStore((s) => s.lib?.config.chainId); + const dstAmountOut = data || orderAmountOut?.dstAmountOut; + + const dstAmoutOutUsd = useMemo(() => { + if (!dstAmountOut || !order?.ui.dstUsdUi) return undefined; + return BN(dstAmountOut).times(order?.ui.dstUsdUi).toString(); + }, [dstAmountOut, order]); + + return { + dstAmountOut, + dstAmoutOutUsd, + amountOutLoading: chainId === networks.bsc.id ? !dstAmountOut : expanded && isLoading, + usdLoading: chainId === networks.bsc.id ? !dstAmoutOutUsd : expanded && isLoading, + }; +}; diff --git a/packages/lib/src/mock.ts b/packages/lib/src/mock.ts new file mode 100644 index 00000000..b74d238d --- /dev/null +++ b/packages/lib/src/mock.ts @@ -0,0 +1,492 @@ +export const mock = { + status: "1", + message: "OK-Missing/Invalid API Key, rate limit of 1/5sec applied", + result: [ + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x000000000000000000000000000000000000000000000000000000000000001a", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000c2abc02acd77bb2407efa22348da9afc8b375290", + ], + data: "0x00000000000000000000000085253417e9bf576980318e7882147618c4980969000000000000000000000000000000000000000000000000002efbc77875ffd10000000000000000000000000000000000000000000000000133ecd1a92d304d000000000000000000000000000000000000000000000000001d357b93b57000000000000000000000000000000000000000000000000000002efbc77875ffd1", + blockNumber: "0x1be9983", + blockHash: "0xe4770b3dbc3ad92007d8c7f76460e22a81bd78fdbe1d332a78364ebcb77b1b82", + timeStamp: "0x6491b265", + gasPrice: "0xd693a400", + gasUsed: "0x7fcad", + logIndex: "0x4c", + transactionHash: "0x2d5dc4c44c74feae563de4f97afc70b092062dde576197f7192d460225757c3a", + transactionIndex: "0x2b", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x000000000000000000000000000000000000000000000000000000000000001c", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000c2abc02acd77bb2407efa22348da9afc8b375290", + ], + data: "0x00000000000000000000000085253417e9bf576980318e7882147618c498096900000000000000000000000000000000000000000000000000b1a2bc2ec5000000000000000000000000000000000000000000000000000082f9023aa846d34c000000000000000000000000000000000000000000000000233c40521c19cbb000000000000000000000000000000000000000000000000000b1a2bc2ec50000", + blockNumber: "0x1bea144", + blockHash: "0x074b134f418a32ca73fecc55c18742ddd06e66a91f42d6eea7fe87c117a03329", + timeStamp: "0x6491c9b3", + gasPrice: "0xd693a400", + gasUsed: "0xf2ce6", + logIndex: "0x30", + transactionHash: "0x4f3abfaccba8af7b73f7b1a9b103208b5a1cabca576b69f6f7a38f70ba4f845b", + transactionIndex: "0x12", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x0000000000000000000000000000000000000000000000000000000000000048", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000c2abc02acd77bb2407efa22348da9afc8b375290", + ], + data: "0x00000000000000000000000085253417e9bf576980318e7882147618c498096900000000000000000000000000000000000000000000000000d61a82e70ae226000000000000000000000000000000000000000000000000aaf6f848df447ce40000000000000000000000000000000000000000000000002479bb4ba495663800000000000000000000000000000000000000000000000000d61a82e70ae226", + blockNumber: "0x1bf6e51", + blockHash: "0x2e3452a69be75be98b9e836f4054fb65db024e11907c0703f02241cd26152bed", + timeStamp: "0x649432fb", + gasPrice: "0xd693a400", + gasUsed: "0xf0dc8", + logIndex: "0x3c", + transactionHash: "0xfa8924bbc7c44adcc3ea73b64d31089368c4866bb87f33018418f54e2f2d0f0b", + transactionIndex: "0x19", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x0000000000000000000000000000000000000000000000000000000000000048", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000c2abc02acd77bb2407efa22348da9afc8b375290", + ], + data: "0x00000000000000000000000085253417e9bf576980318e7882147618c498096900000000000000000000000000000000000000000000000000d61a82e70ae226000000000000000000000000000000000000000000000000aada59369e7e6d56000000000000000000000000000000000000000000000000246a8dd11ff66e3400000000000000000000000000000000000000000000000001ac3505ce15c44c", + blockNumber: "0x1bf6e79", + blockHash: "0x531cd93ce343115a74fcdc7fa1f865d5aef078a6040c445636efe6ed763a6f15", + timeStamp: "0x64943373", + gasPrice: "0xd693a400", + gasUsed: "0xee19e", + logIndex: "0x47", + transactionHash: "0x155e5551db19f13b11976d3bc88328cd642e0ceeba89785d4048a2c6ebea7802", + transactionIndex: "0xe", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x0000000000000000000000000000000000000000000000000000000000000124", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000c2abc02acd77bb2407efa22348da9afc8b375290", + ], + data: "0x000000000000000000000000984e568d0db7cbc373aa0e0852377632708eb2c60000000000000000000000000000000000000000000000009d98c69362033f2c00000000000000000000000000000000000000000000000000a0e1fa64844de2000000000000000000000000000000000000000000000000000822554e9a88000000000000000000000000000000000000000000000000009d98c69362033f2c", + blockNumber: "0x1c1921d", + blockHash: "0xd38e8a31a3b80cf4c2a1dc0ce045df9a312dcc0d6d796d6f5816c5bae9a6aba1", + timeStamp: "0x649aa20d", + gasPrice: "0xd693a400", + gasUsed: "0xaf89f", + logIndex: "0x31", + transactionHash: "0x918c32cf1c767725b5b6784e2243f4c258357b1ed699242c7710c7adda56484c", + transactionIndex: "0x11", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x0000000000000000000000000000000000000000000000000000000000000124", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000c2abc02acd77bb2407efa22348da9afc8b375290", + ], + data: "0x00000000000000000000000085253417e9bf576980318e7882147618c49809690000000000000000000000000000000000000000000000009d98c69362033f2c000000000000000000000000000000000000000000000000008342a2ddda22570000000000000000000000000000000000000000000000000025c1a68c3f88000000000000000000000000000000000000000000000000013b318d26c4067e58", + blockNumber: "0x1c19240", + blockHash: "0x524c3c1c33e5747c3a38a4bd20d61dd62060492ff02e460c07a88e7d9c396c83", + timeStamp: "0x649aa276", + gasPrice: "0xd693a400", + gasUsed: "0xad92f", + logIndex: "0x53", + transactionHash: "0x2eac094f59a8574876d611cc12d0bf53215788600fb223604b567bafcaee799d", + transactionIndex: "0x22", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x0000000000000000000000000000000000000000000000000000000000000124", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000c2abc02acd77bb2407efa22348da9afc8b375290", + ], + data: "0x00000000000000000000000085253417e9bf576980318e7882147618c49809690000000000000000000000000000000000000000000000009d98c69362033f2c00000000000000000000000000000000000000000000000000a05639eaf0208d0000000000000000000000000000000000000000000000000008ae093624b800000000000000000000000000000000000000000000000001d8ca53ba2609bd84", + blockNumber: "0x1c19268", + blockHash: "0xbe8a28f39bc5a909411708b2ca012ff3b8cb310439d9ddfe3ff2306d6208a343", + timeStamp: "0x649aa2ee", + gasPrice: "0xd693a400", + gasUsed: "0xaea60", + logIndex: "0x5c", + transactionHash: "0x46ad5011ac4b2c541b97c80dfbb6c7efa2962abb9770a39647337b6cf17e56bb", + transactionIndex: "0x18", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x00000000000000000000000000000000000000000000000000000000000001b8", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000d63430c74c8e70d9dbdca04c6a9e6e9e929028da", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b83000000000000000000000000000000000000000000000000009113e42df4214e0000000000000000000000000000000000000000000000006a0dfe6f9d530d070000000000000000000000000000000000000000000000002140c35cc5e4322f000000000000000000000000000000000000000000000000009113e42df4214e", + blockNumber: "0x1c898d5", + blockHash: "0xba2991a75fa0fe34443c3b429cc7690d30dfdfa0edde088cebb762b9c1b4833b", + timeStamp: "0x64afc714", + gasPrice: "0xdf847580", + gasUsed: "0xcf619", + logIndex: "0x61", + transactionHash: "0xecfcb901f18395f1ac26c3a66c82403655b961694b94264087d43877f19bb33a", + transactionIndex: "0x3a", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x00000000000000000000000000000000000000000000000000000000000001b8", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000d63430c74c8e70d9dbdca04c6a9e6e9e929028da", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b83000000000000000000000000000000000000000000000000009113e42df4214e0000000000000000000000000000000000000000000000007ae25da7d6ff8ea00000000000000000000000000000000000000000000000001098bbe9c8b16d1f000000000000000000000000000000000000000000000000012227c85be8429c", + blockNumber: "0x1c898f4", + blockHash: "0xa89e09f4603667e0becfb8523cb6216fe88c9624cedf68ff5da481e00ce566bb", + timeStamp: "0x64afc771", + gasPrice: "0xdf847580", + gasUsed: "0x8858c", + logIndex: "0x41", + transactionHash: "0x4d849a19dd958a3f7b4deac364e922f7537f2f6bb52e9fab9865efcaee84c7ed", + transactionIndex: "0x17", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x00000000000000000000000000000000000000000000000000000000000002db", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000d63430c74c8e70d9dbdca04c6a9e6e9e929028da", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b830000000000000000000000000000000000000000000000015311d77eaeedc408000000000000000000000000000000000000000000000000015e73eaab4e28d900000000000000000000000000000000000000000000000000234d11182910000000000000000000000000000000000000000000000000015311d77eaeedc408", + blockNumber: "0x1dd9405", + blockHash: "0x9a4be40528804015bcde7fb219d69a7a93b64d0635837f1ce5141f7d1d3c022d", + timeStamp: "0x64eef0a4", + gasPrice: "0xdf847580", + gasUsed: "0xa79f5", + logIndex: "0x34", + transactionHash: "0x219edf350476520bc0b0eb290fdb34e4b6bcc4714d19c94a7db9a2d8d115b436", + transactionIndex: "0xf", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x00000000000000000000000000000000000000000000000000000000000003cc", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000c2abc02acd77bb2407efa22348da9afc8b375290", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b83000000000000000000000000000000000000000000000000012b67715c734e1f000000000000000000000000000000000000000000000000d6c8e04a4903098c0000000000000000000000000000000000000000000000001f290edf2c244ed8000000000000000000000000000000000000000000000000012b67715c734e1f", + blockNumber: "0x1f38c35", + blockHash: "0x617bd948fdd2c6f77e94d0ec40140bafeebb3850872d30b3cfe2d660d40c1bb2", + timeStamp: "0x653111a3", + gasPrice: "0xdf847581", + gasUsed: "0x161a0c", + logIndex: "0x69", + transactionHash: "0x88c69783bca111c074533de12c43e8fce96049709c2878d319e2cc33fd682d93", + transactionIndex: "0x14", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x00000000000000000000000000000000000000000000000000000000000006f8", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000b2bafe188fad927240038cc4fff2d771d8a58905", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b83000000000000000000000000000000000000000000000001582b71a229a583a600000000000000000000000000000000000000000000000035d0655b3ef4d32100000000000000000000000000000000000000000000000019a3bbdff30388f6000000000000000000000000000000000000000000000001582b71a229a583a6", + blockNumber: "0x2300c68", + blockHash: "0x512e6be043e18d351d245d349a31e2abc3921b9978b7c615e3a6ff0121c305f5", + timeStamp: "0x65e71336", + gasPrice: "0xdf847581", + gasUsed: "0x1a123d", + logIndex: "0x3c", + transactionHash: "0x627de226a2bae0a0ab323df32d59ed6fe256d060739a97042dbb4c9987b96d86", + transactionIndex: "0x7", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x00000000000000000000000000000000000000000000000000000000000006fa", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000b2bafe188fad927240038cc4fff2d771d8a58905", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b83000000000000000000000000000000000000000000000004b0638dace6f0344a00000000000000000000000000000000000000000000000489ae80fb272edb2e00000000000000000000000000000000000000000000000026d173b67ed057a0000000000000000000000000000000000000000000000004b0638dace6f0344a", + blockNumber: "0x231005d", + blockHash: "0x56c65e07b3964eea68e095033b2973dc27bd4a038c58637039a89305201c87dc", + timeStamp: "0x65e9f02b", + gasPrice: "0xdf847581", + gasUsed: "0xfe45c", + logIndex: "0x3a", + transactionHash: "0x8d0620c79e146ba8247e2487ace2f911bd54320e827da8395dbc38e04fd2228d", + transactionIndex: "0x16", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x00000000000000000000000000000000000000000000000000000000000006fb", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000b2bafe188fad927240038cc4fff2d771d8a58905", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b8300000000000000000000000000000000000000000000000489ae810019a8f5a90000000000000000000000000000000000000000000000043ff8a1ca04e3a1420000000000000000000000000000000000000000000000004b8992bc0b9d479b00000000000000000000000000000000000000000000000489ae810019a8f5a9", + blockNumber: "0x23100de", + blockHash: "0xa3b3672cf4f0067802028b45fc6f0458b25a2d1caa21d2408b9be8f7cd2fbc0b", + timeStamp: "0x65e9f1ae", + gasPrice: "0xdf847581", + gasUsed: "0x122b32", + logIndex: "0x58", + transactionHash: "0x6c4d0d8fae8a1fee6e6e47acf0d0dfea49e5a98a502e7e6a813557b566d28cdd", + transactionIndex: "0xb", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x00000000000000000000000000000000000000000000000000000000000006fc", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000b2bafe188fad927240038cc4fff2d771d8a58905", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b83000000000000000000000000000000000000000000000004c2e57056bd340e9f0000000000000000000000000000000000000000000000049cc0b05b2c12a7ac000000000000000000000000000000000000000000000000272ad3a0789d5ed9000000000000000000000000000000000000000000000004c2e57056bd340e9f", + blockNumber: "0x231019c", + blockHash: "0x60aa9aa9f1f0c321ff85eb624d08b88aff749c6e6d1dc49813931172f665c5f4", + timeStamp: "0x65e9f3e9", + gasPrice: "0xdf847581", + gasUsed: "0xfaf0b", + logIndex: "0x59", + transactionHash: "0x46b37cea05627feea69ebf69c5d58fe9213246446865bf3ef715c442f83a901a", + transactionIndex: "0x27", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x00000000000000000000000000000000000000000000000000000000000006fd", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000b2bafe188fad927240038cc4fff2d771d8a58905", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b83000000000000000000000000000000000000000000000003922c14410de70af70000000000000000000000000000000000000000000000037d54e4519430f07c00000000000000000000000000000000000000000000000015d6b6173f9e6e27000000000000000000000000000000000000000000000003922c14410de70af7", + blockNumber: "0x2310596", + blockHash: "0xacfafcc761e3ccd33d2a345dafd8a16bfc367b47fb73c08e42a6d929743472f2", + timeStamp: "0x65e9ffdf", + gasPrice: "0xdf847581", + gasUsed: "0xb8f94", + logIndex: "0x57", + transactionHash: "0xafc20640b83db9e7aca37d0b8052ede113492b4d96e68a4554a9e9551c12c224", + transactionIndex: "0x1e", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x00000000000000000000000000000000000000000000000000000000000006ff", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000b2bafe188fad927240038cc4fff2d771d8a58905", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b83000000000000000000000000000000000000000000000002ada10f30ca6d483a00000000000000000000000000000000000000000000000298833fa1e36adb2600000000000000000000000000000000000000000000000015d97e70f05816c9000000000000000000000000000000000000000000000002ada10f30ca6d483a", + blockNumber: "0x23106b6", + blockHash: "0x40f6d8bd6c607fbd0eaf884592ed66427e3e7bcf4ac52da2b0c7030af2a5633a", + timeStamp: "0x65ea0343", + gasPrice: "0xdf847581", + gasUsed: "0xaea78", + logIndex: "0x56", + transactionHash: "0x12ac78f1e3eaac91fdf54d78d56b948782945c2147c3cffe83a1bfcda5258d26", + transactionIndex: "0x31", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x0000000000000000000000000000000000000000000000000000000000000700", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000b2bafe188fad927240038cc4fff2d771d8a58905", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b830000000000000000000000000000000000000000000000020238cb6497d1f62b000000000000000000000000000000000000000000000001ece4a6e844609c9500000000000000000000000000000000000000000000000015e2f60c510ec0810000000000000000000000000000000000000000000000020238cb6497d1f62b", + blockNumber: "0x231080a", + blockHash: "0xc09a579fb77fa0b1d4539f00d3f50af713e99c09cb2ef687e972caa992882616", + timeStamp: "0x65ea073f", + gasPrice: "0xdf847581", + gasUsed: "0xb9244", + logIndex: "0x36", + transactionHash: "0xb41028693bba0d910ff842982bb74eb395d792611922aeba8c78dde14f3cef2c", + transactionIndex: "0x1b", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x0000000000000000000000000000000000000000000000000000000000000701", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000b2bafe188fad927240038cc4fff2d771d8a58905", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b83000000000000000000000000000000000000000000000001011c65b24be8fb16000000000000000000000000000000000000000000000000eb7ee4152bc1d7b300000000000000000000000000000000000000000000000015ebb63165c538f7000000000000000000000000000000000000000000000001011c65b24be8fb16", + blockNumber: "0x231085b", + blockHash: "0x9bd2a2d4c76229aaa79569d47a138e94833b572ab9cad2640de1223d48e5b475", + timeStamp: "0x65ea0832", + gasPrice: "0xdf847581", + gasUsed: "0xcb40e", + logIndex: "0x17", + transactionHash: "0x2a0e55f0807217dacc65bd9e1f0f0f364c2cbc5ef0c24cb17f4c7fb9d6526eb6", + transactionIndex: "0x9", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x0000000000000000000000000000000000000000000000000000000000000703", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000b2bafe188fad927240038cc4fff2d771d8a58905", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b83000000000000000000000000000000000000000000000000c0d54c45b8eebc50000000000000000000000000000000000000000000000000aacfe540fcfd7fb4000000000000000000000000000000000000000000000000163794bbebc8efac000000000000000000000000000000000000000000000000c0d54c45b8eebc50", + blockNumber: "0x2310e3f", + blockHash: "0x78e6d0c4999d5e92f03a85902472afa44ccd667e872f04c10ce3da3ac1dee15c", + timeStamp: "0x65ea19e2", + gasPrice: "0xdf847581", + gasUsed: "0xa15ae", + logIndex: "0x2b", + transactionHash: "0xae397008702c2af59ddb4e396c32eeb31e7bc34c90352bb4101c0a955c932c66", + transactionIndex: "0x9", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x000000000000000000000000000000000000000000000000000000000000070a", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000b2bafe188fad927240038cc4fff2d771d8a58905", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b830000000000000000000000000000000000000000000000081c4695151822fa7b000000000000000000000000000000000000000000000001f0d324d8dab9dddf0000000000000000000000000000000000000000000000000bf2333d8dfcfd370000000000000000000000000000000000000000000000081c4695151822fa7b", + blockNumber: "0x23242f9", + blockHash: "0xbd703d621b886c2b49728f6bae81dc68e7c4f8f2f468188bcb16cf27a7a311e8", + timeStamp: "0x65edb9a7", + gasPrice: "0xdf847581", + gasUsed: "0x10f2bf", + logIndex: "0x34", + transactionHash: "0xfac6ac19232532b4934807ac3f9290b70ca4786a1b7bc9f2c67907f01b415d4a", + transactionIndex: "0x28", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x000000000000000000000000000000000000000000000000000000000000070b", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000b2bafe188fad927240038cc4fff2d771d8a58905", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b830000000000000000000000000000000000000000000000040e234a8a8c117d3e000000000000000000000000000000000000000000000000f7582b9ec2dc8f4d0000000000000000000000000000000000000000000000000706250b2d40dc2c0000000000000000000000000000000000000000000000040e234a8a8c117d3e", + blockNumber: "0x2324353", + blockHash: "0xdf5fb042dde2bd4792c0e3051456badefd816b077be59660814e0ae75e674588", + timeStamp: "0x65edbab5", + gasPrice: "0xdf847581", + gasUsed: "0xb093b", + logIndex: "0x4d", + transactionHash: "0x9c7e1e004026cb09c8078cdbde53b415946aed1747028faf18f64393abe0158e", + transactionIndex: "0xc", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x000000000000000000000000000000000000000000000000000000000000071e", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000b2bafe188fad927240038cc4fff2d771d8a58905", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b83000000000000000000000000000000000000000000000000023350a06d9dc25a0000000000000000000000000000000000000000000000012724182620e7f993000000000000000000000000000000000000000000000000068e191f988355e7000000000000000000000000000000000000000000000000023350a06d9dc25a", + blockNumber: "0x2378a69", + blockHash: "0x7ebcc15d516d220a99105b0b38cbb4067585f1aeaecece07e3c22217762b9746", + timeStamp: "0x65fd9ad2", + gasPrice: "0xdf847581", + gasUsed: "0x89999", + logIndex: "0x1b", + transactionHash: "0x5b3c5b4bae87f2325857dfaf41271e2cee0ad0b1cff1ba2ef7dd781dec2e31bf", + transactionIndex: "0x8", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x000000000000000000000000000000000000000000000000000000000000071f", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000b2bafe188fad927240038cc4fff2d771d8a58905", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b8300000000000000000000000000000000000000000000000093920c131073fcc900000000000000000000000000000000000000000000000000f591e92cbc7175000000000000000000000000000000000000000000000000001c4c44bf7e800a00000000000000000000000000000000000000000000000093920c131073fcc9", + blockNumber: "0x2378aea", + blockHash: "0x5d8f6dcff21d7f2b6f0d45ea6508d01d8c89be54854d4c7255f5c7bc920995a6", + timeStamp: "0x65fd9c56", + gasPrice: "0xdf847581", + gasUsed: "0xdd878", + logIndex: "0x7c", + transactionHash: "0xefb19f80053e7e48fe0285caed0fc25cb11adfebdc74c17d6c6f4fabec71cf0b", + transactionIndex: "0x23", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x0000000000000000000000000000000000000000000000000000000000000721", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000b2bafe188fad927240038cc4fff2d771d8a58905", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b83000000000000000000000000000000000000000000000000025ea9e733c3a6dc000000000000000000000000000000000000000000000004afe6f138db2b09f700000000000000000000000000000000000000000000000055c4dc62d76b82c7000000000000000000000000000000000000000000000000025ea9e733c3a6dc", + blockNumber: "0x2378b58", + blockHash: "0xdcada7ac856bbaa01636bb82f88238743eda09a5f167edc6cbdb08d39b0a61e1", + timeStamp: "0x65fd9da0", + gasPrice: "0xdf847581", + gasUsed: "0x121a65", + logIndex: "0x60", + transactionHash: "0x8586fd97eb15fbcde69976e01dbe6ace3a0de016af88d0640a9d0e754975d71e", + transactionIndex: "0x26", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x0000000000000000000000000000000000000000000000000000000000000746", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000b2bafe188fad927240038cc4fff2d771d8a58905", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b83000000000000000000000000000000000000000000000003323625d7cfb12a69000000000000000000000000000000000000000000000003220d46d35709595000000000000000000000000000000000000000000000000010d4d5b5d6ee996e000000000000000000000000000000000000000000000003323625d7cfb12a69", + blockNumber: "0x23beea9", + blockHash: "0x2e0627b3abc816d659c983283b8ffb7ea3b2fce9b620db62b6431cc954635e4d", + timeStamp: "0x660ace9b", + gasPrice: "0x47868c00", + gasUsed: "0xd952a", + logIndex: "0x1b6", + transactionHash: "0xc1a2282508e8aa49bd22d27f1604fa7a88994a7035260690bcde4afe5ce70392", + transactionIndex: "0x95", + }, + { + address: "0x25a0a78f5ad07b2474d3d42f1c1432178465936d", + topics: [ + "0xc7529bc0224b03ba593d84e2064baeac956a4221ca93d37af0f1810ad17df7a9", + "0x0000000000000000000000000000000000000000000000000000000000000746", + "0x00000000000000000000000050015a452e644f5511fbeeac6b2ad2bf154e40e4", + "0x000000000000000000000000b2bafe188fad927240038cc4fff2d771d8a58905", + ], + data: "0x000000000000000000000000ed2e30ed2e6df7267f4bfe2e1b2e0be05c289b83000000000000000000000000000000000000000000000003323625d7cfb12a690000000000000000000000000000000000000000000000031e24e88ffd73d4d300000000000000000000000000000000000000000000000013f6cc740fc25d07000000000000000000000000000000000000000000000006646c4baf9f6254d2", + blockNumber: "0x23beed0", + blockHash: "0x8fb7d3c334e586c7c609cde8ade5925aaf7042f9535f51be3df2c1d0c0e045db", + timeStamp: "0x660acf10", + gasPrice: "0x47868c00", + gasUsed: "0x1031c5", + logIndex: "0x166", + transactionHash: "0xfd3d68bce27a0be38c198e8726e81b30f7c27c90ec6eb189a2da359bdc4d982f", + transactionIndex: "0x7d", + }, + ], +}; diff --git a/packages/lib/src/orders/Order/OrderExpanded.tsx b/packages/lib/src/orders/Order/OrderExpanded.tsx index dc4aea20..0c543480 100644 --- a/packages/lib/src/orders/Order/OrderExpanded.tsx +++ b/packages/lib/src/orders/Order/OrderExpanded.tsx @@ -3,53 +3,43 @@ import { Status } from "@orbs-network/twap"; import { ReactNode } from "react"; import { Button, Label, TokenLogo, TokenPriceCompare, Tooltip } from "../../components/base"; import { useTwapContext } from "../../context"; -import { useCancelOrder, useFormatNumber, useHistoryPrice } from "../../hooks"; +import { useCancelOrder, useFormatNumber, useHistoryPrice, useOrderAmountOut } from "../../hooks"; import { useTwapStore } from "../../store"; import { StyledColumnFlex, StyledRowFlex } from "../../styles"; import { OrderUI } from "../../types"; import { fillDelayText } from "../../utils"; const OrderExpanded = ({ order }: { order: OrderUI }) => { - const translations = useTwapContext().translations; + const { translations, uiPreferences } = useTwapContext(); + const hideUsd = uiPreferences.orders?.hideUsd; const minimumDelayMinutes = useTwapStore((state) => state.getMinimumDelayMinutes()); - const totalChunks = useFormatNumber({ value: order?.ui.totalChunks }); - const srcChunkAmountUsdUi = useFormatNumber({ value: order?.ui.srcChunkAmountUsdUi }); - const srcChunkAmountUsdUiTooltip = useFormatNumber({ value: order?.ui.srcChunkAmountUsdUi, decimalScale: 18 }); + const totalChunks = useFormatNumber({ value: order?.ui.totalChunks, disableDynamicDecimals: true }); + const srcChunkAmountUsdUi = useFormatNumber({ value: order?.ui.srcChunkAmountUsdUi, disableDynamicDecimals: true }); - const srcChunkAmountUi = useFormatNumber({ value: order?.ui.srcChunkAmountUi }); - const srcChunkAmountUiTootlip = useFormatNumber({ value: order?.ui.srcChunkAmountUi, decimalScale: 18 }); + const srcChunkAmountUi = useFormatNumber({ value: order?.ui.srcChunkAmountUi, disableDynamicDecimals: true }); - const dstMinAmountOutUi = useFormatNumber({ value: order?.ui.dstMinAmountOutUi }); - const dstMinAmountOutUsdUi = useFormatNumber({ value: order?.ui.dstMinAmountOutUsdUi }); - const dstMinAmountOutUsdUiTooltip = useFormatNumber({ value: order?.ui.dstMinAmountOutUsdUi, decimalScale: 18 }); + const dstMinAmountOutUi = useFormatNumber({ value: order?.ui.dstMinAmountOutUi, disableDynamicDecimals: true }); + const dstMinAmountOutUsdUi = useFormatNumber({ value: order?.ui.dstMinAmountOutUsdUi, disableDynamicDecimals: true }); if (!order) return null; return ( - {order.ui.srcToken && order.ui.dstToken && } + {order.ui.srcToken && order.ui.dstToken && } {totalChunks} - - {srcChunkAmountUi} {order.ui.srcToken?.symbol} - - ≈ $ {srcChunkAmountUsdUi} + {srcChunkAmountUi} {order.ui.srcToken?.symbol} {hideUsd ? null : `≈ $${srcChunkAmountUsdUi}`} - {order.ui.isMarketOrder ? ( - - - {translations.none} {order.ui.dstToken?.symbol} - - ) : ( + {order.ui.isMarketOrder ? null : ( {`${dstMinAmountOutUi} `} - {order.ui.dstToken?.symbol} ≈ $ {dstMinAmountOutUsdUi} + {order.ui.dstToken?.symbol} {hideUsd ? null : `≈ $${dstMinAmountOutUsdUi}`} )} @@ -72,9 +62,9 @@ const OrderExpanded = ({ order }: { order: OrderUI }) => { export default OrderExpanded; -const Row = ({ label, tooltip, children }: { label: string; tooltip: string; children: ReactNode }) => { +const Row = ({ label, tooltip = "", children, className = "" }: { label: string; tooltip?: string; children: ReactNode; className?: string }) => { return ( - + {children} @@ -86,6 +76,7 @@ export const StyledDetailRowChildren = styled(StyledRowFlex)({ gap: 5, fontWeight: 300, fontSize: 13, + textAlign: "right", "& *": { fontWeight: "inherit", @@ -109,21 +100,16 @@ export const StyledDetailRow = styled(StyledRowFlex)({ "& .text": { fontWeight: 300, }, - "@media(max-width: 500px)": { - flexDirection: "column", - alignItems: "flex-start", - gap: 5, - }, + "@media(max-width: 500px)": {}, }); const OrderPrice = ({ order }: { order: OrderUI }) => { const { leftToken, rightToken, priceUi, toggleInverted } = useHistoryPrice(order); const translations = useTwapContext().translations; return ( - - + - + ); }; @@ -145,11 +131,7 @@ export const CancelOrderButton = ({ orderId, className = "" }: { orderId: number }; const StyledMarketPrice = styled(StyledRowFlex)({ - "@media(max-width: 500px)": { - flexDirection: "column", - alignItems: "flex-start", - gap: 5, - }, + "@media(max-width: 500px)": {}, }); export const StyledCancelOrderButton = styled(Button)({}); diff --git a/packages/lib/src/orders/Order/OrderPreview.tsx b/packages/lib/src/orders/Order/OrderPreview.tsx index 3d31c8e1..547b313f 100644 --- a/packages/lib/src/orders/Order/OrderPreview.tsx +++ b/packages/lib/src/orders/Order/OrderPreview.tsx @@ -1,15 +1,16 @@ import { LinearProgress, Typography, Box, styled } from "@mui/material"; import { OrderUI, useTwapContext } from "../.."; import { StyledColumnFlex, StyledRowFlex, StyledText, textOverflow } from "../../styles"; -import { useFormatNumber, useOrderPastEvents } from "../../hooks"; +import { useDstAmountOut, useFormatNumber } from "../../hooks"; import { Icon, Loader, SmallLabel, TokenLogo, Tooltip } from "../../components/base"; import { TokenData } from "@orbs-network/twap"; -import { ReactNode } from "react"; +import { ReactNode, useMemo } from "react"; import { HiArrowRight } from "@react-icons/all-files/hi/HiArrowRight"; import { FiChevronDown } from "@react-icons/all-files/fi/FiChevronDown"; function OrderPreview({ order, expanded }: { order: OrderUI; expanded: boolean }) { - const { data, isFetching } = useOrderPastEvents(order, expanded); + const { dstAmountOut, dstAmoutOutUsd, usdLoading, amountOutLoading } = useDstAmountOut(order, expanded); + const srcFilledAmountUi = useFormatNumber({ value: order?.ui.srcFilledAmountUi }); const progress = useFormatNumber({ value: order?.ui.progress, decimalScale: 1, suffix: "%" }); const translations = useTwapContext().translations; @@ -45,7 +46,14 @@ function OrderPreview({ order, expanded }: { order: OrderUI; expanded: boolean } isLoading={!order?.ui.srcAmountUsdUi} /> } /> - } /> + } + /> ); @@ -96,14 +104,14 @@ interface OrderTokenDisplayProps { className?: string; alighLeft?: boolean; usdPrefix?: string; - usdValue: string; + usdValue?: string; icon?: ReactNode; isLoading?: boolean; isMain?: boolean; + usdLoading?: boolean; } -export const OrderTokenDisplay = ({ token, amount, prefix = "", className = "", usdValue, alighLeft, usdPrefix, icon, isLoading }: OrderTokenDisplayProps) => { - const tokenAmount = useFormatNumber({ value: amount }); - const tokenAmountTooltip = useFormatNumber({ value: amount, decimalScale: 18 }); +export const OrderTokenDisplay = ({ token, amount, prefix = "", className = "", usdValue, alighLeft, usdPrefix, icon, isLoading, usdLoading }: OrderTokenDisplayProps) => { + const tokenAmount = useFormatNumber({ value: amount, disableDynamicDecimals: true }); return ( @@ -111,22 +119,20 @@ export const OrderTokenDisplay = ({ token, amount, prefix = "", className = "", {amount ? ( - - - {prefix ? `${prefix} ` : ""} - {tokenAmount} - {` ${token?.symbol}`} - - + + {prefix ? `${prefix} ` : ""} + {tokenAmount} + {` ${token?.symbol}`} + ) : ( {` ${token?.symbol}`} )} - {!alighLeft && } + {!alighLeft && } {icon && {icon}} - {alighLeft && } + {alighLeft && } ); }; @@ -142,22 +148,19 @@ const StyledIcon = styled("div")({ interface OrderUsdValueProps { prefix?: string; - usdValue: string; + usdValue?: string; isLoading?: boolean; } export function OrderUsdValue({ usdValue, prefix = "≈", isLoading }: OrderUsdValueProps) { - const formattedValue = useFormatNumber({ value: usdValue }); - const formattedValueTooltip = useFormatNumber({ value: usdValue, decimalScale: 18 }); + const formattedValue = useFormatNumber({ value: usdValue, disableDynamicDecimals: true }); if (isLoading) return ; if (!usdValue) return null; return ( - - {prefix} $ {formattedValue} - + {prefix} $ {formattedValue} ); } diff --git a/packages/lib/src/orders/OrdersList.tsx b/packages/lib/src/orders/OrdersList.tsx index 457f422d..2934ce06 100644 --- a/packages/lib/src/orders/OrdersList.tsx +++ b/packages/lib/src/orders/OrdersList.tsx @@ -52,7 +52,7 @@ const List = ({ orders, status }: { orders?: ParsedOrder[]; status?: string }) = {_.size(orders) ? ( orders?.map((order, index) => { - return onSelect(index)} />; + return onSelect(order.order.id)} />; }) ) : ( diff --git a/packages/lib/src/store.ts b/packages/lib/src/store.ts index fc3686fd..bf48f094 100644 --- a/packages/lib/src/store.ts +++ b/packages/lib/src/store.ts @@ -6,7 +6,7 @@ import { combine } from "zustand/middleware"; import _, { get } from "lodash"; import { eqIgnoreCase, parsebn, isNativeAddress } from "@defi.org/web3-candies"; import { State, StoreOverride, Translations } from "./types"; -import { MIN_NATIVE_BALANCE, QUERY_PARAMS, QUERY_PARAMS_ENABLED } from "./consts"; +import { MIN_NATIVE_BALANCE, QUERY_PARAMS } from "./consts"; import { amountBN, amountUi, fillDelayText, getQueryParam, setQueryParam } from "./utils"; export enum TimeResolution { @@ -21,16 +21,15 @@ export type Duration = { resolution: TimeResolution; amount?: number }; * TWAP Store */ -const limitPriceQueryParam = getQueryParam(QUERY_PARAMS.LIMIT_PRICE); -const tradeIntervalQueryParam = getQueryParam(QUERY_PARAMS.TRADE_INTERVAL); -const maxDurationQueryParam = getQueryParam(QUERY_PARAMS.MAX_DURATION); -const srcAmountUi = getQueryParam(QUERY_PARAMS.INPUT_AMOUNT); -const chunks = getQueryParam(QUERY_PARAMS.TRADES_AMOUNT); - const defaultCustomFillDelay = { resolution: TimeResolution.Minutes, amount: 2 }; const defaultCustomDuration = { resolution: TimeResolution.Minutes, amount: undefined }; const getInitialState = (queryParamsEnabled?: boolean): State => { + const limitPriceQueryParam = getQueryParam(QUERY_PARAMS.LIMIT_PRICE); + const tradeIntervalQueryParam = getQueryParam(QUERY_PARAMS.TRADE_INTERVAL); + const maxDurationQueryParam = getQueryParam(QUERY_PARAMS.MAX_DURATION); + const srcAmountUi = getQueryParam(QUERY_PARAMS.INPUT_AMOUNT); + const chunks = getQueryParam(QUERY_PARAMS.TRADES_AMOUNT); return { showSuccessModal: true, showLoadingModal: false, @@ -61,9 +60,11 @@ const getInitialState = (queryParamsEnabled?: boolean): State => { dstAmountLoading: !queryParamsEnabled ? false : limitPriceQueryParam ? false : !!srcAmountUi, dstAmountFromDex: undefined, txHash: undefined, + + enableQueryParams: false, }; }; -const initialState = getInitialState(QUERY_PARAMS_ENABLED); +const initialState = getInitialState(); export const useTwapStore = create( combine(initialState, (set, get) => ({ @@ -71,6 +72,7 @@ export const useTwapStore = create( setShowSuccessModal: (showSuccessModal: boolean) => set({ showSuccessModal }), setShowLodingModal: (showLoadingModal: boolean) => set({ showLoadingModal }), setLimitOrderPriceUi: () => { + setQueryParam(QUERY_PARAMS.LIMIT_PRICE, undefined); set({ limitPriceUi: { priceUi: (get() as any).getMarketPrice(false).marketPriceUi, inverted: false, custom: false } }); }, setLimitOrder: (isLimitOrder?: boolean) => { @@ -80,14 +82,11 @@ export const useTwapStore = create( set({ dstAmount: get().dstAmountFromDex, limitPriceUi: { inverted: false, priceUi: "", custom: false } }); } }, - setStoreOverrideValues: (storeOverride: StoreOverride) => { - const limitPriceQueryParam = getQueryParam(QUERY_PARAMS.LIMIT_PRICE); - const tradeIntervalQueryParam = getQueryParam(QUERY_PARAMS.TRADE_INTERVAL); - const maxDurationQueryParam = getQueryParam(QUERY_PARAMS.MAX_DURATION); - const srcAmountUi = getQueryParam(QUERY_PARAMS.INPUT_AMOUNT); + setStoreOverrideValues: (storeOverride: StoreOverride, enableQueryParams?: boolean) => { set({ - ...initialState, + ...getInitialState(enableQueryParams), ...storeOverride, + enableQueryParams, lib: get().lib, srcToken: get().srcToken, dstToken: get().dstToken, @@ -98,21 +97,11 @@ export const useTwapStore = create( wrongNetwork: get().wrongNetwork, dstAmount: get().dstAmount, dstAmountFromDex: get().dstAmountFromDex, - customDuration: !QUERY_PARAMS_ENABLED - ? defaultCustomDuration - : { resolution: TimeResolution.Minutes, amount: maxDurationQueryParam ? Number(maxDurationQueryParam) : undefined }, - customFillDelay: !QUERY_PARAMS_ENABLED - ? defaultCustomFillDelay - : { resolution: TimeResolution.Minutes, amount: tradeIntervalQueryParam ? Number(tradeIntervalQueryParam) : 2 }, - srcAmountUi: !QUERY_PARAMS_ENABLED ? "" : srcAmountUi || "", - limitPriceUi: !QUERY_PARAMS_ENABLED - ? { priceUi: "", inverted: false, custom: false } - : { priceUi: limitPriceQueryParam || "", inverted: false, custom: !!limitPriceQueryParam }, }); }, - setOutAmount: (dstAmount?: string, dstAmountLoading?: boolean) => { + setOutAmount: (dstAmount?: string, dstAmountLoading?: boolean, custom?: boolean) => { set({ dstAmountFromDex: dstAmount }); - if (!get().limitPriceUi.custom) { + if (!custom && !get().limitPriceUi.custom) { set({ dstAmount, dstAmountLoading, limitPriceUi: { ...get().limitPriceUi, priceUi: (get() as any).getMarketPrice(false).marketPriceUi } }); } }, @@ -138,10 +127,16 @@ export const useTwapStore = create( set({ srcToken }); }, setDstToken: (dstToken?: TokenData) => { + const limitPriceQueryParam = getQueryParam(QUERY_PARAMS.LIMIT_PRICE); + set({ dstToken, limitPriceUi: { ...get().limitPriceUi, custom: !!limitPriceQueryParam } }); }, setSrcAmountUi: (srcAmountUi: string) => { setQueryParam(QUERY_PARAMS.INPUT_AMOUNT, !srcAmountUi ? undefined : srcAmountUi); + if (!srcAmountUi) { + set({ srcAmountUi, dstAmount: undefined, limitPriceUi: { ...get().limitPriceUi, priceUi: "", custom: false } }); + return; + } if (get().limitPriceUi.custom && get().limitPriceUi.priceUi) { set({ srcAmountUi, @@ -424,5 +419,7 @@ export const useWizardStore = create((set, get) => ({ set({ timeout: setTimeout(() => set({ open: false }), 5000) }); } }, - setOpen: (value) => set({ open: value }), + setOpen: (value) => { + set({ open: value }); + }, })); diff --git a/packages/lib/src/styles.ts b/packages/lib/src/styles.ts index f655da55..e67385ba 100644 --- a/packages/lib/src/styles.ts +++ b/packages/lib/src/styles.ts @@ -145,10 +145,16 @@ export const StyledSummaryRow = styled(StyledRowFlex)({ maxWidth: "60%", }, "@media(max-width: 700px)": { - flexDirection: "column", - alignItems: "flex-start", + ".twap-order-summary-details-item-right": { + p: { + fontSize: 12, + }, + }, ".twap-label": { maxWidth: "unset", + p: { + fontSize: 12, + }, }, }, }); diff --git a/packages/lib/src/types.ts b/packages/lib/src/types.ts index 1b88f10d..6b8447d1 100644 --- a/packages/lib/src/types.ts +++ b/packages/lib/src/types.ts @@ -164,6 +164,7 @@ export interface TwapContextUIPreferences { Button?: FC; orders?: { paginationChunks?: number; + hideUsd?: boolean; }; } diff --git a/packages/lib/src/utils.ts b/packages/lib/src/utils.ts index 777c9ff9..779f0650 100644 --- a/packages/lib/src/utils.ts +++ b/packages/lib/src/utils.ts @@ -89,7 +89,6 @@ export const getQueryParam = (name: string) => { export const setQueryParam = (name: string, value?: string) => { if (!useTwapStore.getState().enableQueryParams) return; - const search = window.location.search; const params = new URLSearchParams(search); if (!value) { @@ -100,3 +99,16 @@ export const setQueryParam = (name: string, value?: string) => { window.history.replaceState({}, "", `${window.location.pathname}?${params}`); }; + +export const parseError = (error?: any) => { + const defaultText = "An error occurred."; + if (!error || !error.message) return defaultText; + try { + if (error.message.toLowerCase().indexOf("rejected")) { + return "Transaction Rejected"; + } + return defaultText; + } catch (error) { + return defaultText; + } +}; diff --git a/packages/pancake/src/OrderSummary.tsx b/packages/pancake/src/OrderSummary.tsx index 6e18609e..26da2175 100644 --- a/packages/pancake/src/OrderSummary.tsx +++ b/packages/pancake/src/OrderSummary.tsx @@ -1,4 +1,4 @@ -import { styled, Typography } from "@mui/material"; +import { styled } from "@mui/material"; import { Styles as TwapStyles, Components, store, hooks } from "@orbs-network/twap-ui"; import { StyledOrderSummary } from "./styles"; import { MdArrowDownward } from "@react-icons/all-files/md/MdArrowDownward"; @@ -6,8 +6,7 @@ import { ReactNode } from "react"; import { useAdapterContext } from "./context"; import { Price } from "./components"; -export const OrderSummary = ({ onSubmit, disabled }: { onSubmit: () => void; disabled?: boolean }) => { - const limit = store.useTwapStore((store) => store.isLimitOrder); +export const OrderSummary = ({ onSubmit, disabled, isLimitPanel }: { onSubmit: () => void; disabled?: boolean; isLimitPanel?: boolean }) => { const Button = useAdapterContext().Button; return ( @@ -19,7 +18,7 @@ export const OrderSummary = ({ onSubmit, disabled }: { onSubmit: () => void; dis - {limit ? ( + {isLimitPanel ? ( <> @@ -73,6 +72,9 @@ const StyledSummaryDetails = styled(TwapStyles.StyledColumnFlex)({ ".twap-token-logo": { display: "none", }, + "@media(max-width: 700px)": { + gap: 6, + }, }); const TokenDisplay = ({ isSrc }: { isSrc?: boolean }) => { diff --git a/packages/pancake/src/index.tsx b/packages/pancake/src/index.tsx index e9a1ee2f..a1d06527 100644 --- a/packages/pancake/src/index.tsx +++ b/packages/pancake/src/index.tsx @@ -11,6 +11,7 @@ import { TwapContextUIPreferences, Styles, TooltipProps, + parseError, } from "@orbs-network/twap-ui"; import translations from "./i18n/en.json"; import { @@ -114,6 +115,7 @@ const uiPreferences: TwapContextUIPreferences = { Button, orders: { paginationChunks: 4, + hideUsd: true, }, }; @@ -493,7 +495,7 @@ const LimitPrice = ({ limitOnly }: { limitOnly?: boolean }) => { ); }; -export { TWAP, Orders, OrderSummary }; +export { TWAP, Orders }; export enum SwapState { REVIEW, @@ -507,7 +509,7 @@ export enum SwapState { const SwapModal = ({ limitPanel }: { limitPanel: boolean }) => { const [swapState, setSwapState] = useState(SwapState.REVIEW); const { dappTokens, ApproveModalContent, SwapPendingModalContent, SwapTransactionErrorContent, AddToWallet, SwapTransactionReceiptModalContent } = useAdapterContext(); - const { fromToken, setShowConfirmation, showConfirmation, txHash, isLimitOrder } = store.useTwapStore((s) => ({ + const { fromToken, setShowConfirmation, showConfirmation, txHash, isLimitOrder, disclaimerAccepted } = store.useTwapStore((s) => ({ fromToken: s.srcToken, srcBalance: s.srcBalance, dstBalance: s.dstBalance, @@ -515,6 +517,7 @@ const SwapModal = ({ limitPanel }: { limitPanel: boolean }) => { showConfirmation: s.showConfirmation, txHash: s.txHash, isLimitOrder: s.isLimitOrder, + disclaimerAccepted: s.disclaimerAccepted, })); const reset = hooks.useResetStore(); @@ -535,11 +538,7 @@ const SwapModal = ({ limitPanel }: { limitPanel: boolean }) => { setSwapState(SwapState.COMPLETED); } catch (error) { setSwapState(SwapState.ERROR); - if (error instanceof Error) { - setError(error.message); - } else { - setError("An error occurred"); - } + setError(parseError(error) || "An error occurred"); } }, [allowance, approveCallback, createOrder, setSwapState, setError]); @@ -567,7 +566,7 @@ const SwapModal = ({ limitPanel }: { limitPanel: boolean }) => { if (swapState === SwapState.REVIEW) { title = "Confirm Order"; - content = ; + content = ; } if (swapState === SwapState.APPROVE) { @@ -636,7 +635,7 @@ const ModalHeader = ({ title, onClose }: { title?: string; onClose: () => void } export const useShowSwapModalButton = () => { const translations = useTwapContext()?.translations; - const { shouldWrap, shouldUnwrap, wrongNetwork, setShowConfirmation, warning, createOrderLoading, srcUsd, srcAmount } = store.useTwapStore((store) => ({ + const { shouldWrap, shouldUnwrap, wrongNetwork, setShowConfirmation, warning, createOrderLoading, srcUsd, srcAmount, disclaimerAccepted } = store.useTwapStore((store) => ({ maker: store.lib?.maker, shouldWrap: store.shouldWrap(), shouldUnwrap: store.shouldUnwrap(), @@ -646,6 +645,7 @@ export const useShowSwapModalButton = () => { createOrderLoading: store.loading, srcUsd: store.srcUsd, srcAmount: store.srcAmountUi, + disclaimerAccepted: store.disclaimerAccepted, })); const outAmountLoading = useOutAmountLoading(); const { mutate: unwrap, isLoading: unwrapLoading } = hooks.useUnwrapToken(true); @@ -703,7 +703,7 @@ export const useShowSwapModalButton = () => { if (createOrderLoading) { return { - text: "", + text: translations.placeOrder, loading: true, disabled: false, }; diff --git a/packages/pancake/src/styles.tsx b/packages/pancake/src/styles.tsx index 79095d78..55abd0d8 100644 --- a/packages/pancake/src/styles.tsx +++ b/packages/pancake/src/styles.tsx @@ -423,6 +423,13 @@ export const StyledMarketPriceContainer = styled(Styles.StyledRowFlex)(({ theme whiteSpace: "nowrap", }, }, + "@media(max-width: 700px)": { + ".twap-label": { + p: { + fontSize: "12px!important", + }, + }, + }, }; }); @@ -610,8 +617,6 @@ export const StyledOrderSummary = styled(Styles.StyledColumnFlex)(({ theme }) => fontSize: 14, }, ".twap-order-summary-details-item": { - flexWrap: "wrap", - ".twap-label": { maxWidth: "unset", fontSize: 14, @@ -630,12 +635,6 @@ export const StyledOrderSummary = styled(Styles.StyledColumnFlex)(({ theme }) => fontSize: 14, gap: 3, }, - - ".twap-disclaimer-text": { - "*": { - fontSize: 14, - }, - }, ".twap-ui-close": { "*": { color: `${styles.primaryTextColor}`, @@ -672,10 +671,11 @@ export const StyledOrderSummary = styled(Styles.StyledColumnFlex)(({ theme }) => height: 35, }, }, - "@media (max-width:500px)": { - ".twap-order-summary-details-item": { - flexDirection: "column", - alignItems: "flex-start", + "@media (max-width:700px)": { + ".twap-order-summary-limit-price": { + "*": { + fontSize: "12px!important", + }, }, }, }; @@ -829,8 +829,8 @@ export const StyledOrdersTab = styled(Box)<{ selected: number }>(({ selected, th fontWeight: 500, color: !selected ? color : selectedColor, "@media (max-width:700px)": { - fontSize: 12, - padding: " 0px 14px", + fontSize: 11, + padding: " 0px 10px", }, }; }); diff --git a/packages/pangolin/src/Orders.tsx b/packages/pangolin/src/Orders.tsx index 0bf3e699..6f07169d 100644 --- a/packages/pangolin/src/Orders.tsx +++ b/packages/pangolin/src/Orders.tsx @@ -188,7 +188,7 @@ const Progress = ({ orderUI }: { orderUI: OrderUI }) => { const DstTokenAmount = ({ orderUI }: { orderUI?: OrderUI }) => { const { data } = hooks.useOrderPastEvents(orderUI!, true); - const amount = hooks.useFormatNumber({ value: data?.dstAmountOut }); + const amount = hooks.useFormatNumber({ value: "" }); return ( { const { data } = hooks.useOrderPastEvents(orderUI, true); - const outAmount = hooks.useFormatNumber({ value: data?.dstAmountOut, decimalScale }); + const outAmount = hooks.useFormatNumber({ value: "", decimalScale }); const srcAmount = hooks.useFormatNumber({ value: orderUI?.ui.srcAmountUi, decimalScale }); return (