Use external icon links (#3545)

* Use external icon links

* Adjust opacity

* Cursor

packages/page-accounts/src/Accounts/Account.tsx

@@ -580,7 +580,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
         <LinkExternal
           className='ui--AddressCard-exporer-link'
           data={address}
-          isSmall
+          isLogo
           type='address'
         />
       </td>

packages/page-addresses/src/Contacts/Address.tsx

@@ -239,7 +239,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
         <LinkExternal
           className='ui--AddressCard-exporer-link'
           data={address}
-          isSmall
+          isLogo
           type='address'
         />
       </td>

packages/page-council/src/Motions/Motion.tsx

@@ -116,7 +116,7 @@ function Motion ({ className = '', isMember, members, motion: { hash, proposal,
         <LinkExternal
           data={index}
           hash={hash.toString()}
-          isSmall
+          isLogo
           type='council'
         />
       </td>

packages/page-democracy/src/Execute/DispatchEntry.tsx

@@ -48,7 +48,7 @@ function DispatchEntry ({ value: { at, image, imageHash, index } }: Props): Reac
       <td className='links media--1000'>
         <LinkExternal
           data={index}
-          isSmall
+          isLogo
           type='referendum'
         />
       </td>

packages/page-democracy/src/Overview/Proposal.tsx

@@ -67,7 +67,7 @@ function Proposal ({ className = '', value: { balance, image, imageHash, index,
       <td className='links media--1000'>
         <LinkExternal
           data={index}
-          isSmall
+          isLogo
           type='proposal'
         />
       </td>

packages/page-democracy/src/Overview/Referendum.tsx

@@ -162,7 +162,7 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
       <td className='links media--1000'>
         <LinkExternal
           data={index}
-          isSmall
+          isLogo
           type='referendum'
         />
       </td>

packages/page-staking/src/Overview/Address/index.tsx

@@ -171,7 +171,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
       <td className='links media--1200'>
         <LinkExternal
           data={address}
-          isSmall
+          isLogo
           type={isMain ? 'validator' : 'intention'}
         />
       </td>

packages/page-treasury/src/Overview/Proposal.tsx

@@ -64,7 +64,7 @@ function ProposalDisplay ({ className = '', isMember, members, proposal: { counc
       <td className='links'>
         <LinkExternal
           data={id}
-          isSmall
+          isLogo
           type='treasury'
         />
       </td>

packages/page-treasury/src/Tips/Tip.tsx

@@ -183,7 +183,7 @@ function Tip ({ bestNumber, className = '', defaultId, hash, isMember, members,
       <td className='links media--1700'>
         <LinkExternal
           data={hash}
-          isSmall
+          isLogo
           type='tip'
         />
       </td>

packages/react-components/src/LinkExternal.tsx

@@ -16,6 +16,7 @@ interface Props {
   className?: string;
   data: BN | number | string;
   hash?: string;
+  isLogo?: boolean;
   isSmall?: boolean;
   type: LinkTypes;
 }
@@ -24,10 +25,10 @@ interface Props {
 //   return `${name[0]}${name[name.length - 1]}`;
 // }
 
-function genLinks (systemChain: string, { data, hash, type }: Props): React.ReactNode[] {
+function genLinks (systemChain: string, { data, hash, isLogo, type }: Props): React.ReactNode[] {
   return Object
     .entries(linked)
-    .map(([name, { chains, create, isActive, paths, url }]): React.ReactNode | null => {
+    .map(([name, { chains, create, isActive, logo, paths, url }]): React.ReactNode | null => {
       const extChain = chains[systemChain];
       const extPath = paths[type];
 
@@ -43,19 +44,22 @@ function genLinks (systemChain: string, { data, hash, type }: Props): React.Reac
           target='_blank'
           title={`${name}, ${url}`}
         >
-          {name}
+          {isLogo
+            ? <img src={logo} />
+            : name
+          }
         </a>
       );
     })
     .filter((node): node is React.ReactNode => !!node);
 }
 
-function LinkExternal ({ className = '', data, hash, isSmall, type }: Props): React.ReactElement<Props> | null {
+function LinkExternal ({ className = '', data, hash, isLogo, isSmall, type }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { systemChain } = useApi();
   const links = useMemo(
-    () => genLinks(systemChain, { data, hash, type }),
-    [systemChain, data, hash, type]
+    () => genLinks(systemChain, { data, hash, isLogo, type }),
+    [systemChain, data, hash, isLogo, type]
   );
 
   if (!links.length) {
@@ -63,8 +67,8 @@ function LinkExternal ({ className = '', data, hash, isSmall, type }: Props): Re
   }
 
   return (
-    <div className={`${className}${isSmall ? ' isSmall' : ''}`}>
-      {!isSmall && <div>{t<string>('View this externally')}</div>}
+    <div className={`${className}${isLogo ? ' isLogo' : ''}${isSmall ? ' isSmall' : ''}`}>
+      {!(isLogo || isSmall) && <div>{t<string>('View this externally')}</div>}
       <div className='links'>{links.map((link, index) => <span key={index}>{link}</span>)}</div>
     </div>
   );
@@ -79,7 +83,31 @@ export default React.memo(styled(LinkExternal)`
     text-align: center;
   }
 
+  &.isLogo {
+    line-height: 1;
+
+    .links {
+      white-space: nowrap;
+
+      span+span {
+        margin-left: 0.25rem;
+      }
+    }
+  }
+
   .links {
+    img {
+      border-radius: 50%;
+      cursor: pointer;
+      filter: grayscale(1) opacity(0.66);
+      height: 1.5rem;
+      width: 1.5rem;
+
+      &:hover {
+        filter: grayscale(0) opacity(1);
+      }
+    }
+
     span {
       word-wrap: normal;
       display: inline-block;