Merge pull request #629 from blockscout/ext-link

external link custom content

ui/address/AddressDetails.tsx

@@ -92,7 +92,7 @@ const AddressDetails = ({ addressQuery, scrollRef }: Props) => {
           <Text fontSize="sm">Verify with other explorers</Text>
           { explorers.map((explorer) => {
             const url = new URL(explorer.paths.address + '/' + addressHash, explorer.baseUrl);
-            return <LinkExternal key={ explorer.baseUrl } title={ explorer.title } href={ url.toString() }/>;
+            return <LinkExternal key={ explorer.baseUrl } href={ url.toString() }>{ explorer.title }</LinkExternal>;
           }) }
         </Flex>
       ) }

ui/address/contract/ContractCode.tsx

@@ -114,7 +114,7 @@ const ContractCode = ({ addressHash }: Props) => {
         { data.is_verified_via_sourcify && (
           <Alert status="warning" whiteSpace="pre-wrap" flexWrap="wrap">
             <span>This contract has been { data.is_partially_verified ? 'partially ' : '' }verified via Sourcify. </span>
-            { data.sourcify_repo_url && <LinkExternal href={ data.sourcify_repo_url } title="View contract in Sourcify repository" fontSize="md"/> }
+            { data.sourcify_repo_url && <LinkExternal href={ data.sourcify_repo_url } fontSize="md">View contract in Sourcify repository</LinkExternal> }
           </Alert>
         ) }
         { data.is_changed_bytecode && (

ui/pages/Transaction.tsx

@@ -46,7 +46,7 @@ const TransactionPageContent = () => {
     .filter((explorer) => explorer.paths.tx)
     .map((explorer) => {
       const url = new URL(explorer.paths.tx + '/' + hash, explorer.baseUrl);
-      return <LinkExternal key={ explorer.baseUrl } title={ `Open in ${ explorer.title }` } href={ url.toString() }/>;
+      return <LinkExternal key={ explorer.baseUrl } href={ url.toString() }>{ `Open in ${ explorer.title }` }</LinkExternal>;
     });
 
   const additionals = (

ui/shared/LinkExternal.tsx

@@ -5,14 +5,14 @@ import arrowIcon from 'icons/arrows/north-east.svg';
 
 interface Props {
   href: string;
-  title: string;
   className?: string;
+  children: React.ReactNode;
 }
 
-const LinkExternal = ({ href, title, className }: Props) => {
+const LinkExternal = ({ href, children, className }: Props) => {
   return (
     <Link className={ className } fontSize="sm" display="inline-flex" alignItems="center" target="_blank" href={ href }>
-      { title }
+      { children }
       <Icon as={ arrowIcon } boxSize={ 4 }/>
     </Link>
   );