Solving receipt undesired arrow on header (#283)

* Fixing transaction receipt for internal transfers * Solving receipt undesired arrow on header
paritytech · Sep 12, 2021 · 05a1771 · 05a1771
1 parent e74100a
commit 05a1771
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/src/components/TransactionHeader.tsx b/src/components/TransactionHeader.tsx
@@ -18,8 +18,7 @@ import React from 'react';
 
 import { Box } from '@material-ui/core';
 import { IconTxStatus } from './Icons';
-import { TransactionStatusEnum } from '../types/transactionTypes';
-import { useGUIContext } from '../contexts/GUIContextProvider';
+import { TransactionStatusEnum, TransactionTypes } from '../types/transactionTypes';
 
 interface Props {
   status: TransactionStatusEnum;
@@ -36,10 +35,8 @@ const getType = (type: string | undefined) => {
 };
 
 const TransactionHeader = ({ type, status, sourceChain, targetChain }: Props) => {
-  const { isBridged } = useGUIContext();
-
   let header = ` ${sourceChain} -> ${targetChain}`;
-  if (!isBridged) {
+  if (type === TransactionTypes.INTERNAL_TRANSFER) {
     header = sourceChain;
   }
 

diff --git a/src/components/TransactionStatusMock.tsx b/src/components/TransactionStatusMock.tsx
@@ -17,18 +17,19 @@
 import React, { useEffect, useState } from 'react';
 
 import { useSourceTarget } from '../contexts/SourceTargetContextProvider';
-import { Step, TransactionStatusEnum } from '../types/transactionTypes';
+import { Step, TransactionStatusEnum, TransactionTypes } from '../types/transactionTypes';
 import TransactionReceipt from './TransactionReceipt';
 import TransactionSwitchTab from './TransactionSwitchTab';
-import { createEmptySteps } from '../util/transactions/';
+import { createEmptyInternalSteps, createEmptySteps } from '../util/transactions/';
 import { useTransactionContext } from '../contexts/TransactionContext';
+import { useGUIContext } from '../contexts/GUIContextProvider';
 interface Props {
   type?: string;
 }
 
 const TransactionStatusMock = ({ type }: Props) => {
   const [steps, setSteps] = useState<Array<Step>>([]);
-
+  const { isBridged } = useGUIContext();
   const {
     sourceChainDetails: { chain: sourceChain },
     targetChainDetails: { chain: targetChain }
@@ -37,8 +38,12 @@ const TransactionStatusMock = ({ type }: Props) => {
   const { payloadHex, transactionDisplayPayload } = useTransactionContext();
 
   useEffect(() => {
-    setSteps(createEmptySteps(sourceChain, targetChain));
-  }, [sourceChain, targetChain]);
+    if (isBridged) {
+      setSteps(createEmptySteps(sourceChain, targetChain));
+    } else {
+      setSteps(createEmptyInternalSteps(sourceChain));
+    }
+  }, [isBridged, sourceChain, targetChain]);
 
   return (
     <TransactionSwitchTab
@@ -51,7 +56,7 @@ const TransactionStatusMock = ({ type }: Props) => {
     >
       <TransactionReceipt
         steps={steps}
-        type={type}
+        type={isBridged ? type : TransactionTypes.INTERNAL_TRANSFER}
         status={TransactionStatusEnum.NOT_STARTED}
         sourceChain={sourceChain}
         targetChain={targetChain}