diff --git a/locales/base/translation.json b/locales/base/translation.json
index 27982d5f4ff..51afedb3ad8 100644
--- a/locales/base/translation.json
+++ b/locales/base/translation.json
@@ -2581,6 +2581,7 @@
"fees": "Fees",
"available": "Available",
"swap": "Swap",
+ "estimatedDuration": "Est. Transaction Time",
"claimingReward": "Claiming Reward",
"earnUpToLabel": "You could earn up to:",
"rateLabel": "Rate (est.)",
diff --git a/src/earn/EarnEnterAmount.test.tsx b/src/earn/EarnEnterAmount.test.tsx
index c2e292e9585..74b25b2fe6e 100644
--- a/src/earn/EarnEnterAmount.test.tsx
+++ b/src/earn/EarnEnterAmount.test.tsx
@@ -499,7 +499,7 @@ describe('EarnEnterAmount', () => {
prepareTransactionError: undefined,
isPreparingTransactions: false,
})
- const { getByTestId, getByText } = render(
+ const { getByTestId, getByText, queryByTestId } = render(
@@ -524,6 +524,8 @@ describe('EarnEnterAmount', () => {
expect(getByTestId('EarnEnterAmount/Fees')).toBeTruthy()
expect(getByTestId('EarnEnterAmount/Fees')).toHaveTextContent('₱0.012')
+ expect(queryByTestId('EarnEnterAmount/Duration')).toBeFalsy()
+
fireEvent.press(getByText('earnFlow.enterAmount.continue'))
await waitFor(() => expect(AppAnalytics.track).toHaveBeenCalledTimes(1))
@@ -588,6 +590,9 @@ describe('EarnEnterAmount', () => {
expect(getByTestId('EarnEnterAmount/Fees')).toBeTruthy()
expect(getByTestId('EarnEnterAmount/Fees')).toHaveTextContent('₱0.012')
+ expect(getByTestId('EarnEnterAmount/Duration')).toBeTruthy()
+ expect(getByTestId('EarnEnterAmount/Duration')).toHaveTextContent('{"minutes":5}')
+
fireEvent.press(getByText('earnFlow.enterAmount.continue'))
await waitFor(() => expect(AppAnalytics.track).toHaveBeenCalledTimes(2)) // one for token selection, one for continue press
diff --git a/src/earn/EarnEnterAmount.tsx b/src/earn/EarnEnterAmount.tsx
index 1d95ff98ace..86d32baf7e0 100644
--- a/src/earn/EarnEnterAmount.tsx
+++ b/src/earn/EarnEnterAmount.tsx
@@ -152,6 +152,7 @@ export default function EarnEnterAmount({ route }: Props) {
const reviewBottomSheetRef = useRef(null)
const feeDetailsBottomSheetRef = useRef(null)
const swapDetailsBottomSheetRef = useRef(null)
+ const estimatedDurationBottomSheetRef = useRef(null)
const [selectedPercentage, setSelectedPercentage] = useState(null)
const hooksApiUrl = useSelector(hooksApiUrlSelector)
@@ -391,6 +392,7 @@ export default function EarnEnterAmount({ route }: Props) {
prepareTransactionsResult={prepareTransactionsResult}
feeDetailsBottomSheetRef={feeDetailsBottomSheetRef}
swapDetailsBottomSheetRef={swapDetailsBottomSheetRef}
+ estimatedDurationBottomSheetRef={estimatedDurationBottomSheetRef}
swapTransaction={swapTransaction}
/>
)}
@@ -511,6 +513,9 @@ export default function EarnEnterAmount({ route }: Props) {
parsedTokenAmount={processedAmounts.token.bignum}
/>
)}
+ {swapTransaction?.swapType === 'cross-chain' && processedAmounts.token.bignum && (
+
+ )}
{processedAmounts.token.bignum && prepareTransactionsResult?.type === 'possible' && (
swapDetailsBottomSheetRef: React.RefObject
+ estimatedDurationBottomSheetRef: React.RefObject
}) {
const { t } = useTranslation()
const { maxFeeAmount, feeCurrency } = getFeeCurrencyAndAmounts(prepareTransactionsResult)
+ const estimatedDurationInSeconds =
+ swapTransaction?.swapType === 'cross-chain' ? swapTransaction.estimatedDuration : undefined
const depositAmount = useMemo(
() =>
@@ -713,6 +722,24 @@ function TransactionDepositDetails({
/>
+ {!!estimatedDurationInSeconds && (
+
+ {
+ estimatedDurationBottomSheetRef?.current?.snapToIndex(0)
+ }}
+ testID="LabelWithInfo/DurationLabel"
+ />
+
+
+ {t('swapScreen.transactionDetails.estimatedTransactionTimeInMinutes', {
+ minutes: Math.ceil(estimatedDurationInSeconds / 60),
+ })}
+
+
+
+ )}
)
)
@@ -952,6 +979,32 @@ function SwapDetailsBottomSheet({
)
}
+function EstimatedDurationBottomSheet({
+ forwardedRef,
+}: {
+ forwardedRef: React.RefObject
+}) {
+ const { t } = useTranslation()
+ return (
+
+
+ )
+}
+
const styles = StyleSheet.create({
safeAreaContainer: {
flex: 1,
@@ -1042,4 +1095,7 @@ const styles = StyleSheet.create({
...typeScale.bodySmall,
color: Colors.black,
},
+ bottomSheetButton: {
+ marginTop: Spacing.Thick24,
+ },
})