Chainlink available in para proposals (#4429)

* Chainlink avalable in para proposals

* slice visual fix (e.g. on empty)

* group

* R-add 666

packages/apps-config/src/endpoints/testingRococo.ts

@@ -53,7 +53,7 @@ export function createRococo (t: TFunction): EndpointOption {
       // add any additional parachains here, alphabetical
       {
         info: 'rococoAcala',
-        paraId: 667,
+        paraId: 666,
         text: t('rpc.rococo.acala', 'Mandala PC2', { ns: 'apps-config' }),
         providers: {
           Acala: 'wss://rococo-1.acala.laminar.one/ws'

packages/page-parachains/src/Overview/Parachain.tsx

@@ -1,7 +1,6 @@
 // Copyright 2017-2021 @polkadot/app-parachains authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { LinkOption } from '@polkadot/apps-config/settings/types';
 import type { Option, Vec } from '@polkadot/types';
 import type { Balance, BlockNumber, HeadData, Header, ParaId } from '@polkadot/types/interfaces';
 import type { Codec } from '@polkadot/types/types';
@@ -13,7 +12,7 @@ import { useApi, useCall, useCallMulti, useParaApi } from '@polkadot/react-hooks
 import { BlockToTime, FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
-import { sliceHex } from '../util';
+import { getChainLink, sliceHex } from '../util';
 
 interface Props {
   bestNumber?: BN;
@@ -61,16 +60,6 @@ const transformMulti = {
   })
 };
 
-function getChainLink (endpoints: LinkOption[]): React.ReactNode {
-  if (!endpoints.length) {
-    return null;
-  }
-
-  const { text, value } = endpoints[endpoints.length - 1];
-
-  return <a href={`${window.location.origin}${window.location.pathname}?rpc=${encodeURIComponent(value)}`}>{text}</a>;
-}
-
 function Parachain ({ bestNumber, className = '', id, lastInclusion }: Props): React.ReactElement<Props> {
   const { api } = useApi();
   const { api: paraApi, endpoints } = useParaApi(id);

packages/page-parachains/src/Proposals/Proposal.tsx

@@ -7,12 +7,12 @@ import type { ScheduledProposals } from '../types';
 import React, { useMemo } from 'react';
 
 import { AddressMini, AddressSmall, Badge, Spinner, Toggle, TxButton } from '@polkadot/react-components';
-import { useAccounts, useApi, useSudo, useToggle } from '@polkadot/react-hooks';
+import { useAccounts, useApi, useParaEndpoints, useSudo, useToggle } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
-import { sliceHex } from '../util';
+import { getChainLink, sliceHex } from '../util';
 import { useProposal } from './useProposals';
 
 interface Props {
@@ -28,6 +28,12 @@ function Proposal ({ approvedIds, id, scheduled }: Props): React.ReactElement<Pr
   const { hasSudoKey, sudoKey } = useSudo();
   const [isQueried, toggleIsQueried] = useToggle();
   const proposal = useProposal(id, approvedIds, scheduled, isQueried);
+  const endpoints = useParaEndpoints(id);
+
+  const chainLink = useMemo(
+    () => getChainLink(endpoints),
+    [endpoints]
+  );
 
   const cancelTx = useMemo(
     () => api.tx.sudo && hasSudoKey
@@ -55,14 +61,15 @@ function Proposal ({ approvedIds, id, scheduled }: Props): React.ReactElement<Pr
 
   return (
     <tr>
-      <td className='number'><h1>{formatNumber(id)}</h1></td>
-      <td className='badge'>
+      <td className='number together'><h1>{formatNumber(id)}</h1></td>
+      <td className='badge together'>
         {(proposal.isApproved || proposal.isScheduled) && (
           <Badge
             color='green'
             icon={proposal.isScheduled ? 'clock' : 'check'}
           />
         )}
+        {chainLink}
       </td>
       {isQueried && !proposal.proposal
         ? (

packages/page-parachains/src/util.ts

@@ -1,10 +0,0 @@
-// Copyright 2017-2021 @polkadot/app-parachains authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import type { Codec } from '@polkadot/types/types';
-
-export function sliceHex (value: Codec, max: number): string {
-  const hex = value.toHex();
-
-  return `${hex.slice(0, max + 2)}…${hex.slice(-max)}`;
-}

packages/page-parachains/src/util.tsx

@@ -0,0 +1,25 @@
+// Copyright 2017-2021 @polkadot/app-parachains authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { LinkOption } from '@polkadot/apps-config/settings/types';
+import type { Codec } from '@polkadot/types/types';
+
+import React from 'react';
+
+export function sliceHex (value: Codec, max: number): string {
+  const hex = value.toHex();
+
+  return hex.length > ((2 * max) + 2)
+    ? `${hex.slice(0, max + 2)}…${hex.slice(-max)}`
+    : hex;
+}
+
+export function getChainLink (endpoints: LinkOption[]): React.ReactNode {
+  if (!endpoints.length) {
+    return null;
+  }
+
+  const { text, value } = endpoints[endpoints.length - 1];
+
+  return <a href={`${window.location.origin}${window.location.pathname}?rpc=${encodeURIComponent(value)}`}>{text}</a>;
+}