From 284b1a1c045b1d395bcf299c98ded0d73a9d180b Mon Sep 17 00:00:00 2001 From: Sergey Kintsel Date: Thu, 19 Oct 2023 10:56:19 +0100 Subject: [PATCH 01/18] Remove word "last" from the update notice --- src/components/TopBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx index 19e9a219f1..063cfbb332 100644 --- a/src/components/TopBar.tsx +++ b/src/components/TopBar.tsx @@ -43,7 +43,7 @@ const UpdateButton = () => { <> {relativeTimestamp && ( - Last updated: {relativeTimestamp} ago + Updated {relativeTimestamp} ago )} Date: Thu, 19 Oct 2023 10:56:36 +0100 Subject: [PATCH 02/18] Fix button text sizes --- src/style/theme/button.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/style/theme/button.ts b/src/style/theme/button.ts index 6cb9a96bf5..3f1bc7ee77 100644 --- a/src/style/theme/button.ts +++ b/src/style/theme/button.ts @@ -2,7 +2,10 @@ import { defineStyleConfig } from "@chakra-ui/react"; import colors from "../colors"; export const buttonTheme = defineStyleConfig({ - sizes: { md: { height: "38px", minWidth: "38px" }, lg: { height: "48px", minWidth: "48px" } }, + sizes: { + md: { height: "38px", fontSize: "14px", minWidth: "38px" }, + lg: { height: "48px", fontSize: "16px", minWidth: "48px" }, + }, variants: { primary: { bg: colors.blue, From 82bf5106dfadef781bd83c6a5db11ca53dc91160 Mon Sep 17 00:00:00 2001 From: Sergey Kintsel Date: Thu, 19 Oct 2023 10:57:35 +0100 Subject: [PATCH 03/18] Fix view on Tzkt link style --- src/assets/icons/ExternalLink.tsx | 25 +++++++++++++++++++ .../AccountDrawer/AssetsPanel/AssetsPanel.tsx | 17 ++++++------- src/components/ExternalLink.tsx | 21 ++++++++++++++++ src/components/IconAndTextBtn.tsx | 21 +--------------- 4 files changed, 55 insertions(+), 29 deletions(-) create mode 100644 src/assets/icons/ExternalLink.tsx create mode 100644 src/components/ExternalLink.tsx diff --git a/src/assets/icons/ExternalLink.tsx b/src/assets/icons/ExternalLink.tsx new file mode 100644 index 0000000000..c78425a171 --- /dev/null +++ b/src/assets/icons/ExternalLink.tsx @@ -0,0 +1,25 @@ +import { Icon, IconProps } from "@chakra-ui/react"; +import colors from "../../style/colors"; + +const ExternalLinkIcon: React.FC = props => { + return ( + + + + ); +}; + +export default ExternalLinkIcon; diff --git a/src/components/AccountDrawer/AssetsPanel/AssetsPanel.tsx b/src/components/AccountDrawer/AssetsPanel/AssetsPanel.tsx index 374eee7e06..89f42ed2a5 100644 --- a/src/components/AccountDrawer/AssetsPanel/AssetsPanel.tsx +++ b/src/components/AccountDrawer/AssetsPanel/AssetsPanel.tsx @@ -1,11 +1,9 @@ import { Flex, TabList, TabPanel, TabPanels, Tabs, Text } from "@chakra-ui/react"; import React from "react"; -import { FiExternalLink } from "react-icons/fi"; import { Account, AccountType } from "../../../types/Account"; import { FA12TokenBalance, FA2TokenBalance, NFTBalance } from "../../../types/TokenBalance"; import { Delegation } from "../../../types/Delegation"; import { buildTzktAddressUrl } from "../../../utils/tzkt/helpers"; -import { IconAndTextBtnLink } from "../../IconAndTextBtn"; import SmallTab from "../../SmallTab"; import { DelegationDisplay } from "./DelegationDisplay"; import MultisigPendingAccordion from "./MultisigPendingAccordion"; @@ -17,6 +15,8 @@ import { useSelectedNetwork } from "../../../utils/hooks/networkHooks"; import { OperationTileContext } from "../../OperationTile"; import { useGetOperations } from "../../../views/operations/useGetOperations"; import colors from "../../../style/colors"; +import { ExternalLink } from "../../ExternalLink"; +import ExternalLinkIcon from "../../../assets/icons/ExternalLink"; export const AssetsPanel: React.FC<{ tokens: Array; @@ -46,13 +46,12 @@ export const AssetsPanel: React.FC<{ Tokens - + + + View on Tzkt + + + {isMultisig && ( diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx new file mode 100644 index 0000000000..0c6cfd684e --- /dev/null +++ b/src/components/ExternalLink.tsx @@ -0,0 +1,21 @@ +import { Link, LinkProps } from "@chakra-ui/react"; +import { PropsWithChildren } from "react"; + +export const ExternalLink: React.FC> = ({ + href, + children, + ...props +}) => ( + + {children} + +); diff --git a/src/components/IconAndTextBtn.tsx b/src/components/IconAndTextBtn.tsx index b80d899a34..74c43a58c4 100644 --- a/src/components/IconAndTextBtn.tsx +++ b/src/components/IconAndTextBtn.tsx @@ -1,4 +1,4 @@ -import { Flex, FlexProps, Icon, Text, Link, IconProps } from "@chakra-ui/react"; +import { Flex, FlexProps, Icon, Text, IconProps } from "@chakra-ui/react"; import React from "react"; import { IconType } from "react-icons/lib"; import colors from "../style/colors"; @@ -52,22 +52,3 @@ export const IconAndTextBtn: React.FC = ({ ); }; - -export const IconAndTextBtnLink: React.FC = ({ href, ...props }) => { - return ( - - - - ); -}; From 8709b017a3d217a1f0d30c7400724f1a41ede1fa Mon Sep 17 00:00:00 2001 From: Sergey Kintsel Date: Thu, 19 Oct 2023 10:57:50 +0100 Subject: [PATCH 04/18] Fix close drawer button style --- src/assets/icons/ExitArrow.tsx | 25 +++++++++++++++++++++++++ src/style/theme/drawer.ts | 2 +- src/views/home/DrawerTopButtons.tsx | 16 +++++++++++----- src/views/nfts/NftsView.tsx | 6 +++--- src/views/settings/BeaconDrawerCard.tsx | 1 + 5 files changed, 41 insertions(+), 9 deletions(-) create mode 100644 src/assets/icons/ExitArrow.tsx diff --git a/src/assets/icons/ExitArrow.tsx b/src/assets/icons/ExitArrow.tsx new file mode 100644 index 0000000000..51da850177 --- /dev/null +++ b/src/assets/icons/ExitArrow.tsx @@ -0,0 +1,25 @@ +import { Icon, IconProps } from "@chakra-ui/react"; +import colors from "../../style/colors"; + +const ExitArrowIcon: React.FC = props => { + return ( + + + + ); +}; + +export default ExitArrowIcon; diff --git a/src/style/theme/drawer.ts b/src/style/theme/drawer.ts index 6a9bbe464a..01a3526e3e 100644 --- a/src/style/theme/drawer.ts +++ b/src/style/theme/drawer.ts @@ -6,7 +6,7 @@ const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpe const baseStyle = definePartsStyle(props => ({ body: { - padding: "24px 30px 30px 30px", + padding: "18px 30px 30px 30px", }, dialog: { bg: colors.gray[900], diff --git a/src/views/home/DrawerTopButtons.tsx b/src/views/home/DrawerTopButtons.tsx index 85b0817a45..e15e39929f 100644 --- a/src/views/home/DrawerTopButtons.tsx +++ b/src/views/home/DrawerTopButtons.tsx @@ -1,15 +1,21 @@ -import { Flex } from "@chakra-ui/react"; +import { Button, Flex, Text } from "@chakra-ui/react"; import React from "react"; -import { BsArrowBarRight } from "react-icons/bs"; -import { IconAndTextBtn } from "../../components/IconAndTextBtn"; import colors from "../../style/colors"; +import ExitArrowIcon from "../../assets/icons/ExitArrow"; export const DrawerTopButtons: React.FC<{ onClose: () => void; }> = ({ onClose }) => { return ( - - + + ); }; + +export const CloseDrawerButton = ({ onClose }: { onClose: () => void }) => ( + +); diff --git a/src/views/nfts/NftsView.tsx b/src/views/nfts/NftsView.tsx index ce27d0c8d4..42410cf4c5 100644 --- a/src/views/nfts/NftsView.tsx +++ b/src/views/nfts/NftsView.tsx @@ -10,11 +10,10 @@ import { useAllNfts } from "../../utils/hooks/assetsHooks"; import NFTDrawerCard from "./NFTDrawerCard"; import NFTGallery from "./NFTGallery"; import { useDynamicModal } from "../../components/DynamicModal"; -import { IconAndTextBtn } from "../../components/IconAndTextBtn"; -import { BsArrowBarRight } from "react-icons/bs"; import colors from "../../style/colors"; import AddressPill from "../../components/AddressPill/AddressPill"; import { parsePkh } from "../../types/Address"; +import { CloseDrawerButton } from "../home/DrawerTopButtons"; const NFTsViewBase = () => { const nfts = useAllNfts(); @@ -79,10 +78,11 @@ const NFTsViewBase = () => { justifyContent="space-between" color={colors.gray[400]} cursor="pointer" + alignItems="center" paddingBottom="30px" > - + diff --git a/src/views/settings/BeaconDrawerCard.tsx b/src/views/settings/BeaconDrawerCard.tsx index b4c60d1d6f..dfcdfca429 100644 --- a/src/views/settings/BeaconDrawerCard.tsx +++ b/src/views/settings/BeaconDrawerCard.tsx @@ -27,6 +27,7 @@ export const BeaconDrawerCard = () => { isOpen={isOpen} placement="right" onClose={closeDrawer} + autoFocus={false} > From 7efe966954f32c7592db257f90187e3b5558f20d Mon Sep 17 00:00:00 2001 From: Sergey Kintsel Date: Thu, 19 Oct 2023 11:19:19 +0100 Subject: [PATCH 05/18] Fix NFT drawer style & double description --- src/views/nfts/NFTDrawerCard.tsx | 28 +++++----- .../nfts/drawer/AttributesAccordionItem.tsx | 22 ++++---- .../nfts/drawer/PropertiesAccordionItem.tsx | 54 +++++++++---------- src/views/nfts/drawer/TagsSection.tsx | 7 +-- 4 files changed, 54 insertions(+), 57 deletions(-) diff --git a/src/views/nfts/NFTDrawerCard.tsx b/src/views/nfts/NFTDrawerCard.tsx index a06a2a4093..8b46e96418 100644 --- a/src/views/nfts/NFTDrawerCard.tsx +++ b/src/views/nfts/NFTDrawerCard.tsx @@ -40,7 +40,7 @@ const NFTDrawerCard = ({ nft, ownerPkh }: { nft: NFTBalance; ownerPkh: RawPkh }) const accordionItemStyle = { border: "none", borderRadius: "8px", - marginBottom: "10px", + marginBottom: "20px", }; return ( @@ -82,19 +82,19 @@ const NFTDrawerCard = ({ nft, ownerPkh }: { nft: NFTBalance; ownerPkh: RawPkh }) {name && ( - + {name} )} {nft.metadata.description && ( - {nft.metadata.description} + + {nft.metadata.description} + )} - {nft.metadata.description} - - + -

- - - JSON - - - -

+ + + JSON + + + diff --git a/src/views/nfts/drawer/AttributesAccordionItem.tsx b/src/views/nfts/drawer/AttributesAccordionItem.tsx index 5874f80edd..5dc2692ee7 100644 --- a/src/views/nfts/drawer/AttributesAccordionItem.tsx +++ b/src/views/nfts/drawer/AttributesAccordionItem.tsx @@ -4,7 +4,6 @@ import { Text, AccordionItem, AccordionButton, - Box, AccordionIcon, AccordionPanel, Card, @@ -13,6 +12,7 @@ import { } from "@chakra-ui/react"; import { CSSProperties } from "react"; import { NFTBalance } from "../../../types/TokenBalance"; +import colors from "../../../style/colors"; const AttributesAccordionItem = ({ nft, style }: { nft: NFTBalance; style: CSSProperties }) => { const attributes = nft.metadata.attributes; @@ -20,24 +20,22 @@ const AttributesAccordionItem = ({ nft, style }: { nft: NFTBalance; style: CSSPr return null; } return ( - -

- - - Attributes - - - -

+ + + + Attributes + + + {attributes.map(attr => { return ( - + {/* TODO: make it display long attributes https://app.asana.com/0/0/1204721073861946/f */} - + {attr.name} {attr.value} diff --git a/src/views/nfts/drawer/PropertiesAccordionItem.tsx b/src/views/nfts/drawer/PropertiesAccordionItem.tsx index 5f465645ba..dd93915775 100644 --- a/src/views/nfts/drawer/PropertiesAccordionItem.tsx +++ b/src/views/nfts/drawer/PropertiesAccordionItem.tsx @@ -1,7 +1,6 @@ import { AccordionItem, AccordionButton, - Box, AccordionIcon, AccordionPanel, TableContainer, @@ -9,6 +8,7 @@ import { Tr, Td, Tbody, + Heading, } from "@chakra-ui/react"; import { CSSProperties } from "react"; import AddressPill from "../../../components/AddressPill/AddressPill"; @@ -18,6 +18,7 @@ import { parsePkh } from "../../../types/Address"; import { metadataUri, mimeType, royalties } from "../../../types/Token"; import { NFTBalance } from "../../../types/TokenBalance"; import { useSelectedNetwork } from "../../../utils/hooks/networkHooks"; +import colors from "../../../style/colors"; const CreatorElement = ({ nft }: { nft: NFTBalance }) => { if (!nft.metadata.creators || nft.metadata.creators.length === 0) { @@ -37,23 +38,22 @@ const PropertiesAccordionItem = ({ nft, style }: { nft: NFTBalance; style: CSSPr const network = useSelectedNetwork(); return ( - -

- - - Properties - - - -

+ + + + Properties + + + + - - - + - - - + - - - - + - - - - - + + ); }; @@ -54,26 +53,14 @@ export const PeersDisplay = ({ removePeer: (peer: PeerInfo) => void; }) => { return ( - -
Editions: @@ -70,33 +70,33 @@ const PropertiesAccordionItem = ({ nft, style }: { nft: NFTBalance; style: CSSPr data-testid="nft-editions-value" padding="16px 0 16px 5px" w="30%" - borderColor="umami.gray.700" + borderColor={colors.gray[700]} borderRightWidth="1px" > {nft.totalSupply || "?"} + Token ID: {nft.tokenId}
+
Royalties {royaltyShares.length > 1 ? " (" + royaltyShares.length + ")" : ""}: {royaltyShares.length > 0 ? totalRoyalties + "%" : "-"} + MIME type: @@ -104,14 +104,14 @@ const PropertiesAccordionItem = ({ nft, style }: { nft: NFTBalance; style: CSSPr
+
Contract: + + Metadata: @@ -119,19 +119,19 @@ const PropertiesAccordionItem = ({ nft, style }: { nft: NFTBalance; style: CSSPr
+
Creator: + License: diff --git a/src/views/nfts/drawer/TagsSection.tsx b/src/views/nfts/drawer/TagsSection.tsx index 1f01afc131..d8e3fba3d1 100644 --- a/src/views/nfts/drawer/TagsSection.tsx +++ b/src/views/nfts/drawer/TagsSection.tsx @@ -1,5 +1,6 @@ import { Wrap, WrapItem, Text } from "@chakra-ui/react"; import { NFTBalance } from "../../../types/TokenBalance"; +import colors from "../../../style/colors"; const TagsSection = ({ nft }: { nft: NFTBalance }) => { const tags = nft.metadata.tags; @@ -7,11 +8,11 @@ const TagsSection = ({ nft }: { nft: NFTBalance }) => { return null; } return ( - + {tags.map(tag => { return ( - - + + {tag} From 1c2b8dede5b50213ecd3e76983fa96a4bc3113b8 Mon Sep 17 00:00:00 2001 From: Sergey Kintsel Date: Thu, 19 Oct 2023 11:45:14 +0100 Subject: [PATCH 06/18] Fix emtpy batch description & batch topbar buttons --- src/assets/icons/FileArrowDown.tsx | 25 +++++++++ src/components/CSVFileUploader/index.tsx | 19 +++---- src/views/batch/BatchPage.test.tsx | 2 +- src/views/batch/BatchPage.tsx | 66 +++++++++++++----------- src/views/batch/BatchView.tsx | 2 +- 5 files changed, 72 insertions(+), 42 deletions(-) create mode 100644 src/assets/icons/FileArrowDown.tsx diff --git a/src/assets/icons/FileArrowDown.tsx b/src/assets/icons/FileArrowDown.tsx new file mode 100644 index 0000000000..17ce858067 --- /dev/null +++ b/src/assets/icons/FileArrowDown.tsx @@ -0,0 +1,25 @@ +import { Icon, IconProps } from "@chakra-ui/react"; +import colors from "../../style/colors"; + +const FileArrowDownIcon: React.FC = props => { + return ( + + + + ); +}; + +export default FileArrowDownIcon; diff --git a/src/components/CSVFileUploader/index.tsx b/src/components/CSVFileUploader/index.tsx index 77f0d674f7..5cdf5e8a6b 100644 --- a/src/components/CSVFileUploader/index.tsx +++ b/src/components/CSVFileUploader/index.tsx @@ -1,22 +1,19 @@ -import { HiOutlineDocumentDownload } from "react-icons/hi"; import colors from "../../style/colors"; -import { IconAndTextBtn } from "../IconAndTextBtn"; import { useContext } from "react"; import { DynamicModalContext } from "../DynamicModal"; import CSVFileUploadForm from "./CSVFileUploadForm"; +import { Button, Text } from "@chakra-ui/react"; +import FileArrowDownIcon from "../../assets/icons/FileArrowDown"; const CSVFileUploader = () => { const { openWith } = useContext(DynamicModalContext); return ( - openWith()} - /> + ); }; diff --git a/src/views/batch/BatchPage.test.tsx b/src/views/batch/BatchPage.test.tsx index 4228592804..53fa901bc5 100644 --- a/src/views/batch/BatchPage.test.tsx +++ b/src/views/batch/BatchPage.test.tsx @@ -26,7 +26,7 @@ describe("", () => { it("shows empty batch message by default", () => { render(); - expect(screen.getByText(/your batch is currently empty/i)).toBeInTheDocument(); + expect(screen.getByText(/no 'batch' to show/i)).toBeInTheDocument(); }); describe("pending", () => { diff --git a/src/views/batch/BatchPage.tsx b/src/views/batch/BatchPage.tsx index d4e10fef41..ef42a6a699 100644 --- a/src/views/batch/BatchPage.tsx +++ b/src/views/batch/BatchPage.tsx @@ -1,39 +1,32 @@ -import { Box, Flex, Heading } from "@chakra-ui/react"; +import { Box, Button, Center, Flex, Heading, Text } from "@chakra-ui/react"; import React, { useContext } from "react"; -import { TfiNewWindow } from "react-icons/tfi"; import CSVFileUploader from "../../components/CSVFileUploader"; -import { IconAndTextBtn } from "../../components/IconAndTextBtn"; import { TopBar } from "../../components/TopBar"; import colors from "../../style/colors"; -import { navigateToExternalLink } from "../../utils/helpers"; import { BatchView } from "./BatchView"; -import NoItems from "../../components/NoItems"; import { DynamicModalContext } from "../../components/DynamicModal"; import SendTezForm from "../../components/SendFlow/Tez/FormPage"; import CSVFileUploadForm from "../../components/CSVFileUploader/CSVFileUploadForm"; import { useBatches } from "../../utils/hooks/batchesHooks"; +import ExternalLinkIcon from "../../assets/icons/ExternalLink"; +import { ExternalLink } from "../../components/ExternalLink"; export const FilterController: React.FC<{ batchPending: number }> = props => { return ( - + {props.batchPending} Pending - { - navigateToExternalLink( - "https://github.com/trilitech/umami-v2/blob/main/doc/Batch-File-Format-Specifications.md" - ); - }} - /> + + + See file specs + + + ); }; @@ -41,8 +34,6 @@ export const FilterController: React.FC<{ batchPending: number }> = props => { const BatchPage = () => { const batches = useBatches(); - const { openWith } = useContext(DynamicModalContext); - return ( @@ -53,17 +44,34 @@ const BatchPage = () => { )) ) : ( - openWith()} - secondaryText="Load CSV file" - onClickSecondary={() => openWith()} - /> + )} ); }; +const EmptyBatch = () => { + const { openWith } = useContext(DynamicModalContext); + + return ( +
+ + No 'batch' to show + + There is no batch transaction to show... + + + + + + + + +
+ ); +}; + export default BatchPage; diff --git a/src/views/batch/BatchView.tsx b/src/views/batch/BatchView.tsx index 71f4d05628..32b8fe241c 100644 --- a/src/views/batch/BatchView.tsx +++ b/src/views/batch/BatchView.tsx @@ -108,7 +108,7 @@ export const BatchView: React.FC<{ const showFooter = operations.length > 9; return ( - + Date: Thu, 19 Oct 2023 17:50:18 +0100 Subject: [PATCH 07/18] Update all buttons with icons to match design --- .../AccountDrawer/AssetsPanel/AssetsPanel.tsx | 12 ++++--- src/components/CSVFileUploader/index.tsx | 7 ++-- src/components/IconAndTextBtn.tsx | 4 ++- src/components/OperationTile/Timestamp.tsx | 2 +- src/style/theme/button.ts | 10 ++++++ src/views/addressBook/AddressBookView.tsx | 34 ++++++++----------- src/views/batch/BatchPage.tsx | 16 +++++---- src/views/home/AccountsList.tsx | 18 ++++------ 8 files changed, 55 insertions(+), 48 deletions(-) diff --git a/src/components/AccountDrawer/AssetsPanel/AssetsPanel.tsx b/src/components/AccountDrawer/AssetsPanel/AssetsPanel.tsx index 89f42ed2a5..1c1b3b7e29 100644 --- a/src/components/AccountDrawer/AssetsPanel/AssetsPanel.tsx +++ b/src/components/AccountDrawer/AssetsPanel/AssetsPanel.tsx @@ -1,4 +1,4 @@ -import { Flex, TabList, TabPanel, TabPanels, Tabs, Text } from "@chakra-ui/react"; +import { Button, Flex, TabList, TabPanel, TabPanels, Tabs, Text } from "@chakra-ui/react"; import React from "react"; import { Account, AccountType } from "../../../types/Account"; import { FA12TokenBalance, FA2TokenBalance, NFTBalance } from "../../../types/TokenBalance"; @@ -47,10 +47,12 @@ export const AssetsPanel: React.FC<{ - - View on Tzkt - - + diff --git a/src/components/CSVFileUploader/index.tsx b/src/components/CSVFileUploader/index.tsx index 5cdf5e8a6b..7236bab59e 100644 --- a/src/components/CSVFileUploader/index.tsx +++ b/src/components/CSVFileUploader/index.tsx @@ -1,4 +1,3 @@ -import colors from "../../style/colors"; import { useContext } from "react"; import { DynamicModalContext } from "../DynamicModal"; import CSVFileUploadForm from "./CSVFileUploadForm"; @@ -8,11 +7,11 @@ import FileArrowDownIcon from "../../assets/icons/FileArrowDown"; const CSVFileUploader = () => { const { openWith } = useContext(DynamicModalContext); return ( - ); }; diff --git a/src/components/IconAndTextBtn.tsx b/src/components/IconAndTextBtn.tsx index 74c43a58c4..0ce39c77ca 100644 --- a/src/components/IconAndTextBtn.tsx +++ b/src/components/IconAndTextBtn.tsx @@ -14,7 +14,9 @@ type Props = { textMargin?: string; } & FlexProps; -// TODO: Replace with a proper button +/** + * @deprecated To be replaced with a proper button + */ export const IconAndTextBtn: React.FC = ({ icon, onClick = () => {}, diff --git a/src/components/OperationTile/Timestamp.tsx b/src/components/OperationTile/Timestamp.tsx index 6eace8a47d..7bf21e7fec 100644 --- a/src/components/OperationTile/Timestamp.tsx +++ b/src/components/OperationTile/Timestamp.tsx @@ -8,7 +8,7 @@ export const Timestamp: React.FC<{ timestamp: string | undefined }> = ({ timesta } const relativeTimestamp = formatRelative(new Date(timestamp as string), new Date()); return ( - + {relativeTimestamp} ); diff --git a/src/style/theme/button.ts b/src/style/theme/button.ts index 3f1bc7ee77..e410e0d941 100644 --- a/src/style/theme/button.ts +++ b/src/style/theme/button.ts @@ -98,6 +98,16 @@ export const buttonTheme = defineStyleConfig({ color: colors.green, }, }, + CTAWithIcon: { + padding: "8px 7px", + color: colors.gray[300], + _hover: { + color: colors.green, + }, + _disabled: { + color: colors.gray[450], + }, + }, }, defaultProps: { variant: "primary", diff --git a/src/views/addressBook/AddressBookView.tsx b/src/views/addressBook/AddressBookView.tsx index 365f632ab9..6b412c76f1 100644 --- a/src/views/addressBook/AddressBookView.tsx +++ b/src/views/addressBook/AddressBookView.tsx @@ -1,6 +1,5 @@ -import { Flex, IconButton, Text } from "@chakra-ui/react"; +import { Button, Flex, Text } from "@chakra-ui/react"; import { TopBar } from "../../components/TopBar"; -import colors from "../../style/colors"; import ContactTable from "./ContactTable"; import { useAllSortedContacts } from "../../utils/hooks/contactsHooks"; import { UpsertContactModal } from "../../components/ContactModal"; @@ -11,25 +10,22 @@ import AddContactIcon from "../../assets/icons/AddContact"; const AddContact: React.FC = () => { const { openWith } = useContext(DynamicModalContext); return ( - - - openWith() - } - icon={} - /> - - + ); }; diff --git a/src/views/batch/BatchPage.tsx b/src/views/batch/BatchPage.tsx index ef42a6a699..468008ccca 100644 --- a/src/views/batch/BatchPage.tsx +++ b/src/views/batch/BatchPage.tsx @@ -11,21 +11,23 @@ import { useBatches } from "../../utils/hooks/batchesHooks"; import ExternalLinkIcon from "../../assets/icons/ExternalLink"; import { ExternalLink } from "../../components/ExternalLink"; -export const FilterController: React.FC<{ batchPending: number }> = props => { +export const FilterController = ({ batchPending }: { batchPending: number }) => { return ( - {props.batchPending} Pending + {batchPending} Pending - - See file specs - - + ); diff --git a/src/views/home/AccountsList.tsx b/src/views/home/AccountsList.tsx index 0eeda33766..a17f0a85bf 100644 --- a/src/views/home/AccountsList.tsx +++ b/src/views/home/AccountsList.tsx @@ -12,7 +12,6 @@ import { compact, groupBy } from "lodash"; import { useContext } from "react"; import KeyIcon from "../../assets/icons/Key"; import { DynamicModalContext } from "../../components/DynamicModal"; -import { IconAndTextBtn } from "../../components/IconAndTextBtn"; import NestedScroll from "../../components/NestedScroll"; import { useOnboardingModal } from "../../components/Onboarding/useOnboardingModal"; import { AccountType, Account } from "../../types/Account"; @@ -35,17 +34,14 @@ import AddAccountIcon from "../../assets/icons/AddAccount"; export const AccountListHeader = () => { const { onOpen, modalElement } = useOnboardingModal(); return ( - + All Accounts - + {modalElement} ); From 61ef8932a3811952356834d00a5ccf9ab6148f1d Mon Sep 17 00:00:00 2001 From: Sergey Kintsel Date: Thu, 19 Oct 2023 18:04:40 +0100 Subject: [PATCH 08/18] Hide unnecessary topbar elements when window is small --- src/components/ClickableCard.tsx | 11 ----------- src/components/TopBar.tsx | 33 +++++++++++++++++++++++--------- src/mocks/matchMedia.ts | 11 +++++++++++ src/setupTests.ts | 24 ++++++++++++++++++++++- 4 files changed, 58 insertions(+), 21 deletions(-) create mode 100644 src/mocks/matchMedia.ts diff --git a/src/components/ClickableCard.tsx b/src/components/ClickableCard.tsx index a7653fcb50..e5b6ef4769 100644 --- a/src/components/ClickableCard.tsx +++ b/src/components/ClickableCard.tsx @@ -1,5 +1,4 @@ import { Card, CardBody, Flex, Heading, LayoutProps } from "@chakra-ui/react"; -import { useState } from "react"; import colors from "../style/colors"; import { ChevronRightIcon } from "@chakra-ui/icons"; @@ -8,8 +7,6 @@ const ClickableCard: React.FC<{ h?: LayoutProps["h"]; children: React.ReactNode; }> = ({ onClick, h, children }) => { - //TODO: Remove hooks for hover. CSS _hover doesn't work. - const [mouseHover, setMouseHover] = useState(false); return ( { - setMouseHover(true); - }} - onMouseLeave={() => { - setMouseHover(false); - }} cursor={onClick ? "pointer" : undefined} h={h} > diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx index 063cfbb332..7fec11d4e2 100644 --- a/src/components/TopBar.tsx +++ b/src/components/TopBar.tsx @@ -1,4 +1,13 @@ -import { Box, Button, Divider, Flex, Heading, IconButton, Text } from "@chakra-ui/react"; +import { + Box, + Button, + Divider, + Flex, + Heading, + IconButton, + Text, + useMediaQuery, +} from "@chakra-ui/react"; import { formatDistance } from "date-fns"; import React, { useContext, useEffect, useState } from "react"; import FetchingIcon from "../assets/icons/Fetching"; @@ -18,6 +27,8 @@ const formatRelativeTimestamp = (timestamp: string) => { }; const UpdateButton = () => { + const [isSmallSize] = useMediaQuery("(max-width: 1200px)"); + const dispatch = useAppDispatch(); const isLoading = useIsLoading(); const lastTimeUpdated = useLastTimeUpdated(); @@ -41,7 +52,7 @@ const UpdateButton = () => { return ( <> - {relativeTimestamp && ( + {relativeTimestamp && !isSmallSize && ( Updated {relativeTimestamp} ago @@ -62,19 +73,23 @@ const UpdateButton = () => { export const TopBar: React.FC<{ title: string }> = ({ title }) => { const { openWith } = useContext(DynamicModalContext); + const [isSmallSize] = useMediaQuery("(max-width: 1200px)"); + return ( {title} - - - + {!isSmallSize && ( + + + + )} diff --git a/src/mocks/matchMedia.ts b/src/mocks/matchMedia.ts new file mode 100644 index 0000000000..65e4904943 --- /dev/null +++ b/src/mocks/matchMedia.ts @@ -0,0 +1,11 @@ +Object.defineProperty(window, "matchMedia", { + writable: true, + value: jest.fn().mockImplementation(query => ({ + matches: false, + media: query, + onchange: null, + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), +}); diff --git a/src/setupTests.ts b/src/setupTests.ts index 80be485e79..ad18d1a318 100644 --- a/src/setupTests.ts +++ b/src/setupTests.ts @@ -47,7 +47,29 @@ jest.mock("react-identicons", () => { }); // Add missing browser APIs -Object.assign(window, { TextDecoder, TextEncoder, crypto: webcrypto, scrollTo: jest.fn() }); +Object.assign(window, { + TextDecoder, + TextEncoder, + crypto: webcrypto, + scrollTo: jest.fn(), +}); + +beforeEach(() => { + // taken from https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom + Object.defineProperty(window, "matchMedia", { + writable: true, + value: jest.fn().mockImplementation(query => ({ + matches: false, + media: query, + onchange: null, + addListener: jest.fn(), // deprecated + removeListener: jest.fn(), // deprecated + addEventListener: jest.fn(), + removeEventListener: jest.fn(), + dispatchEvent: jest.fn(), + })), + }); +}); const MockModal = ({ children, isOpen }: any) => { return React.createElement("div", { "data-testid": "mock-modal" }, isOpen ? children : null); From 451972eee65f6ec439d36a6db9b8ce33dd8ed0d9 Mon Sep 17 00:00:00 2001 From: Sergey Kintsel Date: Sat, 21 Oct 2023 11:35:27 +0100 Subject: [PATCH 09/18] Fix Add contact button hover area --- src/mocks/matchMedia.ts | 11 ----------- src/views/addressBook/AddressBookView.tsx | 4 +++- 2 files changed, 3 insertions(+), 12 deletions(-) delete mode 100644 src/mocks/matchMedia.ts diff --git a/src/mocks/matchMedia.ts b/src/mocks/matchMedia.ts deleted file mode 100644 index 65e4904943..0000000000 --- a/src/mocks/matchMedia.ts +++ /dev/null @@ -1,11 +0,0 @@ -Object.defineProperty(window, "matchMedia", { - writable: true, - value: jest.fn().mockImplementation(query => ({ - matches: false, - media: query, - onchange: null, - addEventListener: jest.fn(), - removeEventListener: jest.fn(), - dispatchEvent: jest.fn(), - })), -}); diff --git a/src/views/addressBook/AddressBookView.tsx b/src/views/addressBook/AddressBookView.tsx index 6b412c76f1..62a8cd006f 100644 --- a/src/views/addressBook/AddressBookView.tsx +++ b/src/views/addressBook/AddressBookView.tsx @@ -35,7 +35,9 @@ export default function AddressBookView() { - + + + ); From 33b5d689cdfe09f8210dcf7452e605fa4e3d2c5a Mon Sep 17 00:00:00 2001 From: Sergey Kintsel Date: Sat, 21 Oct 2023 11:35:50 +0100 Subject: [PATCH 10/18] Add more space after balance on account drawer --- src/components/AccountDrawer/AccountDrawerDisplay.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AccountDrawer/AccountDrawerDisplay.tsx b/src/components/AccountDrawer/AccountDrawerDisplay.tsx index 5d137f33f2..4d5f392f97 100644 --- a/src/components/AccountDrawer/AccountDrawerDisplay.tsx +++ b/src/components/AccountDrawer/AccountDrawerDisplay.tsx @@ -97,7 +97,7 @@ export const AccountDrawerDisplay: React.FC = ({ {balance && } -
+
Date: Sat, 21 Oct 2023 11:36:04 +0100 Subject: [PATCH 11/18] Fix text sizes on operations page --- src/components/OperationTile/Fee.tsx | 4 +-- .../OperationTile/OperationTile.tsx | 32 +++++++++---------- .../OperationTile/OperationTypeWrapper.tsx | 2 +- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/OperationTile/Fee.tsx b/src/components/OperationTile/Fee.tsx index 255337b356..d25e5aac5e 100644 --- a/src/components/OperationTile/Fee.tsx +++ b/src/components/OperationTile/Fee.tsx @@ -38,10 +38,10 @@ export const Fee: React.FC<{ return (
- + Fee: - + {prettyTezAmount(totalFee)}
diff --git a/src/components/OperationTile/OperationTile.tsx b/src/components/OperationTile/OperationTile.tsx index 6acc296b25..e4451814e9 100644 --- a/src/components/OperationTile/OperationTile.tsx +++ b/src/components/OperationTile/OperationTile.tsx @@ -55,7 +55,7 @@ const TransactionTile: React.FC<{ operation: TransactionOperation }> = ({ operat
- + {sign} {amount} @@ -85,10 +85,10 @@ const TransactionTile: React.FC<{ operation: TransactionOperation }> = ({ operat )} - +
Transaction - +
@@ -147,10 +147,10 @@ const TokenTransferTile: React.FC<{ > - + {sign} {tokenAmount} - + {" "} {tokenNameSafe(token)} @@ -159,7 +159,7 @@ const TokenTransferTile: React.FC<{ ) : ( - + {sign} {tokenAmount} @@ -197,7 +197,7 @@ const TokenTransferTile: React.FC<{ )} -
+
Token Transfer
@@ -221,7 +221,7 @@ const ContractCallTile: React.FC<{
- Contract Call: {operation.parameter?.entrypoint} + Contract Call: {operation.parameter?.entrypoint}
@@ -249,10 +249,10 @@ const ContractCallTile: React.FC<{ )} - +
Contract Call - +
@@ -270,7 +270,7 @@ const DelegationTile: React.FC<{ operation: DelegationOperation }> = ({ operatio
- {operationType} + {operationType}
@@ -299,10 +299,10 @@ const DelegationTile: React.FC<{ operation: DelegationOperation }> = ({ operatio )} {!isDelegating && !showFromAddress && N/A} - +
{operationType} - +
@@ -325,7 +325,7 @@ const OriginationTile: React.FC<{ operation: OriginationOperation }> = ({ operat
- {contractTitle} + {contractTitle}
@@ -347,10 +347,10 @@ const OriginationTile: React.FC<{ operation: OriginationOperation }> = ({ operat )} - +
Contract Origination - +
diff --git a/src/components/OperationTile/OperationTypeWrapper.tsx b/src/components/OperationTile/OperationTypeWrapper.tsx index f84888609c..978081517f 100644 --- a/src/components/OperationTile/OperationTypeWrapper.tsx +++ b/src/components/OperationTile/OperationTypeWrapper.tsx @@ -12,7 +12,7 @@ export const OperationTypeWrapper: React.FC = ({ children }) } return ( - + {children} ); From ee070d159d11f0217bee492fbb72707000b7f9ad Mon Sep 17 00:00:00 2001 From: Sergey Kintsel Date: Sat, 21 Oct 2023 12:39:46 +0100 Subject: [PATCH 12/18] Adjust help & settings pages to design --- src/assets/icons/ChevronDown.tsx | 3 +- src/assets/icons/ChevronRight.tsx | 19 +++- src/components/ClickableCard.tsx | 50 +++++----- src/views/help/HelpView.tsx | 104 +++++++++------------ src/views/settings/BeaconDrawerCard.tsx | 2 +- src/views/settings/ErrorLogsDrawerCard.tsx | 2 +- src/views/settings/SettingsView.tsx | 21 +++-- 7 files changed, 101 insertions(+), 100 deletions(-) diff --git a/src/assets/icons/ChevronDown.tsx b/src/assets/icons/ChevronDown.tsx index b246ca8f18..b75a6b1fd5 100644 --- a/src/assets/icons/ChevronDown.tsx +++ b/src/assets/icons/ChevronDown.tsx @@ -4,17 +4,16 @@ import colors from "../../style/colors"; const ChevronDownIcon: React.FC = props => { return ( = props => ; -export default ChevronDownIcon; +const ChevronRightIcon: React.FC = props => ( + + + +); +export default ChevronRightIcon; diff --git a/src/components/ClickableCard.tsx b/src/components/ClickableCard.tsx index e5b6ef4769..c960962a98 100644 --- a/src/components/ClickableCard.tsx +++ b/src/components/ClickableCard.tsx @@ -1,23 +1,30 @@ -import { Card, CardBody, Flex, Heading, LayoutProps } from "@chakra-ui/react"; +import { Card, CardBody, CardProps, Flex, Heading } from "@chakra-ui/react"; import colors from "../style/colors"; -import { ChevronRightIcon } from "@chakra-ui/icons"; +import ChevronRightIcon from "../assets/icons/ChevronRight"; -const ClickableCard: React.FC<{ - onClick?: () => void; - h?: LayoutProps["h"]; - children: React.ReactNode; -}> = ({ onClick, h, children }) => { +const ClickableCard: React.FC< + { + onClick?: () => void; + children: React.ReactNode; + isSelected: boolean; + } & CardProps +> = ({ onClick, children, isSelected, ...props }) => { return ( - {children} + {children} ); }; @@ -26,9 +33,10 @@ export const SettingsCard: React.FC<{ left: string; onClick?: () => void; children: React.ReactNode; -}> = ({ left, onClick, children }) => { + isSelected: boolean; +}> = ({ left, onClick, isSelected, children }) => { return ( - + {left} @@ -41,20 +49,12 @@ export const SettingsCard: React.FC<{ export const SettingsCardWithDrawerIcon: React.FC<{ left: string; + isSelected: boolean; onClick?: () => void; -}> = ({ left, onClick }) => { +}> = ({ left, isSelected, onClick }) => { return ( - - + + ); }; diff --git a/src/views/help/HelpView.tsx b/src/views/help/HelpView.tsx index 451d459549..84d3538fb2 100644 --- a/src/views/help/HelpView.tsx +++ b/src/views/help/HelpView.tsx @@ -1,11 +1,11 @@ import { Flex, Grid, GridItem } from "@chakra-ui/layout"; -import { Box, Text, Divider, Heading, Icon } from "@chakra-ui/react"; -import { FiExternalLink } from "react-icons/fi"; +import { Box, Text, Heading, Center } from "@chakra-ui/react"; import React from "react"; import { TopBar } from "../../components/TopBar"; import colors from "../../style/colors"; -import ClickableCard from "../../components/ClickableCard"; +import ClickableCard, { SettingsCard } from "../../components/ClickableCard"; import { navigateToExternalLink } from "../../utils/helpers"; +import ExternalLinkIcon from "../../assets/icons/ExternalLink"; export default function HelpView() { return ( @@ -52,50 +52,39 @@ export default function HelpView() { /> - - - - Contact our Support Team - navigateToExternalLink("mailto:umami-support@trili.tech")} - > - umami-support@trili.tech - - - - - - - - - - Get in touch with the Community - - - navigateToExternalLink( - "https://join.slack.com/t/tezos-dev/shared_invite/zt-1ur1ymxrp-G_X_bFHrvWXwoeiy53J8lg" - ) - } - > - Slack #Umami - - - - - + + + Need Help? + + navigateToExternalLink("mailto:umami-support@trili.tech")} + isSelected={false} + > +
+ + umami-support@trili.tech + + +
+ + + navigateToExternalLink( + "https://join.slack.com/t/tezos-dev/shared_invite/zt-1ur1ymxrp-G_X_bFHrvWXwoeiy53J8lg" + ) + } + > +
+ + Slack #Umami + + +
+ + )} - + ); @@ -159,11 +139,15 @@ const HelpCard: React.FC<{ children: React.ReactNode; }> = ({ title, onClick, children }) => { return ( - + - {title} - {children} + + {title} + + + {children} + diff --git a/src/views/settings/BeaconDrawerCard.tsx b/src/views/settings/BeaconDrawerCard.tsx index dfcdfca429..e2453756d3 100644 --- a/src/views/settings/BeaconDrawerCard.tsx +++ b/src/views/settings/BeaconDrawerCard.tsx @@ -21,7 +21,7 @@ export const BeaconDrawerCard = () => { const { isOpen: isDynamicModalOpen } = useDynamicModal(); return ( <> - + { return ( <> - + - + + + @@ -36,10 +38,8 @@ const GeneralSection = () => { */} - - - - + + @@ -129,8 +129,13 @@ const AdvancedSection = () => { TODO: implement this {}} /> */} - + openWith()} /> @@ -144,10 +149,10 @@ const SectionContainer: React.FC<{ children: React.ReactNode; }> = ({ title, children }) => { return ( - + - + {title} {children} From b669c194bdce3a3bc69680a66f18be74106ba87b Mon Sep 17 00:00:00 2001 From: Sergey Kintsel Date: Mon, 23 Oct 2023 12:18:49 +0100 Subject: [PATCH 13/18] Remove All accounts subtitle from the accounts page --- src/views/home/AccountsList.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/views/home/AccountsList.tsx b/src/views/home/AccountsList.tsx index a17f0a85bf..836953c619 100644 --- a/src/views/home/AccountsList.tsx +++ b/src/views/home/AccountsList.tsx @@ -34,8 +34,7 @@ import AddAccountIcon from "../../assets/icons/AddAccount"; export const AccountListHeader = () => { const { onOpen, modalElement } = useOnboardingModal(); return ( - - All Accounts +
- - - - - + + + + + +
+ {peerInfo.name} + + + + {peerInfo.relayServer} - -
- - {peerInfo.relayServer} - - + + +
} /> -
- - - - - - - - - {peerInfos.map(peerInfo => ( - removePeer(peerInfo)} - /> - ))} - -
Name:Relay server:Delete:
- + + {peerInfos.map(peerInfo => ( + + + removePeer(peerInfo)} /> + + ))} + ); }; diff --git a/src/views/home/DrawerTopButtons.tsx b/src/views/home/DrawerTopButtons.tsx index e15e39929f..4d6b4eb542 100644 --- a/src/views/home/DrawerTopButtons.tsx +++ b/src/views/home/DrawerTopButtons.tsx @@ -1,6 +1,5 @@ import { Button, Flex, Text } from "@chakra-ui/react"; import React from "react"; -import colors from "../../style/colors"; import ExitArrowIcon from "../../assets/icons/ExitArrow"; export const DrawerTopButtons: React.FC<{ diff --git a/src/views/settings/BeaconDrawerCard.tsx b/src/views/settings/BeaconDrawerCard.tsx index e2453756d3..4751a8b4e1 100644 --- a/src/views/settings/BeaconDrawerCard.tsx +++ b/src/views/settings/BeaconDrawerCard.tsx @@ -57,7 +57,7 @@ const BeaconDrawerBody = () => { > Paste a peer request code - + or open a deeplink from inside the dApp... From 49f0ad12db948b490483b73177487536878bb18d Mon Sep 17 00:00:00 2001 From: Sergey Kintsel Date: Mon, 23 Oct 2023 15:20:52 +0100 Subject: [PATCH 16/18] Remove gap between amount and sign for token transfer tiles --- src/components/OperationTile/OperationTile.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/OperationTile/OperationTile.tsx b/src/components/OperationTile/OperationTile.tsx index e4451814e9..4fdf3d2d93 100644 --- a/src/components/OperationTile/OperationTile.tsx +++ b/src/components/OperationTile/OperationTile.tsx @@ -148,7 +148,8 @@ const TokenTransferTile: React.FC<{ - {sign} {tokenAmount} + {sign} + {tokenAmount} {" "} @@ -160,7 +161,8 @@ const TokenTransferTile: React.FC<{ ) : ( - {sign} {tokenAmount} + {sign} + {tokenAmount} ); From 44f2c422e7c77007120e0004b47996fc7972f8dd Mon Sep 17 00:00:00 2001 From: Sergey Kintsel Date: Tue, 24 Oct 2023 10:55:39 +0100 Subject: [PATCH 17/18] More visible colour for timestamps on Errors drawer --- src/views/settings/ErrorLogsDrawerCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/settings/ErrorLogsDrawerCard.tsx b/src/views/settings/ErrorLogsDrawerCard.tsx index 3dcfeda59c..4926ce9697 100644 --- a/src/views/settings/ErrorLogsDrawerCard.tsx +++ b/src/views/settings/ErrorLogsDrawerCard.tsx @@ -84,7 +84,7 @@ const ErrorLogRow: React.FC<{ {errorLog.description} - + {errorLog.timestamp} From b87c0b26cf72a5f75b28fdf49b0a3e64af4b5082 Mon Sep 17 00:00:00 2001 From: Sergey Kintsel Date: Tue, 24 Oct 2023 10:58:34 +0100 Subject: [PATCH 18/18] Bump version to beta1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4f9ace1331..99bbe73de6 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "umami", "productName": "umami", - "version": "2.0.0-alpha", + "version": "2.0.0-beta1", "private": true, "author": "Trilitech ", "description": "Tezos Wallet",