feat: add <Balance />

package.json

@@ -21,7 +21,8 @@
     "graphql-request": "^6",
     "react": "^18",
     "react-dom": "^18",
-    "viem": "^2.7.0"
+    "viem": "^2.7.0",
+    "wagmi": "^2"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.8",
@@ -45,6 +46,7 @@
     "ts-jest": "^29.1.2",
     "typescript": "~5.3.3",
     "viem": "^2.7.0",
+    "wagmi": "^2",
     "yarn": "^1.22.21"
   },
   "packemon": [

src/components/Balance.test.tsx

@@ -0,0 +1,66 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { useBalance } from 'wagmi';
+import { Balance } from './Balance';
+
+import '@testing-library/jest-dom';
+
+// Mocking the hooks and utilities
+jest.mock('wagmi', () => ({
+  useBalance: jest.fn(),
+}));
+
+describe('Balance', () => {
+  const testAddress = '0x1234567890abcdef1234567890abcdef12345678';
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('displays ETH balance', () => {
+    (useBalance as jest.Mock).mockReturnValue({
+      data: {
+        value: 49000000000000000n,
+        symbol: 'ETH',
+      },
+    });
+
+    render(
+      <span data-testid="test-id-balance">
+        <Balance address={testAddress} />
+      </span>,
+    );
+
+    expect(useBalance).toHaveBeenCalledTimes(1);
+    expect(useBalance).toHaveBeenCalledWith({
+      address: testAddress,
+    });
+
+    expect(screen.getByTestId('test-id-balance')).toHaveTextContent('0.049 ETH');
+  });
+
+  it('displays ETH balance with rounding', () => {
+    (useBalance as jest.Mock).mockReturnValue({
+      data: {
+        value: 49900000000000000n,
+        symbol: 'ETH',
+      },
+    });
+
+    render(
+      <span data-testid="test-id-balance">
+        <Balance address={testAddress} />
+      </span>,
+    );
+
+    expect(useBalance).toHaveBeenCalledTimes(1);
+    expect(useBalance).toHaveBeenCalledWith({
+      address: testAddress,
+    });
+
+    expect(screen.getByTestId('test-id-balance')).toHaveTextContent('0.050 ETH');
+  });
+});

src/components/Balance.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { formatEther } from 'viem';
+import { useBalance } from 'wagmi';
+import type { Address } from 'viem';
+
+type BalanceProps = {
+  address: Address;
+  className?: string;
+  decimalDigits?: number;
+  props?: React.HTMLAttributes<HTMLSpanElement>;
+};
+
+/**
+ * Balance is a React component that renders the account balance for the given Ethereum address.
+ * It displays the user's balance, with the no. of decimals specified by the 'decimalDigits' prop.
+ * By default, 'decimalDigits' is set to 3.
+ *
+ * @param {Address} props.address - The Ethereum address for which to display the balance.
+ * @param {string} [className] - Optional CSS class for custom styling.
+ * @param {number} [decimalDigits=3] - Determines the no. of decimal digits to be displayed.
+ * @param {React.HTMLAttributes<HTMLSpanElement>} [props] - Additional HTML attributes for the span element.
+ */
+export function Balance({ address, className, decimalDigits = 3, ...props }: BalanceProps) {
+  const balanceResult = useBalance({
+    address,
+  });
+
+  return (
+    <span className={className} {...props}>
+      {parseFloat(formatEther(balanceResult.data?.value ?? 0n, 'wei')).toFixed(decimalDigits)}{' '}
+      {balanceResult.data?.symbol}
+    </span>
+  );
+}