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", 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/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/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/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/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 && } -
+
; @@ -46,13 +46,14 @@ export const AssetsPanel: React.FC<{ Tokens - + + + {isMultisig && ( diff --git a/src/components/CSVFileUploader/index.tsx b/src/components/CSVFileUploader/index.tsx index 77f0d674f7..7236bab59e 100644 --- a/src/components/CSVFileUploader/index.tsx +++ b/src/components/CSVFileUploader/index.tsx @@ -1,22 +1,18 @@ -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/components/ClickableCard.tsx b/src/components/ClickableCard.tsx index a7653fcb50..c960962a98 100644 --- a/src/components/ClickableCard.tsx +++ b/src/components/ClickableCard.tsx @@ -1,34 +1,30 @@ -import { Card, CardBody, Flex, Heading, LayoutProps } from "@chakra-ui/react"; -import { useState } from "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 }) => { - //TODO: Remove hooks for hover. CSS _hover doesn't work. - const [mouseHover, setMouseHover] = useState(false); +const ClickableCard: React.FC< + { + onClick?: () => void; + children: React.ReactNode; + isSelected: boolean; + } & CardProps +> = ({ onClick, children, isSelected, ...props }) => { return ( { - setMouseHover(true); - }} - onMouseLeave={() => { - setMouseHover(false); - }} + borderColor={isSelected ? ` ${colors.orangeL}` : "transparent"} + _hover={{ border: `1px solid ${colors.gray[500]}`, bg: colors.gray[800] }} + justifyContent="center" cursor={onClick ? "pointer" : undefined} - h={h} + onClick={onClick} + {...props} > - {children} + {children} ); }; @@ -37,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} @@ -52,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/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..0ce39c77ca 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"; @@ -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 = () => {}, @@ -52,22 +54,3 @@ export const IconAndTextBtn: React.FC = ({ ); }; - -export const IconAndTextBtnLink: React.FC = ({ href, ...props }) => { - return ( - - - - ); -}; diff --git a/src/components/Offboarding/OffboardingForm.tsx b/src/components/Offboarding/OffboardingForm.tsx index 08a950b3d5..a4eee828da 100644 --- a/src/components/Offboarding/OffboardingForm.tsx +++ b/src/components/Offboarding/OffboardingForm.tsx @@ -10,6 +10,7 @@ import { Input, Checkbox, Divider, + Heading, } from "@chakra-ui/react"; import { FormProvider, useForm } from "react-hook-form"; import WarningIcon from "../../assets/icons/Warning"; @@ -44,10 +45,10 @@ const OffboardingForm = () => {
- + - Off-board Wallet + Off-board Wallet @@ -60,7 +61,7 @@ const OffboardingForm = () => { that you keep the recovery phrase. - + @@ -69,12 +70,12 @@ const OffboardingForm = () => { - + confirmationCode === CONFIRMATION_CODE || "Confirmation code does not match", })} @@ -87,7 +88,7 @@ const OffboardingForm = () => { - + - + {!isSmallSize && ( + + + + )} 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); diff --git a/src/style/theme/button.ts b/src/style/theme/button.ts index 6cb9a96bf5..e410e0d941 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, @@ -95,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/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/utils/beacon/BeaconPeers.tsx b/src/utils/beacon/BeaconPeers.tsx index efd22ff172..897a315878 100644 --- a/src/utils/beacon/BeaconPeers.tsx +++ b/src/utils/beacon/BeaconPeers.tsx @@ -1,48 +1,47 @@ import { AspectRatio, + Box, + Center, + Divider, Flex, + Heading, IconButton, Image, - Table, - TableContainer, - Tbody, - Td, Text, - Th, - Thead, - Tr, } from "@chakra-ui/react"; import { usePeers, useRemovePeer } from "./beacon"; import { PeerInfo } from "./types"; import Trash from "../../assets/icons/Trash"; +import { Fragment } from "react"; +import colors from "../../style/colors"; const PeerRow = ({ peerInfo, onRemove }: { peerInfo: PeerInfo; onRemove: () => void }) => { return ( - - - - - - - + + + + + +
+ {peerInfo.name} + + + + {peerInfo.relayServer} - - - - - {peerInfo.relayServer} - - - +
+ +
} /> - - +
+ ); }; @@ -54,26 +53,14 @@ export const PeersDisplay = ({ removePeer: (peer: PeerInfo) => void; }) => { return ( - - - - - - - - - - - {peerInfos.map(peerInfo => ( - removePeer(peerInfo)} - /> - ))} - -
Name:Relay server:Delete:
- + + {peerInfos.map(peerInfo => ( + + + removePeer(peerInfo)} /> + + ))} + ); }; diff --git a/src/views/addressBook/AddressBookView.tsx b/src/views/addressBook/AddressBookView.tsx index 365f632ab9..62a8cd006f 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={} - /> - - + ); }; @@ -39,7 +35,9 @@ export default function AddressBookView() { - + + + ); 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..468008ccca 100644 --- a/src/views/batch/BatchPage.tsx +++ b/src/views/batch/BatchPage.tsx @@ -1,39 +1,34 @@ -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 => { +export const FilterController = ({ batchPending }: { batchPending: number }) => { return ( - + - {props.batchPending} Pending + {batchPending} Pending - { - navigateToExternalLink( - "https://github.com/trilitech/umami-v2/blob/main/doc/Batch-File-Format-Specifications.md" - ); - }} - /> + + + ); }; @@ -41,8 +36,6 @@ export const FilterController: React.FC<{ batchPending: number }> = props => { const BatchPage = () => { const batches = useBatches(); - const { openWith } = useContext(DynamicModalContext); - return ( @@ -53,17 +46,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 ( - + - - - - 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/home/AccountsList.tsx b/src/views/home/AccountsList.tsx index 0eeda33766..836953c619 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,13 @@ import AddAccountIcon from "../../assets/icons/AddAccount"; export const AccountListHeader = () => { const { onOpen, modalElement } = useOnboardingModal(); return ( - - All Accounts - + + {modalElement} ); diff --git a/src/views/home/DrawerTopButtons.tsx b/src/views/home/DrawerTopButtons.tsx index 85b0817a45..4d6b4eb542 100644 --- a/src/views/home/DrawerTopButtons.tsx +++ b/src/views/home/DrawerTopButtons.tsx @@ -1,15 +1,20 @@ -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/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/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/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 + + + + - - - + - - - + - - - - + -
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} diff --git a/src/views/settings/BeaconDrawerCard.tsx b/src/views/settings/BeaconDrawerCard.tsx index b4c60d1d6f..4751a8b4e1 100644 --- a/src/views/settings/BeaconDrawerCard.tsx +++ b/src/views/settings/BeaconDrawerCard.tsx @@ -21,12 +21,13 @@ export const BeaconDrawerCard = () => { const { isOpen: isDynamicModalOpen } = useDynamicModal(); return ( <> - + @@ -56,7 +57,7 @@ const BeaconDrawerBody = () => { > Paste a peer request code - + or open a deeplink from inside the dApp... diff --git a/src/views/settings/ErrorLogsDrawerCard.tsx b/src/views/settings/ErrorLogsDrawerCard.tsx index 7a7820d3a3..4926ce9697 100644 --- a/src/views/settings/ErrorLogsDrawerCard.tsx +++ b/src/views/settings/ErrorLogsDrawerCard.tsx @@ -30,7 +30,7 @@ const ErrorLogsDrawerCard = () => { return ( <> - + {errorLog.description} - + {errorLog.timestamp} diff --git a/src/views/settings/SettingsView.tsx b/src/views/settings/SettingsView.tsx index 54433e5ab2..4d1d59f711 100644 --- a/src/views/settings/SettingsView.tsx +++ b/src/views/settings/SettingsView.tsx @@ -14,7 +14,9 @@ export default function SettingsView() { - + + + @@ -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}