Skip to content

Commit

Permalink
Revert "staking form ui refinement (#421)"
Browse files Browse the repository at this point in the history 
This reverts commit 38ab9e1.
  • Loading branch information
@jrwbabylonlab
jrwbabylonlab authored Dec 3, 2024
1 parent 38ab9e1 commit 2c1d1e1
Show file tree
Hide file tree
Showing 6 changed files with 109 additions and 213 deletions.
2 changes: 1 addition & 1 deletion src/app/components/PersonalBalance/PersonalBalance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { StatItem } from "../Stats/StatItem";
export function PersonalBalance() {
return (
<div className="flex flex-col gap-4 p-1 xl:justify-between mb-12">
<Heading variant="h4" className="text-primary-dark md:text-4xl">
<Heading variant="h5" className="text-primary-dark md:text-4xl">
Wallet Balance
</Heading>
<div className="flex flex-col justify-between bg-secondary-contrast rounded p-6 text-base md:flex-row">
Expand Down
14 changes: 5 additions & 9 deletions src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Heading, Text } from "@babylonlabs-io/bbn-core-ui";
import { useEffect } from "react";
import InfiniteScroll from "react-infinite-scroll-component";

Expand Down Expand Up @@ -44,13 +43,10 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
}

return (
<div className="flex flex-col">
<Heading variant="h5" className="text-primary-dark">
Step 1
</Heading>
<Text variant="body1" className="text-primary-light">
Select a Finality Provider
</Text>
<>
<p>
<strong>Step-1:</strong> Select a finality provider
</p>
<div className="flex gap-3">
<FinalityProviderSearch
searchValue={searchValue}
Expand Down Expand Up @@ -99,6 +95,6 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
))}
</InfiniteScroll>
</div>
</div>
</>
);
};
72 changes: 16 additions & 56 deletions src/app/components/Staking/Form/StakingAmount.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
import { Button, Heading, Text } from "@babylonlabs-io/bbn-core-ui";
import { ChangeEvent, FocusEvent, useEffect, useState } from "react";
import { FaBitcoin } from "react-icons/fa6";
import { twJoin } from "tailwind-merge";

import { getNetworkConfig } from "@/config/network.config";
import { btcToSatoshi, satoshiToBtc } from "@/utils/btc";
Expand Down Expand Up @@ -121,61 +118,24 @@ export const StakingAmount: React.FC<StakingAmountProps> = ({
return (
<label className="form-control w-full flex-1">
<div className="label pt-0">
<Heading variant="h6" className="text-xl text-primary-dark">
Amount
</Heading>
<span className="label-text-alt text-base">Amount</span>
<span className="label-text-alt opacity-50">
min/max: {minStakeAmount}/{maxStakeAmount} {coinName}
</span>
</div>
<div className={"flex flex-col gap-6"}>
<div className="flex flex-col">
<div
className={twJoin(
"flex flex-col gap-2 border rounded border-primary-light p-3",
error ? "border-error-main" : "",
)}
>
<div className="flex flex-row items-center">
<input
type="number"
className={twJoin(
"no-focus w-full bg-transparent",
error ? "text-error-main" : "",
)}
value={value}
onChange={handleChange}
onBlur={handleBlur}
/>
<div className="flex flex-row items-center p-1 border rounded-[100px] border-primary-light/20">
<FaBitcoin size={24} className="text-secondary-main" />
<Text variant="body1" className="text-sm px-2 py-1">
BTC
</Text>
</div>
</div>
<div className="flex flex-row items-center justify-between text-primary-light">
<Text variant="body1" className="text-xs">
$90,000.42
</Text>
<div className="flex flex-row items-center gap-2">
<Text variant="body1" className="text-xs">
10.0000 BTC
</Text>
<Button
size="small"
color="secondary"
className="bg-primary-contrast text-xs h-5"
>
Max
</Button>
</div>
</div>
</div>
{error && (
<div className="my-2 min-h-[20px]">
<p className="text-center text-sm text-error-main">{error}</p>
</div>
)}
<input
type="string"
className={`no-focus input input-bordered w-full ${error ? "input-error" : ""}`}
value={value}
onChange={handleChange}
onBlur={handleBlur}
placeholder={coinName}
/>
{error && (
<div className="my-2 min-h-[20px]">
<p className="text-center text-sm text-error">{error}</p>
</div>
</div>
)}
</label>
);
};
77 changes: 24 additions & 53 deletions src/app/components/Staking/Form/StakingFee.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import { Button, Text } from "@babylonlabs-io/bbn-core-ui";
import { useEffect, useState } from "react";
import { FaPen } from "react-icons/fa6";

import { getNetworkConfig } from "@/config/network.config";
import { satoshiToBtc } from "@/utils/btc";
Expand Down Expand Up @@ -50,58 +48,31 @@ export const StakingFee: React.FC<StakingFeeProps> = ({

const defaultModeRender = () => {
return (
<div className="flex flex-col gap-6">
{mempoolFeeRates ? (
<>
<div className="flex flex-row items-center justify-between text-primary-dark">
<Text variant="body1">Network Fee Rate</Text>
<div className="flex flex-row gap-2 items-center">
<Text variant="body1">{defaultFeeRate} Sats/vB</Text>
<Button
size="small"
variant="outlined"
className="pl-1 w-6 h-6"
>
<FaPen size={16} />
</Button>
</div>
</div>
<div className="flex flex-row items-start justify-between text-primary-dark">
<Text variant="body1">Bitcoin Network Fee</Text>
<div className="flex flex-col items-end justify-center">
<Text variant="body1">0.00000025</Text>
<Text variant="body1" className="text-primary-light text-sm">
$0.02
</Text>
</div>
</div>
<div className="flex flex-row items-start justify-between text-primary-dark">
<Text variant="body1">Babylon Network Fee</Text>
<div className="flex flex-col items-end justify-center">
<Text variant="body1">2.0000</Text>
<Text variant="body1" className="text-primary-light text-sm">
$0.02
</Text>
</div>
</div>
<div className="divider mx-0 my-0" />
<div className="flex flex-row items-start justify-between text-primary-dark">
<Text variant="body1" className="font-bold">
Total
</Text>
<div className="flex flex-col items-end justify-center">
<Text variant="body1" className="font-bold">
0.004
</Text>
<Text variant="body1" className="text-primary-light text-sm">
$370.03
</Text>
</div>
<div className="flex flex-col justify-center gap-1 items-center">
<div className="min-h-8 flex justify-center flex-col items-center">
{mempoolFeeRates ? (
<div>
<p>
Recommended fee rate: <strong>{defaultFeeRate} sats/vB</strong>
</p>
<p>
Transaction fee amount:{" "}
<strong>
{satoshiToBtc(stakingFeeSat)} {coinName}
</strong>
</p>
</div>
</>
) : (
<LoadingSmall text="Loading recommended fee rate..." />
)}
) : (
<LoadingSmall text="Loading recommended fee rate..." />
)}
</div>
<button
className="btn btn-sm btn-link no-underline"
onClick={() => setCustomMode(true)}
disabled={!mempoolFeeRates || !stakingFeeSat}
>
Use Custom
</button>
</div>
);
};
Expand Down
Loading

0 comments on commit 2c1d1e1

Please sign in to comment.