Commit 651d9ce6 authored by tom's avatar tom

review fixes

parent 2888bbbd
...@@ -57,7 +57,6 @@ const ApiKeysPage: React.FC = () => { ...@@ -57,7 +57,6 @@ const ApiKeysPage: React.FC = () => {
if (isLoading || isError) { if (isLoading || isError) {
return ( return (
<> <>
<Skeleton height={ 6 } width="250px" borderRadius="full" marginBottom={ 12 }/>
<SkeletonTable columns={ [ '100%', '108px' ] }/> <SkeletonTable columns={ [ '100%', '108px' ] }/>
<Skeleton height="44px" width="156px" marginTop={ 8 }/> <Skeleton height="44px" width="156px" marginTop={ 8 }/>
</> </>
...@@ -67,10 +66,6 @@ const ApiKeysPage: React.FC = () => { ...@@ -67,10 +66,6 @@ const ApiKeysPage: React.FC = () => {
const canAdd = data.length < DATA_LIMIT; const canAdd = data.length < DATA_LIMIT;
return ( return (
<> <>
<Text marginBottom={ 12 }>
Create API keys to use for your RPC and EthRPC API requests. For more information, see { space }
<Link href="#">“How to use a Blockscout API key”</Link>.
</Text>
<ApiKeyTable <ApiKeyTable
data={ data } data={ data }
onDeleteClick={ onDeleteClick } onDeleteClick={ onDeleteClick }
...@@ -100,6 +95,10 @@ const ApiKeysPage: React.FC = () => { ...@@ -100,6 +95,10 @@ const ApiKeysPage: React.FC = () => {
<Page> <Page>
<Box h="100%"> <Box h="100%">
<AccountPageHeader text="API keys"/> <AccountPageHeader text="API keys"/>
<Text marginBottom={ 12 }>
Create API keys to use for your RPC and EthRPC API requests. For more information, see { space }
<Link href="#">“How to use a Blockscout API key”</Link>.
</Text>
{ content } { content }
</Box> </Box>
<ApiKeyModal { ...apiKeyModalProps } onClose={ onApiKeyModalClose } data={ apiKeyModalData }/> <ApiKeyModal { ...apiKeyModalProps } onClose={ onApiKeyModalClose } data={ apiKeyModalData }/>
......
...@@ -40,10 +40,17 @@ const PrivateAddressTags = ({ addressTags }: Props) => { ...@@ -40,10 +40,17 @@ const PrivateAddressTags = ({ addressTags }: Props) => {
deleteModalProps.onClose(); deleteModalProps.onClose();
}, [ deleteModalProps ]); }, [ deleteModalProps ]);
const description = (
<Text marginBottom={ 12 }>
Use private transaction tags to label any transactions of interest.
Private tags are saved in your account and are only visible when you are logged in.
</Text>
);
if (!addressTags) { if (!addressTags) {
return ( return (
<> <>
<Skeleton height={ 6 } width="250px" borderRadius="full" marginBottom={ 12 }/> { description }
<SkeletonTable columns={ [ '60%', '40%', '108px' ] }/> <SkeletonTable columns={ [ '60%', '40%', '108px' ] }/>
<Skeleton height="44px" width="156px" marginTop={ 8 }/> <Skeleton height="44px" width="156px" marginTop={ 8 }/>
</> </>
...@@ -52,10 +59,7 @@ const PrivateAddressTags = ({ addressTags }: Props) => { ...@@ -52,10 +59,7 @@ const PrivateAddressTags = ({ addressTags }: Props) => {
return ( return (
<> <>
<Text marginBottom={ 12 }> { description }
Use private transaction tags to label any transactions of interest.
Private tags are saved in your account and are only visible when you are logged in.
</Text>
{ Boolean(addressTags?.length) && ( { Boolean(addressTags?.length) && (
<AddressTagTable <AddressTagTable
data={ addressTags } data={ addressTags }
......
...@@ -40,10 +40,17 @@ const PrivateTransactionTags = ({ transactionTags }: Props) => { ...@@ -40,10 +40,17 @@ const PrivateTransactionTags = ({ transactionTags }: Props) => {
deleteModalProps.onClose(); deleteModalProps.onClose();
}, [ deleteModalProps ]); }, [ deleteModalProps ]);
const description = (
<Text marginBottom={ 12 }>
Use private transaction tags to label any transactions of interest.
Private tags are saved in your account and are only visible when you are logged in.
</Text>
);
if (!transactionTags) { if (!transactionTags) {
return ( return (
<> <>
<Skeleton height={ 6 } width="250px" borderRadius="full" marginBottom={ 12 }/> { description }
<SkeletonTable columns={ [ '75%', '25%', '108px' ] }/> <SkeletonTable columns={ [ '75%', '25%', '108px' ] }/>
<Skeleton height="44px" width="156px" marginTop={ 8 }/> <Skeleton height="44px" width="156px" marginTop={ 8 }/>
</> </>
...@@ -52,10 +59,7 @@ const PrivateTransactionTags = ({ transactionTags }: Props) => { ...@@ -52,10 +59,7 @@ const PrivateTransactionTags = ({ transactionTags }: Props) => {
return ( return (
<> <>
<Text marginBottom={ 12 }> { description }
Use private transaction tags to label any transactions of interest.
Private tags are saved in your account and are only visible when you are logged in.
</Text>
{ Boolean(transactionTags.length) && ( { Boolean(transactionTags.length) && (
<TransactionTagTable <TransactionTagTable
data={ transactionTags } data={ transactionTags }
......
...@@ -9,7 +9,7 @@ const SkeletonTable = ({ columns }: Props) => { ...@@ -9,7 +9,7 @@ const SkeletonTable = ({ columns }: Props) => {
return ( return (
<div> <div>
<Skeleton height={ 10 } width="100%" borderBottomLeftRadius="none" borderBottomRightRadius="none"/> <Skeleton height={ 10 } width="100%" borderBottomLeftRadius="none" borderBottomRightRadius="none"/>
{ Array.from(Array(4)).map((item, index) => ( { Array.from(Array(3)).map((item, index) => (
<HStack key={ index } spacing={ 6 } marginTop={ 8 }> <HStack key={ index } spacing={ 6 } marginTop={ 8 }>
{ columns.map((width, index) => ( { columns.map((width, index) => (
<Skeleton <Skeleton
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment