Skip to content

Commit

Permalink
chore: housekeeping RouteDisplay
Browse files Browse the repository at this point in the history
  • Loading branch information
@grikomsn
grikomsn committed Jan 23, 2024
1 parent b2ac228 commit 7d940fe
Showing 1 changed file with 66 additions and 54 deletions.
120 changes: 66 additions & 54 deletions src/components/RouteDisplay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@
import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/20/solid";
import { RouteResponse } from "@skip-router/core";
import { ethers } from "ethers";
import { Dispatch, FC, Fragment, SetStateAction, useMemo } from "react";
import { Dispatch, Fragment, SetStateAction, useMemo } from "react";

import { useAssets } from "@/context/assets";
import { useChainByID } from "@/hooks/useChains";
import { useBroadcastedTxsStatus } from "@/solve";

import { AdaptiveLink } from "./AdaptiveLink";
import { SimpleTooltip } from "./SimpleTooltip";
import { BroadcastedTx } from "./TransactionDialog/TransactionDialogContent";

export interface SwapVenueConfig {
Expand Down Expand Up @@ -54,12 +55,14 @@ interface SwapAction {

type Action = TransferAction | SwapAction;

const RouteEnd: FC<{
interface RouteEndProps {
amount: string;
symbol: string;
chain: string;
logo: string;
}> = ({ amount, symbol, logo, chain }) => {
}

function 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">
Expand All @@ -71,19 +74,28 @@ const RouteEnd: FC<{
</div>
<div className="font-semibold">
<p>
{amount} {symbol}
<SimpleTooltip label={`${amount} ${symbol}`}>
<span className="cursor-help tabular-nums underline decoration-neutral-400 decoration-dotted underline-offset-4">
{parseFloat(amount).toLocaleString("en-US", {
maximumFractionDigits: 8,
})}
</span>
</SimpleTooltip>{" "}
{symbol}
</p>
<p className="text-sm text-neutral-400">On {chain}</p>
</div>
</div>
);
};
}

const TransferStep: FC<{
interface TransferStepProps {
action: TransferAction;
id: string;
statusData?: ReturnType<typeof useBroadcastedTxsStatus>["data"];
}> = ({ action, id, statusData }) => {
}

function TransferStep({ action, id, statusData }: TransferStepProps) {
const { data: sourceChain } = useChainByID(action.sourceChain);
const { data: destinationChain } = useChainByID(action.destinationChain);

Expand All @@ -92,7 +104,7 @@ const TransferStep: FC<{
const transfer = statusData?.transferSequence[operationCount];

// We can assume that the transfer is successful when the state is TRANSFER_SUCCESS or TRANSFER_RECEIVED
const transferState = useMemo(() => {
const renderTransferState = useMemo(() => {
switch (transfer?.state) {
case "TRANSFER_SUCCESS":
return (
Expand Down Expand Up @@ -124,7 +136,7 @@ const TransferStep: FC<{
}
}, [transfer?.state]);

const renderExplorerLink = () => {
const renderExplorerLink = useMemo(() => {
if (!transfer?.explorerLink) return null;
return (
<AdaptiveLink
Expand All @@ -136,7 +148,7 @@ const TransferStep: FC<{
</span>
</AdaptiveLink>
);
};
}, [transfer?.explorerLink]);

const { getAsset } = useAssets();

Expand All @@ -150,7 +162,7 @@ const TransferStep: FC<{
if (!asset) {
return (
<div className="flex items-center justify-between gap-2">
<div className="flex h-14 w-14 flex-shrink-0 items-center justify-center">{transferState}</div>
<div className="flex h-14 w-14 flex-shrink-0 items-center justify-center">{renderTransferState}</div>
<div className="flex-1">
<p className="max-w-full break-all text-sm text-neutral-500">
Transfer to{" "}
Expand All @@ -161,15 +173,15 @@ const TransferStep: FC<{
/>{" "}
<span className="font-semibold text-black">{destinationChain.prettyName}</span>
</p>
{renderExplorerLink()}
{renderExplorerLink}
</div>
</div>
);
}

return (
<div className="flex items-center gap-2">
<div className="flex h-14 w-14 flex-shrink-0 items-center justify-center">{transferState}</div>
<div className="flex h-14 w-14 flex-shrink-0 items-center justify-center">{renderTransferState}</div>
<div className="max-w-[18rem]">
<p className="text-sm text-neutral-500">
Transfer{" "}
Expand All @@ -194,18 +206,20 @@ const TransferStep: FC<{
/>{" "}
<span className="font-semibold text-black">{destinationChain.prettyName}</span>
</p>
{renderExplorerLink()}
{renderExplorerLink}
</div>
</div>
);
};
}

const SwapStep: FC<{
interface SwapStepProps {
action: SwapAction;
actions: Action[];
id: string;
statusData?: ReturnType<typeof useBroadcastedTxsStatus>["data"];
}> = ({ action, actions, id, statusData }) => {
}

function SwapStep({ action, actions, id, statusData }: SwapStepProps) {
const { getAsset } = useAssets();

const assetIn = getAsset(action.sourceAsset, action.chain);
Expand All @@ -225,7 +239,7 @@ const SwapStep: FC<{
const swap = statusData?.transferSequence[operationCount];

// as for swap operations, we can assume that the swap is successful if the previous transfer state is TRANSFER_SUCCESS
const swapState = useMemo(() => {
const renderSwapState = useMemo(() => {
switch (swap?.state) {
case "TRANSFER_RECEIVED":
return (
Expand All @@ -251,7 +265,7 @@ const SwapStep: FC<{
}
}, [swap?.state]);

const renderExplorerLink = () => {
const renderExplorerLink = useMemo(() => {
if (!swap?.explorerLink) return null;
if (swap?.state !== "TRANSFER_SUCCESS") return null;
return (
Expand All @@ -264,12 +278,12 @@ const SwapStep: FC<{
</span>
</AdaptiveLink>
);
};
}, [swap?.explorerLink, swap?.state]);

if (!assetIn && assetOut) {
return (
<div className="flex items-center gap-2">
<div className="flex h-14 w-14 items-center justify-center">{swapState}</div>
<div className="flex h-14 w-14 items-center justify-center">{renderSwapState}</div>
<div className="max-w-[18rem]">
<p className="text-sm text-neutral-500">
Swap to{" "}
Expand All @@ -288,7 +302,7 @@ const SwapStep: FC<{
/>{" "}
<span className="font-semibold text-black">{venue.name}</span>
</p>
{renderExplorerLink()}
{renderExplorerLink}
</div>
</div>
);
Expand All @@ -297,7 +311,7 @@ const SwapStep: FC<{
if (assetIn && !assetOut) {
return (
<div className="flex items-center gap-2">
<div className="flex h-14 w-14 items-center justify-center">{swapState}</div>
<div className="flex h-14 w-14 items-center justify-center">{renderSwapState}</div>
<div>
<p className="text-sm text-neutral-500">
Swap{" "}
Expand All @@ -314,7 +328,7 @@ const SwapStep: FC<{
/>{" "}
<span className="font-semibold text-black">{venue.name}</span>
</p>
{renderExplorerLink()}
{renderExplorerLink}
</div>
</div>
);
Expand All @@ -326,7 +340,7 @@ const SwapStep: FC<{

return (
<div className="flex items-center gap-2">
<div className="flex h-14 w-14 items-center justify-center">{swapState}</div>
<div className="flex h-14 w-14 items-center justify-center">{renderSwapState}</div>
<div className="max-w-[18rem]">
<p className="text-sm text-neutral-500">
Swap{" "}
Expand All @@ -349,20 +363,20 @@ const SwapStep: FC<{
/>{" "}
<span className="font-semibold text-black">{venue.name}</span>
</p>
{renderExplorerLink()}
{renderExplorerLink}
</div>
</div>
);
};
}

interface Props {
interface RouteDisplayProps {
route: RouteResponse;
isRouteExpanded: boolean;
setIsRouteExpanded: Dispatch<SetStateAction<boolean>>;
broadcastedTxs?: BroadcastedTx[];
}

const RouteDisplay: FC<Props> = ({ route, isRouteExpanded, setIsRouteExpanded, broadcastedTxs }) => {
function RouteDisplay({ route, isRouteExpanded, setIsRouteExpanded, broadcastedTxs }: RouteDisplayProps) {
const { getAsset } = useAssets();

const sourceAsset = getAsset(route.sourceAssetDenom, route.sourceAssetChainID);
Expand Down Expand Up @@ -507,35 +521,33 @@ const RouteDisplay: FC<Props> = ({ route, isRouteExpanded, setIsRouteExpanded, b
/>
{isRouteExpanded && (
<button
className="text-xs font-medium text-[#FF486E] hover:underline"
className="animate-slide-up-and-fade text-xs font-medium text-[#FF486E] hover:underline"
onClick={() => setIsRouteExpanded(false)}
>
Hide Details
</button>
)}
</div>
{isRouteExpanded &&
actions.map((action, i) => {
return (
<Fragment key={i}>
{action.type === "SWAP" && (
<SwapStep
action={action}
actions={actions}
id={action.id}
statusData={statusData}
/>
)}
{action.type === "TRANSFER" && (
<TransferStep
action={action}
id={action.id}
statusData={statusData}
/>
)}
</Fragment>
);
})}
actions.map((action, i) => (
<Fragment key={i}>
{action.type === "SWAP" && (
<SwapStep
action={action}
actions={actions}
id={action.id}
statusData={statusData}
/>
)}
{action.type === "TRANSFER" && (
<TransferStep
action={action}
id={action.id}
statusData={statusData}
/>
)}
</Fragment>
))}
{!isRouteExpanded && (
<div className="flex h-14 w-14 items-center justify-center">
<button
Expand Down Expand Up @@ -566,9 +578,9 @@ const RouteDisplay: FC<Props> = ({ route, isRouteExpanded, setIsRouteExpanded, b
</div>
</div>
);
};
}

const Spinner = () => {
function Spinner() {
return (
<svg
className="h-4 w-4 animate-spin text-[#FF486E]"
Expand All @@ -591,6 +603,6 @@ const Spinner = () => {
/>
</svg>
);
};
}

export default RouteDisplay;

0 comments on commit 7d940fe

Please sign in to comment.