From e347338948e9d43831f24443053dc1b77286b976 Mon Sep 17 00:00:00 2001 From: Tim Man Date: Tue, 14 Nov 2023 12:09:49 +0800 Subject: [PATCH 1/3] fix: disable preview from rc-image and fix the height --- src/app/screens/ordinals/ordinalImage.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/screens/ordinals/ordinalImage.tsx b/src/app/screens/ordinals/ordinalImage.tsx index a0f7b7cf1..43213e388 100644 --- a/src/app/screens/ordinals/ordinalImage.tsx +++ b/src/app/screens/ordinals/ordinalImage.tsx @@ -190,12 +190,14 @@ function OrdinalImage({ } src={src} + preview={false} /> {isNftDashboard && ( From e4b171564ab789c03457f79d32742ed7bbd45814 Mon Sep 17 00:00:00 2001 From: Tim Man Date: Tue, 14 Nov 2023 12:10:25 +0800 Subject: [PATCH 2/3] chore: fix lint and tsc errors --- src/app/hooks/useWalletReducer.ts | 15 +++-- src/app/screens/ordinalDetail/index.tsx | 69 ++++++++--------------- src/app/screens/ordinals/ordinalImage.tsx | 48 ++++++++-------- 3 files changed, 55 insertions(+), 77 deletions(-) diff --git a/src/app/hooks/useWalletReducer.ts b/src/app/hooks/useWalletReducer.ts index 7bf17b3e8..89f923452 100644 --- a/src/app/hooks/useWalletReducer.ts +++ b/src/app/hooks/useWalletReducer.ts @@ -2,16 +2,18 @@ import { getDeviceAccountIndex } from '@common/utils/ledger'; import useBtcWalletData from '@hooks/queries/useBtcWalletData'; import useStxWalletData from '@hooks/queries/useStxWalletData'; import useNetworkSelector from '@hooks/useNetwork'; -import { createWalletAccount, restoreWalletWithAccounts } from '@secretkeylabs/xverse-core/account'; -import { getBnsName } from '@secretkeylabs/xverse-core/api/stacks'; -import { decryptSeedPhraseCBC } from '@secretkeylabs/xverse-core/encryption'; import { Account, AnalyticsEvents, + createWalletAccount, + decryptSeedPhraseCBC, + getBnsName, + newWallet, + restoreWalletWithAccounts, SettingsNetwork, StacksNetwork, -} from '@secretkeylabs/xverse-core/types'; -import { newWallet, walletFromSeedPhrase } from '@secretkeylabs/xverse-core/wallet'; + walletFromSeedPhrase, +} from '@secretkeylabs/xverse-core'; import { addAccountAction, ChangeNetworkAction, @@ -170,7 +172,6 @@ const useWalletReducer = () => { ordinalsPublicKey: wallet.ordinalsPublicKey, stxAddress: wallet.stxAddress, stxPublicKey: wallet.stxPublicKey, - bnsName: wallet.bnsName, }; const hasSeed = await seedVault.hasSeed(); if (hasSeed && !masterPubKey) { @@ -230,7 +231,6 @@ const useWalletReducer = () => { ordinalsPublicKey: wallet.ordinalsPublicKey, stxAddress: wallet.stxAddress, stxPublicKey: wallet.stxPublicKey, - bnsName: wallet.bnsName, }; trackMixPanel(AnalyticsEvents.CreateNewWallet); @@ -297,7 +297,6 @@ const useWalletReducer = () => { ordinalsPublicKey: wallet.ordinalsPublicKey, stxAddress: wallet.stxAddress, stxPublicKey: wallet.stxPublicKey, - bnsName: wallet.bnsName, }; dispatch(setWalletAction(wallet)); try { diff --git a/src/app/screens/ordinalDetail/index.tsx b/src/app/screens/ordinalDetail/index.tsx index 6bf762e1a..4075a3a64 100644 --- a/src/app/screens/ordinalDetail/index.tsx +++ b/src/app/screens/ordinalDetail/index.tsx @@ -1,6 +1,4 @@ -/* eslint-disable @typescript-eslint/naming-convention */ import ArrowLeft from '@assets/img/dashboard/arrow_left.svg'; -import SquaresFour from '@assets/img/nftDashboard/squares_four.svg'; import OrdinalsIcon from '@assets/img/nftDashboard/white_ordinals_icon.svg'; import AccountHeaderComponent from '@components/accountHeader'; import AlertMessage from '@components/alertMessage'; @@ -11,6 +9,7 @@ import Separator from '@components/separator'; import SquareButton from '@components/squareButton'; import BottomTabBar from '@components/tabBar'; import TopRow from '@components/topRow'; +import WebGalleryButton from '@components/webGalleryButton'; import { useResetUserFlow } from '@hooks/useResetUserFlow'; import { ArrowRight, ArrowUp, CubeTransparent, Share } from '@phosphor-icons/react'; import OrdinalImage from '@screens/ordinals/ordinalImage'; @@ -95,31 +94,31 @@ const ExtensionOrdinalsContainer = styled.div((props) => ({ })); const OrdinalTitleText = styled.h1((props) => ({ - ...props.theme.headline_m, + ...props.theme.typography.headline_m, color: props.theme.colors.white_0, marginTop: props.theme.spacing(1), textAlign: 'center', })); const OrdinalGalleryTitleText = styled.h1((props) => ({ - ...props.theme.headline_l, - color: props.theme.colors.white['0'], + ...props.theme.typography.headline_l, + color: props.theme.colors.white_0, })); const DescriptionText = styled.h1((props) => ({ - ...props.theme.headline_l, + ...props.theme.typography.headline_l, color: props.theme.colors.white_0, fontSize: 24, marginBottom: props.theme.spacing(8), })); const NftOwnedByText = styled.h1((props) => ({ - ...props.theme.body_medium_m, - color: props.theme.colors.white['400'], + ...props.theme.typography.body_medium_m, + color: props.theme.colors.white_400, })); const OwnerAddressText = styled.h1((props) => ({ - ...props.theme.body_medium_m, + ...props.theme.typography.body_medium_m, marginLeft: props.theme.spacing(3), })); @@ -171,16 +170,9 @@ const DescriptionContainer = styled.h1((props) => ({ marginBottom: props.theme.spacing(30), })); -const WebGalleryButton = styled.button((props) => ({ - display: 'flex', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - borderRadius: props.theme.radius(1), - backgroundColor: 'transparent', - width: '100%', - marginTop: props.theme.spacing(6), -})); +const StyledWebGalleryButton = styled(WebGalleryButton)` + margintop: ${(props) => props.theme.space.s}; +`; const ViewInExplorerButton = styled.button((props) => ({ display: 'flex', @@ -198,13 +190,13 @@ const ViewInExplorerButton = styled.button((props) => ({ })); const ButtonText = styled.h1((props) => ({ - ...props.theme.body_medium_m, - color: props.theme.colors.white['400'], + ...props.theme.typography.body_medium_m, + color: props.theme.colors.white_400, })); const ButtonHiglightedText = styled.h1((props) => ({ - ...props.theme.body_medium_m, - color: props.theme.colors.white['0'], + ...props.theme.typography.body_medium_m, + color: props.theme.colors.white_0, marginLeft: props.theme.spacing(2), marginRight: props.theme.spacing(2), })); @@ -219,13 +211,6 @@ const StyledTooltip = styled(Tooltip)` } `; -const WebGalleryButtonText = styled.div((props) => ({ - ...props.theme.body_m, - fontWeight: 700, - color: props.theme.colors.white_200, - textAlign: 'center', -})); - const ButtonImage = styled.img((props) => ({ marginRight: props.theme.spacing(3), alignSelf: 'center', @@ -242,7 +227,7 @@ const Button = styled.button((props) => ({ })); const AssetDeatilButtonText = styled.div((props) => ({ - ...props.theme.body_xs, + ...props.theme.typography.body_s, fontWeight: 400, fontSize: 14, color: props.theme.colors.white_0, @@ -267,18 +252,18 @@ const OrdinalsTag = styled.div({ }); const CollectibleText = styled.h1((props) => ({ - ...props.theme.body_bold_m, + ...props.theme.typography.body_bold_m, color: props.theme.colors.white_400, textAlign: 'center', })); const GalleryCollectibleText = styled.h1((props) => ({ - ...props.theme.body_bold_l, - color: props.theme.colors.white['400'], + ...props.theme.typography.body_bold_l, + color: props.theme.colors.white_400, })); const Text = styled.h1((props) => ({ - ...props.theme.body_bold_m, + ...props.theme.typography.body_bold_m, textTransform: 'uppercase', color: props.theme.colors.white_0, fontSize: 10, @@ -299,7 +284,7 @@ const CubeTransparentIcon = styled(CubeTransparent)((props) => ({ marginRight: props.theme.spacing(8), })); const RareSatsBundleTextDescription = styled.div((props) => ({ - ...props.theme.body_m, + ...props.theme.typography.body_m, color: props.theme.colors.white_200, })); const BundleLinkContainer = styled.button((props) => ({ @@ -311,12 +296,11 @@ const BundleLinkContainer = styled.button((props) => ({ color: props.theme.colors.white_0, transition: 'background-color 0.2s ease, opacity 0.2s ease', ':hover': { - color: props.theme.colors.action.classicLight, - opacity: 0.6, + color: props.theme.colors.white_200, }, })); const BundleLinkText = styled.div((props) => ({ - ...props.theme.body_medium_m, + ...props.theme.typography.body_medium_m, marginRight: props.theme.spacing(1), })); @@ -638,12 +622,7 @@ function OrdinalDetailScreen() { {isBrc20Ordinal ? t('BRC20_INSCRIPTION') : ordinal?.collection_name || t('INSCRIPTION')} {ordinal?.number} - - <> - - {t('WEB_GALLERY')} - - + diff --git a/src/app/screens/ordinals/ordinalImage.tsx b/src/app/screens/ordinals/ordinalImage.tsx index 43213e388..c9091ea08 100644 --- a/src/app/screens/ordinals/ordinalImage.tsx +++ b/src/app/screens/ordinals/ordinalImage.tsx @@ -63,7 +63,7 @@ const OrdinalsTag = styled.div((props) => ({ })); const Text = styled.h1((props) => ({ - ...props.theme.body_bold_m, + ...props.theme.typography.body_bold_m, textTransform: 'uppercase', color: props.theme.colors.white_0, fontSize: 10, @@ -98,8 +98,8 @@ const OrdinalContentText = styled.p((props) => { fontSize = '15px'; } return { - ...props.theme.body_medium_m, - color: props.theme.colors.white[0], + ...props.theme.typography.body_medium_m, + color: props.theme.colors.white_0, fontSize, overflow: 'hidden', textAlign: 'center', @@ -149,35 +149,35 @@ function OrdinalImage({ const [brc721eImage, setBrc721eImage] = useState(undefined); const { network } = useWalletSelector(); - const fetchBrc721eMetadata = async () => { - if (!textContent) { - return; - } + useEffect(() => { + const fetchBrc721eMetadata = async () => { + if (!textContent) { + return; + } - try { - const parsedContent = JSON.parse(textContent); - const erc721Metadata = await getErc721Metadata( - network.type, - parsedContent.contract, - parsedContent.token_id, - ); + try { + const parsedContent = JSON.parse(textContent); + const erc721Metadata = await getErc721Metadata( + network.type, + parsedContent.contract, + parsedContent.token_id, + ); - const url = getFetchableUrl(erc721Metadata, 'ipfs'); + const url = getFetchableUrl(erc721Metadata, 'ipfs'); - if (url) { - const ipfsMetadata = await (await fetch(url)).json(); - setBrc721eImage(getFetchableUrl(ipfsMetadata.image, 'ipfs')); + if (url) { + const ipfsMetadata = await (await fetch(url)).json(); + setBrc721eImage(getFetchableUrl(ipfsMetadata.image, 'ipfs')); + } + } catch (e) { + console.error(e); // eslint-disable-line no-console } - } catch (e) { - console.error(e); - } - }; + }; - useEffect(() => { if (textContent?.includes('brc-721e')) { fetchBrc721eMetadata(); } - }, [textContent]); + }, [textContent, network.type]); let loaderSize = 151; if (inNftDetail && isGalleryOpen) { From c59d8b3b3afb7ce59dd0dcd6dd3bead5d65a7a00 Mon Sep 17 00:00:00 2001 From: Tim Man Date: Tue, 14 Nov 2023 12:18:08 +0800 Subject: [PATCH 3/3] fix: column gap of details were not centered properly --- src/app/screens/ordinalDetail/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/screens/ordinalDetail/index.tsx b/src/app/screens/ordinalDetail/index.tsx index 4075a3a64..53a5279f8 100644 --- a/src/app/screens/ordinalDetail/index.tsx +++ b/src/app/screens/ordinalDetail/index.tsx @@ -325,6 +325,7 @@ const DetailSection = styled.div((props) => ({ display: 'flex', flexDirection: !props.isGallery ? 'row' : 'column', justifyContent: 'space-between', + columnGap: props.theme.space.m, width: '100%', }));