Feature/elastic zap (#2216)

* feat: handle quick zap for position

* feat: hanlde zap to mint

* feat: zap increase liquidity

* feat: zap for addliquidity

* feat: add estimate gas

* env to prod

* feat: new zap flow

* integrate zap aggreagtor stg

* add call data

* fix: zap in via aggregator

* fix: zap with native

* fix: quickzap infinite render

* feat: add price impact note

* update zap executor contract

* update addliquidity page UI

* fix: price impact

* feat: hanlde use wrapped

* aggregator prod api

* fix: symbol on pending popup

* fix: tick = 0

* feat: add quickzap on my earning

* update zap helper contract

* fix: zap modal error

* price impact flow

* price impact flow

* reduce number call aggregator

* zap op + arb

* fix: not enough liquidity

* fix: minor issue

* fix: invariant failed

* handle my earning

* feat: add confirmation for increase zap

* fix: issue

* fix: invarient when tickLower > tickUpper

* fix: weth symbol

* Update avax.ts

* Update base.ts

* Update scroll.ts

* chore: update scroll, base config

* fix: clear pool stats when network change

* change error text to white

* fix: crash when go back

* fix: KEP-1819

* fix: KEP-1795

* integrate new helper contract

* fix: swap amount

* feat: handle price impact

* feat: highlight zap icon

* update helper

* add aggregator settings

* feat: update notification

* fix: zap use aggregator

* fix: zap very high price impact in confirm popup

* feat: add zap prod config

* remove redundant file

* update prod contract

src/components/Announcement/Popups/TransactionPopup.tsx

@@ -85,6 +85,19 @@ const summaryLiquidity = (txs: TransactionDetails) => {
   }`
 }
 
+const zapInLiquidity = (txs: TransactionDetails) => {
+  const extraInfo = txs.extraInfo || {}
+  const {
+    tokenAmountIn = '',
+    tokenAmountOut = '',
+    tokenSymbolIn,
+    tokenSymbolOut,
+    zapAmountIn,
+    zapSymbolIn,
+  } = extraInfo as TransactionExtraInfo2Token
+  return t`You have zapped ${zapAmountIn} ${zapSymbolIn} into ${tokenAmountIn} ${tokenSymbolIn} and ${tokenAmountOut} ${tokenSymbolOut} of liquidity to the pool.`
+}
+
 const summaryCrossChain = (txs: TransactionDetails) => {
   const {
     tokenAmountIn,
@@ -152,6 +165,7 @@ const SUMMARY: { [type in TRANSACTION_TYPE]: SummaryFunction } = {
   [TRANSACTION_TYPE.CLASSIC_REMOVE_LIQUIDITY]: summaryLiquidity,
   [TRANSACTION_TYPE.ELASTIC_REMOVE_LIQUIDITY]: summaryLiquidity,
   [TRANSACTION_TYPE.ELASTIC_INCREASE_LIQUIDITY]: summaryLiquidity,
+  [TRANSACTION_TYPE.ELASTIC_ZAP_IN_LIQUIDITY]: zapInLiquidity,
   [TRANSACTION_TYPE.ELASTIC_COLLECT_FEE]: summaryLiquidity,
 
   [TRANSACTION_TYPE.STAKE]: summaryStakeUnstakeFarm,

src/components/Button/index.tsx

@@ -20,6 +20,7 @@ const disabledHoverBase = css`
 `
 const Base = styled(RebassButton)<{
   color?: string
+  backgroundColor?: string
   padding?: string
   margin?: string
   width?: string
@@ -81,16 +82,16 @@ const disabledPrimary = css<{
   opacity: ${({ altDisabledStyle }) => (altDisabledStyle ? '0.7' : '1')};
 `
 export const ButtonPrimary = styled(Base)`
-  background-color: ${({ theme }) => theme.primary};
-  color: ${({ theme }) => theme.textReverse};
+  background-color: ${({ theme, backgroundColor }) => backgroundColor || theme.primary};
+  color: ${({ theme, color }) => color || theme.textReverse};
   &:hover {
-    color: ${({ theme }) => theme.textReverse};
+    color: ${({ theme, color }) => color || theme.textReverse};
     filter: brightness(0.8);
   }
 
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.primary)};
-    background-color: ${({ theme }) => darken(0.1, theme.primary)};
+    box-shadow: 0 0 0 1pt ${({ theme, backgroundColor }) => darken(0.1, backgroundColor || theme.primary)};
+    background-color: ${({ theme, backgroundColor }) => darken(0.1, backgroundColor || theme.primary)};
   }
   &:disabled {
     ${disabledPrimary}
@@ -263,6 +264,7 @@ const disabledError = css`
 export const ButtonErrorStyle = styled(Base)`
   background-color: ${({ theme }) => theme.red};
   border: 1px solid ${({ theme }) => theme.red};
+  color: ${({ theme }) => theme.text};
 
   &:focus {
     box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.red)};