Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

wallet-page design updates #408

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

wallet-page design updates #408

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 22 additions & 21 deletions ssr/src/page/wallet/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,14 @@ fn ProfileGreeter(details: ProfileDetails) -> impl IntoView {
view! {
<div class="flex flex-col">
<span class="text-white/50 text-md">Welcome!</span>
<span class="text-white text-lg md:text-xl truncate">
<span class="text-lg text-white md:text-xl truncate bg-white/15" >
// TEMP: Workaround for hydration bug until leptos 0.7
// class=("md:w-5/12", move || !is_connected())
{details.display_name_or_fallback()}
</span>
</div>
<div class="w-16 aspect-square overflow-clip justify-self-end rounded-full">
<img class="h-full w-full object-cover" src=details.profile_pic_or_random()/>
<div class="justify-self-end w-16 rounded-full aspect-square overflow-clip">
<img class="object-cover w-full h-full" src=details.profile_pic_or_random()/>
</div>
}
}
Expand All @@ -43,17 +43,17 @@ fn FallbackGreeter() -> impl IntoView {
view! {
<div class="flex flex-col">
<span class="text-white/50 text-md">Welcome!</span>
<div class="w-3/4 rounded-full py-2 bg-white/40 animate-pulse"></div>
<div class="py-2 w-3/4 rounded-full animate-pulse bg-white/40"></div>
</div>
<div class="w-16 aspect-square overflow-clip rounded-full justify-self-end bg-white/40 animate-pulse"></div>
<div class="justify-self-end w-16 rounded-full animate-pulse aspect-square overflow-clip bg-white/40"></div>
}
}

const RECENT_TXN_CNT: usize = 10;

#[component]
fn BalanceFallback() -> impl IntoView {
view! { <div class="w-1/4 rounded-full py-3 mt-1 bg-white/30 animate-pulse"></div> }
view! { <div class="py-3 mt-1 w-1/4 rounded-full animate-pulse bg-white/30"></div> }
}

#[component]
Expand Down Expand Up @@ -123,19 +123,19 @@ pub fn Wallet() -> impl IntoView {

view! {
<div>
<div class="top-0 bg-black text-white w-full items-center z-50 pt-4 pl-4">
<div class="top-0 z-50 items-center pt-4 pl-4 w-full text-white bg-black">
<div class="flex flex-row justify-start">
<BackButton fallback="/".to_string()/>
</div>
</div>
<div class="flex flex-col w-dvw min-h-dvh bg-black gap-4 px-4 pt-4 pb-12">
<div class="flex flex-col gap-4 px-4 pt-4 pb-12 bg-black w-dvw min-h-dvh">
<div class="grid grid-cols-2 grid-rows-1 items-center w-full">
<AuthCansProvider fallback=FallbackGreeter let:cans>
<ProfileGreeter details=cans.profile_details()/>
</AuthCansProvider>
</div>
<div class="flex flex-col w-full items-center mt-6 text-white">
<span class="text-md lg:text-lg uppercase">Your Coyns Balance</span>
<div class="flex flex-col items-center mt-6 w-full text-white">
<span class="uppercase lg:text-lg text-md">Your Coyns Balance</span>
<Suspense fallback=BalanceFallback>
{move || {
let balance = try_or_redirect_opt!(balance_fetch() ?);
Expand All @@ -145,34 +145,34 @@ pub fn Wallet() -> impl IntoView {
</Suspense>
</div>
<Show when=move || !is_connected()>
<div class="flex flex-col w-full py-5 items-center">
<div class="flex flex-row w-9/12 md:w-5/12 items-center">
<div class="flex flex-col items-center py-5 w-full">
<div class="flex flex-row items-center w-9/12 md:w-5/12">
<ConnectLogin
login_text="Login to claim your COYNs"
cta_location="wallet"
/>
</div>
</div>
</Show>
<div class="flex flex-col w-full gap-2">
<div class="flex flex-row w-full items-end justify-between">
<span class="text-white text-sm md:text-md">My Tokens</span>
<a href="/tokens" class="text-white/50 text-md md:text-lg">
<div class="flex flex-col gap-2 w-full">
<div class="flex flex-row justify-between items-end w-full">
<span class="text-sm text-white md:text-md">My Tokens</span>
<a href="/tokens" class="md:text-lg text-white/50 text-md">
See All
</a>
</div>
<div class="flex flex-col gap-2 items-center">
<TokensFetch/>
</div>
</div>
<div class="flex flex-col w-full gap-2">
<div class="flex flex-row w-full items-end justify-between">
<span class="text-white text-sm md:text-md">Recent Transactions</span>
<a href="/transactions" class="text-white/50 text-md md:text-lg">
<div class="flex flex-col gap-2 w-full">
<div class="flex flex-row justify-between items-end w-full">
<span class="text-sm text-white md:text-md">Recent Transactions</span>
<a href="/transactions" class="md:text-lg text-white/50 text-md">
See All
</a>
</div>
<div class="flex flex-col divide-y divide-white/10">
<div class="flex flex-col rounded-xl border-2 divide-y divide-white/10 border-neutral-700 bg-white/15">
<Suspense fallback=BulletLoader>
{move || {
history_fetch()
Expand All @@ -191,6 +191,7 @@ pub fn Wallet() -> impl IntoView {

</Suspense>
</div>
<div class="flex justify-center items-center pb-8 text-white underline">Back to top</div>
</div>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions ssr/src/page/wallet/txn.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,16 +107,16 @@ pub fn TxnView(info: TxnInfo, #[prop(optional)] _ref: NodeRef<html::Div>) -> imp
);

view! {
<div _ref=_ref class="grid grid-cols-2 grid-rows-1 w-full items-center py-4">
<div _ref=_ref class="grid grid-cols-2 grid-rows-1 items-center py-4 w-full">
<div class="flex flex-row gap-2">
<div class="grid grid-cols-1 place-items-center place-content-center p-2 rounded-full text-primary-600 text-xl lg:text-2xl">
<div class="grid grid-cols-1 place-content-center place-items-center p-2 text-xl rounded-full lg:text-2xl text-primary-600">
<Icon icon=info.tag.icondata()/>
</div>
<div class="flex flex-col">
<span class="text-md md:text-lg font-semibold text-white">
<span class="font-semibold text-white md:text-lg text-md">
{info.tag.to_text()}
</span>
<span class="text-sm md:text-md text-white/50">{info.amount} COYNs</span>
<span class="text-sm text-white/50 md:text-md">{info.amount} COYNs</span>
</div>
</div>
<span class=move || {
Expand All @@ -125,7 +125,7 @@ pub fn TxnView(info: TxnInfo, #[prop(optional)] _ref: NodeRef<html::Div>) -> imp
} else {
"text-red-600 justify-self-end"
}
}>{bal_res} COYNs</span>
} style="padding-right: 10px;" >{bal_res} COYNs</span>
</div>
}
}
Expand Down
Loading