diff --git a/src/components/ui/OneValueDropdown.tsx b/src/components/ui/OneValueDropdown.tsx index 9482359..e5e416b 100644 --- a/src/components/ui/OneValueDropdown.tsx +++ b/src/components/ui/OneValueDropdown.tsx @@ -1,107 +1,144 @@ -import { useONEExchangeRate } from "../../hooks/useONEExchangeRate"; -import { getNearestPriceForTimestamp } from "src/components/ONE_USDT_Rate"; -import { Text, Box, Tip } from "grommet"; -import { TipContent } from "./Tooltip"; +import {useONEExchangeRate} from "../../hooks/useONEExchangeRate"; +import {getNearestPriceForTimestamp} from "src/components/ONE_USDT_Rate"; +import {Text, Box, Tip} from "grommet"; +import {TipContent} from "./Tooltip"; import React from "react"; import dayjs from "dayjs"; -import { formatNumber } from "./utils"; -import { Dropdown } from "../dropdown/Dropdown"; -import { useThemeMode } from "src/hooks/themeSwitcherHook"; +import {formatNumber} from "./utils"; +import {Dropdown} from "../dropdown/Dropdown"; +import {useThemeMode} from "src/hooks/themeSwitcherHook"; +import {CopyBtn} from "./CopyBtn" +import {toaster} from "../../App" +import {StatusGood} from "grommet-icons"; +import styled from "styled-components" + +const Icon = styled(StatusGood)` + margin-right: 5px; +`; interface ONEValueProps { - value: (string | number)[]; - timestamp?: string; - hideTip?: boolean; + value: (string | number)[]; + timestamp?: string; + hideTip?: boolean; } // @ts-ignore export const ONEValueDropdown = (props: ONEValueProps) => { - const { value, timestamp = "", hideTip = false } = props; - const { lastPrice } = useONEExchangeRate(); - const themeMode = useThemeMode(); + const {value, timestamp = "", hideTip = false} = props; + const {lastPrice} = useONEExchangeRate(); + const themeMode = useThemeMode(); + + if (!value.length) { + return null; + } + + const isTodayTransaction = + dayjs(timestamp).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD"); + const price = + timestamp && !isTodayTransaction + ? getNearestPriceForTimestamp(timestamp) + : lastPrice; - if (!value.length) { - return null; - } + const normilizedValue: { + value: string | number; + one: number; + usd: string | number; + index: number; + }[] = value.map((hashValue, index) => { + const bi = BigInt(hashValue) / BigInt(10 ** 14); + const v = parseInt(bi.toString()) / 10000; + let USDValue = 0; + if (price && v > 0) { + USDValue = v * +price; + } - const isTodayTransaction = - dayjs(timestamp).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD"); - const price = - timestamp && !isTodayTransaction - ? getNearestPriceForTimestamp(timestamp) - : lastPrice; + return {value: hashValue, one: v, usd: USDValue || 0, index}; + }); - const normilizedValue: { - value: string | number; - one: number; - usd: string | number; - index: number; - }[] = value.map((hashValue, index) => { - const bi = BigInt(hashValue) / BigInt(10 ** 14); - const v = parseInt(bi.toString()) / 10000; - let USDValue = 0; - if (price && v > 0) { - USDValue = v * +price; + const hideCopyBtn = false + + let valueCopy = '' + + try { + valueCopy = normilizedValue[0].one.toString() + } catch (e) { } - return { value: hashValue, one: v, usd: USDValue || 0, index }; - }); + return ( + ( + + + {hideCopyBtn ? null : ( + { + e.preventDefault(); + e.stopPropagation(); + toaster.show({ + message: () => ( + + {} + Copied to clipboard + + ) + }); + }} + /> + )} +
- return ( - ( - - - - {normilizedValue.reduce((prev, cur) => { - prev += cur.one; - return prev; - }, 0)}{" "} - ONE - - - - ($ - {normilizedValue - .reduce((prev, cur) => { - prev += +cur.usd; - return prev; - }, 0) - .toLocaleString("en-US", { - minimumFractionDigits: 2, - maximumFractionDigits: 2, - currency: "USD", - })} - ) - - - )} - renderItem={(item) => ( - - - Shard {item.index}:{" "} - - - {item.one} ONE - - {item.usd ? ( - - ($ - {item.usd.toLocaleString("en-US", { - minimumFractionDigits: 2, - maximumFractionDigits: 2, - currency: "USD", - })} - ) - - ) : null} - - )} - /> - ); + + + {normilizedValue.reduce((prev, cur) => { + prev += cur.one; + return prev; + }, 0)}{" "} + ONE + + + + ($ + {normilizedValue + .reduce((prev, cur) => { + prev += +cur.usd; + return prev; + }, 0) + .toLocaleString("en-US", { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + currency: "USD" + })} + ) + +
+ )} + renderItem={(item) => ( + + + Shard {item.index}:{" "} + + + {item.one} ONE + + {item.usd ? ( + + ($ + {item.usd.toLocaleString("en-US", { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + currency: "USD" + })} + ) + + ) : null} + + )} + /> + ); };