+
+
+
+
+
+
To (at least)
+ independentField === Field.OUTPUT && !showWrap ? (
+ From (at most)
) : (
- To
+ From
)
}
- showMaxButton={false}
- hideBalance={false}
- fiatValue={fiatValueOutput ?? undefined}
- priceImpact={stablecoinPriceImpact}
- currency={currencies[Field.OUTPUT] ?? null}
- onCurrencySelect={handleOutputSelect}
- otherCurrency={currencies[Field.INPUT]}
+ value={formattedAmounts[Field.INPUT]}
+ showMaxButton={showMaxButton}
+ currency={currencies[Field.INPUT] ?? null}
+ onUserInput={handleTypeInput}
+ onMax={handleMaxInput}
+ fiatValue={fiatValueInput ?? undefined}
+ onCurrencySelect={handleInputSelect}
+ otherCurrency={currencies[Field.OUTPUT]}
showCommonBases={true}
- id={InterfaceSectionName.CURRENCY_OUTPUT_PANEL}
- loading={independentField === Field.INPUT && routeIsSyncing}
+ id={InterfaceSectionName.CURRENCY_INPUT_PANEL}
+ loading={independentField === Field.OUTPUT && routeIsSyncing}
/>
-
- {recipient !== null && !showWrap ? (
- <>
-
-
-
-
- onChangeRecipient(null)}>
- - Remove recipient
-
-
-
-
- ) : null}
-
- {showDetailsDropdown && (
-
-
-
- )}
-
- {swapIsUnsupported ? (
-
-
- Unsupported Asset
-
-
- ) : !account ? (
+
+
-
- Connect Wallet
-
+ {
+ setApprovalSubmitted(false) // reset 2 step UI for approvals
+ onSwitchTokens()
+ }}
+ color={theme.textPrimary}
+ >
+
+
- ) : showWrap ? (
-
- {wrapInputError ? (
-
- ) : wrapType === WrapType.WRAP ? (
- Wrap
- ) : wrapType === WrapType.UNWRAP ? (
- Unwrap
- ) : null}
-
- ) : routeNotFound && userHasSpecifiedInputOutput && !routeIsLoading && !routeIsSyncing ? (
-
-
- Insufficient liquidity for this trade.
-
-
- ) : isValid && allowance.state === AllowanceState.REQUIRED ? (
-
- {isAllowancePending ? (
- <>
-
- Approve in your wallet
-
- ) : isApprovalLoading ? (
+
+
+
+
+ To (at least)
+ ) : (
+ To
+ )
+ }
+ showMaxButton={false}
+ hideBalance={false}
+ fiatValue={fiatValueOutput ?? undefined}
+ priceImpact={stablecoinPriceImpact}
+ currency={currencies[Field.OUTPUT] ?? null}
+ onCurrencySelect={handleOutputSelect}
+ otherCurrency={currencies[Field.INPUT]}
+ showCommonBases={true}
+ id={InterfaceSectionName.CURRENCY_OUTPUT_PANEL}
+ loading={independentField === Field.INPUT && routeIsSyncing}
+ />
+
+
+ {recipient !== null && !showWrap ? (
<>
-
- Approval pending
+
+
+
+
+ onChangeRecipient(null)}>
+ - Remove recipient
+
+
+
- ) : (
- <>
-
-
- Permission is required for Uniswap to swap each token. This will expire after one
- month for your security.
-
+ ) : null}
+
+ {showDetailsDropdown && (
+
+
+
+ )}
+
+ {showPriceImpactWarning && }
+
+ {swapIsUnsupported ? (
+
+
+ Unsupported Asset
+
+
+ ) : !account ? (
+
+
+ Connect Wallet
+
+
+ ) : showWrap ? (
+
+ {wrapInputError ? (
+
+ ) : wrapType === WrapType.WRAP ? (
+ Wrap
+ ) : wrapType === WrapType.UNWRAP ? (
+ Unwrap
+ ) : null}
+
+ ) : routeNotFound && userHasSpecifiedInputOutput && !routeIsLoading && !routeIsSyncing ? (
+
+
+ Insufficient liquidity for this trade.
+
+
+ ) : showApproveFlow ? (
+
+
+
+
+ {/* we need to shorten this string on mobile */}
+ {approvalState === ApprovalState.APPROVED ||
+ signatureState === UseERC20PermitState.SIGNED ? (
+
+ You can now trade {currencies[Field.INPUT]?.symbol}
+
+ ) : (
+
+ Allow Forge to use your {currencies[Field.INPUT]?.symbol}
+
+ )}
+
+ {approvalPending || approvalState === ApprovalState.PENDING ? (
+
+ ) : (approvalSubmitted && approvalState === ApprovalState.APPROVED) ||
+ signatureState === UseERC20PermitState.SIGNED ? (
+
+ ) : (
+
+ You must give the Uniswap smart contracts permission to use your{' '}
+ {currencies[Field.INPUT]?.symbol}. You only have to do this once per token.
+
+ }
+ >
+
+
+ )}
+
+
+ {
+ if (isExpertMode) {
+ handleSwap()
+ } else {
+ setSwapState({
+ tradeToConfirm: trade,
+ attemptingTxn: false,
+ swapErrorMessage: undefined,
+ showConfirm: true,
+ txHash: undefined,
+ })
}
- >
-
-
-
+
+ Permission is required for Uniswap to swap each token. This will expire after one
+ month for your security.
+
+ }
+ >
+
+
+
+ Approve use of {currencies[Field.INPUT]?.symbol}
+
)}
-
-
- )}
- {isExpertMode && swapErrorMessage ? : null}
- 
{' '}