Account filter pill

src/components/AccountCard/AccountCardDisplay.tsx

@@ -68,7 +68,7 @@ export const AccountCardDisplay: React.FC<Props> = ({
       <Heading mt={4} size="md">
         {label}
       </Heading>
-      <AddressPill address={account.address} mode="no_icons" my={2} />
+      <AddressPill address={account.address} mode={{ type: "no_icons" }} my={2} />
       {tezBalance !== null && (
         <TezRecapDisplay center tezBalance={tezBalance} dollarBalance={dollarBalance} />
       )}

src/components/AddressPill/AddressPill.test.tsx

@@ -25,12 +25,17 @@ describe("<AddressPill />", () => {
 
   it("hides icon", () => {
     store.dispatch(upsert(contact1));
-    render(<AddressPill address={parseImplicitPkh(contact1.pkh)} mode="no_icons" />);
+    render(<AddressPill address={parseImplicitPkh(contact1.pkh)} mode={{ type: "no_icons" }} />);
     expect(screen.queryByTestId("address-pill-left-icon")).toBeNull();
   });
 
   it("is removable", () => {
-    render(<AddressPill address={parseImplicitPkh(contact1.pkh)} mode="removable" />);
+    render(
+      <AddressPill
+        address={parseImplicitPkh(contact1.pkh)}
+        mode={{ type: "removable", onRemove: () => {} }}
+      />
+    );
     expect(screen.getByTestId("xmark-icon-path")).toBeInTheDocument();
   });
 
@@ -44,7 +49,7 @@ describe("<AddressPill />", () => {
     render(
       <AddressPill
         address={parseContractPkh(fa1.token.contract?.address as string)}
-        mode="removable"
+        mode={{ type: "removable", onRemove: () => {} }}
       />
     );
     expect(screen.getByTestId("address-pill-left-icon")).toBeInTheDocument();

src/components/AddressPill/AddressPill.tsx

@@ -18,16 +18,18 @@ import useAddressKind from "./useAddressKind";
 import { LeftIcon, RightIcon } from "./AddressPillIcon";
 import AddressPillText from "./AddressPillText";
 
-type AddressPillMode = "default" | "removable" | "no_icons";
+export type AddressPillMode =
+  | { type: "default" }
+  | { type: "removable"; onRemove: () => void }
+  | { type: "no_icons" };
 
 const AddressPill: React.FC<{ address: Address; mode?: AddressPillMode } & BoxProps> = ({
   address,
-  mode = "default",
+  mode = { type: "default" },
   ...rest
 }) => {
   const addressKind = useAddressKind(address);
-  const showIcons = mode !== "no_icons";
-  const isRemovable = mode === "removable";
+  const showIcons = mode.type !== "no_icons";
 
   const { onOpen, onClose, isOpen } = useDisclosure();
   const [mouseHover, setMouseHover] = useState(false);
@@ -112,7 +114,7 @@ const AddressPill: React.FC<{ address: Address; mode?: AddressPillMode } & BoxPr
           <RightIcon
             data-testid="address-pill-right-icon"
             addressKind={addressKind}
-            isRemove={isRemovable}
+            addressPillMode={mode}
             cursor="pointer"
             stroke={textColor}
             mr={2}

src/components/AddressPill/AddressPillIcon.test.tsx

@@ -36,12 +36,17 @@ describe("AddressPill Icons", () => {
   });
 
   it("Right icon renders", () => {
-    render(<RightIcon addressKind={mockFA2Address} isRemove={false} />);
+    render(<RightIcon addressKind={mockFA2Address} addressPillMode={{ type: "default" }} />);
     expect(screen.getByTestId("add-contact-icon")).toBeInTheDocument();
   });
 
   it("Right icon returns x mark icon", () => {
-    render(<RightIcon addressKind={mockFA2Address} isRemove={true} />);
-    expect(screen.getByTestId("x-mark-icon")).toBeInTheDocument();
+    render(
+      <RightIcon
+        addressKind={mockFA2Address}
+        addressPillMode={{ type: "removable", onRemove: () => {} }}
+      />
+    );
+    expect(screen.getByTestId("xmark-icon-path")).toBeInTheDocument();
   });
 });

src/components/AddressPill/AddressPillIcon.tsx

@@ -9,6 +9,7 @@ import { useContactExists } from "../../utils/hooks/contactsHooks";
 import AddContactIcon from "../../assets/icons/AddContact";
 import { useUpsertContactModal } from "../../views/home/useUpsertContactModal";
 import XMark from "../../assets/icons/XMark";
+import { AddressPillMode } from "./AddressPill";
 
 export const LeftIcon: React.FC<{ addressKind: AddressKind } & IconProps> = ({
   addressKind: { type },
@@ -31,16 +32,14 @@ export const LeftIcon: React.FC<{ addressKind: AddressKind } & IconProps> = ({
   }
 };
 
-export const RightIcon: React.FC<{ addressKind: AddressKind; isRemove: boolean } & IconProps> = ({
-  addressKind: { type, pkh },
-  isRemove,
-  ...rest
-}) => {
+export const RightIcon: React.FC<
+  { addressKind: AddressKind; addressPillMode: AddressPillMode } & IconProps
+> = ({ addressKind: { type, pkh }, addressPillMode, ...rest }) => {
   const { addressExistsInContacts } = useContactExists();
   const { modalElement, onOpen } = useUpsertContactModal();
 
-  if (isRemove) {
-    return <XMark data-testid="x-mark-icon" {...rest} />;
+  if (addressPillMode.type === "removable") {
+    return <XMark cursor="pointer" onClick={addressPillMode.onRemove} {...rest} />;
   }
 
   const knownTypes: AddressKindType[] = ["ownedImplicit", "ownedMultisig", "baker"];

src/components/useAccountsFilter.test.tsx

@@ -67,7 +67,7 @@ describe("useAccountsFilter", () => {
     expect(pills).toHaveLength(2);
     expect(pills[0]).toHaveTextContent(accounts[0].label);
     expect(pills[1]).toHaveTextContent(accounts[2].label);
-    fireEvent.click(screen.getByTestId(`account-pill-close-${accounts[0].address.pkh}`));
+    fireEvent.click(screen.getAllByTestId("xmark-icon-path")[0]);
 
     {
       const pills = screen.getAllByTestId("account-pill");

src/components/useAccountsFilter.tsx

@@ -1,12 +1,12 @@
 import { ChevronDownIcon } from "@chakra-ui/icons";
-import { Button, Flex, Menu, MenuButton, Tag, TagCloseButton, TagLabel } from "@chakra-ui/react";
+import { Button, Flex, Menu, MenuButton, Wrap } from "@chakra-ui/react";
 import { compact, differenceBy, pick } from "lodash";
 import { useState } from "react";
 import { Account } from "../types/Account";
 import { RawPkh } from "../types/Address";
-import { formatPkh } from "../utils/format";
 import { useAllAccounts } from "../utils/hooks/accountHooks";
 import AccountListDisplay from "./AccountSelector/AccountListDisplay";
+import AddressPill from "./AddressPill/AddressPill";
 
 export const useAccountsFilter = () => {
   const [selectedAccounts, setSelectedAccounts] = useState<Account[]>([]);
@@ -40,17 +40,24 @@ export const useAccountsFilter = () => {
             }}
           />
         </Menu>
-        {selectedAccounts.map(account => (
-          <Pill
-            account={account}
-            key={account.address.pkh}
-            onClose={() => {
-              setSelectedAccounts(
-                selectedAccounts.filter(a => a.address.pkh !== account.address.pkh)
-              );
-            }}
-          />
-        ))}
+        <Wrap p={2} width="90%">
+          {selectedAccounts.map(account => (
+            <AddressPill
+              data-testid="account-pill"
+              key={account.address.pkh}
+              address={account.address}
+              mode={{
+                type: "removable",
+                onRemove: () => {
+                  setSelectedAccounts(
+                    selectedAccounts.filter(a => a.address.pkh !== account.address.pkh)
+                  );
+                },
+              }}
+              mr={2}
+            />
+          ))}
+        </Wrap>
       </Flex>
     ),
   };
@@ -75,25 +82,3 @@ export const useAccountsFilterWithMapFilter = () => {
     accountsFilter,
   };
 };
-
-const Pill: React.FC<{ account: Account; onClose: () => void }> = ({ account, onClose }) => {
-  return (
-    <Tag
-      borderRadius="full"
-      bg="#2C2B2B"
-      pl="8px"
-      pr="8px"
-      pt="3px"
-      pb="3px"
-      mx={1}
-      height={4}
-      key={account.address.pkh}
-      data-testid="account-pill"
-    >
-      <TagLabel fontSize="14px" lineHeight="18px">
-        {account.label ?? formatPkh(account.address.pkh)}
-      </TagLabel>
-      <TagCloseButton onClick={onClose} data-testid={`account-pill-close-${account.address.pkh}`} />
-    </Tag>
-  );
-};