Merge pull request #462 from trilitech/remove-get-icons-pt2

Remove get icons pt2

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

@@ -13,7 +13,7 @@ import SignPage from "../../../SendFlow/Multisig/SignPage";
 import { useSelectedNetwork } from "../../../../utils/hooks/networkHooks";
 import { parseRawMichelson } from "../../../../multisig/decode/decodeLambda";
 import useAddressKind from "../../../AddressTile/useAddressKind";
-import { AccountTileBase, LabelAndAddress } from "../../../AccountTile/AccountTileDisplay";
+import { AccountTileBase, LabelAndAddress } from "../../../AccountTile/AccountTile";
 import AccountTileIcon from "../../../AccountTile/AccountTileIcon";
 
 const MultisigSignerTile: React.FC<{

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { AccountType } from "../../../../types/Account";
-import { AccountTileBase, LabelAndAddress } from "../../../AccountTile/AccountTileDisplay";
+import { AccountTileBase, LabelAndAddress } from "../../../AccountTile/AccountTile";
 import MultisigActionButton, { MultisigSignerState } from "./MultisigActionButton";
 import { AddressKind } from "../../../AddressTile/types";
 import AccountTileIcon from "../../../AccountTile/AccountTileIcon";

src/components/AccountTile/AccountTile.test.tsx

@@ -0,0 +1,42 @@
+import { mockImplicitAccount, mockMultisigAccount } from "../../mocks/factories";
+import { render, screen } from "../../mocks/testUtils";
+import { AccountType } from "../../types/Account";
+import accountsSlice from "../../utils/redux/slices/accountsSlice";
+import { multisigActions } from "../../utils/redux/slices/multisigsSlice";
+import store from "../../utils/redux/store";
+import { AccountTile } from "./AccountTile";
+describe("<AccountTile />", () => {
+  describe("icon and label", () => {
+    it("mnemonic account", () => {
+      const implicitAccount0 = mockImplicitAccount(0);
+      store.dispatch(accountsSlice.actions.addAccount([implicitAccount0]));
+      render(<AccountTile address={implicitAccount0.address.pkh} balance="3" />);
+      expect(screen.getByTestId("identicon")).toBeInTheDocument();
+      expect(screen.getByText("Account 0")).toBeTruthy();
+    });
+
+    it("ledger account", () => {
+      const implicitAccount0 = mockImplicitAccount(0, AccountType.LEDGER);
+      store.dispatch(accountsSlice.actions.addAccount([implicitAccount0]));
+      render(<AccountTile address={implicitAccount0.address.pkh} balance="3" />);
+      expect(screen.getByTestId("ledger-icon")).toBeInTheDocument();
+      expect(screen.getByText("Account 0 ledger")).toBeTruthy();
+    });
+
+    it("social account", () => {
+      const implicitAccount0 = mockImplicitAccount(0, AccountType.SOCIAL);
+      store.dispatch(accountsSlice.actions.addAccount([implicitAccount0]));
+      render(<AccountTile address={implicitAccount0.address.pkh} balance="3" />);
+      expect(screen.getByTestId("social-icon")).toBeInTheDocument();
+      expect(screen.getByText("google Account 0")).toBeTruthy();
+    });
+
+    it("multisig account", () => {
+      const multisig = mockMultisigAccount(0);
+      store.dispatch(multisigActions.setMultisigs([multisig]));
+      render(<AccountTile address={multisig.address.pkh} balance="3" />);
+      expect(screen.getByTestId("key-icon")).toBeInTheDocument();
+      expect(screen.getByText("label")).toBeTruthy();
+    });
+  });
+});

src/components/AccountTile/AccountTileDisplay.tsx → src/components/AccountTile/AccountTile.tsx

@@ -1,19 +1,11 @@
 import { Box, Flex, FlexProps, Heading, Text } from "@chakra-ui/layout";
 import React from "react";
 import colors from "../../style/colors";
-import { AccountType } from "../../types/Account";
 import { formatPkh } from "../../utils/formatPkh";
-import { getIcon } from "./getIcon";
 import { prettyTezAmount } from "../../utils/format";
-
-export type Props = {
-  label: string;
-  address: string;
-  balance: string | undefined;
-  onClick?: React.MouseEventHandler<HTMLDivElement>;
-  selected?: boolean;
-  kind: AccountType;
-};
+import useAddressKind from "../AddressTile/useAddressKind";
+import { RawPkh, parsePkh } from "../../types/Address";
+import AccountTileIcon from "./AccountTileIcon";
 
 export const AccountTileBase: React.FC<
   {
@@ -58,16 +50,14 @@ export const LabelAndAddress: React.FC<{ label: string | null; pkh: string }> =
   );
 };
 
-export const AccountTileDisplay: React.FC<Props> = ({
-  selected,
-  onClick,
-  address,
-  balance,
-  label,
-  kind,
-}) => {
+export const AccountTile: React.FC<{
+  address: RawPkh;
+  balance: string | undefined;
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  selected?: boolean;
+}> = ({ selected, onClick, address, balance }) => {
   const border = onClick ? `1px solid ${selected ? colors.orangeL : colors.gray[700]}` : undefined;
-
+  const addressKind = useAddressKind(parsePkh(address));
   return (
     <AccountTileBase
       data-testid={`account-tile-${address}` + (selected ? "-selected" : "")}
@@ -78,8 +68,8 @@ export const AccountTileDisplay: React.FC<Props> = ({
       _hover={{
         border,
       }}
-      icon={getIcon(kind, address)}
-      leftElement={<LabelAndAddress pkh={address} label={label} />}
+      icon={<AccountTileIcon addressKind={addressKind} />}
+      leftElement={<LabelAndAddress pkh={address} label={addressKind.label} />}
       rightElement={
         balance && (
           <Heading mb={4} alignSelf="flex-end" size="lg">

src/style/theme.ts

@@ -83,7 +83,7 @@ const theme = extendTheme({
     FormLabel: {
       baseStyle: {
         fontWeight: "600",
-        marginBottom: "4px",
+        marginBottom: "12px",
         size: "md",
       },
       sizes,

src/views/home/AccountsList.tsx

@@ -26,7 +26,7 @@ import { deriveAccount } from "../../utils/redux/thunks/restoreMnemonicAccounts"
 import AccountPopover from "./AccountPopover";
 import DeriveAccountDisplay from "./DeriveAccountDisplay.tsx";
 import { FormPage } from "../../components/SendFlow/MultisigAccount/FormPage";
-import { AccountTileDisplay } from "../../components/AccountTile/AccountTileDisplay";
+import { AccountTile } from "../../components/AccountTile/AccountTile";
 import colors from "../../style/colors";
 
 export const AccountListHeader = () => {
@@ -71,13 +71,11 @@ const AccountGroup: React.FC<{
 
       {accounts.map(account => {
         return (
-          <AccountTileDisplay
-            kind={account.type}
+          <AccountTile
             selected={account.address.pkh === selected}
             onClick={_ => onSelect(account.address.pkh)}
             key={account.address.pkh}
             address={account.address.pkh}
-            label={account.label}
             balance={balances[account.address.pkh]}
           />
         );