Adjust links with full names (#3537)

* Adjust links with full names

* Add provider logos

* Unsafe assignment

* Linting

packages/apps-config/src/links/commonwealth.ts

@@ -4,6 +4,8 @@
 
 import BN from 'bn.js';
 
+import { externalLogos } from '../ui/logos';
+
 const HASH_PATHS = ['proposal/councilmotion'];
 
 export default {
@@ -15,6 +17,7 @@ export default {
   create: (chain: string, path: string, data: BN | number | string, hash?: string): string =>
     `https://commonwealth.im/${chain}/${path}/${HASH_PATHS.includes(path) ? (hash || '') : data.toString()}`,
   isActive: true,
+  logo: externalLogos.commonwealth as string,
   paths: {
     council: 'proposal/councilmotion',
     proposal: 'proposal/democracyproposal',

packages/apps-config/src/links/polkascan.ts

@@ -4,6 +4,8 @@
 
 import BN from 'bn.js';
 
+import { externalLogos } from '../ui/logos';
+
 export default {
   chains: {
     // 'Centrifuge Mainnet': 'centrifuge',
@@ -16,6 +18,7 @@ export default {
   create: (chain: string, path: string, data: BN | number | string): string =>
     `https://polkascan.io/${chain}/${path}/${data.toString()}`,
   isActive: true,
+  logo: externalLogos.polkascan as string,
   paths: {
     address: 'account',
     block: 'block',

packages/apps-config/src/links/polkassembly.ts

@@ -4,6 +4,8 @@
 
 import BN from 'bn.js';
 
+import { externalLogos } from '../ui/logos';
+
 export default {
   chains: {
     Kusama: 'kusama',
@@ -13,6 +15,7 @@ export default {
   create: (chain: string, path: string, data: BN | number | string): string =>
     `https://${chain}.polkassembly.io/${path}/${data.toString()}`,
   isActive: true,
+  logo: externalLogos.polkassembly as string,
   paths: {
     council: 'motion',
     proposal: 'proposal',

packages/apps-config/src/links/polkastats.ts

@@ -4,6 +4,8 @@
 
 import BN from 'bn.js';
 
+import { externalLogos } from '../ui/logos';
+
 export default {
   chains: {
     Kusama: 'kusama',
@@ -13,6 +15,7 @@ export default {
   create: (chain: string, path: string, data: BN | number | string): string =>
     `https://${chain}.polkastats.io/${path}/${data.toString()}`,
   isActive: true,
+  logo: externalLogos.polkastats as string,
   paths: {
     address: 'account',
     block: 'block',

packages/apps-config/src/links/subscan.ts

@@ -4,6 +4,8 @@
 
 import BN from 'bn.js';
 
+import { externalLogos } from '../ui/logos';
+
 export default {
   chains: {
     Edgeware: 'edgeware',
@@ -17,6 +19,7 @@ export default {
   create: (chain: string, path: string, data: BN | number | string): string =>
     `https://${chain}.subscan.io/${path}/${data.toString()}`,
   isActive: true,
+  logo: externalLogos.subscan as string,
   paths: {
     address: 'account',
     block: 'block',

packages/apps-config/src/links/types.ts

@@ -9,6 +9,7 @@ export type LinkTypes = 'address' | 'block' | 'council' | 'extrinsic' | 'proposa
 export interface ExternalDef {
   chains: Record<string, string>;
   isActive: boolean;
+  logo: string;
   paths: Partial<Record<LinkTypes, string>>;
   url: string;
   create: (chain: string, path: string, data: BN | number | string, hash?: string) => string;

packages/apps-config/src/ui/logos/index.ts

@@ -31,6 +31,13 @@ import nodeLaminar from './nodes/laminar-circle.svg';
 // extensions
 import extensionPolkadotJs from './extensions/polkadot-js.svg';
 
+// external links
+import externalCommonwealth from './external/commonwealth.png';
+import externalPolkascan from './external/polkascan.png';
+import externalPolkassembly from './external/polkassembly.png';
+import externalPolkastats from './external/polkastats.png';
+import externalSubscan from './external/subscan.png';
+
 // last-resort fallback, just something empty
 import emptyLogo from './empty.svg';
 
@@ -103,10 +110,32 @@ const extensionLogos: Record<string, any> = {
   'polkadot-js': extensionPolkadotJs
 };
 
+// external logos
+const externalLogos: Record<string, any> = {
+  commonwealth: externalCommonwealth,
+  polkascan: externalPolkascan,
+  polkassembly: externalPolkassembly,
+  polkastats: externalPolkastats,
+  subscan: externalSubscan
+};
+
+// empty logos
+const emptyLogos: Record<string, any> = {
+  empty: emptyLogo
+};
+
+// preload all
+[chainLogos, extensionLogos, externalLogos, namedLogos, nodeLogos, emptyLogos].map((imageSet): void => {
+  Object.values(imageSet).forEach((src): void => {
+    new Image().src = src as string;
+  });
+});
+
 export {
   chainLogos,
   emptyLogo,
   extensionLogos,
+  externalLogos,
   namedLogos,
   nodeLogos
 };

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

@@ -576,12 +576,12 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
           </Menu>
         </Popup>
       </td>
-      <td className='mini media--1400'>
+      <td className='links media--1400'>
         <LinkExternal
           className='ui--AddressCard-exporer-link'
           data={address}
+          isSmall
           type='address'
-          withShort
         />
       </td>
     </tr>

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

@@ -91,7 +91,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
     [t('transactions'), 'media--1500'],
     [t('balances')],
     [],
-    [undefined, 'mini media--1400']
+    [undefined, 'media--1400']
   ]);
 
   useEffect((): void => {

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

@@ -235,12 +235,12 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
           </Menu>
         </Popup>
       </td>
-      <td className='mini media--1400'>
+      <td className='links media--1400'>
         <LinkExternal
           className='ui--AddressCard-exporer-link'
           data={address}
+          isSmall
           type='address'
-          withShort
         />
       </td>
     </tr>

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

@@ -32,7 +32,7 @@ function Overview ({ className = '', onStatusChange }: Props): React.ReactElemen
     [t('transactions'), 'media--1500'],
     [t('balances')],
     [],
-    [undefined, 'mini media--1400']
+    [undefined, 'media--1400']
   ]);
 
   useEffect((): void => {

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

@@ -112,12 +112,12 @@ function Motion ({ className = '', isMember, members, motion: { hash, proposal,
           />
         )}
       </td>
-      <td className='mini'>
+      <td className='links'>
         <LinkExternal
           data={index}
           hash={hash.toString()}
+          isSmall
           type='council'
-          withShort
         />
       </td>
     </tr>

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

@@ -32,7 +32,7 @@ function Proposals ({ className = '', motions, prime }: Props): React.ReactEleme
     [t('votes'), 'start'],
     [],
     [undefined, 'badge'],
-    [undefined, 'mini']
+    []
   ]);
 
   return (

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

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

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

@@ -24,7 +24,7 @@ function DispatchQueue ({ className }: Props): React.ReactElement<Props> | null
     [t('dispatch queue'), 'start', 2],
     [t('enact')],
     [],
-    [undefined, 'mini media--1000']
+    [undefined, 'media--1000']
   ]);
 
   return (

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

@@ -64,11 +64,11 @@ function Proposal ({ className = '', value: { balance, image, imageHash, index,
           )}
         </Button.Group>
       </td>
-      <td className='mini media--1000'>
+      <td className='links media--1000'>
         <LinkExternal
           data={index}
+          isSmall
           type='proposal'
-          withShort
         />
       </td>
     </tr>

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

@@ -25,7 +25,7 @@ function Proposals ({ className }: Props): React.ReactElement<Props> {
     [t('proposer'), 'address'],
     [t('locked'), 'media--1200'],
     [undefined, undefined, 2],
-    [undefined, 'mini media--1000']
+    [undefined, 'media--1000']
   ]);
 
   return (

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

@@ -159,11 +159,11 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
           icon='asterisk'
         />
       </td>
-      <td className='mini media--1000'>
+      <td className='links media--1000'>
         <LinkExternal
           data={index}
+          isSmall
           type='referendum'
-          withShort
         />
       </td>
     </tr>

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

@@ -26,7 +26,7 @@ function Referendums ({ className = '', referendums }: Props): React.ReactElemen
     [undefined, 'badge'],
     [t('votes'), 'start'],
     [undefined, undefined, 2],
-    [undefined, 'mini media--1000']
+    [undefined, 'media--1000']
   ]);
 
   return (

packages/page-society/src/Overview/Members.tsx

@@ -24,7 +24,7 @@ function Members ({ className = '', info }: Props): React.ReactElement<Props> {
   const headerRef = useRef([
     [t('members'), 'start', 3],
     [t('strikes')],
-    [undefined, 'mini']
+    []
   ]);
 
   const filtered = useMemo(

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

@@ -168,11 +168,11 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
           />
         )}
       </td>
-      <td className='mini media--1200'>
+      <td className='links media--1200'>
         <LinkExternal
           data={address}
+          isSmall
           type={isMain ? 'validator' : 'intention'}
-          withShort
         />
       </td>
     </tr>

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

@@ -61,11 +61,11 @@ function ProposalDisplay ({ className = '', isMember, members, proposal: { counc
           )
         }
       </td>
-      <td className='mini'>
+      <td className='links'>
         <LinkExternal
           data={id}
+          isSmall
           type='treasury'
-          withShort
         />
       </td>
     </tr>

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

@@ -36,7 +36,7 @@ function ProposalsBase ({ className = '', isApprovals, isMember, members, propos
     [t('payment')],
     [t('bond')],
     [],
-    [undefined, 'mini']
+    []
   ], [isApprovals, t]);
 
   return (

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

@@ -102,7 +102,7 @@ function Tip ({ bestNumber, className = '', defaultId, hash, isMember, members,
       <td className='address'>
         <AddressSmall value={who} />
       </td>
-      <td className='address'>
+      <td className='address media--1400'>
         {finder && (
           <AddressMini value={finder} />
         )}
@@ -136,6 +136,7 @@ function Tip ({ bestNumber, className = '', defaultId, hash, isMember, members,
           : finder && (
             <TxButton
               accountId={finder}
+              className='media--1400'
               icon='times'
               isDisabled={!isFinder}
               label={t('Cancel')}
@@ -179,11 +180,11 @@ function Tip ({ bestNumber, className = '', defaultId, hash, isMember, members,
           value={isMedianSelected}
         />
       </td>
-      <td className='mini media--1700'>
+      <td className='links media--1700'>
         <LinkExternal
           data={hash}
+          isSmall
           type='tip'
-          withShort
         />
       </td>
     </tr>

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

@@ -56,13 +56,13 @@ function Tips ({ className = '', defaultId, hashes, isMember, members, onSelectT
 
   const headerRef = useRef([
     [t('tips'), 'start'],
-    [t('finder'), 'address'],
+    [t('finder'), 'address media--1400'],
     [t('reason'), 'start'],
     [],
     [],
     [undefined, 'badge media--1700'],
     [],
-    [undefined, 'mini media--1700']
+    [undefined, 'media--1700']
   ]);
 
   return (

packages/react-components/src/ChainImg.tsx

@@ -13,21 +13,10 @@ interface Props {
   onClick?: () => any;
 }
 
-function preloadSet (images: Record<string, any>): void {
-  Object.values(images).forEach((src): void => {
-    new Image().src = src as string;
-  });
-}
-
 function sanitize (value?: string): string {
   return value?.toLowerCase().replace('-', ' ') || '';
 }
 
-// preload on app init
-preloadSet(chainLogos);
-preloadSet(namedLogos);
-preloadSet(nodeLogos);
-
 function ChainImg ({ className = '', logo, onClick }: Props): React.ReactElement<Props> {
   const { systemChain, systemName } = useApi();
   const [isEmpty, img] = useMemo((): [boolean, string] => {

packages/react-components/src/LinkExternal.tsx

@@ -16,15 +16,15 @@ interface Props {
   className?: string;
   data: BN | number | string;
   hash?: string;
+  isSmall?: boolean;
   type: LinkTypes;
-  withShort?: boolean;
 }
 
-function shortName (name: string): string {
-  return `${name[0]}${name[name.length - 1]}`;
-}
+// function shortName (name: string): string {
+//   return `${name[0]}${name[name.length - 1]}`;
+// }
 
-function genLinks (systemChain: string, { data, hash, type, withShort }: Props): React.ReactNode[] {
+function genLinks (systemChain: string, { data, hash, type }: Props): React.ReactNode[] {
   return Object
     .entries(linked)
     .map(([name, { chains, create, isActive, paths, url }]): React.ReactNode | null => {
@@ -43,22 +43,19 @@ function genLinks (systemChain: string, { data, hash, type, withShort }: Props):
           target='_blank'
           title={`${name}, ${url}`}
         >
-          {withShort
-            ? shortName(name)
-            : name
-          }
+          {name}
         </a>
       );
     })
     .filter((node): node is React.ReactNode => !!node);
 }
 
-function LinkExternal ({ className = '', data, hash, type, withShort }: Props): React.ReactElement<Props> | null {
+function LinkExternal ({ className = '', data, hash, isSmall, type }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { systemChain } = useApi();
   const links = useMemo(
-    () => genLinks(systemChain, { data, hash, type, withShort }),
-    [systemChain, data, hash, type, withShort]
+    () => genLinks(systemChain, { data, hash, type }),
+    [systemChain, data, hash, type]
   );
 
   if (!links.length) {
@@ -66,8 +63,8 @@ function LinkExternal ({ className = '', data, hash, type, withShort }: Props):
   }
 
   return (
-    <div className={`${className}${withShort ? ' withShort' : ''}`}>
-      {!withShort && <div>{t<string>('View this externally')}</div>}
+    <div className={`${className}${isSmall ? ' isSmall' : ''}`}>
+      {!isSmall && <div>{t<string>('View this externally')}</div>}
       <div className='links'>{links.map((link, index) => <span key={index}>{link}</span>)}</div>
     </div>
   );
@@ -76,6 +73,12 @@ function LinkExternal ({ className = '', data, hash, type, withShort }: Props):
 export default React.memo(styled(LinkExternal)`
   text-align: right;
 
+  &.isSmall {
+    font-size: 0.85rem;
+    line-height: 1.35;
+    text-align: center;
+  }
+
   .links {
     span {
       word-wrap: normal;

packages/react-components/src/Table/Body.tsx

@@ -96,6 +96,12 @@ export default React.memo(styled(Body)`
       font-family: monospace;
     }
 
+    &.links {
+      padding: 0.5rem 0.75rem;
+      text-align: center;
+      width: 0;
+    }
+
     &.number {
       text-align: right;
     }