126 lines
2.8 KiB
Vue
126 lines
2.8 KiB
Vue
<script lang='ts' setup>
|
|
import { copyOutline, qrCodeOutline, shareOutline } from "ionicons/icons";
|
|
|
|
const { user } = useAuth();
|
|
</script>
|
|
|
|
<template>
|
|
<IonPage>
|
|
<IonHeader>
|
|
<IonToolbar class="ui-toolbar">
|
|
<ion-buttons slot="start">
|
|
<ion-back-button />
|
|
</ion-buttons>
|
|
<ion-title>My Onchain Address</ion-title>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
<IonContent :fullscreen="true" class="ion-padding">
|
|
<div class="content-wrapper">
|
|
<div class="container">
|
|
<div class="user-info">
|
|
<div class="avatar-wrapper">
|
|
<ui-avatar class="size-18" />
|
|
</div>
|
|
<IonText class="user-email">
|
|
{{ user?.email }}
|
|
</IonText>
|
|
</div>
|
|
|
|
<div class="ion-text-center address-info">
|
|
<ion-icon :icon="qrCodeOutline" class="qr-code" />
|
|
<div class="mt-4px">
|
|
<ion-text color="secondary">
|
|
<div class="text-sm">
|
|
Onchain address
|
|
</div>
|
|
</ion-text>
|
|
<ion-text>
|
|
<div class="mt-4px">
|
|
0x1234567890abcdef1234
|
|
</div>
|
|
</ion-text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ion-margin-top ion-text-center flex gap-6">
|
|
<ion-button fill="clear">
|
|
<ion-icon slot="start" :icon="shareOutline" />
|
|
Share
|
|
</ion-button>
|
|
<ion-button fill="clear">
|
|
<ion-icon slot="start" :icon="copyOutline" />
|
|
Copy
|
|
</ion-button>
|
|
</div>
|
|
</div>
|
|
</IonContent>
|
|
</IonPage>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
.content-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
--background: #f4f6f8;
|
|
--border-color: #c6c5c5;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
.content-wrapper {
|
|
--background: #232324;
|
|
--border-color: #3a3a3b;
|
|
}
|
|
}
|
|
.container {
|
|
width: 80vw;
|
|
height: 80vw;
|
|
max-width: 500px;
|
|
max-height: 500px;
|
|
border-radius: 14px;
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
background-color: var(--background);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.user-email {
|
|
margin-top: 4px;
|
|
font-weight: 500;
|
|
font-size: 1.1rem;
|
|
}
|
|
.user-info {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.avatar-wrapper {
|
|
background-color: var(--background);
|
|
padding: 4px;
|
|
border-radius: 100%;
|
|
width: fit-content;
|
|
}
|
|
.avatar {
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.address-info {
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
}
|
|
.qr-code {
|
|
width: 50vw;
|
|
height: 50vw;
|
|
max-width: 250px;
|
|
max-height: 250px;
|
|
}
|
|
</style>
|