more button layout

ui/shared/AddressHeadingInfo.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import type { AddressParam } from 'types/api/addressParams';
 import type { TokenInfo } from 'types/api/token';
 
+import appConfig from 'configs/app/config';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AddressAddToMetaMask from 'ui/address/details/AddressAddToMetaMask';
 import AddressFavoriteButton from 'ui/address/details/AddressFavoriteButton';
@@ -16,9 +17,10 @@ interface Props {
   address: Pick<AddressParam, 'hash' | 'is_contract' | 'implementation_name' | 'watchlist_names'>;
   token?: TokenInfo | null;
   isLinkDisabled?: boolean;
+  after?: React.ReactNode;
 }
 
-const AddressHeadingInfo = ({ address, token, isLinkDisabled }: Props) => {
+const AddressHeadingInfo = ({ address, token, isLinkDisabled, after }: Props) => {
   const isMobile = useIsMobile();
 
   return (
@@ -35,10 +37,11 @@ const AddressHeadingInfo = ({ address, token, isLinkDisabled }: Props) => {
       />
       <CopyToClipboard text={ address.hash }/>
       { address.is_contract && token && <AddressAddToMetaMask ml={ 2 } token={ token }/> }
-      { !address.is_contract && (
+      { !address.is_contract && appConfig.isAccountSupported && (
         <AddressFavoriteButton hash={ address.hash } isAdded={ Boolean(address.watchlist_names?.length) } ml={ 3 }/>
       ) }
       <AddressQrCode hash={ address.hash } ml={ 2 }/>
+      { after }
     </Flex>
   );
 };

ui/token/TokenContractInfo.tsx

@@ -5,9 +5,12 @@ import React from 'react';
 
 import type { TokenInfo } from 'types/api/token';
 
+import appConfig from 'configs/app/config';
 import useApiQuery from 'lib/api/useApiQuery';
 import AddressHeadingInfo from 'ui/shared/AddressHeadingInfo';
 
+import TokenDetailsActions from './TokenDetails/TokenDetailsActions';
+
 interface Props {
   tokenQuery: UseQueryResult<TokenInfo>;
 }
@@ -44,7 +47,13 @@ const TokenContractInfo = ({ tokenQuery }: Props) => {
     watchlist_names: [],
   };
 
-  return <AddressHeadingInfo address={ address } token={ contractQuery.data?.token }/>;
+  return (
+    <AddressHeadingInfo
+      address={ address }
+      token={ contractQuery.data?.token }
+      after={ appConfig.isAccountSupported ? <TokenDetailsActions/> : null }
+    />
+  );
 };
 
 export default React.memo(TokenContractInfo);

ui/token/TokenDetails/TokenDetailsActions.tsx

+import { Button, Menu, MenuButton, MenuItem, MenuList, Icon, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import iconArrow from 'icons/arrows/east-mini.svg';
+
+const TokenDetailsActions = () => {
+  return (
+    <Menu>
+      <MenuButton
+        as={ Button }
+        size="sm"
+        variant="outline"
+        ml={ 2 }
+      >
+        <Flex alignItems="center">
+          <span>More</span>
+          <Icon as={ iconArrow } transform="rotate(-90deg)" boxSize={ 5 } ml={ 1 }/>
+        </Flex>
+      </MenuButton>
+      <MenuList minWidth="180px" zIndex="popover">
+        <MenuItem py={ 2 } px={ 4 }>
+            Add token info
+        </MenuItem>
+        <MenuItem py={ 2 } px={ 4 }>
+            Add public tag
+        </MenuItem>
+        <MenuItem py={ 2 } px={ 4 }>
+            Add private tag
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  );
+};
+
+export default React.memo(TokenDetailsActions);

ui/token/TokenDetails/TokenDetailsVerifiedInfo.tsx

@@ -78,7 +78,7 @@ const TokenDetailsVerifiedInfo = ({ data }: Props) => {
         <Flex alignItems={{ base: 'flex-start', lg: 'center' }} flexDir={{ base: 'column', lg: 'row' }} rowGap={ 2 } columnGap={ 6 }>
           { websiteName && <LinkExternal href={ data.projectWebsite } fontSize="md">{ websiteName }</LinkExternal> }
           { socialLinks.length > 0 && (
-            <Flex columnGap={ 2 }>
+            <Flex columnGap={ 2 } flexWrap="wrap">
               { socialLinks.map((link) => (
                 <Link
                   key={ link.field }