Skip to content

Commit

Permalink
Arb view
Browse files Browse the repository at this point in the history
  • Loading branch information
@philipjames44
philipjames44 committed Jun 9, 2024
1 parent 999a868 commit 63821ac
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 36 deletions.
2 changes: 1 addition & 1 deletion src/components/executionHistory/blockDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export const BlockDetails = ({ blockSummary }: BlockDetailsProps) => {
{blockSummary.swapExecutions.length}
</Text>
<Text fontSize={"medium"} fontStyle={"monospace"}>
{"Arbs: "}
{"Asset Arbs: "}
{blockSummary.arbExecutions.length}
</Text>
</VStack>
Expand Down
178 changes: 143 additions & 35 deletions src/pages/block/[block_height].tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import Layout from "@/components/layout";
import { useRouter } from "next/router";
import { Box, Text, VStack, IconButton } from "@chakra-ui/react";
import {
Box,
Text,
VStack,
IconButton,
HStack,
Avatar,
} from "@chakra-ui/react";
import { useEffect, useState } from "react";
import { BlockDetailedSummaryData } from "@/utils/types/block";
import { BlockInfo, LiquidityPositionEvent } from "@/utils/indexer/types/lps";
Expand All @@ -17,6 +24,7 @@ import {
import BigNumber from "bignumber.js";
import { fetchAllTokenAssets } from "@/utils/token/tokenFetch";
import { Token } from "@/utils/types/token";
import { fromBaseUnit } from "@/utils/math/hiLo";

export const Price = ({
trace,
Expand All @@ -43,10 +51,16 @@ export const Price = ({
if (firstValueMetadata?.symbol && lastValueMetadata?.symbol) {
const inputDisplayDenomExponent = firstValueMetadata.decimals ?? 0;
const outputDisplayDenomExponent = lastValueMetadata.decimals ?? 0;
const formattedInputAmount =
Number(inputValue.amount) / 10 ** inputDisplayDenomExponent;
const formattedOutputAmount =
Number(outputValue.amount) / 10 ** outputDisplayDenomExponent;
const formattedInputAmount = fromBaseUnit(
BigInt(inputValue.amount?.lo ?? 0),
BigInt(inputValue.amount?.hi ?? 0),
inputDisplayDenomExponent
).toFixed(6);
const formattedOutputAmount = fromBaseUnit(
BigInt(outputValue.amount?.lo ?? 0),
BigInt(outputValue.amount?.hi ?? 0),
outputDisplayDenomExponent
).toFixed(6);
const outputToInputRatio = new BigNumber(formattedOutputAmount)
.dividedBy(formattedInputAmount)
.toFormat(outputDisplayDenomExponent);
Expand Down Expand Up @@ -86,17 +100,59 @@ export const Trace = ({
type: TraceType;
}) => {
return (
<div>
<div>
<span>
TODO - Display trace
</span>
</div>
{/* Only render price for non arbs (bc arbs are circular) */}
<Box width="100%" paddingLeft="0%">
<HStack
spacing={2}
align="start"
justifyContent="space-between"
padding="2px"
whiteSpace="nowrap"
width={"100%"}
position="relative"
>
{/* Background line for trace connections */}
<Box
position="absolute"
top="50%"
left="0"
right="0"
height="2px"
backgroundColor="var(--charcoal-tertiary-bright)"
zIndex="0"
width="100%"
/>
{trace.value.map((value, index) => {
const metadata =
metadataByAssetId[value.assetId?.inner as unknown as string];
const displayDenomExponent = metadata?.decimals ?? 0;
const formattedAmount = fromBaseUnit(
BigInt(value.amount?.lo ?? 0),
BigInt(value.amount?.hi ?? 0),
displayDenomExponent
).toFixed(2);
return (
<HStack key={index} align="left" zIndex={1}>
<Box>
<HStack
outline={"2px solid var(--charcoal-tertiary-blended)"}
padding="8px"
borderRadius={"30px"}
backgroundColor="var(--charcoal-tertiary)"
>
<Avatar src={metadata?.imagePath} size={"xs"} />
<Text fontSize={"small"} fontFamily={"monospace"}>
{formattedAmount} {metadata?.symbol}
</Text>
</HStack>
</Box>
</HStack>
);
})}
</HStack>
{type !== TraceType.ARB && (
<Price trace={trace} metadataByAssetId={metadataByAssetId} />
)}
</div>
</Box>
);
};

Expand Down Expand Up @@ -251,7 +307,8 @@ export default function Block() {
dataLength: number;
type: DataBoxType;
}) => {
const [isExpanded, setIsExpanded] = useState(false);
// ! Expand default
const [isExpanded, setIsExpanded] = useState(false); // EXPAND
const tokenAssets = fetchAllTokenAssets();
const metadataByAssetId: Record<string, Token> = {};
tokenAssets.forEach((asset) => {
Expand All @@ -277,7 +334,7 @@ export default function Block() {
paddingBottom="2%"
paddingLeft="5%"
paddingRight="5%"
width="33%"
width="50%"
>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Text>
Expand All @@ -297,7 +354,7 @@ export default function Block() {
/>
)}
{isExpanded && dataLength > 0 && (
<Box marginTop="10px">
<Box marginTop="10px" width={"100%"}>
{type === DataBoxType.OPEN_POSITIONS ? (
<VStack
fontSize={"small"}
Expand Down Expand Up @@ -330,6 +387,7 @@ export default function Block() {
fontFamily={"monospace"}
spacing={"10px"}
paddingTop={"10px"}
width={"100%"}
>
{blockData!.closePositionEvents.map((positionEvent) => (
<a
Expand All @@ -356,30 +414,80 @@ export default function Block() {
fontFamily={"monospace"}
spacing={"10px"}
paddingTop={"10px"}
width={"100%"}
>
{blockData!.arbExecutions.map(
(swapExecution: SwapExecution) => (
<>
{/* TODO: summary per arb? */}
{/* TODO: summary per arb?
<Text>
-----------------------Arb-----------------------
</Text>
<VStack spacing={0}>
{swapExecution.traces.map(
(trace: SwapExecution_Trace, index: number) => (
<>
{/* TODO: summary per trace? */}
<Text>-----------Trace-------------</Text>
<Trace
key={index}
trace={trace}
metadataByAssetId={metadataByAssetId}
type={TraceType.ARB}
/>
</>
)
)}
</VStack>
*/}
<Box overflowX="auto" width="100%">
<VStack
spacing={2}
align="left"
justifyContent="left"
paddingTop="10px"
width={"100%"}
>
{swapExecution.traces.map(
(trace: SwapExecution_Trace, index: number) => (
<>
{/* TODO: summary per trace?
<Text>-----------Trace-------------</Text>
*/}
<Trace
key={index}
trace={trace}
metadataByAssetId={metadataByAssetId}
type={TraceType.ARB}
/>
<Box paddingTop="3px" />
</>
)
)}
</VStack>
</Box>
</>
)
)}
</VStack>
) : type === DataBoxType.SWAPS ? (
<VStack
fontSize={"small"}
fontFamily={"monospace"}
spacing={"10px"}
paddingTop={"10px"}
width={"100%"}
>
{blockData!.swapExecutions.map(
(swapExecution: SwapExecution) => (
<>
<Box overflowX="auto" width="100%">
<VStack
spacing={2}
align="left"
justifyContent="left"
paddingTop="10px"
width={"100%"}
>
{swapExecution.traces.map(
(trace: SwapExecution_Trace, index: number) => (
<>
<Trace
key={index}
trace={trace}
metadataByAssetId={metadataByAssetId}
type={TraceType.SWAP}
/>
<Box paddingTop="3px" />
</>
)
)}
</VStack>
</Box>
</>
)
)}
Expand All @@ -404,7 +512,7 @@ export default function Block() {
flexDirection="column"
width="100%"
height="100%"
paddingTop="20%"
paddingBottom="5px"
justifyContent={"center"}
alignItems={"center"}
>
Expand Down Expand Up @@ -462,7 +570,7 @@ export default function Block() {
type={DataBoxType.OPEN_POSITIONS}
/>
<DataBox
title="Arbs"
title="Asset Arbs"
dataLength={blockData!.arbExecutions.length}
type={DataBoxType.ARBS}
/>
Expand Down

0 comments on commit 63821ac

Please sign in to comment.