Updated on 2026-08-14

2023-06-01 23:35:17 +03:00 · 2023-06-01 23:35:17 +03:00 · 09907d00f6
commit 09907d00f6
parent 0196e56619
5 changed files with 220 additions and 69 deletions
--- a/app/src/main/java/com/tangem/tap/features/home/compose/StoriesScreen.kt
+++ b/app/src/main/java/com/tangem/tap/features/home/compose/StoriesScreen.kt
@ -5,29 +5,11 @@ package com.tangem.tap.features.home.compose
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.detectTapGestures
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.WindowInsets
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.heightIn
-import androidx.compose.foundation.layout.navigationBarsPadding
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.statusBars
-import androidx.compose.foundation.layout.union
-import androidx.compose.foundation.layout.windowInsetsPadding
+import androidx.compose.foundation.layout.*
 import androidx.compose.material.Button
 import androidx.compose.material.ButtonDefaults
 import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.MutableState
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
@ -43,20 +25,16 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
-import com.tangem.tap.features.home.compose.content.FirstStoriesContent
-import com.tangem.tap.features.home.compose.content.StoriesCurrencies
-import com.tangem.tap.features.home.compose.content.StoriesRevolutionaryWallet
-import com.tangem.tap.features.home.compose.content.StoriesUltraSecureBackup
-import com.tangem.tap.features.home.compose.content.StoriesWalletForEveryone
-import com.tangem.tap.features.home.compose.content.StoriesWeb3
+import com.tangem.core.ui.res.TangemTheme
+import com.tangem.feature.learn2earn.presentation.ui.OneInchStoriesContent
+import com.tangem.tap.features.home.compose.content.*
 import com.tangem.tap.features.home.compose.views.HomeButtons
 import com.tangem.tap.features.home.compose.views.StoriesProgressBar
 import com.tangem.tap.features.home.redux.HomeState
+import com.tangem.tap.features.home.redux.Stories
 import com.tangem.wallet.R
 import kotlin.math.max

-private const val STEPS = 6
-
@Suppress("LongMethod", "ComplexMethod")
@Composable
 fun StoriesScreen(
@ -65,16 +43,18 @@ fun StoriesScreen(
    onShopButtonClick: () -> Unit,
    onSearchTokensClick: () -> Unit,
 ) {
-    val currentStep = remember { mutableStateOf(1) }
    val systemUiController = rememberSystemUiController()
+    val state = homeState.value

-    val isDarkBackground = currentStep.value !in 3..5
+    var currentStory by remember { mutableStateOf(state.firstStory) }
+    val currentStep = { state.stepOf(currentStory) }

    val goToPreviousScreen = {
-        currentStep.value = max(1, currentStep.value - 1)
+        currentStory = state.stories[max(0, currentStep() - 1)]
    }
    val goToNextScreen = {
-        currentStep.value = if (currentStep.value < STEPS) currentStep.value + 1 else 1
+        currentStory =
+            if (currentStep() < state.stories.lastIndex) state.stories[currentStep() + 1] else state.firstStory
    }

    val isPressed = remember { mutableStateOf(false) }
@ -82,10 +62,10 @@ fun StoriesScreen(

    val hideContent = remember { mutableStateOf(true) }

-    LaunchedEffect(key1 = isDarkBackground) {
+    LaunchedEffect(key1 = currentStory.isDarkBackground) {
        systemUiController.setSystemBarsColor(
            color = Color.Transparent,
-            darkIcons = !isDarkBackground,
+            darkIcons = !currentStory.isDarkBackground,
        )
    }

@ -134,7 +114,7 @@ fun StoriesScreen(
                    },
            )
        }
-        if (!isDarkBackground) {
+        if (!currentStory.isDarkBackground) {
            Image(
                modifier = Modifier.fillMaxSize(),
                painter = painterResource(id = R.drawable.ic_overlay),
@ -154,9 +134,9 @@ fun StoriesScreen(
            verticalArrangement = Arrangement.Center,
        ) {
            StoriesProgressBar(
-                steps = STEPS,
-                currentStep = currentStep.value,
-                stepDuration = currentStep.duration(),
+                steps = state.stories.lastIndex,
+                currentStep = currentStep(),
+                stepDuration = currentStory.duration,
                paused = isPaused,
                onStepFinish = goToNextScreen,
            )
@ -169,15 +149,21 @@ fun StoriesScreen(
                    .height(17.dp)
                    .alpha(if (hideContent.value) 0f else 1f)
                    .align(Alignment.Start),
-                colorFilter = if (isDarkBackground) null else ColorFilter.tint(Color.Black),
+                colorFilter = if (currentStory.isDarkBackground) null else ColorFilter.tint(Color.Black),
            )
-            when (currentStep.value) {
-                1 -> FirstStoriesContent(isPaused, currentStep.duration()) { hideContent.value = it }
-                2 -> StoriesRevolutionaryWallet(currentStep.duration())
-                3 -> StoriesUltraSecureBackup(isPaused, currentStep.duration())
-                4 -> StoriesCurrencies(isPaused, currentStep.duration())
-                5 -> StoriesWeb3(isPaused, currentStep.duration())
-                6 -> StoriesWalletForEveryone(currentStep.duration())
+            when (currentStory) {
+                Stories.OneInchPromo -> {
+                    // TODO: fixme
+                    TangemTheme {
+                        OneInchStoriesContent({})
+                    }
+                }
+                Stories.TangemIntro -> FirstStoriesContent(isPaused, currentStory.duration) { hideContent.value = it }
+                Stories.RevolutionaryWallet -> StoriesRevolutionaryWallet(currentStory.duration)
+                Stories.UltraSecureBackup -> StoriesUltraSecureBackup(isPaused, currentStory.duration)
+                Stories.Currencies -> StoriesCurrencies(isPaused, currentStory.duration)
+                Stories.Web3 -> StoriesWeb3(isPaused, currentStory.duration)
+                Stories.WalletForEveryone -> StoriesWalletForEveryone(currentStory.duration)
            }
        }
        Column(
@ -186,7 +172,7 @@ fun StoriesScreen(
                .align(Alignment.BottomCenter)
                .fillMaxWidth(),
        ) {
-            if (currentStep.value == 4) {
+            if (currentStory == Stories.Currencies) {
                Button(
                    onClick = onSearchTokensClick,
                    modifier = Modifier
@ -210,25 +196,22 @@ fun StoriesScreen(
                    )
                }
            }
-            HomeButtons(
-                modifier = Modifier
-                    .padding(start = 16.dp, top = 0.dp, end = 16.dp, bottom = 37.dp)
-                    .fillMaxWidth(),
-                isDarkBackground = isDarkBackground,
-                btnScanStateInProgress = homeState.value.btnScanStateInProgress,
-                onScanButtonClick = onScanButtonClick,
-                onShopButtonClick = onShopButtonClick,
-            )
+
+            if (currentStory != Stories.OneInchPromo) {
+                HomeButtons(
+                    modifier = Modifier
+                        .padding(start = 16.dp, top = 0.dp, end = 16.dp, bottom = 37.dp)
+                        .fillMaxWidth(),
+                    isDarkBackground = currentStory.isDarkBackground,
+                    btnScanStateInProgress = homeState.value.btnScanStateInProgress,
+                    onScanButtonClick = onScanButtonClick,
+                    onShopButtonClick = onShopButtonClick,
+                )
+            }
        }
    }
 }

-@Suppress("MagicNumber")
-private fun MutableState<Int>.duration(): Int = when (this.value) {
-    1 -> 8000
-    else -> 6000
-}
-
@Preview
@Composable
 private fun StoriesScreenPreview() {
--- a/app/src/main/java/com/tangem/tap/features/home/compose/views/StoriesProgressBar.kt
+++ b/app/src/main/java/com/tangem/tap/features/home/compose/views/StoriesProgressBar.kt
@ -4,12 +4,7 @@ import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.LinearEasing
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
@ -52,7 +47,7 @@ fun StoriesProgressBar(
 //            .height()
            .padding(start = 9.dp, end = 9.dp, top = 16.dp),
    ) {
-        for (index in 1..steps) {
+        for (index in 0..steps) {
            Row(
                modifier = Modifier
                    .height(2.dp)
--- a/app/src/main/java/com/tangem/tap/features/home/redux/HomeState.kt
+++ b/app/src/main/java/com/tangem/tap/features/home/redux/HomeState.kt
@ -8,8 +8,38 @@ import org.rekotlin.StateType
 data class HomeState(
    val scanInProgress: Boolean = false,
    val btnScanState: IndeterminateProgressButton = IndeterminateProgressButton(ButtonState.ENABLED),
+    val stories: List<Stories> = initDefaultStories(),
 ) : StateType {

+    val firstStory: Stories = stories[0]
+
    val btnScanStateInProgress: Boolean
        get() = btnScanState.progressState == ProgressState.Loading
+
+    fun stepOf(story: Stories): Int = stories.indexOf(story)
+
+    companion object {
+        fun initDefaultStories(): List<Stories> = listOf(
+            Stories.OneInchPromo,
+            Stories.TangemIntro,
+            Stories.RevolutionaryWallet,
+            Stories.UltraSecureBackup,
+            Stories.Currencies,
+            Stories.Web3,
+            Stories.WalletForEveryone,
+        )
+    }
+}
+
+sealed class Stories(
+    val isDarkBackground: Boolean,
+    val duration: Int,
+) {
+    object OneInchPromo : Stories(true, duration = 8000)
+    object TangemIntro : Stories(true, duration = 8000)
+    object RevolutionaryWallet : Stories(true, duration = 6000)
+    object UltraSecureBackup : Stories(false, duration = 6000)
+    object Currencies : Stories(false, duration = 6000)
+    object Web3 : Stories(false, duration = 6000)
+    object WalletForEveryone : Stories(true, duration = 6000)
 }
--- a/features/learn2earn/impl/src/main/java/com/tangem/feature/learn2earn/presentation/ui/OneInchStoriesScreen.kt
+++ b/features/learn2earn/impl/src/main/java/com/tangem/feature/learn2earn/presentation/ui/OneInchStoriesScreen.kt
@ -0,0 +1,105 @@
+package com.tangem.feature.learn2earn.presentation.ui
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.tangem.core.ui.components.SecondaryButton
+import com.tangem.core.ui.components.SpacerH16
+import com.tangem.core.ui.components.SpacerH32
+import com.tangem.core.ui.res.TangemTheme
+import com.tangem.core.ui.res.TangemTypography
+import com.tangem.feature.learn2earn.impl.R
+import com.tangem.feature.learn2earn.presentation.ui.component.GradientCircle
+
+/**
+[REDACTED_AUTHOR]
+ */
+@Suppress("ReusedModifierInstance")
+@Composable
+fun OneInchStoriesContent(onLearnClick: () -> Unit, modifier: Modifier = Modifier) {
+    Box(modifier = modifier.fillMaxSize()) {
+        ContentBackground(
+            modifier = modifier
+                .fillMaxSize()
+                .align(Alignment.Center),
+        )
+        StoryDescription(
+            headerText = stringResource(id = R.string.story_learn_title),
+            bodyText = stringResource(id = R.string.story_learn_description),
+        )
+        Image(
+            modifier = Modifier
+                .padding(bottom = TangemTheme.dimens.size68)
+                .align(Alignment.BottomCenter),
+            painter = painterResource(id = R.drawable.img_1inch_logo_401_378),
+            contentDescription = null,
+        )
+        SecondaryButton(
+            modifier = Modifier
+                .padding(horizontal = TangemTheme.dimens.size16)
+                .padding(bottom = TangemTheme.dimens.size84)
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter),
+            text = stringResource(id = R.string.story_learn_learn),
+            onClick = onLearnClick,
+        )
+    }
+}
+
+@Suppress("MagicNumber")
+@Composable
+private fun ContentBackground(modifier: Modifier = Modifier) {
+    Box(modifier = modifier) {
+        GradientCircle(
+            size = 800.dp,
+            offsetX = (-220).dp,
+            offsetY = (-200).dp,
+            startColor = Color(0xCE164594),
+            endColor = Color(0x000B173D),
+        )
+        GradientCircle(
+            size = 800.dp,
+            offsetX = 200.dp,
+            offsetY = 290.dp,
+            startColor = Color(0xFF3D0230),
+            endColor = Color(0x000B0E17),
+        )
+    }
+}
+
+@Composable
+private fun StoryDescription(headerText: String, bodyText: String) {
+    Column(
+        modifier = Modifier
+            .padding(horizontal = TangemTheme.dimens.size40)
+            .fillMaxSize(),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Top,
+    ) {
+        SpacerH32()
+        Text(
+            text = headerText,
+            textAlign = TextAlign.Center,
+            style = TangemTheme.typography.h1.copy(
+                fontWeight = FontWeight.Bold,
+            ),
+            color = TangemTheme.colors.text.primary2,
+        )
+        SpacerH16()
+        Text(
+            text = bodyText,
+            textAlign = TextAlign.Center,
+            style = TangemTypography.subtitle1,
+            color = TangemTheme.colors.text.tertiary,
+        )
+    }
+}
--- a/features/learn2earn/impl/src/main/java/com/tangem/feature/learn2earn/presentation/ui/component/Gradient.kt
+++ b/features/learn2earn/impl/src/main/java/com/tangem/feature/learn2earn/presentation/ui/component/Gradient.kt
@ -0,0 +1,38 @@
+package com.tangem.feature.learn2earn.presentation.ui.component
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+
+/**
+[REDACTED_AUTHOR]
+ */
+@Composable
+internal fun GradientCircle(
+    size: Dp,
+    offsetX: Dp,
+    offsetY: Dp,
+    startColor: Color,
+    endColor: Color,
+    radius: Dp = size / 2,
+) {
+    Canvas(
+        modifier = Modifier
+            .size(size)
+            .offset(x = offsetX, y = offsetY),
+        onDraw = {
+            drawCircle(
+                radius = radius.toPx(),
+                brush = Brush.radialGradient(
+                    radius = radius.toPx(),
+                    colors = listOf(startColor, endColor),
+                ),
+            )
+        },
+    )
+}