Skip to content

Commit

Permalink
improve: mint-manger style buttons in cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@thesimplekid
thesimplekid committed Jul 16, 2023
1 parent 5e82e8f commit 9763077
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 105 deletions.
2 changes: 1 addition & 1 deletion Cargo.lock
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

86 changes: 44 additions & 42 deletions mint-manager/src/components/channels.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,51 +86,53 @@ impl Component for Channels {
let connect_peer_button = ctx.link().callback(|_| Msg::ConnectPeerView);

html! {
<>
<a class="block flex-1 p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"> { "Channels" } </h5>

{
match &self.view {
View::Channels => {
html!{
<>
{
self.channels.iter().map(|channel| {

let remote_balance = channel.value - channel.balance;

html!{
<Channel jwt={ctx.props().jwt.clone()} channel_id={channel.channel_id.clone()} peer_id= {channel.peer_pubkey} local_balance={channel.balance} {remote_balance} status={channel.status} url={ctx.props().url.clone()}/>
}}).collect::<Html>()
}
<button onclick={open_channel_button} class="px-6 py-2 rounded-sm shadow-sm dark:bg-violet-400 dark:text-gray-900">
{ "Open Channel" }

</button>
<button onclick={connect_peer_button} class="px-6 py-2 rounded-sm shadow-sm dark:bg-violet-400 dark:text-gray-900">
{ "Connect Peer" }

</button>
</>
}
}
View::OpenChannel => {
let back = ctx.link().callback(|_| Msg::Back);
html!{ <OpenChannel jwt={ctx.props().jwt.clone()} url={ctx.props().url.clone()} peers={self.peers.clone()} back_callback={back}/> }
}
View::ConnectPeer => {
let open_channel_cb = ctx.link().callback(|_| Msg::OpenChannelView);
let back = ctx.link().callback(|_| Msg::Back);
html!{ <ConnectPeer jwt={ctx.props().jwt.clone()} url={ctx.props().url.clone()} back_callback={back} {open_channel_cb}/> }

<>
<a class="block flex-1 p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"> { "Channels" } </h5>

{
match &self.view {
View::Channels => {
html!{
<>
{
self.channels.iter().map(|channel| {
let remote_balance = channel.value - channel.balance;
html!{
<Channel jwt={ctx.props().jwt.clone()} channel_id={channel.channel_id.clone()} peer_id={channel.peer_pubkey} local_balance={channel.balance} {remote_balance} status={channel.status} url={ctx.props().url.clone()}/>
}
}).collect::<Html>()
}
<div class="flex space-x-2">
<button onclick={open_channel_button} class="flex-1 px-6 py-2 rounded-sm shadow-sm dark:bg-violet-400 dark:text-gray-900">
{ "Open Channel" }
</button>
<button onclick={connect_peer_button} class="flex-1 px-6 py-2 rounded-sm shadow-sm dark:bg-violet-400 dark:text-gray-900">
{ "Connect Peer" }
</button>
</div>
</>
}
}
View::OpenChannel => {
let back = ctx.link().callback(|_| Msg::Back);
html!{
<OpenChannel jwt={ctx.props().jwt.clone()} url={ctx.props().url.clone()} peers={self.peers.clone()} back_callback={back}/>
}
}
View::ConnectPeer => {
let open_channel_cb = ctx.link().callback(|_| Msg::OpenChannelView);
let back = ctx.link().callback(|_| Msg::Back);
html!{
<ConnectPeer jwt={ctx.props().jwt.clone()} url={ctx.props().url.clone()} back_callback={back} {open_channel_cb}/>
}
}
}
}
}
</a>
</>

</a>
</>
}
}
}
}

Expand Down
99 changes: 49 additions & 50 deletions mint-manager/src/components/ln.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,75 +211,74 @@ impl Component for Ln {
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{ "Lightning" }</h5>
{
match &self.view {
View::Transactions => {
View::Transactions => {
html!{
<>
<button onclick={receive} class="p-8 px-6 py-2 rounded-sm shadow-sm dark:bg-violet-400 dark:text-gray-900">{"Receive"}</button>
<button onclick={pay_button} class="p-8 px-6 py-2 rounded-sm shadow-sm dark:bg-violet-400 dark:text-gray-900">{"Send"}</button>
</>
<>
<div class="flex space-x-2">
<button onclick={receive} class="flex-1 p-8 px-6 py-2 rounded-sm shadow-sm dark:bg-violet-400 dark:text-gray-900">{"Receive"}</button>
<button onclick={pay_button} class="flex-1 p-8 px-6 py-2 rounded-sm shadow-sm dark:bg-violet-400 dark:text-gray-900">{"Send"}</button>
</div>
</>
}
}
View::Receive => {
html! {

<div class="relative z-0 w-full mb-6 group">
<div class="relative z-0 w-full mb-6 group">
<label for="description" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">{"Description"}</label>
<input type="text" name="description" id="description" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" ref={self.description_node_ref.clone()} />
</div>
<div class="relative z-0 w-full mb-6 group">
<label for="push_amount" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">{"Amount (sat)"}</label>
<input type="numeric" name="push_amount" id="push_amount" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" ref={self.amount_node_ref.clone()} />
}
View::Receive => {
html! {
<div class="relative z-0 w-full mb-6 group">
<div class="relative z-0 w-full mb-6 group">
<label for="description" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">{"Description"}</label>
<input type="text" name="description" id="description" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" ref={self.description_node_ref.clone()} />
</div>
<div class="relative z-0 w-full mb-6 group">
<label for="push_amount" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">{"Amount (sat)"}</label>
<input type="numeric" name="push_amount" id="push_amount" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" ref={self.amount_node_ref.clone()} />
</div>
<div class="flex flex-col justify-end gap-3 mt-6 sm:flex-row">
<button class="px-6 py-2 rounded-sm shadow-sm dark:bg-violet-400 dark:text-gray-900" onclick={generate_invoice}>{"Create Invoice"}</button>
<button class="px-6 py-2 rounded-sm" onclick={close}>{"Back"}</button>
</div>
</div>
<div class="flex flex-col justify-end gap-3 mt-6 sm:flex-row">
<button class="px-6 py-2 rounded-sm shadow-sm dark:bg-violet-400 dark:text-gray-900" onclick={generate_invoice}>{"Create Invoice"}</button>
<button class="px-6 py-2 rounded-sm" onclick={close}>{"Back"}</button>
</div>
</div>
}

}
}
View::NewInvoice(invoice) => {
html! {
<>
<h2 class="flex items-center gap-2 text-xl font-semibold leadi tracki">
html! {
<>
<h2 class="flex items-center gap-2 text-xl font-semibold leadi tracki">
{"Generated Invoice"}
</h2>
<p class="flex-1 dark:text-gray-400" style="max-width: 33vw; word-wrap: break-word;">{invoice.to_string() }</p>
<div class="flex flex-col justify-end gap-3 mt-6 sm:flex-row">
<button class="px-6 py-2 rounded-sm" onclick={close.clone()}>{"Back"}</button>
</h2>
<p class="flex-1 dark:text-gray-400" style="max-width: 33vw; word-wrap: break-word;">{invoice.to_string() }</p>
<div class="flex flex-col justify-end gap-3 mt-6 sm:flex-row">
<button class="px-6 py-2 rounded-sm" onclick={close.clone()}>{"Back"}</button>
// TODO: Copy button
// <button class="px-6 py-2 rounded-sm shadow-sm dark:bg-violet-400 dark:text-gray-900">{"Copy"}</button>
</div>

</>
}
</div>

</>
}
}
View::Send(info) => {
html!{
<>
<h2 class="flex items-center gap-2 text-xl font-semibold leadi tracki">
{"Pay Invoice"}
</h2>
<input name="pay_invoice" id="pay_invoice" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" ref={self.pay_input_node_ref.clone()} onchange={invoice_change} />

if let Some((amount, description)) = info {
html!{
<>
<h2 class="flex items-center gap-2 text-xl font-semibold leadi tracki">
{"Pay Invoice"}
</h2>
<input name="pay_invoice" id="pay_invoice" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" ref={self.pay_input_node_ref.clone()} onchange={invoice_change} />

if let Some((amount, description)) = info {
<div class="flex">
<p class="font-normal text-gray-700 dark:text-gray-400"> { format!("Description: {}", description ) } </p>
<p class="font-normal text-gray-700 dark:text-gray-400" style="margin-left: auto;"> { format!("Amount (sat): {}", amount.to_sat() ) } </p>
</div>
}

<div class="flex flex-col justify-end gap-3 mt-6 sm:flex-row">
<button class="px-6 py-2 rounded-sm shadow-sm dark:bg-violet-400 dark:text-gray-900" onclick={send_pay}>{"Pay"}</button>
<button class="px-6 py-2 rounded-sm" onclick={close}>{"Back"}</button>
</div>
<div class="flex flex-col justify-end gap-3 mt-6 sm:flex-row">
<button class="px-6 py-2 rounded-sm shadow-sm dark:bg-violet-400 dark:text-gray-900" onclick={send_pay}>{"Pay"}</button>
<button class="px-6 py-2 rounded-sm" onclick={close}>{"Back"}</button>
</div>

</>
}
</>
}

}
}
}
}
</a>
Expand Down
24 changes: 12 additions & 12 deletions mint-manager/src/components/on_chain.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,18 +159,18 @@ impl Component for OnChain {
match &self.view {
View::Transactions => {
html! {
<>
<button onclick={generate_address} class="px-6 py-2 rounded-sm shadow-sm dark:bg-violet-400 dark:text-gray-900">
{ "Generate Address" }
</button>


<button onclick={send} class="px-6 py-2 rounded-sm shadow-sm dark:bg-violet-400 dark:text-gray-900">
{ "Send" }
</button>

</>
}
<>
<div class="flex space-x-2">
<button onclick={generate_address} class="flex-1 px-6 py-2 rounded-sm shadow-sm dark:bg-violet-400 dark:text-gray-900">
{ "Generate Address" }
</button>
<button onclick={send} class="flex-1 px-6 py-2 rounded-sm shadow-sm dark:bg-violet-400 dark:text-gray-900">
{ "Send" }
</button>
</div>

</>
}
}
View::NewAddress(address) => {
html! {
Expand Down

0 comments on commit 9763077

Please sign in to comment.