add percentage change component
This commit is contained in:
saml33
parent
89704f18d5
commit
dd8f188a34
|
|
@ -26,6 +26,7 @@ import WithdrawModal from './modals/WithdrawModal'
|
|||
import { IconButton, LinkButton } from './shared/Button'
|
||||
import ContentBox from './shared/ContentBox'
|
||||
import IconDropMenu from './shared/IconDropMenu'
|
||||
import PercentageChange from './shared/PercentageChange'
|
||||
import SimpleAreaChart from './shared/SimpleAreaChart'
|
||||
|
||||
const TokenList = () => {
|
||||
|
|
@ -238,14 +239,8 @@ const TokenList = () => {
|
|||
)}
|
||||
</td>
|
||||
<td>
|
||||
<div className="flex flex-col text-right">
|
||||
<p
|
||||
className={
|
||||
change >= 0 ? 'text-th-green' : 'text-th-red'
|
||||
}
|
||||
>
|
||||
{change.toFixed(2)}%
|
||||
</p>
|
||||
<div className="flex flex-col items-end">
|
||||
<PercentageChange change={change} />
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import AccountChart from './AccountChart'
|
|||
import { useViewport } from '../../hooks/useViewport'
|
||||
import { breakpoints } from '../../utils/theme'
|
||||
import useMangoAccount from '../shared/useMangoAccount'
|
||||
import PercentageChange from '../shared/PercentageChange'
|
||||
|
||||
export async function getStaticProps({ locale }: { locale: string }) {
|
||||
return {
|
||||
|
|
@ -164,29 +165,7 @@ const AccountPage = () => {
|
|||
)}
|
||||
</div>
|
||||
{performanceData.length && mangoAccount ? (
|
||||
<div className="mt-1 flex items-center space-x-2">
|
||||
{accountValueChange > 0 ? (
|
||||
<UpTriangle />
|
||||
) : accountValueChange < 0 ? (
|
||||
<DownTriangle />
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<p
|
||||
className={
|
||||
accountValueChange > 0
|
||||
? 'text-th-green'
|
||||
: accountValueChange < 0
|
||||
? 'text-th-red'
|
||||
: 'text-th-fgd-4'
|
||||
}
|
||||
>
|
||||
{isNaN(accountValueChange)
|
||||
? '0.00'
|
||||
: accountValueChange.toFixed(2)}
|
||||
%
|
||||
</p>
|
||||
</div>
|
||||
<PercentageChange change={accountValueChange} />
|
||||
) : (
|
||||
<div className="mt-1 flex items-center space-x-2">
|
||||
<UpTriangle />
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
import { DownTriangle, UpTriangle } from './DirectionTriangles'
|
||||
|
||||
const PercentageChange = ({ change }: { change: number | typeof NaN }) => {
|
||||
return (
|
||||
<div className="mt-1 flex items-center space-x-2">
|
||||
{change > 0 ? <UpTriangle /> : change < 0 ? <DownTriangle /> : ''}
|
||||
<p
|
||||
className={`font-normal ${
|
||||
change > 0
|
||||
? 'text-th-green'
|
||||
: change < 0
|
||||
? 'text-th-red'
|
||||
: 'text-th-fgd-4'
|
||||
}`}
|
||||
>
|
||||
{isNaN(change) ? '0.00' : change.toFixed(2)}%
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PercentageChange
|
||||
|
|
@ -24,6 +24,7 @@ import { formatFixedDecimals } from '../../utils/numbers'
|
|||
import SheenLoader from '../shared/SheenLoader'
|
||||
import { COLORS } from '../../styles/colors'
|
||||
import { useTheme } from 'next-themes'
|
||||
import PercentageChange from '../shared/PercentageChange'
|
||||
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
|
|
@ -251,7 +252,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
|||
) : null}
|
||||
{mouseData ? (
|
||||
<>
|
||||
<div className="mb-1 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
|
||||
<div className="flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
|
||||
<FlipNumbers
|
||||
height={40}
|
||||
width={26}
|
||||
|
|
@ -259,20 +260,9 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
|||
numbers={formatFixedDecimals(mouseData['price'])}
|
||||
/>
|
||||
<span
|
||||
className={`ml-0 mt-2 flex items-center text-sm md:ml-3 md:mt-0 ${
|
||||
calculateChartChange() >= 0
|
||||
? 'text-th-green'
|
||||
: 'text-th-red'
|
||||
}`}
|
||||
className={`ml-0 mt-2 flex items-center text-sm md:ml-3 md:mt-0`}
|
||||
>
|
||||
{calculateChartChange() >= 0 ? (
|
||||
<UpTriangle />
|
||||
) : (
|
||||
<DownTriangle />
|
||||
)}
|
||||
<span className="ml-1">
|
||||
{calculateChartChange().toFixed(2)}%
|
||||
</span>
|
||||
<PercentageChange change={calculateChartChange()} />
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-th-fgd-4">
|
||||
|
|
@ -281,7 +271,7 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
|||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="mb-1 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
|
||||
<div className="flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
|
||||
<FlipNumbers
|
||||
height={40}
|
||||
width={26}
|
||||
|
|
@ -291,20 +281,9 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
|
|||
)}
|
||||
/>
|
||||
<span
|
||||
className={`ml-0 mt-2 flex items-center text-sm md:ml-3 md:mt-0 ${
|
||||
calculateChartChange() >= 0
|
||||
? 'text-th-green'
|
||||
: 'text-th-red'
|
||||
}`}
|
||||
className={`ml-0 mt-2 flex items-center text-sm md:ml-3 md:mt-0`}
|
||||
>
|
||||
{calculateChartChange() >= 0 ? (
|
||||
<UpTriangle />
|
||||
) : (
|
||||
<DownTriangle />
|
||||
)}
|
||||
<span className="ml-1">
|
||||
{calculateChartChange().toFixed(2)}%
|
||||
</span>
|
||||
<PercentageChange change={calculateChartChange()} />
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-th-fgd-4">
|
||||
|
|
|
|||
Loading…
Reference in New Issue