Merge 4e37c9a into 252fb54

.vscode/settings.json

@@ -22,4 +22,4 @@
   "solidity.compileUsingRemoteVersion": "v0.8.17+commit.8df45f5f",
   "solidity.formatter": "prettier",
   "solidity.defaultCompiler": "remote"
-}
+}

packages/synapse-interface/components/StateManagedBridge/BridgeTransactionButton.tsx

@@ -9,8 +9,12 @@ import { useBridgeQuoteState } from '@/slices/bridgeQuote/hooks'
 import { setIsDestinationWarningAccepted } from '@/slices/bridgeDisplaySlice'
 import { useBridgeDisplayState, useBridgeState } from '@/slices/bridge/hooks'
 import { TransactionButton } from '@/components/buttons/TransactionButton'
-import { useBridgeValidations } from './hooks/useBridgeValidations'
+import {
+  useBridgeValidations,
+  constructStringifiedBridgeSelections,
+} from './hooks/useBridgeValidations'
 import { segmentAnalyticsEvent } from '@/contexts/SegmentAnalyticsProvider'
+import { useConfirmNewBridgePrice } from './hooks/useConfirmNewBridgePrice'
 
 export const BridgeTransactionButton = ({
   approveTxn,
@@ -45,6 +49,11 @@ export const BridgeTransactionButton = ({
     debouncedFromValue,
   } = useBridgeState()
   const { bridgeQuote, isLoading } = useBridgeQuoteState()
+  const {
+    hasQuoteOutputChanged,
+    hasUserConfirmedChange,
+    setHasUserConfirmedChange,
+  } = useConfirmNewBridgePrice()
 
   const { isWalletPending } = useWalletState()
   const { showDestinationWarning, isDestinationWarningAccepted } =
@@ -162,6 +171,13 @@ export const BridgeTransactionButton = ({
       onClick: () => switchChain({ chainId: fromChainId }),
       pendingLabel: 'Switching chains',
     }
+  } else if (hasQuoteOutputChanged && !hasUserConfirmedChange) {
+    buttonProperties = {
+      label: 'Confirm new price',
+      onClick: () => setHasUserConfirmedChange(true),
+      className:
+        '!border !border-synapsePurple !from-bgLight !to-bgLight !animate-pulse',
+    }
   } else if (!isApproved && hasValidInput && hasValidQuote) {
     buttonProperties = {
       onClick: approveTxn,

packages/synapse-interface/components/StateManagedBridge/hooks/useBridgeValidations.ts

@@ -111,7 +111,7 @@ export const useBridgeValidations = () => {
   }
 }
 
-const constructStringifiedBridgeSelections = (
+export const constructStringifiedBridgeSelections = (
   originAmount,
   originChainId,
   originToken,

packages/synapse-interface/components/StateManagedBridge/hooks/useConfirmNewBridgePrice.ts

@@ -0,0 +1,76 @@
+import { useState, useEffect, useMemo, useRef } from 'react'
+
+import { useBridgeQuoteState } from '@/slices/bridgeQuote/hooks'
+import { constructStringifiedBridgeSelections } from './useBridgeValidations'
+
+export const useConfirmNewBridgePrice = () => {
+  const [hasQuoteOutputChanged, setHasQuoteOutputChanged] =
+    useState<boolean>(false)
+  const [hasUserConfirmedChange, setHasUserConfirmedChange] =
+    useState<boolean>(false)
+
+  const triggeredQuoteRef = useRef<any>(null)
+
+  const { bridgeQuote, previousBridgeQuote } = useBridgeQuoteState()
+
+  const currentBridgeQuoteSelections = useMemo(
+    () =>
+      constructStringifiedBridgeSelections(
+        bridgeQuote?.inputAmountForQuote,
+        bridgeQuote?.originChainId,
+        bridgeQuote?.originTokenForQuote,
+        bridgeQuote?.destChainId,
+        bridgeQuote?.destTokenForQuote
+      ),
+    [bridgeQuote]
+  )
+
+  const previousBridgeQuoteSelections = useMemo(
+    () =>
+      constructStringifiedBridgeSelections(
+        previousBridgeQuote?.inputAmountForQuote,
+        previousBridgeQuote?.originChainId,
+        previousBridgeQuote?.originTokenForQuote,
+        previousBridgeQuote?.destChainId,
+        previousBridgeQuote?.destTokenForQuote
+      ),
+    [previousBridgeQuote]
+  )
+
+  useEffect(() => {
+    const validQuotes =
+      bridgeQuote?.outputAmount && previousBridgeQuote?.outputAmount
+
+    const selectionsMatch =
+      currentBridgeQuoteSelections === previousBridgeQuoteSelections
+
+    const outputAmountChanged =
+      bridgeQuote?.outputAmount !== previousBridgeQuote?.outputAmount
+
+    if (selectionsMatch && validQuotes && outputAmountChanged) {
+      // Ref quote that triggered the change
+      triggeredQuoteRef.current = bridgeQuote
+      setHasQuoteOutputChanged(true)
+      setHasUserConfirmedChange(false)
+    } else if (
+      selectionsMatch &&
+      bridgeQuote?.outputAmount === triggeredQuoteRef?.current?.outputAmount
+    ) {
+      // Maintain status until User confirms ref quote update
+      setHasQuoteOutputChanged(true)
+    } else {
+      setHasQuoteOutputChanged(false)
+    }
+  }, [
+    bridgeQuote,
+    previousBridgeQuote,
+    currentBridgeQuoteSelections,
+    previousBridgeQuoteSelections,
+  ])
+
+  return {
+    hasQuoteOutputChanged,
+    hasUserConfirmedChange,
+    setHasUserConfirmedChange,
+  }
+}

packages/synapse-interface/pages/state-managed-bridge/index.tsx

@@ -136,8 +136,6 @@ const StateManagedBridge = () => {
 
     // will have to handle deadlineMinutes here at later time, gets passed as optional last arg in .bridgeQuote()
 
-    /* clear stored bridge quote before requesting new bridge quote */
-    dispatch(resetBridgeQuote())
     const currentTimestamp: number = getUnixTimeMinutesFromNow(0)
 
     try {

packages/synapse-interface/slices/bridgeQuote/reducer.ts

@@ -6,11 +6,13 @@ import { fetchBridgeQuote } from './thunks'
 
 export interface BridgeQuoteState {
   bridgeQuote: BridgeQuote
+  previousBridgeQuote: BridgeQuote | null
   isLoading: boolean
 }
 
 export const initialState: BridgeQuoteState = {
   bridgeQuote: EMPTY_BRIDGE_QUOTE,
+  previousBridgeQuote: null,
   isLoading: false,
 }
 
@@ -24,6 +26,9 @@ export const bridgeQuoteSlice = createSlice({
     resetBridgeQuote: (state) => {
       state.bridgeQuote = initialState.bridgeQuote
     },
+    setPreviousBridgeQuote: (state, action: PayloadAction<any>) => {
+      state.previousBridgeQuote = action.payload
+    },
   },
   extraReducers: (builder) => {
     builder
@@ -44,6 +49,7 @@ export const bridgeQuoteSlice = createSlice({
   },
 })
 
-export const { resetBridgeQuote, setIsLoading } = bridgeQuoteSlice.actions
+export const { resetBridgeQuote, setIsLoading, setPreviousBridgeQuote } =
+  bridgeQuoteSlice.actions
 
 export default bridgeQuoteSlice.reducer

packages/synapse-interface/store/middleware/bridgeQuoteHistoryMiddleware.ts

@@ -0,0 +1,25 @@
+import {
+  Middleware,
+  MiddlewareAPI,
+  Dispatch,
+  AnyAction,
+} from '@reduxjs/toolkit'
+
+export const bridgeQuoteHistoryMiddleware: Middleware =
+  (store: MiddlewareAPI) => (next: Dispatch) => (action: AnyAction) => {
+    const previousState = store.getState()
+    const result = next(action)
+    const currentState = store.getState()
+
+    if (
+      previousState.bridgeQuote.bridgeQuote !==
+      currentState.bridgeQuote.bridgeQuote
+    ) {
+      store.dispatch({
+        type: 'bridgeQuote/setPreviousBridgeQuote',
+        payload: previousState.bridgeQuote.bridgeQuote,
+      })
+    }
+
+    return result
+  }

packages/synapse-interface/store/store.ts

@@ -6,7 +6,8 @@ import { api } from '@/slices/api/slice'
 import { segmentAnalyticsEvent } from '@/contexts/SegmentAnalyticsProvider'
 import { storageKey, persistConfig, persistedReducer } from './reducer'
 import { resetReduxCache } from '@/slices/application/actions'
-import { destinationAddressMiddleware } from '@/store/destinationAddressMiddleware'
+import { destinationAddressMiddleware } from '@/store/middleware/destinationAddressMiddleware'
+import { bridgeQuoteHistoryMiddleware } from './middleware/bridgeQuoteHistoryMiddleware'
 
 const checkVersionAndResetCache = (): boolean => {
   if (typeof window !== 'undefined') {
@@ -28,7 +29,11 @@ export const store = configureStore({
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware({
       serializableCheck: false,
-    }).concat(api.middleware, destinationAddressMiddleware),
+    }).concat(
+      api.middleware,
+      destinationAddressMiddleware,
+      bridgeQuoteHistoryMiddleware
+    ),
 })
 
 if (checkVersionAndResetCache()) {