bitkit-android/app/src/main/java/to/bitkit/ui/components/HwWalletComponents.kt at d53f2f91559c38b39805c4bb771501ca42bced13 · 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
package to.bitkit.ui.components

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.BoxWithConstraintsScope
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Icon
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.BlurredEdgeTreatment
import androidx.compose.ui.draw.blur
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import to.bitkit.R
import to.bitkit.models.TransportType
import to.bitkit.ui.theme.Colors

// Device illustration proportions, taken from the Figma hardware wallet frames.
private const val HW_DEVICE_IMAGE_SIZE_RATIO = 256f / 375f
private const val HW_DEVICE_TREZOR_BLEED_RATIO = 84f / 375f
private const val HW_DEVICE_LEDGER_BLEED_RATIO = 53f / 375f
private const val HW_DEVICE_STAGGER_RATIO = 12f / 375f

@Composable
fun HwDeviceIllustrations(modifier: Modifier = Modifier) {
    BoxWithConstraints(modifier) {
        val imageSize = maxWidth * HW_DEVICE_IMAGE_SIZE_RATIO
        val staggerY = maxWidth * HW_DEVICE_STAGGER_RATIO
        TrezorImage(imageSize = imageSize, staggerY = staggerY)
        LedgerImage(
            imageSize = imageSize,
            staggerY = staggerY,
            modifier = Modifier.blur(16.dp, BlurredEdgeTreatment.Unbounded)
        )
    }
}

@Composable
fun HwWalletConnectionIcon(
    transportType: TransportType,
    isConnected: Boolean,
    modifier: Modifier = Modifier,
) {
    val contentDescription = stringResource(
        id = when (transportType) {
            TransportType.BLUETOOTH -> if (isConnected) {
                R.string.hardware__connection_badge_connected_bluetooth
            } else {
                R.string.hardware__connection_badge_disconnected_bluetooth
            }
            TransportType.USB -> if (isConnected) {
                R.string.hardware__connection_badge_connected_usb
            } else {
                R.string.hardware__connection_badge_disconnected_usb
            }
        }
    )

    Icon(
        painter = painterResource(
            id = when (transportType) {
                TransportType.BLUETOOTH -> R.drawable.ic_bluetooth_connected
                TransportType.USB -> R.drawable.ic_usb_connected
            }
        ),
        contentDescription = contentDescription,
        tint = if (isConnected) Colors.Green else Colors.Gray1,
        modifier = modifier
    )
}

@Composable
private fun BoxWithConstraintsScope.TrezorImage(
    imageSize: Dp,
    staggerY: Dp,
    modifier: Modifier = Modifier,
) {
    Image(
        painter = painterResource(R.drawable.trezor),
        contentDescription = null,
        modifier = modifier
            .size(imageSize)
            .align(Alignment.CenterStart)
            .offset(x = -maxWidth * HW_DEVICE_TREZOR_BLEED_RATIO, y = staggerY)
    )
}

@Composable
private fun BoxWithConstraintsScope.LedgerImage(
    imageSize: Dp,
    staggerY: Dp,
    modifier: Modifier = Modifier,
) {
    Image(
        painter = painterResource(R.drawable.ledger),
        contentDescription = null,
        modifier = modifier
            .size(imageSize)
            .align(Alignment.CenterEnd)
            .offset(x = maxWidth * HW_DEVICE_LEDGER_BLEED_RATIO, y = -staggerY)
    )
}