Ensure multi destinations for teleport are available (#5454)

* Ensure multi destinations for teleport are available

* One-way teleport warning

* Statemine colors

packages/apps-config/src/ui/colors.ts

@@ -128,9 +128,9 @@ const nodeZenlink = 'linear-gradient(45deg, #F20082 0%, #FF4D4D 100%)';
 
 // based on the spec name
 const specShell = '#2e86ab'; // '#0596FC';
-const specStatemine = '#363';
+const specStatemine = '#113911';
 const specStatemint = '#86e62a';
-const specWestmint = '#7b7';
+const specWestmint = '#77bb77';
 
 export { emptyColor };
 

packages/page-parachains/src/Teleport.tsx

@@ -7,7 +7,7 @@ import type { Option } from '@polkadot/apps-config/settings/types';
 
 import React, { useMemo, useState } from 'react';
 
-import { ChainImg, Dropdown, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { ChainImg, Dropdown, InputAddress, InputBalance, MarkWarning, Modal, TxButton } from '@polkadot/react-components';
 import { useApi, useTeleport } from '@polkadot/react-hooks';
 import { Available } from '@polkadot/react-query';
 import { BN_ZERO } from '@polkadot/util';
@@ -47,7 +47,7 @@ function Teleport ({ onClose }: Props): React.ReactElement<Props> | null {
   const [recipientId, setRecipientId] = useState<string | null>(null);
   const [senderId, setSenderId] = useState<string | null>(null);
   const [recipientParaId, setParaId] = useState(INVALID_PARAID);
-  const { allowTeleport, destinations, isParaTeleport } = useTeleport();
+  const { allowTeleport, destinations, isParaTeleport, oneWay } = useTeleport();
 
   const chainOpts = useMemo(
     () => destinations.map(createOption),
@@ -98,6 +98,9 @@ function Teleport ({ onClose }: Props): React.ReactElement<Props> | null {
               onChange={setParaId}
               options={chainOpts}
             />
+            {oneWay.includes(recipientParaId) && (
+              <MarkWarning content={t<string>('Currently this is a one-way transfer since the on-chain runtime functionality to send the funds from the destination chain back to this account not yet available.')} />
+            )}
           </Modal.Columns>
         )}
         <Modal.Columns hint={t<string>('The beneficiary will have access to the transferred amount when the transaction is included in a block.')}>

packages/react-hooks/src/useTeleport.ts

@@ -16,6 +16,8 @@ interface Teleport {
   allowTeleport: boolean;
   destinations: LinkOption[];
   isParaTeleport?: boolean;
+  isRelayTeleport?: boolean;
+  oneWay: number[]
 }
 
 interface ExtLinkOption extends LinkOption {
@@ -24,7 +26,8 @@ interface ExtLinkOption extends LinkOption {
 
 const DEFAULT_STATE: Teleport = {
   allowTeleport: false,
-  destinations: []
+  destinations: [],
+  oneWay: []
 };
 
 const endpoints = createWsEndpoints((k: string, v: string | undefined) => v || k).filter((v): v is ExtLinkOption => !!v.teleport);
@@ -38,7 +41,12 @@ function extractRelayDestinations (relayGenesis: string, filter: (l: ExtLinkOpti
       ) && filter(l)
     )
     .reduce((result: ExtLinkOption[], curr): ExtLinkOption[] => {
-      if (!result.some(({ genesisHash, paraId }) => paraId === curr.paraId || genesisHash === curr.genesisHash)) {
+      const isExisting = result.some(({ genesisHash, paraId }) =>
+        paraId === curr.paraId ||
+        (genesisHash && genesisHash === curr.genesisHash)
+      );
+
+      if (!isExisting) {
         result.push(curr);
       }
 
@@ -68,10 +76,16 @@ export function useTeleport (): Teleport {
           isNumber(paraId) &&
           endpoint.teleport.includes(paraId)
         );
+        const oneWay = extractRelayDestinations(relayGenesis, ({ paraId, teleport }) =>
+          isNumber(paraId) &&
+          !teleport.includes(-1)
+        ).map(({ paraId }) => paraId || -1);
 
         setState({
           allowTeleport: destinations.length !== 0,
-          destinations
+          destinations,
+          isRelayTeleport: true,
+          oneWay
         });
       }
     }
@@ -85,11 +99,15 @@ export function useTeleport (): Teleport {
         const destinations = extractRelayDestinations(endpoint.genesisHashRelay, ({ paraId }) =>
           endpoint.teleport.includes(isNumber(paraId) ? paraId : -1)
         );
+        const oneWay = extractRelayDestinations(endpoint.genesisHashRelay, ({ paraId, teleport }) =>
+          !teleport.includes(isNumber(paraId) ? paraId : -1)
+        ).map(({ paraId }) => paraId || -1);
 
         setState({
           allowTeleport: destinations.length !== 0,
           destinations,
-          isParaTeleport: true
+          isParaTeleport: true,
+          oneWay
         });
       }
     }