Add account tile to mobile header

trilitech · Aug 29, 2024 · fe6eebb · fe6eebb
1 parent 772df39
commit fe6eebb
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 13 deletions.
diff --git a/apps/web/src/components/AccountCard/AccountCard.tsx b/apps/web/src/components/AccountCard/AccountCard.tsx
@@ -25,6 +25,7 @@ export const AccountCard = () => {
       <AccountTile
         background={color("50")}
         account={currentAccount}
+        id="account-tile"
         onClick={() => openWith(<AccountSelectorModal />)}
       >
         <IconButton

diff --git a/apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx b/apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx
@@ -66,6 +66,7 @@ export const AccountSelectorModal = () => {
                     aria-label="actions"
                     icon={<ThreeDotsIcon />}
                     size="xs"
+                    variant="ghost"
                   />
                 </Center>
                 {accounts.map(account => {

diff --git a/apps/web/src/components/AccountSelectorModal/AccountSelectorPopover.tsx b/apps/web/src/components/AccountSelectorModal/AccountSelectorPopover.tsx
@@ -99,6 +99,7 @@ export const AccountSelectorPopover = ({ account }: AccountSelectorPopoverProps)
         icon={<ThreeDotsIcon />}
         onClick={event => event.stopPropagation()}
         size="xs"
+        variant="ghost"
       />
     </ActionsDropdown>
   );

diff --git a/apps/web/src/components/AccountTile/AccountTile.tsx b/apps/web/src/components/AccountTile/AccountTile.tsx
@@ -10,32 +10,47 @@ import { CopyAddressButton } from "../CopyAddressButton";
 export const AccountTile = ({
   account,
   children,
+  size = "sm",
   ...props
-}: PropsWithChildren<{ account: ImplicitAccount }> & FlexProps) => {
+}: PropsWithChildren<{ account: ImplicitAccount; size?: "xs" | "sm" }> & FlexProps) => {
   const color = useColor();
   const address = account.address.pkh;
 
+  const sizes = {
+    xs: 20,
+    sm: 30,
+  };
+
+  const isSmall = size === "xs";
+  const copyButtonStyles = isSmall
+    ? {
+        padding: 0,
+        left: 0,
+      }
+    : {};
+
   return (
     <Flex
-      gap="10px"
-      paddingLeft="12px"
+      gap={isSmall ? "6px" : "10px"}
+      padding={isSmall ? "6px 12px 6px 6px" : "12px 0 12px 16px"}
       borderRadius="full"
       _hover={{ background: color("100") }}
       cursor={props.onClick ? "pointer" : undefined}
       data-testid="account-tile"
-      paddingY="12px"
       {...props}
     >
-      <AccountTileWrapper>
-        <AccountTileIcon account={account} />
+      <AccountTileWrapper size={size}>
+        <AccountTileIcon account={account} size={sizes[size]} />
       </AccountTileWrapper>
 
-      <Flex justifyContent="space-between" width="100%" marginRight="20px">
+      <Flex justifyContent="space-between" width="100%" marginRight={isSmall ? 0 : "20px"}>
         <Flex justifyContent="center" flexDirection="column" gap="2px">
-          <Heading color={color("900")} size="sm">
-            {account.label}
-          </Heading>
-          <CopyAddressButton address={address} />
+          {!isSmall && (
+            <Heading color={color("900")} size="sm">
+              {account.label}
+            </Heading>
+          )}
+          <CopyAddressButton address={address} isCopyDisabled={isSmall} {...copyButtonStyles} />
         </Flex>
 
         {children}

diff --git a/apps/web/src/components/Header/Header.tsx b/apps/web/src/components/Header/Header.tsx
@@ -1,11 +1,23 @@
-import { Card, Icon, useBreakpointValue, useColorMode } from "@chakra-ui/react";
+import { Card, Icon, SlideFade, useBreakpointValue, useColorMode } from "@chakra-ui/react";
 import { mode } from "@chakra-ui/theme-tools";
+import { useDynamicModalContext } from "@umami/components";
+import { useCurrentAccount } from "@umami/state";
+import { useEffect, useState } from "react";
 
 import { Actions } from "./Actions";
 import { LogoDarkIcon, LogoLightIcon } from "../../assets/icons";
+import { useColor } from "../../styles/useColor";
+import { AccountSelectorModal } from "../AccountSelectorModal";
+import { AccountTile } from "../AccountTile";
 
 export const Header = () => {
+  const color = useColor();
   const colorMode = useColorMode();
+  const currentAccount = useCurrentAccount()!;
+  const { openWith } = useDynamicModalContext();
+
+  const [isVisible, setIsVisible] = useState(false);
+
   const size = useBreakpointValue({
     base: {
       width: "42px",
@@ -17,6 +29,25 @@ export const Header = () => {
     },
   });
 
+  useEffect(() => {
+    const accountTile = document.getElementById("account-tile")!;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(!entry.isIntersecting);
+      },
+      {
+        threshold: 1,
+      }
+    );
+
+    observer.observe(accountTile);
+
+    return () => {
+      observer.unobserve(accountTile);
+    };
+  }, []);
+
   return (
     <Card
       justifyContent="space-between"
@@ -29,6 +60,14 @@ export const Header = () => {
       }}
     >
       {mode(<Icon as={LogoLightIcon} {...size} />, <Icon as={LogoDarkIcon} {...size} />)(colorMode)}
+      <SlideFade in={isVisible} offsetY="20px">
+        <AccountTile
+          background={color("100")}
+          account={currentAccount}
+          onClick={() => openWith(<AccountSelectorModal />)}
+          size="xs"
+        />
+      </SlideFade>
       <Actions />
     </Card>
   );

diff --git a/apps/web/src/components/Menu/AddressBookMenu/AddressBookMenu.tsx b/apps/web/src/components/Menu/AddressBookMenu/AddressBookMenu.tsx
@@ -80,7 +80,12 @@ const ContactItem = ({ contact }: ContactItemProps) => {
         </Center>
       </Flex>
       <ActionsDropdown actions={actions}>
-        <IconButton color={color("500")} aria-label="Remove Peer" icon={<ThreeDotsIcon />} />
+        <IconButton
+          color={color("500")}
+          aria-label="Remove Peer"
+          icon={<ThreeDotsIcon />}
+          variant="iconButtonSolid"
+        />
       </ActionsDropdown>
     </Center>
   );

diff --git a/apps/web/src/components/beacon/BeaconPeers.tsx b/apps/web/src/components/beacon/BeaconPeers.tsx
@@ -83,6 +83,7 @@ const PeerRow = ({ peerInfo }: { peerInfo: ExtendedPeerInfo }) => {
         aria-label="Remove Peer"
         icon={<TrashIcon />}
         onClick={() => removePeer(peerInfo)}
+        variant="iconButtonSolid"
       />
     </Center>
   );

diff --git a/apps/web/src/setupTests.ts b/apps/web/src/setupTests.ts
@@ -5,6 +5,17 @@ import { TextDecoder, TextEncoder } from "util";
 import { mockToast } from "@umami/state";
 import { setupJestCanvasMock } from "jest-canvas-mock";
 
+const intersectionObserverMock = () => ({
+  observe: jest.fn(),
+  unobserve: jest.fn(),
+});
+
+Object.defineProperty(global, "IntersectionObserver", {
+  writable: true,
+  configurable: true,
+  value: intersectionObserverMock,
+});
+
 const localStorageMock = () => {
   const store: { [key: string]: string } = {};