Initial rebuild of position size calculator #37
@ -13,6 +13,7 @@ pub mod blog {
|
||||
|
||||
pub mod display {
|
||||
pub mod bar_chart;
|
||||
pub mod client_only;
|
||||
pub mod clipboard;
|
||||
pub mod tooltip;
|
||||
}
|
||||
|
29
src/components/display/client_only.rs
Normal file
29
src/components/display/client_only.rs
Normal file
@ -0,0 +1,29 @@
|
||||
use yew::{function_component, html, use_state, Children, Html, Properties};
|
||||
use yew_hooks::use_effect_once;
|
||||
|
||||
#[derive(Properties, PartialEq)]
|
||||
pub struct ClientOnlyProps {
|
||||
#[prop_or_default]
|
||||
pub children: Children,
|
||||
}
|
||||
|
||||
#[function_component(ClientOnly)]
|
||||
pub fn client_only(props: &ClientOnlyProps) -> Html {
|
||||
let loaded = use_state(|| false);
|
||||
|
||||
{
|
||||
let loaded = loaded.clone();
|
||||
use_effect_once(move || {
|
||||
loaded.set(true);
|
||||
|| {}
|
||||
})
|
||||
}
|
||||
|
||||
if !*loaded {
|
||||
html! {}
|
||||
} else {
|
||||
html! {
|
||||
<>{props.children.clone()}</>
|
||||
}
|
||||
}
|
||||
}
|
@ -7,7 +7,10 @@ use yew_hooks::{use_async, UseAsyncHandle};
|
||||
|
||||
use crate::{
|
||||
components::{
|
||||
display::tooltip::{Tooltip, TooltipPosition},
|
||||
display::{
|
||||
client_only::ClientOnly,
|
||||
tooltip::{Tooltip, TooltipPosition},
|
||||
},
|
||||
fields::{
|
||||
currency::CurrencySelect,
|
||||
label::Label,
|
||||
@ -1340,18 +1343,20 @@ pub fn page() -> Html {
|
||||
html! {
|
||||
<AccountProvider>
|
||||
<PositionProvider>
|
||||
<div class="container mx-auto my-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<AccountInfo />
|
||||
<PositionInfo />
|
||||
<ClientOnly>
|
||||
<div class="container mx-auto my-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<AccountInfo />
|
||||
<PositionInfo />
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
|
||||
<ReportPositionSize />
|
||||
<ReportStopLoss />
|
||||
<ReportTakeProfit />
|
||||
<ReportPlannedStopLoss />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
|
||||
<ReportPositionSize />
|
||||
<ReportStopLoss />
|
||||
<ReportTakeProfit />
|
||||
<ReportPlannedStopLoss />
|
||||
</div>
|
||||
</div>
|
||||
</ClientOnly>
|
||||
</PositionProvider>
|
||||
</AccountProvider>
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user