diff --git a/packages/lib/src/components/Components.tsx b/packages/lib/src/components/Components.tsx index 54f979cce..39cad7e61 100644 --- a/packages/lib/src/components/Components.tsx +++ b/packages/lib/src/components/Components.tsx @@ -8,6 +8,7 @@ import { Slider, Switch, TimeSelector, + PriceImpactSelector, TokenName, TokenPriceCompare, Tooltip, @@ -345,6 +346,13 @@ export function TradeIntervalSelector({ placeholder }: { placeholder?: string }) return ; } +export const PriceProtectionSelector = ({ placeholder, icon }: { placeholder?: string; icon?: any }) => { + const setPriceImpact = useTwapStore((store) => store.setPriceImpact); + const priceImpact = useTwapStore((store) => store.getPriceImpact)(); + + return ; +}; + interface TokenSelectProps extends TWAPTokenSelectProps { Component?: FC; isOpen: boolean; diff --git a/packages/lib/src/components/base/index.ts b/packages/lib/src/components/base/index.ts index 60e44dfc6..9a23a7a6f 100644 --- a/packages/lib/src/components/base/index.ts +++ b/packages/lib/src/components/base/index.ts @@ -5,6 +5,7 @@ export { default as Label } from "./Label"; export { default as SmallLabel } from "./SmallLabel"; export * from "./Switch"; export { default as TimeSelector } from "./TimeSelector"; +export { default as PriceImpactSelector } from "./PriceImpactSelector"; export { default as TokenLogo } from "./TokenLogo"; export { default as TokenName } from "./TokenName"; export { default as Layout } from "./Layout"; diff --git a/packages/lib/src/store.ts b/packages/lib/src/store.ts index 0708e7efc..e27591476 100644 --- a/packages/lib/src/store.ts +++ b/packages/lib/src/store.ts @@ -54,6 +54,8 @@ const getInitialState = (queryParamsEnabled?: boolean): State => { waitingForOrdersUpdate: false, srcUsd: undefined, dstUsd: undefined, + + priceImpact: 0, }; }; const initialState = getInitialState(); @@ -115,6 +117,10 @@ export const useTwapStore = create( setQueryParam(QUERY_PARAMS.TRADE_INTERVAL, !fillDelay.amount ? undefined : fillDelay.amount?.toString()); set({ customFillDelay: fillDelay }); }, + setPriceImpact: (priceImpact: number) => {}, + getPriceImpact: () => { + return get().priceImpact; + }, getFillDelayText: (translations: Translations) => fillDelayText((get() as any).getFillDelayUiMillis(), translations), getFillDelayUiMillis: () => get().customFillDelay.amount! * get().customFillDelay.resolution, getMinimumDelayMinutes: () => (get().lib?.estimatedDelayBetweenChunksMillis() || 0) / 1000 / 60, diff --git a/packages/lib/src/styles.ts b/packages/lib/src/styles.ts index a2413791f..315ddafa2 100644 --- a/packages/lib/src/styles.ts +++ b/packages/lib/src/styles.ts @@ -21,6 +21,12 @@ export const StyledText = styled(Typography)({ fontSize: "inherit", }); +export const StyledPriceImpactText = styled(Typography)({ + fontFamily: "inherit", + fontSize: 16, + fontWeight: 600, +}); + export const StyledColumnFlex = styled(Box)(({ gap = 10 }: { gap?: number }) => ({ display: "flex", flexDirection: "column",