);
@@ -97,6 +95,7 @@ interface TransferStepProps {
}
function TransferStep({ action, actions, id, statusData }: TransferStepProps) {
+ const { data: bridge } = useBridgeByID(action.bridgeID);
const { data: sourceChain } = useChainByID(action.sourceChain);
const { data: destinationChain } = useChainByID(action.destinationChain);
@@ -143,20 +142,16 @@ function TransferStep({ action, actions, id, statusData }: TransferStepProps) {
}
}, [transfer?.state]);
- const renderExplorerLink = useMemo(() => {
- const packetTx =
- operationIndex === 0 ? transfer?.txs.sendTx : isNextOpSwap ? transfer?.txs.sendTx : transfer?.txs.receiveTx;
- if (!packetTx?.explorerLink) return null;
- return (
-
- );
+ const explorerLink = useMemo(() => {
+ const packetTx = (() => {
+ if (operationIndex === 0) return transfer?.txs.sendTx;
+ if (isNextOpSwap) return transfer?.txs.sendTx;
+ return transfer?.txs.receiveTx;
+ })();
+ if (!packetTx?.explorerLink) {
+ return null;
+ }
+ return makeExplorerLink(packetTx.explorerLink);
}, [isNextOpSwap, operationIndex, transfer?.txs.receiveTx, transfer?.txs.sendTx]);
const { getAsset } = useAssets();
@@ -173,16 +168,23 @@ function TransferStep({ action, actions, id, statusData }: TransferStepProps) {
);
@@ -191,31 +193,65 @@ function TransferStep({ action, actions, id, statusData }: TransferStepProps) {
return (
{renderTransferState}
-
-
- Transfer{" "}
- 
{" "}
- {asset.recommendedSymbol} from{" "}
- 
(e.currentTarget.src = "https://api.dicebear.com/6.x/shapes/svg")}
- />{" "}
- {sourceChain.prettyName} to{" "}
- 
(e.currentTarget.src = "https://api.dicebear.com/6.x/shapes/svg")}
- />{" "}
- {destinationChain.prettyName}
-
- {renderExplorerLink}
+
+
+ Transfer
+
+
+ {asset.recommendedSymbol}
+
+ from
+
+
+ {sourceChain.prettyName}
+
+
+
+ to
+
+
+ {destinationChain.prettyName}
+
+ {bridge && (
+ <>
+ with
+
+ {bridge.name.toLowerCase() !== "ibc" && (
+ 
+ )}
+
+ {bridge.name}
+
+
+ )}
+
+ {explorerLink && (
+
+ {explorerLink.shorthand}
+
+ )}
);
@@ -231,9 +267,13 @@ interface SwapStepProps {
function SwapStep({ action, actions, id, statusData }: SwapStepProps) {
const { getAsset } = useAssets();
- const assetIn = getAsset(action.sourceAsset, action.chain);
+ const assetIn = useMemo(() => {
+ return getAsset(action.sourceAsset, action.chain);
+ }, [action.chain, action.sourceAsset, getAsset]);
- const assetOut = getAsset(action.destinationAsset, action.chain);
+ const assetOut = useMemo(() => {
+ return getAsset(action.destinationAsset, action.chain);
+ }, [action.chain, action.destinationAsset, getAsset]);
const venue = SWAP_VENUES[action.venue];
@@ -274,20 +314,11 @@ function SwapStep({ action, actions, id, statusData }: SwapStepProps) {
}
}, [swap?.state]);
- const renderExplorerLink = useMemo(() => {
+ const explorerLink = useMemo(() => {
const receiveTx = swap?.txs.receiveTx;
- if (!receiveTx) return null;
- if (swap?.state !== "TRANSFER_SUCCESS") return null;
- return (
-
-
- {receiveTx.explorerLink.split("/").at(-1)?.slice(0, 6)}…{receiveTx.explorerLink.split("/").at(-1)?.slice(-6)}
-
-
- );
+ if (!receiveTx) return;
+ if (swap?.state !== "TRANSFER_SUCCESS") return;
+ return makeExplorerLink(receiveTx.explorerLink);
}, [swap?.state, swap?.txs.receiveTx]);
if (!assetIn && assetOut) {
@@ -295,24 +326,36 @@ function SwapStep({ action, actions, id, statusData }: SwapStepProps) {
{renderSwapState}
-
- Swap to{" "}
- ![]()
(e.currentTarget.src = "https://api.dicebear.com/6.x/shapes/svg")}
- src={assetOut.logoURI}
- />{" "}
- {assetOut.recommendedSymbol} on{" "}
- ![]()
(e.currentTarget.src = "https://api.dicebear.com/6.x/shapes/svg")}
- src={venue.imageURL}
- />{" "}
- {venue.name}
-
- {renderExplorerLink}
+
+ Swap to
+
+ 
+ {assetOut.recommendedSymbol}
+
+ on
+
+ 
+ {venue.name}
+
+
+ {explorerLink && (
+
+ {explorerLink.shorthand}
+
+ )}
);
@@ -323,22 +366,34 @@ function SwapStep({ action, actions, id, statusData }: SwapStepProps) {
{renderSwapState}
-
- Swap{" "}
- 
{" "}
- {assetIn.recommendedSymbol} on{" "}
- {" "}
- {venue.name}
-
- {renderExplorerLink}
+
+ Swap
+
+
+ {assetIn.recommendedSymbol}
+
+ on
+
+
+ {venue.name}
+
+
+ {explorerLink && (
+
+ {explorerLink.shorthand}
+
+ )}
);
@@ -352,28 +407,43 @@ function SwapStep({ action, actions, id, statusData }: SwapStepProps) {
{renderSwapState}
-
- Swap{" "}
- {" "}
- {assetIn.recommendedSymbol} for{" "}
- {" "}
- {assetOut.recommendedSymbol} on{" "}
- {" "}
- {venue.name}
-
- {renderExplorerLink}
+
+ Swap
+
+
+ {assetIn.recommendedSymbol}
+
+ for
+
+
+ {assetOut.recommendedSymbol}
+
+ on
+
+
+ {venue.name}
+
+
+ {explorerLink && (
+
+ {explorerLink.shorthand}
+
+ )}
);
@@ -459,6 +529,7 @@ function RouteDisplay({ route, isRouteExpanded, setIsRouteExpanded, broadcastedT
sourceChain: operation.axelarTransfer.fromChainID,
destinationChain: operation.axelarTransfer.toChainID,
id: `transfer-${transferCount}-${i}`,
+ bridgeID: operation.axelarTransfer.bridgeID,
});
asset = operation.axelarTransfer.asset;
@@ -466,13 +537,23 @@ function RouteDisplay({ route, isRouteExpanded, setIsRouteExpanded, broadcastedT
return;
}
- let sourceChain = "";
if ("cctpTransfer" in operation) {
- sourceChain = operation.cctpTransfer.fromChainID;
- } else {
- sourceChain = operation.transfer.chainID;
+ _actions.push({
+ type: "TRANSFER",
+ asset,
+ sourceChain: operation.cctpTransfer.fromChainID,
+ destinationChain: operation.cctpTransfer.toChainID,
+ id: `transfer-${transferCount}-${i}`,
+ bridgeID: operation.cctpTransfer.bridgeID,
+ });
+
+ asset = operation.cctpTransfer.burnToken;
+ transferCount++;
+ return;
}
+ const sourceChain = operation.transfer.chainID;
+
let destinationChain = "";
if (i === route.operations.length - 1) {
destinationChain = route.destAssetChainID;
@@ -487,9 +568,9 @@ function RouteDisplay({ route, isRouteExpanded, setIsRouteExpanded, broadcastedT
destinationChain = nextOperation.swap.swapOut.swapVenue.chainID;
}
} else if ("axelarTransfer" in nextOperation) {
- destinationChain = nextOperation.axelarTransfer.toChainID;
+ destinationChain = nextOperation.axelarTransfer.fromChainID;
} else if ("cctpTransfer" in nextOperation) {
- destinationChain = nextOperation.cctpTransfer.toChainID;
+ destinationChain = nextOperation.cctpTransfer.fromChainID;
} else {
destinationChain = nextOperation.transfer.chainID;
}
@@ -501,13 +582,10 @@ function RouteDisplay({ route, isRouteExpanded, setIsRouteExpanded, broadcastedT
sourceChain,
destinationChain,
id: `transfer-${transferCount}-${i}`,
+ bridgeID: operation.transfer.bridgeID,
});
- if ("cctpTransfer" in operation) {
- asset = operation.cctpTransfer.burnToken;
- } else {
- asset = operation.transfer.destDenom;
- }
+ asset = operation.transfer.destDenom;
transferCount++;
});
@@ -617,3 +695,33 @@ function Spinner() {
}
export default RouteDisplay;
+
+const Gap = {
+ Parent({ className, ...props }: ComponentProps<"div">) {
+ return (
+
+ );
+ },
+ Child({ className, ...props }: ComponentProps<"div">) {
+ return (
+
+ );
+ },
+};
+
+function makeExplorerLink(link: string) {
+ return {
+ link,
+ shorthand: `${link.split("/").at(-1)?.slice(0, 6)}…${link.split("/").at(-1)?.slice(-6)}`,
+ };
+}
+
+function onImageError(event: SyntheticEvent
) {
+ event.currentTarget.src = "https://api.dicebear.com/6.x/shapes/svg";
+}
diff --git a/src/components/SettingsButton.tsx b/src/components/SettingsButton.tsx
index 51499f21..f222295b 100644
--- a/src/components/SettingsButton.tsx
+++ b/src/components/SettingsButton.tsx
@@ -1,8 +1,8 @@
import { Cog6ToothIcon } from "@heroicons/react/20/solid";
-import { clsx } from "clsx";
import { ComponentProps } from "react";
import { disclosure } from "@/context/disclosures";
+import { cn } from "@/utils/ui";
import { SimpleTooltip } from "./SimpleTooltip";
@@ -10,7 +10,7 @@ export const SettingsButton = ({ className, ...props }: ComponentProps<"button">
return (