diff --git a/assets/comp/wallet/prefab/AccountList.prefab b/assets/comp/wallet/prefab/AccountList.prefab
new file mode 100644
index 0000000..d8f6c82
--- /dev/null
+++ b/assets/comp/wallet/prefab/AccountList.prefab
@@ -0,0 +1,1347 @@
+[
+  {
+    "__type__": "cc.Prefab",
+    "_name": "",
+    "_objFlags": 0,
+    "_native": "",
+    "data": {
+      "__id__": 1
+    },
+    "optimizationPolicy": 0,
+    "asyncLoadAssets": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "AccountList",
+    "_objFlags": 0,
+    "_parent": null,
+    "_children": [
+      {
+        "__id__": 2
+      },
+      {
+        "__id__": 7
+      },
+      {
+        "__id__": 10
+      },
+      {
+        "__id__": 13
+      },
+      {
+        "__id__": 16
+      },
+      {
+        "__id__": 21
+      }
+    ],
+    "_active": true,
+    "_level": 1,
+    "_components": [
+      {
+        "__id__": 39
+      }
+    ],
+    "_prefab": {
+      "__id__": 40
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 1024,
+      "height": 512
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "New Sprite(Splash)",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 2,
+    "_components": [
+      {
+        "__id__": 3
+      },
+      {
+        "__id__": 4
+      },
+      {
+        "__id__": 5
+      }
+    ],
+    "_prefab": {
+      "__id__": 6
+    },
+    "_opacity": 97,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 1024,
+      "height": 512
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "a23235d1-15db-4b95-8439-a2e005bfff91"
+    },
+    "_type": 0,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_state": 0,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "alignMode": 1,
+    "_target": null,
+    "_alignFlags": 45,
+    "_left": 0,
+    "_right": 0,
+    "_top": 0,
+    "_bottom": 0,
+    "_verticalCenter": 0,
+    "_horizontalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 100,
+    "_originalHeight": 100,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.BlockInputEvents",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "66a824c7-abec-49e8-8df0-d7844859a93e"
+    },
+    "fileId": "232498zXZKb5yZOib2WAy2",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "board",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 2,
+    "_components": [
+      {
+        "__id__": 8
+      }
+    ],
+    "_prefab": {
+      "__id__": 9
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 400,
+      "height": 350
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 7
+    },
+    "_enabled": true,
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "f8a72ecb-343d-4c53-9429-112006b05c75"
+    },
+    "_type": 1,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_state": 0,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "66a824c7-abec-49e8-8df0-d7844859a93e"
+    },
+    "fileId": "46b1qBXuNGNLtoInQJI7X7",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "bar-black",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 2,
+    "_components": [
+      {
+        "__id__": 11
+      }
+    ],
+    "_prefab": {
+      "__id__": 12
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 396,
+      "height": 35
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": -156,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 180,
+    "_rotationY": 180,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": -1,
+      "w": 6.123233995736766e-17
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 10
+    },
+    "_enabled": true,
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "040ee26c-fe0c-4996-a957-4c17cd376ff5"
+    },
+    "_type": 1,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_state": 0,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "66a824c7-abec-49e8-8df0-d7844859a93e"
+    },
+    "fileId": "50ELy6AEpGF4fpCSr6L/H3",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "bar-black",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 2,
+    "_components": [
+      {
+        "__id__": 14
+      }
+    ],
+    "_prefab": {
+      "__id__": 15
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 396,
+      "height": 35
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 158,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 13
+    },
+    "_enabled": true,
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "040ee26c-fe0c-4996-a957-4c17cd376ff5"
+    },
+    "_type": 1,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_state": 0,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "66a824c7-abec-49e8-8df0-d7844859a93e"
+    },
+    "fileId": "e7CuJ5emJPCrv8HDCseGqV",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "close",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 2,
+    "_components": [
+      {
+        "__id__": 17
+      },
+      {
+        "__id__": 18
+      }
+    ],
+    "_prefab": {
+      "__id__": 20
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 32,
+      "height": 32
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 192,
+      "y": 171,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 16
+    },
+    "_enabled": true,
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "94a5022b-77d8-4fca-b843-c7b59add72aa"
+    },
+    "_type": 0,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_state": 0,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Button",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 16
+    },
+    "_enabled": true,
+    "duration": 0.1,
+    "zoomScale": 1.2,
+    "clickEvents": [
+      {
+        "__id__": 19
+      }
+    ],
+    "_N$interactable": true,
+    "_N$enableAutoGrayEffect": false,
+    "_N$transition": 3,
+    "transition": 3,
+    "_N$normalColor": {
+      "__type__": "cc.Color",
+      "r": 214,
+      "g": 214,
+      "b": 214,
+      "a": 255
+    },
+    "_N$pressedColor": {
+      "__type__": "cc.Color",
+      "r": 211,
+      "g": 211,
+      "b": 211,
+      "a": 255
+    },
+    "pressedColor": {
+      "__type__": "cc.Color",
+      "r": 211,
+      "g": 211,
+      "b": 211,
+      "a": 255
+    },
+    "_N$hoverColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "hoverColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_N$disabledColor": {
+      "__type__": "cc.Color",
+      "r": 124,
+      "g": 124,
+      "b": 124,
+      "a": 255
+    },
+    "_N$normalSprite": null,
+    "_N$pressedSprite": null,
+    "pressedSprite": null,
+    "_N$hoverSprite": null,
+    "hoverSprite": null,
+    "_N$disabledSprite": null,
+    "_N$target": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.ClickEvent",
+    "target": {
+      "__id__": 1
+    },
+    "component": "",
+    "_componentId": "60cbe4UoLpE4Y4GHQbqchwx",
+    "handler": "closeMe",
+    "customEventData": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "66a824c7-abec-49e8-8df0-d7844859a93e"
+    },
+    "fileId": "2bZgaR9VFEGLc4F/CVl8I8",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "New ScrollView",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [
+      {
+        "__id__": 22
+      },
+      {
+        "__id__": 29
+      }
+    ],
+    "_active": true,
+    "_level": 2,
+    "_components": [
+      {
+        "__id__": 37
+      },
+      {
+        "__id__": 27
+      }
+    ],
+    "_prefab": {
+      "__id__": 38
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 396,
+      "height": 280
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "scrollBar",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 21
+    },
+    "_children": [
+      {
+        "__id__": 23
+      }
+    ],
+    "_active": true,
+    "_level": 0,
+    "_components": [
+      {
+        "__id__": 26
+      },
+      {
+        "__id__": 34
+      },
+      {
+        "__id__": 35
+      }
+    ],
+    "_prefab": {
+      "__id__": 36
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 6,
+      "height": 280
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 1,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 198,
+      "y": 0,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "bar",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 22
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 0,
+    "_components": [
+      {
+        "__id__": 24
+      }
+    ],
+    "_prefab": {
+      "__id__": 25
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 4,
+      "height": 30
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 1,
+      "y": 0
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": -1,
+      "y": 0,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 23
+    },
+    "_enabled": true,
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "5c3bb932-6c3c-468f-88a9-c8c61d458641"
+    },
+    "_type": 1,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_state": 0,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "66a824c7-abec-49e8-8df0-d7844859a93e"
+    },
+    "fileId": "218GZdTrxHEpZSo5e1jcxN",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Scrollbar",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 22
+    },
+    "_enabled": true,
+    "_scrollView": {
+      "__id__": 27
+    },
+    "_touching": false,
+    "_opacity": 255,
+    "enableAutoHide": true,
+    "autoHideTime": 1,
+    "_N$handle": {
+      "__id__": 24
+    },
+    "_N$direction": 1,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.ScrollView",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 21
+    },
+    "_enabled": true,
+    "horizontal": false,
+    "vertical": true,
+    "inertia": true,
+    "brake": 0.75,
+    "elastic": true,
+    "bounceDuration": 0.23,
+    "scrollEvents": [],
+    "cancelInnerEvents": true,
+    "_N$content": {
+      "__id__": 28
+    },
+    "content": {
+      "__id__": 28
+    },
+    "_N$horizontalScrollBar": null,
+    "_N$verticalScrollBar": {
+      "__id__": 26
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "content",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 29
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 0,
+    "_components": [
+      {
+        "__id__": 32
+      }
+    ],
+    "_prefab": {
+      "__id__": 33
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 396,
+      "height": 280
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 1
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 140,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "view",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 21
+    },
+    "_children": [
+      {
+        "__id__": 28
+      }
+    ],
+    "_active": true,
+    "_level": 0,
+    "_components": [
+      {
+        "__id__": 30
+      }
+    ],
+    "_prefab": {
+      "__id__": 31
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 396,
+      "height": 280
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Mask",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 29
+    },
+    "_enabled": true,
+    "_spriteFrame": null,
+    "_type": 0,
+    "_segments": 64,
+    "_N$alphaThreshold": 0,
+    "_N$inverted": false,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "66a824c7-abec-49e8-8df0-d7844859a93e"
+    },
+    "fileId": "64KtHAJ35Ho7uPkyFUfZCr",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Layout",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 28
+    },
+    "_enabled": true,
+    "_layoutSize": {
+      "__type__": "cc.Size",
+      "width": 300,
+      "height": 200
+    },
+    "_resize": 0,
+    "_N$layoutType": 2,
+    "_N$padding": 0,
+    "_N$cellSize": {
+      "__type__": "cc.Size",
+      "width": 40,
+      "height": 40
+    },
+    "_N$startAxis": 0,
+    "_N$paddingLeft": 0,
+    "_N$paddingRight": 0,
+    "_N$paddingTop": 10,
+    "_N$paddingBottom": 10,
+    "_N$spacingX": 0,
+    "_N$spacingY": 5,
+    "_N$verticalDirection": 1,
+    "_N$horizontalDirection": 0,
+    "_N$affectedByScale": false,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "66a824c7-abec-49e8-8df0-d7844859a93e"
+    },
+    "fileId": "0fv91c4qlCmIrwaWQqahUM",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 22
+    },
+    "_enabled": true,
+    "alignMode": 0,
+    "_target": null,
+    "_alignFlags": 37,
+    "_left": 350.07654921020657,
+    "_right": 0,
+    "_top": 0,
+    "_bottom": 0,
+    "_verticalCenter": 0,
+    "_horizontalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 0,
+    "_originalHeight": 237,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 22
+    },
+    "_enabled": true,
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "5fe5dcaa-b513-4dc5-a166-573627b3a159"
+    },
+    "_type": 1,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_state": 0,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "66a824c7-abec-49e8-8df0-d7844859a93e"
+    },
+    "fileId": "91/y7u5INBpoyKKcltKBaS",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 21
+    },
+    "_enabled": true,
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "f201fb81-4964-47e4-a820-bececa838851"
+    },
+    "_type": 1,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_state": 0,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "66a824c7-abec-49e8-8df0-d7844859a93e"
+    },
+    "fileId": "45GMNiy/JPIr7TA6UdNm0F",
+    "sync": false
+  },
+  {
+    "__type__": "60cbe4UoLpE4Y4GHQbqchwx",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "contentNode": {
+      "__id__": 28
+    },
+    "accountPreb": {
+      "__uuid__": "cdb67c82-9b72-4968-9ca2-34fd3477f221"
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "66a824c7-abec-49e8-8df0-d7844859a93e"
+    },
+    "fileId": "6a5YNQALZO5bCB3BN9pRU3",
+    "sync": false
+  }
+]
\ No newline at end of file
diff --git a/assets/comp/wallet/prefab/AccountList.prefab.meta b/assets/comp/wallet/prefab/AccountList.prefab.meta
new file mode 100644
index 0000000..3abe0a3
--- /dev/null
+++ b/assets/comp/wallet/prefab/AccountList.prefab.meta
@@ -0,0 +1,7 @@
+{
+  "ver": "1.0.1",
+  "uuid": "66a824c7-abec-49e8-8df0-d7844859a93e",
+  "optimizationPolicy": "AUTO",
+  "asyncLoadAssets": false,
+  "subMetas": {}
+}
\ No newline at end of file
diff --git a/assets/comp/wallet/prefab/OneAccount.prefab b/assets/comp/wallet/prefab/OneAccount.prefab
new file mode 100644
index 0000000..1346ead
--- /dev/null
+++ b/assets/comp/wallet/prefab/OneAccount.prefab
@@ -0,0 +1,974 @@
+[
+  {
+    "__type__": "cc.Prefab",
+    "_name": "",
+    "_objFlags": 0,
+    "_native": "",
+    "data": {
+      "__id__": 1
+    },
+    "optimizationPolicy": 0,
+    "asyncLoadAssets": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "OneAccount",
+    "_objFlags": 0,
+    "_parent": null,
+    "_children": [
+      {
+        "__id__": 2
+      },
+      {
+        "__id__": 6
+      },
+      {
+        "__id__": 9
+      },
+      {
+        "__id__": 12
+      },
+      {
+        "__id__": 15
+      },
+      {
+        "__id__": 20
+      },
+      {
+        "__id__": 23
+      }
+    ],
+    "_active": true,
+    "_level": 1,
+    "_components": [
+      {
+        "__id__": 26
+      },
+      {
+        "__id__": 27
+      }
+    ],
+    "_prefab": {
+      "__id__": 29
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 396,
+      "height": 60
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": -40,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "New Sprite",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 2,
+    "_components": [
+      {
+        "__id__": 3
+      },
+      {
+        "__id__": 4
+      }
+    ],
+    "_prefab": {
+      "__id__": 5
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 388,
+      "height": 60
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 4,
+      "y": 0,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "16696a1b-0613-47b2-bae9-c1a4b7f3450a"
+    },
+    "_type": 1,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_state": 0,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Widget",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 2
+    },
+    "_enabled": true,
+    "alignMode": 1,
+    "_target": null,
+    "_alignFlags": 45,
+    "_left": 8,
+    "_right": 0,
+    "_top": 0,
+    "_bottom": 0,
+    "_verticalCenter": 0,
+    "_horizontalCenter": 0,
+    "_isAbsLeft": true,
+    "_isAbsRight": true,
+    "_isAbsTop": true,
+    "_isAbsBottom": true,
+    "_isAbsHorizontalCenter": true,
+    "_isAbsVerticalCenter": true,
+    "_originalWidth": 40,
+    "_originalHeight": 36,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "cdb67c82-9b72-4968-9ca2-34fd3477f221"
+    },
+    "fileId": "549f49AuVIi5GQbDyFmZ4Z",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "rect-line",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 2,
+    "_components": [
+      {
+        "__id__": 7
+      }
+    ],
+    "_prefab": {
+      "__id__": 8
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 46,
+      "height": 46
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": -149,
+      "y": 0,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 6
+    },
+    "_enabled": true,
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "5a8ebed1-3233-42a9-99bf-71f93a2ac0b7"
+    },
+    "_type": 1,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_state": 0,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "cdb67c82-9b72-4968-9ca2-34fd3477f221"
+    },
+    "fileId": "2b9hCYj4ZLXZy/xMf9E0rH",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "rect-line",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 2,
+    "_components": [
+      {
+        "__id__": 10
+      }
+    ],
+    "_prefab": {
+      "__id__": 11
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 20,
+      "height": 20
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 170,
+      "y": 0,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 9
+    },
+    "_enabled": true,
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "5a8ebed1-3233-42a9-99bf-71f93a2ac0b7"
+    },
+    "_type": 1,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_state": 0,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "cdb67c82-9b72-4968-9ca2-34fd3477f221"
+    },
+    "fileId": "2934FgOO1PMYaR5EjQQrbn",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "gg",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": false,
+    "_level": 2,
+    "_components": [
+      {
+        "__id__": 13
+      }
+    ],
+    "_prefab": {
+      "__id__": 14
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 179,
+      "b": 166,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 20,
+      "height": 20
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": 173,
+      "y": 0,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 12
+    },
+    "_enabled": true,
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "a400f0db-ba04-4483-b7be-e146cf981dcb"
+    },
+    "_type": 0,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_state": 0,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "cdb67c82-9b72-4968-9ca2-34fd3477f221"
+    },
+    "fileId": "b3Q9LuTd5HjaTwJEUTYlW9",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "icon",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 2,
+    "_components": [
+      {
+        "__id__": 16
+      },
+      {
+        "__id__": 17
+      },
+      {
+        "__id__": 18
+      }
+    ],
+    "_prefab": {
+      "__id__": 19
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 40,
+      "height": 40
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": -169,
+      "y": -20,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "c5608gXK6JJrLX5LYUMj20m",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 15
+    },
+    "_enabled": true,
+    "ctx": {
+      "__id__": 17
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Graphics",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 15
+    },
+    "_enabled": true,
+    "_lineWidth": 1,
+    "_strokeColor": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_lineJoin": 2,
+    "_lineCap": 0,
+    "_fillColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_miterLimit": 10,
+    "_id": ""
+  },
+  {
+    "__type__": "410bfGzqWJAR6EoTsDWcNya",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 15
+    },
+    "_enabled": true,
+    "ctx": {
+      "__id__": 17
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "cdb67c82-9b72-4968-9ca2-34fd3477f221"
+    },
+    "fileId": "c3qSFG4kJBKbWeP9Y4tRzW",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "nameLabel",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 2,
+    "_components": [
+      {
+        "__id__": 21
+      }
+    ],
+    "_prefab": {
+      "__id__": 22
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 0,
+      "height": 40
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": -116,
+      "y": 15,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Label",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 20
+    },
+    "_enabled": true,
+    "_useOriginalSize": false,
+    "_string": "",
+    "_N$string": "",
+    "_fontSize": 25,
+    "_lineHeight": 40,
+    "_enableWrapText": true,
+    "_N$file": null,
+    "_isSystemFontUsed": true,
+    "_spacingX": 0,
+    "_batchAsBitmap": false,
+    "_N$horizontalAlign": 0,
+    "_N$verticalAlign": 1,
+    "_N$fontFamily": "Arial",
+    "_N$overflow": 0,
+    "_N$cacheMode": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "cdb67c82-9b72-4968-9ca2-34fd3477f221"
+    },
+    "fileId": "70lAdW86NOOYN8sXOCcC53",
+    "sync": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "addressLabel",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 2,
+    "_components": [
+      {
+        "__id__": 24
+      }
+    ],
+    "_prefab": {
+      "__id__": 25
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 246,
+      "g": 190,
+      "b": 93,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 0,
+      "height": 40
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0.5
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": -116,
+      "y": -14,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Label",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 23
+    },
+    "_enabled": true,
+    "_useOriginalSize": false,
+    "_string": "",
+    "_N$string": "",
+    "_fontSize": 15,
+    "_lineHeight": 40,
+    "_enableWrapText": true,
+    "_N$file": null,
+    "_isSystemFontUsed": true,
+    "_spacingX": 0,
+    "_batchAsBitmap": false,
+    "_N$horizontalAlign": 2,
+    "_N$verticalAlign": 1,
+    "_N$fontFamily": "Arial",
+    "_N$overflow": 0,
+    "_N$cacheMode": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "cdb67c82-9b72-4968-9ca2-34fd3477f221"
+    },
+    "fileId": "4f2fQOxIdCyr9y8lcikBAo",
+    "sync": false
+  },
+  {
+    "__type__": "16329YfvgNG7JRbIVfwX9xQ",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "nameLabel": {
+      "__id__": 21
+    },
+    "addressLabel": {
+      "__id__": 24
+    },
+    "icon": {
+      "__id__": 15
+    },
+    "selectImg": {
+      "__id__": 12
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Button",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "duration": 0.1,
+    "zoomScale": 1.2,
+    "clickEvents": [
+      {
+        "__id__": 28
+      }
+    ],
+    "_N$interactable": true,
+    "_N$enableAutoGrayEffect": false,
+    "_N$transition": 0,
+    "transition": 0,
+    "_N$normalColor": {
+      "__type__": "cc.Color",
+      "r": 214,
+      "g": 214,
+      "b": 214,
+      "a": 255
+    },
+    "_N$pressedColor": {
+      "__type__": "cc.Color",
+      "r": 211,
+      "g": 211,
+      "b": 211,
+      "a": 255
+    },
+    "pressedColor": {
+      "__type__": "cc.Color",
+      "r": 211,
+      "g": 211,
+      "b": 211,
+      "a": 255
+    },
+    "_N$hoverColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "hoverColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_N$disabledColor": {
+      "__type__": "cc.Color",
+      "r": 124,
+      "g": 124,
+      "b": 124,
+      "a": 255
+    },
+    "_N$normalSprite": null,
+    "_N$pressedSprite": null,
+    "pressedSprite": null,
+    "_N$hoverSprite": null,
+    "hoverSprite": null,
+    "_N$disabledSprite": null,
+    "_N$target": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.ClickEvent",
+    "target": {
+      "__id__": 1
+    },
+    "component": "",
+    "_componentId": "16329YfvgNG7JRbIVfwX9xQ",
+    "handler": "onSelectAccount",
+    "customEventData": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "cdb67c82-9b72-4968-9ca2-34fd3477f221"
+    },
+    "fileId": "431hKJIH9NMo9v0V6FlqFR",
+    "sync": false
+  }
+]
\ No newline at end of file
diff --git a/assets/comp/wallet/prefab/OneAccount.prefab.meta b/assets/comp/wallet/prefab/OneAccount.prefab.meta
new file mode 100644
index 0000000..6a1117d
--- /dev/null
+++ b/assets/comp/wallet/prefab/OneAccount.prefab.meta
@@ -0,0 +1,7 @@
+{
+  "ver": "1.0.1",
+  "uuid": "cdb67c82-9b72-4968-9ca2-34fd3477f221",
+  "optimizationPolicy": "AUTO",
+  "asyncLoadAssets": false,
+  "subMetas": {}
+}
\ No newline at end of file
diff --git a/assets/comp/wallet/prefab/OneToken.prefab b/assets/comp/wallet/prefab/OneToken.prefab
index 6f24387..33c72ec 100644
--- a/assets/comp/wallet/prefab/OneToken.prefab
+++ b/assets/comp/wallet/prefab/OneToken.prefab
@@ -23,7 +23,7 @@
         "__id__": 6
       },
       {
-        "__id__": 11
+        "__id__": 9
       },
       {
         "__id__": 14
@@ -220,139 +220,6 @@
     "fileId": "8cCvpJOhZHr6NWksDRZ7xQ",
     "sync": false
   },
-  {
-    "__type__": "cc.Node",
-    "_name": "icon",
-    "_objFlags": 0,
-    "_parent": {
-      "__id__": 1
-    },
-    "_children": [],
-    "_active": true,
-    "_level": 2,
-    "_components": [
-      {
-        "__id__": 7
-      },
-      {
-        "__id__": 8
-      },
-      {
-        "__id__": 9
-      }
-    ],
-    "_prefab": {
-      "__id__": 10
-    },
-    "_opacity": 255,
-    "_color": {
-      "__type__": "cc.Color",
-      "r": 255,
-      "g": 255,
-      "b": 255,
-      "a": 255
-    },
-    "_contentSize": {
-      "__type__": "cc.Size",
-      "width": 40,
-      "height": 40
-    },
-    "_anchorPoint": {
-      "__type__": "cc.Vec2",
-      "x": 0,
-      "y": 0
-    },
-    "_position": {
-      "__type__": "cc.Vec3",
-      "x": -200,
-      "y": -20,
-      "z": 0
-    },
-    "_scale": {
-      "__type__": "cc.Vec3",
-      "x": 1,
-      "y": 1,
-      "z": 1
-    },
-    "_rotationX": 0,
-    "_rotationY": 0,
-    "_quat": {
-      "__type__": "cc.Quat",
-      "x": 0,
-      "y": 0,
-      "z": 0,
-      "w": 1
-    },
-    "_skewX": 0,
-    "_skewY": 0,
-    "groupIndex": 0,
-    "_id": ""
-  },
-  {
-    "__type__": "c5608gXK6JJrLX5LYUMj20m",
-    "_name": "",
-    "_objFlags": 0,
-    "node": {
-      "__id__": 6
-    },
-    "_enabled": true,
-    "ctx": {
-      "__id__": 8
-    },
-    "_id": ""
-  },
-  {
-    "__type__": "cc.Graphics",
-    "_name": "",
-    "_objFlags": 0,
-    "node": {
-      "__id__": 6
-    },
-    "_enabled": true,
-    "_lineWidth": 1,
-    "_strokeColor": {
-      "__type__": "cc.Color",
-      "r": 0,
-      "g": 0,
-      "b": 0,
-      "a": 255
-    },
-    "_lineJoin": 2,
-    "_lineCap": 0,
-    "_fillColor": {
-      "__type__": "cc.Color",
-      "r": 255,
-      "g": 255,
-      "b": 255,
-      "a": 255
-    },
-    "_miterLimit": 10,
-    "_id": ""
-  },
-  {
-    "__type__": "410bfGzqWJAR6EoTsDWcNya",
-    "_name": "",
-    "_objFlags": 0,
-    "node": {
-      "__id__": 6
-    },
-    "_enabled": true,
-    "ctx": {
-      "__id__": 8
-    },
-    "_id": ""
-  },
-  {
-    "__type__": "cc.PrefabInfo",
-    "root": {
-      "__id__": 1
-    },
-    "asset": {
-      "__uuid__": "e4b00542-5961-4a6a-8ae5-c19d30ac84a2"
-    },
-    "fileId": "fd0Vfdt29Jh45d3VK9MwnT",
-    "sync": false
-  },
   {
     "__type__": "cc.Node",
     "_name": "rect-line",
@@ -365,11 +232,11 @@
     "_level": 2,
     "_components": [
       {
-        "__id__": 12
+        "__id__": 7
       }
     ],
     "_prefab": {
-      "__id__": 13
+      "__id__": 8
     },
     "_opacity": 255,
     "_color": {
@@ -420,7 +287,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 11
+      "__id__": 6
     },
     "_enabled": true,
     "_srcBlendFactor": 770,
@@ -454,6 +321,139 @@
     "fileId": "76S2+7P2NLToxBZanaF82q",
     "sync": false
   },
+  {
+    "__type__": "cc.Node",
+    "_name": "icon",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 1
+    },
+    "_children": [],
+    "_active": true,
+    "_level": 2,
+    "_components": [
+      {
+        "__id__": 10
+      },
+      {
+        "__id__": 11
+      },
+      {
+        "__id__": 12
+      }
+    ],
+    "_prefab": {
+      "__id__": 13
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 40,
+      "height": 40
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_position": {
+      "__type__": "cc.Vec3",
+      "x": -200,
+      "y": -20,
+      "z": 0
+    },
+    "_scale": {
+      "__type__": "cc.Vec3",
+      "x": 1,
+      "y": 1,
+      "z": 1
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_quat": {
+      "__type__": "cc.Quat",
+      "x": 0,
+      "y": 0,
+      "z": 0,
+      "w": 1
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "c5608gXK6JJrLX5LYUMj20m",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 9
+    },
+    "_enabled": true,
+    "ctx": {
+      "__id__": 11
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Graphics",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 9
+    },
+    "_enabled": true,
+    "_lineWidth": 1,
+    "_strokeColor": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_lineJoin": 2,
+    "_lineCap": 0,
+    "_fillColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_miterLimit": 10,
+    "_id": ""
+  },
+  {
+    "__type__": "410bfGzqWJAR6EoTsDWcNya",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 9
+    },
+    "_enabled": true,
+    "ctx": {
+      "__id__": 11
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__uuid__": "e4b00542-5961-4a6a-8ae5-c19d30ac84a2"
+    },
+    "fileId": "fd0Vfdt29Jh45d3VK9MwnT",
+    "sync": false
+  },
   {
     "__type__": "cc.Node",
     "_name": "nameLabel",
@@ -538,7 +538,7 @@
     "_N$verticalAlign": 1,
     "_N$fontFamily": "Arial",
     "_N$overflow": 0,
-    "_N$cacheMode": 0,
+    "_N$cacheMode": 1,
     "_id": ""
   },
   {
@@ -636,7 +636,7 @@
     "_N$verticalAlign": 1,
     "_N$fontFamily": "Arial",
     "_N$overflow": 0,
-    "_N$cacheMode": 0,
+    "_N$cacheMode": 1,
     "_id": ""
   },
   {
@@ -693,7 +693,7 @@
       "__id__": 18
     },
     "icon": {
-      "__id__": 7
+      "__id__": 9
     },
     "_id": ""
   },
diff --git a/assets/comp/wallet/res/icon/gg.png b/assets/comp/wallet/res/icon/gg.png
new file mode 100644
index 0000000..154b583
Binary files /dev/null and b/assets/comp/wallet/res/icon/gg.png differ
diff --git a/assets/comp/wallet/res/icon/gg.png.meta b/assets/comp/wallet/res/icon/gg.png.meta
new file mode 100644
index 0000000..72f5d53
--- /dev/null
+++ b/assets/comp/wallet/res/icon/gg.png.meta
@@ -0,0 +1,31 @@
+{
+  "ver": "2.2.0",
+  "uuid": "7fced19e-95a3-458e-a983-73a7176dea21",
+  "type": "sprite",
+  "wrapMode": "clamp",
+  "filterMode": "bilinear",
+  "premultiplyAlpha": false,
+  "subMetas": {
+    "gg": {
+      "ver": "1.0.4",
+      "uuid": "a400f0db-ba04-4483-b7be-e146cf981dcb",
+      "rawTextureUuid": "7fced19e-95a3-458e-a983-73a7176dea21",
+      "trimType": "auto",
+      "trimThreshold": 1,
+      "rotated": false,
+      "offsetX": 2.5,
+      "offsetY": -6,
+      "trimX": 12,
+      "trimY": 12,
+      "width": 159,
+      "height": 116,
+      "rawWidth": 178,
+      "rawHeight": 128,
+      "borderTop": 0,
+      "borderBottom": 0,
+      "borderLeft": 0,
+      "borderRight": 0,
+      "subMetas": {}
+    }
+  }
+}
\ No newline at end of file
diff --git a/assets/comp/wallet/scripts/JCWallet.ts b/assets/comp/wallet/scripts/JCWallet.ts
index 1050cb7..1e38c6e 100644
--- a/assets/comp/wallet/scripts/JCWallet.ts
+++ b/assets/comp/wallet/scripts/JCWallet.ts
@@ -43,6 +43,7 @@ export default class JCWallet {
   public erc20Standard: ERC20Standard
   public erc721Standard: ERC721Standard
   public mainHandlers = createWalletEvents()
+  public uiHandlers = createWalletEvents()
   private dataManage = new DataManage()
   public data: IAccount[] = []
   public iconType = 'jazz'
@@ -83,19 +84,7 @@ export default class JCWallet {
     return this._currentChain
   }
 
-  get currentAccountData() {
-    let address = this.currentAccount().address;
-    const chain = this.currentChain.id
-    let data = this.data.find(o => o.address === address && o.chain === chain)
-    if (data) {
-      return data
-    }
-    let accountName = `Account${this.wallet.length}`
-    data = initAccount(address, chain, accountName)
-    this.data.push(data)
-    this.dataManage.saveData(this.data)
-    return data
-  }
+  
 
   updateCurrentChain(chainId: number) {
     const chainData = this.chainMap.get(chainId)
@@ -133,8 +122,22 @@ export default class JCWallet {
     return this.wallet[this.accountIndex];
   }
 
-  public accounts() {
+  get currentAccountData() {
+    let address = this.currentAccount().address;
+    const chain = this.currentChain.id
+    let data = this.data.find(o => o.address === address && o.chain === chain)
+    if (data) {
+      return data
+    }
+    let accountName = `Account${this.wallet.length}`
+    data = initAccount(address, chain, accountName)
+    this.data.push(data)
+    this.dataManage.saveData(this.data)
+    return data
+  }
 
+  get accounts() {
+    return this.data
   }
 
   public createAccount() {
@@ -142,7 +145,21 @@ export default class JCWallet {
     this.wallet.add(account)
     this.wallet.save(this.password)
     this.accountIndex = this.wallet.length - 1
-    this.mainHandlers.emit(WALLET_ACCOUNT_CHANGE)
+    this.mainHandlers.emit(WALLET_ACCOUNT_CHANGE, account.address)
+  }
+
+  public selectAccount(address: string) {
+    let index = 0
+    for (let i = 0, l = this.wallet.length; i < l ; i ++) {
+      if (this.wallet[i].address === address) {
+        index = i
+        break
+      }
+    }
+    if (index !== this.accountIndex && index < this.wallet.length) {
+      this.accountIndex = index
+      this.mainHandlers.emit(WALLET_ACCOUNT_CHANGE, this.wallet[index].address)
+    }
   }
 
   public importAccount(privateKey: string) {
diff --git a/assets/comp/wallet/scripts/common/WalletEvent.ts b/assets/comp/wallet/scripts/common/WalletEvent.ts
index b9e1e8c..7e545c5 100644
--- a/assets/comp/wallet/scripts/common/WalletEvent.ts
+++ b/assets/comp/wallet/scripts/common/WalletEvent.ts
@@ -24,3 +24,7 @@ export const WALLET_ACCOUNT_CHANGE = 'wallet_account_change'
 export const WALLET_TOKEN_TYPE_CHANGE = 'wallet_token_type_change'
 
 export const WALLET_SHOW_QR = 'wallet_show_qr'
+
+export const WALLET_SHOW_ACCOUNT_LIST = 'wallet_show_account_list'
+
+export const WALLET_HIDE_ACCOUNT_LIST = 'wallet_hide_account_list'
\ No newline at end of file
diff --git a/assets/comp/wallet/scripts/ui/AccountList.ts b/assets/comp/wallet/scripts/ui/AccountList.ts
new file mode 100644
index 0000000..5dedee5
--- /dev/null
+++ b/assets/comp/wallet/scripts/ui/AccountList.ts
@@ -0,0 +1,43 @@
+import { WALLET_HIDE_ACCOUNT_LIST } from "../common/WalletEvent";
+import { IAccount } from "../data/DataModel";
+import WalletBase from "./WallerBase";
+
+const {ccclass, property} = cc._decorator;
+
+@ccclass
+export default class AccountList extends WalletBase {
+
+    @property(cc.Node)
+    contentNode: cc.Node = null
+
+    @property(cc.Prefab)
+    accountPreb: cc.Prefab = null
+
+    // LIFE-CYCLE CALLBACKS:
+
+    // onLoad () {}
+
+    start () {
+        super.start()
+        this.wallet.uiHandlers.on(WALLET_HIDE_ACCOUNT_LIST, this.closeMe.bind(this))
+    }
+    onEnable() {
+        this.showAllAccount()
+    }
+
+    // update (dt) {}
+
+    showAllAccount() {
+        this.contentNode.removeAllChildren()
+        let accounts = this.wallet.accounts
+        for (let i = 0, l = accounts.length; i < l; i ++) {
+            this.showOneAccount(accounts[i])
+        }
+    }
+
+    showOneAccount(account: IAccount) {
+        let node = cc.instantiate(this.accountPreb)
+        node.getComponent('OneAccount').init(account)
+        this.contentNode.addChild(node)
+    }
+}
diff --git a/assets/comp/wallet/scripts/ui/AccountList.ts.meta b/assets/comp/wallet/scripts/ui/AccountList.ts.meta
new file mode 100644
index 0000000..aa10ce8
--- /dev/null
+++ b/assets/comp/wallet/scripts/ui/AccountList.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "60cbee14-a0ba-44e1-8e06-1d06ea721c31",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
\ No newline at end of file
diff --git a/assets/comp/wallet/scripts/ui/OneAccount.ts b/assets/comp/wallet/scripts/ui/OneAccount.ts
new file mode 100644
index 0000000..27154cd
--- /dev/null
+++ b/assets/comp/wallet/scripts/ui/OneAccount.ts
@@ -0,0 +1,68 @@
+import { WALLET_HIDE_ACCOUNT_LIST } from "../common/WalletEvent";
+import { IAccount, IToken } from "../data/DataModel";
+import JCWallet from "../JCWallet";
+import { renderFromTokenMinimalUnit } from "../util/number.util";
+import { formatAddress } from "../util/wallet.util";
+import HashIcon from "./comp/HashIcon";
+import WalletBase from "./WallerBase";
+
+const {ccclass, property} = cc._decorator;
+
+const ETH_TYPE = 'eth'
+@ccclass
+export default class OneToken extends WalletBase {
+
+    @property(cc.Label)
+    nameLabel: cc.Label = null;
+
+    @property(cc.Label)
+    addressLabel: cc.Label = null;
+
+
+    @property(cc.Node)
+    icon: cc.Node = null;
+
+    @property(cc.Node)
+    selectImg: cc.Node = null
+
+    parentNode: cc.Node = null
+
+    data: IAccount = null
+
+    // LIFE-CYCLE CALLBACKS:
+
+    // onLoad () {}
+
+    start () {
+        super.start()
+    }
+
+    // update (dt) {}
+    init(_data: IAccount) {
+        this.data = _data
+        if (!this.wallet) {
+          this.wallet = new JCWallet()
+        }
+        this.updateInfo()
+    }
+
+    private async updateInfo() {
+      this.nameLabel.string = this.data.nickname
+      this.addressLabel.string = formatAddress(this.data.address)
+      // this.addressLabel.string = this.data.address.replace('0x', '')
+
+      if (this.wallet.iconType === 'jazz') {
+        this.icon.getComponent('JazzIcon').init(this.data.address)
+      } else {
+        this.icon.getComponent('HashIcon').init(this.data.address)
+      }
+
+      this.selectImg.active = this.wallet.currentAccount().address === this.data.address
+    }
+
+    onSelectAccount() {
+      this.wallet.selectAccount(this.data.address)
+      this.wallet.uiHandlers.emit(WALLET_HIDE_ACCOUNT_LIST)
+    }
+
+}
diff --git a/assets/comp/wallet/scripts/ui/OneAccount.ts.meta b/assets/comp/wallet/scripts/ui/OneAccount.ts.meta
new file mode 100644
index 0000000..36deb67
--- /dev/null
+++ b/assets/comp/wallet/scripts/ui/OneAccount.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "1632961f-be03-46ec-945b-2157f05fdc50",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
\ No newline at end of file
diff --git a/assets/comp/wallet/scripts/ui/TokenList.ts b/assets/comp/wallet/scripts/ui/TokenList.ts
index 697b8b7..7c1d88f 100644
--- a/assets/comp/wallet/scripts/ui/TokenList.ts
+++ b/assets/comp/wallet/scripts/ui/TokenList.ts
@@ -1,3 +1,4 @@
+import { WALLET_ACCOUNT_CHANGE } from "../common/WalletEvent";
 import { DEFALUT_TOKENS } from "../config/chain_config";
 import { IToken } from "../data/DataModel";
 import WalletBase from "./WallerBase";
@@ -19,6 +20,7 @@ export default class TokenList extends WalletBase {
 
     start () {
         super.start()
+        this.wallet.mainHandlers.on(WALLET_ACCOUNT_CHANGE, this.updateList.bind(this))
         this.updateList()
     }
 
diff --git a/assets/comp/wallet/scripts/ui/WallerBase.ts b/assets/comp/wallet/scripts/ui/WallerBase.ts
index 35f197a..8c90e6d 100644
--- a/assets/comp/wallet/scripts/ui/WallerBase.ts
+++ b/assets/comp/wallet/scripts/ui/WallerBase.ts
@@ -22,4 +22,8 @@ export default class WalletBase extends cc.Component {
   updateUI() {
     this.isAlter = false
   }
+
+  closeMe() {
+    this.node.active = false
+  }
 }
diff --git a/assets/comp/wallet/scripts/ui/WalletInfo.ts b/assets/comp/wallet/scripts/ui/WalletInfo.ts
index b852d46..adff734 100644
--- a/assets/comp/wallet/scripts/ui/WalletInfo.ts
+++ b/assets/comp/wallet/scripts/ui/WalletInfo.ts
@@ -1,6 +1,7 @@
-import { WALLET_ACCOUNT_CHANGE, WALLET_CHAIN_CHANGE, WALLET_SHOW_QR } from "../common/WalletEvent";
+import { WALLET_ACCOUNT_CHANGE, WALLET_CHAIN_CHANGE, WALLET_SHOW_ACCOUNT_LIST, WALLET_SHOW_QR } from "../common/WalletEvent";
 import { IChainData } from "../JCWallet";
 import { renderFromTokenMinimalUnit } from "../util/number.util";
+import { formatAddress, formatMoney } from "../util/wallet.util";
 import WalletBase from "./WallerBase";
 
 
@@ -35,42 +36,29 @@ export default class WalletInfo extends WalletBase {
         this.updateUI()
         this.updateBalance()
         this.wallet.mainHandlers.on(WALLET_CHAIN_CHANGE, this.chainChange.bind(this))
-        this.wallet.mainHandlers.on(WALLET_ACCOUNT_CHANGE, this.chainChange.bind(this))
+        this.wallet.mainHandlers.on(WALLET_ACCOUNT_CHANGE, this.onAccountChange.bind(this))
     }
 
     // update (dt) {}
     updateUI(): void {
         super.updateUI()
         this.nameLabel.string = this.wallet.currentAccountData.nickname || 'Account'
-        this.addressLabel.string = this.formatAddress()
-        this.balanceLabel.string = this.formatMoney()
+        this.addressLabel.string = formatAddress(this.accountId)
+        this.balanceLabel.string = this.showMoney()
         if (this.wallet.iconType === 'jazz') {
             this.avatar.getComponent('JazzIcon').init(this.accountId)
         } else {
             this.avatar.getComponent('HashIcon').init(this.accountId)
         }
-        
     }
 
-    formatAddress() {
-        if (this.accountId.length >= 10) {
-            return this.accountId.substring(0, 6) + '...' + this.accountId.substring(this.accountId.length - 4)
-        } else if (this.accountId.length > 0 && this.accountId.length < 10) {
-            return this.accountId
-        } else {
-            return ''
-        }
-    }
+    
 
-    formatMoney() {
+    showMoney() {
         console.log('update balance: ', this.balance)
         const chainData = this.wallet.currentChain
         let symbol = chainData.symbol
-        if (this.balance === '-') {
-            return `- ${symbol}`;
-        }
-        let money = renderFromTokenMinimalUnit(this.balance, 18, 4)
-        return `${money} ${symbol}`;
+        return formatMoney(this.balance, symbol)
     }
 
     updateBalance() {
@@ -96,6 +84,10 @@ export default class WalletInfo extends WalletBase {
         const chainId = this.wallet.currentChain.id
         let qrUrl = `ethereum:${address}@${chainId}`
         // this.showQr(qrUrl)
-        this.wallet.mainHandlers.emit(WALLET_SHOW_QR, {val: qrUrl})
+        this.wallet.uiHandlers.emit(WALLET_SHOW_QR, {val: qrUrl})
+    }
+
+    showAccountList() {
+        this.wallet.uiHandlers.emit(WALLET_SHOW_ACCOUNT_LIST)
     }
 }
diff --git a/assets/comp/wallet/scripts/ui/WalletMainPanel.ts b/assets/comp/wallet/scripts/ui/WalletMainPanel.ts
index 465f6e6..df7da4f 100644
--- a/assets/comp/wallet/scripts/ui/WalletMainPanel.ts
+++ b/assets/comp/wallet/scripts/ui/WalletMainPanel.ts
@@ -1,5 +1,4 @@
-import { WALLET_SHOW_QR } from "../common/WalletEvent";
-import JCWallet from "../JCWallet";
+import { WALLET_SHOW_ACCOUNT_LIST, WALLET_SHOW_QR } from "../common/WalletEvent";
 import ChainTab from "./ChainTab";
 import { IQRCfg } from "./comp/QRCodeComp";
 import ListNode from "./ListNode";
@@ -23,6 +22,9 @@ export default class WalletMainPanel extends WalletBase {
     @property(cc.Prefab)
     menuPreb: cc.Prefab = null
 
+    @property(cc.Prefab)
+    accountPreb: cc.Prefab = null
+
     @property(cc.Prefab)
     qrPreb: cc.Prefab = null
 
@@ -35,7 +37,8 @@ export default class WalletMainPanel extends WalletBase {
 
     start () {
         super.start()
-        this.wallet.mainHandlers.on(WALLET_SHOW_QR, this.showQrNode.bind(this))
+        this.wallet.uiHandlers.on(WALLET_SHOW_QR, this.showQrNode.bind(this))
+        this.wallet.uiHandlers.on(WALLET_SHOW_ACCOUNT_LIST, this.showAccountList.bind(this))
     }
 
     // update (dt) {}
@@ -76,4 +79,10 @@ export default class WalletMainPanel extends WalletBase {
         node.getComponent('QrNode').showQr(data)
         node.active = true
     }
+
+    showAccountList() {
+        const tag = 'account-list-node'
+        const node = this.fetchNode(tag, this.accountPreb)
+        node.active = true
+    }
 }
diff --git a/assets/comp/wallet/scripts/ui/comp/HashIcon.ts b/assets/comp/wallet/scripts/ui/comp/HashIcon.ts
index 3e81d63..dfc4600 100644
--- a/assets/comp/wallet/scripts/ui/comp/HashIcon.ts
+++ b/assets/comp/wallet/scripts/ui/comp/HashIcon.ts
@@ -93,7 +93,7 @@ export default class HashIcon extends cc.Component {
 
     const imageData = createImageData(opts.size);
     const width = Math.sqrt(imageData.length);
-
+    this.ctx.clear()
     for (let i = 0; i < imageData.length; i++) {
         const row = Math.floor(i / width);
         const col = i % width;
diff --git a/assets/comp/wallet/scripts/util/wallet.util.ts b/assets/comp/wallet/scripts/util/wallet.util.ts
index 8a9a24a..47bd9c4 100644
--- a/assets/comp/wallet/scripts/util/wallet.util.ts
+++ b/assets/comp/wallet/scripts/util/wallet.util.ts
@@ -1,3 +1,5 @@
+import { renderFromTokenMinimalUnit } from "./number.util";
+
 /**
  * Removes IPFS protocol prefix from input string.
  *
@@ -96,4 +98,22 @@ export function isSmartContractCode(code: string) {
   // Geth will return '0x', and ganache-core v2.2.1 will return '0x0'
   const smartContractCode = code !== '0x' && code !== '0x0';
   return smartContractCode;
+}
+
+export function formatAddress(address: string) {
+  if (address.length >= 10) {
+      return address.substring(0, 6) + '...' + address.substring(address.length - 4)
+  } else if (address.length > 0 && address.length < 10) {
+      return address
+  } else {
+      return ''
+  }
+}
+
+export function formatMoney(balance: number | string, symbol: string) {
+  if (balance === '-') {
+    return `- ${symbol}`;
+  }
+  let money = renderFromTokenMinimalUnit(balance, 18, 4)
+  return `${money} ${symbol}`;
 }
\ No newline at end of file
diff --git a/assets/scenes/main.fire b/assets/scenes/main.fire
index 95c9da3..6cabe81 100644
--- a/assets/scenes/main.fire
+++ b/assets/scenes/main.fire
@@ -17,7 +17,7 @@
         "__id__": 2
       },
       {
-        "__id__": 188
+        "__id__": 190
       }
     ],
     "_active": false,
@@ -44,8 +44,8 @@
     },
     "_scale": {
       "__type__": "cc.Vec3",
-      "x": 0.780609130859375,
-      "y": 0.780609130859375,
+      "x": 0.779296875,
+      "y": 0.779296875,
       "z": 1
     },
     "_quat": {
@@ -87,13 +87,13 @@
     "_level": 1,
     "_components": [
       {
-        "__id__": 185
+        "__id__": 187
       },
       {
-        "__id__": 186
+        "__id__": 188
       },
       {
-        "__id__": 189
+        "__id__": 191
       }
     ],
     "_prefab": null,
@@ -4650,14 +4650,14 @@
     "_active": true,
     "_level": 1,
     "_components": [
-      {
-        "__id__": 182
-      },
-      {
-        "__id__": 183
-      },
       {
         "__id__": 184
+      },
+      {
+        "__id__": 185
+      },
+      {
+        "__id__": 186
       }
     ],
     "_prefab": null,
@@ -6317,9 +6317,6 @@
       {
         "__id__": 146
       },
-      {
-        "__id__": 150
-      },
       {
         "__id__": 152
       },
@@ -6327,10 +6324,10 @@
         "__id__": 154
       },
       {
-        "__id__": 162
+        "__id__": 156
       },
       {
-        "__id__": 168
+        "__id__": 164
       },
       {
         "__id__": 170
@@ -6346,16 +6343,19 @@
       },
       {
         "__id__": 178
+      },
+      {
+        "__id__": 180
       }
     ],
     "_active": true,
     "_level": 2,
     "_components": [
       {
-        "__id__": 180
+        "__id__": 182
       },
       {
-        "__id__": 181
+        "__id__": 183
       }
     ],
     "_prefab": null,
@@ -6422,6 +6422,9 @@
       },
       {
         "__id__": 149
+      },
+      {
+        "__id__": 150
       }
     ],
     "_prefab": null,
@@ -6523,6 +6526,86 @@
     },
     "_id": "2alniidNZNjrb472fLhz4h"
   },
+  {
+    "__type__": "cc.Button",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 146
+    },
+    "_enabled": true,
+    "duration": 0.1,
+    "zoomScale": 1.2,
+    "clickEvents": [
+      {
+        "__id__": 151
+      }
+    ],
+    "_N$interactable": true,
+    "_N$enableAutoGrayEffect": false,
+    "_N$transition": 3,
+    "transition": 3,
+    "_N$normalColor": {
+      "__type__": "cc.Color",
+      "r": 214,
+      "g": 214,
+      "b": 214,
+      "a": 255
+    },
+    "_N$pressedColor": {
+      "__type__": "cc.Color",
+      "r": 211,
+      "g": 211,
+      "b": 211,
+      "a": 255
+    },
+    "pressedColor": {
+      "__type__": "cc.Color",
+      "r": 211,
+      "g": 211,
+      "b": 211,
+      "a": 255
+    },
+    "_N$hoverColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "hoverColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_N$disabledColor": {
+      "__type__": "cc.Color",
+      "r": 124,
+      "g": 124,
+      "b": 124,
+      "a": 255
+    },
+    "_N$normalSprite": null,
+    "_N$pressedSprite": null,
+    "pressedSprite": null,
+    "_N$hoverSprite": null,
+    "hoverSprite": null,
+    "_N$disabledSprite": null,
+    "_N$target": null,
+    "_id": "18kAECmjlE2rB0tb/T8pCY"
+  },
+  {
+    "__type__": "cc.ClickEvent",
+    "target": {
+      "__id__": 145
+    },
+    "component": "",
+    "_componentId": "3fe0aN9jsFD57pMhFser+jv",
+    "handler": "showAccountList",
+    "customEventData": ""
+  },
   {
     "__type__": "cc.Node",
     "_name": "New Sprite",
@@ -6535,7 +6618,7 @@
     "_level": 3,
     "_components": [
       {
-        "__id__": 151
+        "__id__": 153
       }
     ],
     "_prefab": null,
@@ -6588,7 +6671,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 150
+      "__id__": 152
     },
     "_enabled": true,
     "_srcBlendFactor": 770,
@@ -6623,7 +6706,7 @@
     "_level": 3,
     "_components": [
       {
-        "__id__": 153
+        "__id__": 155
       }
     ],
     "_prefab": null,
@@ -6676,7 +6759,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 152
+      "__id__": 154
     },
     "_enabled": true,
     "_srcBlendFactor": 770,
@@ -6708,20 +6791,20 @@
     },
     "_children": [
       {
-        "__id__": 155
+        "__id__": 157
       },
       {
-        "__id__": 157
+        "__id__": 159
       }
     ],
     "_active": true,
     "_level": 3,
     "_components": [
       {
-        "__id__": 159
+        "__id__": 161
       },
       {
-        "__id__": 160
+        "__id__": 162
       }
     ],
     "_prefab": null,
@@ -6774,14 +6857,14 @@
     "_name": "btn-receive",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 154
+      "__id__": 156
     },
     "_children": [],
     "_active": true,
     "_level": 4,
     "_components": [
       {
-        "__id__": 156
+        "__id__": 158
       }
     ],
     "_prefab": null,
@@ -6834,7 +6917,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 155
+      "__id__": 157
     },
     "_enabled": true,
     "_srcBlendFactor": 770,
@@ -6862,14 +6945,14 @@
     "_name": "label",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 154
+      "__id__": 156
     },
     "_children": [],
     "_active": true,
     "_level": 4,
     "_components": [
       {
-        "__id__": 158
+        "__id__": 160
       }
     ],
     "_prefab": null,
@@ -6922,7 +7005,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 157
+      "__id__": 159
     },
     "_enabled": true,
     "_useOriginalSize": false,
@@ -6947,7 +7030,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 154
+      "__id__": 156
     },
     "_enabled": true,
     "_srcBlendFactor": 770,
@@ -6975,14 +7058,14 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 154
+      "__id__": 156
     },
     "_enabled": true,
     "duration": 0.1,
     "zoomScale": 1.2,
     "clickEvents": [
       {
-        "__id__": 161
+        "__id__": 163
       }
     ],
     "_N$interactable": true,
@@ -7059,17 +7142,17 @@
     },
     "_children": [
       {
-        "__id__": 163
+        "__id__": 165
       },
       {
-        "__id__": 165
+        "__id__": 167
       }
     ],
     "_active": true,
     "_level": 3,
     "_components": [
       {
-        "__id__": 167
+        "__id__": 169
       }
     ],
     "_prefab": null,
@@ -7122,14 +7205,14 @@
     "_name": "btn-send",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 162
+      "__id__": 164
     },
     "_children": [],
     "_active": true,
     "_level": 4,
     "_components": [
       {
-        "__id__": 164
+        "__id__": 166
       }
     ],
     "_prefab": null,
@@ -7182,7 +7265,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 163
+      "__id__": 165
     },
     "_enabled": true,
     "_srcBlendFactor": 770,
@@ -7210,14 +7293,14 @@
     "_name": "New Label",
     "_objFlags": 0,
     "_parent": {
-      "__id__": 162
+      "__id__": 164
     },
     "_children": [],
     "_active": true,
     "_level": 4,
     "_components": [
       {
-        "__id__": 166
+        "__id__": 168
       }
     ],
     "_prefab": null,
@@ -7270,7 +7353,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 165
+      "__id__": 167
     },
     "_enabled": true,
     "_useOriginalSize": false,
@@ -7295,7 +7378,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 162
+      "__id__": 164
     },
     "_enabled": true,
     "_srcBlendFactor": 770,
@@ -7330,7 +7413,7 @@
     "_level": 3,
     "_components": [
       {
-        "__id__": 169
+        "__id__": 171
       }
     ],
     "_prefab": null,
@@ -7383,7 +7466,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 168
+      "__id__": 170
     },
     "_enabled": true,
     "_srcBlendFactor": 770,
@@ -7418,7 +7501,7 @@
     "_level": 3,
     "_components": [
       {
-        "__id__": 171
+        "__id__": 173
       }
     ],
     "_prefab": null,
@@ -7471,7 +7554,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 170
+      "__id__": 172
     },
     "_enabled": true,
     "_useOriginalSize": false,
@@ -7503,7 +7586,7 @@
     "_level": 3,
     "_components": [
       {
-        "__id__": 173
+        "__id__": 175
       }
     ],
     "_prefab": null,
@@ -7556,7 +7639,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 172
+      "__id__": 174
     },
     "_enabled": true,
     "_useOriginalSize": false,
@@ -7588,7 +7671,7 @@
     "_level": 3,
     "_components": [
       {
-        "__id__": 175
+        "__id__": 177
       }
     ],
     "_prefab": null,
@@ -7641,7 +7724,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 174
+      "__id__": 176
     },
     "_enabled": true,
     "_useOriginalSize": false,
@@ -7673,7 +7756,7 @@
     "_level": 3,
     "_components": [
       {
-        "__id__": 177
+        "__id__": 179
       }
     ],
     "_prefab": null,
@@ -7726,7 +7809,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 176
+      "__id__": 178
     },
     "_enabled": true,
     "_useOriginalSize": false,
@@ -7758,7 +7841,7 @@
     "_level": 3,
     "_components": [
       {
-        "__id__": 179
+        "__id__": 181
       }
     ],
     "_prefab": null,
@@ -7811,7 +7894,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 178
+      "__id__": 180
     },
     "_enabled": true,
     "_useOriginalSize": false,
@@ -7867,13 +7950,13 @@
     },
     "_enabled": true,
     "addressLabel": {
-      "__id__": 177
+      "__id__": 179
     },
     "balanceLabel": {
-      "__id__": 173
+      "__id__": 175
     },
     "nameLabel": {
-      "__id__": 179
+      "__id__": 181
     },
     "avatar": {
       "__id__": 146
@@ -7952,6 +8035,9 @@
     "menuPreb": {
       "__uuid__": "0bfa7bbc-42ab-4204-9fe7-3cd9b56eb045"
     },
+    "accountPreb": {
+      "__uuid__": "66a824c7-abec-49e8-8df0-d7844859a93e"
+    },
     "qrPreb": {
       "__uuid__": "0f14a371-be16-44a1-adcf-319d54c7ba3d"
     },
@@ -7983,7 +8069,7 @@
     },
     "_enabled": true,
     "webview": {
-      "__id__": 187
+      "__id__": 189
     },
     "debugText": {
       "__id__": 6
@@ -7996,7 +8082,7 @@
     "_name": "",
     "_objFlags": 0,
     "node": {
-      "__id__": 188
+      "__id__": 190
     },
     "_enabled": true,
     "_useOriginalSize": false,
@@ -8016,7 +8102,7 @@
     "_level": 1,
     "_components": [
       {
-        "__id__": 187
+        "__id__": 189
       }
     ],
     "_prefab": null,