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",