Merge pull request #459 from trilitech/remove-get-icons-pt1

Remove get icons pt1

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

@@ -2,45 +2,37 @@ import React, { useContext } from "react";
 import { ImplicitAccount, MultisigAccount } from "../../../../types/Account";
 import { ImplicitAddress } from "../../../../types/Address";
 import { useGetImplicitAccountSafe } from "../../../../utils/hooks/accountHooks";
-import { useGetContactName } from "../../../../utils/hooks/contactsHooks";
 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;
   pendingApprovals: number;
   operation: MultisigOperation;
   sender: MultisigAccount;
 }> = ({ pendingApprovals, sender, operation, signerAddress }) => {
-  const getContactName = useGetContactName();
+  const addressKind = useAddressKind(signerAddress);
   const getImplicitAccount = useGetImplicitAccountSafe();
   const { isLoading, handleAsyncAction } = useAsyncActionHandler();
   const { openWith } = useContext(DynamicModalContext);
   const network = useSelectedNetwork();
 
-  const implicitAccount = getImplicitAccount(signerAddress.pkh);
-  const contactName = getContactName(signerAddress.pkh);
-
-  const accountLabel = implicitAccount?.label;
-
-  const label = accountLabel || contactName;
-
   const signer = getImplicitAccount(signerAddress.pkh);
 
   const operationIsExecutable = pendingApprovals === 0;
 
-  const kind = contactName ? "contact" : signer?.type ?? "unknown";
-
-  const onButtonClick = () =>
+  const onClickApproveExecute = () =>
     handleAsyncAction(async () => {
       if (!signer) {
         throw new Error("Can't approve or execute with an account you don't own");
@@ -66,19 +58,24 @@ const MultisigSignerTile: React.FC<{
       );
     });
 
+  const signerState = getMultisigSignerState({
+    approvals: operation.approvals,
+    signerAddress,
+    operationIsExecutable,
+    signerAccount: signer,
+  });
+
   return (
-    <MultisigSignerTileDisplay
-      kind={kind}
-      pkh={signerAddress.pkh}
-      label={label}
-      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/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.tsx

@@ -1,22 +1,20 @@
 import React from "react";
 import { AccountType } from "../../../../types/Account";
 import { AccountTileBase, LabelAndAddress } from "../../../AccountTile/AccountTileDisplay";
-import { getIcon } from "../../../AccountTile/getIcon";
-import { AddressKind } from "../../../AccountTile/AddressKind";
 import MultisigActionButton, { MultisigSignerState } from "./MultisigActionButton";
+import { AddressKind } from "../../../AddressTile/types";
+import AccountTileIcon from "../../../AccountTile/AccountTileIcon";
 
 export const MultisigSignerTileDisplay: React.FC<{
-  pkh: string;
-  label?: string;
   onClickApproveExecute: () => void;
   signerState: MultisigSignerState;
-  isLoading?: boolean;
-  kind: Exclude<AddressKind, AccountType.MULTISIG>;
-}> = ({ pkh, label, isLoading = false, kind, ...rest }) => {
+  isLoading: boolean;
+  addressKind: Exclude<AddressKind, AccountType.MULTISIG>;
+}> = ({ isLoading, addressKind, ...rest }) => {
   return (
     <AccountTileBase
-      icon={getIcon(kind, pkh)}
-      leftElement={<LabelAndAddress label={kind === "unknown" ? undefined : label} pkh={pkh} />}
+      icon={<AccountTileIcon addressKind={addressKind} />}
+      leftElement={<LabelAndAddress label={addressKind.label} pkh={addressKind.pkh} />}
       rightElement={<MultisigActionButton isLoading={isLoading} {...rest} />}
     />
   );

src/components/AccountTile/AccountTileDisplay.tsx

@@ -42,7 +42,10 @@ export const AccountTileBase: React.FC<
   );
 };
 
-export const LabelAndAddress: React.FC<{ label?: string; pkh: string }> = ({ label, pkh }) => {
+export const LabelAndAddress: React.FC<{ label: string | null; pkh: string }> = ({
+  label,
+  pkh,
+}) => {
   return (
     <Box m={4} data-testid="account-identifier">
       {label && <Heading size="md">{label}</Heading>}

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();
+  });
+});