Merge branch 'rain-fork' into 2024-04-27-new-dexes

apps/evm/package.json

@@ -90,7 +90,6 @@
     "@types/lodash.once": "4.1.9",
     "@types/lodash.zip": "4.2.9",
     "@types/node": "20",
-    "@types/numeral": "2.0.2",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "@types/react-slider": "1.3.1",

apps/evm/src/lib/hooks/useSlippageTolerance.ts

@@ -1,11 +1,11 @@
 'use client'
 
-import { useLocalStorage } from '@sushiswap/hooks'
+import { SlippageToleranceStorageKey, useLocalStorage } from '@sushiswap/hooks'
 import { useMemo } from 'react'
 import { Percent } from 'sushi/math'
 
 export const useSlippageTolerance = (
-  key: string | undefined = 'swapSlippage',
+  key: SlippageToleranceStorageKey = SlippageToleranceStorageKey.Swap,
 ) => {
   const [slippageTolerance, setSlippageTolerance] = useLocalStorage<
     number | string

apps/evm/src/ui/pool/AddSectionReviewModalConcentrated.tsx

@@ -1,3 +1,5 @@
+import { CogIcon } from '@heroicons/react-v1/outline'
+import { SlippageToleranceStorageKey, TTLStorageKey } from '@sushiswap/hooks'
 import {
   Button,
   Currency,
@@ -10,11 +12,15 @@ import {
   DialogReview,
   DialogTitle,
   Dots,
+  IconButton,
   List,
+  SettingsModule,
+  SettingsOverlay,
 } from '@sushiswap/ui'
 import { createErrorToast, createToast } from '@sushiswap/ui/components/toast'
 import {
   UseCallParameters,
+  getDefaultTTL,
   getV3NonFungiblePositionManagerContractConfig,
   useAccount,
   useCall,
@@ -32,7 +38,6 @@ import { SushiSwapV3FeeAmount, isSushiSwapV3ChainId } from 'sushi/config'
 import { Amount, Type, tryParseAmount } from 'sushi/currency'
 import { NonfungiblePositionManager, Position } from 'sushi/pool'
 import { Hex, SendTransactionReturnType, UserRejectedRequestError } from 'viem'
-
 import { useConcentratedDerivedMintInfo } from './ConcentratedLiquidityProvider'
 
 interface AddSectionReviewModalConcentratedProps
@@ -74,8 +79,13 @@ export const AddSectionReviewModalConcentrated: FC<
   successLink,
 }) => {
   const { address, chain } = useAccount()
-  const { data: deadline } = useTransactionDeadline({ chainId })
-  const [slippageTolerance] = useSlippageTolerance('addLiquidity')
+  const { data: deadline } = useTransactionDeadline({
+    storageKey: TTLStorageKey.AddLiquidity,
+    chainId,
+  })
+  const [slippageTolerance] = useSlippageTolerance(
+    SlippageToleranceStorageKey.AddLiquidity,
+  )
   const { [Bound.LOWER]: priceLower, [Bound.UPPER]: priceUpper } = pricesAtTicks
   const client = usePublicClient()
 
@@ -245,15 +255,41 @@ export const AddSectionReviewModalConcentrated: FC<
           <>
             {children}
             <DialogContent>
-              <DialogHeader>
-                <DialogTitle>
-                  {token0?.symbol}/{token1?.symbol}
-                </DialogTitle>
-                <DialogDescription>
-                  {' '}
-                  {noLiquidity ? 'Create liquidity pool' : 'Add liquidity'}
-                </DialogDescription>
-              </DialogHeader>
+              <div className="flex justify-between">
+                <DialogHeader>
+                  <DialogTitle>
+                    {token0?.symbol}/{token1?.symbol}
+                  </DialogTitle>
+                  <DialogDescription>
+                    {' '}
+                    {noLiquidity ? 'Create liquidity pool' : 'Add liquidity'}
+                  </DialogDescription>
+                </DialogHeader>
+                <SettingsOverlay
+                  options={{
+                    slippageTolerance: {
+                      storageKey: SlippageToleranceStorageKey.AddLiquidity,
+                      defaultValue: '0.1',
+                      title: 'Add Liquidity Slippage',
+                    },
+                    transactionDeadline: {
+                      storageKey: TTLStorageKey.AddLiquidity,
+                      defaultValue: getDefaultTTL(chainId).toString(),
+                    },
+                  }}
+                  modules={[
+                    SettingsModule.SlippageTolerance,
+                    SettingsModule.TransactionDeadline,
+                  ]}
+                >
+                  <IconButton
+                    name="Settings"
+                    icon={CogIcon}
+                    variant="secondary"
+                    className="mr-12"
+                  />
+                </SettingsOverlay>
+              </div>
               <div className="flex flex-col gap-4">
                 <List className="!pt-0">
                   <List.Control>

apps/evm/src/ui/pool/AddSectionReviewModalLegacy.tsx

@@ -1,3 +1,5 @@
+import { CogIcon } from '@heroicons/react-v1/outline'
+import { SlippageToleranceStorageKey, TTLStorageKey } from '@sushiswap/hooks'
 import {
   DialogConfirm,
   DialogContent,
@@ -8,13 +10,17 @@ import {
   DialogReview,
   DialogTitle,
   DialogTrigger,
+  IconButton,
+  SettingsModule,
+  SettingsOverlay,
 } from '@sushiswap/ui'
 import { Button } from '@sushiswap/ui/components/button'
 import { Dots } from '@sushiswap/ui/components/dots'
 import { createErrorToast, createToast } from '@sushiswap/ui/components/toast'
 import {
   SushiSwapV2PoolState,
   UseSimulateContractParameters,
+  getDefaultTTL,
   getSushiSwapRouterContractConfig,
   useAccount,
   usePublicClient,
@@ -34,7 +40,6 @@ import { BentoBoxChainId } from 'sushi/config'
 import { Amount, Type } from 'sushi/currency'
 import { ZERO } from 'sushi/math'
 import { Address, UserRejectedRequestError } from 'viem'
-
 import { AddSectionReviewModal } from './AddSectionReviewModal'
 
 interface UseAddSushiSwapV2 {
@@ -285,10 +290,15 @@ export const AddSectionReviewModalLegacy: FC<AddSectionReviewModalLegacyProps> =
     children,
     onSuccess: _onSuccess,
   }) => {
-    const { data: deadline } = useTransactionDeadline({ chainId })
+    const { data: deadline } = useTransactionDeadline({
+      storageKey: TTLStorageKey.AddLiquidity,
+      chainId,
+    })
     const { address } = useAccount()
     const { approved } = useApproved(APPROVE_TAG_ADD_LEGACY)
-    const [slippageTolerance] = useSlippageTolerance('addLiquidity')
+    const [slippageTolerance] = useSlippageTolerance(
+      SlippageToleranceStorageKey.AddLiquidity,
+    )
     const client = usePublicClient()
 
     const onSuccess = useCallback(
@@ -390,12 +400,38 @@ export const AddSectionReviewModalLegacy: FC<AddSectionReviewModalLegacyProps> =
             <>
               <DialogTrigger asChild>{children}</DialogTrigger>
               <DialogContent>
-                <DialogHeader>
-                  <DialogTitle>Add liquidity</DialogTitle>
-                  <DialogDescription>
-                    Please review your entered details.
-                  </DialogDescription>
-                </DialogHeader>
+                <div className="flex justify-between">
+                  <DialogHeader>
+                    <DialogTitle>Add liquidity</DialogTitle>
+                    <DialogDescription>
+                      Please review your entered details.
+                    </DialogDescription>
+                  </DialogHeader>
+                  <SettingsOverlay
+                    options={{
+                      slippageTolerance: {
+                        storageKey: SlippageToleranceStorageKey.AddLiquidity,
+                        defaultValue: '0.1',
+                        title: 'Add Liquidity Slippage',
+                      },
+                      transactionDeadline: {
+                        storageKey: TTLStorageKey.AddLiquidity,
+                        defaultValue: getDefaultTTL(chainId).toString(),
+                      },
+                    }}
+                    modules={[
+                      SettingsModule.SlippageTolerance,
+                      SettingsModule.TransactionDeadline,
+                    ]}
+                  >
+                    <IconButton
+                      name="Settings"
+                      icon={CogIcon}
+                      variant="secondary"
+                      className="mr-12"
+                    />
+                  </SettingsOverlay>
+                </div>
                 <AddSectionReviewModal
                   chainId={chainId as BentoBoxChainId}
                   input0={input0}

apps/evm/src/ui/pool/AddSectionReviewModalTrident.tsx

@@ -56,6 +56,7 @@ import {
   zeroAddress,
 } from 'viem'
 
+import { SlippageToleranceStorageKey } from '@sushiswap/hooks'
 import { AddSectionReviewModal } from './AddSectionReviewModal'
 
 interface AddSectionReviewModalTridentProps {
@@ -109,7 +110,9 @@ export const AddSectionReviewModalTrident: FC<
   const tokens = useMemo(() => [token0, token1], [token0, token1])
   const { data: rebases } = useBentoBoxTotals({ chainId, currencies: tokens })
   const contract = useTridentRouterContract(chainId)
-  const [slippageTolerance] = useSlippageTolerance('addLiquidity')
+  const [slippageTolerance] = useSlippageTolerance(
+    SlippageToleranceStorageKey.AddLiquidity,
+  )
   const [minAmount0, minAmount1] = useMemo(() => {
     return [
       input0

apps/evm/src/ui/pool/AddSectionWidget.tsx

@@ -1,5 +1,6 @@
 import { CogIcon } from '@heroicons/react-v1/outline'
 import { PlusIcon } from '@heroicons/react-v1/solid'
+import { SlippageToleranceStorageKey, TTLStorageKey } from '@sushiswap/hooks'
 import {
   WidgetAction,
   WidgetDescription,
@@ -12,6 +13,7 @@ import {
   SettingsOverlay,
 } from '@sushiswap/ui/components/settings'
 import { Widget, WidgetHeader } from '@sushiswap/ui/components/widget'
+import { getDefaultTTL } from '@sushiswap/wagmi'
 import { Web3Input } from '@sushiswap/wagmi/components/web3-input'
 import React, { FC, ReactNode } from 'react'
 import { ChainId } from 'sushi/chain'
@@ -54,14 +56,19 @@ export const AddSectionWidget: FC<AddSectionWidgetProps> = ({
           <SettingsOverlay
             options={{
               slippageTolerance: {
-                storageKey: 'addLiquidity',
+                storageKey: SlippageToleranceStorageKey.AddLiquidity,
                 defaultValue: '0.1',
                 title: 'Add Liquidity Slippage',
               },
+              transactionDeadline: {
+                storageKey: TTLStorageKey.AddLiquidity,
+                defaultValue: getDefaultTTL(chainId).toString(),
+              },
             }}
             modules={[
               SettingsModule.CustomTokens,
               SettingsModule.SlippageTolerance,
+              SettingsModule.TransactionDeadline,
             ]}
           >
             <IconButton

apps/evm/src/ui/pool/ConcentratedLiquidityRemoveWidget.tsx

@@ -1,7 +1,11 @@
 'use client'
 
 import { CogIcon } from '@heroicons/react/24/outline'
-import { useDebounce } from '@sushiswap/hooks'
+import {
+  SlippageToleranceStorageKey,
+  TTLStorageKey,
+  useDebounce,
+} from '@sushiswap/hooks'
 import {
   Card,
   CardContent,
@@ -30,6 +34,7 @@ import { Button } from '@sushiswap/ui/components/button'
 import { createErrorToast, createToast } from '@sushiswap/ui/components/toast'
 import {
   ConcentratedLiquidityPosition,
+  getDefaultTTL,
   getV3NonFungiblePositionManagerContractConfig,
   useAccount,
   useCall,
@@ -74,8 +79,13 @@ export const ConcentratedLiquidityRemoveWidget: FC<
   const { chain } = useAccount()
   const client = usePublicClient()
   const [value, setValue] = useState<string>('0')
-  const [slippageTolerance] = useSlippageTolerance('removeLiquidity')
-  const { data: deadline } = useTransactionDeadline({ chainId })
+  const [slippageTolerance] = useSlippageTolerance(
+    SlippageToleranceStorageKey.RemoveLiquidity,
+  )
+  const { data: deadline } = useTransactionDeadline({
+    storageKey: TTLStorageKey.RemoveLiquidity,
+    chainId,
+  })
   const debouncedValue = useDebounce(value, 300)
 
   const _onChange = useCallback(
@@ -334,12 +344,20 @@ export const ConcentratedLiquidityRemoveWidget: FC<
                         <SettingsOverlay
                           options={{
                             slippageTolerance: {
-                              storageKey: 'removeLiquidity',
+                              storageKey:
+                                SlippageToleranceStorageKey.RemoveLiquidity,
                               defaultValue: '0.1',
                               title: 'Remove Liquidity Slippage',
                             },
+                            transactionDeadline: {
+                              storageKey: TTLStorageKey.RemoveLiquidity,
+                              defaultValue: getDefaultTTL(chainId).toString(),
+                            },
                           }}
-                          modules={[SettingsModule.SlippageTolerance]}
+                          modules={[
+                            SettingsModule.SlippageTolerance,
+                            SettingsModule.TransactionDeadline,
+                          ]}
                         >
                           <IconButton
                             size="sm"
@@ -412,12 +430,38 @@ export const ConcentratedLiquidityRemoveWidget: FC<
               </CardFooter>
             </div>
             <DialogContent>
-              <DialogHeader>
-                <DialogTitle>
-                  {token0?.symbol}/{token1?.symbol}
-                </DialogTitle>
-                <DialogDescription>Remove Liquidity</DialogDescription>
-              </DialogHeader>
+              <div className="flex justify-between">
+                <DialogHeader>
+                  <DialogTitle>
+                    {token0?.symbol}/{token1?.symbol}
+                  </DialogTitle>
+                  <DialogDescription>Remove Liquidity</DialogDescription>
+                </DialogHeader>
+                <SettingsOverlay
+                  options={{
+                    slippageTolerance: {
+                      storageKey: SlippageToleranceStorageKey.RemoveLiquidity,
+                      defaultValue: '0.1',
+                      title: 'Remove Liquidity Slippage',
+                    },
+                    transactionDeadline: {
+                      storageKey: TTLStorageKey.RemoveLiquidity,
+                      defaultValue: getDefaultTTL(chainId).toString(),
+                    },
+                  }}
+                  modules={[
+                    SettingsModule.SlippageTolerance,
+                    SettingsModule.TransactionDeadline,
+                  ]}
+                >
+                  <IconButton
+                    name="Settings"
+                    icon={CogIcon}
+                    variant="secondary"
+                    className="mr-12"
+                  />
+                </SettingsOverlay>
+              </div>
               <div className="flex flex-col gap-4">
                 <List className="!pt-0">
                   <List.Control>