From 77e240f85a98643836cc8e07c5e791174c02230d Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Tue, 18 Jun 2024 15:57:47 -0700 Subject: [PATCH 1/3] Disable input when wallet prompt pending --- .../components/StateManagedBridge/InputContainer.tsx | 3 ++- .../synapse-interface/pages/state-managed-bridge/index.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx b/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx index b17b6b285d..415e402957 100644 --- a/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx +++ b/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx @@ -33,7 +33,7 @@ import { formatAmount } from '../../utils/formatAmount' export const inputRef = React.createRef() -export const InputContainer = () => { +export const InputContainer = ({ isWalletPending }) => { const dispatch = useAppDispatch() const { chain, isConnected } = useAccount() const { balances } = usePortfolioState() @@ -152,6 +152,7 @@ export const InputContainer = () => { inputRef={inputRef} showValue={showValue} handleFromValueChange={handleFromValueChange} + disabled={isWalletPending} /> { )} {!showSettingsSlideOver && ( <> - + { dispatch(setFromChainId(toChainId)) From 9f3da8589473a5e638b108ea7a32114838d8ff98 Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Tue, 18 Jun 2024 16:01:44 -0700 Subject: [PATCH 2/3] Lift isWalletPending to store --- .../components/StateManagedBridge/InputContainer.tsx | 12 +++++++++--- .../pages/state-managed-bridge/index.tsx | 11 +++++------ packages/synapse-interface/slices/bridge/reducer.ts | 6 ++++++ 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx b/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx index 415e402957..f526706f2d 100644 --- a/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx +++ b/packages/synapse-interface/components/StateManagedBridge/InputContainer.tsx @@ -33,12 +33,18 @@ import { formatAmount } from '../../utils/formatAmount' export const inputRef = React.createRef() -export const InputContainer = ({ isWalletPending }) => { +export const InputContainer = () => { const dispatch = useAppDispatch() const { chain, isConnected } = useAccount() const { balances } = usePortfolioState() - const { fromChainId, toChainId, fromToken, toToken, fromValue } = - useBridgeState() + const { + fromChainId, + toChainId, + fromToken, + toToken, + fromValue, + isWalletPending, + } = useBridgeState() const [showValue, setShowValue] = useState('') const [hasMounted, setHasMounted] = useState(false) diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx index 8451672523..47392b458d 100644 --- a/packages/synapse-interface/pages/state-managed-bridge/index.tsx +++ b/packages/synapse-interface/pages/state-managed-bridge/index.tsx @@ -34,11 +34,10 @@ import { setFromToken, setToChainId, setToToken, -} from '@/slices/bridge/reducer' -import { updateFromValue, setBridgeQuote, setIsLoading, + setIsWalletPending, setDestinationAddress, } from '@/slices/bridge/reducer' import { @@ -94,12 +93,12 @@ const StateManagedBridge = () => { debouncedFromValue, destinationAddress, isLoading: isQuoteLoading, + isWalletPending, }: BridgeState = useBridgeState() const { showSettingsSlideOver, showDestinationAddress } = useSelector( (state: RootState) => state.bridgeDisplay ) - const [isWalletPending, setIsWalletPending] = useState(false) const [isApproved, setIsApproved] = useState(false) const dispatch = useAppDispatch() @@ -377,7 +376,7 @@ const StateManagedBridge = () => { }) ) try { - setIsWalletPending(true) + dispatch(setIsWalletPending(true)) const wallet = await getWalletClient(wagmiConfig, { chainId: fromChainId, }) @@ -524,7 +523,7 @@ const StateManagedBridge = () => { return txErrorHandler(error) } finally { - setIsWalletPending(false) + dispatch(setIsWalletPending(false)) } } @@ -577,7 +576,7 @@ const StateManagedBridge = () => { )} {!showSettingsSlideOver && ( <> - + { dispatch(setFromChainId(toChainId)) diff --git a/packages/synapse-interface/slices/bridge/reducer.ts b/packages/synapse-interface/slices/bridge/reducer.ts index 8a63215acf..6fbf365bb6 100644 --- a/packages/synapse-interface/slices/bridge/reducer.ts +++ b/packages/synapse-interface/slices/bridge/reducer.ts @@ -34,6 +34,7 @@ export interface BridgeState { toTokensBridgeQuotes: BridgeQuoteResponse[] toTokensBridgeQuotesStatus: FetchState isLoading: boolean + isWalletPending: boolean deadlineMinutes: number | null destinationAddress: Address | null } @@ -71,6 +72,7 @@ export const initialState: BridgeState = { toTokensBridgeQuotes: [], toTokensBridgeQuotesStatus: FetchState.IDLE, isLoading: false, + isWalletPending: false, deadlineMinutes: null, destinationAddress: null, } @@ -82,6 +84,9 @@ export const bridgeSlice = createSlice({ setIsLoading: (state, action: PayloadAction) => { state.isLoading = action.payload }, + setIsWalletPending: (state, action: PayloadAction) => { + state.isWalletPending = action.payload + }, setFromChainId: (state, action: PayloadAction) => { const incomingFromChainId = action.payload @@ -509,6 +514,7 @@ export const { setDeadlineMinutes, setDestinationAddress, setIsLoading, + setIsWalletPending, resetBridgeInputs, clearDestinationAddress, resetFetchedBridgeQuotes, From e1569a0ea361db1ceebf2ef82e6f805783e21802 Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Tue, 18 Jun 2024 16:28:02 -0700 Subject: [PATCH 3/3] Disable input during approve wallet pending --- .../synapse-interface/pages/state-managed-bridge/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx index 47392b458d..d70edba5dd 100644 --- a/packages/synapse-interface/pages/state-managed-bridge/index.tsx +++ b/packages/synapse-interface/pages/state-managed-bridge/index.tsx @@ -326,6 +326,7 @@ const StateManagedBridge = () => { const approveTxn = async () => { try { + dispatch(setIsWalletPending(true)) const tx = approveToken( bridgeQuote?.routerAddress, fromChainId, @@ -337,6 +338,8 @@ const StateManagedBridge = () => { getAndSetBridgeQuote() } catch (error) { return txErrorHandler(error) + } finally { + dispatch(setIsWalletPending(false)) } }