Hide balance for mobile view on sign screen

trilitech · Dec 3, 2024 · 2f18904 · 2f18904
1 parent 74b0cf2
commit 2f18904
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 9 deletions.
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/SignPage.tsx b/apps/web/src/components/SendFlow/NFT/SignPage.tsx
@@ -8,6 +8,7 @@ import {
   ModalContent,
   ModalFooter,
   Text,
+  useBreakpointValue,
   VStack,
 } from "@chakra-ui/react";
 import { type EstimatedAccountOperations, type FA2Transfer, type NFTBalance } from "@umami/core";
@@ -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/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/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>