Remove MultisigSignerTileDisplay

src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx

@@ -4,16 +4,17 @@ import { ImplicitAddress } from "../../../../types/Address";
 import { useGetImplicitAccountSafe } from "../../../../utils/hooks/accountHooks";
 import { useAsyncActionHandler } from "../../../../utils/hooks/useAsyncActionHandler";
 import { MultisigOperation } from "../../../../utils/multisig/types";
-import { MultisigSignerState } from "./MultisigActionButton";
+import MultisigActionButton, { MultisigSignerState } from "./MultisigActionButton";
 import { makeAccountOperations } from "../../../../types/AccountOperations";
 import { makeMultisigApproveOrExecuteOperation } from "../../../../types/Operation";
 import { estimate } from "../../../../utils/tezos";
 import { DynamicModalContext } from "../../../DynamicModal";
 import SignPage from "../../../SendFlow/Multisig/SignPage";
-import { MultisigSignerTileDisplay } from "./MultisigSignerTileDisplay";
 import { useSelectedNetwork } from "../../../../utils/hooks/networkHooks";
 import { parseRawMichelson } from "../../../../multisig/decode/decodeLambda";
 import useAddressKind from "../../../AddressTile/useAddressKind";
+import { AccountTileBase, LabelAndAddress } from "../../../AccountTile/AccountTileDisplay";
+import AccountTileIcon from "../../../AccountTile/AccountTileIcon";
 
 const MultisigSignerTile: React.FC<{
   signerAddress: ImplicitAddress;
@@ -31,7 +32,7 @@ const MultisigSignerTile: React.FC<{
 
   const operationIsExecutable = pendingApprovals === 0;
 
-  const onButtonClick = () =>
+  const onClickApproveExecute = () =>
     handleAsyncAction(async () => {
       if (!signer) {
         throw new Error("Can't approve or execute with an account you don't own");
@@ -57,17 +58,24 @@ const MultisigSignerTile: React.FC<{
       );
     });
 
+  const signerState = getMultisigSignerState({
+    approvals: operation.approvals,
+    signerAddress,
+    operationIsExecutable,
+    signerAccount: signer,
+  });
+
   return (
-    <MultisigSignerTileDisplay
-      addressKind={addressKind}
-      signerState={getMultisigSignerState({
-        approvals: operation.approvals,
-        signerAddress,
-        operationIsExecutable,
-        signerAccount: signer,
-      })}
-      onClickApproveExecute={onButtonClick}
-      isLoading={isLoading}
+    <AccountTileBase
+      icon={<AccountTileIcon addressKind={addressKind} />}
+      leftElement={<LabelAndAddress label={addressKind.label} pkh={addressKind.pkh} />}
+      rightElement={
+        <MultisigActionButton
+          isLoading={isLoading}
+          signerState={signerState}
+          onClickApproveExecute={onClickApproveExecute}
+        />
+      }
     />
   );
 };

src/components/AccountTile/AccountTileIcon.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from "../../mocks/testUtils";
+import { AddressKind } from "../AddressTile/types";
+import AccountTileIcon from "./AccountTileIcon";
+
+const fixture = (addressKind: AddressKind) => <AccountTileIcon addressKind={addressKind} />;
+
+describe("<AddressTileIcon />", () => {
+  it("displays the mnemonic icon", () => {
+    render(fixture({ type: "mnemonic", pkh: "tz1", label: "label" }));
+    expect(screen.getByTestId("identicon")).toBeInTheDocument();
+  });
+
+  it("displays the social icon", () => {
+    render(fixture({ type: "social", pkh: "tz1", label: "label" }));
+    expect(screen.getByTestId("social-icon")).toBeInTheDocument();
+  });
+
+  it("displays the ledger icon", () => {
+    render(fixture({ type: "ledger", pkh: "tz1", label: "label" }));
+    expect(screen.getByTestId("ledger-icon")).toBeInTheDocument();
+  });
+
+  it("displays the multisig icon", () => {
+    render(fixture({ type: "multisig", pkh: "tz1", label: "label" }));
+    expect(screen.getByTestId("key-icon")).toBeInTheDocument();
+  });
+
+  it("displays the baker icon", () => {
+    render(fixture({ type: "baker", pkh: "tz1", label: "label" }));
+    expect(screen.getByTestId("baker-icon")).toBeInTheDocument();
+  });
+
+  it("displays the contact icon", () => {
+    render(fixture({ type: "contact", pkh: "tz1", label: "label" }));
+    expect(screen.getByTestId("contact-icon")).toBeInTheDocument();
+  });
+  it("displays the unknown icon", () => {
+    render(fixture({ type: "unknown", pkh: "tz1", label: null }));
+    expect(screen.getByTestId("unknown-contact-icon")).toBeInTheDocument();
+  });
+});

src/components/AddressTile/AddressTileIcon.tsx

@@ -19,22 +19,24 @@ const AddressTileIcon: React.FC<{
   addressKind: AddressKind;
   size?: "md" | "lg";
 }> = ({ addressKind, size = "md" }) => {
-  const w = size === "md" ? "30px" : "38.5px";
+  const sizeInPx = size === "md" ? "30px" : "38.5px";
   switch (addressKind.type) {
     case "mnemonic":
-      return <Identicon p="5px" w={w} h={w} identiconSize={20} address={addressKind.pkh} />;
+      return (
+        <Identicon p="5px" w={sizeInPx} h={sizeInPx} identiconSize={20} address={addressKind.pkh} />
+      );
     case "social":
-      return <SocialIcon w={w} h={w} {...baseIconProps} bg="white" />;
+      return <SocialIcon w={sizeInPx} h={sizeInPx} {...baseIconProps} bg="white" />;
     case "ledger":
-      return <LedgerIcon w={w} h={w} {...baseIconProps} color={colors.gray[400]} />;
+      return <LedgerIcon w={sizeInPx} h={sizeInPx} {...baseIconProps} color={colors.gray[400]} />;
     case "multisig":
-      return <KeyIcon w={w} h={w} {...baseIconProps} />;
+      return <KeyIcon w={sizeInPx} h={sizeInPx} {...baseIconProps} />;
     case "contact":
-      return <ContactIcon w={w} h={w} {...baseIconProps} />;
+      return <ContactIcon w={sizeInPx} h={sizeInPx} {...baseIconProps} />;
     case "unknown":
-      return <UnknownContactIcon w={w} h={w} {...baseIconProps} />;
+      return <UnknownContactIcon w={sizeInPx} h={sizeInPx} {...baseIconProps} />;
     case "baker":
-      return <BakerIcon w={w} h={w} {...baseIconProps} />;
+      return <BakerIcon w={sizeInPx} h={sizeInPx} {...baseIconProps} />;
   }
 };