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

Update wallet page style #555

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
+210 −177
Open

Update wallet page style #555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6fa2295
icons
harsh-mn-yral Dec 9, 2024
8dd528f
update wallet page
harsh-mn-yral Dec 9, 2024
9a12aa2
Merge branch 'main' into update-wallet-page
joel-medicala-yral Dec 17, 2024
dd598fa
Merge branch 'main' of https://github.com/yral-dapp/hot-or-not-web-le…
joel-medicala-yral Dec 17, 2024
23c0059
merged
joel-medicala-yral Dec 17, 2024
6e46bcd
lint
joel-medicala-yral Dec 17, 2024
6f16997
added everything
joel-medicala-yral Dec 17, 2024
f143c13
fixed send route
joel-medicala-yral Dec 17, 2024
182afe7
added inner styling to components
joel-medicala-yral Dec 17, 2024
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
1 change: 1 addition & 0 deletions ssr/src/component/icons/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@ pub mod airdrop_icon;
pub mod arrow_left_right_icon;
pub mod chevron_right_icon;
pub mod eye_hide_icon;
pub mod notification_icon;
pub mod send_icon;
pub mod share_icon;
51 changes: 51 additions & 0 deletions ssr/src/component/icons/notification_icon.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
use leptos::*;

#[component]
pub fn NotificationIcon(
#[prop(optional, default = "w-full h-full".to_string())] classes: String,
#[prop(optional)] show_dot: bool,
) -> impl IntoView {
if show_dot {
view! {
<svg
class=format!("text-neutral-200 {}", classes)
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.3067 28C18.0723 28.4041 17.7358 28.7395 17.331 28.9727C16.9261 29.2058 16.4672 29.3286 16 29.3286C15.5328 29.3286 15.0739 29.2058 14.669 28.9727C14.2642 28.7395 13.9277 28.4041 13.6933 28M24 10.6666C24 8.54489 23.1571 6.51006 21.6569 5.00977C20.1566 3.50948 18.1217 2.66663 16 2.66663C13.8783 2.66663 11.8434 3.50948 10.3431 5.00977C8.84286 6.51006 8 8.54489 8 10.6666C8 20 4 22.6666 4 22.6666H28C28 22.6666 24 20 24 10.6666Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<circle
cx="26"
cy="6"
r="5"
fill="#E2017B"
stroke="black"
stroke-width="2"
/>
</svg>
}
} else {
view! {
<svg
class=format!("text-neutral-200 {}", classes)
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.3067 28C18.0723 28.4041 17.7358 28.7395 17.331 28.9727C16.9261 29.2058 16.4672 29.3286 16 29.3286C15.5328 29.3286 15.0739 29.2058 14.669 28.9727C14.2642 28.7395 13.9277 28.4041 13.6933 28M24 10.6666C24 8.54489 23.1571 6.51006 21.6569 5.00977C20.1566 3.50948 18.1217 2.66663 16 2.66663C13.8783 2.66663 11.8434 3.50948 10.3431 5.00977C8.84286 6.51006 8 8.54489 8 10.6666C8 20 4 22.6666 4 22.6666H28C28 22.6666 24 20 24 10.6666Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
}
}
}
2 changes: 1 addition & 1 deletion ssr/src/component/share_popup.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ use crate::{
};

#[component]
fn ShareContent(
pub fn ShareContent(
share_link: String,
message: String,
#[prop(into)] show_popup: SignalSetter<bool>,
Expand Down
26 changes: 23 additions & 3 deletions ssr/src/page/icpump/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@ use crate::component::icons::chevron_right_icon::ChevronRightIcon;
use crate::component::icons::eye_hide_icon::EyeHiddenIcon;
use crate::component::icons::send_icon::SendIcon;
use crate::component::icons::share_icon::ShareIcon;
use crate::component::share_popup::ShareContent;
use crate::component::spinner::FullScreenSpinner;
use crate::consts::ICPUMP_LISTING_PAGE_SIZE;
use crate::utils::host::get_host;
use crate::utils::token::firestore::init_firebase;
use crate::utils::token::firestore::listen_to_documents;
use crate::utils::token::icpump::get_paginated_token_list;
Expand Down Expand Up @@ -146,6 +148,17 @@ pub fn TokenCard(
.expect("URL should have at least one segment")
.to_string();

let popup = create_rw_signal(false);
let base_url = get_host();

let share_link_s = store_value(format!("{}/{}", details.link, details.user_id));
let share_message = format!(
"Hey! Check out the token: {} I created on YRAL 👇 {}. I just minted my own token—come see and create yours! 🚀 #YRAL #TokenMinter",
details.token_symbol,
share_link_s(),
);
let share_message_s = store_value(share_message);

view! {
<div
class:tada=is_new_token
Expand Down Expand Up @@ -200,17 +213,24 @@ pub fn TokenCard(
<ActionButton label="Airdrop".to_string() href="#".to_string() disabled=true>
<Icon class="w-full h-full" icon=AirdropIcon />
</ActionButton>
<ActionButton label="Share".to_string() disabled=true href="#".to_string()>
<Icon class="w-full h-full" icon=ShareIcon />
<ActionButton label="Share".to_string() href="#".to_string()>
<Icon class="w-full h-full" icon=ShareIcon on:click=move |_| popup.set(true)/>
</ActionButton>
<ActionButton label="Details".to_string() href=details.link>
<Icon class="w-full h-full" icon=ChevronRightIcon />
</ActionButton>
</div>
<PopupOverlay show=popup >
<ShareContent
share_link=format!("{base_url}{}", share_link_s())
message=share_message_s()
show_popup=popup
/>
</PopupOverlay>
</div>
}
}

use crate::component::overlay::PopupOverlay;
#[component]
pub fn PageSelector(page: RwSignal<u64>, end_of_list: RwSignal<bool>) -> impl IntoView {
view! {
Expand Down
4 changes: 2 additions & 2 deletions ssr/src/page/profile/tokens.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ use yral_canisters_client::individual_user_template::DeployedCdaoCanisters;

use crate::{
component::{bullet_loader::BulletLoader, token_confetti_symbol::TokenConfettiSymbol},
page::wallet::tokens::TokenTile,
page::wallet::tokens::WalletCard,
state::canisters::{authenticated_canisters, unauth_canisters},
utils::token::icpump::IcpumpTokenInfo,
};
Expand Down Expand Up @@ -84,7 +84,7 @@ pub fn ProfileTokens(user_canister: Principal, user_principal: Principal) -> imp
.into_iter()
.map(|token| {
view! {
<TokenTile
<WalletCard
user_principal
token_meta_data=token
/>
Expand Down
150 changes: 52 additions & 98 deletions ssr/src/page/wallet/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
pub mod tokens;
pub mod transactions;
pub mod txn;

use crate::component::icons::notification_icon::NotificationIcon;
use crate::{
component::share_popup::ShareButtonWithFallbackPopup, state::canisters::unauth_canisters,
};
Expand Down Expand Up @@ -31,22 +33,26 @@ fn ProfileGreeter(details: ProfileDetails, is_own_account: bool) -> impl IntoVie
);

view! {
<div class="flex flex-col">
{is_own_account
.then(|| {
view! { <span class="text-white/50 text-md">Welcome!</span> }
})} <div class="flex flex-row gap-2">
<span class="text-lg text-white md:text-xl truncate">
// TEMP: Workaround for hydration bug until leptos 0.7
<div class="w-full flex items-center justify-between px-4 pb-2 pt-5 gap-10 mx-auto max-w-md">
<div class="flex items-center">
<img
src=details.profile_pic_or_random()
alt="Profile picture"
class="w-8 h-8 rounded-full object-cover shrink-0"
/>
<span class="line-clamp-2 text-sm text-[#A0A1A6] pl-2">
// TEMP: Workaround for hydration bug until leptos 0.7
// class=("md:w-5/12", move || !is_connected())
{details.display_name_or_fallback()}

</span>
<ShareButtonWithFallbackPopup share_link message />
</div>
</div>
<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() />

<Show when=move || is_own_account>
<a href="/wallet/notifications" class="text-xl font-semibold">
<NotificationIcon show_dot=is_own_account classes="w-8 h-8".to_string() />
</a>
</Show>
</div>
}
}
Expand Down Expand Up @@ -105,22 +111,6 @@ pub fn WalletImpl(principal: Principal) -> impl IntoView {
let (is_connected, _) = account_connected_reader();

let auth_cans = authenticated_canisters();
let balance_fetch = create_resource(
move || principal,
move |principal| async move {
let canisters = unauth_canisters();
let Some(user_canister) = canisters
.get_individual_canister_by_user_principal(principal)
.await?
else {
return Err(ServerFnError::new("Failed to get user canister"));
};
let user = canisters.individual_user(user_canister).await;

let bal = user.get_utility_token_balance().await?;
Ok::<_, ServerFnError>(bal.to_string())
},
);

let profile_info_res = auth_cans.derive(
move || principal,
Expand Down Expand Up @@ -163,85 +153,49 @@ pub fn WalletImpl(principal: Principal) -> impl IntoView {
},
);
view! {
<div>
<div class="flex flex-col gap-4 px-4 pt-4 pb-12 bg-black min-h-dvh">
<div class="grid grid-cols-2 grid-rows-1 items-center w-full">
<Suspense>
{move || {
let profile_details = try_or_redirect_opt!(profile_info_res()?);
let is_own_account = try_or_redirect_opt!(is_own_account()?);
Some(
view! { <ProfileGreeter details=profile_details is_own_account /> },
)
}}
</Suspense>
</div>
<div class="flex flex-col items-center mt-6 w-full text-white">
<Suspense>
{move || {
let is_own_account = try_or_redirect_opt!(is_own_account() ?);
let balance = try_or_redirect_opt!(balance_fetch() ?);
Some(
view! {
<span class="uppercase lg:text-lg text-md">
{if is_own_account {
"Your Coyns Balance"
} else {
"Coyns Balance"
}}
</span>
<div class="text-xl lg:text-2xl">{balance}</div>
},
)
}}
</Suspense>
</div>
<div class="flex flex-col gap-4 px-4 pt-4 pb-12 bg-black min-h-dvh font-kumbh">

<Suspense>
{move || {
let is_own_account = try_or_redirect_opt!(is_own_account() ?);
let profile_details = try_or_redirect_opt!(profile_info_res()?);
let is_own_account = try_or_redirect_opt!(is_own_account()?);
Some(
view! {
<Show when=move || !is_connected() && is_own_account>
<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>
view! { <ProfileGreeter details=profile_details is_own_account=is_own_account /> },
)
}}
</Suspense>
<Suspense>
{move || {
let is_own_account = try_or_redirect_opt!(is_own_account() ?);
Some(
view! {
<Show when=move || !is_connected() && is_own_account>
<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>
</Show>
</div>
</Show>
},
)
}}
</Suspense>
<div class="h-full w-full">
<div class="flex flex-col items-center justify-center max-w-md mx-auto px-4 mt-4">
<div class="font-kumbh self-start pb-4 font-bold text-xl text-white">All Tokens</div>
<Suspense>
{move || {
let canister_id = try_or_redirect_opt!(canister_id() ?);
Some(
view! {
<TokenList user_principal=canister_id.1 user_canister=canister_id.0 />
},
)
}}
</Suspense>
<div class="flex flex-col gap-2 w-full">
<Suspense>
{move || {
let is_own_account = try_or_redirect_opt!(is_own_account()?);
Some(
view! {
<div class="flex flex-row justify-between items-end w-full">
<span class="text-sm text-white md:text-md">
{if is_own_account { "My Tokens" } else { "Tokens" }}
</span>
</div>
},
)
}}
</Suspense>
<div class="flex flex-col gap-2 items-center">
<Suspense>
{move || {
let canister_id = try_or_redirect_opt!(canister_id() ?);
Some(
view! {
<TokenList user_principal=canister_id.1 user_canister=canister_id.0 />
},
)
}}
</Suspense>
</div>
</div>
</div>
</div>
Expand Down
Loading
Loading