Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Page title updates #1265

Merged
merged 10 commits into from
Oct 16, 2023
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
NFT page title
tom2drum committed Oct 6, 2023
commit 11e7b3459512eb0c32e0e6f7ad17d023c48bf8eb
54 changes: 35 additions & 19 deletions ui/pages/TokenInstance.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Icon, Skeleton } from '@chakra-ui/react';
import { Box, Flex, Icon, Skeleton } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';

@@ -14,9 +14,12 @@ import * as regexp from 'lib/regexp';
import { TOKEN_INSTANCE } from 'stubs/token';
import * as tokenStubs from 'stubs/token';
import { generateListStub } from 'stubs/utils';
import AddressQrCode from 'ui/address/details/AddressQrCode';
import AccountActionsMenu from 'ui/shared/AccountActionsMenu/AccountActionsMenu';
import TextAd from 'ui/shared/ad/TextAd';
import AddressHeadingInfo from 'ui/shared/AddressHeadingInfo';
import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
import Tag from 'ui/shared/chakra/Tag';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import LinkExternal from 'ui/shared/LinkExternal';
import PageTitle from 'ui/shared/Page/PageTitle';
import Pagination from 'ui/shared/pagination/Pagination';
@@ -122,14 +125,19 @@ const TokenInstanceContent = () => {
const nftShieldIcon = tokenInstanceQuery.isPlaceholderData ?
<Skeleton boxSize={ 6 } display="inline-block" borderRadius="base" mr={ 2 } my={ 2 } verticalAlign="text-bottom"/> :
<Icon as={ nftIcon } boxSize={ 6 } mr={ 2 }/>;

const tokenTag = <Tag isLoading={ tokenInstanceQuery.isPlaceholderData }>{ tokenInstanceQuery.data?.token.type }</Tag>;

const address = {
hash: hash || '',
is_contract: true,
implementation_name: null,
watchlist_names: [],
watchlist_address_id: null,
};

const isLoading = tokenInstanceQuery.isPlaceholderData;

const appLink = (() => {
if (!tokenInstanceQuery.data?.external_app_url) {
return null;
@@ -141,20 +149,15 @@ const TokenInstanceContent = () => {
new URL('https://' + tokenInstanceQuery.data.external_app_url);

return (
<Skeleton isLoaded={ !tokenInstanceQuery.isPlaceholderData } display="inline-block" fontSize="sm" mt={ 6 }>
<span>View in app </span>
<LinkExternal href={ url.toString() }>
{ url.hostname || tokenInstanceQuery.data.external_app_url }
</LinkExternal>
</Skeleton>
<LinkExternal href={ url.toString() } variant="subtle" isLoading={ isLoading } ml={{ base: 0, lg: 'auto' }}>
{ url.hostname || tokenInstanceQuery.data.external_app_url }
</LinkExternal>
);
} catch (error) {
return (
<Box fontSize="sm" mt={ 6 }>
<LinkExternal href={ tokenInstanceQuery.data.external_app_url }>
<LinkExternal href={ tokenInstanceQuery.data.external_app_url } isLoading={ isLoading } ml={{ base: 0, lg: 'auto' }}>
View in app
</LinkExternal>
</Box>
</LinkExternal>
);
}
})();
@@ -167,6 +170,22 @@ const TokenInstanceContent = () => {
pagination = holdersQuery.pagination;
}

const titleSecondRow = (
<Flex alignItems="center" w="100%" minW={ 0 } columnGap={ 2 } rowGap={ 2 } flexWrap={{ base: 'wrap', lg: 'nowrap' }}>
<AddressEntity
address={ address }
isLoading={ isLoading }
fontFamily="heading"
fontSize="lg"
fontWeight={ 500 }
/>
{ !isLoading && tokenInstanceQuery.data && <AddressAddToWallet token={ tokenInstanceQuery.data.token } variant="button"/> }
<AddressQrCode address={ address } isLoading={ isLoading }/>
<AccountActionsMenu isLoading={ isLoading }/>
{ appLink }
</Flex>
);

return (
<>
<TextAd mb={ 6 }/>
@@ -175,19 +194,16 @@ const TokenInstanceContent = () => {
backLink={ backLink }
beforeTitle={ nftShieldIcon }
contentAfter={ tokenTag }
isLoading={ tokenInstanceQuery.isPlaceholderData }
secondRow={ titleSecondRow }
isLoading={ isLoading }
/>

<AddressHeadingInfo address={ address } token={ tokenInstanceQuery.data?.token } isLoading={ tokenInstanceQuery.isPlaceholderData }/>

{ appLink }

<TokenInstanceDetails data={ tokenInstanceQuery?.data } isLoading={ tokenInstanceQuery.isPlaceholderData } scrollRef={ scrollRef }/>
<TokenInstanceDetails data={ tokenInstanceQuery?.data } isLoading={ isLoading } scrollRef={ scrollRef }/>

{ /* should stay before tabs to scroll up with pagination */ }
<Box ref={ scrollRef }></Box>

{ tokenInstanceQuery.isPlaceholderData ? <TabsSkeleton tabs={ tabs }/> : (
{ isLoading ? <TabsSkeleton tabs={ tabs }/> : (
<RoutedTabs
tabs={ tabs }
tabListProps={ isMobile ? { mt: 8 } : { mt: 3, py: 5, marginBottom: 0 } }
47 changes: 0 additions & 47 deletions ui/shared/AddressHeadingInfo.tsx

This file was deleted.

25 changes: 21 additions & 4 deletions ui/shared/LinkExternal.tsx
Original file line number Diff line number Diff line change
@@ -16,33 +16,50 @@ const LinkExternal = ({ href, children, className, isLoading, variant }: Props)
const subtleLinkBg = useColorModeValue('gray.100', 'gray.700');

const styleProps: ChakraProps = (() => {
const commonProps = {
fontSize: 'sm',
lineHeight: 5,
display: 'inline-block',
alignItems: 'center',
};

switch (variant) {
case 'subtle': {
return {
...commonProps,
px: '10px',
py: '5px',
py: '6px',
bgColor: subtleLinkBg,
borderRadius: 'base',
};
}

default:{
return {};
return commonProps;
}
}
})();

if (isLoading) {
if (variant === 'subtle') {
return (
<Skeleton className={ className } { ...styleProps } bgColor="inherit">
{ children }
<Box boxSize={ 4 } display="inline-block"/>
</Skeleton>
);
}

return (
<Box className={ className } { ...styleProps } fontSize="sm" lineHeight={ 5 } display="inline-block" alignItems="center">
<Box className={ className } { ...styleProps }>
{ children }
<Skeleton boxSize={ 4 } verticalAlign="middle" display="inline-block"/>
</Box>
);
}

return (
<Link className={ className } { ...styleProps } fontSize="sm" lineHeight={ 5 } display="inline-block" alignItems="center" target="_blank" href={ href }>
<Link className={ className } { ...styleProps } target="_blank" href={ href }>
{ children }
<Icon as={ arrowIcon } boxSize={ 4 } verticalAlign="middle" color="gray.400"/>
</Link>
2 changes: 1 addition & 1 deletion ui/shared/NetworkExplorers.tsx
Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@ const NetworkExplorers = ({ className, type, pathParam }: Props) => {
aria-label="Verify in other explorers"
fontWeight={ 500 }
px={ 2 }
h="30px"
h="32px"
flexShrink={ 0 }
>
<Icon as={ explorerIcon } boxSize={ 5 }/>
2 changes: 1 addition & 1 deletion ui/token/TokenProjectInfo/TriggerButton.tsx
Original file line number Diff line number Diff line change
@@ -20,7 +20,7 @@ const TriggerButton = ({ isOpen, onClick }: Props, ref: React.ForwardedRef<HTMLB
aria-label="Show project info"
fontWeight={ 500 }
px={ 2 }
h="30px"
h="32px"
>
<Icon as={ rocketIcon } boxSize={ 5 } mr={ 1 }/>
<span>Info</span>
2 changes: 1 addition & 1 deletion ui/tokenInstance/TokenInstanceDetails.tsx
Original file line number Diff line number Diff line change
@@ -36,7 +36,7 @@ const TokenInstanceDetails = ({ data, scrollRef, isLoading }: Props) => {

return (
<>
<Flex alignItems="flex-start" mt={ 8 } flexDir={{ base: 'column-reverse', lg: 'row' }} columnGap={ 6 } rowGap={ 6 }>
<Flex alignItems="flex-start" flexDir={{ base: 'column-reverse', lg: 'row' }} columnGap={ 6 } rowGap={ 6 }>
<Grid
flexGrow={ 1 }
columnGap={ 8 }