feat(earn): add estimated duration for x chain swap and deposit (#6394)

### Description Adds estimated duration and bottom sheet, copied from swap screen ### Test plan Manual, CI https://github.com/user-attachments/assets/16c73702-c55b-4416-92c3-270ad5f22859 ### Related issues - Part of ACT-1507 ### Backwards compatibility Yes ### Network scalability If a new NetworkId and/or Network are added in the future, the changes in this PR will: - [x] Continue to work without code changes, OR trigger a compilation error (guaranteeing we find it when a new network is added)
valora-inc · Jan 4, 2025 · fc83679 · fc83679
1 parent 3305182
commit fc83679
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 1 deletion.
diff --git 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
@@ -499,7 +499,7 @@ describe('EarnEnterAmount', () => {
         prepareTransactionError: undefined,
         isPreparingTransactions: false,
       })
-      const { getByTestId, getByText } = render(
+      const { getByTestId, getByText, queryByTestId } = render(
         <Provider store={store}>
           <MockedNavigator component={EarnEnterAmount} params={swapDepositParams} />
         </Provider>
@@ -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
@@ -152,6 +152,7 @@ export default function EarnEnterAmount({ route }: Props) {
   const reviewBottomSheetRef = useRef<BottomSheetModalRefType>(null)
   const feeDetailsBottomSheetRef = useRef<BottomSheetModalRefType>(null)
   const swapDetailsBottomSheetRef = useRef<BottomSheetModalRefType>(null)
+  const estimatedDurationBottomSheetRef = useRef<BottomSheetModalRefType>(null)
 
   const [selectedPercentage, setSelectedPercentage] = useState<number | null>(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 && (
+        <EstimatedDurationBottomSheet forwardedRef={estimatedDurationBottomSheetRef} />
+      )}
       {processedAmounts.token.bignum && prepareTransactionsResult?.type === 'possible' && (
         <EarnDepositBottomSheet
           forwardedRef={reviewBottomSheetRef}
@@ -621,6 +626,7 @@ function TransactionDepositDetails({
   swapTransaction,
   feeDetailsBottomSheetRef,
   swapDetailsBottomSheetRef,
+  estimatedDurationBottomSheetRef,
 }: {
   pool: EarnPosition
   token: TokenBalance
@@ -629,9 +635,12 @@ function TransactionDepositDetails({
   swapTransaction?: SwapTransaction
   feeDetailsBottomSheetRef: React.RefObject<BottomSheetModalRefType>
   swapDetailsBottomSheetRef: React.RefObject<BottomSheetModalRefType>
+  estimatedDurationBottomSheetRef: React.RefObject<BottomSheetModalRefType>
 }) {
   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({
             />
           </View>
         </View>
+        {!!estimatedDurationInSeconds && (
+          <View style={styles.txDetailsLineItem}>
+            <LabelWithInfo
+              label={t('earnFlow.enterAmount.estimatedDuration')}
+              onPress={() => {
+                estimatedDurationBottomSheetRef?.current?.snapToIndex(0)
+              }}
+              testID="LabelWithInfo/DurationLabel"
+            />
+            <View style={styles.txDetailsValue}>
+              <Text style={styles.txDetailsValueText} testID="EarnEnterAmount/Duration">
+                {t('swapScreen.transactionDetails.estimatedTransactionTimeInMinutes', {
+                  minutes: Math.ceil(estimatedDurationInSeconds / 60),
+                })}
+              </Text>
+            </View>
+          </View>
+        )}
       </View>
     )
   )
@@ -952,6 +979,32 @@ function SwapDetailsBottomSheet({
   )
 }
 
+function EstimatedDurationBottomSheet({
+  forwardedRef,
+}: {
+  forwardedRef: React.RefObject<BottomSheetModalRefType>
+}) {
+  const { t } = useTranslation()
+  return (
+    <BottomSheet
+      forwardedRef={forwardedRef}
+      title={t('swapScreen.transactionDetails.estimatedTransactionTime')}
+      description={t('swapScreen.transactionDetails.estimatedTransactionTimeInfo')}
+      testId="EstimatedDurationBottomSheet"
+    >
+      <Button
+        type={BtnTypes.SECONDARY}
+        size={BtnSizes.FULL}
+        onPress={() => {
+          forwardedRef.current?.close()
+        }}
+        text={t('swapScreen.transactionDetails.infoDismissButton')}
+        style={styles.bottomSheetButton}
+      />
+    </BottomSheet>
+  )
+}
+
 const styles = StyleSheet.create({
   safeAreaContainer: {
     flex: 1,
@@ -1042,4 +1095,7 @@ const styles = StyleSheet.create({
     ...typeScale.bodySmall,
     color: Colors.black,
   },
+  bottomSheetButton: {
+    marginTop: Spacing.Thick24,
+  },
 })