[Chainport #3] Add Chainport information to account overview and tx details

package.json

@@ -22,7 +22,7 @@
   },
   "license": "MPL-2.0",
   "dependencies": {
-    "@ironfish/sdk": "2.2.0",
+    "@ironfish/sdk": "2.4.0",
     "electron-serve": "^1.1.0",
     "keccak": "^3.0.4"
   },

renderer/components/BridgeTransactionInformation/BridgeTransactionInformation.tsx

@@ -0,0 +1,111 @@
+import { BoxProps, Skeleton } from "@chakra-ui/react";
+import { useMemo } from "react";
+import { useIntl } from "react-intl";
+
+import { trpcReact, TRPCRouterOutputs } from "@/providers/TRPCProvider";
+import { IRONFISH_NETWORK_ID } from "@/utils/chainport/constants";
+import {
+  getMessageForStatus,
+  useChainportTransactionStatus,
+} from "@/utils/chainport/useChainportTransactionStatus";
+
+import { BridgeTransactionInformationShell } from "./BridgeTransactionInformationShell";
+
+type Transaction = TRPCRouterOutputs["getTransaction"]["transaction"];
+
+type Props = BoxProps & {
+  transaction: Transaction;
+};
+
+export function BridgeTransactionInformation({ transaction, ...rest }: Props) {
+  const { formatMessage } = useIntl();
+  const isSend = transaction.type === "send";
+
+  const encodedBridgeNoteMemo = useMemo(() => {
+    const match = transaction.notes?.find((note) => {
+      return note.memo && !note.memo.includes("fee_payment");
+    });
+    return match || null;
+  }, [transaction.notes]);
+
+  const { data: chainportMeta } = trpcReact.getChainportMeta.useQuery();
+  const { data: bridgeNoteMemo } = trpcReact.decodeMemo.useQuery(
+    {
+      memo: encodedBridgeNoteMemo?.memoHex ?? "",
+    },
+    {
+      enabled: !!encodedBridgeNoteMemo,
+    },
+  );
+
+  const baseNetworkId = isSend ? IRONFISH_NETWORK_ID : bridgeNoteMemo?.[0];
+
+  const { data: chainportStatus, isLoading: isChainportStatusLoading } =
+    trpcReact.getChainportTransactionStatus.useQuery(
+      {
+        transactionHash: transaction.hash,
+        baseNetworkId: baseNetworkId ?? 0,
+      },
+      {
+        enabled: !!baseNetworkId,
+      },
+    );
+
+  const targetNetwork = useMemo(() => {
+    if (!chainportStatus || !chainportMeta) return null;
+
+    return chainportMeta.cp_network_ids[
+      chainportStatus.target_network_id ?? ""
+    ];
+  }, [chainportMeta, chainportStatus]);
+
+  const destinationTxHashContent = useMemo(() => {
+    if (!chainportStatus || !chainportMeta) return null;
+
+    const baseUrl =
+      chainportMeta.cp_network_ids[chainportStatus.target_network_id ?? ""]
+        ?.explorer_url;
+
+    return {
+      href: baseUrl + "tx/" + chainportStatus.target_tx_hash,
+      txHash: chainportStatus.target_tx_hash,
+    };
+  }, [chainportMeta, chainportStatus]);
+
+  const status = useChainportTransactionStatus(transaction);
+
+  const sourceNetwork = useMemo(() => {
+    const result = chainportMeta?.cp_network_ids[baseNetworkId ?? ""];
+
+    if (!result) return;
+
+    return {
+      name: result.label,
+      icon: result.network_icon,
+    };
+  }, [baseNetworkId, chainportMeta?.cp_network_ids]);
+
+  if (isChainportStatusLoading) {
+    return (
+      <BridgeTransactionInformationShell
+        status={<Skeleton>placeholder</Skeleton>}
+        type={<Skeleton>pending</Skeleton>}
+        address={<Skeleton>0x12345678</Skeleton>}
+        {...rest}
+      />
+    );
+  }
+
+  return (
+    <BridgeTransactionInformationShell
+      status={formatMessage(getMessageForStatus(isSend ? status : "complete"))}
+      type={transaction.type}
+      address={bridgeNoteMemo?.[1] ?? ""}
+      networkIcon={targetNetwork?.network_icon ?? ""}
+      targetTxHash={destinationTxHashContent?.txHash}
+      blockExplorerUrl={destinationTxHashContent?.href}
+      sourceNetwork={sourceNetwork}
+      {...rest}
+    />
+  );
+}

renderer/components/BridgeTransactionInformation/BridgeTransactionInformationShell.tsx

@@ -0,0 +1,243 @@
+import {
+  Box,
+  BoxProps,
+  Grid,
+  GridItem,
+  Heading,
+  Text,
+  HStack,
+  VStack,
+  Image,
+} from "@chakra-ui/react";
+import NextImage from "next/image";
+import { ReactNode } from "react";
+import { defineMessages, useIntl } from "react-intl";
+
+import chainportIcon from "@/images/chainport/chainport-icon-lg.png";
+import { COLORS } from "@/ui/colors";
+import { ShadowCard } from "@/ui/ShadowCard/ShadowCard";
+
+import { CopyAddress } from "../CopyAddress/CopyAddress";
+
+const messages = defineMessages({
+  heading: {
+    defaultMessage: "Bridge Information",
+  },
+  status: {
+    defaultMessage: "Status",
+  },
+  senderAddress: {
+    defaultMessage: "Sender Address",
+  },
+  destinationAddress: {
+    defaultMessage: "Destination Address",
+  },
+  destinationTxnHash: {
+    defaultMessage: "Destination Txn Hash",
+  },
+  viewInBlockExplorer: {
+    defaultMessage: "View in Block Explorer",
+  },
+  sourceNetwork: {
+    defaultMessage: "Source Network",
+  },
+});
+
+type Props = BoxProps & {
+  status: ReactNode;
+  type: ReactNode;
+  address: ReactNode;
+  networkIcon?: string;
+  targetTxHash?: string;
+  blockExplorerUrl?: string;
+  sourceNetwork?: {
+    name: string;
+    icon: string;
+  };
+};
+
+export function BridgeTransactionInformationShell({
+  status,
+  type,
+  address,
+  networkIcon,
+  targetTxHash,
+  blockExplorerUrl,
+  sourceNetwork,
+  ...rest
+}: Props) {
+  const { formatMessage } = useIntl();
+  const isSend = type === "send";
+  return (
+    <Box {...rest}>
+      <Heading as="h3" fontSize="2xl" mb={8}>
+        {formatMessage(messages.heading)}
+      </Heading>
+      <Grid templateColumns="repeat(3, 1fr)" gap={5}>
+        <GridItem display="flex" alignItems="stretch">
+          <ShadowCard
+            contentContainerProps={{
+              px: 5,
+              py: 6,
+              display: "flex",
+              alignItems: "center",
+            }}
+            w="100%"
+          >
+            <HStack justifyContent="space-between" w="100%">
+              <VStack alignItems="flex-start">
+                <Text
+                  color={COLORS.GRAY_MEDIUM}
+                  fontSize="md"
+                  _dark={{
+                    color: COLORS.DARK_MODE.GRAY_LIGHT,
+                  }}
+                >
+                  {formatMessage(messages.status)}
+                </Text>
+                <Box fontSize="md">{status}</Box>
+              </VStack>
+              <NextImage
+                width="48px"
+                height="48px"
+                src={chainportIcon}
+                alt=""
+              />
+            </HStack>
+          </ShadowCard>
+        </GridItem>
+
+        <GridItem display="flex" alignItems="stretch">
+          <ShadowCard
+            contentContainerProps={{
+              px: 5,
+              py: 6,
+              display: "flex",
+              alignItems: "center",
+            }}
+            w="100%"
+          >
+            <HStack justifyContent="space-between" w="100%">
+              <VStack alignItems="flex-start">
+                <Text
+                  color={COLORS.GRAY_MEDIUM}
+                  fontSize="md"
+                  _dark={{
+                    color: COLORS.DARK_MODE.GRAY_LIGHT,
+                  }}
+                >
+                  {formatMessage(
+                    isSend
+                      ? messages.destinationAddress
+                      : messages.senderAddress,
+                  )}
+                </Text>
+                <Box fontSize="md">
+                  {typeof address === "string"
+                    ? `${address.slice(0, 6)}...${address.toString().slice(-4)}`
+                    : address}
+                </Box>
+              </VStack>
+              {networkIcon && (
+                <Image width="48px" height="48px" src={networkIcon} alt="" />
+              )}
+            </HStack>
+          </ShadowCard>
+        </GridItem>
+
+        {isSend && (
+          <GridItem display="flex" alignItems="stretch">
+            <ShadowCard
+              contentContainerProps={{
+                px: 5,
+                py: 6,
+                display: "flex",
+                alignItems: "center",
+              }}
+              w="100%"
+            >
+              <HStack justifyContent="space-between" w="100%">
+                <VStack alignItems="flex-start">
+                  <Text
+                    color={COLORS.GRAY_MEDIUM}
+                    fontSize="md"
+                    _dark={{
+                      color: COLORS.DARK_MODE.GRAY_LIGHT,
+                    }}
+                  >
+                    {formatMessage(messages.destinationTxnHash)}
+                  </Text>
+                  <Box fontSize="md">
+                    <VStack alignItems="flex-start">
+                      {targetTxHash ? (
+                        <CopyAddress
+                          fontSize="md"
+                          color={COLORS.BLACK}
+                          _dark={{ color: COLORS.WHITE }}
+                          address={targetTxHash}
+                          parts={2}
+                        />
+                      ) : (
+                        <Text>—</Text>
+                      )}
+                      {blockExplorerUrl && (
+                        <Box
+                          as="a"
+                          target="_blank"
+                          display="inline"
+                          href={blockExplorerUrl}
+                          _hover={{ textDecor: "underline" }}
+                        >
+                          <Text fontSize="xs" lineHeight="160%">
+                            {formatMessage(messages.viewInBlockExplorer)}
+                          </Text>
+                        </Box>
+                      )}
+                    </VStack>
+                  </Box>
+                </VStack>
+                {networkIcon && (
+                  <Image width="48px" height="48px" src={networkIcon} alt="" />
+                )}
+              </HStack>
+            </ShadowCard>
+          </GridItem>
+        )}
+        {!isSend && sourceNetwork && (
+          <GridItem display="flex" alignItems="stretch">
+            <ShadowCard
+              contentContainerProps={{
+                px: 5,
+                py: 6,
+                display: "flex",
+                alignItems: "center",
+              }}
+              w="100%"
+            >
+              <HStack justifyContent="space-between" w="100%">
+                <VStack alignItems="flex-start">
+                  <Text
+                    color={COLORS.GRAY_MEDIUM}
+                    fontSize="md"
+                    _dark={{
+                      color: COLORS.DARK_MODE.GRAY_LIGHT,
+                    }}
+                  >
+                    {formatMessage(messages.sourceNetwork)}
+                  </Text>
+                  <Box fontSize="md">{sourceNetwork?.name}</Box>
+                </VStack>
+                <Image
+                  width="48px"
+                  height="48px"
+                  src={sourceNetwork?.icon}
+                  alt=""
+                />
+              </HStack>
+            </ShadowCard>
+          </GridItem>
+        )}
+      </Grid>
+    </Box>
+  );
+}