Add token and network icons and use token name (#278)

Author: dguenther

main/api/chainport/index.ts

@@ -11,7 +11,7 @@ import {
   fetchChainportTokens,
   fetchChainportTransactionStatus,
 } from "./vendor/requests";
-import { ChainportNetwork } from "./vendor/types";
+import { ChainportTokenWithNetwork } from "./vendor/types";
 import {
   assertTokenPathsApiResponse,
   assertTokensApiResponse,
@@ -52,7 +52,9 @@ ${err}
       }),
     )
     .query(
-      async (opts): Promise<{ chainportTokenPaths: ChainportNetwork[] }> => {
+      async (
+        opts,
+      ): Promise<{ chainportTokenPaths: ChainportTokenWithNetwork[] }> => {
         const ironfish = await manager.getIronfish();
         const rpcClient = await ironfish.rpcClient();
         const network = await rpcClient.chain.getNetworkInfo();

main/api/chainport/vendor/requests.ts

@@ -8,6 +8,7 @@ import {
   ChainportBridgeTransaction,
   ChainportNetwork,
   ChainportToken,
+  ChainportTokenWithNetwork,
   ChainportTransactionStatus,
 } from "./types";
 
@@ -45,13 +46,16 @@ export const fetchChainportTokens = async (
 export const fetchChainportTokenPaths = async (
   networkId: number,
   tokenId: number,
-): Promise<ChainportNetwork[]> => {
+): Promise<ChainportTokenWithNetwork[]> => {
   const config = getConfig(networkId);
-  const url = new URL(
-    `/bridges/tokens/${tokenId}/networks`,
-    config.endpoint,
-  ).toString();
-  return (await makeChainportRequest<{ data: ChainportNetwork[] }>(url)).data;
+  const url = new URL(`/bridges/tokens/${tokenId}/networks`, config.endpoint);
+  url.searchParams.append("with_tokens", true.toString());
+
+  return (
+    await makeChainportRequest<{ data: ChainportTokenWithNetwork[] }>(
+      url.toString(),
+    )
+  ).data;
 };
 
 export const fetchChainportBridgeTransaction = async (

main/api/chainport/vendor/types.ts

@@ -46,6 +46,11 @@ export type ChainportToken = {
   is_lifi: boolean;
 };
 
+export type ChainportTokenWithNetwork = {
+  network: ChainportNetwork;
+  token: ChainportToken;
+};
+
 export type ChainportTransactionStatus =
   | Record<string, never> // empty object
   | {

renderer/components/AssetAmountInput/AssetAmountInput.tsx

@@ -52,6 +52,12 @@ export function AssetAmountInput({
           }}
           renderChildren={(children) => (
             <HStack minWidth="100px">
+              <Image
+                src={selectedAsset?.asset.verification.logoURI ?? ""}
+                alt=""
+                height="24"
+                width="24"
+              />
               {children}
               {selectedAsset?.asset.verification.status === "verified" && (
                 <Image src={verifiedIcon} alt="" />

renderer/components/BridgeAssetsForm/BridgeAssetsForm.tsx

@@ -138,6 +138,12 @@ function BridgeAssetsFormContent({
           ...item,
           label: (
             <HStack>
+              <Image
+                src={item.asset.verification.logoURI ?? ""}
+                alt=""
+                width="24"
+                height="24"
+              />
               <ItemText>{item.label}</ItemText>
               {item.asset.verification.status === "verified" && (
                 <Image src={verifiedIcon} alt="" />
@@ -158,7 +164,7 @@ function BridgeAssetsFormContent({
 
   const selectedAsset = assetOptionsMap.get(assetIdValue);
   const selectedNetwork = availableNetworks?.find(
-    (n) => destinationNetworkId === n.chainport_network_id.toString(),
+    (n) => destinationNetworkId === n.network.chainport_network_id.toString(),
   );
 
   const handleIfAmountExceedsBalance = useCallback(
@@ -229,7 +235,7 @@ function BridgeAssetsFormContent({
     ) {
       setValue(
         "destinationNetworkId",
-        availableNetworks[0].chainport_network_id.toString(),
+        availableNetworks[0].network.chainport_network_id.toString(),
       );
     }
   }, [availableNetworks, destinationNetworkId, setValue]);
@@ -242,7 +248,8 @@ function BridgeAssetsFormContent({
 
           const destinationNetwork = availableNetworks?.find(
             (n) =>
-              data.destinationNetworkId === n.chainport_network_id.toString(),
+              data.destinationNetworkId ===
+              n.network.chainport_network_id.toString(),
           );
           if (!destinationNetwork) {
             return;
@@ -372,14 +379,24 @@ function BridgeAssetsFormContent({
                 value={destinationNetworkId ?? undefined}
                 label={formatMessage(messages.destinationNetwork)}
                 options={(availableNetworks ?? []).map((n) => ({
-                  label: n.label,
-                  value: n.chainport_network_id.toString(),
+                  label: (
+                    <HStack>
+                      <Image
+                        src={n.network.network_icon}
+                        alt={n.network.label}
+                        width="24"
+                        height="24"
+                      />
+                      <ItemText>{n.network.label}</ItemText>
+                    </HStack>
+                  ),
+                  value: n.network.chainport_network_id.toString(),
                 }))}
                 renderChildren={(children) => (
                   <HStack>
                     {selectedNetwork && (
                       <ChakraImage
-                        src={selectedNetwork.network_icon}
+                        src={selectedNetwork.network.network_icon}
                         boxSize="24px"
                       />
                     )}

renderer/components/BridgeAssetsForm/BridgeConfirmationModal/BridgeConfirmationModal.tsx

@@ -19,7 +19,6 @@ import { trpcReact, TRPCRouterOutputs } from "@/providers/TRPCProvider";
 import { PillButton } from "@/ui/PillButton/PillButton";
 import { CurrencyUtils } from "@/utils/currency";
 import { formatOre } from "@/utils/ironUtils";
-import { IRON_ID, IRON_SYMBOL } from "@shared/constants";
 
 import { StepIdle } from "./StepIdle";
 import { AssetOptionType } from "../../AssetAmountInput/utils";
@@ -115,7 +114,7 @@ export function BridgeConfirmationModal({
       amount: convertedAmount.toString(),
       assetId: chainportToken.web3_address,
       to: formData.destinationAddress,
-      selectedNetwork: destinationNetwork.chainport_network_id,
+      selectedNetwork: destinationNetwork.network.chainport_network_id,
     },
     {
       retry: false,
@@ -190,17 +189,12 @@ export function BridgeConfirmationModal({
       chainportToken.decimals,
     );
 
-    return `${convertedAmount} ${
-      chainportToken.web3_address === IRON_ID
-        ? IRON_SYMBOL
-        : chainportToken.symbol
-    }`;
+    return `${convertedAmount} ${destinationNetwork.token.symbol}`;
   }, [
     isTransactionDetailsLoading,
     txDetails,
+    destinationNetwork.token.symbol,
     chainportToken.decimals,
-    chainportToken.symbol,
-    chainportToken.web3_address,
   ]);
 
   const chainportGasFee = useMemo(() => {
@@ -279,10 +273,12 @@ export function BridgeConfirmationModal({
           {isSubmitIdle && (
             <StepIdle
               fromAccount={formData.fromAccount}
-              destinationNetwork={destinationNetwork.label}
-              destinationNetworkIcon={destinationNetwork.network_icon}
+              destinationNetwork={destinationNetwork.network.label}
+              destinationNetworkIcon={destinationNetwork.network.network_icon}
               amountSending={amountToSend}
+              amountSendingIcon={selectedAsset.asset.verification.logoURI}
               amountReceiving={amountToReceive}
+              amountReceivingIcon={destinationNetwork.token.token_image}
               destinationAddress={formData.destinationAddress}
               chainportGasFee={chainportGasFee}
               chainportBridgeFee={chainportBridgeFee}

renderer/components/BridgeAssetsForm/BridgeConfirmationModal/StepIdle.tsx

@@ -85,7 +85,9 @@ type Props = {
   destinationNetwork: string;
   destinationNetworkIcon: string;
   amountSending: ReactNode;
+  amountSendingIcon: string | undefined;
   amountReceiving: ReactNode;
+  amountReceivingIcon: string;
   destinationAddress: string;
   chainportGasFee: ReactNode;
   chainportBridgeFee: ReactNode;
@@ -103,7 +105,9 @@ export function StepIdle({
   destinationNetwork,
   destinationNetworkIcon,
   amountSending,
+  amountSendingIcon,
   amountReceiving,
+  amountReceivingIcon,
   destinationAddress,
   chainportGasFee,
   chainportBridgeFee,
@@ -200,15 +204,15 @@ export function StepIdle({
             <LineItem
               label={formatMessage(messages.sendingLabel)}
               content={amountSending}
-              icon={ironfishIcon}
+              icon={amountSendingIcon ?? ironfishIcon}
             />
           </GridItem>
           <GridItem>
             <LineItem
               label={formatMessage(messages.receivingLabel)}
               content={amountReceiving}
               tooltip={formatMessage(messages.receivingTooltip)}
-              icon={chainportIcon}
+              icon={amountReceivingIcon}
             />
           </GridItem>
         </Grid>

shared/chainport.ts

@@ -3,6 +3,7 @@ import { z } from "zod";
 import type {
   ChainportNetwork,
   ChainportToken,
+  ChainportTokenWithNetwork,
 } from "../main/api/chainport/vendor/types";
 
 type ZodTypeValue<Value, ZodType extends z.ZodType> = undefined extends Value
@@ -57,7 +58,12 @@ const chainportTokenSchema = createSchema<ChainportToken>({
 });
 
 const TokensApiResponseSchema = z.array(chainportTokenSchema);
-const TokenPathsApiResponseSchema = z.array(chainportNetworkSchema);
+const TokenPathsApiResponseSchema = z.array(
+  createSchema<ChainportTokenWithNetwork>({
+    token: chainportTokenSchema,
+    network: chainportNetworkSchema,
+  }),
+);
 
 export function assertTokensApiResponse(data: unknown): ChainportToken[] {
   try {
@@ -70,7 +76,9 @@ ${err}
   }
 }
 
-export function assertTokenPathsApiResponse(data: unknown): ChainportNetwork[] {
+export function assertTokenPathsApiResponse(
+  data: unknown,
+): ChainportTokenWithNetwork[] {
   try {
     return TokenPathsApiResponseSchema.parse(data);
   } catch (err) {