Refactor MultisigSigner and Add test

trilitech · Sep 25, 2023 · 242507a · 242507a
1 parent 6f862f9
commit 242507a
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 72 deletions.
diff --git 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 (
     <MultisigSignerTileDisplay
-      pkh={signerAddress.pkh}
       addressKind={addressKind}
       signerState={getMultisigSignerState({
         approvals: operation.approvals,

diff --git a/...nts/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.test.tsx b/...nts/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.test.tsx
@@ -6,17 +6,15 @@ import { MultisigSignerTileDisplay } from "./MultisigSignerTileDisplay";
 
 const pkh = mockImplicitAccount(0).address.pkh;
 const label = "my label";
+const shrinkedAddress = formatPkh(pkh);
 
 describe("<MultisigSignerTileDisplay />", () => {
-  const shrinkedAddress = formatPkh(pkh);
   it("renders the right icon with a shrinked address and label l for known addresses", () => {
     render(
       <MultisigSignerTileDisplay
-        kind="contact"
-        pkh={pkh}
+        addressKind={{ type: "contact", pkh, label }}
         signerState="approvable"
         onClickApproveExecute={() => {}}
-        label={label}
       />
     );
     expect(screen.getByTestId("contact-icon")).toBeInTheDocument();
@@ -26,11 +24,9 @@ describe("<MultisigSignerTileDisplay />", () => {
     cleanup();
     render(
       <MultisigSignerTileDisplay
-        kind={AccountType.LEDGER}
-        pkh={pkh}
+        addressKind={{ type: AccountType.LEDGER, pkh, label }}
         signerState="approvable"
         onClickApproveExecute={() => {}}
-        label={label}
       />
     );
     expect(screen.getByTestId("ledger-icon")).toBeInTheDocument();
@@ -40,11 +36,9 @@ describe("<MultisigSignerTileDisplay />", () => {
     cleanup();
     render(
       <MultisigSignerTileDisplay
-        kind={AccountType.MNEMONIC}
-        pkh={pkh}
+        addressKind={{ type: "mnemonic", pkh, label }}
         signerState="approvable"
         onClickApproveExecute={() => {}}
-        label={label}
       />
     );
     expect(screen.getByTestId("identicon")).toBeInTheDocument();
@@ -54,26 +48,22 @@ describe("<MultisigSignerTileDisplay />", () => {
     cleanup();
     render(
       <MultisigSignerTileDisplay
-        kind={AccountType.SOCIAL}
-        pkh={pkh}
+        addressKind={{ type: "social", pkh, label }}
         signerState="approvable"
         onClickApproveExecute={() => {}}
-        label={label}
       />
     );
     expect(screen.getByTestId("social-icon")).toBeInTheDocument();
     expect(screen.getByText(shrinkedAddress)).toBeInTheDocument();
     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(
       <MultisigSignerTileDisplay
-        kind="unknown"
-        pkh={pkh}
+        addressKind={{ type: "unknown", pkh, label: null }}
         signerState="approvable"
         onClickApproveExecute={() => {}}
-        label={label}
       />
     );
     expect(screen.getByTestId("unknown-contact-icon")).toBeInTheDocument();

diff --git a/...mponents/AccountDrawer/AssetsPanel/MultisigPendingAccordion/MultisigSignerTileDisplay.tsx b/...mponents/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;
   addressKind: Exclude<AddressKind, AccountType.MULTISIG>;
-}> = ({ pkh, isLoading = false, addressKind, ...rest }) => {
+}> = ({ isLoading = false, addressKind, ...rest }) => {
   return (
     <AccountTileBase
       icon={<AccountTileIcon addressKind={addressKind} />}
-      leftElement={<LabelAndAddress label={addressKind.label} pkh={pkh} />}
+      leftElement={<LabelAndAddress label={addressKind.label} pkh={addressKind.pkh} />}
       rightElement={<MultisigActionButton isLoading={isLoading} {...rest} />}
     />
   );

diff --git a/src/components/AccountTile/AccountTileDisplay.stories.tsx b/src/components/AccountTile/AccountTileDisplay.stories.tsx
diff --git 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 (
     <Box m={4} data-testid="account-identifier">
       {label && <Heading size="md">{label}</Heading>}