sync staging to main

next.config.js

@@ -56,6 +56,15 @@ let nextConfig = {
           "uuid",
         ]
       : [],
+  images: {
+    dangerouslyAllowSVG: true,
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
+  },
   webpack: (config, { dev, isServer }) => {
     if (dev && isServer) checkEnv();
     return config;

src/components/AssetSelect/AssetSelectContent.tsx

@@ -2,6 +2,7 @@ import { ArrowLeftIcon } from "@heroicons/react/20/solid";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { Asset } from "@skip-router/core";
 import { matchSorter } from "match-sorter";
+import Image from "next/image";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { formatUnits } from "viem";
 
@@ -93,10 +94,12 @@ function AssetSelectContent({ assets = [], balances, onChange, onClose, showChai
               className="flex w-full items-center gap-4 rounded-xl p-4 text-left transition-colors hover:bg-[#ECD9D9] focus:-outline-offset-2"
               onClick={() => (onClose(), onChange?.(asset))}
             >
-              <img
-                alt={asset.recommendedSymbol}
-                className="h-12 w-12 rounded-full"
-                src={asset.logoURI}
+              <Image
+                height={48}
+                width={48}
+                alt={asset.recommendedSymbol || "symbol"}
+                className="h-12 w-12 rounded-full object-contain"
+                src={asset.logoURI || "/logo-fallback.png"}
                 onError={(e) => (e.currentTarget.src = "https://api.dicebear.com/6.x/shapes/svg")}
               />
               <div className="flex-1">

src/components/AssetSelect/index.tsx

@@ -1,5 +1,6 @@
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import { Asset } from "@skip-router/core";
+import Image from "next/image";
 import { useState } from "react";
 
 import { Dialog, DialogContent, DialogTrigger } from "@/components/Dialog";
@@ -35,10 +36,12 @@ function AssetSelect({ asset, assets, balances, onChange, showChainInfo, isBalan
           data-testid="select-asset"
         >
           {asset && (
-            <img
-              alt={asset.recommendedSymbol}
-              className="h-6 w-6 rounded-full"
-              src={asset.logoURI}
+            <Image
+              alt={asset.recommendedSymbol || "asset symbol"}
+              height={24}
+              width={24}
+              className="h-6 w-6 rounded-full object-contain"
+              src={asset.logoURI || "/logo-fallback.png"}
               onError={(event) => (event.currentTarget.src = "https://api.dicebear.com/6.x/shapes/svg")}
             />
           )}

src/components/ChainSelect/ChainSelectContent.tsx

@@ -1,6 +1,7 @@
 import { ArrowLeftIcon } from "@heroicons/react/20/solid";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { matchSorter } from "match-sorter";
+import Image from "next/image";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 import { Chain } from "@/hooks/useChains";
@@ -86,12 +87,14 @@ function ChainSelectContent({ chains, onChange, onClose }: Props) {
                 onClick={() => onChange(chain)}
                 data-testid="chain-item"
               >
-                <img
+                <Image
                   alt={chain.prettyName}
-                  className="h-12 w-12 rounded-full"
-                  src={chain.logoURI}
-                  onError={(e) => (e.currentTarget.src = "https://api.dicebear.com/6.x/shapes/svg")}
+                  className="h-[48px] w-[48px] rounded-full object-contain"
+                  width={48}
+                  height={48}
+                  src={chain.logoURI || "/logo-fallback.png"}
                 />
+
                 <div>
                   <p className="text-lg font-semibold">{chain.prettyName}</p>
                   <p className="text-sm text-neutral-500">{chain.chainID}</p>

src/components/ConnectedWalletButton.tsx

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import { ComponentProps, forwardRef } from "react";
 
 import { cn } from "@/utils/ui";
@@ -22,9 +23,11 @@ export const ConnectedWalletButton = forwardRef<HTMLButtonElement, Props>(
         ref={ref}
       >
         {walletLogo && (
-          <img
+          <Image
+            height={16}
+            width={16}
             alt={walletName}
-            className="h-4 w-4"
+            className="object-contain"
             src={walletLogo}
           />
         )}

src/components/RouteDisplay/RouteEnd.tsx

@@ -1,3 +1,5 @@
+import Image from "next/image";
+
 import { SimpleTooltip } from "../SimpleTooltip";
 
 export interface RouteEndProps {
@@ -10,9 +12,11 @@ export interface RouteEndProps {
 export const RouteEnd = ({ amount, symbol, logo, chain }: RouteEndProps) => {
   return (
     <div className="flex items-center gap-2">
-      <div className="h-14 w-14 rounded-full border-2 border-neutral-200 bg-white p-1.5">
-        <img
-          className="h-full w-full"
+      <div className="relative h-14 w-14 rounded-full border-2 border-neutral-200 bg-white p-1.5">
+        <Image
+          height={54}
+          width={54}
+          className="object-contain"
           src={logo}
           alt={chain}
         />

src/components/RouteDisplay/SwapStep.tsx

@@ -1,4 +1,5 @@
 import { SwapVenue } from "@skip-router/core";
+import Image from "next/image";
 import { useMemo } from "react";
 
 import { SWAP_VENUES } from "@/constants/swap-venues";
@@ -97,19 +98,23 @@ export const SwapStep = ({ action, actions, statusData }: SwapStepProps) => {
           <Gap.Parent className="text-sm text-neutral-500">
             <span>Swap to</span>
             <Gap.Child>
-              <img
-                alt={assetOut.name}
-                className="inline-block h-4 w-4"
+              <Image
+                height={16}
+                width={16}
+                alt={assetOut.name || "assetOut"}
+                className="inline-block h-4 w-4 object-contain"
                 onError={onImageError}
-                src={assetOut.logoURI}
+                src={assetOut.logoURI || "/logo-fallback.png"}
               />
               <span className="font-semibold text-black">{assetOut.recommendedSymbol}</span>
             </Gap.Child>
             <span>on</span>
             <Gap.Child>
-              <img
+              <Image
+                height={16}
+                width={16}
                 alt={action.venue.name}
-                className="inline-block h-4 w-4"
+                className="inline-block h-4 w-4 object-contain"
                 onError={onImageError}
                 src={action.venue.logoUri}
               />
@@ -138,16 +143,18 @@ export const SwapStep = ({ action, actions, statusData }: SwapStepProps) => {
           <Gap.Parent className="text-sm text-neutral-500">
             <span>Swap</span>
             <Gap.Child>
-              <img
-                className="inline-block h-4 w-4"
-                src={assetIn.logoURI}
-                alt={assetIn.name}
+              <Image
+                height={16}
+                width={16}
+                className="inline-block h-4 w-4 object-contain"
+                src={assetIn.logoURI || "/logo-fallback.png"}
+                alt={assetIn.name || "assetIn"}
               />
               <span className="font-semibold text-black">{assetIn.recommendedSymbol}</span>
             </Gap.Child>
             <span>on</span>
             <Gap.Child>
-              <img
+              <Image
                 className="inline-block h-4 w-4"
                 src={action.venue.logoUri}
                 alt={action.venue.name}
@@ -183,28 +190,37 @@ export const SwapStep = ({ action, actions, statusData }: SwapStepProps) => {
         <Gap.Parent className="text-sm text-neutral-500">
           <span>Swap</span>
           <Gap.Child>
-            <img
-              className="inline-block h-4 w-4"
-              src={assetIn.logoURI}
-              alt={assetIn.name}
+            <Image
+              height={16}
+              width={16}
+              className="inline-block h-4 w-4 object-contain"
+              onError={onImageError}
+              src={assetIn.logoURI || "/logo-fallback.png"}
+              alt={assetIn.name || "assetIn"}
             />
+
             <span className="font-semibold text-black">{assetIn.recommendedSymbol}</span>
           </Gap.Child>
           <span>for</span>
           <Gap.Child>
-            <img
-              className="inline-block h-4 w-4"
-              src={assetOut.logoURI}
-              alt={assetOut.name}
+            <Image
+              height={16}
+              width={16}
+              className="inline-block h-4 w-4 object-contain"
+              src={assetOut.logoURI || "/logo-fallback.png"}
+              alt={assetOut.name || "assetOut"}
             />
             <span className="font-semibold text-black">{assetOut.recommendedSymbol}</span>
           </Gap.Child>
           <Gap.Child>
             <span>on</span>
-            <img
-              className="inline-block h-4 w-4"
-              src={action.venue.logoUri}
+            <Image
+              height={16}
+              width={16}
               alt={action.venue.name}
+              className="inline-block h-4 w-4 object-contain"
+              onError={onImageError}
+              src={action.venue.logoUri}
             />
             <span className="font-semibold text-black">{venue.prettyName}</span>
           </Gap.Child>

src/components/RouteDisplay/TransferStep.tsx

@@ -1,4 +1,5 @@
 import { BridgeType } from "@skip-router/core";
+import Image from "next/image";
 import { useMemo } from "react";
 
 import { useAssets } from "@/context/assets";
@@ -101,9 +102,11 @@ export const TransferStep = ({ action, actions, statusData }: TransferStepProps)
             <span>Transfer</span>
             <span>from</span>
             <Gap.Child>
-              <img
-                className="inline-block h-4 w-4"
-                src={sourceChain.logoURI}
+              <Image
+                className="inline-block h-4 w-4 object-contain"
+                height={16}
+                width={16}
+                src={sourceChain.logoURI || "/logo-fallback.png"}
                 alt={sourceChain.prettyName}
                 onError={onImageError}
               />
@@ -113,9 +116,11 @@ export const TransferStep = ({ action, actions, statusData }: TransferStepProps)
           <Gap.Parent>
             <span>to</span>
             <Gap.Child>
-              <img
-                className="inline-block h-4 w-4"
-                src={destinationChain.logoURI}
+              <Image
+                className="inline-block h-4 w-4 object-contain"
+                height={16}
+                width={16}
+                src={destinationChain.logoURI || "/logo-fallback.png"}
                 alt={destinationChain.prettyName}
                 onError={onImageError}
               />
@@ -126,8 +131,10 @@ export const TransferStep = ({ action, actions, statusData }: TransferStepProps)
                 <span>with</span>
                 <Gap.Child>
                   {bridge.name.toLowerCase() !== "ibc" && (
-                    <img
-                      className="inline-block h-4 w-4"
+                    <Image
+                      className="inline-block h-4 w-4 object-contain"
+                      height={16}
+                      width={16}
                       src={bridge.logoURI}
                       alt={bridge.name}
                       onError={onImageError}
@@ -164,18 +171,22 @@ export const TransferStep = ({ action, actions, statusData }: TransferStepProps)
         <Gap.Parent>
           <span>Transfer</span>
           <Gap.Child>
-            <img
-              className="inline-block h-4 w-4"
-              src={asset.logoURI}
-              alt={asset.name}
+            <Image
+              className="inline-block h-4 w-4 object-contain"
+              height={16}
+              width={16}
+              src={asset.logoURI || "/logo-fallback.png"}
+              alt={asset.name || "asset"}
             />
             <span className="font-semibold text-black">{asset.recommendedSymbol}</span>
           </Gap.Child>
           <span>from</span>
           <Gap.Child>
-            <img
-              className="inline-block h-4 w-4"
-              src={sourceChain.logoURI}
+            <Image
+              className="inline-block h-4 w-4 object-contain"
+              height={16}
+              width={16}
+              src={sourceChain.logoURI || "/logo-fallback.png"}
               alt={sourceChain.prettyName}
               onError={onImageError}
             />
@@ -185,9 +196,11 @@ export const TransferStep = ({ action, actions, statusData }: TransferStepProps)
         <Gap.Parent>
           <span>to</span>
           <Gap.Child>
-            <img
-              className="inline-block h-4 w-4"
-              src={destinationChain.logoURI}
+            <Image
+              className="inline-block h-4 w-4 object-contain"
+              height={16}
+              width={16}
+              src={destinationChain.logoURI || "/logo-fallback.png"}
               alt={destinationChain.prettyName}
               onError={onImageError}
             />
@@ -198,8 +211,10 @@ export const TransferStep = ({ action, actions, statusData }: TransferStepProps)
               <span>with</span>
               <Gap.Child>
                 {bridge.name.toLowerCase() !== "ibc" && (
-                  <img
-                    className="inline-block h-4 w-4"
+                  <Image
+                    className="inline-block h-4 w-4 object-contain"
+                    height={16}
+                    width={16}
                     src={bridge.logoURI}
                     alt={bridge.name}
                     onError={onImageError}

src/components/SwapWidget/SwapDetails.tsx

@@ -45,16 +45,29 @@ export const SwapDetails = ({
       if ("axelarTransfer" in op) return op;
     }
   }, [route]);
+  const hyperlaneTransferOperation = useMemo(() => {
+    for (const op of route.operations) {
+      if ("hyperlaneTransfer" in op) return op;
+    }
+  }, [route]);
 
   const bridgingFee = useMemo(() => {
-    if (!axelarTransferOperation) return;
-    const { feeAmount, feeAsset, usdFeeAmount } = axelarTransferOperation.axelarTransfer;
-    const computed = (+feeAmount / Math.pow(10, feeAsset.decimals || 18)).toLocaleString("en-US", {
-      maximumFractionDigits: 6,
-    });
+    if (hyperlaneTransferOperation) {
+      const { feeAmount, feeAsset, usdFeeAmount } = hyperlaneTransferOperation.hyperlaneTransfer;
+      const computed = (+feeAmount / Math.pow(10, feeAsset.decimals || 6)).toLocaleString("en-US", {
+        maximumFractionDigits: 6,
+      });
+      return { inAsset: `${computed} ${feeAsset.symbol}`, inUSD: usdFeeAmount && `${formatUSD(usdFeeAmount)}` };
+    }
+    if (axelarTransferOperation) {
+      const { feeAmount, feeAsset, usdFeeAmount } = axelarTransferOperation.axelarTransfer;
+      const computed = (+feeAmount / Math.pow(10, feeAsset.decimals || 18)).toLocaleString("en-US", {
+        maximumFractionDigits: 6,
+      });
 
-    return { inAsset: `${computed} ${feeAsset.symbol}`, inUSD: `${formatUSD(usdFeeAmount)}` };
-  }, [axelarTransferOperation]);
+      return { inAsset: `${computed} ${feeAsset.symbol}`, inUSD: `${formatUSD(usdFeeAmount)}` };
+    }
+  }, [axelarTransferOperation, hyperlaneTransferOperation]);
 
   if (!(sourceChain && sourceAsset && destinationChain && destinationAsset)) {
     return null;