slippage done

src/components/Modals/Slippage/Slippage.stories.tsx

@@ -14,6 +14,7 @@ storiesOf('newUi/swap', module)
         handleClose={() => {}}
         anchorEl={null}
         defaultSlippage={'1'}
+        initialSlippage='2'
       />
     </div>
   ))

src/components/Modals/Slippage/Slippage.tsx

@@ -8,6 +8,7 @@ interface Props {
   handleClose: () => void
   anchorEl: HTMLButtonElement | null
   defaultSlippage: string
+  initialSlippage: string
   infoText?: string
   headerText?: string
 }
@@ -18,11 +19,12 @@ const Slippage: React.FC<Props> = ({
   handleClose,
   anchorEl,
   defaultSlippage,
+  initialSlippage,
   infoText,
   headerText
 }) => {
   const classes = useStyles()
-  const [slippTolerance, setSlippTolerance] = React.useState<string>('1')
+  const [slippTolerance, setSlippTolerance] = React.useState<string>(initialSlippage)
   const inputRef = React.useRef<HTMLInputElement>(null)
 
   const allowOnlyDigitsAndTrimUnnecessaryZeros: React.ChangeEventHandler<

src/components/NewPosition/NewPosition.stories.tsx

@@ -135,6 +135,8 @@ storiesOf('position/newPosition', module)
           onHideUnknownTokensChange={() => {}}
           reloadHandler={() => {}}
           currentFeeIndex={feeIndex}
+          onSlippageChange={() => {}}
+        initialSlippage={'1'}
         />
       </div>
     )
@@ -219,6 +221,8 @@ storiesOf('position/newPosition', module)
           onHideUnknownTokensChange={() => {}}
           reloadHandler={() => {}}
           currentFeeIndex={feeIndex}
+          onSlippageChange={() => {}}
+        initialSlippage={'1'}
         />
       </div>
     )

src/components/NewPosition/NewPosition.tsx

@@ -95,6 +95,8 @@ export interface INewPosition {
     max: number
   }
   currentFeeIndex: number
+  onSlippageChange: (slippage: string) => void
+  initialSlippage: string
 }
 
 export const NewPosition: React.FC<INewPosition> = ({
@@ -137,7 +139,9 @@ export const NewPosition: React.FC<INewPosition> = ({
   hasTicksError,
   reloadHandler,
   plotVolumeRange,
-  currentFeeIndex
+  currentFeeIndex,
+  onSlippageChange,
+  initialSlippage
 }) => {
   const classes = useStyles()
 
@@ -153,7 +157,7 @@ export const NewPosition: React.FC<INewPosition> = ({
   const [tokenBDeposit, setTokenBDeposit] = useState<string>('')
 
   const [settings, setSettings] = React.useState<boolean>(false)
-  const [slippTolerance, setSlippTolerance] = React.useState<string>('1')
+  const [slippTolerance, setSlippTolerance] = React.useState<string>(initialSlippage)
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
   const setRangeBlockerInfo = () => {
     if (tokenAIndex === null || tokenBIndex === null) {
@@ -300,6 +304,7 @@ export const NewPosition: React.FC<INewPosition> = ({
 
   const setSlippage = (slippage: string): void => {
     setSlippTolerance(slippage)
+    onSlippageChange(slippage)
   }
 
   return (
@@ -338,6 +343,7 @@ export const NewPosition: React.FC<INewPosition> = ({
         handleClose={handleCloseSettings}
         anchorEl={anchorEl}
         defaultSlippage={'1'}
+        initialSlippage={initialSlippage}
         infoText='Slippage tolerance is a pricing difference between the price at the confirmation time and the actual price of the transaction users are willing to accept when initializing position.'
         headerText='Position Transaction Settings'
       />

src/components/Swap/Swap.stories.tsx

@@ -172,6 +172,8 @@ storiesOf('newUi/swap', module)
         ]}
         initialHideUnknownTokensValue={false}
         onHideUnknownTokensChange={() => {}}
+        onSlippageChange={() => {}}
+        initialSlippage={'1'}
       />
     </div>
   ))

src/components/Swap/Swap.tsx

@@ -92,6 +92,8 @@ export interface ISwap {
   tokenToPriceData?: CoingeckoPriceData
   priceFromLoading?: boolean
   priceToLoading?: boolean
+  onSlippageChange: (slippage: string) => void
+  initialSlippage: string
 }
 
 export const Swap: React.FC<ISwap> = ({
@@ -115,7 +117,9 @@ export const Swap: React.FC<ISwap> = ({
   tokenFromPriceData,
   tokenToPriceData,
   priceFromLoading,
-  priceToLoading
+  priceToLoading,
+  onSlippageChange,
+  initialSlippage
 }) => {
   const classes = useStyles()
   enum inputTarget {
@@ -130,7 +134,7 @@ export const Swap: React.FC<ISwap> = ({
   const [amountTo, setAmountTo] = React.useState<string>('')
   const [swap, setSwap] = React.useState<boolean | null>(null)
   const [rotates, setRotates] = React.useState<number>(0)
-  const [slippTolerance, setSlippTolerance] = React.useState<string>('1')
+  const [slippTolerance, setSlippTolerance] = React.useState<string>(initialSlippage)
   const [throttle, setThrottle] = React.useState<boolean>(false)
   const [settings, setSettings] = React.useState<boolean>(false)
   const [detailsOpen, setDetailsOpen] = React.useState<boolean>(false)
@@ -394,6 +398,7 @@ export const Swap: React.FC<ISwap> = ({
   }
   const setSlippage = (slippage: string): void => {
     setSlippTolerance(slippage)
+    onSlippageChange(slippage)
   }
 
   const handleClickSettings = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -453,6 +458,7 @@ export const Swap: React.FC<ISwap> = ({
             handleClose={handleCloseSettings}
             anchorEl={anchorEl}
             defaultSlippage={'1'}
+            initialSlippage={initialSlippage}
           />
         </Grid>
       </Grid>

src/containers/NewPositionWrapper/NewPositionWrapper.tsx

@@ -372,6 +372,12 @@ export const NewPositionWrapper = () => {
     }
   }, [poolsVolumeRanges, poolIndex, isXtoY, xDecimal, yDecimal])
 
+  const initialSlippage = localStorage.getItem('INVARIANT_NEW_POSITION_SLIPPAGE') ?? '1'
+
+  const onSlippageChange = (slippage: string) => {
+    localStorage.setItem('INVARIANT_NEW_POSITION_SLIPPAGE', slippage)
+  }
+
   return (
     <NewPosition
       tokens={tokens}
@@ -590,6 +596,8 @@ export const NewPositionWrapper = () => {
       }}
       plotVolumeRange={currentVolumeRange}
       currentFeeIndex={currentUiFeeIndex}
+      onSlippageChange={onSlippageChange}
+      initialSlippage={initialSlippage}
     />
   )
 }

src/containers/WrappedSwap/WrappedSwap.tsx

@@ -170,6 +170,12 @@ export const WrappedSwap = () => {
     }
   }, [tokenTo])
 
+  const initialSlippage = localStorage.getItem('INVARIANT_SWAP_SLIPPAGE') ?? '1'
+
+  const onSlippageChange = (slippage: string) => {
+    localStorage.setItem('INVARIANT_SWAP_SLIPPAGE', slippage)
+  }
+
   return (
     <Swap
       onSwap={(
@@ -238,6 +244,8 @@ export const WrappedSwap = () => {
       tokenToPriceData={tokenToPriceData}
       priceFromLoading={priceFromLoading}
       priceToLoading={priceToLoading}
+      onSlippageChange={onSlippageChange}
+      initialSlippage={initialSlippage}
     />
   )
 }