add copy address balance btn

src/components/ui/OneValueDropdown.tsx

@@ -1,12 +1,20 @@
-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)[];
@@ -16,8 +24,8 @@ interface ONEValueProps {
 
 // @ts-ignore
 export const ONEValueDropdown = (props: ONEValueProps) => {
-  const { value, timestamp = "", hideTip = false } = props;
-  const { lastPrice } = useONEExchangeRate();
+    const {value, timestamp = "", hideTip = false} = props;
+    const {lastPrice} = useONEExchangeRate();
     const themeMode = useThemeMode();
 
     if (!value.length) {
@@ -44,18 +52,47 @@ export const ONEValueDropdown = (props: ONEValueProps) => {
             USDValue = v * +price;
         }
 
-    return { value: hashValue, one: v, usd: USDValue || 0, index };
+        return {value: hashValue, one: v, usd: USDValue || 0, index};
     });
 
+    const hideCopyBtn = false
+
+    let valueCopy = ''
+
+    try {
+        valueCopy = normilizedValue[0].one.toString()
+    } catch (e) {
+    }
+
     return (
         <Dropdown
             items={normilizedValue}
             keyField={"value"}
             themeMode={themeMode}
             itemHeight={"30px"}
-      itemStyles={{ justifyContent: "center" }}
+            itemStyles={{justifyContent: "center"}}
             renderValue={() => (
-        <Box direction={"row"} align={"center"} style={{ paddingTop: "2px" }}>
+                <Box direction={"row"} align={"center"} style={{paddingTop: "2px"}}>
+
+                    {hideCopyBtn ? null : (
+                        <CopyBtn
+                            value={valueCopy}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                toaster.show({
+                                    message: () => (
+                                        <Box direction={"row"} align={"center"} pad={"small"}>
+                                            {<Icon size={"small"} color={"headerText"}/>}
+                                            <Text size={"small"}>Copied to clipboard</Text>
+                                        </Box>
+                                    )
+                                });
+                            }}
+                        />
+                    )}
+                    <div style={{marginRight: '5px'}}></div>
+
                     <Text size={"small"}>
                         <b>
                             {normilizedValue.reduce((prev, cur) => {
@@ -65,7 +102,7 @@ export const ONEValueDropdown = (props: ONEValueProps) => {
                             ONE
                         </b>
                     </Text>
-          <Text size={"small"} style={{ paddingLeft: "4px" }}>
+                    <Text size={"small"} style={{paddingLeft: "4px"}}>
                         ($
                         {normilizedValue
                             .reduce((prev, cur) => {
@@ -75,7 +112,7 @@ export const ONEValueDropdown = (props: ONEValueProps) => {
                             .toLocaleString("en-US", {
                                 minimumFractionDigits: 2,
                                 maximumFractionDigits: 2,
-                currency: "USD",
+                                currency: "USD"
                             })}
                         )
                     </Text>
@@ -83,19 +120,19 @@ export const ONEValueDropdown = (props: ONEValueProps) => {
             )}
             renderItem={(item) => (
                 <Box direction={"row"}>
-          <Text size={"small"} style={{ width: "52.5px" }}>
+                    <Text size={"small"} style={{width: "52.5px"}}>
                         Shard {item.index}:{" "}
                     </Text>
-          <Text size={"small"} style={{ paddingLeft: "4px" }}>
+                    <Text size={"small"} style={{paddingLeft: "4px"}}>
                         <b>{item.one} ONE </b>
                     </Text>
                     {item.usd ? (
-            <Text size={"small"} style={{ paddingLeft: "4px" }}>
+                        <Text size={"small"} style={{paddingLeft: "4px"}}>
                             ($
                             {item.usd.toLocaleString("en-US", {
                                 minimumFractionDigits: 2,
                                 maximumFractionDigits: 2,
-                currency: "USD",
+                                currency: "USD"
                             })}
                             )
                         </Text>