feat: show own withdrawal account details and enable avatar upload

web/src/mobile/styles.css

@@ -1772,9 +1772,120 @@ body {
   background: #fff;
 }
 .m-subpage--profile {
-  background-color: #fffaf5;
-  background-size: 100% auto;
-  background-repeat: no-repeat;
+  background-color: #f2f6fc;
+}
+.m-profile-info {
+  display: grid;
+  gap: 18px;
+  padding: 20px 12px 32px;
+}
+.m-profile-info-card {
+  padding: 0 18px;
+  border-radius: 16px;
+  background: #fff;
+}
+.m-profile-info-row {
+  min-height: 66px;
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr) auto 20px;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid #e9eef5;
+  color: #303846;
+  text-decoration: none;
+  font-size: 16px;
+}
+.m-profile-info-row:last-child {
+  border-bottom: 0;
+}
+.m-profile-info-row > .n-icon:first-child {
+  font-size: 24px;
+}
+.m-profile-info-row > .n-icon:last-child,
+.m-profile-avatar-row > .n-icon:nth-last-child(2) {
+  grid-column: 4;
+  font-size: 21px;
+}
+.m-profile-info-row > b {
+  grid-column: 3 / 5;
+  font-weight: 400;
+  white-space: nowrap;
+}
+.m-profile-avatar-row {
+  min-height: 94px;
+  cursor: pointer;
+}
+.m-profile-avatar-row input {
+  display: none;
+}
+.m-profile-avatar-preview {
+  grid-column: 3;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.m-profile-avatar-preview > img,
+.m-profile-avatar-preview > .n-icon {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  object-fit: cover;
+  font-size: 52px;
+}
+.m-profile-avatar-preview small {
+  color: var(--m-muted);
+  white-space: nowrap;
+}
+.m-profile-info > .m-form-error {
+  margin: -10px 6px 0;
+}
+.m-bound-accounts {
+  display: grid;
+  gap: 10px;
+  margin: 18px 0;
+}
+.m-bound-accounts h2,
+.m-bank-form-title {
+  margin: 0 20px 4px;
+  font-size: 16px;
+}
+.m-bound-account {
+  display: grid;
+  gap: 12px;
+  margin: 0 12px;
+  padding: 16px;
+  color: var(--m-ink);
+}
+.m-bound-account > div:not(.m-bound-account-qr) {
+  display: grid;
+  gap: 6px;
+}
+.m-bound-account span {
+  color: var(--m-muted);
+}
+.m-bound-account strong {
+  overflow-wrap: anywhere;
+  font-weight: 500;
+}
+.m-bound-account-qr {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.m-bound-account-qr figure {
+  margin: 0;
+  text-align: center;
+  color: var(--m-muted);
+}
+.m-bound-account-qr img {
+  display: block;
+  width: 100px;
+  height: 100px;
+  margin-bottom: 6px;
+  object-fit: contain;
+}
+.m-bank-form-title {
+  padding: 12px 0 0;
 }
 .m-profile-edit {
   text-align: center;