From dc64f82d2d2b1bec94f90ae06ba54ef9d36716fb Mon Sep 17 00:00:00 2001 From: Leo Unoki Date: Tue, 26 Sep 2023 03:37:57 +0900 Subject: [PATCH 1/5] Remove accountTile stories --- .../MultisigSignerTileDisplay.stories.tsx | 90 ------------------- .../AccountTileDisplay.stories.tsx | 88 +++++++++--------- 2 files changed, 44 insertions(+), 134 deletions(-) delete mode 100644 src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.stories.tsx diff --git a/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.stories.tsx b/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.stories.tsx deleted file mode 100644 index 36713edbe6..0000000000 --- a/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.stories.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { Meta, StoryObj } from "@storybook/react"; -import { AccountType } from "../../../../types/Account"; -import { MultisigSignerTileDisplay } from "./MultisigSignerTileDisplay"; - -const meta = { - title: "Umami/MultisigSignerTileDisplay", - component: MultisigSignerTileDisplay, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -const pkh = "tz1UNer1ijeE9ndjzSszRduR3CzX49hoBUB3"; - -export const AwaitingApproval: Story = { - args: { - label: "Multisig signer", - pkh, - signerState: "awaitingApprovalByExternalSigner", - kind: AccountType.MNEMONIC, - }, -}; - -export const AwaitingApprovalSocial: Story = { - args: { - label: "Multisig signer", - pkh, - signerState: "awaitingApprovalByExternalSigner", - kind: AccountType.SOCIAL, - }, -}; - -export const AwaitingApprovalContact: Story = { - args: { - label: "Multisig signer", - pkh, - signerState: "awaitingApprovalByExternalSigner", - kind: "contact", - }, -}; - -export const AwaitingApprovalUnknownAddress: Story = { - args: { - label: "Multisig signer", - pkh, - signerState: "awaitingApprovalByExternalSigner", - kind: "unknown", - }, -}; - -export const Approved = { - args: { - label: "Multisig signer", - pkh, - onClickApproveExecute: () => {}, - signerState: "approved", - kind: AccountType.MNEMONIC, - }, -}; - -export const Executable = { - args: { - label: "Multisig signer", - pkh, - onClickApproveExecute: () => {}, - signerState: "executable", - kind: AccountType.MNEMONIC, - }, -}; - -export const LoadingExecution = { - args: { - label: "Multisig signer", - pkh, - onClickApproveExecute: () => {}, - signerState: "executable", - isLoading: true, - kind: AccountType.MNEMONIC, - }, -}; - -export const Approvable = { - args: { - label: "Multisig signer", - pkh, - onClickApproveExecute: () => {}, - signerState: "approvable", - kind: AccountType.MNEMONIC, - }, -}; diff --git a/src/components/AccountTile/AccountTileDisplay.stories.tsx b/src/components/AccountTile/AccountTileDisplay.stories.tsx index d1d0fd9fd6..241bc22aec 100644 --- a/src/components/AccountTile/AccountTileDisplay.stories.tsx +++ b/src/components/AccountTile/AccountTileDisplay.stories.tsx @@ -1,50 +1,50 @@ -import React from "react"; -import { ComponentStory, ComponentMeta } from "@storybook/react"; -import { AccountTileDisplay } from "./AccountTileDisplay"; -import { AccountType } from "../../types/Account"; +// import React from "react"; +// import { ComponentStory, ComponentMeta } from "@storybook/react"; +// import { AccountTileDisplay } from "./AccountTileDisplay"; +// import { AccountType } from "../../types/Account"; -export default { - title: "Umami/AccountTileDisplay", - component: AccountTileDisplay, -} as ComponentMeta; +// export default { +// title: "Umami/AccountTileDisplay", +// component: AccountTileDisplay, +// } as ComponentMeta; -const Template: ComponentStory = args => ( - -); +// const Template: ComponentStory = args => ( +// +// ); -export const Default = Template.bind({}); -Default.args = { - label: "My super account", - address: "tz1UNer1ijeE9ndjzSszRduR3CzX49hoBUB3", - balance: "34,12 tez", - kind: AccountType.MNEMONIC, -}; +// export const Default = Template.bind({}); +// Default.args = { +// label: "My super account", +// address: "tz1UNer1ijeE9ndjzSszRduR3CzX49hoBUB3", +// balance: "34,12 tez", +// kind: AccountType.MNEMONIC, +// }; -export const Multisig = Template.bind({}); -Multisig.args = { - label: "My super account", - address: "tz1UNer1ijeE9ndjzSszRduR3CzX49hoBUB3", - balance: "34,12 tez", - kind: AccountType.MULTISIG, -}; +// export const Multisig = Template.bind({}); +// Multisig.args = { +// label: "My super account", +// address: "tz1UNer1ijeE9ndjzSszRduR3CzX49hoBUB3", +// balance: "34,12 tez", +// kind: AccountType.MULTISIG, +// }; -export const Social = Template.bind({}); -Social.args = { - label: "My super account", - address: "tz1UNer1ijeE9ndjzSszRduR3CzX49hoBUB3", - balance: "34,12 tez", - kind: AccountType.SOCIAL, -}; -export const Ledger = Template.bind({}); -Ledger.args = { - label: "My super account", - address: "tz1UNer1ijeE9ndjzSszRduR3CzX49hoBUB3", - balance: "34,12 tez", - kind: AccountType.LEDGER, -}; +// export const Social = Template.bind({}); +// Social.args = { +// label: "My super account", +// address: "tz1UNer1ijeE9ndjzSszRduR3CzX49hoBUB3", +// balance: "34,12 tez", +// kind: AccountType.SOCIAL, +// }; +// export const Ledger = Template.bind({}); +// Ledger.args = { +// label: "My super account", +// address: "tz1UNer1ijeE9ndjzSszRduR3CzX49hoBUB3", +// balance: "34,12 tez", +// kind: AccountType.LEDGER, +// }; -export const Selected = Template.bind({}); -Selected.args = { - ...Default.args, - selected: true, -}; +// export const Selected = Template.bind({}); +// Selected.args = { +// ...Default.args, +// selected: true, +// }; From d803edeb39f3d4409880168afeb25ced88b6f9bc Mon Sep 17 00:00:00 2001 From: Leo Unoki Date: Tue, 26 Sep 2023 03:50:59 +0900 Subject: [PATCH 2/5] Add size to AddressTileIcon --- .../AddressTile/AddressTileIcon.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/AddressTile/AddressTileIcon.tsx b/src/components/AddressTile/AddressTileIcon.tsx index a66d6c858b..9b95c25254 100644 --- a/src/components/AddressTile/AddressTileIcon.tsx +++ b/src/components/AddressTile/AddressTileIcon.tsx @@ -10,8 +10,6 @@ import { AddressKind } from "./types"; const baseIconProps = { stroke: colors.gray[400], - height: "30px", - width: "30px", borderRadius: "4px", p: "5px", bg: colors.gray[500], @@ -19,22 +17,24 @@ const baseIconProps = { const AddressTileIcon: React.FC<{ addressKind: AddressKind; -}> = ({ addressKind }) => { + size?: "md" | "lg"; +}> = ({ addressKind, size = "md" }) => { + const w = 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 ; } }; From 1b431b33d359e1abd34eee06bf08d2c624dccb54 Mon Sep 17 00:00:00 2001 From: Leo Unoki Date: Tue, 26 Sep 2023 04:04:53 +0900 Subject: [PATCH 3/5] Add AccountTileIcon and use it for MultisigSignerTile --- .../MultisigSignerTile.tsx | 16 +++----------- .../MultisigSignerTileDisplay.tsx | 13 +++++------ .../AccountTile/AccountTileIcon.tsx | 22 +++++++++++++++++++ 3 files changed, 31 insertions(+), 20 deletions(-) create mode 100644 src/components/AccountTile/AccountTileIcon.tsx diff --git a/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx b/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx index 0c000a62d7..88c2c87c8f 100644 --- a/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx +++ b/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx @@ -2,7 +2,6 @@ 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"; @@ -14,6 +13,7 @@ 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"; const MultisigSignerTile: React.FC<{ signerAddress: ImplicitAddress; @@ -21,25 +21,16 @@ const MultisigSignerTile: React.FC<{ 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 = () => handleAsyncAction(async () => { if (!signer) { @@ -68,9 +59,8 @@ const MultisigSignerTile: React.FC<{ return ( void; signerState: MultisigSignerState; isLoading?: boolean; - kind: Exclude; -}> = ({ pkh, label, isLoading = false, kind, ...rest }) => { + addressKind: Exclude; +}> = ({ pkh, isLoading = false, addressKind, ...rest }) => { return ( } + icon={} + leftElement={} rightElement={} /> ); diff --git a/src/components/AccountTile/AccountTileIcon.tsx b/src/components/AccountTile/AccountTileIcon.tsx new file mode 100644 index 0000000000..c628a59693 --- /dev/null +++ b/src/components/AccountTile/AccountTileIcon.tsx @@ -0,0 +1,22 @@ +import { Flex } from "@chakra-ui/react"; +import { AddressKind } from "../AddressTile/types"; +import { Identicon } from "../Identicon"; +import colors from "../../style/colors"; +import AddressTileIcon from "../AddressTile/AddressTileIcon"; + +const AccountTileIcon: React.FC<{ addressKind: AddressKind }> = ({ addressKind }) => { + switch (addressKind.type) { + case "mnemonic": + return ; + default: { + const bg = addressKind.type === "social" ? "white" : colors.gray[500]; + return ( + + + + ); + } + } +}; + +export default AccountTileIcon; From be050c6c273b4d70db601ebc29a3ec62cb48191a Mon Sep 17 00:00:00 2001 From: Leo Unoki Date: Tue, 26 Sep 2023 04:08:17 +0900 Subject: [PATCH 4/5] Refactor MultisigSigner and Add test --- .../MultisigSignerTile.tsx | 1 - .../MultisigSignerTileDisplay.test.tsx | 29 +++++------ .../MultisigSignerTileDisplay.tsx | 7 ++- .../AccountTileDisplay.stories.tsx | 50 ------------------- .../AccountTile/AccountTileDisplay.tsx | 5 +- 5 files changed, 19 insertions(+), 73 deletions(-) delete mode 100644 src/components/AccountTile/AccountTileDisplay.stories.tsx diff --git a/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx b/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx index 88c2c87c8f..a2575eceda 100644 --- a/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx +++ b/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx @@ -59,7 +59,6 @@ const MultisigSignerTile: React.FC<{ return ( ", () => { - const shrinkedAddress = formatPkh(pkh); it("renders the right icon with a shrinked address and label l for known addresses", () => { render( {}} - label={label} + isLoading={false} /> ); expect(screen.getByTestId("contact-icon")).toBeInTheDocument(); @@ -26,11 +25,10 @@ describe("", () => { cleanup(); render( {}} - label={label} + isLoading={false} /> ); expect(screen.getByTestId("ledger-icon")).toBeInTheDocument(); @@ -40,11 +38,10 @@ describe("", () => { cleanup(); render( {}} - label={label} + isLoading={false} /> ); expect(screen.getByTestId("identicon")).toBeInTheDocument(); @@ -54,11 +51,10 @@ describe("", () => { cleanup(); render( {}} - label={label} + isLoading={false} /> ); expect(screen.getByTestId("social-icon")).toBeInTheDocument(); @@ -66,14 +62,13 @@ describe("", () => { expect(screen.getByText(label)).toBeInTheDocument(); }); - it("renders the right icon with no label for unknown addresses", () => { + it("renders the right icon and no label for unknown addresses", () => { render( {}} - label={label} + isLoading={false} /> ); expect(screen.getByTestId("unknown-contact-icon")).toBeInTheDocument(); diff --git a/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.tsx b/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.tsx index ee37488922..a535377bba 100644 --- a/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.tsx +++ b/src/components/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.tsx @@ -6,16 +6,15 @@ import { AddressKind } from "../../../AddressTile/types"; import AccountTileIcon from "../../../AccountTile/AccountTileIcon"; export const MultisigSignerTileDisplay: React.FC<{ - pkh: string; onClickApproveExecute: () => void; signerState: MultisigSignerState; - isLoading?: boolean; + isLoading: boolean; addressKind: Exclude; -}> = ({ pkh, isLoading = false, addressKind, ...rest }) => { +}> = ({ isLoading, addressKind, ...rest }) => { return ( } - leftElement={} + leftElement={} rightElement={} /> ); diff --git a/src/components/AccountTile/AccountTileDisplay.stories.tsx b/src/components/AccountTile/AccountTileDisplay.stories.tsx deleted file mode 100644 index 241bc22aec..0000000000 --- a/src/components/AccountTile/AccountTileDisplay.stories.tsx +++ /dev/null @@ -1,50 +0,0 @@ -// import React from "react"; -// import { ComponentStory, ComponentMeta } from "@storybook/react"; -// import { AccountTileDisplay } from "./AccountTileDisplay"; -// import { AccountType } from "../../types/Account"; - -// export default { -// title: "Umami/AccountTileDisplay", -// component: AccountTileDisplay, -// } as ComponentMeta; - -// const Template: ComponentStory = args => ( -// -// ); - -// export const Default = Template.bind({}); -// Default.args = { -// label: "My super account", -// address: "tz1UNer1ijeE9ndjzSszRduR3CzX49hoBUB3", -// balance: "34,12 tez", -// kind: AccountType.MNEMONIC, -// }; - -// export const Multisig = Template.bind({}); -// Multisig.args = { -// label: "My super account", -// address: "tz1UNer1ijeE9ndjzSszRduR3CzX49hoBUB3", -// balance: "34,12 tez", -// kind: AccountType.MULTISIG, -// }; - -// export const Social = Template.bind({}); -// Social.args = { -// label: "My super account", -// address: "tz1UNer1ijeE9ndjzSszRduR3CzX49hoBUB3", -// balance: "34,12 tez", -// kind: AccountType.SOCIAL, -// }; -// export const Ledger = Template.bind({}); -// Ledger.args = { -// label: "My super account", -// address: "tz1UNer1ijeE9ndjzSszRduR3CzX49hoBUB3", -// balance: "34,12 tez", -// kind: AccountType.LEDGER, -// }; - -// export const Selected = Template.bind({}); -// Selected.args = { -// ...Default.args, -// selected: true, -// }; diff --git a/src/components/AccountTile/AccountTileDisplay.tsx b/src/components/AccountTile/AccountTileDisplay.tsx index c64c0c7841..40c9aad1d9 100644 --- a/src/components/AccountTile/AccountTileDisplay.tsx +++ b/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 ( {label && {label}} From a9691b61e96b157a66e3dfa1705f8fed3adcbf2e Mon Sep 17 00:00:00 2001 From: Leo Unoki Date: Tue, 26 Sep 2023 12:09:07 +0900 Subject: [PATCH 5/5] 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 ; } };