Implement transaction route component

package.json

@@ -45,15 +45,18 @@
     "axios": "^1.6.8",
     "buffer": "^6.0.3",
     "classnames": "^2.5.1",
+    "mermaid": "^11.4.1",
     "notistack": "^3.0.1",
     "rc-scrollbars": "^1.1.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-flow": "^1.0.3",
     "react-hook-form": "^7.53.0",
     "react-redux": "^9.1.1",
     "react-router-dom": "^6.22.3",
     "react-slick": "^0.30.2",
     "react-window": "^1.8.10",
+    "reactflow": "^11.11.4",
     "recharts": "^2.13.3",
     "redux": "^5.0.1",
     "redux-persist": "^6.0.0",

src/components/InvariantAgregatorHeader/InvariantAgregatorHeader.tsx

@@ -0,0 +1,39 @@
+import useStyles from './style'
+import { Box, useMediaQuery, useTheme } from '@mui/material'
+import HeaderLogo from '@static/png/InvariantAggregator/header-logo.png'
+import SolarLogo from '@static/png/InvariantAggregator/solar.png'
+import LifinityLogo from '@static/png/InvariantAggregator/lifinity.png'
+import OrcaLogo from '@static/png/InvariantAggregator/Orca.png'
+import UmbraLogo from '@static/png/InvariantAggregator/umbra.png'
+import InvariantLogo from '@static/png/InvariantAggregator/Invariant.png'
+
+const InvariantAgregatorHeader = () => {
+  const { classes } = useStyles()
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
+  const logos = [
+    { src: SolarLogo, alt: 'Solar' },
+    { src: LifinityLogo, alt: 'Lifinity' },
+    { src: OrcaLogo, alt: 'Orca' },
+    { src: UmbraLogo, alt: 'Umbra' },
+    { src: InvariantLogo, alt: 'Invariant' }
+  ]
+
+  return (
+    <Box className={classes.container}>
+      <Box className={classes.header_logo_wrapper}>
+        <img src={HeaderLogo} alt='Header Logo' style={{ maxHeight: isMobile ? '24px' : '32px' }} />
+      </Box>
+      <Box className={classes.item_wrapper}>
+        {logos.map((logo, index) => (
+          <Box key={index} className={classes.item}>
+            <img src={logo.src} alt={logo.alt} />
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  )
+}
+
+export default InvariantAgregatorHeader

src/components/InvariantAgregatorHeader/style.ts

@@ -0,0 +1,70 @@
+import { colors } from '@static/theme'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()(theme => {
+  return {
+    container: {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      width: '100%',
+      padding: '12px',
+      minHeight: '56px',
+      background: colors.invariant.dark,
+      borderRadius: '24px',
+      gap: '8px',
+      border: `2px solid ${colors.invariant.light}`,
+      [theme.breakpoints.down('sm')]: {
+        flexDirection: 'column',
+        gap: '10px',
+        padding: '16px 12px',
+        height: 'auto'
+      }
+    },
+    header_logo_wrapper: {
+      display: 'flex',
+      height: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      [theme.breakpoints.down('sm')]: {
+        marginBottom: '8px'
+      }
+    },
+    item_wrapper: {
+      width: '75%',
+      height: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: '8px',
+      [theme.breakpoints.down('sm')]: {
+        width: '100%',
+        flexWrap: 'wrap',
+        gap: '12px',
+        justifyContent: 'space-around'
+      }
+    },
+    item: {
+      height: '56px',
+      width: '56px',
+      borderRadius: '100%',
+      background: `${colors.invariant.component}`,
+      border: `2px solid ${colors.invariant.light}`,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      [theme.breakpoints.down('sm')]: {
+        height: '48px',
+        width: '48px'
+      },
+      '& img': {
+        maxWidth: '70%',
+        maxHeight: '70%',
+        objectFit: 'contain'
+      }
+    }
+  }
+})
+
+export default useStyles

src/components/Modals/TransactionRouteModal/TransactionRouteModal.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Popover, Box } from '@mui/material'
+import useStyles from './styles'
+import { FlowChartProps } from '@components/TransactionRoute/FlowChartGrid/types/types'
+import TransactionRoute from '@components/TransactionRoute/TransactionRoute'
+
+export interface ISelectWalletModal extends FlowChartProps {
+  open: boolean
+  handleClose: () => void
+
+  // setIsOpenSelectWallet: (isOpen: boolean) => void
+}
+
+export const TransactionRouteModal: React.FC<ISelectWalletModal> = ({
+  open,
+  handleClose,
+  routeData,
+  isLoading
+}) => {
+  const { classes } = useStyles()
+
+  return (
+    <div className={classes.modalContainer}>
+      <Popover
+        open={open}
+        marginThreshold={0}
+        classes={{
+          root: classes.popoverRoot,
+          paper: classes.paper
+        }}
+        onClose={handleClose}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}>
+        <Box className={classes.root}>
+          <TransactionRoute handleClose={handleClose} routeData={routeData} isLoading={isLoading} />
+        </Box>
+      </Popover>
+    </div>
+  )
+}
+
+export default TransactionRouteModal

src/components/Modals/TransactionRouteModal/styles.ts

@@ -0,0 +1,183 @@
+import { colors, theme, typography } from '@static/theme'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()(() => {
+  return {
+    modalContainer: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      display: 'flex',
+      alignItems: 'center',
+
+      justifyContent: 'center',
+      pointerEvents: 'none',
+      zIndex: 1300
+    },
+    popoverRoot: {
+      position: 'fixed',
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center',
+
+      justifyContent: 'center',
+      overflow: 'auto'
+    },
+    paper: {
+      position: 'relative',
+      width: '520px',
+      margin: '16px',
+      background: 'transparent',
+      boxShadow: 'none',
+      overflow: 'visible'
+    },
+    root: {
+      height: 'max-content',
+      display: 'flex',
+      justifyContent: 'center',
+      borderRadius: 24,
+      padding: '20px 24px',
+      [theme.breakpoints.down('sm')]: {
+        padding: '16px 20px'
+      }
+    },
+    buttonWrapper: {
+      background: colors.invariant.componentBcg,
+      borderRadius: '8px',
+      pointerEvents: 'auto',
+      padding: '8px'
+    },
+    title: {
+      ...typography.heading1,
+      margin: '15px 10px',
+      textAlign: 'center',
+      width: '100%'
+    },
+    footerTitle: {
+      ...typography.heading3,
+      textAlign: 'center',
+      color: colors.invariant.green
+    },
+    subTitle: {
+      ...typography.body3,
+      marginTop: 12,
+      color: colors.invariant.textGrey,
+      textAlign: 'center',
+      width: '100%'
+    },
+    buttonList: {
+      marginTop: 12
+    },
+    modalFooter: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexDirection: 'column',
+      marginTop: 24
+    },
+    buttonPrimary: {
+      height: 40,
+      width: 200,
+      pointerEvents: 'auto',
+
+      marginTop: '5px',
+      color: colors.invariant.componentBcg,
+      ...typography.body1,
+      textTransform: 'none',
+      borderRadius: 14,
+      background: colors.invariant.pinkLinearGradientOpacity,
+
+      '&:hover': {
+        background: colors.invariant.pinkLinearGradient,
+        boxShadow: '0px 0px 16px rgba(239, 132, 245, 0.35)',
+        '@media (hover: none)': {
+          background: colors.invariant.pinkLinearGradientOpacity,
+          boxShadow: 'none'
+        }
+      }
+    },
+    footerSubtitle: {
+      fontWeight: 400,
+      color: colors.invariant.text
+    },
+    divider: {
+      width: '100%',
+      height: 0,
+      background: colors.invariant.light,
+      margin: '24px 0'
+    },
+    topCloseButton: {
+      pointerEvents: 'auto',
+      display: 'flex',
+      justifyContent: 'flex-end',
+      '&:hover': {
+        cursor: 'pointer',
+        filter: 'brightness(1.5)'
+      }
+    },
+    button: {
+      color: colors.invariant.lightGrey,
+      borderRadius: 11,
+      padding: '20px',
+      width: '100%',
+      height: '65px',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: colors.invariant.component,
+
+      '&:hover': {
+        color: colors.white.main,
+        background: colors.invariant.light,
+        '@media (hover: none)': {
+          color: colors.invariant.lightGrey
+        }
+      },
+      '&:first-of-type': {
+        marginBottom: '4px'
+      },
+      '&:not(:first-of-type)': {
+        margin: '4px 0'
+      }
+    },
+
+    bottomCloseButton: {
+      pointerEvents: 'auto',
+      textDecoration: 'none',
+      '&:hover': {
+        cursor: 'pointer',
+        textDecoration: 'underline'
+      },
+      marginTop: '10px',
+      borderBottomColor: colors.invariant.light,
+      color: colors.invariant.textGrey
+    },
+    buttonName: {
+      textTransform: 'capitalize',
+      fontSize: '24px',
+      textAlign: 'center',
+      fontWeight: 400,
+      display: 'flex',
+      alignItems: 'center',
+
+      justifyContent: 'center',
+      img: {
+        marginRight: '12px'
+      },
+      [theme.breakpoints.down('sm')]: {
+        ...typography.body3
+      }
+    },
+    buttonContainer: {
+      width: 150,
+      display: 'flex',
+      justifyContent: 'flex-start'
+    }
+  }
+})
+
+export default useStyles

src/components/Swap/Swap.stories.tsx

@@ -62,6 +62,12 @@ type Story = StoryObj<typeof meta>
 
 export const Primary: Story = {
   args: {
+    onRouteRefresh: fn(),
+    swapRouteChartData: {
+      swapRouteLoading: false,
+      swapRouteError: undefined,
+      swapRouteResponse: undefined
+    },
     swapMultiplier: '01',
     promotedSwapPairs: [],
     commonTokens: [