From eedc189bb53a46b43b8663abed252d49b93b1ab0 Mon Sep 17 00:00:00 2001
From: DMY <147dmy@gmail.com>
Date: Fri, 22 Sep 2023 15:17:30 +0800
Subject: [PATCH] feat: add scroll bar on address list (#1767)

* feat: add scroll bar on address list

* fix

* fix
---
 src/ui/assets/address/sort-by-alphabet-2.svg | 12 ++++++++++++
 src/ui/assets/address/sort-by-alphabet.svg   | 18 ++++++++++--------
 src/ui/views/AddressManagement/SortPopup.tsx |  2 +-
 src/ui/views/AddressManagement/index.tsx     |  3 +--
 src/ui/views/AddressManagement/style.less    |  6 ++++++
 5 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 src/ui/assets/address/sort-by-alphabet-2.svg

diff --git a/src/ui/assets/address/sort-by-alphabet-2.svg b/src/ui/assets/address/sort-by-alphabet-2.svg
new file mode 100644
index 00000000000..f9effb76b87
--- /dev/null
+++ b/src/ui/assets/address/sort-by-alphabet-2.svg
@@ -0,0 +1,12 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15 1.66406V18.1224" stroke="#192945" stroke-width="1.25" stroke-linecap="round"
+        stroke-linejoin="round" />
+    <path d="M2.91797 11.6641H9.58464L2.91797 18.3307H9.58464" stroke="#192945" stroke-width="1.25"
+        stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M2.54541 9.07617L6.37928 1.66406L9.95752 9.07617" stroke="#192945" stroke-width="1.25"
+        stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M18.3346 15L15.0013 18.3333L11.668 15" stroke="#192945" stroke-width="1.25"
+        stroke-linecap="round" stroke-linejoin="round" />
+    <line x1="3.75146" y1="7.3125" x2="8.75146" y2="7.3125" stroke="#192945" stroke-width="1.25" />
+</svg>
+    
\ No newline at end of file
diff --git a/src/ui/assets/address/sort-by-alphabet.svg b/src/ui/assets/address/sort-by-alphabet.svg
index 47b35ba4136..b06ca5963a3 100644
--- a/src/ui/assets/address/sort-by-alphabet.svg
+++ b/src/ui/assets/address/sort-by-alphabet.svg
@@ -1,10 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-    <path d="M15 1.66406V18.1224" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 1.32812V14.4948" stroke="currentColor" stroke-linecap="round"
         stroke-linejoin="round" />
-    <path d="M2.91797 11.6641H9.58464L2.91797 18.3307H9.58464" stroke="currentColor"
-        stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M2.91797 8.33073L6.36626 1.66406L9.58464 8.33073" stroke="currentColor"
-        stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
-    <path d="M18.3346 15L15.0013 18.3333L11.668 15" stroke="currentColor" stroke-width="1.25"
+    <path d="M2.33594 9.32812H7.66927L2.33594 14.6615H7.66927" stroke="currentColor"
         stroke-linecap="round" stroke-linejoin="round" />
-</svg>
\ No newline at end of file
+    <path d="M1.96533 7.40234L5.10718 1.32812L8.03955 7.40234" stroke="currentColor"
+        stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M14.6693 12L12.0026 14.6667L9.33594 12" stroke="currentColor" stroke-linecap="round"
+        stroke-linejoin="round" />
+    <line x1="3" y1="5.72852" x2="7" y2="5.72852" stroke="currentColor" />
+</svg>
+    
\ No newline at end of file
diff --git a/src/ui/views/AddressManagement/SortPopup.tsx b/src/ui/views/AddressManagement/SortPopup.tsx
index 34bf0855d74..60c72d3d90e 100644
--- a/src/ui/views/AddressManagement/SortPopup.tsx
+++ b/src/ui/views/AddressManagement/SortPopup.tsx
@@ -2,7 +2,7 @@ import { Item, Popup } from '@/ui/component';
 import React, { useMemo } from 'react';
 import ImgSortByUsd from '@/ui/assets/address/sort-by-usd-l.svg';
 import ImgSortByType from '@/ui/assets/address/sort-by-type.svg';
-import ImgSortByAlphabet from '@/ui/assets/address/sort-by-alphabet.svg';
+import ImgSortByAlphabet from '@/ui/assets/address/sort-by-alphabet-2.svg';
 import ImgChecked from '@/ui/assets/address/checked.svg';
 
 import { useRabbyDispatch, useRabbySelector } from '@/ui/store';
diff --git a/src/ui/views/AddressManagement/index.tsx b/src/ui/views/AddressManagement/index.tsx
index 0e3316feb0e..69e930da9c6 100644
--- a/src/ui/views/AddressManagement/index.tsx
+++ b/src/ui/views/AddressManagement/index.tsx
@@ -469,7 +469,6 @@ const AddressManagement = () => {
     listRef.current?.resetAfterIndex(0);
   }, [accountsList.length]);
 
-  console.log('currentAccountIndex', currentAccountIndex);
   return (
     <div className="page-address-management px-0 overflow-hidden">
       <PageHeader className="pt-[24px] mx-[20px]">
@@ -581,7 +580,7 @@ const AddressManagement = () => {
             itemData={filteredAccounts}
             itemCount={filteredAccounts.length}
             itemSize={getItemSize}
-            className="scroll-container"
+            className="address-scroll-container"
             overscanCount={6}
           >
             {Row}
diff --git a/src/ui/views/AddressManagement/style.less b/src/ui/views/AddressManagement/style.less
index b89ae3d21de..df687df7fcd 100644
--- a/src/ui/views/AddressManagement/style.less
+++ b/src/ui/views/AddressManagement/style.less
@@ -271,6 +271,12 @@
 
     padding-top: 84px;
   }
+  .address-group-list.management > .address-scroll-container {
+    &::-webkit-scrollbar {
+      display: initial;
+    }
+    .chromelike-scrollbar();
+  }
 }
 
 .custom-private-popup {