Siwe android UI updates (#20293)

* Update error dialog to 2.0 design * Update account and error dialog per 2.0 * Fix error dialog UI
2023-09-28 09:50:15 +05:30
parent 3c2401f1c6
commit 5cc1421d7f
9 changed files with 147 additions and 162 deletions
@@ -7,8 +7,6 @@ package org.chromium.chrome.browser.crypto_wallet.permission;

 import android.annotation.SuppressLint;
 import android.content.Context;
-import android.graphics.Bitmap;
-import android.graphics.Rect;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.ViewParent;
@@ -19,6 +17,8 @@ import androidx.annotation.NonNull;
 import androidx.recyclerview.widget.LinearLayoutManager;
 import androidx.recyclerview.widget.RecyclerView;

+import com.google.android.material.card.MaterialCardView;
+
 import org.chromium.base.Log;
 import org.chromium.base.annotations.CalledByNative;
 import org.chromium.base.annotations.NativeMethods;
@@ -29,12 +29,12 @@ import org.chromium.brave_wallet.mojom.KeyringService;
 import org.chromium.chrome.R;
 import org.chromium.chrome.browser.app.BraveActivity;
 import org.chromium.chrome.browser.app.domain.WalletModel;
+import org.chromium.chrome.browser.app.helpers.ImageLoader;
 import org.chromium.chrome.browser.crypto_wallet.BraveWalletServiceFactory;
 import org.chromium.chrome.browser.crypto_wallet.KeyringServiceFactory;
 import org.chromium.chrome.browser.crypto_wallet.util.Utils;
 import org.chromium.chrome.browser.crypto_wallet.util.WalletConstants;
 import org.chromium.components.browser_ui.modaldialog.ModalDialogView;
-import org.chromium.content_public.browser.ImageDownloadCallback;
 import org.chromium.content_public.browser.WebContents;
 import org.chromium.mojo.bindings.ConnectionErrorHandler;
 import org.chromium.mojo.system.MojoException;
@@ -46,13 +46,12 @@ import org.chromium.ui.modaldialog.ModalDialogManager.ModalDialogType;
 import org.chromium.ui.modaldialog.ModalDialogProperties;
 import org.chromium.ui.modaldialog.ModalDialogProperties.ButtonType;
 import org.chromium.ui.modelutil.PropertyModel;
-import org.chromium.url.GURL;

-import java.util.Iterator;
+import java.lang.ref.WeakReference;
 import java.util.List;

 public class BraveDappPermissionPromptDialog
-        implements ModalDialogProperties.Controller, ImageDownloadCallback, ConnectionErrorHandler {
+        implements ModalDialogProperties.Controller, ConnectionErrorHandler {
    private static final String TAG = "BraveDappPermission";

    private final ModalDialogManager mModalDialogManager;
@@ -62,10 +61,10 @@ public class BraveDappPermissionPromptDialog
    private PropertyModel mPropertyModel;
    private WebContents mWebContents;
    private String mFavIconURL;
+    private MaterialCardView mCvFavContainer;
    private ImageView mFavIconImage;
    private RecyclerView mRecyclerView;
    private BravePermissionAccountsListAdapter mAccountsListAdapter;
-    private int mRequestId; // Used for favicon downloader
    private KeyringService mKeyringService;
    private boolean mMojoServicesClosed;
    private BraveWalletService mBraveWalletService;
@@ -110,6 +109,7 @@ public class BraveDappPermissionPromptDialog
                mContext, R.layout.brave_permission_prompt_dialog, null);

        mFavIconImage = customView.findViewById(R.id.favicon);
+        mCvFavContainer = customView.findViewById(R.id.permission_prompt_fav_container);
        setFavIcon();
        mRecyclerView = customView.findViewById(R.id.accounts_list);

@@ -205,37 +205,11 @@ public class BraveDappPermissionPromptDialog
        if (mFavIconURL.isEmpty()) {
            return;
        }
-        mRequestId = mWebContents.downloadImage(new GURL(mFavIconURL), // url
-                true, // isFavicon
-                WalletConstants.MAX_BITMAP_SIZE_FOR_DOWNLOAD, // maxBitmapSize
-                false, // bypassCache
-                this); // callback
-    }
-
-    @Override
-    public void onFinishDownloadImage(int id, int httpStatusCode, GURL imageUrl,
-            List<Bitmap> bitmaps, List<Rect> originalImageSizes) {
-        if (id != mRequestId) return;
-
-        Iterator<Bitmap> iterBitmap = bitmaps.iterator();
-        Iterator<Rect> iterSize = originalImageSizes.iterator();
-
-        Bitmap bestBitmap = null;
-        Rect bestSize = new Rect(0, 0, 0, 0);
-        while (iterBitmap.hasNext() && iterSize.hasNext()) {
-            Bitmap bitmap = iterBitmap.next();
-            Rect size = iterSize.next();
-            if (size.width() > bestSize.width() && size.height() > bestSize.height()) {
-                bestBitmap = bitmap;
-                bestSize = size;
-            }
-        }
-        if (bestSize.width() == 0 || bestSize.height() == 0) {
-            return;
-        }
-
-        mFavIconImage.setImageBitmap(bestBitmap);
-        mFavIconImage.setVisibility(View.VISIBLE);
+        ImageLoader.fetchFavIcon(mFavIconURL, new WeakReference<>(mContext), fav -> {
+            if (fav == null) return;
+            mFavIconImage.setImageBitmap(fav);
+            mCvFavContainer.setVisibility(View.VISIBLE);
+        });
    }

    public String[] getSelectedAccounts() {
@@ -22,6 +22,7 @@ import androidx.recyclerview.widget.RecyclerView;
 import org.chromium.brave_wallet.mojom.AccountInfo;
 import org.chromium.brave_wallet.mojom.CoinType;
 import org.chromium.chrome.R;
+import org.chromium.chrome.browser.crypto_wallet.util.AddressUtils;
 import org.chromium.chrome.browser.crypto_wallet.util.Utils;
 import org.chromium.chrome.browser.crypto_wallet.util.WalletUtils;

@@ -104,9 +105,9 @@ public class BravePermissionAccountsListAdapter
        final int arrayPosition = position;
        AccountInfo accountInfo = mAccountInfos[position];
        holder.titleText.setText(accountInfo.name);
-        holder.subTitleText.setText(Utils.stripAccountAddress(accountInfo.address));
+        holder.subTitleText.setText(AddressUtils.getTruncatedAddress(accountInfo.address));
        Utils.setBlockiesBitmapResourceFromAccount(
-                mExecutor, mHandler, holder.iconImg, accountInfo, true);
+                mExecutor, mHandler, holder.iconImg, accountInfo, true, false);

        if (mCheckBoxStyle) {
            holder.accountCheck.setVisibility(View.VISIBLE);
@@ -868,11 +868,19 @@ public class Utils {
    }

    public static void setBlockiesBitmapResourceFromAccount(ExecutorService executor,
-            Handler handler, ImageView iconImg, AccountInfo accountInfo, boolean makeLowerCase) {
+            Handler handler, ImageView iconImg, AccountInfo accountInfo, boolean makeLowerCase,
+            boolean isCircular) {
        // TODO(apaymyshev): need to hash uniqueKey string for bitcoin accounts(same as for desktop)
        String source =
                accountInfo.address != null ? accountInfo.address : accountInfo.accountId.uniqueKey;
-        setTextGeneratedBlockies(executor, handler, iconImg, source, makeLowerCase);
+        setTextGeneratedBlockies(executor, handler, iconImg, source, makeLowerCase, isCircular);
+    }
+
+    public static void setBlockiesBitmapResourceFromAccount(ExecutorService executor,
+            Handler handler, ImageView iconImg, AccountInfo accountInfo, boolean makeLowerCase) {
+        // TODO(apaymyshev): need to hash uniqueKey string for bitcoin accounts(same as for desktop)
+        setBlockiesBitmapResourceFromAccount(
+                executor, handler, iconImg, accountInfo, makeLowerCase, true);
    }

    public static void setBlockiesBackground(ExecutorService executor, Handler handler, View view,
@@ -18,7 +18,7 @@ import java.util.Map;

 public final class WalletConstants {
    // Radius of the oval used to round the corners in density-independent pixels.
-    public static final int RECT_SHARP_ROUNDED_CORNERS_DP = 4;
+    public static final int RECT_SHARP_ROUNDED_CORNERS_DP = 12;
    public static final int RECT_ROUNDED_CORNERS_DP = 12;

    public static final long MILLI_SECOND = 1000;
@@ -4,108 +4,120 @@
     License, v. 2.0. If a copy of the MPL was not distributed with this file,
     You can obtain one at https://mozilla.org/MPL/2.0/. */ -->

-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<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:orientation="vertical"
-    android:gravity="start"
-    style="@style/AlertDialogContent">
-
-    <ImageView
-        android:id="@+id/favicon"
-        android:layout_height="60dp"
-        android:layout_width="60dp"
-        android:layout_gravity="center_horizontal"
-        android:contentDescription="@null"
-        android:visibility="gone"/>
-
-    <TextView
-        android:id="@+id/domain"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="4dp"
-        android:layout_marginBottom="16dp"
-        android:gravity="center"
-        android:textColor="@color/wallet_text_color"
-        android:textSize="15sp" />
+    style="@style/AlertDialogContent"
+    android:background="@color/brave_wallet_dn_panel_bg"
+    android:gravity="start">

    <TextView
        android:id="@+id/title"
+        style="@style/BraveWalletTextViewTitle"
        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="4dp"
-        android:layout_marginBottom="4dp"
+        android:layout_marginVertical="4dp"
        android:gravity="center"
-        android:textColor="@color/wallet_text_color"
        android:text="@string/permissions_connect_brave_wallet_title"
-        android:textSize="16sp" />
+        android:textSize="20sp"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <View
+        android:id="@+id/permission_prompt_div"
+        android:layout_width="match_parent"
+        android:layout_height="1dp"
+        android:layout_marginTop="6dp"
+        android:background="@color/wallet_edittext_outline_color"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/title" />
+
+    <com.google.android.material.card.MaterialCardView
+        android:id="@+id/permission_prompt_fav_container"
+        android:layout_width="60dp"
+        android:layout_height="60dp"
+        android:layout_marginTop="16dp"
+        android:elevation="12dp"
+        android:visibility="gone"
+        app:cardCornerRadius="8dp"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/permission_prompt_div"
+        app:strokeColor="@color/brave_white"
+        app:strokeWidth="1dp">
+
+        <ImageView
+            android:id="@+id/favicon"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:contentDescription="@string/accessibility_wallet_dapp_panel_account"
+            tools:srcCompat="@drawable/ic_brave_logo" />
+    </com.google.android.material.card.MaterialCardView>
+
+    <TextView
+        android:id="@+id/domain"
+        style="@style/BraveWalletTextView"
+        android:layout_width="match_parent"
+        android:layout_marginTop="8dp"
+        android:layout_marginBottom="16dp"
+        android:gravity="center"
+        android:textSize="15sp"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/permission_prompt_fav_container" />

    <TextView
        android:id="@+id/sub_title"
+        style="@style/BraveWalletTextViewTitle"
+        android:layout_width="match_parent"
+        android:layout_marginVertical="8dp"
+        android:text="@string/permissions_connect_brave_wallet_sub_title"
+        app:layout_constraintBottom_toTopOf="@id/permission_prompt_div2"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/domain" />
+
+    <View
+        android:id="@+id/permission_prompt_div2"
+        android:layout_width="wrap_content"
+        android:layout_height="1dp"
+        android:background="@color/wallet_edittext_outline_color"
+        app:layout_constraintBottom_toTopOf="@id/permission_prompt_cv_accounts"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/sub_title" />
+
+    <com.google.android.material.card.MaterialCardView
+        android:id="@+id/permission_prompt_cv_accounts"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
-        android:layout_marginBottom="16dp"
-        android:gravity="center"
-        android:text="@string/permissions_connect_brave_wallet_sub_title"
-        android:textColor="@color/wallet_text_color"
-        android:textSize="14sp" />
+        android:layout_marginVertical="8dp"
+        android:elevation="12dp"
+        app:cardCornerRadius="12dp"
+        app:layout_constrainedHeight="true"
+        app:layout_constraintBottom_toTopOf="@id/permission_prompt_div3"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/permission_prompt_div2">
+
+        <androidx.recyclerview.widget.RecyclerView
+            android:id="@+id/accounts_list"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:background="@color/brave_wallet_dn_highlight_bg_color"
+            android:padding="12dp" />
+    </com.google.android.material.card.MaterialCardView>
+
+    <View
+        android:id="@+id/permission_prompt_div3"
+        android:layout_width="match_parent"
+        android:layout_height="1dp"
+        android:layout_marginTop="8dp"
+        android:background="@color/wallet_edittext_outline_color"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/permission_prompt_cv_accounts" />

    <TextView
-        android:id="@+id/title_accounts"
+        android:id="@+id/warning_title"
+        style="@style/BraveWalletTextViewTitle"
        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="2dp"
-        android:layout_marginBottom="10dp"
-        android:text="@string/permissions_connect_brave_wallet_accounts_title"
-        android:textColor="@color/wallet_text_color"
-        android:textSize="14sp" />
-
-    <RelativeLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:orientation="vertical">
-
-        <View
-            android:layout_width="match_parent"
-            android:layout_height="1dp"
-            android:layout_alignParentTop="true"
-            android:background="@color/wallet_edittext_outline_color" />
-
-        <ScrollView
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:paddingTop="15dp"
-            android:paddingBottom="25dp"
-            android:fillViewport="true" >
-
-            <androidx.recyclerview.widget.RecyclerView
-                android:id="@+id/accounts_list"
-                android:layout_width="match_parent"
-                android:layout_height="0dp" />
-
-        </ScrollView>
-
-        <LinearLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_alignParentBottom="true"
-            android:orientation="vertical">
-
-            <View
-                android:layout_width="match_parent"
-                android:layout_height="1dp"
-                android:background="@color/wallet_edittext_outline_color" />
-
-            <TextView
-                android:id="@+id/warning_title"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:layout_marginStart="6dp"
-                android:layout_marginTop="4dp"
-                android:text="@string/permissions_connect_brave_wallet_warning_title"
-                android:textColor="@color/wallet_text_color"
-                android:textSize="14sp" />
-        </LinearLayout>
-    </RelativeLayout>
-
-</LinearLayout>
+        android:layout_marginVertical="8dp"
+        android:text="@string/permissions_connect_brave_wallet_warning_title"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/permission_prompt_div3" />
+</androidx.constraintlayout.widget.ConstraintLayout>
@@ -10,31 +10,29 @@
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
+    android:background="@color/brave_wallet_dn_panel_bg"
    android:padding="20dp"
-    android:background="@color/wallet_bg"
-    tools:context=".browser.crypto_wallet.fragments.dapps.SignMessageErrorFragment" >
+    tools:context=".browser.crypto_wallet.fragments.dapps.SignMessageErrorFragment">

    <TextView
        android:id="@+id/fragment_sign_msg_err_tv_top_header"
+        style="@style/BraveWalletTextViewTitle"
        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="4dp"
        android:gravity="center"
-        android:textStyle="bold"
        android:text="@string/brave_wallet_security_risk_detected"
+        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        android:textColor="@color/wallet_text_color"
-        android:textSize="15sp" />
+        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/fragment_sign_msg_err_divider"
        android:layout_width="match_parent"
        android:layout_height="1dp"
+        android:layout_marginHorizontal="16dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
-        android:layout_marginHorizontal="16dp"
        android:background="?android:attr/listDivider"
        app:layout_constraintTop_toBottomOf="@+id/fragment_sign_msg_err_tv_top_header" />

@@ -52,46 +50,43 @@

        <ImageView
            android:id="@+id/fragment_sign_msg_err_exclamation_icon"
-            android:layout_marginTop="16dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
+            android:layout_marginTop="16dp"
+            android:adjustViewBounds="true"
            android:contentDescription="@null"
            android:gravity="center"
            android:maxWidth="48dp"
-            android:adjustViewBounds="true"
            android:scaleType="centerCrop"
-            app:srcCompat="@drawable/ic_warning_circle"
-            app:tint="@color/wallet_sign_msg_err_icon_color" />
+            app:srcCompat="@drawable/ic_warning_circle_filled" />

        <TextView
            android:id="@+id/fragment_sign_msg_err_tv_host"
+            style="@style/BraveWalletTextViewTitle"
            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="16dp"
+            android:layout_marginTop="8dp"
            android:layout_marginBottom="4dp"
            android:gravity="center"
-            android:textColor="@color/wallet_sign_msg_err_message_color"
            app:layout_constraintTop_toBottomOf="parent" />

        <TextView
            android:id="@+id/fragment_sign_msg_err_tv_url"
+            style="@style/BraveWalletTextView"
            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="16dp"
+            android:layout_marginTop="8dp"
            android:layout_marginBottom="4dp"
            android:gravity="center"
-            android:textColor="@color/wallet_sign_msg_err_icon_color"
+            android:textColor="@color/brave_theme_error_txt"
            app:layout_constraintTop_toBottomOf="@id/fragment_sign_msg_err_tv_host" />

        <TextView
            android:id="@+id/fragment_sign_msg_err_tv_reason"
+            style="@style/BraveWalletTextView"
            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:textColor="@color/wallet_sign_msg_err_message_color"
+            android:layout_marginHorizontal="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="34dp"
-            android:layout_marginHorizontal="16dp"
            android:gravity="center"
            app:layout_constraintTop_toBottomOf="@id/fragment_sign_msg_err_tv_url" />
    </LinearLayout>
@@ -100,9 +95,8 @@
        android:id="@+id/fragment_sign_msg_err_btn_close"
        style="@style/BraveWalletButton"
        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_weight="1"
-        app:layout_constraintTop_toBottomOf="@id/fragment_sign_msg_err_block"
-        android:text="@string/close_text" />
+        android:text="@string/close_text"
+        app:layout_constraintTop_toBottomOf="@id/fragment_sign_msg_err_block" />
 </androidx.constraintlayout.widget.ConstraintLayout>
@@ -135,6 +135,7 @@
    <color name="recovery_phrase_warning_text_color">#C2C4CF</color>
    <color name="wallet_top_banner_color">#33E32444</color>
    <color name="wallet_error_text_color">#FF4B6A</color>
+    <color name="wallet_sign_msg_err_bg_color">#FF460A10</color>

    <color name="rewards_panel_bg_color">#17171F</color>
    <color name="rewards_panel_text_color">#FFFFFF</color>
@@ -235,9 +235,7 @@
    <color name="wallet_top_banner_color">#33E32444</color>
    <color name="wallet_error_text_color">#FF4B6A</color>

-    <color name="wallet_sign_msg_err_icon_color">#E6667C</color>
-    <color name="wallet_sign_msg_err_message_color">#E8E6E7</color>
-    <color name="wallet_sign_msg_err_bg_color">#FF44141B</color>
+    <color name="wallet_sign_msg_err_bg_color">#FFF1F1</color>

    <color name="vpn_callout_bg_color">#381E85</color>
    <color name="brave_plan_bg">#27155E</color>
@@ -3033,9 +3033,6 @@ If you don't accept this request, VPN will not reconnect and your internet conne
    <message name="IDS_PERMISSIONS_CONNECT_BRAVE_WALLET_SUB_TITLE" desc="Sub title text for a request to connect a wallet.">
      Select account(s)
    </message>
-    <message name="IDS_PERMISSIONS_CONNECT_BRAVE_WALLET_ACCOUNTS_TITLE" desc="Title text for a request to connect a wallet for an accounts section.">
-      Accounts
-    </message>
    <message name="IDS_PERMISSIONS_CONNECT_BRAVE_WALLET_WARNING_TITLE" desc="Title text for a request to connect a wallet for a warning section.">
      Only connect with sites you trust.
    </message>