fix: settings reset

src/components/Swap/Summary/index.test.tsx

@@ -63,6 +63,7 @@ function Summary({ allowance }: { allowance: usePermit2Allowance.Allowance }) {
       onConfirm={noopAsync}
       triggerImpactSpeedbump={() => false}
       allowance={allowance}
+      approval={undefined}
       slippage={{
         auto: true,
         allowed: new Percent(1, 100),

src/components/Swap/Summary/index.tsx

@@ -36,16 +36,16 @@ enum ReviewState {
   SWAP_PENDING,
 }
 
-function useReviewState(onSwap: () => Promise<void>, allowance: Allowance, approval: SwapApproval, doesTradeDiffer: boolean) {
+function useReviewState(onSwap: () => Promise<void>, allowance: Allowance, approval: SwapApproval | undefined, doesTradeDiffer: boolean) {
   const [currentState, setCurrentState] = useState(ReviewState.REVIEWING)
   const closeDialog = useCloseDialog()
   const permit2Enabled = usePermit2Enabled()
 
   const onStartSwapFlow = useCallback(async () => {
-    if (currentState!== ReviewState.ALLOWING && (allowance.state === AllowanceState.REQUIRED || approval.state === SwapApprovalState.REQUIRES_APPROVAL || approval.state === SwapApprovalState.REQUIRES_SIGNATURE)) {
+    if (currentState!== ReviewState.ALLOWING && (allowance.state === AllowanceState.REQUIRED || approval?.state === SwapApprovalState.REQUIRES_APPROVAL || approval?.state === SwapApprovalState.REQUIRES_SIGNATURE)) {
       setCurrentState(ReviewState.ALLOWING)
       try {
-        await ((allowance as AllowanceRequired).approveAndPermit ?? approval.approve)?.()
+        await ((allowance as AllowanceRequired).approveAndPermit ?? approval?.approve)?.()
       } catch (e) {
         if (e instanceof UserRejectedRequestError) {
           closeDialog?.()
@@ -55,7 +55,7 @@ function useReviewState(onSwap: () => Promise<void>, allowance: Allowance, appro
         }
       }
       // if the user finishes permit2 allowance flow, onStartSwapFlow() will be called again by useEffect below to trigger swap
-    } else if ((permit2Enabled && allowance.state === AllowanceState.ALLOWED) || approval.state === SwapApprovalState.APPROVED) {
+    } else if ((permit2Enabled && allowance.state === AllowanceState.ALLOWED) || approval?.state === SwapApprovalState.APPROVED) {
       // Prevents immediate swap if trade has updated mid permit2 flow
       if (currentState === ReviewState.ALLOWING && doesTradeDiffer) {
         setCurrentState(ReviewState.REVIEWING)
@@ -162,7 +162,7 @@ export function ConfirmButton({
   onConfirm: () => Promise<void>
   triggerImpactSpeedbump: () => boolean
   allowance: Allowance
-  approval:SwapApproval
+  approval?:SwapApproval
 }) {
   const { onSwapPriceUpdateAck, onSubmitSwapClick } = useAtomValue(swapEventHandlersAtom)
   const [ackTrade, setAckTrade] = useState(trade)
@@ -181,7 +181,7 @@ export function ConfirmButton({
   // Used to determine specific message to render while in ALLOWANCE_PROMPTED state
   const [shouldRequestApproval, isApprovalLoading] = useMemo(
     () =>
-      approval.approve ?[false, approval.state === SwapApprovalState.PENDING_APPROVAL || approval.state === SwapApprovalState.PENDING_SIGNATURE] :
+      approval?.approve ?[false, approval?.state === SwapApprovalState.PENDING_APPROVAL || approval?.state === SwapApprovalState.PENDING_SIGNATURE] :
       allowance.state === AllowanceState.REQUIRED
         ? [allowance.shouldRequestApproval, allowance.isApprovalLoading]
         : [false, false],
@@ -210,7 +210,7 @@ export function ConfirmButton({
           'interactive',
         ]
       case ReviewState.ALLOWING:
-        return isApprovalLoading || (!approval.approve && allowance.state === AllowanceState.ALLOWED)
+        return isApprovalLoading || (!approval?.approve && allowance.state === AllowanceState.ALLOWED)
           ? [getApprovalLoadingAction()]
           : [getAllowancePendingAction(shouldRequestApproval, onCancel, trade.inputAmount.currency)]
       case ReviewState.ALLOWANCE_FAILED:
@@ -238,7 +238,7 @@ export function ConfirmButton({
     }
   }, [
     allowance.state,
-    approval.state,
+    approval?.state,
     currentState,
     doesTradeDiffer,
     isApprovalLoading,

src/cosmos/Swap.fixture.tsx

@@ -5,6 +5,7 @@ import {
   defaultTheme,
   DialogAnimationType,
   lightTheme,
+  RouterPreference,
   SupportedChainId,
   SwapWidget,
 } from '@uniswap/widgets'
@@ -115,6 +116,13 @@ function Fixture() {
       width={width}
       routerUrl={routerUrl}
       brandedFooter={brandedFooter}
+      settings={
+        {
+          slippage: { auto: false, max: '0.3' },
+          routerPreference: RouterPreference.API,
+          transactionTtl: 30,
+      }
+      }
       dialogOptions={{
         animationType: dialogAnimation,
         pageCentered,

src/hooks/swap/useSyncController.ts

@@ -1,7 +1,7 @@
 import { useAtom } from 'jotai'
 import { useEffect, useRef } from 'react'
 import { controlledAtom as controlledSwapAtom, Swap } from 'state/swap'
-import { controlledAtom as controlledSettingsAtom, Settings } from 'state/swap/settings'
+import { stateAtom as controlledSettingsAtom, Settings } from 'state/swap/settings'
 
 export interface SwapController {
   value?: Swap
@@ -12,6 +12,13 @@ export default function useSyncController({ value, settings }: SwapController):
   // Log an error if the component changes from uncontrolled to controlled (or vice versa).
   const isSwapControlled = useRef(Boolean(value))
   const isSettingsControlled = useRef(Boolean(settings))
+  const [controlledSettings, setControlledSettings] = useAtom(controlledSettingsAtom)
+
+  useEffect(() => {
+    // only set settings on mount - otherwise settings are being reset to default after every change in UI
+    setControlledSettings(settings as Settings)
+  },[])
+
   useEffect(() => {
     if (Boolean(value) !== isSwapControlled.current) {
       warnOnControlChange({ state: 'swap', prop: 'value' })
@@ -25,11 +32,6 @@ export default function useSyncController({ value, settings }: SwapController):
   if (controlledSwap !== value) {
     setControlledSwap(value)
   }
-
-  const [controlledSettings, setControlledSettings] = useAtom(controlledSettingsAtom)
-  if (controlledSettings !== settings) {
-    setControlledSettings(settings)
-  }
 }
 
 function warnOnControlChange({ state, prop }: { state: string; prop: string }) {

src/test/index.tsx

@@ -25,7 +25,7 @@ import { Provider as ReduxProvider } from 'react-redux'
 import { store } from 'state'
 import { Provider as ThemeProvider } from 'theme'
 import JsonRpcConnector from 'utils/JsonRpcConnector'
-import { WalletConnectPopup, WalletConnectQR } from 'utils/WalletConnect'
+import { WalletConnectQR } from 'utils/WalletConnect'
 
 export * from '@testing-library/react'
 export { default as userEvent } from '@testing-library/user-event'
@@ -55,7 +55,7 @@ export function TestableWidget(props: PropsWithChildren<TestableWidgetProps>) {
                     connectors={{
                       user: {} as JsonRpcConnector,
                       metaMask: {} as MetaMask,
-                      walletConnect: {} as WalletConnectPopup,
+                      walletConnect: {} as WalletConnectQR,
                       walletConnectQR: {} as WalletConnectQR,
                       network: {} as Network,
                     }}