From 80bac62fc27da8986c458bbc7abac849cdad6b89 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Fri, 4 Jun 2021 08:23:36 +0300
Subject: [PATCH] Extract relay by genesis (#5445)

---
 packages/page-parachains/src/Teleport.tsx | 30 +++++++++++------------
 packages/react-hooks/src/useTeleport.ts   | 26 +++++++++-----------
 2 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/packages/page-parachains/src/Teleport.tsx b/packages/page-parachains/src/Teleport.tsx
index c3079dc3a8..72834b1775 100644
--- a/packages/page-parachains/src/Teleport.tsx
+++ b/packages/page-parachains/src/Teleport.tsx
@@ -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, isParachain } = useTeleport();
+  const { allowTeleport, destinations, isParaTeleport } = useTeleport();
 
   const chainOpts = useMemo(
     () => destinations.map(createOption),
@@ -55,7 +55,7 @@ function Teleport ({ onClose }: Props): React.ReactElement<Props> | null {
   );
 
   const params = useMemo(
-    () => isParachain
+    () => isParaTeleport
       ? [
         { X1: 'Parent' },
         { X1: { AccountId32: { id: recipientId, network: 'Any' } } },
@@ -68,13 +68,9 @@ function Teleport ({ onClose }: Props): React.ReactElement<Props> | null {
         [{ ConcreteFungible: { amount, id: 'Null' } }],
         DEFAULT_WEIGHT
       ],
-    [amount, isParachain, recipientId, recipientParaId]
+    [amount, isParaTeleport, recipientId, recipientParaId]
   );
 
-  if (!allowTeleport || !chainOpts.length) {
-    return null;
-  }
-
   return (
     <Modal
       header={t<string>('Teleport assets')}
@@ -94,14 +90,16 @@ function Teleport ({ onClose }: Props): React.ReactElement<Props> | null {
             type='account'
           />
         </Modal.Columns>
-        <Modal.Columns hint={t<string>('The destination chain for this asset teleport. The transferred value will appear on this chain.')}>
-          <Dropdown
-            defaultValue={chainOpts[0]?.value}
-            label={t<string>('destination chain')}
-            onChange={setParaId}
-            options={chainOpts}
-          />
-        </Modal.Columns>
+        {chainOpts.length !== 0 && (
+          <Modal.Columns hint={t<string>('The destination chain for this asset teleport. The transferred value will appear on this chain.')}>
+            <Dropdown
+              defaultValue={chainOpts[0].value}
+              label={t<string>('destination chain')}
+              onChange={setParaId}
+              options={chainOpts}
+            />
+          </Modal.Columns>
+        )}
         <Modal.Columns hint={t<string>('The beneficiary will have access to the transferred amount when the transaction is included in a block.')}>
           <InputAddress
             label={t<string>('send to address')}
@@ -123,7 +121,7 @@ function Teleport ({ onClose }: Props): React.ReactElement<Props> | null {
         <TxButton
           accountId={senderId}
           icon='share-square'
-          isDisabled={!hasAvailable || !recipientId || !amount || (!isParachain && recipientParaId === INVALID_PARAID)}
+          isDisabled={!allowTeleport || !hasAvailable || !recipientId || !amount || (!isParaTeleport && recipientParaId === INVALID_PARAID)}
           label={t<string>('Teleport')}
           onStart={onClose}
           params={params}
diff --git a/packages/react-hooks/src/useTeleport.ts b/packages/react-hooks/src/useTeleport.ts
index 16bb5816df..0577ed6a0d 100644
--- a/packages/react-hooks/src/useTeleport.ts
+++ b/packages/react-hooks/src/useTeleport.ts
@@ -15,8 +15,7 @@ import { useCall } from './useCall';
 interface Teleport {
   allowTeleport: boolean;
   destinations: LinkOption[];
-  isParachain: boolean;
-  paraId?: ParaId;
+  isParaTeleport?: boolean;
 }
 
 interface ExtLinkOption extends LinkOption {
@@ -25,8 +24,7 @@ interface ExtLinkOption extends LinkOption {
 
 const DEFAULT_STATE: Teleport = {
   allowTeleport: false,
-  destinations: [],
-  isParachain: false
+  destinations: []
 };
 
 const endpoints = createWsEndpoints((k: string, v: string | undefined) => v || k).filter((v): v is ExtLinkOption => !!v.teleport);
@@ -62,22 +60,22 @@ export function useTeleport (): Teleport {
 
   useEffect((): void => {
     if (isApiReady) {
-      const endpoint = endpoints.find(({ value }) => value === apiUrl);
+      const relayGenesis = api.genesisHash.toHex();
+      const endpoint = endpoints.find(({ genesisHash }) => genesisHash === relayGenesis);
 
       if (endpoint) {
-        const destinations = extractRelayDestinations(api.genesisHash.toHex(), ({ paraId }) =>
+        const destinations = extractRelayDestinations(relayGenesis, ({ paraId }) =>
           isNumber(paraId) &&
           endpoint.teleport.includes(paraId)
         );
 
-        setState((prev) => ({
-          ...prev,
+        setState({
           allowTeleport: destinations.length !== 0,
           destinations
-        }));
+        });
       }
     }
-  }, [api, apiUrl, isApiReady]);
+  }, [api, isApiReady]);
 
   useEffect((): void => {
     if (paraId) {
@@ -88,13 +86,11 @@ export function useTeleport (): Teleport {
           endpoint.teleport.includes(isNumber(paraId) ? paraId : -1)
         );
 
-        setState((prev) => ({
-          ...prev,
+        setState({
           allowTeleport: destinations.length !== 0,
           destinations,
-          isParachain: true,
-          paraId
-        }));
+          isParaTeleport: true
+        });
       }
     }
   }, [apiUrl, paraId]);