Merge pull request #1104 from trilitech/fix-internal-prefix-bugs

Fix internal prefix bugs

src/components/OperationTile/InternalPrefix.tsx

@@ -40,7 +40,7 @@ export const InternalPrefix: React.FC<{
   }
 
   return (
-    <Heading marginRight="4px" color={colors.gray[450]} size="md">
+    <Heading marginRight="4px" color={colors.gray[450]} data-testid="internal-prefix" size="md">
       Internal:
     </Heading>
   );

src/components/OperationTile/TokenTransferTile.test.tsx

@@ -1,8 +1,10 @@
 import { OperationTileContext } from "./OperationTileContext";
 import { tokenTransferFixture, transactionFixture } from "./testUtils";
 import { TokenTransferTile } from "./TokenTransferTile";
+import * as operationDestinationModule from "./useGetOperationDestination";
 import { mockImplicitAddress, mockLedgerAccount } from "../../mocks/factories";
 import { addAccount } from "../../mocks/helpers";
+import { ghostnetThezard } from "../../mocks/nftTokens";
 import { render, screen } from "../../mocks/testUtils";
 import { DefaultNetworks } from "../../types/Network";
 import { Token, fromRaw } from "../../types/Token";
@@ -236,6 +238,32 @@ describe("<TokenTransferTile />", () => {
         expect(screen.getByTestId("to")).toHaveTextContent("Account");
       });
     });
+
+    describe.each([
+      { type: "NFT", transfer: tokenTransferFixture({ token: ghostnetThezard.token }) },
+      { type: "token", transfer: tokenTransferFixture({}) },
+    ])("for $type", ({ transfer }) => {
+      afterEach(() => jest.restoreAllMocks());
+
+      it("renders internal prefix for internal operations", () => {
+        jest
+          .spyOn(operationDestinationModule, "useGetOperationDestination")
+          .mockReturnValue("unrelated");
+
+        render(fixture(contextValue, transfer));
+
+        expect(screen.getByTestId("internal-prefix")).toBeVisible();
+      });
+
+      it("does not render internal prefix for normal operations", () => {
+        jest
+          .spyOn(operationDestinationModule, "useGetOperationDestination")
+          .mockReturnValue("incoming");
+        render(fixture(contextValue, transfer));
+
+        expect(screen.queryByTestId("internal-prefix")).not.toBeInTheDocument();
+      });
+    });
   });
 
   describe("page mode", () => {

src/components/OperationTile/TokenTransferTile.tsx

@@ -57,7 +57,7 @@ export const TokenTransferTile: React.FC<{
       }
       openDelay={300}
     >
-      <Flex>
+      <Center>
         <InternalPrefix operation={operation || tokenTransfer} />
         <TzktLink
           marginRight="8px"
@@ -76,22 +76,25 @@ export const TokenTransferTile: React.FC<{
             {tokenNameSafe(token)}
           </Text>
         </TzktLink>
-      </Flex>
+      </Center>
     </Tooltip>
   ) : (
-    <TzktLink
-      marginRight="8px"
-      color={underlineColor}
-      data-testid="title"
-      migrationId={tokenTransfer.migrationId}
-      originationId={tokenTransfer.originationId}
-      transactionId={tokenTransfer.transactionId}
-    >
-      <Text display="inline" color={titleColor} fontWeight="600">
-        {sign}
-        {tokenAmount}
-      </Text>
-    </TzktLink>
+    <Center>
+      <InternalPrefix operation={operation || tokenTransfer} />
+      <TzktLink
+        marginRight="8px"
+        color={underlineColor}
+        data-testid="title"
+        migrationId={tokenTransfer.migrationId}
+        originationId={tokenTransfer.originationId}
+        transactionId={tokenTransfer.transactionId}
+      >
+        <Text display="inline" color={titleColor} fontWeight="600">
+          {sign}
+          {tokenAmount}
+        </Text>
+      </TzktLink>
+    </Center>
   );
 
   return (