bitkit-android/app/src/main/java/to/bitkit/ui/components/MnemonicWordsGrid.kt at 2c0b8038091af96e7fe791ad1db5fa2fbfd98c8c · synonymdev/bitkit-android · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
package to.bitkit.ui.components

import androidx.compose.animation.Crossfade
import androidx.compose.animation.core.EaseOutQuart
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.tween
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.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.BlurredEdgeTreatment
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.blur
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import to.bitkit.ui.theme.AppThemeSurface
import to.bitkit.ui.theme.Colors

@Composable
fun MnemonicWordsGrid(
    actualWords: List<String>,
    showMnemonic: Boolean,
    modifier: Modifier = Modifier,
    blurDurationMs: Int = 800,
    crossfadeDurationMs: Int = 600,
) {
    val placeholderWords = remember(actualWords) { List(actualWords.size) { "secret" } }
    val blurRadius by animateFloatAsState(
        targetValue = if (showMnemonic) 0f else 10f,
        animationSpec = tween(blurDurationMs, easing = EaseOutQuart),
        label = "blurRadius"
    )
    Box(
        modifier = modifier
            .fillMaxWidth()
            .blur(radius = blurRadius.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded)
            .alpha(alpha = 1f - blurRadius * 0.075f)
    ) {
        Crossfade(
            targetState = showMnemonic,
            animationSpec = tween(crossfadeDurationMs),
            label = "crossfade",
        ) { isRevealed ->
            val wordsShown = if (isRevealed && actualWords.isNotEmpty()) actualWords else placeholderWords
            val half = wordsShown.size / 2

            Row(
                horizontalArrangement = Arrangement.spacedBy(32.dp),
                modifier = Modifier.fillMaxWidth()
            ) {
                Column(
                    verticalArrangement = Arrangement.spacedBy(8.dp),
                    modifier = Modifier.weight(1f)
                ) {
                    wordsShown.take(half).forEachIndexed { index, word ->
                        WordItem(
                            number = index + 1,
                            word = word,
                        )
                    }
                }
                Column(
                    verticalArrangement = Arrangement.spacedBy(8.dp),
                    modifier = Modifier.weight(1f)
                ) {
                    wordsShown.drop(half).forEachIndexed { index, word ->
                        WordItem(
                            number = half + index + 1,
                            word = word,
                        )
                    }
                }
            }
        }
    }
}

@Composable
private fun WordItem(
    number: Int,
    word: String,
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
    ) {
        BodyMSB(text = "$number.", color = Colors.White64)
        HorizontalSpacer(8.dp)
        BodyMSB(text = word, color = Colors.White)
    }
}

private val previewWords = List(8) { "word${it + 1}" }

@Preview
@Composable
private fun Preview() {
    AppThemeSurface {
        MnemonicWordsGrid(
            actualWords = previewWords,
            showMnemonic = true,
        )
    }
}

@Preview
@Composable
private fun PreviewHidden() {
    AppThemeSurface {
        MnemonicWordsGrid(
            actualWords = previewWords,
            showMnemonic = false,
        )
    }
}