fix: make WalletListItem clickable to navigate to wallet details

src/app/components/WalletCard/WalletCard.test.tsx

@@ -1,13 +1,15 @@
-import { Wallet, WalletFlag, WalletSetting } from "@arkecosystem/platform-sdk-profiles";
+import { Profile, Wallet, WalletFlag, WalletSetting } from "@arkecosystem/platform-sdk-profiles";
 import { createMemoryHistory } from "history";
 import React from "react";
 import { Route } from "react-router-dom";
-import { env, getDefaultProfileId, renderWithRouter } from "testing-library";
+import { act, env, fireEvent, getDefaultProfileId, renderWithRouter } from "testing-library";
 
 import { WalletCard } from "./WalletCard";
 
 const dashboardURL = `/profiles/${getDefaultProfileId()}/dashboard`;
 const history = createMemoryHistory();
+
+let profile: Profile;
 let wallet: Wallet;
 
 describe("Wallet Card", () => {
@@ -16,7 +18,7 @@ describe("Wallet Card", () => {
 	});
 
 	beforeEach(() => {
-		const profile = env.profiles().findById(getDefaultProfileId());
+		profile = env.profiles().findById(getDefaultProfileId());
 		wallet = profile.wallets().findById("ac38fe6d-4b67-4ef1-85be-17c5f6841129");
 		wallet.data().set(WalletFlag.Starred, true);
 		wallet.data().set(WalletFlag.Ledger, true);
@@ -81,4 +83,28 @@ describe("Wallet Card", () => {
 
 		expect(container).toMatchSnapshot();
 	});
+
+	it("should click a wallet and redirect to it", () => {
+		const { getByTestId } = renderWithRouter(
+			<table>
+				<tbody>
+					<Route path="/profiles/:profileId/dashboard">
+						<WalletCard wallet={wallet} />
+					</Route>
+				</tbody>
+			</table>,
+			{
+				routes: [dashboardURL],
+				history,
+			},
+		);
+
+		expect(history.location.pathname).toBe(`/profiles/${profile.id()}/dashboard`);
+
+		act(() => {
+			fireEvent.click(getByTestId(`WalletCard__${wallet.address()}`));
+		});
+
+		expect(history.location.pathname).toBe(`/profiles/${profile.id()}/wallets/${wallet.id()}`);
+	});
 });

src/app/components/WalletCard/WalletCard.tsx

@@ -8,7 +8,7 @@ import { Dropdown } from "app/components/Dropdown";
 import { Icon } from "app/components/Icon";
 import { useActiveProfile } from "app/hooks/env";
 import React from "react";
-import { Link } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 
 import { Amount } from "../Amount";
 
@@ -38,6 +38,7 @@ export const WalletCard = ({
 	onSelect,
 }: WalletCardProps) => {
 	const activeProfile = useActiveProfile();
+	const history = useHistory();
 
 	if (isBlank) {
 		return (
@@ -65,54 +66,49 @@ export const WalletCard = ({
 	const ticker = wallet!.network().currency.ticker;
 
 	return (
-		<Link
-			to={`/profiles/${activeProfile.id()}/wallets/${wallet?.id()}`}
+		<div
+			className={`w-64 inline-block ${className}`}
+			onClick={() => history.push(`/profiles/${activeProfile.id()}/wallets/${wallet?.id()}`)}
 			data-testid={`WalletCard__${wallet?.address()}`}
 		>
-			<div className={`w-64 inline-block ${className}`}>
-				<Card>
-					<div className="relative p-2">
-						<div className="absolute -right-2 -top-1 text-theme-neutral-400 hover:text-theme-neutral-500">
-							<Dropdown options={actions} onSelect={onSelect} />
-						</div>
-						<div className="absolute right-3 -top-1">
-							{wallet?.isLedger() && (
-								<div className="inline-block mr-2 text text-theme-neutral-600">
-									<Icon name="Ledger" width={18} />
-								</div>
-							)}
+			<Card>
+				<div className="relative p-2">
+					<div className="absolute -right-2 -top-1 text-theme-neutral-400 hover:text-theme-neutral-500">
+						<Dropdown options={actions} onSelect={onSelect} />
+					</div>
+					<div className="absolute right-3 -top-1">
+						{wallet?.isLedger() && (
+							<div className="inline-block mr-2 text text-theme-neutral-600">
+								<Icon name="Ledger" width={18} />
+							</div>
+						)}
 
-							{wallet?.hasSyncedWithNetwork() && wallet?.isMultiSignature() && (
-								<div className="inline-block mr-2 text text-theme-neutral-600">
-									<Icon name="Multisig" width={18} />
-								</div>
-							)}
+						{wallet?.hasSyncedWithNetwork() && wallet?.isMultiSignature() && (
+							<div className="inline-block mr-2 text text-theme-neutral-600">
+								<Icon name="Multisig" width={18} />
+							</div>
+						)}
 
-							{wallet?.isStarred() && (
-								<div className="inline-block mr-2 text text-theme-warning-400">
-									<Icon name="Star" width={18} />
-								</div>
-							)}
-						</div>
-						<div className="flex">
-							<Circle size="lg" className={`border-theme-primary-contrast -mr-2 ${coinClass}`}>
-								{coinName && <Icon name={upperFirst(coinName.toLowerCase())} width={18} height={16} />}
-							</Circle>
-							<Avatar size="lg" address={wallet?.address()} />
-						</div>
+						{wallet?.isStarred() && (
+							<div className="inline-block mr-2 text text-theme-warning-400">
+								<Icon name="Star" width={18} />
+							</div>
+						)}
+					</div>
+					<div className="flex">
+						<Circle size="lg" className={`border-theme-primary-contrast -mr-2 ${coinClass}`}>
+							{coinName && <Icon name={upperFirst(coinName.toLowerCase())} width={18} height={16} />}
+						</Circle>
+						<Avatar size="lg" address={wallet?.address()} />
+					</div>
 
-						<div className="mt-6 truncate max-w-12">
-							<Address walletName={wallet?.alias()} address={wallet?.address()} maxChars={13} />
-						</div>
-						<Amount
-							value={wallet!.balance()}
-							ticker={ticker}
-							className="font-bold text-theme-neutral-900"
-						/>
+					<div className="mt-6 truncate max-w-12">
+						<Address walletName={wallet?.alias()} address={wallet?.address()} maxChars={13} />
 					</div>
-				</Card>
-			</div>
-		</Link>
+					<Amount value={wallet!.balance()} ticker={ticker} className="font-bold text-theme-neutral-900" />
+				</div>
+			</Card>
+		</div>
 	);
 };