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
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
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,
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
|
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,
|
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
|
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,
|
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
|
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,
|
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
+ ?
+ : name
+ }
);
})
.filter((node): node is React.ReactNode => !!node);
}
-function LinkExternal ({ className = '', data, hash, isSmall, type }: Props): React.ReactElement | null {
+function LinkExternal ({ className = '', data, hash, isLogo, isSmall, type }: Props): React.ReactElement | 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 (
-
- {!isSmall &&
{t('View this externally')}
}
+
+ {!(isLogo || isSmall) &&
{t('View this externally')}
}
{links.map((link, index) => {link})}
);
@@ -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;