feat: add StyledPriceImpactText and integrate PriceProtectionSelector

orbs-network · Jul 26, 2024 · 1c48996 · 1c48996
1 parent 568aa16
commit 1c48996
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 0 deletions.
diff --git 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 <TimeSelector placeholder={placeholder} onChange={setFillDelay} value={fillDelay} />;
 }
 
+export const PriceProtectionSelector = ({ placeholder, icon }: { placeholder?: string; icon?: any }) => {
+  const setPriceImpact = useTwapStore((store) => store.setPriceImpact);
+  const priceImpact = useTwapStore((store) => store.getPriceImpact)();
+
+  return <PriceImpactSelector placeholder={placeholder} onChange={setPriceImpact} value={priceImpact} icon={icon} />;
+};
+
 interface TokenSelectProps extends TWAPTokenSelectProps {
   Component?: FC<TWAPTokenSelectProps>;
   isOpen: boolean;

diff --git 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
@@ -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
@@ -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",