Updated on 2026-08-14

common/ui/src/main/java/com/tangem/common/ui/swapStoriesScreen/SwapStoriesUM.kt

@@ -1,5 +1,6 @@
 package com.tangem.common.ui.swapStoriesScreen
 
+import com.tangem.core.ui.components.stories.inner.STORY_DURATION
 import com.tangem.core.ui.components.stories.model.StoriesContentConfig
 import com.tangem.core.ui.components.stories.model.StoryConfig
 import com.tangem.core.ui.extensions.TextReference
@@ -20,7 +21,7 @@ sealed class SwapStoriesUM {
             val title: TextReference,
             val subtitle: TextReference,
         ) : StoryConfig {
-            override val duration: Int = 2000
+            override val duration: Int = STORY_DURATION
         }
     }
 }

core/ui/src/main/java/com/tangem/core/ui/components/stories/StoriesContainer.kt

@@ -1,22 +1,31 @@
 package com.tangem.core.ui.components.stories
 
 import android.content.res.Configuration
+import androidx.compose.foundation.LocalIndication
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.tangem.core.ui.R
 import com.tangem.core.ui.components.stories.inner.StoriesClickableArea
 import com.tangem.core.ui.components.stories.inner.StoriesProgressBar
 import com.tangem.core.ui.components.stories.inner.StoriesStepStateMachine
 import com.tangem.core.ui.components.stories.model.StoriesContentConfig
 import com.tangem.core.ui.components.stories.model.StoryConfig
 import com.tangem.core.ui.res.TangemColorPalette
+import com.tangem.core.ui.res.TangemTheme
 import com.tangem.core.ui.res.TangemThemePreview
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.persistentListOf
@@ -62,17 +71,36 @@ inline fun <reified T : StoryConfig> StoriesContainer(
 
         currentStoryContent(storyState.currentStory, isPaused)
 
-        StoriesProgressBar(
+        Column(
-            steps = storyState.steps,
+            modifier = Modifier.statusBarsPadding(),
-            currentStep = storyState.currentIndex.intValue,
+        ) {
-            stepDuration = storyState.currentStory.duration,
+            StoriesProgressBar(
-            paused = isPaused,
+                steps = storyState.steps,
-            onStepFinish = {
+                currentStep = storyState.currentIndex.intValue,
-                if (storyState.nextStory()) {
+                stepDuration = storyState.currentStory.duration,
-                    config.onClose()
+                paused = isPaused,
-                }
+                onStepFinish = {
-            },
+                    if (storyState.nextStory()) {
-        )
+                        config.onClose()
+                    }
+                },
+            )
+            Icon(
+                painter = rememberVectorPainter(
+                    image = ImageVector.vectorResource(R.drawable.ic_close_24),
+                ),
+                tint = TangemTheme.colors.icon.constant,
+                contentDescription = null,
+                modifier = Modifier
+                    .align(Alignment.End)
+                    .padding(top = 14.dp, end = 16.dp)
+                    .clickable(
+                        interactionSource = remember { MutableInteractionSource() },
+                        indication = LocalIndication.current,
+                        onClick = config.onClose,
+                    ),
+            )
+        }
     }
 }
 

core/ui/src/main/java/com/tangem/core/ui/components/stories/inner/StoriesProgressBar.kt

@@ -80,7 +80,6 @@ fun StoriesProgressBar(
     Row(
         verticalAlignment = Alignment.CenterVertically,
         modifier = Modifier
-            .statusBarsPadding()
             .padding(
                 start = 16.dp,
                 end = 16.dp,

features/stories/impl/src/main/java/com/tangem/feature/stories/impl/model/StoriesModel.kt

@@ -35,9 +35,11 @@ internal class StoriesModel @Inject constructor(
         initStories()
     }
 
-    private fun openScreen() {
+    private fun openScreen(hideStories: Boolean = true) {
         modelScope.launch {
-            shouldShowSwapStoriesUseCase.neverToShow()
+            if (hideStories) {
+                shouldShowSwapStoriesUseCase.neverToShow()
+            }
             router.pop()
             router.push(params.nextScreen)
         }
@@ -48,7 +50,7 @@ internal class StoriesModel @Inject constructor(
             getStoryContentUseCase(params.storyId).fold(
                 ifLeft = {
                     Timber.e("Unable to load stories for ${StoryContentIds.STORY_FIRST_TIME_SWAP.id}")
-                    openScreen() // Fallback to target screen
+                    openScreen(hideStories = false) // Fallback to target screen
                 },
                 ifRight = { swapStory ->
                     _state.update {