UI minor fixes (#2186)

trilitech · Dec 19, 2024 · af5badf · af5badf · github-actions · Dec 19, 2024
1 parent d78b863
commit af5badf
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 25 deletions.
diff --git a/apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx b/apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx
@@ -1,4 +1,5 @@
 import {
+  Box,
   Button,
   Center,
   Divider,
@@ -129,7 +130,7 @@ export const AccountSelectorModal = () => {
         <VStack
           overflowY="auto"
           width="100%"
-          maxHeight="400px"
+          maxHeight="430px"
           divider={<Divider _last={{ display: "none" }} />}
           spacing="18px"
         >
@@ -188,26 +189,43 @@ export const AccountSelectorModal = () => {
           ))}
 
           {/* This is a hack to toggle the shadow on the footer button*/}
-          <div ref={lastItemRef} />
+          <Box ref={lastItemRef} paddingBottom="40px" />
         </VStack>
       </ModalBody>
       <ModalFooter
-        padding="8px"
-        borderRadius="30px"
-        boxShadow={
-          showShadow
-            ? color(
-                "0px -4px 10px 0px rgba(45, 55, 72, 0.10)",
-                "0px -4px 10px 0px rgba(0, 0, 0, 0.20)"
-              )
-            : "transparent"
-        }
-        transition="box-shadow 0.2s ease-in"
+        position="relative"
+        height="23px"
+        margin="0"
+        paddingX={{ base: "32px", md: "42px" }}
       >
         {isVerified && (
-          <Button width="full" onClick={() => openWith(<OnboardOptionsModal />)} variant="primary">
-            Add Account
-          </Button>
+          <Flex
+            position="absolute"
+            top="-25px"
+            justifyContent="center"
+            width="full"
+            padding="8px"
+            background="white"
+            borderRadius="100px"
+            boxShadow={
+              showShadow
+                ? color(
+                    "0px -4px 10px 0px rgba(45, 55, 72, 0.10)",
+                    "0px -4px 10px 0px rgba(0, 0, 0, 0.20)"
+                  )
+                : "transparent"
+            }
+            transition="box-shadow 0.2s ease-in"
+            backdropFilter="blur(40px)"
+          >
+            <Button
+              width="full"
+              onClick={() => openWith(<OnboardOptionsModal />)}
+              variant="primary"
+            >
+              Add Account
+            </Button>
+          </Flex>
         )}
       </ModalFooter>
     </ModalContent>

diff --git a/apps/web/src/components/AddressTile/AddressTile.tsx b/apps/web/src/components/AddressTile/AddressTile.tsx
@@ -21,8 +21,9 @@ import { CopyAddressButton } from "../CopyAddressButton";
 export const AddressTile = ({
   size = "sm",
   address,
+  hideBalance = false,
   ...flexProps
-}: { address: Address; size?: "xs" | "sm" } & FlexProps) => {
+}: { address: Address; size?: "xs" | "sm"; hideBalance?: boolean } & FlexProps) => {
   const addressKind = useAddressKind(address);
   const color = useColor();
 
@@ -71,7 +72,9 @@ export const AddressTile = ({
               isLong={addressKind.type === "unknown"}
               variant={isSmall ? "unstyled" : "ghost"}
             />
-            <Text size="sm">{balance !== undefined && prettyTezAmount(balance)}</Text>
+            {!hideBalance && (
+              <Text size="sm">{balance !== undefined && prettyTezAmount(balance)}</Text>
+            )}
           </Flex>
         </Flex>
       </Flex>

diff --git a/apps/web/src/components/SendFlow/NFT/FormPage.test.tsx b/apps/web/src/components/SendFlow/NFT/FormPage.test.tsx
@@ -26,6 +26,11 @@ jest.mock("@umami/core", () => ({
   estimate: jest.fn(),
 }));
 
+jest.mock("@chakra-ui/react", () => ({
+  ...jest.requireActual("@chakra-ui/react"),
+  useBreakpointValue: jest.fn(),
+}));
+
 const sender = mockImplicitAccount(0);
 const nft = mockNFTBalance(1, { balance: "1" });
 

diff --git a/apps/web/src/components/SendFlow/NFT/SignPage.test.tsx b/apps/web/src/components/SendFlow/NFT/SignPage.test.tsx
@@ -11,6 +11,11 @@ import { TEZ, parseContractPkh } from "@umami/tezos";
 import { SignPage } from "./SignPage";
 import { renderInModal, screen, waitFor } from "../../../testUtils";
 
+jest.mock("@chakra-ui/react", () => ({
+  ...jest.requireActual("@chakra-ui/react"),
+  useBreakpointValue: jest.fn(),
+}));
+
 let store: UmamiStore;
 
 beforeEach(() => {

diff --git a/apps/web/src/components/SendFlow/NFT/SignPage.tsx b/apps/web/src/components/SendFlow/NFT/SignPage.tsx
@@ -9,6 +9,7 @@ import {
   ModalFooter,
   Text,
   VStack,
+  useBreakpointValue,
 } from "@chakra-ui/react";
 import { type EstimatedAccountOperations, type FA2Transfer, type NFTBalance } from "@umami/core";
 import { FormProvider } from "react-hook-form";
@@ -27,6 +28,7 @@ export const SignPage = (props: { nft: NFTBalance; operations: EstimatedAccountO
   const { fee, operations, estimationFailed, isLoading, form, signer, onSign } =
     useSignPageHelpers(initialOperations);
   const color = useColor();
+  const hideBalance = useBreakpointValue({ base: true, md: false });
 
   const { recipient, amount } = operations.operations[0] as FA2Transfer;
 
@@ -52,11 +54,11 @@ export const SignPage = (props: { nft: NFTBalance; operations: EstimatedAccountO
               <Divider />
               <FormControl>
                 <FormLabel>From</FormLabel>
-                <AddressTile address={operations.sender.address} />
+                <AddressTile address={operations.sender.address} hideBalance={hideBalance} />
               </FormControl>
               <FormControl>
                 <FormLabel>To</FormLabel>
-                <AddressTile address={recipient} />
+                <AddressTile address={recipient} hideBalance={hideBalance} />
               </FormControl>
             </VStack>
           </ModalBody>

diff --git a/apps/web/src/components/SendFlow/Tez/FormPage.test.tsx b/apps/web/src/components/SendFlow/Tez/FormPage.test.tsx
@@ -26,6 +26,11 @@ jest.mock("@umami/core", () => ({
   estimate: jest.fn(),
 }));
 
+jest.mock("@chakra-ui/react", () => ({
+  ...jest.requireActual("@chakra-ui/react"),
+  useBreakpointValue: jest.fn(),
+}));
+
 let store: UmamiStore;
 
 beforeEach(() => {

diff --git a/apps/web/src/components/SendFlow/Tez/SignPage.test.tsx b/apps/web/src/components/SendFlow/Tez/SignPage.test.tsx
@@ -8,6 +8,11 @@ import { SignPage } from "./SignPage";
 import { render, screen, waitFor } from "../../../testUtils";
 import { type SignPageProps } from "../utils";
 
+jest.mock("@chakra-ui/react", () => ({
+  ...jest.requireActual("@chakra-ui/react"),
+  useBreakpointValue: jest.fn(),
+}));
+
 const fixture = (props: SignPageProps) => (
   <Modal isOpen={true} onClose={() => {}}>
     <SignPage {...props} />

diff --git a/apps/web/src/components/SendFlow/Tez/SignPage.tsx b/apps/web/src/components/SendFlow/Tez/SignPage.tsx
@@ -5,6 +5,7 @@ import {
   ModalBody,
   ModalContent,
   ModalFooter,
+  useBreakpointValue,
 } from "@chakra-ui/react";
 import { type TezTransfer } from "@umami/core";
 import { FormProvider } from "react-hook-form";
@@ -21,6 +22,7 @@ export const SignPage = (props: SignPageProps) => {
   const { operations: initialOperations } = props;
   const { fee, operations, estimationFailed, isLoading, form, signer, onSign } =
     useSignPageHelpers(initialOperations);
+  const hideBalance = useBreakpointValue({ base: true, md: false });
 
   const { amount: mutezAmount, recipient } = operations.operations[0] as TezTransfer;
 
@@ -39,11 +41,11 @@ export const SignPage = (props: SignPageProps) => {
             </FormControl>
             <FormControl>
               <FormLabel width="full">From</FormLabel>
-              <AddressTile address={operations.sender.address} />
+              <AddressTile address={operations.sender.address} hideBalance={hideBalance} />
             </FormControl>
             <FormControl>
               <FormLabel width="full">To</FormLabel>
-              <AddressTile address={recipient} />
+              <AddressTile address={recipient} hideBalance={hideBalance} />
             </FormControl>
             <AdvancedSettingsAccordion />
           </ModalBody>

diff --git a/apps/web/src/components/SendFlow/Token/FormPage.test.tsx b/apps/web/src/components/SendFlow/Token/FormPage.test.tsx
@@ -30,6 +30,11 @@ jest.mock("@umami/core", () => ({
   estimate: jest.fn(),
 }));
 
+jest.mock("@chakra-ui/react", () => ({
+  ...jest.requireActual("@chakra-ui/react"),
+  useBreakpointValue: jest.fn(),
+}));
+
 const mockAccount = mockMnemonicAccount(0);
 const mockTokenRaw = mockFA2TokenRaw(0, mockAccount.address.pkh);
 const mockToken = mockFA2Token(0, mockAccount);

diff --git a/apps/web/src/components/SendFlow/Token/SignPage.test.tsx b/apps/web/src/components/SendFlow/Token/SignPage.test.tsx
@@ -15,6 +15,11 @@ import { SignPage } from "./SignPage";
 import { render, screen, waitFor } from "../../../testUtils";
 import { type SignPageProps } from "../utils";
 
+jest.mock("@chakra-ui/react", () => ({
+  ...jest.requireActual("@chakra-ui/react"),
+  useBreakpointValue: jest.fn(),
+}));
+
 const fixture = (props: SignPageProps<{ token: FA12TokenBalance | FA2TokenBalance }>) => (
   <Modal isOpen={true} onClose={() => {}}>
     <SignPage {...props} />

diff --git a/apps/web/src/components/SendFlow/Token/SignPage.tsx b/apps/web/src/components/SendFlow/Token/SignPage.tsx
@@ -5,6 +5,7 @@ import {
   ModalBody,
   ModalContent,
   ModalFooter,
+  useBreakpointValue,
 } from "@chakra-ui/react";
 import { type FA12TokenBalance, type FA2TokenBalance, type TokenTransfer } from "@umami/core";
 import { FormProvider } from "react-hook-form";
@@ -24,7 +25,7 @@ export const SignPage = (props: SignPageProps<{ token: FA12TokenBalance | FA2Tok
   } = props;
   const { fee, operations, estimationFailed, isLoading, form, signer, onSign } =
     useSignPageHelpers(initialOperations);
-
+  const hideBalance = useBreakpointValue({ base: true, md: false });
   const { amount, recipient } = operations.operations[0] as TokenTransfer;
 
   return (
@@ -42,11 +43,11 @@ export const SignPage = (props: SignPageProps<{ token: FA12TokenBalance | FA2Tok
             </FormControl>
             <FormControl>
               <FormLabel width="full">From</FormLabel>
-              <AddressTile address={operations.sender.address} />
+              <AddressTile address={operations.sender.address} hideBalance={hideBalance} />
             </FormControl>
             <FormControl>
               <FormLabel width="full">To</FormLabel>
-              <AddressTile address={recipient} />
+              <AddressTile address={recipient} hideBalance={hideBalance} />
             </FormControl>
             <AdvancedSettingsAccordion />
           </ModalBody>
Title	Statements	Branches	Functions
apps/desktop	83.81% (1786/2131)	79.58% (850/1068)	78.27% (454/580)
apps/web	83.81% (1786/2131)	79.58% (850/1068)	78.27% (454/580)
packages/components	97.51% (196/201)	95.91% (94/98)	88.13% (52/59)
packages/core	82.47% (207/251)	72.72% (88/121)	81.35% (48/59)
packages/crypto	100% (43/43)	90.9% (10/11)	100% (7/7)
packages/data-polling	95.27% (141/148)	87.5% (21/24)	92.85% (39/42)
packages/multisig	98.47% (129/131)	85.71% (18/21)	100% (36/36)
packages/social-auth	100% (21/21)	100% (11/11)	100% (3/3)
packages/state	84.79% (820/967)	81.03% (188/232)	78.59% (301/383)
packages/tezos	88.72% (118/133)	94.59% (35/37)	86.84% (33/38)
packages/tzkt	87.32% (62/71)	87.5% (14/16)	80.48% (33/41)