58 lines
2.0 KiB
JavaScript
58 lines
2.0 KiB
JavaScript
import React from "react";
|
|
import { Box, Typography, useTheme } from "@mui/material";
|
|
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
|
|
|
|
import GhostStyledIcon from "../../components/Icon/GhostIcon";
|
|
import Token from "../../components/Token/Token";
|
|
|
|
export const BridgeRoute = ({ coinName, chainTokenName, tokens }) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<Box width="100%" display="flex" alignItems="center" flexDirection="row" flexWrap="wrap">
|
|
<Typography>Route:</Typography>
|
|
<Box display="flex" marginLeft="20px" gap="5px" alignItems="center">
|
|
{tokens?.map((token, index) => {
|
|
return (
|
|
<React.Fragment key={index}>
|
|
<RouteHop key={index} theme={theme} token={token} chainTokenName={chainTokenName} />
|
|
<GhostStyledIcon sx={{ width: "12px", height: "12px" }} component={ArrowForwardIosIcon} />
|
|
</React.Fragment>
|
|
)
|
|
})}
|
|
<RouteHop theme={theme} token={coinName} />
|
|
</Box>
|
|
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
const RouteHop = ({ theme, token, chainTokenName, arrowNeeded }) => {
|
|
return (
|
|
<Box
|
|
display="inline-flex"
|
|
sx={{ backgroundColor: theme.colors.gray[600] }}
|
|
borderRadius="6px"
|
|
paddingX="9px"
|
|
paddingY="2px"
|
|
alignItems="center"
|
|
>
|
|
<Token
|
|
chainTokenName={chainTokenName}
|
|
name={token}
|
|
parentSx={{
|
|
"& svg:nth-of-type(2)": {
|
|
transform: "scale(0.52)",
|
|
}
|
|
}}
|
|
sx={{
|
|
transform: "scale(0.65)",
|
|
transformOrigin: "center"
|
|
}}
|
|
/>
|
|
<Typography fontSize="15px" lineHeight="24px" marginLeft="5px">
|
|
{token}
|
|
</Typography>
|
|
</Box>
|
|
)
|
|
}
|