From de869941057d280da928129e1d96def2baf1f6c1 Mon Sep 17 00:00:00 2001
From: AricRedemption <aricredemption@gmail.com>
Date: Wed, 28 Feb 2024 18:42:46 +0800
Subject: [PATCH] chore: Update UI

---
 src/App.vue                             |  2 +-
 src/assets/icons-v3/bridge.svg          |  1 +
 src/assets/icons-v3/copy.svg            |  1 +
 src/assets/icons-v3/down-arrow.svg      |  1 +
 src/assets/icons-v3/receive.svg         |  1 +
 src/assets/icons-v3/send.svg            |  1 +
 src/assets/icons-v3/swap.svg            |  1 +
 src/assets/icons/setting-v3.svg         |  1 +
 src/assets/vue.svg                      |  1 -
 src/components/Avatar.vue               |  7 ++-
 src/components/headers/ServiceMenu.vue  | 14 ++---
 src/components/headers/SettingMenu.vue  | 79 +++++++++++++++++++++++++
 src/lib/account.ts                      |  8 ++-
 src/pages/accounts/components/Item.vue  |  2 +-
 src/pages/wallet/AccountHeader.vue      | 47 +++++++++++++++
 src/pages/wallet/Index.vue              | 11 +---
 src/pages/wallet/components/Balance.vue | 35 +++++++----
 src/router.ts                           | 10 +++-
 18 files changed, 186 insertions(+), 37 deletions(-)
 create mode 100644 src/assets/icons-v3/bridge.svg
 create mode 100644 src/assets/icons-v3/copy.svg
 create mode 100644 src/assets/icons-v3/down-arrow.svg
 create mode 100644 src/assets/icons-v3/receive.svg
 create mode 100644 src/assets/icons-v3/send.svg
 create mode 100644 src/assets/icons-v3/swap.svg
 create mode 100644 src/assets/icons/setting-v3.svg
 delete mode 100644 src/assets/vue.svg
 create mode 100644 src/components/headers/SettingMenu.vue
 create mode 100644 src/pages/wallet/AccountHeader.vue

diff --git a/src/App.vue b/src/App.vue
index 8279021..5de513e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -88,7 +88,7 @@ checkMigrate().then(async () => {
       </div>
 
       <!-- footer -->
-      <TheFooter v-if="!noFooter" />
+      <!-- <TheFooter v-if="!noFooter" /> -->
     </div>
   </div>
 </template>
diff --git a/src/assets/icons-v3/bridge.svg b/src/assets/icons-v3/bridge.svg
new file mode 100644
index 0000000..2d85215
--- /dev/null
+++ b/src/assets/icons-v3/bridge.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="48" height="48" viewBox="0 0 48 48"><defs><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg0_53_6184"><stop offset="0%" stop-color="#303133" stop-opacity="1"/><stop offset="100%" stop-color="#303133" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg1_53_6184"><stop offset="0%" stop-color="#303133" stop-opacity="1"/><stop offset="100%" stop-color="#303133" stop-opacity="0"/></linearGradient></defs><g><g><ellipse cx="24" cy="24" rx="24" ry="24" fill="#F5F7FA" fill-opacity="1"/></g><g><g transform="matrix(1,0,0,-1,0,48)"><path d="M31,24L31,34L29,34L29,24L31,24Z" fill-rule="evenodd" fill="url(#master_svg0_53_6184)" fill-opacity="1"/></g><g><path d="M19,24L19,34L17,34L17,24L19,24Z" fill-rule="evenodd" fill="url(#master_svg1_53_6184)" fill-opacity="1"/></g><g><path d="M28.9497,19.05025Q26.8995,17,24,17L24,19Q26.07107,19,27.53553,20.46447Q29,21.92893,29,24L31,24Q31,21.10051,28.9497,19.05025ZM20.46447,27.53553Q19,26.07107,19,24L17,24Q17,26.8995,19.05025,28.9497Q21.10051,31,24,31L24,29Q21.92893,29,20.46447,27.53553Z" fill-rule="evenodd" fill="#303133" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons-v3/copy.svg b/src/assets/icons-v3/copy.svg
new file mode 100644
index 0000000..11a8300
--- /dev/null
+++ b/src/assets/icons-v3/copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="22" height="22" viewBox="0 0 22 22"><defs><clipPath id="master_svg0_88_1776"><rect x="0" y="0" width="22" height="22" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_88_1776)"><g><path d="M18.021339697265624,14.829293688964844L16.023709697265623,14.829293688964844Q15.949839697265626,14.829293688964844,15.877389697265626,14.843693688964844Q15.804939697265626,14.858193688964844,15.736699697265625,14.886393688964844Q15.668449697265626,14.914693688964844,15.607029697265626,14.955693688964844Q15.545609697265625,14.996793688964845,15.493379697265626,15.048993688964844Q15.441149697265624,15.101193688964845,15.400109697265625,15.162693688964843Q15.359069697265625,15.224093688964844,15.330799697265626,15.292293688964843Q15.302529697265625,15.360593688964844,15.288119697265625,15.432993688964844Q15.273709697265625,15.505493688964844,15.273709697265625,15.579293688964844Q15.273709697265625,15.653193688964844,15.288119697265625,15.725693688964844Q15.302529697265625,15.798093688964844,15.330799697265626,15.866293688964843Q15.359069697265625,15.934593688964844,15.400109697265625,15.995993688964845Q15.441149697265624,16.057393688964844,15.493379697265626,16.109693688964846Q15.545609697265625,16.161893688964845,15.607029697265626,16.202893688964842Q15.668449697265626,16.243993688964842,15.736699697265625,16.272193688964844Q15.804939697265626,16.300493688964842,15.877389697265626,16.314893688964844Q15.949839697265626,16.329293688964846,16.023709697265623,16.329293688964846L18.021339697265624,16.329293688964846Q18.829039697265625,16.329293688964846,19.400739697265625,15.760893688964844Q19.974139697265628,15.190693688964844,19.974139697265628,14.383393688964844L19.974139697265628,4.018533688964844Q19.974139697265628,3.211246688964844,19.400739697265625,2.6410366889648436Q18.829039697265625,2.0725936889648438,18.021339697265624,2.0725936889648438L7.597229697265625,2.0725936889648438Q6.789608697265625,2.0725936889648438,6.217912697265625,2.6410366889648436Q5.644439697265625,3.2112476889648436,5.644439697265625,4.018533688964844L5.644439697265625,5.982693688964844Q5.644439697265625,6.056563688964843,5.658850697265625,6.129013688964844Q5.673261697265625,6.201453688964843,5.701529697265625,6.269703688964844Q5.729798697265625,6.337953688964843,5.770837697265625,6.399373688964843Q5.811876697265625,6.460793688964843,5.864109697265625,6.513023688964844Q5.916342697265625,6.565253688964844,5.977761697265625,6.606293688964843Q6.039181697265625,6.647333688964844,6.107426697265625,6.675603688964843Q6.175672697265625,6.703873688964844,6.248121697265625,6.718283688964844Q6.320571197265625,6.732693688964844,6.394439697265625,6.732693688964844Q6.468308197265625,6.732693688964844,6.540757697265625,6.718283688964844Q6.613206697265625,6.703873688964844,6.681452697265625,6.675603688964843Q6.749697697265625,6.647333688964844,6.811117697265625,6.606293688964843Q6.872536697265625,6.565253688964844,6.924769697265625,6.513023688964844Q6.977002697265625,6.460793688964843,7.018041697265625,6.399373688964843Q7.059080697265625,6.337953688964843,7.087349697265625,6.269703688964844Q7.115617697265625,6.201453688964843,7.130028697265625,6.129013688964844Q7.144439697265625,6.056563688964843,7.144439697265625,5.982693688964844L7.144439697265625,4.018533688964844Q7.144439697265625,3.835073688964844,7.2755426972656245,3.704718688964844Q7.408419697265625,3.5725936889648438,7.597229697265625,3.5725936889648438L18.021339697265624,3.5725936889648438Q18.210139697265625,3.5725936889648438,18.343039697265624,3.704718688964844Q18.474139697265628,3.835073688964844,18.474139697265628,4.018533688964844L18.474139697265628,14.383393688964844Q18.474139697265628,14.566893688964845,18.343039697265624,14.697193688964843Q18.210139697265625,14.829293688964844,18.021339697265624,14.829293688964844Z" fill-rule="evenodd" fill="#303133" fill-opacity="1"/></g><g><path d="M16.355517871093753,17.98146764831543L16.355517871093753,7.61660764831543Q16.355517871093753,6.809320648315429,15.78211787109375,6.23911064831543Q15.21041787109375,5.67066764831543,14.40271787109375,5.67066764831543L3.9786078710937502,5.67066764831543Q3.17098687109375,5.67066764831543,2.59929087109375,6.23911064831543Q2.02581787109375,6.8093216483154295,2.02581787109375,7.61660764831543L2.02581787109375,17.98146764831543Q2.02581787109375,18.788767648315428,2.59929087109375,19.358967648315428Q3.17098687109375,19.927367648315432,3.9786078710937502,19.927367648315432L14.40271787109375,19.927367648315432Q15.21041787109375,19.927367648315432,15.78211787109375,19.358967648315428Q16.355517871093753,18.788767648315428,16.355517871093753,17.98146764831543ZM14.72441787109375,7.30279264831543Q14.85551787109375,7.43314764831543,14.85551787109375,7.61660764831543L14.85551787109375,17.98146764831543Q14.85551787109375,18.164967648315432,14.72441787109375,18.29526764831543Q14.59151787109375,18.427367648315432,14.40271787109375,18.427367648315432L3.9786078710937502,18.427367648315432Q3.7898078710937497,18.427367648315432,3.65692087109375,18.29526764831543Q3.52581787109375,18.164967648315432,3.52581787109375,17.98146764831543L3.52581787109375,7.61660764831543Q3.52581787109375,7.43314764831543,3.65692087109375,7.30279264831543Q3.78979787109375,7.17066764831543,3.9786078710937502,7.17066764831543L14.40271787109375,7.17066764831543Q14.59151787109375,7.17066764831543,14.72441787109375,7.30279264831543Z" fill-rule="evenodd" fill="#303133" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons-v3/down-arrow.svg b/src/assets/icons-v3/down-arrow.svg
new file mode 100644
index 0000000..ad00731
--- /dev/null
+++ b/src/assets/icons-v3/down-arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="8" height="5" viewBox="0 0 8 5"><g transform="matrix(1,0,0,-1,0,10)"><path d="M4.78087,5.9760860000000005L6.70024,8.3753C7.22405,9.03007,6.75788,10,5.91937,10L2.08063,10C1.24212,10,0.775945,9.03007,1.29976,8.3753L3.21913,5.9760860000000005C3.61946,5.47568,4.38054,5.47568,4.78087,5.9760860000000005" fill="#909399" fill-opacity="1"/></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons-v3/receive.svg b/src/assets/icons-v3/receive.svg
new file mode 100644
index 0000000..b68ff49
--- /dev/null
+++ b/src/assets/icons-v3/receive.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="48" height="48" viewBox="0 0 48 48"><defs><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg0_53_6184"><stop offset="0%" stop-color="#303133" stop-opacity="1"/><stop offset="100%" stop-color="#303133" stop-opacity="0"/></linearGradient></defs><g><g><ellipse cx="24" cy="24" rx="24" ry="24" fill="#F5F7FA" fill-opacity="1"/></g><g><g transform="matrix(0.7071067690849304,0.7071067690849304,0.7071067690849304,-0.7071067690849304,-11.708910169107185,28.267810883857237)"><path d="M25.4940375390625,25.005970517578124L25.4497675390625,32.529670517578126L27.4497375390625,32.541440517578124L27.5059075390625,22.994090517578126L17.9585907890625,23.050295517578125L17.9703642890625,25.050260517578124L25.4940375390625,25.005970517578124Z" fill-rule="evenodd" fill="#303133" fill-opacity="1"/></g><g transform="matrix(1,0,0,-1,0,59.928955078125)"><path d="M23,43.9644775390625L23,29.9644775390625L25,29.9644775390625L25,43.9644775390625L23,43.9644775390625Z" fill-rule="evenodd" fill="url(#master_svg0_53_6184)" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons-v3/send.svg b/src/assets/icons-v3/send.svg
new file mode 100644
index 0000000..2ff0915
--- /dev/null
+++ b/src/assets/icons-v3/send.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="48" height="48" viewBox="0 0 48 48"><defs><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg0_53_6184"><stop offset="0%" stop-color="#303133" stop-opacity="1"/><stop offset="100%" stop-color="#303133" stop-opacity="0"/></linearGradient></defs><g><g><ellipse cx="24" cy="24" rx="24" ry="24" fill="#F5F7FA" fill-opacity="1"/></g><g><g transform="matrix(0.7071067690849304,-0.7071067690849304,0.7071067690849304,0.7071067690849304,-11.708864776137034,19.732237669311417)"><path d="M25.49404516845703,25.005909482421874L25.44977516845703,32.529609482421876L27.44974516845703,32.541379482421874L27.50591516845703,22.994029482421876L17.958598418457033,23.050234482421875L17.97037191845703,25.050199482421874L25.49404516845703,25.005909482421874Z" fill-rule="evenodd" fill="#303133" fill-opacity="1"/></g><g><path d="M23.000011444091797,32.0355224609375L23.000011444091797,18.0355224609375L25.000011444091797,18.0355224609375L25.000011444091797,32.0355224609375L23.000011444091797,32.0355224609375Z" fill-rule="evenodd" fill="url(#master_svg0_53_6184)" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons-v3/swap.svg b/src/assets/icons-v3/swap.svg
new file mode 100644
index 0000000..741fe0d
--- /dev/null
+++ b/src/assets/icons-v3/swap.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="48" height="48" viewBox="0 0 48 48"><defs><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg0_53_6184"><stop offset="0%" stop-color="#303133" stop-opacity="1"/><stop offset="100%" stop-color="#303133" stop-opacity="0"/></linearGradient><linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg1_53_6184"><stop offset="0%" stop-color="#303133" stop-opacity="1"/><stop offset="100%" stop-color="#303133" stop-opacity="0"/></linearGradient></defs><g><g><ellipse cx="24" cy="24" rx="24" ry="24" fill="#F5F7FA" fill-opacity="1"/></g><g><g transform="matrix(0,-1,-1,0,51.50001525878906,51.50001525878906)"><path d="M32.29713,25.175795258789062L33.79714,26.658025258789063L35.2029,25.23541525878906L29,19.10600525878906L29,35.50001525878906L31,35.50001525878906L31,23.894025258789064L32.29713,25.175795258789062Z" fill-rule="evenodd" fill="url(#master_svg0_53_6184)" fill-opacity="1"/></g><g transform="matrix(0,1,1,0,-8.499984741210938,8.499984741210938)"><path d="M20.29713,30.175764741210937L21.79714,31.65799474121094L23.2029,30.235384741210936L17,24.105974741210936L17,40.49998474121094L19,40.49998474121094L19,28.89399474121094L20.29713,30.175764741210937Z" fill-rule="evenodd" fill="url(#master_svg1_53_6184)" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/icons/setting-v3.svg b/src/assets/icons/setting-v3.svg
new file mode 100644
index 0000000..1d47283
--- /dev/null
+++ b/src/assets/icons/setting-v3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="22" height="22" viewBox="0 0 22 22"><defs><clipPath id="master_svg0_81_937"><rect x="0" y="0" width="22" height="22" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_81_937)"><g><path d="M9.80990298828125,19.017473941040038Q10.33877298828125,18.62507394104004,10.99998298828125,18.62507394104004Q11.66119298828125,18.62507394104004,12.19001298828125,19.017473941040038Q12.70981298828125,19.403073941040038,12.90551298828125,20.01517394104004Q12.92771298828125,20.084673941040037,12.96291298828125,20.148573941040038Q12.99801298828125,20.212473941040038,13.04491298828125,20.26837394104004Q13.09171298828125,20.32427394104004,13.14841298828125,20.37007394104004Q13.20511298828125,20.41597394104004,13.26961298828125,20.44997394104004Q13.33401298828125,20.484073941040037,13.40391298828125,20.505073941040038Q13.47371298828125,20.52607394104004,13.54631298828125,20.53327394104004Q13.61881298828125,20.540373941040038,13.69141298828125,20.53347394104004Q13.76401298828125,20.526473941040038,13.83391298828125,20.50567394104004Q16.33031298828125,19.76247394104004,18.14591298828125,17.875773941040038Q18.19371298828125,17.82607394104004,18.23171298828125,17.76847394104004Q18.26961298828125,17.710973941040038,18.29651298828125,17.647373941040037Q18.32331298828125,17.58387394104004,18.33811298828125,17.51647394104004Q18.35291298828125,17.449173941040037,18.35511298828125,17.38017394104004Q18.35741298828125,17.31127394104004,18.34701298828125,17.243073941040038Q18.33671298828125,17.174973941040037,18.31401298828125,17.10977394104004Q18.29141298828125,17.04467394104004,18.25731298828125,16.98467394104004Q18.22321298828125,16.924773941040037,18.17871298828125,16.87207394104004Q17.70831298828125,16.31447394104004,17.70831298828125,15.583373941040039Q17.70831298828125,14.754973941040038,18.29411298828125,14.16917394104004Q18.87991298828125,13.583373941040039,19.70831298828125,13.583373941040039Q19.80801298828125,13.583373941040039,19.90721298828125,13.593173941040039Q19.97581298828125,13.59987394104004,20.04451298828125,13.593973941040039Q20.11321298828125,13.588073941040038,20.17971298828125,13.569773941040038Q20.24621298828125,13.551473941040038,20.30821298828125,13.52137394104004Q20.37031298828125,13.491173941040039,20.42581298828125,13.45027394104004Q20.48131298828125,13.40937394104004,20.52841298828125,13.35897394104004Q20.57551298828125,13.30857394104004,20.61261298828125,13.250473941040038Q20.64971298828125,13.192373941040039,20.67561298828125,13.128473941040038Q20.70151298828125,13.06457394104004,20.71531298828125,12.99697394104004Q20.91661298828125,12.01283394104004,20.91661298828125,11.000043941040039Q20.91661298828125,9.471083941040039,20.46241298828125,8.02502394104004Q20.44451298828125,7.967943941040039,20.41771298828125,7.9144339410400395Q20.39101298828125,7.860923941040039,20.35611298828125,7.812333941040039Q20.32121298828125,7.763733941040039,20.27911298828125,7.721283941040039Q20.23691298828125,7.678833941040039,20.18861298828125,7.643603941040039Q20.14021298828125,7.608373941040039,20.08691298828125,7.581253941040039Q20.03361298828125,7.554133941040039,19.97661298828125,7.535813941040039Q19.91961298828125,7.517493941040039,19.86051298828125,7.508423941040039Q19.80141298828125,7.4993639410400394,19.74161298828125,7.499793941040039L19.70831298828125,7.5000439410400395Q18.87991298828125,7.5000439410400395,18.29411298828125,6.914263941040039Q17.70831298828125,6.3284739410400395,17.70831298828125,5.500043941040039Q17.70831298828125,5.032423941040038,17.91311298828125,4.617103941040039Q17.93961298828125,4.563183941040039,17.95731298828125,4.505713941040039Q17.97491298828125,4.448253941040039,17.98321298828125,4.388703941040039Q17.99151298828125,4.329163941040039,17.99021298828125,4.269053941040039Q17.98891298828125,4.208953941040039,17.97801298828125,4.149823941040039Q17.96711298828125,4.090703941040039,17.94701298828125,4.0340639410400385Q17.92681298828125,3.977423941040039,17.89791298828125,3.9247139410400393Q17.86901298828125,3.872013941040039,17.83201298828125,3.8245839410400393Q17.79511298828125,3.777153941040039,17.75111298828125,3.736223941040039Q15.97571298828125,2.0854266410400393,13.65121298828125,1.441956941040039Q13.58921298828125,1.424793941040039,13.52521298828125,1.418439941040039Q13.46111298828125,1.4120869410400392,13.39701298828125,1.4167289410400392Q13.33281298828125,1.421370941040039,13.27041298828125,1.436873941040039Q13.20791298828125,1.4523759410400392,13.14901298828125,1.4782849410400392Q13.09021298828125,1.5041939410400391,13.03651298828125,1.539752941040039Q12.98291298828125,1.575311941040039,12.93621298828125,1.619482941040039Q12.88941298828125,1.6636529410400391,12.85081298828125,1.715143941040039Q12.81221298828125,1.7666339410400391,12.78301298828125,1.8239409410400391Q12.53051298828125,2.318906941040039,12.05841298828125,2.614156941040039Q11.57452298828125,2.916727941040039,10.99998298828125,2.916727941040039Q10.42544298828125,2.916727941040039,9.94159298828125,2.614156941040039Q9.469452988281251,2.318906941040039,9.21694298828125,1.8239409410400391Q9.18770298828125,1.7666339410400391,9.14913298828125,1.715142941040039Q9.11056298828125,1.6636529410400391,9.06379298828125,1.6194819410400392Q9.01702298828125,1.575311941040039,8.96340298828125,1.539752941040039Q8.90979298828125,1.5041939410400391,8.85090298828125,1.4782849410400392Q8.79202298828125,1.4523759410400392,8.729582988281251,1.436873941040039Q8.667142988281249,1.421370941040039,8.60298298828125,1.4167289410400392Q8.53881298828125,1.4120869410400392,8.47479298828125,1.418439941040039Q8.41077298828125,1.424793941040039,8.348772988281251,1.441956941040039Q6.02424298828125,2.085424941040039,4.248882988281251,3.736223941040039Q4.2048529882812495,3.777153941040039,4.16791298828125,3.8245839410400393Q4.13096298828125,3.872013941040039,4.10205298828125,3.9247139410400393Q4.07313298828125,3.977423941040039,4.05298298828125,4.0340639410400385Q4.03283298828125,4.090703941040039,4.0219529882812495,4.149823941040039Q4.011082988281251,4.208953941040039,4.0097729882812505,4.269053941040039Q4.00845298828125,4.329163941040039,4.01672298828125,4.388703941040039Q4.0250029882812495,4.448253941040039,4.04265298828125,4.505713941040039Q4.06031298828125,4.563183941040039,4.0868929882812495,4.617103941040039Q4.29164298828125,5.032423941040038,4.29164298828125,5.500043941040039Q4.29164298828125,6.3284739410400395,3.70586298828125,6.914263941040039Q3.12007298828125,7.5000439410400395,2.29698298828125,7.500063941040039L2.25838698828125,7.499793941040039Q2.1985639882812498,7.4993639410400394,2.13942998828125,7.508433941040039Q2.08029598828125,7.517493941040039,2.02334598828125,7.535813941040039Q1.96639698828125,7.554133941040039,1.91307178828125,7.581253941040039Q1.85974678828125,7.608373941040039,1.81139508828125,7.643603941040039Q1.76304338828125,7.678833941040039,1.72088798828125,7.721283941040039Q1.67873198828125,7.763733941040039,1.64383898828125,7.812323941040039Q1.6089449882812499,7.860913941040039,1.58219598828125,7.9144339410400395Q1.55544698828125,7.967943941040039,1.53751898828125,8.02501394104004Q1.08331298828125,9.47102394104004,1.08331298828125,11.000043941040039Q1.08331298828125,12.012853941040039,1.2846039882812499,12.99697394104004Q1.29842198828125,13.06457394104004,1.32432798828125,13.128473941040038Q1.35023398828125,13.192373941040039,1.38735898828125,13.250473941040038Q1.42448498828125,13.30857394104004,1.47158398828125,13.35897394104004Q1.51868398828125,13.40937394104004,1.5741779882812499,13.45027394104004Q1.62967298828125,13.491173941040039,1.69170098828125,13.52137394104004Q1.75372948828125,13.551473941040038,1.82021208828125,13.569773941040038Q1.88669468828125,13.588073941040038,1.95540198828125,13.593973941040039Q2.02410998828125,13.59987394104004,2.0927379882812502,13.593173941040039Q2.19190398828125,13.583373941040039,2.29164698828125,13.583373941040039Q3.12007298828125,13.583373941040039,3.70586298828125,14.16917394104004Q4.29164298828125,14.754973941040038,4.29164298828125,15.583373941040039Q4.29164298828125,16.31447394104004,3.82120298828125,16.87207394104004Q3.7767329882812497,16.924773941040037,3.74261298828125,16.98467394104004Q3.70850298828125,17.04467394104004,3.68588298828125,17.10977394104004Q3.66327298828125,17.174973941040037,3.65292298828125,17.243073941040038Q3.64256298828125,17.31127394104004,3.64482298828125,17.38017394104004Q3.6470729882812503,17.449173941040037,3.66186298828125,17.51647394104004Q3.67664298828125,17.58387394104004,3.7034629882812498,17.647373941040037Q3.73028298828125,17.710973941040038,3.76824298828125,17.76847394104004Q3.80620298828125,17.82607394104004,3.85402298828125,17.875773941040038Q5.6696829882812505,19.76247394104004,8.16604298828125,20.50567394104004Q8.235932988281249,20.526473941040038,8.30852298828125,20.53347394104004Q8.381112988281249,20.540373941040038,8.45367298828125,20.53327394104004Q8.52624298828125,20.52607394104004,8.59607298828125,20.505073941040038Q8.66590298828125,20.484073941040037,8.73038298828125,20.44997394104004Q8.794862988281249,20.41597394104004,8.85156298828125,20.37007394104004Q8.90827298828125,20.32427394104004,8.95508298828125,20.26837394104004Q9.00190298828125,20.212473941040038,9.037072988281249,20.148573941040038Q9.07223298828125,20.084673941040037,9.09444298828125,20.01517394104004Q9.29012298828125,19.403073941040038,9.80990298828125,19.017473941040038ZM13.08381298828125,17.81277394104004Q12.15691298828125,17.12507394104004,10.99998298828125,17.12507394104004Q9.84306298828125,17.12507394104004,8.916112988281249,17.81277394104004Q8.325552988281249,18.25097394104004,7.97413298828125,18.85797394104004Q6.52583298828125,18.30497394104004,5.3702529882812495,17.25837394104004Q5.79164298828125,16.49827394104004,5.79164298828125,15.583373941040039Q5.79164298828125,14.133673941040039,4.76652298828125,13.108473941040039Q3.87208298828125,12.21407394104004,2.65439598828125,12.100043941040038Q2.58331298828125,11.555363941040039,2.58331298828125,11.000043941040039Q2.58331298828125,9.957663941040039,2.8314049882812498,8.961933941040039Q3.93903298828125,8.802403941040039,4.76652298828125,7.974923941040039Q5.79164298828125,6.949793941040039,5.79164298828125,5.500043941040039Q5.79164298828125,4.9837839410400395,5.64825298828125,4.50278394104004Q6.80816298828125,3.541733941040039,8.22340298828125,3.051125941040039Q8.60104298828125,3.544993941040039,9.14627298828125,3.885953941040039Q9.99504298828125,4.416723941040039,10.99998298828125,4.416723941040039Q12.00491298828125,4.416723941040039,12.85371298828125,3.885953941040039Q13.39891298828125,3.544993941040039,13.77651298828125,3.051126941040039Q15.19181298828125,3.541733941040039,16.35171298828125,4.50278394104004Q16.20831298828125,4.9837839410400395,16.20831298828125,5.500043941040039Q16.20831298828125,6.949793941040039,17.233412988281252,7.974923941040039Q18.06231298828125,8.80375394104004,19.16871298828125,8.962463941040038Q19.41661298828125,9.957973941040038,19.41661298828125,11.000043941040039Q19.41661298828125,11.555353941040039,19.34561298828125,12.100043941040038Q18.12791298828125,12.21407394104004,17.233412988281252,13.108473941040039Q16.20831298828125,14.133673941040039,16.20831298828125,15.583373941040039Q16.20831298828125,16.49827394104004,16.62971298828125,17.25837394104004Q15.47411298828125,18.30497394104004,14.02581298828125,18.85797394104004Q13.67441298828125,18.25097394104004,13.08381298828125,17.81277394104004Z" fill-rule="evenodd" fill="#303133" fill-opacity="1"/></g><g><path d="M8.20105501171875,8.201035938232422Q7.04168701171875,9.360407938232422,7.04168701171875,10.999997938232422Q7.04168701171875,12.639597938232422,8.20105501171875,13.798967938232423Q9.36042701171875,14.958337938232422,11.00001701171875,14.958337938232422Q12.63961701171875,14.958337938232422,13.79898701171875,13.798967938232423Q14.95835701171875,12.639597938232422,14.95835701171875,10.999997938232422Q14.95835701171875,9.360407938232422,13.79898701171875,8.201035938232422Q12.63961701171875,7.041667938232422,11.00001701171875,7.041667938232422Q9.36042701171875,7.041667938232422,8.20105501171875,8.201035938232422ZM9.26171701171875,12.738307938232422Q8.54168701171875,12.018277938232423,8.54168701171875,10.999997938232422Q8.54168701171875,9.98172793823242,9.26171701171875,9.261697938232421Q9.981747011718749,8.541667938232422,11.00001701171875,8.541667938232422Q12.01829701171875,8.541667938232422,12.73832701171875,9.261697938232421Q13.45835701171875,9.98172793823242,13.45835701171875,10.999997938232422Q13.45835701171875,12.018277938232423,12.73832701171875,12.738307938232422Q12.01829701171875,13.458337938232422,11.00001701171875,13.458337938232422Q9.981747011718749,13.458337938232422,9.26171701171875,12.738307938232422Z" fill-rule="evenodd" fill="#303133" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/vue.svg b/src/assets/vue.svg
deleted file mode 100644
index 770e9d3..0000000
--- a/src/assets/vue.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
index babf337..db4f58b 100644
--- a/src/components/Avatar.vue
+++ b/src/components/Avatar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const { address } = defineProps<{
-  address: string
+const { id } = defineProps<{
+  id: string
 }>()
 
 const colors = [
@@ -16,7 +16,8 @@ const colors = [
 ]
 
 const computedGradientColor = computed(() => {
-  const index = Math.abs(address.split('').reduce((prev, curr) => prev + curr.charCodeAt(0), 0)) % colors.length
+  const index = Math.abs(id.split('').reduce((prev, curr) => prev + curr.charCodeAt(0), 0)) % colors.length
+
   return colors[index]
 })
 </script>
diff --git a/src/components/headers/ServiceMenu.vue b/src/components/headers/ServiceMenu.vue
index a724f55..0df68e1 100644
--- a/src/components/headers/ServiceMenu.vue
+++ b/src/components/headers/ServiceMenu.vue
@@ -2,11 +2,11 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import BtcLogoImg from '@/assets/images/btc-logo.svg?url'
-import DownArrowImg from '@/assets/icons/down-arrow.svg?url'
 import SpaceLogoImg from '@/assets/images/space-logo.svg?url'
+import DownArrowImg from '@/assets/icons-v3/down-arrow.svg?url'
+import { type Service, getServiceNetwork } from '@/lib/network'
 import NetworkTypeImg from '@/assets/icons/network-type.svg?url'
 import AllNetworkTypeImg from '@/assets/icons/all-network-type.svg?url'
-import { type Service, getServiceNetwork } from '@/lib/network'
 
 const router = useRouter()
 const service = ref<Service | undefined>()
@@ -21,11 +21,11 @@ const goToNetwork = () => {
 </script>
 
 <template>
-  <div class="w-12 rounded-[20px] py-1 px-2 flex gap-1.5 bg-[#F5F5F5] cursor-pointer" @click="goToNetwork">
-    <img v-if="service === 'all'" :src="AllNetworkTypeImg" alt="" class="w-4 h-4" />
-    <img v-else-if="service === 'btc'" :src="BtcLogoImg" alt="Bitcoin" class="w-4 h-4" />
-    <img v-else-if="service === 'mvc'" :src="SpaceLogoImg" alt="Microvisionchain" class="w-4 h-4" />
-    <img v-else :src="NetworkTypeImg" alt="" class="w-4 h-4" />
+  <div class="w-[50px] h-[34px] rounded-[18px] py-1 px-2 flex items-center justify-center gap-1 bg-[#F5F5F5] cursor-pointer" @click="goToNetwork">
+    <img v-if="service === 'all'" :src="AllNetworkTypeImg" alt="" class="w-[22px] h-[22px]" />
+    <img v-else-if="service === 'btc'" :src="BtcLogoImg" alt="Bitcoin" class="w-[22px] h-[22px]" />
+    <img v-else-if="service === 'mvc'" :src="SpaceLogoImg" alt="Microvisionchain" class="w-[22px] h-[22px]" />
+    <img v-else :src="NetworkTypeImg" alt="" class="w-[22px] h-[22px]" />
     <img :src="DownArrowImg" alt="" />
   </div>
 </template>
diff --git a/src/components/headers/SettingMenu.vue b/src/components/headers/SettingMenu.vue
new file mode 100644
index 0000000..baf7984
--- /dev/null
+++ b/src/components/headers/SettingMenu.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import password from '@/lib/password'
+import { useRouter } from 'vue-router'
+import ResetModal from '../ResetModal.vue'
+import SettingIcon from '@/assets/icons/setting-v3.svg'
+import { type Account, getCurrentAccount } from '@/lib/account'
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
+
+const router = useRouter()
+
+const account = ref<Account | undefined>()
+getCurrentAccount().then((acc) => {
+  account.value = acc
+})
+
+const hasPassword = ref(false)
+password.has().then((has) => {
+  hasPassword.value = has
+})
+const lock = async () => {
+  await password.lock()
+  router.push('/lock')
+}
+
+const setPassword = () => {
+  router.push('/wallet/set-password')
+}
+
+const showResetModal = ref(false)
+
+const toAccountList = () => {
+  router.push('/accounts')
+}
+
+const toSetting = () => {
+  router.push('/settings')
+}
+</script>
+
+<template>
+  <Menu as="div" class="relative z-[1] transition-all duration-200" v-if="account">
+    <MenuButton class="relative flex items-center gap-x-0.5 py-1 hover:text-blue-700">
+      <SettingIcon class="cursor-pointer" />
+    </MenuButton>
+
+    <MenuItems class="absolute right-0 rounded-md border border-gray-100 bg-white text-xs shadow-md">
+      <MenuItem>
+        <button class="menu-item" @click="toSetting">Setting</button>
+      </MenuItem>
+
+      <MenuItem>
+        <button class="menu-item" @click="lock" v-if="hasPassword">Lock</button>
+        <button class="menu-item" @click="setPassword" v-else>Set Password</button>
+      </MenuItem>
+
+      <MenuItem>
+        <button class="menu-item" @click="toAccountList">Add / Switch Account</button>
+      </MenuItem>
+
+      <!-- disconnect button -->
+      <MenuItem v-if="hasPassword">
+        <button class="menu-item" @click="showResetModal = true">Reset Account</button>
+      </MenuItem>
+    </MenuItems>
+  </Menu>
+
+  <ResetModal v-model:show="showResetModal" />
+</template>
+
+<style scoped lang="css">
+.menu-item {
+  @apply w-full whitespace-nowrap rounded-inherit p-4 text-left capitalize hover:bg-gray-50 hover:text-blue-500;
+}
+
+.reset-button {
+  @apply rounded-lg border-2 py-3 text-sm font-bold;
+}
+</style>
diff --git a/src/lib/account.ts b/src/lib/account.ts
index 1173cbf..1b544b9 100644
--- a/src/lib/account.ts
+++ b/src/lib/account.ts
@@ -150,8 +150,12 @@ export async function getAccount(accountId: string): Promise<Account | undefined
   return account
 }
 
+export async function getCurrentAccountId() {
+  return await storage.get(CURRENT_ACCOUNT_ID)
+}
+
 export async function getCurrentAccount(): Promise<Account | undefined> {
-  const currentAccountId = await storage.get(CURRENT_ACCOUNT_ID)
+  const currentAccountId = await getCurrentAccountId()
   if (!currentAccountId) {
     return
   }
@@ -164,7 +168,7 @@ export async function removeCurrentAccount(): Promise<boolean> {
     return false
   }
 
-  const currentAccountId = await storage.get<string>(CURRENT_ACCOUNT_ID)
+  const currentAccountId = await getCurrentAccountId()
   if (!currentAccountId) {
     return false
   }
diff --git a/src/pages/accounts/components/Item.vue b/src/pages/accounts/components/Item.vue
index dcd29cd..c61c378 100644
--- a/src/pages/accounts/components/Item.vue
+++ b/src/pages/accounts/components/Item.vue
@@ -80,7 +80,7 @@ const openEditNameModal = ref(false)
 
     <div class="flex items-center justify-start gap-x-2 py-4" :key="props.account.id">
       <!-- avatar -->
-      <Avatar :address="props.account.mvc.mainnetAddress" />
+      <Avatar :id="props.account.id" />
       <!-- info -->
       <div class="group flex flex-col">
         <div class="flex items-center gap-x-2">
diff --git a/src/pages/wallet/AccountHeader.vue b/src/pages/wallet/AccountHeader.vue
new file mode 100644
index 0000000..e81957f
--- /dev/null
+++ b/src/pages/wallet/AccountHeader.vue
@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import Avatar from '@/components/Avatar.vue'
+import { type Account } from '@/lib/account'
+import CopyIcon from '@/assets/icons-v3/copy.svg'
+import { PencilSquareIcon } from '@heroicons/vue/24/solid'
+import ServiceMenu from '@/components/headers/ServiceMenu.vue'
+import SettingMenu from '@/components/headers/SettingMenu.vue'
+import EditName from '@/pages/accounts/components/EditName.vue'
+
+const router = useRouter()
+
+const { account } = defineProps<{
+  account: Account
+}>()
+
+const openEditNameModal = ref(false)
+
+const toAccountList = () => {
+  router.push('/accounts')
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-between py-3">
+    <div class="flex items-center space-x-2 cursor-pointer" @click="toAccountList">
+      <Avatar :id="account.id" />
+      <div class="flex items-center gap-x-2">
+        <span class="text-black-primary text-sm">{{ account.name }}</span>
+        <PencilSquareIcon
+          @click.stop
+          @click="openEditNameModal = true"
+          class="h-4 w-4 cursor-pointer text-gray-400 hover:text-gray-500 group-hover:inline"
+        />
+      </div>
+      <EditName v-model:open="openEditNameModal" :account="account" />
+    </div>
+    <div class="flex items-center gap-x-4">
+      <CopyIcon class="cursor-pointer" />
+      <SettingMenu />
+      <ServiceMenu class="cursor-pointer" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="css"></style>
diff --git a/src/pages/wallet/Index.vue b/src/pages/wallet/Index.vue
index 4baad95..bb25b0d 100644
--- a/src/pages/wallet/Index.vue
+++ b/src/pages/wallet/Index.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import Balance from './components/Balance.vue'
+import AccountHeader from './AccountHeader.vue'
 import AssetList from './components/AssetList.vue'
 import AccountItem from '../accounts/components/Item.vue'
 import { getCurrentAccount, type Account } from '@/lib/account'
@@ -14,17 +15,11 @@ getCurrentAccount().then((acc) => {
 </script>
 
 <template>
-  <div class="nicer-scrollbar">
-    <AccountItem
-      :show-network="true"
-      v-if="currentAccount"
-      :account="currentAccount"
-      :current-account="currentAccount"
-    />
+  <div class="nicer-scrollbar pt-3 space-y-6">
+    <AccountHeader v-if="currentAccount" :account="currentAccount"/>
 
     <Balance />
 
-    <!-- Asset List -->
     <AssetList />
   </div>
 </template>
diff --git a/src/pages/wallet/components/Balance.vue b/src/pages/wallet/components/Balance.vue
index 9a6b215..4ac42d2 100644
--- a/src/pages/wallet/components/Balance.vue
+++ b/src/pages/wallet/components/Balance.vue
@@ -1,6 +1,11 @@
 <script lang="ts" setup>
 import { useRouter } from 'vue-router'
 import { totalBalance } from '@/lib/balance'
+import SendIcon from '@/assets/icons-v3/send.svg'
+import SwapIcon from '@/assets/icons-v3/swap.svg'
+import BridgeIcon from '@/assets/icons-v3/bridge.svg'
+import ReceiveIcon from '@/assets/icons-v3/receive.svg'
+
 import { ArrowUpRightIcon, QrCodeIcon } from '@heroicons/vue/20/solid'
 
 const router = useRouter()
@@ -17,22 +22,26 @@ function toSelectAsset(purpose: 'receive' | 'send') {
 </script>
 
 <template>
-  <div class="pt-4">
-    <div class="text-gray-500">Total Balance</div>
-    <div class="mt-2 text-3xl font-bold">
-      $ {{ totalBalance.toFixed(2) }} USD
-    </div>
+  <div>
+    <div class="mt-2 text-3xl font-bold">$ {{ totalBalance.toFixed(2) }} USD</div>
 
-    <!-- 接收和发送按钮 -->
-    <div class="mt-4 grid grid-cols-2 gap-2 self-stretch">
-      <button @click="toSelectAsset('send')" class="button">
-        <ArrowUpRightIcon class="mr-1 h-4 w-4" />
+    <div class="text-black-secondary flex justify-between mt-6 text-[13px]">
+      <div class="cursor-pointer flex flex-col items-center gap-y-[11px]" @click="toSelectAsset('send')">
+        <SendIcon />
         <span>Send</span>
-      </button>
-      <button @click="toSelectAsset('receive')" class="button">
-        <QrCodeIcon class="mr-1 h-4 w-4" />
+      </div>
+      <div class="cursor-pointer flex flex-col items-center gap-y-[11px]" @click="toSelectAsset('receive')">
+        <ReceiveIcon />
         <span>Receive</span>
-      </button>
+      </div>
+      <div class="cursor-not-allowed flex flex-col items-center gap-y-[11px]">
+        <SwapIcon />
+        <span>Swap</span>
+      </div>
+      <div class="cursor-not-allowed flex flex-col items-center gap-y-[11px]">
+        <BridgeIcon />
+        <span>Bridge</span>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/router.ts b/src/router.ts
index f960025..39599b6 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -298,7 +298,15 @@ const routes = [
 
   { path: '/tokens', component: () => import('./pages/tokens/Index.vue') },
 
-  { path: '/settings', component: () => import('./pages/settings/Index.vue') },
+  {
+    path: '/settings',
+    component: () => import('./pages/settings/Index.vue'),
+    meta: {
+      secondaryHeader: true,
+      headerTitle: 'Setting',
+      noFooter: true,
+    },
+  },
   {
     path: '/accounts',
     component: () => import('./pages/accounts/Index.vue'),