Verification: migrate to Epoxy - Emoji Fragment

vector/src/main/java/im/vector/riotx/core/di/FragmentModule.kt

@@ -23,9 +23,9 @@ import dagger.Binds
 import dagger.Module
 import dagger.multibindings.IntoMap
 import im.vector.riotx.features.crypto.keysbackup.settings.KeysBackupSettingsFragment
-import im.vector.riotx.features.crypto.verification.SASVerificationCodeFragment
 import im.vector.riotx.features.crypto.verification.VerificationChooseMethodFragment
 import im.vector.riotx.features.crypto.verification.VerificationConclusionFragment
+import im.vector.riotx.features.crypto.verification.VerificationEmojiCodeFragment
 import im.vector.riotx.features.crypto.verification.VerificationRequestFragment
 import im.vector.riotx.features.home.HomeDetailFragment
 import im.vector.riotx.features.home.HomeDrawerFragment
@@ -285,15 +285,15 @@ interface FragmentModule {
     @Binds
     @IntoMap
     @FragmentKey(VerificationChooseMethodFragment::class)
-    fun bindVerificationMethodChooserFragment(fragment: VerificationChooseMethodFragment): Fragment
+    fun bindVerificationChooseMethodFragment(fragment: VerificationChooseMethodFragment): Fragment
 
     @Binds
     @IntoMap
-    @FragmentKey(SASVerificationCodeFragment::class)
+    @FragmentKey(VerificationEmojiCodeFragment::class)
-    fun bindVerificationSasCodeFragment(fragment: SASVerificationCodeFragment): Fragment
+    fun bindVerificationEmojiCodeFragment(fragment: VerificationEmojiCodeFragment): Fragment
 
     @Binds
     @IntoMap
     @FragmentKey(VerificationConclusionFragment::class)
-    fun bindVerificationSasConclusionFragment(fragment: VerificationConclusionFragment): Fragment
+    fun bindVerificationConclusionFragment(fragment: VerificationConclusionFragment): Fragment
 }

vector/src/main/java/im/vector/riotx/core/epoxy/ErrorWithRetryItem.kt

@@ -18,6 +18,7 @@ package im.vector.riotx.core.epoxy
 
 import android.widget.Button
 import android.widget.TextView
+import androidx.core.view.isVisible
 import com.airbnb.epoxy.EpoxyAttribute
 import com.airbnb.epoxy.EpoxyModelClass
 import im.vector.riotx.R
@@ -33,6 +34,7 @@ abstract class ErrorWithRetryItem : VectorEpoxyModel<ErrorWithRetryItem.Holder>(
 
     override fun bind(holder: Holder) {
         holder.textView.text = text
+        holder.buttonView.isVisible = listener != null
         holder.buttonView.setOnClickListener { listener?.invoke() }
     }
 

vector/src/main/java/im/vector/riotx/features/crypto/verification/SASVerificationCodeFragment.kt

@@ -1,162 +0,0 @@
-/*
- * Copyright 2019 New Vector Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-package im.vector.riotx.features.crypto.verification
-
-import android.view.ViewGroup
-import android.widget.TextView
-import androidx.core.view.isInvisible
-import androidx.core.view.isVisible
-import butterknife.BindView
-import butterknife.OnClick
-import com.airbnb.mvrx.*
-import im.vector.riotx.R
-import im.vector.riotx.core.platform.VectorBaseFragment
-import kotlinx.android.synthetic.main.fragment_verification_sas_code.*
-import javax.inject.Inject
-
-class SASVerificationCodeFragment @Inject constructor(
-        val viewModelFactory: SASVerificationCodeViewModel.Factory
-) : VectorBaseFragment() {
-
-    override fun getLayoutResId() = R.layout.fragment_verification_sas_code
-
-    @BindView(R.id.sas_emoji_grid)
-    lateinit var emojiGrid: ViewGroup
-
-    @BindView(R.id.itemVerificationDecimalCode)
-    lateinit var decimalTextView: TextView
-
-    @BindView(R.id.emoji0)
-    lateinit var emoji0View: ViewGroup
-    @BindView(R.id.emoji1)
-    lateinit var emoji1View: ViewGroup
-    @BindView(R.id.emoji2)
-    lateinit var emoji2View: ViewGroup
-    @BindView(R.id.emoji3)
-    lateinit var emoji3View: ViewGroup
-    @BindView(R.id.emoji4)
-    lateinit var emoji4View: ViewGroup
-    @BindView(R.id.emoji5)
-    lateinit var emoji5View: ViewGroup
-    @BindView(R.id.emoji6)
-    lateinit var emoji6View: ViewGroup
-
-    private val viewModel by fragmentViewModel(SASVerificationCodeViewModel::class)
-
-    private val sharedViewModel by parentFragmentViewModel(VerificationBottomSheetViewModel::class)
-
-    override fun invalidate() = withState(viewModel) { state ->
-
-        if (state.supportsEmoji) {
-            decimalTextView.isVisible = false
-            when (val emojiDescription = state.emojiDescription) {
-                is Success -> {
-                    sasLoadingProgress.isVisible = false
-                    emojiGrid.isVisible = true
-                    ButtonsVisibilityGroup.isVisible = true
-                    emojiDescription.invoke().forEachIndexed { index, emojiRepresentation ->
-                        when (index) {
-                            0 -> {
-                                emoji0View.findViewById<TextView>(R.id.item_emoji_tv).text = emojiRepresentation.emoji
-                                emoji0View.findViewById<TextView>(R.id.item_emoji_name_tv).setText(emojiRepresentation.nameResId)
-                            }
-                            1 -> {
-                                emoji1View.findViewById<TextView>(R.id.item_emoji_tv).text = emojiRepresentation.emoji
-                                emoji1View.findViewById<TextView>(R.id.item_emoji_name_tv).setText(emojiRepresentation.nameResId)
-                            }
-                            2 -> {
-                                emoji2View.findViewById<TextView>(R.id.item_emoji_tv).text = emojiRepresentation.emoji
-                                emoji2View.findViewById<TextView>(R.id.item_emoji_name_tv).setText(emojiRepresentation.nameResId)
-                            }
-                            3 -> {
-                                emoji3View.findViewById<TextView>(R.id.item_emoji_tv).text = emojiRepresentation.emoji
-                                emoji3View.findViewById<TextView>(R.id.item_emoji_name_tv)?.setText(emojiRepresentation.nameResId)
-                            }
-                            4 -> {
-                                emoji4View.findViewById<TextView>(R.id.item_emoji_tv).text = emojiRepresentation.emoji
-                                emoji4View.findViewById<TextView>(R.id.item_emoji_name_tv).setText(emojiRepresentation.nameResId)
-                            }
-                            5 -> {
-                                emoji5View.findViewById<TextView>(R.id.item_emoji_tv).text = emojiRepresentation.emoji
-                                emoji5View.findViewById<TextView>(R.id.item_emoji_name_tv).setText(emojiRepresentation.nameResId)
-                            }
-                            6 -> {
-                                emoji6View.findViewById<TextView>(R.id.item_emoji_tv).text = emojiRepresentation.emoji
-                                emoji6View.findViewById<TextView>(R.id.item_emoji_name_tv).setText(emojiRepresentation.nameResId)
-                            }
-                        }
-                    }
-
-                    if (state.isWaitingFromOther) {
-                        // hide buttons
-                        ButtonsVisibilityGroup.isInvisible = true
-                        sasCodeWaitingPartnerText.isVisible = true
-                    } else {
-                        ButtonsVisibilityGroup.isVisible = true
-                        sasCodeWaitingPartnerText.isVisible = false
-                    }
-                }
-                is Fail    -> {
-                    sasLoadingProgress.isVisible = false
-                    emojiGrid.isInvisible = true
-                    ButtonsVisibilityGroup.isInvisible = true
-                    // TODO?
-                }
-                else       -> {
-                    sasLoadingProgress.isVisible = true
-                    emojiGrid.isInvisible = true
-                    ButtonsVisibilityGroup.isInvisible = true
-                }
-            }
-        } else {
-            // Decimal
-            emojiGrid.isInvisible = true
-            decimalTextView.isVisible = true
-            val decimalCode = state.decimalDescription.invoke()
-            decimalTextView.text = decimalCode
-
-            // TODO
-            if (state.isWaitingFromOther) {
-                // hide buttons
-                ButtonsVisibilityGroup.isInvisible = true
-                sasCodeWaitingPartnerText.isVisible = true
-            } else {
-                ButtonsVisibilityGroup.isVisible = decimalCode != null
-                sasCodeWaitingPartnerText.isVisible = false
-            }
-        }
-    }
-
-    @OnClick(R.id.sas_request_continue_button)
-    fun onMatchButtonTapped() = withState(viewModel) { state ->
-        val otherUserId = state.otherUser?.id ?: return@withState
-        val txId = state.transactionId ?: return@withState
-        // UX echo
-        ButtonsVisibilityGroup.isInvisible = true
-        sasCodeWaitingPartnerText.isVisible = true
-        sharedViewModel.handle(VerificationAction.SASMatchAction(otherUserId, txId))
-    }
-
-    @OnClick(R.id.sas_request_cancel_button)
-    fun onDoNotMatchButtonTapped() = withState(viewModel) { state ->
-        val otherUserId = state.otherUser?.id ?: return@withState
-        val txId = state.transactionId ?: return@withState
-        // UX echo
-        ButtonsVisibilityGroup.isInvisible = true
-        sasCodeWaitingPartnerText.isVisible = true
-        sharedViewModel.handle(VerificationAction.SASDoNotMatchAction(otherUserId, txId))
-    }
-}

vector/src/main/java/im/vector/riotx/features/crypto/verification/VerificationBottomSheet.kt

@@ -112,7 +112,7 @@ class VerificationBottomSheet : VectorBaseBottomSheetDialogFragment() {
                 SasVerificationTxState.SendingMac,
                 SasVerificationTxState.MacSent,
                 SasVerificationTxState.Verifying   -> {
-                    showFragment(SASVerificationCodeFragment::class, Bundle().apply {
+                    showFragment(VerificationEmojiCodeFragment::class, Bundle().apply {
                         putParcelable(MvRx.KEY_ARG, VerificationArgs(
                                 it.otherUserMxItem?.id ?: "",
                                 it.pendingRequest?.transactionId))

vector/src/main/java/im/vector/riotx/features/crypto/verification/VerificationEmojiCodeController.kt

@@ -0,0 +1,149 @@
+/*
+ * Copyright 2020 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package im.vector.riotx.features.crypto.verification
+
+import com.airbnb.epoxy.EpoxyController
+import com.airbnb.mvrx.Fail
+import com.airbnb.mvrx.Success
+import im.vector.riotx.R
+import im.vector.riotx.core.epoxy.bottomsheet.bottomSheetSeparatorItem
+import im.vector.riotx.core.epoxy.errorWithRetryItem
+import im.vector.riotx.core.error.ErrorFormatter
+import im.vector.riotx.core.resources.ColorProvider
+import im.vector.riotx.core.resources.StringProvider
+import im.vector.riotx.features.crypto.verification.bottomsheet.*
+import javax.inject.Inject
+
+class VerificationEmojiCodeController @Inject constructor(
+        private val stringProvider: StringProvider,
+        private val colorProvider: ColorProvider,
+        private val errorFormatter: ErrorFormatter
+) : EpoxyController() {
+
+    var listener: Listener? = null
+
+    private var viewState: VerificationEmojiCodeViewState? = null
+
+    init {
+        // We are requesting a model build directly as the first build of epoxy is on the main thread.
+        // It avoids to build the whole list on the main thread.
+        requestModelBuild()
+    }
+
+    fun update(viewState: VerificationEmojiCodeViewState) {
+        this.viewState = viewState
+        requestModelBuild()
+    }
+
+    override fun buildModels() {
+        val state = viewState ?: return
+
+        if (state.supportsEmoji) {
+            buildEmojiItem(state)
+        } else {
+            buildDecimal(state)
+        }
+    }
+
+    private fun buildEmojiItem(state: VerificationEmojiCodeViewState) {
+        bottomSheetVerificationNoticeItem {
+            id("notice")
+            notice(stringProvider.getString(R.string.verification_emoji_notice))
+        }
+
+        when (val emojiDescription = state.emojiDescription) {
+            is Success -> {
+                bottomSheetVerificationEmojisItem {
+                    id("emojis")
+                    emojiRepresentation0(emojiDescription()[0])
+                    emojiRepresentation1(emojiDescription()[1])
+                    emojiRepresentation2(emojiDescription()[2])
+                    emojiRepresentation3(emojiDescription()[3])
+                    emojiRepresentation4(emojiDescription()[4])
+                    emojiRepresentation5(emojiDescription()[5])
+                    emojiRepresentation6(emojiDescription()[6])
+                }
+
+                buildActions(state)
+            }
+            is Fail    -> {
+                errorWithRetryItem {
+                    id("error")
+                    text(errorFormatter.toHumanReadable(emojiDescription.error))
+                }
+            }
+            else       -> {
+                bottomSheetVerificationWaitingItem {
+                    id("waiting")
+                    title(stringProvider.getString(R.string.please_wait))
+                }
+            }
+        }
+    }
+
+    private fun buildDecimal(state: VerificationEmojiCodeViewState) {
+        bottomSheetVerificationNoticeItem {
+            id("notice")
+            notice(stringProvider.getString(R.string.verification_code_notice))
+        }
+
+        bottomSheetVerificationDecimalCodeItem {
+            id("decimal")
+            code(state.decimalDescription.invoke() ?: "")
+        }
+
+        buildActions(state)
+    }
+
+    private fun buildActions(state: VerificationEmojiCodeViewState) {
+        bottomSheetSeparatorItem {
+            id("sep0")
+        }
+
+        if (state.isWaitingFromOther) {
+            bottomSheetVerificationWaitingItem {
+                id("waiting")
+                title(stringProvider.getString(R.string.verification_request_waiting_for, state.otherUser?.getBestName() ?: ""))
+            }
+        } else {
+            bottomSheetVerificationActionItem {
+                id("ko")
+                title(stringProvider.getString(R.string.verification_sas_do_not_match))
+                titleColor(colorProvider.getColor(R.color.vector_error_color))
+                iconRes(R.drawable.ic_arrow_right)
+                iconColor(colorProvider.getColor(R.color.vector_error_color))
+                listener { listener?.onDoNotMatchButtonTapped() }
+            }
+            bottomSheetSeparatorItem {
+                id("sep1")
+            }
+            bottomSheetVerificationActionItem {
+                id("ok")
+                title(stringProvider.getString(R.string.verification_sas_match))
+                titleColor(colorProvider.getColor(R.color.riotx_accent))
+                iconRes(R.drawable.ic_arrow_right)
+                iconColor(colorProvider.getColor(R.color.riotx_accent))
+                listener { listener?.onMatchButtonTapped() }
+            }
+        }
+    }
+
+    interface Listener {
+        fun onDoNotMatchButtonTapped()
+        fun onMatchButtonTapped()
+    }
+}

vector/src/main/java/im/vector/riotx/features/crypto/verification/VerificationEmojiCodeFragment.kt

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2019 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package im.vector.riotx.features.crypto.verification
+
+import android.os.Bundle
+import android.view.View
+import com.airbnb.mvrx.fragmentViewModel
+import com.airbnb.mvrx.parentFragmentViewModel
+import com.airbnb.mvrx.withState
+import im.vector.riotx.R
+import im.vector.riotx.core.extensions.cleanup
+import im.vector.riotx.core.extensions.configureWith
+import im.vector.riotx.core.platform.VectorBaseFragment
+import kotlinx.android.synthetic.main.bottom_sheet_verification_child_fragment.*
+import javax.inject.Inject
+
+class VerificationEmojiCodeFragment @Inject constructor(
+        val viewModelFactory: VerificationEmojiCodeViewModel.Factory,
+        val controller: VerificationEmojiCodeController
+) : VectorBaseFragment(), VerificationEmojiCodeController.Listener {
+
+    private val viewModel by fragmentViewModel(VerificationEmojiCodeViewModel::class)
+
+    private val sharedViewModel by parentFragmentViewModel(VerificationBottomSheetViewModel::class)
+
+    override fun getLayoutResId() = R.layout.bottom_sheet_verification_child_fragment
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+
+        setupRecyclerView()
+    }
+
+    override fun onDestroyView() {
+        bottomSheetVerificationRecyclerView.cleanup()
+        controller.listener = null
+        super.onDestroyView()
+    }
+
+    private fun setupRecyclerView() {
+        bottomSheetVerificationRecyclerView.configureWith(controller, hasFixedSize = false)
+        controller.listener = this
+    }
+
+    override fun invalidate() = withState(viewModel) { state ->
+        controller.update(state)
+    }
+
+    override fun onMatchButtonTapped() = withState(viewModel) { state ->
+        val otherUserId = state.otherUser?.id ?: return@withState
+        val txId = state.transactionId ?: return@withState
+        sharedViewModel.handle(VerificationAction.SASMatchAction(otherUserId, txId))
+    }
+
+    override fun onDoNotMatchButtonTapped() = withState(viewModel) { state ->
+        val otherUserId = state.otherUser?.id ?: return@withState
+        val txId = state.transactionId ?: return@withState
+        sharedViewModel.handle(VerificationAction.SASDoNotMatchAction(otherUserId, txId))
+    }
+}

vector/src/main/java/im/vector/riotx/features/crypto/verification/VerificationEmojiCodeViewModel.kt

@@ -29,7 +29,7 @@ import im.vector.riotx.core.di.HasScreenInjector
 import im.vector.riotx.core.platform.EmptyAction
 import im.vector.riotx.core.platform.VectorViewModel
 
-data class SASVerificationCodeViewState(
+data class VerificationEmojiCodeViewState(
         val transactionId: String?,
         val otherUser: MatrixItem? = null,
         val supportsEmoji: Boolean = true,
@@ -38,10 +38,10 @@ data class SASVerificationCodeViewState(
         val isWaitingFromOther: Boolean = false
 ) : MvRxState
 
-class SASVerificationCodeViewModel @AssistedInject constructor(
+class VerificationEmojiCodeViewModel @AssistedInject constructor(
-        @Assisted initialState: SASVerificationCodeViewState,
+        @Assisted initialState: VerificationEmojiCodeViewState,
         private val session: Session
-) : VectorViewModel<SASVerificationCodeViewState, EmptyAction>(initialState), SasVerificationService.SasVerificationListener {
+) : VectorViewModel<VerificationEmojiCodeViewState, EmptyAction>(initialState), SasVerificationService.SasVerificationListener {
 
     init {
         withState { state ->
@@ -141,22 +141,22 @@ class SASVerificationCodeViewModel @AssistedInject constructor(
 
     @AssistedInject.Factory
     interface Factory {
-        fun create(initialState: SASVerificationCodeViewState): SASVerificationCodeViewModel
+        fun create(initialState: VerificationEmojiCodeViewState): VerificationEmojiCodeViewModel
     }
 
-    companion object : MvRxViewModelFactory<SASVerificationCodeViewModel, SASVerificationCodeViewState> {
+    companion object : MvRxViewModelFactory<VerificationEmojiCodeViewModel, VerificationEmojiCodeViewState> {
 
-        override fun create(viewModelContext: ViewModelContext, state: SASVerificationCodeViewState): SASVerificationCodeViewModel? {
+        override fun create(viewModelContext: ViewModelContext, state: VerificationEmojiCodeViewState): VerificationEmojiCodeViewModel? {
-            val factory = (viewModelContext as FragmentViewModelContext).fragment<SASVerificationCodeFragment>().viewModelFactory
+            val factory = (viewModelContext as FragmentViewModelContext).fragment<VerificationEmojiCodeFragment>().viewModelFactory
             return factory.create(state)
         }
 
-        override fun initialState(viewModelContext: ViewModelContext): SASVerificationCodeViewState? {
+        override fun initialState(viewModelContext: ViewModelContext): VerificationEmojiCodeViewState? {
             val args = viewModelContext.args<VerificationBottomSheet.VerificationArgs>()
             val session = (viewModelContext.activity as HasScreenInjector).injector().activeSessionHolder().getActiveSession()
             val matrixItem = session.getUser(args.otherUserId)?.toMatrixItem()
 
-            return SASVerificationCodeViewState(
+            return VerificationEmojiCodeViewState(
                     transactionId = args.verificationId,
                     otherUser = matrixItem
             )

vector/src/main/java/im/vector/riotx/features/crypto/verification/bottomsheet/BottomSheetVerificationActionItem.kt

@@ -41,7 +41,7 @@ abstract class BottomSheetVerificationActionItem : VectorEpoxyModel<BottomSheetV
     @EpoxyAttribute
     var title: CharSequence = ""
     @EpoxyAttribute
-    var subTitle: CharSequence = ""
+    var subTitle: CharSequence? = null
     @EpoxyAttribute
     var titleColor: Int = 0
     @EpoxyAttribute

vector/src/main/java/im/vector/riotx/features/crypto/verification/bottomsheet/BottomSheetVerificationEmojisItem.kt

@@ -16,27 +16,59 @@
  */
 package im.vector.riotx.features.crypto.verification.bottomsheet
 
+import android.view.ViewGroup
 import android.widget.TextView
 import com.airbnb.epoxy.EpoxyAttribute
 import com.airbnb.epoxy.EpoxyModelClass
+import im.vector.matrix.android.api.session.crypto.sas.EmojiRepresentation
 import im.vector.riotx.R
 import im.vector.riotx.core.epoxy.VectorEpoxyHolder
 import im.vector.riotx.core.epoxy.VectorEpoxyModel
 
 /**
- * A action for bottom sheet.
+ * A emoji list for bottom sheet.
  */
 @EpoxyModelClass(layout = R.layout.item_verification_emojis)
 abstract class BottomSheetVerificationEmojisItem : VectorEpoxyModel<BottomSheetVerificationEmojisItem.Holder>() {
 
-    @EpoxyAttribute
+    @EpoxyAttribute lateinit var emojiRepresentation0: EmojiRepresentation
-    var notice: CharSequence = ""
+    @EpoxyAttribute lateinit var emojiRepresentation1: EmojiRepresentation
+    @EpoxyAttribute lateinit var emojiRepresentation2: EmojiRepresentation
+    @EpoxyAttribute lateinit var emojiRepresentation3: EmojiRepresentation
+    @EpoxyAttribute lateinit var emojiRepresentation4: EmojiRepresentation
+    @EpoxyAttribute lateinit var emojiRepresentation5: EmojiRepresentation
+    @EpoxyAttribute lateinit var emojiRepresentation6: EmojiRepresentation
 
     override fun bind(holder: Holder) {
-        holder.notice.text = notice
+        holder.emoji0View.findViewById<TextView>(R.id.item_emoji_tv).text = emojiRepresentation0.emoji
+        holder.emoji0View.findViewById<TextView>(R.id.item_emoji_name_tv).setText(emojiRepresentation0.nameResId)
+
+        holder.emoji1View.findViewById<TextView>(R.id.item_emoji_tv).text = emojiRepresentation1.emoji
+        holder.emoji1View.findViewById<TextView>(R.id.item_emoji_name_tv).setText(emojiRepresentation1.nameResId)
+
+        holder.emoji2View.findViewById<TextView>(R.id.item_emoji_tv).text = emojiRepresentation2.emoji
+        holder.emoji2View.findViewById<TextView>(R.id.item_emoji_name_tv).setText(emojiRepresentation2.nameResId)
+
+        holder.emoji3View.findViewById<TextView>(R.id.item_emoji_tv).text = emojiRepresentation3.emoji
+        holder.emoji3View.findViewById<TextView>(R.id.item_emoji_name_tv)?.setText(emojiRepresentation3.nameResId)
+
+        holder.emoji4View.findViewById<TextView>(R.id.item_emoji_tv).text = emojiRepresentation4.emoji
+        holder.emoji4View.findViewById<TextView>(R.id.item_emoji_name_tv).setText(emojiRepresentation4.nameResId)
+
+        holder.emoji5View.findViewById<TextView>(R.id.item_emoji_tv).text = emojiRepresentation5.emoji
+        holder.emoji5View.findViewById<TextView>(R.id.item_emoji_name_tv).setText(emojiRepresentation5.nameResId)
+
+        holder.emoji6View.findViewById<TextView>(R.id.item_emoji_tv).text = emojiRepresentation6.emoji
+        holder.emoji6View.findViewById<TextView>(R.id.item_emoji_name_tv).setText(emojiRepresentation6.nameResId)
     }
 
     class Holder : VectorEpoxyHolder() {
-        val notice by bind<TextView>(R.id.itemVerificationNoticeText)
+        val emoji0View by bind<ViewGroup>(R.id.emoji0)
+        val emoji1View by bind<ViewGroup>(R.id.emoji1)
+        val emoji2View by bind<ViewGroup>(R.id.emoji2)
+        val emoji3View by bind<ViewGroup>(R.id.emoji3)
+        val emoji4View by bind<ViewGroup>(R.id.emoji4)
+        val emoji5View by bind<ViewGroup>(R.id.emoji5)
+        val emoji6View by bind<ViewGroup>(R.id.emoji6)
     }
 }

vector/src/main/res/layout/fragment_verification_sas_code.xml

@@ -1,188 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:background="?android:colorBackground">
-
-    <TextView
-        android:id="@+id/sas_emoji_description"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_margin="@dimen/layout_horizontal_margin"
-        android:layout_marginTop="@dimen/layout_vertical_margin"
-        android:text="@string/verify_by_emoji_title"
-        android:textColor="?riotx_text_primary"
-        android:textSize="20sp"
-        android:textStyle="bold"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
-
-    <TextView
-        android:id="@+id/sas_emoji_description_2"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_margin="@dimen/layout_vertical_margin"
-        android:text="@string/verify_user_sas_emoji_help_text"
-        android:textColor="?riotx_text_secondary"
-        android:textSize="15sp"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/sas_emoji_description" />
-
-    <TextView
-        android:id="@+id/sas_decimal_code"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_gravity="center"
-        android:textColor="?riotx_text_primary"
-        android:textSize="28sp"
-        android:textStyle="bold"
-        android:visibility="invisible"
-        app:layout_constraintBottom_toBottomOf="@+id/sas_emoji_grid"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="@+id/sas_emoji_grid"
-        tools:text="1234-4320-3905"
-        tools:visibility="visible" />
-
-    <ProgressBar
-        android:id="@+id/sasLoadingProgress"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_gravity="center"
-        app:layout_constraintBottom_toBottomOf="@+id/sas_emoji_grid"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="@+id/sas_emoji_grid" />
-
-    <androidx.constraintlayout.widget.ConstraintLayout
-        android:id="@+id/sas_emoji_grid"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_margin="@dimen/layout_vertical_margin"
-        android:visibility="invisible"
-        app:layout_constrainedWidth="true"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/sas_emoji_description_2"
-        tools:visibility="visible">
-
-        <include
-            android:id="@+id/emoji0"
-            layout="@layout/item_emoji_verif" />
-
-        <include
-            android:id="@+id/emoji1"
-            layout="@layout/item_emoji_verif" />
-
-        <include
-            android:id="@+id/emoji2"
-            layout="@layout/item_emoji_verif" />
-
-        <include
-            android:id="@+id/emoji3"
-            layout="@layout/item_emoji_verif" />
-
-        <include
-            android:id="@+id/emoji4"
-            layout="@layout/item_emoji_verif" />
-
-        <include
-            android:id="@+id/emoji5"
-            layout="@layout/item_emoji_verif" />
-
-        <include
-            android:id="@+id/emoji6"
-            layout="@layout/item_emoji_verif" />
-
-        <androidx.constraintlayout.helper.widget.Flow
-            android:id="@+id/sas_emoji_grid_flow"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            app:constraint_referenced_ids="emoji0,emoji1,emoji2,emoji3,emoji4,emoji5,emoji6"
-            app:flow_horizontalBias="0.5"
-            app:flow_horizontalGap="16dp"
-            app:flow_horizontalStyle="packed"
-            app:flow_verticalBias="0"
-            app:flow_verticalGap="8dp"
-            app:flow_wrapMode="chain"
-            tools:ignore="MissingConstraints" />
-
-    </androidx.constraintlayout.widget.ConstraintLayout>
-
-
-    <com.google.android.material.button.MaterialButton
-        android:id="@+id/sas_request_continue_button"
-        style="@style/VectorButtonStylePositive"
-        android:layout_width="0dp"
-        android:layout_margin="@dimen/layout_vertical_margin"
-        android:minWidth="160dp"
-        android:text="@string/verification_sas_match"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toEndOf="@id/centerGuideLine"
-        app:layout_constraintTop_toBottomOf="@+id/sas_emoji_grid"
-        tools:text="A very long translation thats too big" />
-
-    <androidx.constraintlayout.widget.Guideline
-        android:id="@+id/centerGuideLine"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:orientation="vertical"
-        app:layout_constraintGuide_percent="0.5" />
-
-    <com.google.android.material.button.MaterialButton
-        android:id="@+id/sas_request_cancel_button"
-        style="@style/VectorButtonStyleDestructive"
-        android:layout_width="0dp"
-        android:layout_margin="@dimen/layout_vertical_margin"
-        android:text="@string/verification_sas_do_not_match"
-        app:layout_constraintEnd_toStartOf="@+id/centerGuideLine"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/sas_emoji_grid" />
-
-
-    <androidx.constraintlayout.widget.Barrier
-        android:id="@+id/bottomBarrier"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:barrierDirection="bottom"
-        app:barrierMargin="8dp"
-        app:constraint_referenced_ids="sas_request_cancel_button,sas_request_continue_button" />
-
-    <TextView
-        android:id="@+id/sasCodeWaitingPartnerText"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:gravity="center"
-        android:text="@string/sas_waiting_for_partner"
-        android:textColor="?attr/vctr_notice_secondary"
-        android:textSize="15sp"
-        android:visibility="gone"
-        app:layout_constraintBottom_toTopOf="@id/bottomBarrier"
-        app:layout_constraintTop_toBottomOf="@id/sas_emoji_grid"
-        tools:visibility="visible" />
-
-    <TextView
-        android:id="@+id/sasEmojiSecurityTip"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_margin="@dimen/layout_vertical_margin"
-        android:gravity="center"
-        android:text="@string/verify_user_sas_emoji_security_tip"
-        android:textColor="?riotx_text_secondary"
-        android:textSize="12sp"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/bottomBarrier" />
-
-    <androidx.constraintlayout.widget.Group
-        android:id="@+id/ButtonsVisibilityGroup"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        app:constraint_referenced_ids="sas_request_continue_button,sas_request_cancel_button"
-        tools:visibility="visible" />
-
-</androidx.constraintlayout.widget.ConstraintLayout>

vector/src/main/res/values/strings_riotX.xml

@@ -89,4 +89,7 @@
     <string name="verification_request_notice">For extra security, verify %s by checking a one-time code.</string>
     <string name="verification_request_start_notice">For maximum security, do this in person.</string>
 
+    <string name="verification_emoji_notice">Compare the unique emoji, ensuring they appear in the same order.</string>
+    <string name="verification_code_notice">Compare the code with the one displayed on the the other user\'s screen.</string>
+
 </resources>