page layout

3b2d575a · tom · 2d8cd224 · 3b2d575a · 3b2d575a · 3b2d575a
Commit 3b2d575a authored Mar 28, 2023 by tom
6 changed files
--- a/lib/hooks/useNavItems.tsx
+++ b/lib/hooks/useNavItems.tsx
@@ -223,6 +223,13 @@ export default function useNavItems(): ReturnType {
        isActive: pathname === '/account/custom_abi',
        isNewUi: true,
      },
+      {
+        text: 'Verified addresses',
+        nextRoute: { pathname: '/account/verified_addresses' as const },
+        icon: verifiedIcon,
+        isActive: pathname === '/account/verified_addresses',
+        isNewUi: true,
+      },
    ];

    const profileItem = {

--- a/pages/account/verified_addresses.tsx
+++ b/pages/account/verified_addresses.tsx
+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';
--- a/types/nextjs-routes.d.ts
+++ b/types/nextjs-routes.d.ts
@@ -10,6 +10,7 @@ declare module "nextjs-routes" {
    | StaticRoute<"/account/custom_abi">
    | StaticRoute<"/account/public_tags_request">
    | StaticRoute<"/account/tag_address">
+    | StaticRoute<"/account/verified_addresses">
    | StaticRoute<"/account/watchlist">
    | StaticRoute<"/accounts">
    | DynamicRoute<"/address/[hash]/contract_verification", { "hash": string }>

--- a/ui/pages/VerifiedAddresses.tsx
+++ b/ui/pages/VerifiedAddresses.tsx
+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;
--- a/ui/shared/AccountPageDescription.tsx
+++ b/ui/shared/AccountPageDescription.tsx
@@ -4,7 +4,7 @@ import React, { useRef, useEffect, useState, useCallback } from 'react';

 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 [ needCut, setNeedCut ] = useState(false);
@@ -20,6 +20,10 @@ const AccountPageDescription = ({ children }: {children: React.ReactNode}) => {
  }, [ needCut ]);

  useEffect(() => {
+    if (!allowCut) {
+      return;
+    }
+
    calculateCut();
    const resizeHandler = _debounce(calculateCut, 300);
    window.addEventListener('resize', resizeHandler);
@@ -44,7 +48,6 @@ const AccountPageDescription = ({ children }: {children: React.ReactNode}) => {
        ref={ ref }
        maxHeight={ needCut && !expanded ? `${ CUT_HEIGHT }px` : 'auto' }
        overflow="hidden"
-
        style={ needCut && !expanded ? { WebkitLineClamp: '6', WebkitBoxOrient: 'vertical', display: '-webkit-box' } : {} }
      >
        { children }

--- a/ui/snippets/navigation/useNavLinkStyleProps.tsx
+++ b/ui/snippets/navigation/useNavLinkStyleProps.tsx
@@ -30,6 +30,8 @@ export default function useNavLinkProps({ isExpanded, isCollapsed, isActive }: P
      transitionProperty: 'opacity',
      transitionDuration: 'normal',
      transitionTimingFunction: 'ease',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
    },
  };
 }