feat: add forwardRef support to WalletContainer

Author: soulBit

packages/ui/src/2_molecules/WalletContainer/WalletContainer.test.tsx

@@ -1,4 +1,5 @@
-import { render } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import React from 'react';
 
@@ -17,4 +18,27 @@ describe('WalletContainer', () => {
     );
     expect(findByRole('svg[data-icon="info"]')).toBeDefined();
   });
+
+  it('eventHandler called on click', () => {
+    const handleClick = jest.fn();
+    const { getByText } = render(
+      <WalletContainer
+        name="Ledger"
+        icon={<Icon icon="info" />}
+        onClick={handleClick}
+      />,
+    );
+    userEvent.click(getByText('Ledger'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('can be focused when using refs (button)', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    render(
+      <WalletContainer name="Ledger" icon={<Icon icon="info" />} ref={ref} />,
+    );
+    waitFor(() => ref.current);
+    ref.current?.focus();
+    expect(document.activeElement).toEqual(ref.current);
+  });
 });

packages/ui/src/2_molecules/WalletContainer/WalletContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import React, { ReactNode, forwardRef, LegacyRef } from 'react';
 
 import classNames from 'classnames';
 
@@ -13,16 +13,13 @@ type WalletContainerProps = {
   dataLayoutId?: string;
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-export const WalletContainer: FC<WalletContainerProps> = ({
-  name,
-  icon,
-  tooltip,
-  className,
-  dataLayoutId,
-  ...buttonProps
-}) => {
+export const WalletContainer = forwardRef<
+  HTMLButtonElement,
+  WalletContainerProps
+>(({ name, icon, tooltip, className, dataLayoutId, ...buttonProps }, ref) => {
   return (
     <button
+      ref={ref as LegacyRef<HTMLButtonElement>}
       data-layout-id={dataLayoutId}
       className={classNames(className, styles.walletContainer)}
       {...buttonProps}
@@ -34,4 +31,4 @@ export const WalletContainer: FC<WalletContainerProps> = ({
       {icon && <div className={styles.icon}>{icon}</div>}
     </button>
   );
-};
+});