From d26365b55cd42a03457e7d979cba05d417459739 Mon Sep 17 00:00:00 2001 From: Leo Unoki Date: Tue, 26 Sep 2023 12:09:07 +0900 Subject: [PATCH] Remove MultisigSignerTileDisplay --- .../MultisigSignerTile.tsx | 34 ++++---- .../MultisigSignerTileDisplay.test.tsx | 78 ------------------- .../AccountTile/AccountTileIcon.test.tsx | 41 ++++++++++ .../AddressTile/AddressTileIcon.tsx | 18 +++-- 4 files changed, 72 insertions(+), 99 deletions(-) delete mode 100644 src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.test.tsx create mode 100644 src/components/AccountTile/AccountTileIcon.test.tsx diff --git a/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx b/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx index a2575eceda..3ca8f055dc 100644 --- a/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx +++ b/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 ( - } + leftElement={} + rightElement={ + + } /> ); }; diff --git a/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.test.tsx b/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.test.tsx deleted file mode 100644 index a45fa5cf67..0000000000 --- a/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.test.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { mockImplicitAccount } from "../../../../mocks/factories"; -import { render, screen, cleanup } from "../../../../mocks/testUtils"; -import { AccountType } from "../../../../types/Account"; -import { formatPkh } from "../../../../utils/formatPkh"; -import { MultisigSignerTileDisplay } from "./MultisigSignerTileDisplay"; - -const pkh = mockImplicitAccount(0).address.pkh; -const label = "my label"; -const shrinkedAddress = formatPkh(pkh); - -describe("", () => { - it("renders the right icon with a shrinked address and label l for known addresses", () => { - render( - {}} - isLoading={false} - /> - ); - expect(screen.getByTestId("contact-icon")).toBeInTheDocument(); - expect(screen.getByText(shrinkedAddress)).toBeInTheDocument(); - expect(screen.getByText(label)).toBeInTheDocument(); - - cleanup(); - render( - {}} - isLoading={false} - /> - ); - expect(screen.getByTestId("ledger-icon")).toBeInTheDocument(); - expect(screen.getByText(shrinkedAddress)).toBeInTheDocument(); - expect(screen.getByText(label)).toBeInTheDocument(); - - cleanup(); - render( - {}} - isLoading={false} - /> - ); - expect(screen.getByTestId("identicon")).toBeInTheDocument(); - expect(screen.getByText(shrinkedAddress)).toBeInTheDocument(); - expect(screen.getByText(label)).toBeInTheDocument(); - - cleanup(); - render( - {}} - isLoading={false} - /> - ); - expect(screen.getByTestId("social-icon")).toBeInTheDocument(); - expect(screen.getByText(shrinkedAddress)).toBeInTheDocument(); - expect(screen.getByText(label)).toBeInTheDocument(); - }); - - it("renders the right icon and no label for unknown addresses", () => { - render( - {}} - isLoading={false} - /> - ); - expect(screen.getByTestId("unknown-contact-icon")).toBeInTheDocument(); - expect(screen.getByText(shrinkedAddress)).toBeInTheDocument(); - expect(screen.queryByText(label)).not.toBeInTheDocument(); - }); -}); diff --git a/src/components/AccountTile/AccountTileIcon.test.tsx b/src/components/AccountTile/AccountTileIcon.test.tsx new file mode 100644 index 0000000000..5019d49ad3 --- /dev/null +++ b/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) => ; + +describe("", () => { + 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(); + }); +}); diff --git a/src/components/AddressTile/AddressTileIcon.tsx b/src/components/AddressTile/AddressTileIcon.tsx index 9b95c25254..343cb2a7fe 100644 --- a/src/components/AddressTile/AddressTileIcon.tsx +++ b/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 ; + return ( + + ); case "social": - return ; + return ; case "ledger": - return ; + return ; case "multisig": - return ; + return ; case "contact": - return ; + return ; case "unknown": - return ; + return ; case "baker": - return ; + return ; } };