From 02bc5c9909e2851ddc3c981716ccbc9028455cbc Mon Sep 17 00:00:00 2001
From: AbhinavMV <mvabhinav1998@gmail.com>
Date: Tue, 6 Dec 2022 15:50:50 +0530
Subject: [PATCH 1/4] chore: fix buttons

---
 packages/core/src/lib/CopyButton/CopyButton.tsx | 1 +
 packages/core/src/lib/HideButton/HideButton.tsx | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/core/src/lib/CopyButton/CopyButton.tsx b/packages/core/src/lib/CopyButton/CopyButton.tsx
index 546916db6..f02fc2af8 100644
--- a/packages/core/src/lib/CopyButton/CopyButton.tsx
+++ b/packages/core/src/lib/CopyButton/CopyButton.tsx
@@ -49,6 +49,7 @@ const CopyButton: FC<CopyButtonProps> = ({
         <ButtonStyled
             className="input_copy"
             data-testid="test-copy-button"
+            type="button"
             iconSize={iconSize}
             onClick={(e) => {
                 onCopy(e);
diff --git a/packages/core/src/lib/HideButton/HideButton.tsx b/packages/core/src/lib/HideButton/HideButton.tsx
index 9647fdd1a..f45b4a96c 100644
--- a/packages/core/src/lib/HideButton/HideButton.tsx
+++ b/packages/core/src/lib/HideButton/HideButton.tsx
@@ -18,6 +18,7 @@ const HideButton: FC<IHideButtonProps> = ({
 }) => {
     return (
         <HideButtonStyled
+            type="button"
             onClick={onToggle}
             data-testid="test-hide-button"
             {...props}

From 7869ffbdfc66436a81f2ee8ac32440d735d3372c Mon Sep 17 00:00:00 2001
From: AbhinavMV <mvabhinav1998@gmail.com>
Date: Tue, 6 Dec 2022 15:53:53 +0530
Subject: [PATCH 2/4] add changeset file

---
 .changeset/rotten-starfishes-watch.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/rotten-starfishes-watch.md

diff --git a/.changeset/rotten-starfishes-watch.md b/.changeset/rotten-starfishes-watch.md
new file mode 100644
index 000000000..dc6f3986c
--- /dev/null
+++ b/.changeset/rotten-starfishes-watch.md
@@ -0,0 +1,5 @@
+---
+'@web3uikit/core': patch
+---
+
+Fix Hide and copy buttons

From f882fa64bd72d734b81523cb90c753350ffa35cf Mon Sep 17 00:00:00 2001
From: AbhinavMV <mvabhinav1998@gmail.com>
Date: Wed, 7 Dec 2022 14:15:33 +0530
Subject: [PATCH 3/4] fix: text color and font size styles

---
 .../lib/Credentials/Credentials.stories.tsx   |   1 +
 .../core/src/lib/Credentials/Credentials.tsx  |  15 +-
 .../Credentials/components/TruncateString.tsx | 170 ++++++++++--------
 packages/core/src/lib/Credentials/types.ts    |  12 +-
 4 files changed, 119 insertions(+), 79 deletions(-)

diff --git a/packages/core/src/lib/Credentials/Credentials.stories.tsx b/packages/core/src/lib/Credentials/Credentials.stories.tsx
index cfab7527a..111145f6a 100644
--- a/packages/core/src/lib/Credentials/Credentials.stories.tsx
+++ b/packages/core/src/lib/Credentials/Credentials.stories.tsx
@@ -75,4 +75,5 @@ Customize.args = {
     },
     hasHideButton: false,
     text: 'https://xj5hyiafwkhn.moralis.io:2053/servers',
+    textColor: 'white',
 };
diff --git a/packages/core/src/lib/Credentials/Credentials.tsx b/packages/core/src/lib/Credentials/Credentials.tsx
index 8e1108d21..f619e2ca1 100644
--- a/packages/core/src/lib/Credentials/Credentials.tsx
+++ b/packages/core/src/lib/Credentials/Credentials.tsx
@@ -39,10 +39,9 @@ const Credentials: FC<ICredentialsProps> = ({
 
     useEffect(() => setIsValueHidden(isHidden), [isHidden]);
 
-    useEffect(
-        () => setIsMultiline((text.match(/\n/g) || []).length > 0),
-        [text],
-    );
+    useEffect(() => setIsMultiline((text.match(/\n/g) || []).length > 0), [
+        text,
+    ]);
 
     return (
         <CredentialsStyled
@@ -64,7 +63,7 @@ const Credentials: FC<ICredentialsProps> = ({
                     isMultiline={isMultiline}
                 >
                     <Typography
-                        color={isValueHidden ? color.blueGray50 : textColor}
+                        color={textColor ?? customize?.color ?? color.blue70}
                         data-testid="test-cred-new-comp-heading"
                         fontSize={customize?.fontSize}
                         monospace
@@ -79,6 +78,12 @@ const Credentials: FC<ICredentialsProps> = ({
                             <TruncateString
                                 text={text}
                                 percentageOfCharsAfterTrunc={55}
+                                textColor={
+                                    textColor ??
+                                    customize?.color ??
+                                    color.blue70
+                                }
+                                fontSize={customize?.fontSize ?? '16px'}
                             />
                         )}
                     </Typography>
diff --git a/packages/core/src/lib/Credentials/components/TruncateString.tsx b/packages/core/src/lib/Credentials/components/TruncateString.tsx
index 91b4c7f32..a07a47794 100644
--- a/packages/core/src/lib/Credentials/components/TruncateString.tsx
+++ b/packages/core/src/lib/Credentials/components/TruncateString.tsx
@@ -1,93 +1,117 @@
+import { color } from '@web3uikit/styles';
 import { useEffect, FC, useRef, useState } from 'react';
 import { ITruncateStringProps, TStringTruncate } from '../types';
 
-const truncateString = ({ leftPercentage = 50, measurements, replaceString, text }: TStringTruncate): string => {
-  if (measurements.text && measurements.component && measurements.text > measurements.component) {
-    const size = (percentage: number) => measurements.component * (percentage / 100);
-    const portion = (size: number) => Math.floor((text.length * size) / measurements.text);
+const truncateString = ({
+    leftPercentage = 50,
+    measurements,
+    replaceString,
+    text,
+}: TStringTruncate): string => {
+    if (
+        measurements.text &&
+        measurements.component &&
+        measurements.text > measurements.component
+    ) {
+        const size = (percentage: number) =>
+            measurements.component * (percentage / 100);
+        const portion = (size: number) =>
+            Math.floor((text.length * size) / measurements.text);
 
-    const leftPart = text.slice(0, Math.max(0, portion(size(leftPercentage)) - replaceString.length));
+        const leftPart = text.slice(
+            0,
+            Math.max(0, portion(size(leftPercentage)) - replaceString.length),
+        );
 
-    const rightPart = text.slice(text.length - portion(size(100 - leftPercentage)) + replaceString.length, text.length);
+        const rightPart = text.slice(
+            text.length -
+                portion(size(100 - leftPercentage)) +
+                replaceString.length,
+            text.length,
+        );
 
-    return `${leftPart}${replaceString}${rightPart}`;
-  } else {
-    return text;
-  }
+        return `${leftPart}${replaceString}${rightPart}`;
+    } else {
+        return text;
+    }
 };
 
 const TruncateString: FC<ITruncateStringProps> = ({
-  replaceString = '...',
-  percentageOfCharsAfterTrunc = 50,
-  text = ''
+    fontSize = '16px',
+    percentageOfCharsAfterTrunc = 50,
+    replaceString = '...',
+    text = '',
+    textColor = color.blue70,
 }) => {
-  const [truncating, setTruncating] = useState(true);
-  const [truncatedString, setTruncatedString] = useState<string | null>(null);
-  const componentRef = useRef<HTMLDivElement>(null);
-  const textRef = useRef<HTMLSpanElement>(null);
-  const replaceStrRef = useRef<HTMLSpanElement>(null);
+    const [truncating, setTruncating] = useState(true);
+    const [truncatedString, setTruncatedString] = useState<string | null>(null);
+    const componentRef = useRef<HTMLDivElement>(null);
+    const textRef = useRef<HTMLSpanElement>(null);
+    const replaceStrRef = useRef<HTMLSpanElement>(null);
 
-  const getTruncatedString = (text: string) => {
-    const measurements = {
-      component: componentRef.current?.offsetWidth || 0,
-      replace: replaceStrRef.current?.offsetWidth || 0,
-      text: textRef.current?.offsetWidth || 0
+    const getTruncatedString = (text: string) => {
+        const measurements = {
+            component: componentRef.current?.offsetWidth || 0,
+            replace: replaceStrRef.current?.offsetWidth || 0,
+            text: textRef.current?.offsetWidth || 0,
+        };
+        return truncateString({
+            leftPercentage: percentageOfCharsAfterTrunc,
+            measurements,
+            replaceString,
+            text,
+        });
     };
-    return truncateString({
-      leftPercentage: percentageOfCharsAfterTrunc,
-      measurements,
-      replaceString,
-      text
-    });
-  };
 
-  useEffect(() => {
-    if (!truncatedString?.includes('...')) {
-      setTruncatedString(text);
-    } else {
-      setTruncating(true);
-    }
-  }, [text]);
+    useEffect(() => {
+        if (!truncatedString?.includes('...')) {
+            setTruncatedString(text);
+        } else {
+            setTruncating(true);
+        }
+    }, [text]);
 
-  useEffect(() => {
-    // 2. Call Truncating function on every state change
-    if (truncating) {
-      const ts = getTruncatedString(text);
-      setTruncatedString(ts);
-      setTruncating(false);
-    }
-  }, [truncating]);
+    useEffect(() => {
+        // 2. Call Truncating function on every state change
+        if (truncating) {
+            const ts = getTruncatedString(text);
+            setTruncatedString(ts);
+            setTruncating(false);
+        }
+    }, [truncating]);
 
-  useEffect(() => {
-    // Debounce Mechanism
-    let timeoutId: any = null;
-    const truncateListener = () => {
-      clearTimeout(timeoutId);
-      // 1. Resizing window sets Truncating state to True
-      timeoutId = setTimeout(() => setTruncating(true), 50);
-    };
-    window.addEventListener('resize', truncateListener);
+    useEffect(() => {
+        // Debounce Mechanism
+        let timeoutId: any = null;
+        const truncateListener = () => {
+            clearTimeout(timeoutId);
+            // 1. Resizing window sets Truncating state to True
+            timeoutId = setTimeout(() => setTruncating(true), 50);
+        };
+        window.addEventListener('resize', truncateListener);
 
-    // Remove listener on component unmount
-    return () => {
-      window.removeEventListener('resize', truncateListener);
-    };
-  }, []);
+        // Remove listener on component unmount
+        return () => {
+            window.removeEventListener('resize', truncateListener);
+        };
+    }, []);
 
-  return (
-    <div
-      ref={componentRef}
-      style={{
-        display: 'block',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap'
-      }}
-    >
-      {truncating && <span ref={textRef}>{text}</span>}
-      {truncating && <span ref={replaceStrRef}>{replaceString}</span>}
-      {!truncating && truncatedString}
-    </div>
-  );
+    return (
+        <div
+            ref={componentRef}
+            style={{
+                display: 'block',
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                color: textColor,
+                fontSize: fontSize,
+            }}
+        >
+            {truncating && <span ref={textRef}>{text}</span>}
+            {truncating && <span ref={replaceStrRef}>{replaceString}</span>}
+            {!truncating && truncatedString}
+        </div>
+    );
 };
 
 export default TruncateString;
diff --git a/packages/core/src/lib/Credentials/types.ts b/packages/core/src/lib/Credentials/types.ts
index c2abde3a2..5a8a4f23e 100644
--- a/packages/core/src/lib/Credentials/types.ts
+++ b/packages/core/src/lib/Credentials/types.ts
@@ -42,7 +42,7 @@ export interface ICredentialsProps
     /**
      * color of the text
      */
-    textColor?: string | typeof color;
+    textColor?: string;
 
     /**
      * width of component
@@ -85,6 +85,16 @@ export interface ITruncateStringProps {
      * Percentage of characters(approx) to remain after truncate
      */
     percentageOfCharsAfterTrunc?: number;
+
+    /**
+     * color of text
+     */
+    textColor: string;
+
+    /**
+     * size of font
+     */
+    fontSize: string;
 }
 
 export type TStringTruncate = {

From 6d5732f41ad1b2482c1889c14841270223ad778a Mon Sep 17 00:00:00 2001
From: AbhinavMV <mvabhinav1998@gmail.com>
Date: Thu, 8 Dec 2022 15:11:00 +0530
Subject: [PATCH 4/4] chore: export truncate string

---
 packages/core/src/lib/Credentials/components/TruncateString.tsx | 2 +-
 packages/core/src/lib/index.ts                                  | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/lib/Credentials/components/TruncateString.tsx b/packages/core/src/lib/Credentials/components/TruncateString.tsx
index a07a47794..eb4ca8781 100644
--- a/packages/core/src/lib/Credentials/components/TruncateString.tsx
+++ b/packages/core/src/lib/Credentials/components/TruncateString.tsx
@@ -36,7 +36,7 @@ const truncateString = ({
     }
 };
 
-const TruncateString: FC<ITruncateStringProps> = ({
+export const TruncateString: FC<ITruncateStringProps> = ({
     fontSize = '16px',
     percentageOfCharsAfterTrunc = 50,
     replaceString = '...',
diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
index 559d06a3a..f8ba47905 100644
--- a/packages/core/src/lib/index.ts
+++ b/packages/core/src/lib/index.ts
@@ -46,6 +46,7 @@ export * from './Tag';
 export * from './TextArea';
 export * from './Todo';
 export * from './Tooltip';
+export * from './Credentials/components/TruncateString';
 export * from './Typography';
 export * from './Upload';
 export * from './VerifyCode';