feat(multichainSelector): worked on multichain selector

src/components/Dashboard/DashboardTypes.ts

@@ -3,21 +3,20 @@ import { ITooltip } from "../Tooltip/TooltipTypes";
 
 export type CardItem = {
   label: string;
-  value: number | string;
-  fluctuation?: string;
-  fluctuationValue?: string;
   color?: string;
   fontFamily?: string;
-  optionalStyles?: React.CSSProperties;
+  fluctuation?: string;
+  value: number | string;
   externalStyles?: string;
   hoverBehavior?: boolean;
+  fluctuationValue?: string;
+  optionalStyles?: React.CSSProperties;
   infoTooltip?: Omit<ITooltip, "handleChange">;
 };
 
 export type IDashboard = {
   colors: string[];
   currency: string;
-  currencyIcon?: React.ReactElement | string;
   rightLabel: string;
   fontFamily?: string;
   bottomLabel: string;
@@ -28,6 +27,7 @@ export type IDashboard = {
   totalValueLocked: number | string;
   rightIcon?: React.ReactElement | string;
   bottomIcon?: React.ReactElement | string;
+  currencyIcon?: React.ReactElement | string;
 };
 
 export interface IHeaderContainer {

src/components/Dashboard/index.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import clsx from "clsx";
-import { Divider } from "@mui/material";
+import { Box, Divider } from "@mui/material";
 
 import DollarIcon from "../../../public/assets/dollar-icon.svg";
+import { MultichainSelector } from "../MultichainSelector";
 import { CardComponent } from "../CardComponent";
 import { Container } from "../Container";
 
@@ -120,34 +121,47 @@ export const Dashboard = ({
           <div className="graphic-container-internal">
             <div className="header-dashboard-component">
               <div className="dashboard-title-styles">
-                {titleGraphic && (
-                  <div className="graphic-header">
-                    {currencyIcon && typeof currencyIcon === "string" ? (
-                      <img src={currencyIcon} alt="currency icon" />
-                    ) : (
-                      currencyIcon
-                    )}
-                    <span
-                      className={clsx("variant-h3", "margin-left")}
-                      style={{ fontFamily }}
-                    >
-                      {titleGraphic}
-                    </span>
-                  </div>
-                )}
-                {totalValueLocked && (
-                  <div className="total-value-container">
-                    <span className="variant-h1" style={{ fontFamily }}>
-                      {totalValueLocked}
-                    </span>
-                    <span
-                      className={clsx("variant-body2", "padding-bottom-medium")}
-                      style={{ fontFamily }}
-                    >
-                      {currency}
-                    </span>
-                  </div>
-                )}
+                <Box>
+                  {titleGraphic && (
+                    <div className="graphic-header">
+                      {currencyIcon && typeof currencyIcon === "string" ? (
+                        <img src={currencyIcon} alt="currency icon" />
+                      ) : (
+                        currencyIcon
+                      )}
+                      <span
+                        className={clsx("variant-h3", "margin-left")}
+                        style={{ fontFamily }}
+                      >
+                        {titleGraphic}
+                      </span>
+                    </div>
+                  )}
+                  {totalValueLocked && (
+                    <div className="total-value-container">
+                      <span className="variant-h1" style={{ fontFamily }}>
+                        {totalValueLocked}
+                      </span>
+                      <span
+                        className={clsx(
+                          "variant-body2",
+                          "padding-bottom-medium"
+                        )}
+                        style={{ fontFamily }}
+                      >
+                        {currency}
+                      </span>
+                    </div>
+                  )}
+                </Box>
+                <Box>
+                  <MultichainSelector
+                    networkSelected={[]}
+                    networksList={[]}
+                    networksAssets={{}}
+                    textFieldLabel="TEST"
+                  />
+                </Box>
               </div>
               {bottomLabel && bottomContainerItems.length > 0 && (
                 <>

src/components/MultichainSelector/MultiChainSelectorTypes.ts

@@ -0,0 +1,20 @@
+export type NetworksDataType = {
+  logo: any;
+  name: string;
+  rpcUrl: string;
+  chainId: number;
+  explorerUrl: string;
+  baseTokenAddress: string;
+  currency: "MATIC" | "ETH";
+  collateralAddress: string;
+  poolContractAddress: string;
+};
+
+export type IMultiChainSelector = {
+  networksAssets: any;
+  textFieldLabel: string;
+  onClick: (event: any) => void;
+  networksList: Array<NetworksDataType>;
+  networkSelected: Array<NetworksDataType>;
+  onChange: (_: any, selectedValue: any) => void;
+};

src/components/MultichainSelector/index.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import {
+  Box,
+  Checkbox,
+  TextField,
+  Typography,
+  Autocomplete,
+} from "@mui/material";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import CheckBoxOutlineBlankIcon from "@mui/icons-material/CheckBoxOutlineBlank";
+
+import { IMultiChainSelector } from "./MultiChainSelectorTypes";
+
+export const MultichainSelector = ({
+  networkSelected,
+  networksAssets,
+  textFieldLabel,
+  networksList,
+  onChange,
+  onClick,
+}: IMultiChainSelector) => (
+  <Autocomplete
+    multiple
+    id="chain-selector"
+    onChange={onChange}
+    disableCloseOnSelect
+    options={networksList}
+    sx={{ width: "200px" }}
+    getOptionLabel={(option) => option?.name}
+    renderOption={(_props, state, { selected }) => (
+      <Box display="flex" alignItems="center" onClick={onClick}>
+        <Checkbox
+          checked={selected}
+          icon={<CheckBoxOutlineBlankIcon />}
+          checkedIcon={<CheckBoxIcon color="secondary" />}
+        />
+        <Box mr={1} display="flex" alignItems="center">
+          <img
+            width={24}
+            height={24}
+            alt="Network icon"
+            src={networksAssets[state.chainId].logo}
+          />
+        </Box>
+        <Typography variant="body1">{state.name}</Typography>
+      </Box>
+    )}
+    renderInput={(params) => (
+      <Box display="flex" alignItems="center">
+        <TextField
+          {...params}
+          variant="outlined"
+          label={textFieldLabel}
+          InputProps={{
+            ...params.InputProps,
+            startAdornment: networkSelected.map((chain) => (
+              <Box
+                mr={1}
+                display="flex"
+                alignItems="center"
+                key={chain.chainId}
+              >
+                <img
+                  width={24}
+                  height={24}
+                  alt="Networ icon"
+                  src={networksAssets[chain.chainId]?.logo || ""}
+                />
+              </Box>
+            )),
+            disableUnderline: true,
+          }}
+        />
+      </Box>
+    )}
+    value={networkSelected}
+  />
+);

src/scss/components/Dashboard/_dashboard.scss

@@ -229,6 +229,9 @@ $breakpoint-laptop: 1400px;
 }
 
 .dashboard-title-styles {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   @media (min-width: $breakpoint-laptop) {
     margin-top: 8px;
     width: 50%;