From 568aa16d7159f750d4edca8151fba7d950362162 Mon Sep 17 00:00:00 2001
From: Carlos Monterrosa <byte0xnull@gmail.com>
Date: Mon, 22 Jul 2024 21:35:54 -0600
Subject: [PATCH] feat: add PriceProtectionSelector component

---
 .../components/base/PriceImpactSelector.tsx   | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 packages/lib/src/components/base/PriceImpactSelector.tsx

diff --git a/packages/lib/src/components/base/PriceImpactSelector.tsx b/packages/lib/src/components/base/PriceImpactSelector.tsx
new file mode 100644
index 00000000..85cc366b
--- /dev/null
+++ b/packages/lib/src/components/base/PriceImpactSelector.tsx
@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { Box, fontSize, styled } from "@mui/system";
+import { useTwapContext } from "../../context";
+import NumericInput from "./NumericInput";
+import { StyledPriceImpactText } from "../../styles";
+import { IoIosArrowDown } from "@react-icons/all-files/io/IoIosArrowDown";
+
+interface Props {
+  value: number;
+  onChange: (value: number) => void;
+  disabled?: boolean;
+  className?: string;
+  onFocus?: () => void;
+  onBlur?: () => void;
+  placeholder?: string;
+  icon?: React.ReactNode;
+}
+
+function PriceProtectionSelector({ value, onChange, disabled = false, className = "", onFocus, onBlur, placeholder = "0", icon = <IoIosArrowDown /> }: Props) {
+  const [showList, setShowList] = useState(false);
+  const translations = useTwapContext().translations;
+
+  const onOpenListClick = () => {
+    if (disabled) return;
+    setShowList(true);
+  };
+
+  return (
+    <StyledContainer className={`twap-price-impact-selector ${className}`} style={{ pointerEvents: disabled ? "none" : "unset" }}>
+      <StyledPriceImpactSelect onClick={onOpenListClick} className="twap-price-impact-selector-selected">
+        <StyledTextAndIconContainer>
+          <StyledInput>
+            <NumericInput onBlur={onBlur} onFocus={onFocus} disabled={disabled} value={value} onChange={(v) => onChange(6)} placeholder={placeholder} />
+          </StyledInput>
+          <StyledPriceImpactText>%</StyledPriceImpactText>
+        </StyledTextAndIconContainer>
+        {icon}
+      </StyledPriceImpactSelect>
+    </StyledContainer>
+  );
+}
+
+export default PriceProtectionSelector;
+
+const StyledInput = styled(Box)({
+  flex: "1 1 auto",
+  display: "flex",
+  alignItems: "center",
+  ".twap-input": {
+    width: "100%",
+    input: {
+      fontSize: 16,
+      textAlign: "right",
+      width: "100%",
+      "&::placeholder": {
+        color: "white",
+      },
+    },
+  },
+});
+
+const StyledContainer = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  flex: 1,
+  gap: 2,
+});
+
+const StyledPriceImpactSelect = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  padding: 12,
+  gap: 8,
+  maxWidth: 115,
+  "& p": {
+    fontSize: 16,
+    fontWeight: 600,
+  },
+});
+
+const StyledTextAndIconContainer = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  width: "calc(100% - 24px)",
+});