Add callbacks

.changeset/beige-fishes-flash.md

@@ -0,0 +1,5 @@
+---
+"@web3uikit/core": patch
+---
+
+Add callbacks to credentials

packages/core/src/lib/Credentials/Credentials.stories.tsx

@@ -6,6 +6,10 @@ import { Credentials } from '.';
 export default {
     title: '2.Forms/Credentials',
     component: Credentials,
+    argTypes: {
+        onCopy: { action: 'clicked' },
+        onReveal: { action: 'revealed' },
+    },
 } as ComponentMeta<typeof Credentials>;
 
 const Template: ComponentStory<typeof Credentials> = (args) => (

packages/core/src/lib/Credentials/Credentials.tsx

@@ -27,6 +27,8 @@ const Credentials: FC<ICredentialsProps> = ({
     title,
     titleColor,
     width = 'auto',
+    onCopy,
+    onReveal,
     ...props
 }) => {
     const [isValueHidden, setIsValueHidden] = useState(isHidden);
@@ -81,12 +83,17 @@ const Credentials: FC<ICredentialsProps> = ({
                 <ToolsStyled data-testid="test-credentials-tools">
                     {hasHideButton && (
                         <HideButton
-                            onToggle={() => setIsValueHidden(!isValueHidden)}
+                            onToggle={() => {
+                                setIsValueHidden(!isValueHidden);
+                                if (isValueHidden) onReveal && onReveal();
+                            }}
                             isHidden={isValueHidden}
                         />
                     )}
                     {hasHideButton && hasCopyButton && <DividerStyled />}
-                    {hasCopyButton && <CopyButton text={text} iconSize={24} />}
+                    {hasCopyButton && (
+                        <CopyButton text={text} iconSize={24} onCopy={onCopy} />
+                    )}
                 </ToolsStyled>
             </PreformattedStyled>
         </CredentialsStyled>

packages/core/src/lib/Credentials/types.ts

@@ -1,8 +1,13 @@
 import { color } from '@web3uikit/styles';
 import React from 'react';
 import { Typography } from '../Typography';
+import { CopyButtonProps } from '../CopyButton';
 
-export interface ICredentialsProps extends ICredentialsHeaderProps {
+type TCopyButtonProps = Pick<CopyButtonProps, 'onCopy'>;
+
+export interface ICredentialsProps
+    extends ICredentialsHeaderProps,
+        TCopyButtonProps {
     /**
      * if true displays Copy Button
      */
@@ -39,6 +44,11 @@ export interface ICredentialsProps extends ICredentialsHeaderProps {
      * default is "auto"
      */
     width?: string;
+
+    /**
+     * This event will fire when hideButton clicked to reveal hidden text only
+     */
+    onReveal?: () => void;
 }
 export interface ICredentialsHeaderProps {
     /**