Feat: Updated AccountSwitcher and Button Components

src/components/AppLayout/AccountSwitcher/AccountsItem/__test__/AccountsItem.spec.tsx

@@ -90,4 +90,46 @@ describe("AccountsItem Component", () => {
         await userEvent.click(accountElement!);
         expect(onSelectAccount).toHaveBeenCalledTimes(1);
     });
+
+    it("displays Reset balance button when onResetBalance prop is provided", () => {
+        const onResetBalance = jest.fn();
+        render(
+            <AccountsItem
+                account={mockAccount}
+                onSelectAccount={jest.fn()}
+                onResetBalance={onResetBalance}
+            />,
+        );
+
+        const resetButton = screen.getByText("Reset balance");
+        expect(resetButton).toBeInTheDocument();
+        expect(screen.queryByText("1000 USD")).not.toBeInTheDocument();
+    });
+
+    it("calls onResetBalance when Reset balance button is clicked", async () => {
+        const onResetBalance = jest.fn();
+        render(
+            <AccountsItem
+                account={mockAccount}
+                onSelectAccount={jest.fn()}
+                onResetBalance={onResetBalance}
+            />,
+        );
+
+        const resetButton = screen.getByText("Reset balance");
+        await userEvent.click(resetButton);
+        expect(onResetBalance).toHaveBeenCalledTimes(1);
+    });
+
+    it("displays balance when onResetBalance is not provided", () => {
+        render(
+            <AccountsItem
+                account={mockAccount}
+                onSelectAccount={jest.fn()}
+            />,
+        );
+
+        expect(screen.getByText("1000 USD")).toBeInTheDocument();
+        expect(screen.queryByText("Reset balance")).not.toBeInTheDocument();
+    });
 });

src/components/AppLayout/AccountSwitcher/AccountsItem/index.tsx

@@ -2,13 +2,19 @@ import clsx from "clsx";
 import { TAccount } from "../types";
 
 import "./AccountsItem.scss";
+import { Button } from "../../../Button";
 
 type AccountSwitcherProps = {
     account: TAccount;
     onSelectAccount: () => void;
+    onResetBalance?: () => void;
 };
 
-export const AccountsItem = ({ account, onSelectAccount }: AccountSwitcherProps) => {
+export const AccountsItem = ({
+    account,
+    onSelectAccount,
+    onResetBalance,
+}: AccountSwitcherProps) => {
     return (
         <div
             className={clsx("deriv-account-switcher-item", {
@@ -44,7 +50,21 @@ export const AccountsItem = ({ account, onSelectAccount }: AccountSwitcherProps)
                         account.isActive,
                 })}
             >
-                {`${account.balance} ${account.currency}`}
+                {onResetBalance ? (
+                    <Button
+                        borderWidth="sm"
+                        textSize="xs"
+                        size="xs"
+                        variant="outlined"
+                        color="black"
+                        isFullWidth
+                        onClick={onResetBalance}
+                    >
+                        Reset balance
+                    </Button>
+                ) : (
+                    `${account.balance} ${account.currency}`
+                )}
             </div>
         </div>
     );

src/components/Button/Button.scss

@@ -33,6 +33,11 @@ $black-outline-hover: rgba(0, 0, 0, 0.08);
     }
 
     &__size {
+        &--xs {
+            height: 1.6rem;
+            border-width: 1px;
+            padding: 0rem 1.1rem;
+        }
         &--sm {
             height: 2.4rem;
             border-width: 1px;
@@ -227,5 +232,4 @@ $black-outline-hover: rgba(0, 0, 0, 0.08);
             border-width: 3px;
         }
     }
-
 }

src/components/Button/index.tsx

@@ -16,8 +16,8 @@ interface ButtonProps extends ComponentProps<"button"> {
     isFullWidth?: boolean;
     isLoading?: boolean;
     rounded?: Extract<TGenericSizes, "lg" | "md" | "sm">;
-    size?: Extract<TGenericSizes, "lg" | "md" | "sm">;
-    hideHoverStyles?:boolean;
+    size?: Extract<TGenericSizes, "lg" | "md" | "sm" | "xs">;
+    hideHoverStyles?: boolean;
     textSize?: ComponentProps<typeof Text>["size"];
     variant?: TVariant;
 }
@@ -40,6 +40,7 @@ const ButtonSize = {
     lg: "deriv-button__size--lg",
     md: "deriv-button__size--md",
     sm: "deriv-button__size--sm",
+    xs: "deriv-button__size--xs",
 } as const;
 
 const ButtonRounded = {
@@ -52,6 +53,7 @@ const FontSize = {
     lg: "lg",
     md: "sm",
     sm: "xs",
+    xs: "xs",
 } as const;
 
 const LoaderColor = {
@@ -78,7 +80,7 @@ export const Button = ({
     isLoading = false,
     rounded = "sm",
     size = "md",
-    hideHoverStyles=false,
+    hideHoverStyles = false,
     textSize,
     variant = "contained",
     ...rest
@@ -115,7 +117,7 @@ export const Button = ({
             {rest.children && !isLoading && (
                 <Text
                     align="center"
-                    size={ textSize ?? FontSize[size]}
+                    size={textSize ?? FontSize[size]}
                     weight="bold"
                     as="span"
                 >

stories/Button.stories.ts

@@ -16,7 +16,7 @@ const meta = {
         isLoading: false,
         disabled: false,
         size: "md",
-        hideHoverStyles:false,
+        hideHoverStyles: false,
         isFullWidth: false,
         rounded: "sm",
         type: "button",
@@ -45,6 +45,10 @@ const meta = {
             options: ["true", "false"],
             control: { type: "boolean" },
         },
+        size: {
+            options: ["xs", "sm", "md", "lg"],
+            control: { type: "radio" },
+        },
         rounded: {
             options: ["sm", "md", "lg"],
             control: { type: "radio" },
@@ -99,8 +103,8 @@ export const ContainedPrimaryWithNoHover: Story = {
     name: "Contained (Primary No Hover Style)",
     args: {
         ...meta.args,
-        hideHoverStyles:true,
-     },
+        hideHoverStyles: true,
+    },
 };
 
 export const ContainedPrimaryLight: Story = {