Skip to content

F
frontend
Commit 3b2d575a authored by tom's avatar tom
Browse files
Options

page layout

parent 2d8cd224
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 2 deletions
lib/hooks/useNavItems.tsx
View file @ 3b2d575a
...@@ -223,6 +223,13 @@ export default function useNavItems(): ReturnType { ...@@ -223,6 +223,13 @@ export default function useNavItems(): ReturnType {
isActive: pathname === '/account/custom_abi', isActive: pathname === '/account/custom_abi',
isNewUi: true, isNewUi: true,
}, },
{
text: 'Verified addresses',
nextRoute: { pathname: '/account/verified_addresses' as const },
icon: verifiedIcon,
isActive: pathname === '/account/verified_addresses',
isNewUi: true,
},
]; ];
const profileItem = { const profileItem = {
......
pages/account/verified_addresses.tsx 0 → 100644
View file @ 3b2d575a
import type { NextPage } from 'next';
import Head from 'next/head';
import React from 'react';
import getNetworkTitle from 'lib/networks/getNetworkTitle';
import VerifiedAddresses from 'ui/pages/VerifiedAddresses';
const VerifiedAddressesPage: NextPage = () => {
const title = getNetworkTitle();
return (
<>
<Head><title>{ title }</title></Head>
<VerifiedAddresses/>
</>
);
};
export default VerifiedAddressesPage;
export { getServerSideProps } from 'lib/next/getServerSideProps';
types/nextjs-routes.d.ts
View file @ 3b2d575a
...@@ -10,6 +10,7 @@ declare module "nextjs-routes" { ...@@ -10,6 +10,7 @@ declare module "nextjs-routes" {
| StaticRoute<"/account/custom_abi"> | StaticRoute<"/account/custom_abi">
| StaticRoute<"/account/public_tags_request"> | StaticRoute<"/account/public_tags_request">
| StaticRoute<"/account/tag_address"> | StaticRoute<"/account/tag_address">
| StaticRoute<"/account/verified_addresses">
| StaticRoute<"/account/watchlist"> | StaticRoute<"/account/watchlist">
| StaticRoute<"/accounts"> | StaticRoute<"/accounts">
| DynamicRoute<"/address/[hash]/contract_verification", { "hash": string }> | DynamicRoute<"/address/[hash]/contract_verification", { "hash": string }>
......
ui/pages/VerifiedAddresses.tsx 0 → 100644
View file @ 3b2d575a
import { UnorderedList, ListItem, chakra, Button } from '@chakra-ui/react';
import React from 'react';
import AccountPageDescription from 'ui/shared/AccountPageDescription';
import Page from 'ui/shared/Page/Page';
import PageTitle from 'ui/shared/Page/PageTitle';
const VerifiedAddresses = () => {
return (
<Page>
<PageTitle text="My verified addresses"/>
<AccountPageDescription allowCut={ false }>
<chakra.p>
<span>
Before you claim the ownership of your contract address and update your token’s information, make sure that:
</span>
<UnorderedList>
<ListItem>the source code has already been deployed onto the Ethereum blockchain</ListItem>
<ListItem>the source code has already been verified (if you have not yet verified the source code, please do so using this tool)</ListItem>
</UnorderedList>
</chakra.p>
<chakra.p mt={ 3 }>
The verify address ownership process involves verifying the ownership of an “Network name” address used to create an “Network name” smart contract.
This verification will be linked to an “Network name” account. Once a user has claimed ownership of an address,
the user will be able to update token information and address name tags without needing to sign a new message each time.
Find out more about verify address ownership.
</chakra.p>
</AccountPageDescription>
<Button size="lg">
Add address
</Button>
</Page>
);
};
export default VerifiedAddresses;
ui/shared/AccountPageDescription.tsx
View file @ 3b2d575a
...@@ -4,7 +4,7 @@ import React, { useRef, useEffect, useState, useCallback } from 'react'; ...@@ -4,7 +4,7 @@ import React, { useRef, useEffect, useState, useCallback } from 'react';
const CUT_HEIGHT = 144; const CUT_HEIGHT = 144;
const AccountPageDescription = ({ children }: {children: React.ReactNode}) => { const AccountPageDescription = ({ children, allowCut = true }: { children: React.ReactNode; allowCut?: boolean }) => {
const ref = useRef<HTMLParagraphElement>(null); const ref = useRef<HTMLParagraphElement>(null);
const [ needCut, setNeedCut ] = useState(false); const [ needCut, setNeedCut ] = useState(false);
...@@ -20,6 +20,10 @@ const AccountPageDescription = ({ children }: {children: React.ReactNode}) => { ...@@ -20,6 +20,10 @@ const AccountPageDescription = ({ children }: {children: React.ReactNode}) => {
}, [ needCut ]); }, [ needCut ]);
useEffect(() => { useEffect(() => {
if (!allowCut) {
return;
}
calculateCut(); calculateCut();
const resizeHandler = _debounce(calculateCut, 300); const resizeHandler = _debounce(calculateCut, 300);
window.addEventListener('resize', resizeHandler); window.addEventListener('resize', resizeHandler);
...@@ -44,7 +48,6 @@ const AccountPageDescription = ({ children }: {children: React.ReactNode}) => { ...@@ -44,7 +48,6 @@ const AccountPageDescription = ({ children }: {children: React.ReactNode}) => {
ref={ ref } ref={ ref }
maxHeight={ needCut && !expanded ? `${ CUT_HEIGHT }px` : 'auto' } maxHeight={ needCut && !expanded ? `${ CUT_HEIGHT }px` : 'auto' }
overflow="hidden" overflow="hidden"
style={ needCut && !expanded ? { WebkitLineClamp: '6', WebkitBoxOrient: 'vertical', display: '-webkit-box' } : {} } style={ needCut && !expanded ? { WebkitLineClamp: '6', WebkitBoxOrient: 'vertical', display: '-webkit-box' } : {} }
> >
{ children } { children }
......
ui/snippets/navigation/useNavLinkStyleProps.tsx
View file @ 3b2d575a
...@@ -30,6 +30,8 @@ export default function useNavLinkProps({ isExpanded, isCollapsed, isActive }: P ...@@ -30,6 +30,8 @@ export default function useNavLinkProps({ isExpanded, isCollapsed, isActive }: P
transitionProperty: 'opacity', transitionProperty: 'opacity',
transitionDuration: 'normal', transitionDuration: 'normal',
transitionTimingFunction: 'ease', transitionTimingFunction: 'ease',
textOverflow: 'ellipsis',
overflow: 'hidden',
}, },
}; };
} }
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