Swap LinkExternal to short names (#2612)

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

@@ -20,5 +20,6 @@ export default {
     proposal: 'proposal/democracyproposal',
     referendum: 'proposal/referendum',
     treasury: 'proposal/treasuryproposal'
-  }
+  },
+  url: 'https://commonwealth.im/'
 };

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

@@ -24,5 +24,6 @@ export default {
     referendum: 'democracy/referendum',
     techcomm: 'techcomm/proposal',
     treasury: 'treasury/proposal'
-  }
+  },
+  url: 'https://polkascan.io/'
 };

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

@@ -17,5 +17,6 @@ export default {
     proposal: 'proposal',
     referendum: 'referendum',
     treasury: 'treasury'
-  }
+  },
+  url: 'https://polkassembly.io/'
 };

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

@@ -21,5 +21,6 @@ export default {
     referendum: 'referenda',
     techcomm: 'tech',
     treasury: 'treasury'
-  }
+  },
+  url: 'https://subscan.io/'
 };

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

@@ -7,8 +7,9 @@ import BN from 'bn.js';
 export type LinkTypes = 'address' | 'block' | 'council' | 'extrinsic' | 'proposal' | 'referendum' | 'techcomm' | 'treasury';
 
 export interface ExternalDef {
-  isActive: boolean;
   chains: Record<string, string>;
+  isActive: boolean;
   paths: Partial<Record<LinkTypes, string>>;
+  url: string;
   create: (chain: string, path: string, data: BN | number | string, hash?: string) => string;
 }

packages/react-components/src/LinkExternal.tsx

@@ -11,7 +11,6 @@ import linked from '@polkadot/apps-config/links';
 import { useApi } from '@polkadot/react-hooks';
 
 import { useTranslation } from './translate';
-import Icon from './Icon';
 import Tooltip from './Tooltip';
 
 interface Props {
@@ -22,10 +21,14 @@ interface Props {
   withShort?: boolean;
 }
 
+function shortName (name: string): string {
+  return `${name[0]}${name[name.length - 1]}`;
+}
+
 function genLinks (systemChain: string, { data, hash, type, withShort }: Props): React.ReactNode[] {
   return Object
     .entries(linked)
-    .map(([name, { chains, create, isActive, paths }]): React.ReactNode | null => {
+    .map(([name, { chains, create, isActive, paths, url }]): React.ReactNode | null => {
       const extChain = chains[systemChain];
       const extPath = paths[type];
 
@@ -46,12 +49,12 @@ function genLinks (systemChain: string, { data, hash, type, withShort }: Props):
           target='_blank'
         >
           {withShort
-            ? <Icon name='external' />
+            ? shortName(name)
             : name
           }
           <Tooltip
             place='top'
-            text={name}
+            text={<>{name}<br />{url}</>}
             trigger={trigger}
           />
         </a>
@@ -75,7 +78,7 @@ function LinkExternal ({ className, data, hash, type, withShort }: Props): React
   return (
     <div className={`${className} ${withShort && 'withShort'}`}>
       {!withShort && <div>{t('View this externally')}</div>}
-      <div>{links.map((link, index) => <span key={index}>{link}</span>)}</div>
+      <div className='links'>{links.map((link, index) => <span key={index}>{link}</span>)}</div>
     </div>
   );
 }
@@ -83,11 +86,13 @@ function LinkExternal ({ className, data, hash, type, withShort }: Props): React
 export default React.memo(styled(LinkExternal)`
   text-align: right;
 
-  > div {
-    display: block;
-    white-space: nowrap;
+  .links {
+    span {
+      word-wrap: normal;
+      display: inline-block;
+    }
 
-    > span+span {
+    span+span {
       margin-left: 0.3rem;
     }
   }

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

@@ -119,8 +119,11 @@ export default React.memo(styled(Body)`
     }
 
     &.mini {
+      max-width: 4rem;
+      min-width: 4rem;
       padding: 0 0.75rem 0 0;
-      white-space: nowrap;
+      width: 4rem;
+      white-space: normal;
     }
 
     &.favorite i.icon.isSelected {