Merge branch 'develop' into fix/w3m/nested_scroll_fix

WalletConnect · Jan 15, 2024 · e7e0374 · e7e0374
2 parents dee0f17 + fc993c5
commit e7e0374
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 17 deletions.
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
@@ -4,22 +4,28 @@ 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.Box
+import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.grid.LazyGridScope
 import androidx.compose.foundation.lazy.grid.itemsIndexed
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Icon
 import androidx.compose.material.Text
 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.graphics.vector.ImageVector
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
@@ -95,6 +101,24 @@ internal fun WalletImage(url: String, isEnabled: Boolean = true, modifier: Modif
     )
 }
 
+@Composable
+internal fun BoxScope.InstalledWalletIcon() {
+    Icon(
+        modifier = Modifier
+            .offset(x = 2.dp, y = 2.dp)
+            .background(Web3ModalTheme.colors.background.color125, shape = CircleShape)
+            .align(Alignment.BottomEnd)
+            .background(Web3ModalTheme.colors.grayGlass02, shape = CircleShape)
+            .padding(2.dp)
+            .size(12.dp)
+            .background(Web3ModalTheme.colors.success.copy(0.15f), shape = CircleShape)
+            .padding(2.dp),
+        imageVector = ImageVector.vectorResource(id = R.drawable.ic_check),
+        contentDescription = "WalletConnectLogo",
+        tint = Web3ModalTheme.colors.success
+    )
+}
+
 @Composable
 internal fun WalletGridItem(
     wallet: Wallet,
@@ -113,13 +137,18 @@ internal fun WalletGridItem(
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center
         ) {
-            WalletImage(
-                url = wallet.imageUrl,
-                modifier = Modifier
-                    .size(56.dp)
-                    .clip(RoundedCornerShape(16.dp))
-                    .border(width = 1.dp, color = Web3ModalTheme.colors.grayGlass10, shape = RoundedCornerShape(16.dp))
-            )
+            Box {
+                WalletImage(
+                    url = wallet.imageUrl,
+                    modifier = Modifier
+                        .size(56.dp)
+                        .clip(RoundedCornerShape(16.dp))
+                        .border(width = 1.dp, color = Web3ModalTheme.colors.grayGlass10, shape = RoundedCornerShape(16.dp))
+                )
+                if (wallet.isWalletInstalled) {
+                    InstalledWalletIcon()
+                }
+            }
             VerticalSpacer(height = 8.dp)
             Text(
                 text = wallet.name,

diff --git a/product/web3modal/src/main/kotlin/com/walletconnect/web3/modal/ui/previews/PreviewData.kt b/product/web3modal/src/main/kotlin/com/walletconnect/web3/modal/ui/previews/PreviewData.kt
@@ -6,9 +6,9 @@ import com.walletconnect.web3.modal.domain.model.AccountData
 import com.walletconnect.web3.modal.client.Modal
 
 private val metaMask: Wallet
-    get() = Wallet(id = "1", name = "MetaMask", homePage = "", order = "", imageUrl = "", mobileLink = "metamask://", webAppLink = "", playStore = "")
+    get() = Wallet(id = "1", name = "MetaMask", homePage = "", order = "", imageUrl = "", mobileLink = "metamask://", webAppLink = "", playStore = "").apply { isRecent = true }
 private val trustWallet: Wallet
-    get() = Wallet(id = "2", name = "Trust Wallet", homePage = "", order = "", imageUrl = "", mobileLink = "trustwallet://", webAppLink = "",playStore = "")
+    get() = Wallet(id = "2", name = "Trust Wallet", homePage = "", order = "", imageUrl = "", mobileLink = "trustwallet://", webAppLink = "",playStore = "").apply { isWalletInstalled = true }
 private val safe: Wallet
     get() = Wallet(id = "3", name = "Safe", homePage = "", order = "", imageUrl = "", mobileLink = "safe://", webAppLink = "", playStore = "")
 private val rainbow: Wallet

diff --git a/...otlin/com/walletconnect/web3/modal/ui/routes/connect/connect_wallet/ConnectWalletRoute.kt b/...otlin/com/walletconnect/web3/modal/ui/routes/connect/connect_wallet/ConnectWalletRoute.kt
@@ -12,6 +12,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import com.walletconnect.android.internal.common.modal.data.model.Wallet
 import com.walletconnect.web3.modal.ui.components.internal.ErrorModalState
+import com.walletconnect.web3.modal.ui.components.internal.commons.InstalledWalletIcon
 import com.walletconnect.web3.modal.ui.components.internal.commons.ListSelectRow
 import com.walletconnect.web3.modal.ui.components.internal.commons.RecentLabel
 import com.walletconnect.web3.modal.ui.components.internal.commons.WalletImage
@@ -92,13 +93,18 @@ private fun WalletListSelect(item: Wallet, onWalletItemClick: (Wallet) -> Unit)
 
     ListSelectRow(
         startIcon = {
-            WalletImage(
-                url = item.imageUrl,
-                modifier = Modifier
-                    .size(40.dp)
-                    .border(width = 1.dp, color = Web3ModalTheme.colors.grayGlass10, shape = RoundedCornerShape(12.dp))
-                    .clip(RoundedCornerShape(12.dp))
-            )
+            Box {
+                WalletImage(
+                    url = item.imageUrl,
+                    modifier = Modifier
+                        .size(40.dp)
+                        .border(width = 1.dp, color = Web3ModalTheme.colors.grayGlass10, shape = RoundedCornerShape(12.dp))
+                        .clip(RoundedCornerShape(12.dp))
+                )
+                if (item.isWalletInstalled) {
+                    InstalledWalletIcon()
+                }
+            }
         },
         text = item.name,
         onClick = { onWalletItemClick(item) },

diff --git a/product/web3modal/src/main/res/drawable/ic_check.xml b/product/web3modal/src/main/res/drawable/ic_check.xml
@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="14dp"
+    android:height="14dp"
+    android:viewportWidth="14"
+    android:viewportHeight="14">
+  <path
+      android:pathData="M12.293,2.734C12.716,3.089 12.772,3.719 12.417,4.143L6.546,11.143C6.366,11.357 6.104,11.486 5.824,11.499C5.545,11.512 5.272,11.406 5.074,11.208L1.644,7.791C1.252,7.402 1.251,6.768 1.641,6.377C2.031,5.986 2.664,5.985 3.055,6.374L5.714,9.023L10.884,2.857C11.239,2.434 11.87,2.379 12.293,2.734Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+</vector>