blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add flip numbers to chart

This commit is contained in:
tjs 2022-07-22 13:07:55 -04:00
parent 3785bebcb5
commit 04393806df
5 changed files with 55 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/TokenList.tsx
View File

@ -137,7 +137,10 @@ const TokenList = () => {
{banks.map((bank) => {
const oraclePrice = bank.value.price
return (
<div className="rounded-md border border-th-bkg-4 p-4">
<div
key={bank.key}
className="rounded-md border border-th-bkg-4 p-4"
>
<div className="flex items-center justify-between">
<div className="flex items-center">
<div className="mr-2.5 flex flex-shrink-0 items-center">

44
components/swap/SwapTokenChart.tsx
View File

@ -9,6 +9,8 @@ import {
Tooltip,
ResponsiveContainer,
} from 'recharts'
import FlipNumbers from 'react-flip-numbers'
import LineChartIcon from '../icons/LineChartIcon'
import ContentBox from '../shared/ContentBox'
import { GREEN, RED } from '../../styles/colors'
@ -138,15 +140,15 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
const calculateChartChange = () => {
if (chartData.length) {
if (mouseData) {
const index = chartData.findIndex((d: any) => d.time === mouseData.time)
return (
((chartData[chartData.length - 1]['price'] -
chartData[index]['price']) /
chartData[0]['price']) *
100
)
} else
// if (mouseData) {
// const index = chartData.findIndex((d: any) => d.time === mouseData.time)
// return (
// ((chartData[chartData.length - 1]['price'] -
// chartData[index]['price']) /
// chartData[0]['price']) *
// 100
// )
// } else
return (
((chartData[chartData.length - 1]['price'] - chartData[0]['price']) /
chartData[0]['price']) *
@ -172,7 +174,14 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
{mouseData ? (
<>
<div className="mb-0.5 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
{numberFormatter.format(mouseData['price'])}
<FlipNumbers
height={36}
width={24}
play
delay={0.025}
duration={1}
numbers={numberFormatter.format(mouseData['price'])}
/>
<span
className={`ml-0 mt-2 flex items-center text-sm md:ml-3 md:mt-0 ${
calculateChartChange() >= 0
@ -197,9 +206,14 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
) : (
<>
<div className="mb-0.5 flex flex-col text-4xl font-bold text-th-fgd-1 md:flex-row md:items-end">
{numberFormatter.format(
<FlipNumbers
height={36}
width={24}
play
numbers={numberFormatter.format(
chartData[chartData.length - 1]['price']
)}
/>
<span
className={`ml-0 mt-2 flex items-center text-sm md:ml-3 md:mt-0 ${
calculateChartChange() >= 0
@ -312,9 +326,11 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
</div>
</div>
) : (
<div className="mt-4 rounded-md bg-th-bkg-3 p-4 text-center text-th-fgd-3 md:mt-0">
<LineChartIcon className="mx-auto h-6 w-6 text-th-primary" />
Chart not available
<div className="mt-4 flex h-96 items-center justify-center rounded-lg bg-th-bkg-2 p-4 text-th-fgd-3 md:mt-0">
<div className="">
<LineChartIcon className="mx-auto h-12 w-12 text-th-primary" />
<span className="text-lg">Chart not available</span>
</div>
</div>
)}
</ContentBox>

1
package.json
View File

@ -30,6 +30,7 @@
"process": "^0.11.10",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-flip-numbers": "^3.0.5",
"react-window": "^1.8.7",
"recharts": "^2.1.12",
"zustand": "^3.7.2"

1
types/index.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module 'react-flip-numbers'

12
yarn.lock
View File

@ -3867,6 +3867,13 @@ react-dom@18.0.0:
loose-envify "^1.1.0"
scheduler "^0.21.0"
react-flip-numbers@^3.0.5:
version "3.0.5"
resolved "https://registry.yarnpkg.com/react-flip-numbers/-/react-flip-numbers-3.0.5.tgz#37fc3f9416575bfb9e9b7af44a7d64aaf922c712"
integrity sha512-iOzLaRZbqU7G7A+uE/ySBVzEHr+vZTPMJNP20o1dFUUZ3kkrpTFxpay3+kEVSSzeOXJWQWYDUQOFbv7g/PSf1g==
dependencies:
react-simple-animate "3.0.2"
react-i18next@^11.18.0:
version "11.18.1"
resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.18.1.tgz#ba86ed09069e129b8623a28f2b9a03d7f105ea6f"
@ -3899,6 +3906,11 @@ react-resize-detector@^7.1.2:
dependencies:
lodash "^4.17.21"
react-simple-animate@3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-3.0.2.tgz#67f29b0c64155d2dfd540c1c74f634ef521536a8"
integrity sha512-GDpznDMpIHHdH6L6AZo9nNry6Xsq7forKmd6rwigMSuxe4FS9ihK0HSC1odB4WWKbA87S8VL7EVR9JeTRVkbQA==
react-smooth@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-2.0.1.tgz#74c7309916d6ccca182c4b30c8992f179e6c5a05"