WIP: Manual Route UI

extension/package.json

@@ -87,5 +87,8 @@
     "vitest": "^2.0.2",
     "zodiac-roles-deployments": "^2.2.2"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "react-multi-carousel": "^2.8.5"
+  }
 }

extension/src/components/Carousel/index.tsx

@@ -0,0 +1,37 @@
+import React, { ReactNode, useState } from 'react'
+import ReactCarousel from 'react-multi-carousel';
+
+import './react-multi-carousel.css'
+import classes from './style.module.css'
+
+const responsive = {
+  desktop: {
+    breakpoint: { max: 3000, min: 1024 },
+    items: 1,
+  },
+  tablet: {
+    breakpoint: { max: 1024, min: 464 },
+    items: 1,
+  },
+  mobile: {
+    breakpoint: { max: 464, min: 0 },
+    items: 1,
+  }
+};
+
+export const Carousel: React.FC<{
+  children: ReactNode;
+}> = ({ children }) => {
+return (
+  <ReactCarousel
+    swipeable={true}
+    draggable={true}
+    infinite={true}
+    containerClass={classes.container}
+    itemClass={classes.item}
+    responsive={responsive}
+    removeArrowOnDeviceType={["desktop", "tablet", "mobile"]}
+  >
+    {children}
+  </ReactCarousel>
+)}

extension/src/components/Carousel/react-multi-carousel.css

@@ -0,0 +1,127 @@
+.react-multi-carousel-list {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+}
+.react-multi-carousel-track {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+  will-change: transform, transition;
+}
+.react-multiple-carousel__arrow {
+  position: absolute;
+  outline: none;
+  transition: all 0.5s;
+  border-radius: 35px;
+  z-index: 1000;
+  border: none;
+  background: rgba(0, 0, 0, 0.5);
+  min-width: 43px;
+  min-height: 43px;
+  opacity: 1;
+  cursor: pointer;
+}
+.react-multiple-carousel__arrow:hover {
+  background: rgba(0, 0, 0, 0.8);
+}
+.react-multiple-carousel__arrow::before {
+  font-size: 20px;
+  color: #fff;
+  display: block;
+  font-family: revicons;
+  text-align: center;
+  z-index: 2;
+  position: relative;
+}
+.react-multiple-carousel__arrow:disabled {
+  cursor: default;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.react-multiple-carousel__arrow--left {
+  left: calc(4% + 1px);
+}
+.react-multiple-carousel__arrow--left::before {
+  content: "\e824";
+}
+.react-multiple-carousel__arrow--right {
+  right: calc(4% + 1px);
+}
+.react-multiple-carousel__arrow--right::before {
+  content: "\e825";
+}
+
+.react-multi-carousel-dot-list {
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  left: 0;
+  right: 0;
+  justify-content: center;
+  margin: auto;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  text-align: center;
+}
+.react-multi-carousel-dot button {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  opacity: 1;
+  padding: 5px 5px 5px 5px;
+  box-shadow: none;
+  transition: background .5s;
+  border-width: 2px;
+  border-style: solid;
+  border-color: grey;
+  padding: 0;
+  margin: 0;
+  margin-right: 6px;
+  outline: 0;
+  cursor: pointer;
+}
+.react-multi-carousel-dot button:hover:active {
+  background: #080808;
+}
+.react-multi-carousel-dot--active button {
+  background: #080808;
+}
+.react-multi-carousel-item {
+  transform-style: preserve-3d;
+  backface-visibility: hidden;
+}
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .react-multi-carousel-item {
+    flex-shrink: 0 !important;
+  }
+  .react-multi-carousel-track {
+    overflow: visible !important;
+  }
+}
+
+[dir='rtl'].react-multi-carousel-list {
+  direction: rtl;
+}
+.rtl.react-multiple-carousel__arrow--right {
+  right: auto;
+  left: calc(4% + 1px);
+}
+.rtl.react-multiple-carousel__arrow--right::before {
+  content: "\e824";
+}
+.rtl.react-multiple-carousel__arrow--left {
+  left: auto;
+  right: calc(4% + 1px);
+}
+.rtl.react-multiple-carousel__arrow--left::before {
+  content: "\e825";
+}

extension/src/components/Carousel/style.module.css

@@ -0,0 +1,15 @@
+.container > ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.item {
+  padding: 0;
+  margin: 0;
+}
+
+.item > div {
+  padding-left: 16px;
+  padding-right: 16px;
+}

extension/src/components/Checkbox/index.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import classes from './styles.module.css';
+
+const Checkbox: React.FC<{ checked?: boolean }> = ({ checked = false }) => {
+  const [isChecked, setIsChecked] = useState<boolean>(checked);
+
+  const handleChange = () => {
+    setIsChecked(prevState => !prevState);
+  };
+
+  return (
+    <input
+      type="checkbox"
+      checked={isChecked}
+      onChange={handleChange}
+      className={classnames(classes.checkbox, { [classes.checkboxChecked]: isChecked })}
+    />
+  );
+};
+
+export default Checkbox;

extension/src/components/Checkbox/styles.module.css

@@ -0,0 +1,17 @@
+.checkbox {
+  height: 24px;
+  width: 24px;
+  border: 1px solid var(--border-color);
+  background-color: rgba(217, 212, 173, 0.1);
+  border-radius: 4px;
+  appearance: unset;
+  background-repeat: no-repeat;
+  background-position: center;
+  }
+.checkbox:hover {
+  border-color: var(--border-color-2);
+}
+.checkboxChecked {
+  border-color: var(--border-color-2);
+  background-image: url("data:image/svg+xml;base64,PHN2ZyBzdHJva2U9ImN1cnJlbnRDb2xvciIgZmlsbD0iI2ZmZmZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2Utd2lkdGg9IjAiIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBoZWlnaHQ9IjFlbSIgd2lkdGg9IjFlbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjMyLjQ5LDgwLjQ5bC0xMjgsMTI4YTEyLDEyLDAsMCwxLTE3LDBsLTU2LTU2YTEyLDEyLDAsMSwxLDE3LTE3TDk2LDE4MywyMTUuNTEsNjMuNTFhMTIsMTIsMCwwLDEsMTcsMTdaIj48L3BhdGg+PC9zdmc+");
+}

extension/src/components/ConnectionBubble/style.module.css

@@ -46,7 +46,7 @@
 .infoContainer {
   opacity: 0;
   position: absolute;
-  min-width: 550px;
+  width: 550px;
   z-index: 100;
   top: 40px;
   bottom: -120px;

extension/src/components/ConnectionStack/index.tsx

@@ -4,14 +4,14 @@ import React from 'react'
 import { LegacyConnection } from '../../types'
 import Address from '../Address'
 import Box from '../Box'
+import Flex from '../Flex'
 
 import classes from './style.module.css'
 
-import PUBLIC_PATH from '../../publicPath'
-import pilotIcon from './pilot-icon.svg'
-import targetSafeIcon from './target-safe-icon.svg'
 import circleIcon from '../../assets/icons/circle.svg'
 import BlockieStack from '../BlockieStack'
+import RouteBadgeIcon from '../RouteBadgeIcon'
+import PUBLIC_PATH from '../../publicPath'
 
 interface Props {
   connection: LegacyConnection
@@ -29,43 +29,70 @@ const ConnectionStack: React.FC<Props> = ({
   return (
     <div className={cn(classes.routeStack, className)}>
       <Box className={cn([classes.routeStackContainer, addressBoxClass])}>
-        <div className={cn([classes.routeContainer])}>
-          <div className={cn([classes.routeIconContainer])}>
-            <img src={PUBLIC_PATH + pilotIcon} alt="Pilot Icon" />
-          </div>
-          <p style={{ textAlign: 'start' }}>Pilot</p>
-        </div>
+        <RouteBadgeIcon badgeType="pilot" label="Pilot" />
+
         <Address address={pilotAddress} />
 
         <div className={classes.routeArrowContainer}>
           <img src={PUBLIC_PATH + circleIcon} alt="Dot Icon" />
         </div>
       </Box>
-      {moduleAddress && (
-        <div
-          className={cn([
-            classes.routeModContainer,
-            classes.grow,
-            addressBoxClass,
-          ])}
-        >
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-            <p>1 connections</p>
-            <p className={cn([classes.routesLink])}>View connections</p>
-          </div>
-          <BlockieStack addresses={[moduleAddress]} />
-          <div className={classes.routeModArrowContainer}>
-            <img src={PUBLIC_PATH + circleIcon} alt="Dot Icon" />
+      {/* To Do: Hook up with real data */}
+      {/* {moduleAddress && ( */}
+      {true && (
+        <Flex gap={0} style={{flexGrow: 1, overflow: "hidden", position: 'relative'}}>
+          <p className={classes.connectionsLabel}>4 connections</p>
+          <div
+            className={cn([
+              classes.routeModContainer,
+              classes.grow,
+              addressBoxClass,
+              ])}
+          >
+
+              <Flex className={classes.connectionsContainer} gap={1} alignItems='end' style={{flexGrow: 1}} >
+                <Box className={cn([classes.routeStackContainer, addressBoxClass])}>
+                  <Flex gap={1} direction="column">
+                    <p style={{ textAlign: 'start', lineHeight: 1 }}>{"Connection #1"}</p>
+                    <Address address={avatarAddress} />
+                    <div className={classes.routeModArrowContainer}>
+                      <img src={PUBLIC_PATH + circleIcon} alt="Dot Icon" />
+                    </div>
+                  </Flex>
+                </Box>
+                <Box className={cn([classes.routeStackContainer, addressBoxClass])}>
+                  <Flex gap={1} direction="column">
+                    <p style={{ textAlign: 'start', lineHeight: 1 }}>{"Connection #2"}</p>
+                    <Address address={avatarAddress} />
+                    <div className={classes.routeModArrowContainer}>
+                      <img src={PUBLIC_PATH + circleIcon} alt="Dot Icon" />
+                    </div>
+                  </Flex>
+                </Box>
+                <Box className={cn([classes.routeStackContainer, addressBoxClass])}>
+                  <Flex gap={1} direction="column">
+                    <p style={{ textAlign: 'start', lineHeight: 1 }}>{"Connection #3"}</p>
+                    <Address address={avatarAddress} />
+                    <div className={classes.routeModArrowContainer}>
+                      <img src={PUBLIC_PATH + circleIcon} alt="Dot Icon" />
+                    </div>
+                  </Flex>
+                </Box>
+                <Box className={cn([classes.routeStackContainer, addressBoxClass])}>
+                  <Flex gap={1} direction="column">
+                    <p style={{ textAlign: 'start', lineHeight: 1 }}>{"Connection #4"}</p>
+                    <Address address={avatarAddress} />
+                    <div className={classes.routeModArrowContainer}>
+                      <img src={PUBLIC_PATH + circleIcon} alt="Dot Icon" />
+                    </div>
+                  </Flex>
+                </Box>
+              </Flex>
           </div>
-        </div>
+      </Flex>
       )}
       <Box className={cn([classes.routeStackContainer, addressBoxClass])}>
-        <div className={cn([classes.routeContainer])}>
-          <div className={cn([classes.routeIconContainer])}>
-            <img src={PUBLIC_PATH + targetSafeIcon} alt="Target Safe Icon" />
-          </div>
-          <p style={{ textAlign: 'start' }}>Target Safe</p>
-        </div>
+        <RouteBadgeIcon badgeType="target" label="Target Safe" />
         <Address address={avatarAddress} />
       </Box>
     </div>