Merge pull request #1235 from WalletConnect/fix/w3m/ui_improvements_r…

…eview2
WalletConnect · Nov 10, 2023 · 6fda2df · 6fda2df
2 parents 5bcf4f8 + 99cd6e6
commit 6fda2df
Show file tree

Hide file tree

Showing 36 changed files with 416 additions and 231 deletions.
diff --git a/...3modal/src/main/kotlin/com/walletconnect/web3/modal/ui/components/button/AccountButton.kt b/...3modal/src/main/kotlin/com/walletconnect/web3/modal/ui/components/button/AccountButton.kt
@@ -5,7 +5,9 @@ import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
@@ -117,30 +119,30 @@ private fun AccountButtonMixed(
             Box(
                 modifier = Modifier
                     .clickable(isEnabled) { onClick() }
+                    .border(width = 1.dp, color = borderColor, shape = CircleShape)
                     .height(40.dp)
                     .background(backgroundColor)
-                    .border(width = 1.dp, color = borderColor, shape = CircleShape)
             ) {
                 Row(
-                    modifier = Modifier
-                        .padding(start = 8.dp, end = 4.dp, top = 4.dp, bottom = 4.dp),
+                    modifier = Modifier.padding(start = 8.dp, end = 4.dp).fillMaxHeight(),
                     horizontalArrangement = Arrangement.Center,
                     verticalAlignment = Alignment.CenterVertically
                 ) {
                     CircleNetworkImage(data = chainImage.getImageData(), size = 24.dp, isEnabled = isEnabled)
-                    HorizontalSpacer(width = 6.dp)
+                    HorizontalSpacer(width = 4.dp)
                     Text(text = chainData, style = Web3ModalTheme.typo.paragraph600.copy(color = textColor))
                     HorizontalSpacer(width = 8.dp)
                     ImageButton(
                         text = address.toVisibleAddress(), image = {
                             Box(
                                 modifier = Modifier
-                                    .size(20.dp)
-                                    .border(width = 1.dp, color = Web3ModalTheme.colors.grayGlass05, shape = CircleShape)
-                                    .padding(1.dp)
+                                    .size(22.dp)
+                                    .border(width = 2.dp, color = Web3ModalTheme.colors.grayGlass05, shape = CircleShape)
+                                    .padding(2.dp)
                                     .background(brush = Brush.linearGradient(generateAvatarColors(address)), shape = CircleShape)
                             )
                         },
+                        paddingValues = PaddingValues(start = 4.dp, end = 8.dp),
                         isEnabled = isEnabled,
                         style = ButtonStyle.ACCOUNT,
                         size = ButtonSize.ACCOUNT_S,
@@ -154,19 +156,26 @@ private fun AccountButtonMixed(
 
 @Composable
 private fun AccountButtonNormal(
-    address: String, onClick: () -> Unit, isEnabled: Boolean = true
+    address: String,
+    onClick: () -> Unit,
+    isEnabled: Boolean = true
 ) {
     ProvideWeb3ModalThemeComposition {
         ImageButton(
             text = address.toVisibleAddress(), image = {
                 Box(
                     modifier = Modifier
-                        .size(20.dp)
-                        .border(width = 1.dp, color = Web3ModalTheme.colors.grayGlass05, shape = CircleShape)
-                        .padding(1.dp)
+                        .size(22.dp)
+                        .border(width = 2.dp, color = Web3ModalTheme.colors.grayGlass05, shape = CircleShape)
+                        .padding(2.dp)
                         .background(brush = Brush.linearGradient(generateAvatarColors(address)), shape = CircleShape)
                 )
-            }, isEnabled = isEnabled, style = ButtonStyle.ACCOUNT, size = ButtonSize.ACCOUNT_M, onClick = onClick
+            },
+            paddingValues = PaddingValues(start = 6.dp, end = 12.dp, top = 4.dp, bottom = 4.dp),
+            isEnabled = isEnabled,
+            style = ButtonStyle.ACCOUNT,
+            size = ButtonSize.ACCOUNT_S,
+            onClick = onClick
         )
     }
 }

diff --git a/...3modal/src/main/kotlin/com/walletconnect/web3/modal/ui/components/button/ConnectButton.kt b/...3modal/src/main/kotlin/com/walletconnect/web3/modal/ui/components/button/ConnectButton.kt
@@ -55,7 +55,7 @@ internal fun ConnectButton(
             ) {}
         } else {
             val text = when (size) {
-                ConnectButtonSize.NORMAL -> "Connect Wallet"
+                ConnectButtonSize.NORMAL -> "Connect wallet"
                 ConnectButtonSize.SMALL -> "Connect"
             }
             TextButton(

diff --git a/...al/src/main/kotlin/com/walletconnect/web3/modal/ui/components/internal/Web3ModalTopBar.kt b/...al/src/main/kotlin/com/walletconnect/web3/modal/ui/components/internal/Web3ModalTopBar.kt
@@ -24,7 +24,7 @@ internal fun Web3ModalTopBar(
 ) {
     Row(
         modifier = Modifier
-            .height(60.dp)
+            .height(64.dp)
             .fillMaxWidth()
             .padding(horizontal = 20.dp),
         verticalAlignment = Alignment.CenterVertically

diff --git a/...l/src/main/kotlin/com/walletconnect/web3/modal/ui/components/internal/commons/Dividers.kt b/...l/src/main/kotlin/com/walletconnect/web3/modal/ui/components/internal/commons/Dividers.kt
@@ -7,5 +7,5 @@ import com.walletconnect.web3.modal.ui.theme.Web3ModalTheme
 
 @Composable
 internal fun FullWidthDivider(modifier: Modifier = Modifier) {
-    Divider(color = Web3ModalTheme.colors.background.color125, modifier = modifier)
+    Divider(color = Web3ModalTheme.colors.grayGlass05, modifier = modifier)
 }
diff --git a/...modal/src/main/kotlin/com/walletconnect/web3/modal/ui/components/internal/commons/Help.kt b/...modal/src/main/kotlin/com/walletconnect/web3/modal/ui/components/internal/commons/Help.kt
@@ -31,9 +31,7 @@ internal fun HelpSection(
     assets: List<Int>
 ) {
     Column(
-        modifier = Modifier
-            .fillMaxWidth()
-            .padding(vertical = 8.dp),
+        modifier = Modifier.fillMaxWidth(),
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
         Row {
@@ -90,7 +88,7 @@ internal fun WhatIsNetworkLink(onClick: () -> Unit) {
             verticalAlignment = Alignment.CenterVertically
         ) {
             QuestionMarkIcon(tint = Web3ModalTheme.colors.accent100, modifier = Modifier.size(12.dp))
-            HorizontalSpacer(width = 6.dp)
+            HorizontalSpacer(width = 4.dp)
             Text(
                 text = "What is a network",
                 style = Web3ModalTheme.typo.small600.copy(color = Web3ModalTheme.colors.accent100)

diff --git a/...odal/src/main/kotlin/com/walletconnect/web3/modal/ui/components/internal/commons/Icons.kt b/...odal/src/main/kotlin/com/walletconnect/web3/modal/ui/components/internal/commons/Icons.kt
@@ -12,6 +12,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.walletconnect.modal.ui.components.common.roundedClickable
 import com.walletconnect.web3.modal.R
@@ -73,7 +74,7 @@ internal fun RetryIcon(
         imageVector = ImageVector.vectorResource(id = R.drawable.ic_retry),
         contentDescription = ContentDescription.RETRY.description,
         tint = tint,
-        modifier = Modifier.size(12.dp),
+        modifier = Modifier.size(14.dp),
     )
 }
 
@@ -97,19 +98,20 @@ internal fun WalletIcon(
     Icon(
         imageVector = ImageVector.vectorResource(id = R.drawable.ic_wallet),
         contentDescription = ContentDescription.WALLET.description,
-        modifier = Modifier.size(14.dp),
+        modifier = Modifier.size(12.dp),
         tint = tint
     )
 }
 
 @Composable
 internal fun ExternalIcon(
-    tint: Color = Web3ModalTheme.colors.foreground.color200
+    tint: Color = Web3ModalTheme.colors.foreground.color200,
+    size: Dp = 12.dp,
 ) {
     Icon(
         imageVector = ImageVector.vectorResource(id = R.drawable.ic_external_link),
         contentDescription = ContentDescription.EXTERNAL_LINK.description,
-        modifier = Modifier.size(12.dp),
+        modifier = Modifier.size(size),
         tint = tint
     )
 }
@@ -159,9 +161,10 @@ internal fun RecentTransactionIcon(
         imageVector = ImageVector.vectorResource(id = R.drawable.ic_swap),
         contentDescription = ContentDescription.SWAP.description,
         modifier = Modifier
+            .border(2.dp, Web3ModalTheme.colors.grayGlass02, shape = CircleShape)
+            .padding(2.dp)
             .size(32.dp)
             .background(Web3ModalTheme.colors.grayGlass10, shape = CircleShape)
-            .border(2.dp, Web3ModalTheme.colors.grayGlass02, shape = CircleShape)
             .padding(8.dp),
         tint = tint
     )
@@ -175,9 +178,10 @@ internal fun DisconnectIcon(
         imageVector = ImageVector.vectorResource(id = R.drawable.ic_disconnect),
         contentDescription = ContentDescription.DISCONNECT.description,
         modifier = Modifier
+            .border(2.dp, Web3ModalTheme.colors.grayGlass05, shape = CircleShape)
+            .padding(2.dp)
             .size(32.dp)
             .background(Web3ModalTheme.colors.grayGlass10, shape = CircleShape)
-            .border(2.dp, Web3ModalTheme.colors.grayGlass05, shape = CircleShape)
             .padding(8.dp),
         tint = tint
     )
@@ -271,7 +275,7 @@ internal fun WebIcon(
     tint: Color = Web3ModalTheme.colors.inverse100
 ) {
     Icon(
-        imageVector = ImageVector.vectorResource(id = R.drawable.ic_web),
+        imageVector = ImageVector.vectorResource(id = R.drawable.ic_browser),
         contentDescription = ContentDescription.WEB.description,
         tint = tint,
         modifier = Modifier.size(12.dp),
@@ -283,7 +287,7 @@ internal fun ForwardIcon(
     tint: Color = Web3ModalTheme.colors.inverse100
 ) {
     Icon(
-        imageVector = ImageVector.vectorResource(id = R.drawable.ic_forward_chevron),
+        imageVector = ImageVector.vectorResource(id = R.drawable.ic_chevron_right),
         contentDescription = ContentDescription.FORWARD_ARROW.description,
         tint = tint,
         modifier = Modifier.size(12.dp),

diff --git a/...src/main/kotlin/com/walletconnect/web3/modal/ui/components/internal/commons/ListSelect.kt b/...src/main/kotlin/com/walletconnect/web3/modal/ui/components/internal/commons/ListSelect.kt
@@ -74,6 +74,7 @@ internal fun ListSelectRow(
 private fun ListSelectRowPreview() {
     MultipleComponentsPreview(
         { ListSelectRow(startIcon = { WalletConnectLogo(it) }, text = "WalletConnect") {} },
-        { ListSelectRow(startIcon = { WalletConnectLogo(it) }, text = "WalletConnect", isEnabled = false) {} }
+        { ListSelectRow(startIcon = { WalletConnectLogo(it) }, text = "WalletConnect", isEnabled = false) {} },
+        { ListSelectRow(startIcon = { WalletConnectLogo(it) }, text = "WalletConnect", label = { InstalledLabel() }) {} },
     )
 }
diff --git a/...al/src/main/kotlin/com/walletconnect/web3/modal/ui/components/internal/commons/Wallets.kt b/...al/src/main/kotlin/com/walletconnect/web3/modal/ui/components/internal/commons/Wallets.kt
@@ -18,6 +18,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
@@ -100,7 +101,7 @@ internal fun WalletGridItem(
     onWalletItemClick: (Wallet) -> Unit
 ) {
     TransparentSurface(
-        modifier = Modifier.padding(4.dp),
+        modifier = Modifier.padding(2.dp),
         shape = RoundedCornerShape(16.dp)
     ) {
         Column(
@@ -115,7 +116,7 @@ internal fun WalletGridItem(
             WalletImage(
                 url = wallet.imageUrl,
                 modifier = Modifier
-                    .size(54.dp)
+                    .size(56.dp)
                     .clip(RoundedCornerShape(16.dp))
                     .border(width = 1.dp, color = Web3ModalTheme.colors.grayGlass10, shape = RoundedCornerShape(16.dp))
             )

diff --git a/.../main/kotlin/com/walletconnect/web3/modal/ui/components/internal/commons/button/Button.kt b/.../main/kotlin/com/walletconnect/web3/modal/ui/components/internal/commons/button/Button.kt
@@ -4,6 +4,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxHeight
@@ -22,9 +23,11 @@ import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import androidx.compose.ui.unit.dp
 import com.walletconnect.web3.modal.ui.components.internal.commons.HorizontalSpacer
 import com.walletconnect.web3.modal.ui.components.internal.commons.RetryIcon
+import com.walletconnect.web3.modal.ui.components.internal.commons.WalletIcon
 import com.walletconnect.web3.modal.ui.previews.ComponentPreview
 import com.walletconnect.web3.modal.ui.previews.MultipleComponentsPreview
 import com.walletconnect.web3.modal.ui.previews.UiModePreview
+import com.walletconnect.web3.modal.ui.theme.Web3ModalTheme
 
 @Composable
 internal fun TryAgainButton(
@@ -37,6 +40,7 @@ internal fun TryAgainButton(
         image = { RetryIcon(it) },
         style = style,
         size = size,
+        paddingValues = PaddingValues(start = 12.dp, top = 8.dp, bottom = 8.dp, end = 16.dp),
         onClick = onClick
     )
 }
@@ -47,13 +51,35 @@ internal fun ImageButton(
     image: @Composable (Color) -> Unit,
     style: ButtonStyle,
     size: ButtonSize,
+    paddingValues: PaddingValues? = null,
     isEnabled: Boolean = true,
-    onClick: () -> Unit,
+    onClick: (() -> Unit)? = null
 ) {
-    StyledButton(style = style, size = size, isEnabled = isEnabled, onClick = onClick) {
-        image(it.tint)
-        HorizontalSpacer(width = 4.dp)
-        Text(text = text, style = it.textStyle, modifier = Modifier.fillMaxHeight())
+    val backgroundColor = style.getBackgroundColor(isEnabled)
+    val borderColor = style.getBorder(isEnabled)
+    val tint = style.getTextColor(isEnabled)
+    val textStyle = size.getTextStyle().copy(color = tint)
+    val isClickEnabled = isEnabled && style != ButtonStyle.LOADING
+    val height = size.getHeight()
+
+    Surface(
+        color = Color.Transparent,
+        shape = RoundedCornerShape(100)
+    ) {
+        Row(
+            modifier = Modifier
+                .height(height)
+                .clickable(isClickEnabled) { onClick?.invoke() }
+                .border(width = 1.dp, color = borderColor, shape = RoundedCornerShape(100))
+                .background(backgroundColor)
+                .padding(paddingValues ?: size.getContentPadding()),
+            horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            image(tint)
+            HorizontalSpacer(width = 4.dp)
+            Text(text = text, style = textStyle)
+        }
     }
 }
 

diff --git a/.../kotlin/com/walletconnect/web3/modal/ui/components/internal/commons/button/ButtonStyle.kt b/.../kotlin/com/walletconnect/web3/modal/ui/components/internal/commons/button/ButtonStyle.kt
@@ -27,10 +27,10 @@ internal fun ButtonSize.getTextStyle() = when (this) {
 
 @Composable
 internal fun ButtonSize.getContentPadding() = when (this) {
-    ButtonSize.M -> PaddingValues(horizontal = 16.dp, vertical = 8.dp)
-    ButtonSize.S -> PaddingValues(horizontal = 12.dp, vertical = 6.dp)
-    ButtonSize.ACCOUNT_M -> PaddingValues(start = 8.dp, end = 12.dp, top = 8.dp, bottom = 8.dp)
-    ButtonSize.ACCOUNT_S -> PaddingValues(start = 6.dp, end = 12.dp, top = 5.dp, bottom = 5.dp)
+    ButtonSize.M -> PaddingValues(horizontal = 16.dp)
+    ButtonSize.S -> PaddingValues(horizontal = 12.dp)
+    ButtonSize.ACCOUNT_M -> PaddingValues(start = 8.dp, end = 12.dp)
+    ButtonSize.ACCOUNT_S -> PaddingValues(start = 6.dp, end = 12.dp)
 }
 
 @Composable

diff --git a/...n/kotlin/com/walletconnect/web3/modal/ui/components/internal/commons/button/ChipButton.kt b/...n/kotlin/com/walletconnect/web3/modal/ui/components/internal/commons/button/ChipButton.kt
@@ -1,7 +1,21 @@
 package com.walletconnect.web3.modal.ui.components.internal.commons.button
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Surface
 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.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
@@ -19,20 +33,37 @@ internal fun ChipButton(
     endIcon: @Composable (Color) -> Unit,
     style: ButtonStyle,
     size: ButtonSize,
+    paddingValues: PaddingValues? = null,
     isEnabled: Boolean = true,
     onClick: () -> Unit
 ) {
-    StyledButton(
-        style = style,
-        size = size,
-        isEnabled = isEnabled,
-        onClick = onClick
-    ) { buttonData ->
-        startIcon(buttonData.tint)
-        HorizontalSpacer(width = 4.dp)
-        Text(text = text, style = buttonData.textStyle)
-        HorizontalSpacer(width = 4.dp)
-        endIcon(buttonData.tint)
+    val backgroundColor = style.getBackgroundColor(isEnabled)
+    val borderColor = style.getBorder(isEnabled)
+    val tint = style.getTextColor(isEnabled)
+    val textStyle = size.getTextStyle().copy(color = tint)
+    val isClickEnabled = isEnabled && style != ButtonStyle.LOADING
+    val height = size.getHeight()
+
+    Surface(
+        color = Color.Transparent,
+        shape = RoundedCornerShape(100)
+    ) {
+        Row(
+            modifier = Modifier
+                .height(height)
+                .clickable(isClickEnabled) { onClick() }
+                .border(width = 1.dp, color = borderColor, shape = RoundedCornerShape(100))
+                .background(backgroundColor)
+                .padding(paddingValues ?: size.getContentPadding()),
+            horizontalArrangement = Arrangement.Center,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            startIcon(tint)
+            HorizontalSpacer(width = 4.dp)
+            Text(text = text, style = textStyle)
+            HorizontalSpacer(width = 4.dp)
+            endIcon(tint)
+        }
     }
 }