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

Price info styling #126

Merged
merged 13 commits into from
Sep 26, 2023
Merged

Price info styling #126

Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
4cb1f39
Fixing issue #121
Sep 21, 2023
3d99ed9
fixed missed style
Sep 21, 2023
8f0ee28
Fixed decimals
Sep 22, 2023
2a227c8
removing extra function
Sep 22, 2023
378c070
fit prettier highlight
Sep 22, 2023
51d61d5
fixed typo
Sep 22, 2023
f47c311
fixing prettier warnings
Sep 22, 2023
6161765
fixed missed text size
Sep 22, 2023
56c4b0e
added missing bold
Sep 22, 2023
8cec007
Merge branch 'DeXter-on-Radix:main' into price-info-styling
nguvictor Sep 25, 2023
33b0550
switched to displayAmount, cleaned up colors
Sep 25, 2023
570bb31
formatting and linter fixes
Sep 25, 2023
96ed644
fix typo
Sep 26, 2023
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
119 changes: 84 additions & 35 deletions src/app/components/PriceInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,65 +1,114 @@
import React from "react";
import { useAppSelector } from "../hooks";
import { displayAmount } from "../utils";

export function PriceInfo() {
const priceInfo = useAppSelector((state) => state.priceInfo);
const lastPrice = priceInfo.lastPrice;
const change = priceInfo.change24h;
const high = priceInfo.high24h;
const low = priceInfo.low24h;
const volume = priceInfo.value24h;
const noDigits = 4;
const decimalSeparator = ".";
const thousandSeparator = ",";
const fixedDecimals = 3;
const lastPrice = displayAmount(
priceInfo.lastPrice,
noDigits,
decimalSeparator,
thousandSeparator,
fixedDecimals
);
const change = displayAmount(
priceInfo.change24h,
noDigits,
decimalSeparator,
thousandSeparator,
fixedDecimals
);
const high = displayAmount(
priceInfo.high24h,
noDigits,
decimalSeparator,
thousandSeparator,
fixedDecimals
);
const low = displayAmount(
priceInfo.low24h,
noDigits,
decimalSeparator,
thousandSeparator,
fixedDecimals
);
const volume = displayAmount(
priceInfo.value24h,
noDigits,
decimalSeparator,
thousandSeparator,
fixedDecimals
);
const isNegativeOrZero = priceInfo.isNegativeOrZero;
const basePair = "XRD";

return (
<div className="flex justify-between py-2">
<div className="flex flex-col items-start pl-8">
<span className="text-sm">Price</span>
<span
className={
isNegativeOrZero ? "text-xs text-red-500" : "text-xs text-green-500"
}
>
<span className="text-sm font-bold text-secondary-content uppercase">
Price
</span>
<span className={"text-sm font-bold"}>
{lastPrice}
<span className="text-sm font-bold text-secondary-content">
{" "}
{basePair}
</span>
</span>
</div>
<div className="flex flex-col items-start">
<span className="text-sm">24h Change</span>
<span className="text-xs font-bold text-secondary-content uppercase pb-1">
24h Change
</span>
<span
className={
isNegativeOrZero ? "text-xs text-red-500" : "text-xs text-green-500"
isNegativeOrZero
? "text-sm font-bold text-error"
: "text-sm font-bold text-success"
}
>
{change}
{isNegativeOrZero ? change : "+" + change}
<span className="text-sm font-bold text-secondary-content"> %</span>
</span>
</div>
<div className="flex flex-col items-start">
<span className="text-sm">24h High</span>
<span
className={
isNegativeOrZero ? "text-xs text-red-500" : "text-xs text-green-500"
}
>
{high}
<span className="text-xs font-bold text-secondary-content uppercase pb-1">
24h Volume
</span>
<span className="text-sm font-bold primary-content">
{volume}
<span className="text-sm font-bold text-secondary-content">
{" "}
{basePair}
</span>
</span>
</div>
<div className="flex flex-col items-start">
<span className="text-sm">24h Low</span>
<span
className={
isNegativeOrZero ? "text-xs text-red-500" : "text-xs text-green-500"
}
>
{low}
<span className="text-xs font-bold text-secondary-content uppercase pb-1">
24h High
</span>
<span className="text-sm font-bold primary-content">
{high}
<span className="text-sm font-bold text-secondary-content">
{" "}
{basePair}
</span>
</span>
</div>
<div className="flex flex-col items-start pr-8">
<span className="text-sm">24h Volume</span>
<span
className={
isNegativeOrZero ? "text-xs text-red-500" : "text-xs text-green-500"
}
>
{volume}
<span className="text-xs font-bold text-secondary-content uppercase pb-1">
24h Low
</span>
<span className="text-sm font-bold primary-content">
{low}
<span className="text-sm font-bold text-secondary-content">
{" "}
{basePair}
</span>
</span>
</div>
</div>
Expand Down