From 295829af8e5fff8791cfbcc79cfb82465eaf6e5b Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 27 Aug 2020 16:35:19 +0200
Subject: [PATCH] Use external icon links (#3545)

* Use external icon links

* Adjust opacity

* Cursor
---
 .../page-accounts/src/Accounts/Account.tsx    |  2 +-
 .../page-addresses/src/Contacts/Address.tsx   |  2 +-
 packages/page-council/src/Motions/Motion.tsx  |  2 +-
 .../src/Execute/DispatchEntry.tsx             |  2 +-
 .../page-democracy/src/Overview/Proposal.tsx  |  2 +-
 .../src/Overview/Referendum.tsx               |  2 +-
 .../src/Overview/Address/index.tsx            |  2 +-
 .../page-treasury/src/Overview/Proposal.tsx   |  2 +-
 packages/page-treasury/src/Tips/Tip.tsx       |  2 +-
 .../react-components/src/LinkExternal.tsx     | 44 +++++++++++++++----
 10 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx
index 391e52bfce..09a305af5c 100644
--- a/packages/page-accounts/src/Accounts/Account.tsx
+++ b/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>
diff --git a/packages/page-addresses/src/Contacts/Address.tsx b/packages/page-addresses/src/Contacts/Address.tsx
index a6c380a1f4..5cdaf83e8f 100644
--- a/packages/page-addresses/src/Contacts/Address.tsx
+++ b/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>
diff --git a/packages/page-council/src/Motions/Motion.tsx b/packages/page-council/src/Motions/Motion.tsx
index bedf1ae708..11340b02a6 100644
--- a/packages/page-council/src/Motions/Motion.tsx
+++ b/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>
diff --git a/packages/page-democracy/src/Execute/DispatchEntry.tsx b/packages/page-democracy/src/Execute/DispatchEntry.tsx
index 8218de6644..d39fa99fc8 100644
--- a/packages/page-democracy/src/Execute/DispatchEntry.tsx
+++ b/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>
diff --git a/packages/page-democracy/src/Overview/Proposal.tsx b/packages/page-democracy/src/Overview/Proposal.tsx
index 1504347e33..687f4ff53a 100644
--- a/packages/page-democracy/src/Overview/Proposal.tsx
+++ b/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>
diff --git a/packages/page-democracy/src/Overview/Referendum.tsx b/packages/page-democracy/src/Overview/Referendum.tsx
index 5e97072f70..a5e9c36690 100644
--- a/packages/page-democracy/src/Overview/Referendum.tsx
+++ b/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>
diff --git a/packages/page-staking/src/Overview/Address/index.tsx b/packages/page-staking/src/Overview/Address/index.tsx
index ab9304ae0b..be72e5f84d 100644
--- a/packages/page-staking/src/Overview/Address/index.tsx
+++ b/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>
diff --git a/packages/page-treasury/src/Overview/Proposal.tsx b/packages/page-treasury/src/Overview/Proposal.tsx
index 9a6b1e4667..5e7c610561 100644
--- a/packages/page-treasury/src/Overview/Proposal.tsx
+++ b/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>
diff --git a/packages/page-treasury/src/Tips/Tip.tsx b/packages/page-treasury/src/Tips/Tip.tsx
index 50510a615e..160e9aae53 100644
--- a/packages/page-treasury/src/Tips/Tip.tsx
+++ b/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>
diff --git a/packages/react-components/src/LinkExternal.tsx b/packages/react-components/src/LinkExternal.tsx
index 48fcd4e815..65767a2706 100644
--- a/packages/react-components/src/LinkExternal.tsx
+++ b/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;