Merge branch 'sota_testing' into fix/display-value-cost-model

.gitignore

@@ -19,6 +19,7 @@
 .env.test.local
 .env.production.local
 env.global.js
+yarn.lock
 
 npm-debug.log*
 yarn-debug.log*

src/commons/resources/index.ts

@@ -39,7 +39,6 @@ import MediumIcon from "./icons/medium.svg";
 import RocketBackground from "./icons/rocket-bg.svg";
 import USDIcon from "./icons/usd.svg";
 import SeeMoreIcon from "./icons/seemore.svg";
-import SignOut from "./icons/sign-out.svg";
 import FlintIcon from "./icons/flint.svg";
 import NamiIcon from "./icons/nami.svg";
 import EternlIcon from "./icons/eternl.svg";
@@ -87,6 +86,10 @@ import DownRedDarkmode from "./icons/downRedDark.svg";
 import DownRedUtxoDarkmode from "./icons/downUtxoRedDark.svg";
 import ArrowUpIcon from "./icons/arrow-up.svg";
 import ArrowUpDarkIcon from "./icons/arrow-up-dark.svg";
+import DisableArrowUpLightIcon from "./icons/disable-arrow-up-light.svg";
+import DisableArrowDownLightIcon from "./icons/disable-arrow-down-light.svg";
+import DisableArrowUpDarkIcon from "./icons/disable-arrow-up-dark.svg";
+import DisableArrowDownDarkIcon from "./icons/disable-arrow-down-dark.svg";
 import ArrowDownIcon from "./icons/arrow-down-red.svg";
 import ArrowDownDarkIcon from "./icons/arrow-down-red-dark.svg";
 import PolicyDark from "./icons/policy-dark.svg";
@@ -98,10 +101,6 @@ import PoolSizeDarkIcon from "./images/PoolSizeDark.png";
 import PoolSizeLightIcon from "./images/PoolSizeLight.png";
 import DelegatingToDarkIcon from "./images/DelegatingToDark.png";
 import RewardsWithdrawDarkIcon from "./images/RewardsWithdrawDark.png";
-import DisableArrowUpLightIcon from "./icons/disable-arrow-up-light.svg";
-import DisableArrowDownLightIcon from "./icons/disable-arrow-down-light.svg";
-import DisableArrowUpDarkIcon from "./icons/disable-arrow-up-dark.svg";
-import DisableArrowDownDarkIcon from "./icons/disable-arrow-down-dark.svg";
 import DeregistrationDarkIcon from "./icons/deregistration-icon-dark.svg";
 import DeregistrationLightIcon from "./icons/deregistration-icon-light.svg";
 import RegistrationDarkIcon from "./icons/registration-icon-dark.svg";
@@ -146,6 +145,7 @@ import LinkOff from "./icons/link-off.svg";
 import User2 from "./icons/user2.svg";
 import WhiteSearchIcon from "./icons/white-search-icon.svg";
 import CopyOutlineIcon from "./icons/copy-outline.svg";
+import SignOut from "./icons/sign-out.svg";
 //only component
 
 import SignOutComponent from "./icons/sign-out.svg?react";
@@ -327,6 +327,7 @@ export {
   DeregistrationLightIcon,
   RegistrationDarkIcon,
   RegistrationLightIcon,
+
   // React component
   ExchangeIcon,
   PolygonDarkIcon,
@@ -764,9 +765,6 @@ export {
   CheckedCIPIcon,
   SmallInfoIcon,
   CIP60WarningIcon,
-  PlusSquareIcon,
-  CloseSquareIcon,
-  MinusSquareIcon,
   OpenTimeLock,
   LockedTimelock,
   SigNative,
@@ -776,5 +774,8 @@ export {
   NativeType,
   NativeOneMint,
   BolsiniAddress,
-  DrawerClose
+  DrawerClose,
+  PlusSquareIcon,
+  CloseSquareIcon,
+  MinusSquareIcon
 };

src/commons/utils/constants.ts

@@ -240,10 +240,11 @@ export const HOTJAR_HJID = process.env.REACT_APP_HOTJAR_HJID;
 export const HOTJAR_HJSV = process.env.REACT_APP_HOTJAR_HJSV;
 
 export enum APP_LANGUAGES {
-  ENGLISH = "en"
+  ENGLISH = "en",
+  FRENCH = "fr"
 }
 
-export const SUPPORTED_LANGUAGES = ["en"];
+export const SUPPORTED_LANGUAGES = ["en", "fr"];
 
 export enum OPTIONS_CHART_ANALYTICS {
   ONE_DAY = "ONE_DAY",

src/commons/utils/helper.ts

@@ -263,7 +263,6 @@ export function validateTokenExpired() {
     return now.isBefore(exp);
   } catch (e) {
     removeAuthInfo();
-    return false;
   }
 }
 

src/components/Contracts/common/styles.ts

@@ -107,6 +107,12 @@ export const CLButton = styled("button")`
   }
 `;
 
+export const ContractAddressLabel = styled(Typography)`
+  font-weight: 600;
+  text-align: left;
+  color: ${({ theme }) => theme.palette.secondary.light};
+`;
+
 export const WrapLabel = styled(Typography)(({ theme }) => ({
   fontWeight: 600,
   color: theme.palette.secondary.light,

src/components/DelegationDetail/DelegationDetailList/index.tsx

@@ -266,7 +266,9 @@ const DelegationCertificatesHistory = ({
       render: (data) =>
         data.txHash && (
           <CustomTooltip title={data.txHash || ""}>
-            <StyledLink to={details.transaction(data.txHash)}>{getShortHash(data.txHash || "")}</StyledLink>
+            <StyledLink to={details.transaction(data.txHash, "poolCertificates")}>
+              {getShortHash(data.txHash || "")}
+            </StyledLink>
           </CustomTooltip>
         )
     },
@@ -286,7 +288,7 @@ const DelegationCertificatesHistory = ({
       title: t("epoch"),
       key: "value",
       minWidth: "80px",
-      render: (data) => <StyledLink to={details.block(data.epochNo)}>{data.epochNo}</StyledLink>
+      render: (data) => <StyledLink to={details.epoch(data.epochNo)}>{data.epochNo}</StyledLink>
     },
     {
       title: t("common.slot"),

src/components/DelegationDetail/DelegationDetailOverview/styles.ts

@@ -43,4 +43,9 @@ export const FixedCostBox = styled(Box)`
   & > svg {
     margin-top: -2px;
   }
+  ${({ theme }) => theme.breakpoints.down("sm")} {
+    & {
+      display: inline;
+    }
+  }
 `;

src/components/DynamicEllipsisText/index.tsx

@@ -72,6 +72,7 @@ const DynamicEllipsisText = ({
   sx?: SxProps<Theme>;
   customTruncateFold?: [number, number];
   isNoLimitPixel?: boolean;
+  isSeparateCopyIcon?: boolean;
   whiteSpace?: "nowrap" | "normal";
 }) => {
   const randomIdRef = useRef(`ELIPSIS_${useId()}`);

src/components/StakeDetail/ModalAllAddress/index.tsx

@@ -58,6 +58,7 @@ const ModalAllAddress: React.FC<ModalAllAddressProps> = ({ stake, ...props }) =>
       handleCloseModal={props.onClose}
       title={t("common.addressList")}
       width={"600px"}
+      height={"auto"}
       contentStyle={{ overflowY: "unset" }}
       isCenterWithoutPosition={true}
     >

src/components/TabularView/StakeTab/index.tsx

@@ -40,7 +40,7 @@ const StakeTab: React.FC<StackTabProps> = ({ tabs, tabActive, onChangeTab, tabsR
       if (newExpanded) {
         setTimeout(() => {
           tabRef?.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
-        }, 100);
+        }, 150);
         tabRef?.current?.removeEventListener("transitionend", handleTransitionEnd);
       }
     };

src/components/TokenDetail/TokenTableData/index.tsx

@@ -5,8 +5,8 @@ import { useHistory, useParams } from "react-router-dom";
 
 import { details } from "src/commons/routers";
 import CustomAccordion, { TTab } from "src/components/commons/CustomAccordion";
+import { UnionTokenIcon, PeopleIcon, TransactionIcon, MetadataIcon } from "src/commons/resources";
 
-import { MetadataIcon, PeopleIcon, TransactionIcon, UnionTokenIcon } from "../../../commons/resources";
 import TokenMetaData from "./TokenMetadata";
 import TokenMinting from "./TokenMinting";
 import TokenTopHolder from "./TokenTopHolder";
@@ -75,7 +75,6 @@ const TokenTableData: React.FC<ITokenTableData> = ({
   const handleTabChange = (tab: string) => {
     history.replace(details.token(tokenId, tab));
   };
-
   return (
     <Box mt={3}>
       <CustomAccordion tabs={tabs} onTabChange={handleTabChange} loading={loading} />

src/components/TransactionDetail/TransactionMetadata/Collaterals/index.tsx

@@ -147,6 +147,7 @@ const ItemCollateral = ({ data, type }: { data: CollateralResponses[]; type: "in
                             fontWeight="bold"
                             fontFamily={"var(--font-family-text)"}
                             color={(theme) => theme.palette.primary.main}
+                            width={"100%"}
                           >
                             <EllipsisContainer>
                               <DynamicEllipsisText

src/components/TransactionDetail/TransactionMetadata/Metadata/BolnisiWineDrawer.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
 import { Box, Button, CircularProgress, IconButton, Typography, alpha, styled, useTheme } from "@mui/material";
 import { useHistory, useLocation, useParams } from "react-router-dom";
 import { IoMdClose } from "react-icons/io";
-import { useSelector } from "react-redux";
 import { t } from "i18next";
+import { useSelector } from "react-redux";
 
 import { BolsiniAddress, InvalidIcon, SeeMoreIconHome, VerifiedIcon } from "src/commons/resources";
 import { details } from "src/commons/routers";

src/components/TransactionDetail/TransactionMetadata/PoolCertificate/StakeKeyBox.tsx

@@ -94,7 +94,7 @@ const StakeKeyBox = ({ data }: TProps) => {
                       }}
                     >
                       {value.map((item) => (
-                        <Box key={item}>
+                        <Box className="ValueItem" key={item}>
                           <TextValue>
                             <Link to={details.stake(item || "")}>
                               <EllipsisContainer width={"100%"}>

src/components/TransactionDetail/TransactionMetadata/Summary/index.tsx

@@ -101,7 +101,8 @@ const SummaryItems = ({
         sx={{
           display: "flex",
           alignItems: "center",
-          height: "fit-content"
+          height: "fit-content",
+          width: "100%"
         }}
       >
         <WrapItemsInfo
@@ -207,6 +208,7 @@ const SummaryItems = ({
               <Box
                 display="flex"
                 alignItems="center"
+                width={"100%"}
                 sx={{
                   height: tokensSent.length > 0 ? `${height}px` : "0px"
                 }}
@@ -324,7 +326,7 @@ const SummaryItems = ({
             </Box>
           </Box>
           {tokensReceived && tokensReceived.length === 1 && (
-            <Box display={"flex"} alignItems={"center"} mt={1}>
+            <Box display={"flex"} alignItems={"center"} mt={1} className="CONTAINERRR">
               <TokenLink
                 token={tokensReceived[0]}
                 isSummary={true}

src/components/TransactionDetail/TransactionMetadata/TransactionSignatories/index.tsx

@@ -53,7 +53,7 @@ const TransactionSignatories: React.FC<IProps> = ({ data }) => {
       </Box>
       <Wrapper>
         <TableProtocol
-          height={(data || [])?.length > 5 ? 320 : 0}
+          height={(data || [])?.length > 5 ? 320 : "auto"}
           showPagination={false}
           columns={columns}
           data={data?.map((d, i) => ({ ...d, index: i + 1 }))}

src/components/TransactionDetail/TransactionMetadata/Withdrawals/index.tsx

@@ -80,7 +80,7 @@ const Withdrawals: React.FC<WithdrawalsProps> = ({ data }) => {
                           <AddressLink
                             to={address.startsWith("addr") ? details.address(address) : details.stake(address)}
                           >
-                            <EllipsisContainer>
+                            <EllipsisContainer fontSize={14}>
                               <DynamicEllipsisText value={address} isCopy isTooltip customTruncateFold={[8, 6]} />
                             </EllipsisContainer>
                           </AddressLink>

src/components/TransactionDetail/TransactionMetadata/index.tsx

@@ -25,8 +25,8 @@ import {
 import { details } from "src/commons/routers";
 import { TRANSACTION_STATUS } from "src/commons/utils/constants";
 import ContractsList from "src/components/Contracts";
-import { CustomNumberBadge } from "src/components/commons/CustomNumberBadge";
 import { StyledAccordion } from "src/components/commons/CustomAccordion/styles";
+import { CustomNumberBadge } from "src/components/commons/CustomNumberBadge";
 
 import Collaterals from "./Collaterals";
 import Delegations from "./Delegations";

src/components/TransactionDetail/TransactionMetadata/styles.ts

@@ -1,4 +1,4 @@
-import { Box, styled } from "@mui/material";
+import { Accordion, Box, styled } from "@mui/material";
 
 export const Title = styled("h3")<{ active: number }>`
   background: ${(props) => props.theme.palette.common.white};
@@ -16,3 +16,31 @@ export const TitleTab = styled(Box)<{ active: number }>(({ active, theme }) => (
   fontSize: "18px",
   color: active ? theme.palette.primary.main : theme.palette.secondary.light
 }));
+
+export const CustomAccordion = styled(Accordion)<{
+  expanded: boolean;
+  customBorderRadius: string;
+  isDisplayBorderTop: boolean;
+}>(({ expanded, customBorderRadius, isDisplayBorderTop, theme }) => ({
+  borderRadius: expanded ? "12px" : customBorderRadius,
+  background: theme.palette.secondary[0],
+  textAlign: "left",
+  boxShadow: expanded || customBorderRadius !== "0" ? "0px 4px 4px rgba(0, 0, 0, 0.05)" : "none",
+  "&.MuiAccordion-root:first-of-type": {
+    borderTopLeftRadius: "12px",
+    borderTopRightRadius: "12px"
+  },
+  "&.MuiAccordion-root:last-of-type": {
+    borderBottomLeftRadius: "12px",
+    borderBottomRightRadius: "12px",
+    boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.05)"
+  },
+  "&:before": {
+    display: isDisplayBorderTop ? "flex" : "none",
+    width: "calc(100% - 40px)",
+    margin: "0 auto",
+    height: "1px",
+    borderBottom: `2px solid ${theme.isDark ? theme.palette.secondary[700] : theme.palette.primary[200]}`,
+    background: "transparent"
+  }
+}));

src/components/TransactionDetail/TransactionOverview/index.tsx

@@ -107,6 +107,7 @@ const TransactionOverview: React.FC<Props> = ({ data, loading }) => {
               value={data?.utxOs?.inputs[0]?.address || ""}
               isCopy
               isTooltip
+              isSeparateCopyIcon
               postfix={isMobile ? 6 : 8}
             />
           </StyledLink>
@@ -152,6 +153,7 @@ const TransactionOverview: React.FC<Props> = ({ data, loading }) => {
               value={data?.utxOs?.outputs[0]?.address || ""}
               isCopy
               isTooltip
+              isSeparateCopyIcon
               postfix={isMobile ? 6 : 8}
             />
           </StyledLink>

src/components/commons/CIP25Badge/index.tsx

@@ -21,7 +21,7 @@ const CIP25Badge: React.FC<TCIP25BadgeProps> = ({ type, tooltipTitle, onClick })
         {type === "success" ? (
           <CheckedCIPIcon data-testid="check-CIP" />
         ) : type === "warning" ? (
-          <WarningCIPIcon />
+          <WarningCIPIcon data-testid="warning-CIP" />
         ) : (
           <CheckNotRequiredCIPIcon data-testid="warning-CIP" />
         )}

src/components/commons/CopyButton/index.tsx

@@ -1,12 +1,12 @@
+import { IconButton, IconButtonProps, TooltipProps, styled, useTheme } from "@mui/material";
 import React, { useEffect, useState } from "react";
-import { IconButton, IconButtonProps, styled, TooltipProps, useTheme } from "@mui/material";
-import { useCopyToClipboard } from "react-use";
 import { BiCheckCircle } from "react-icons/bi";
+import { useCopyToClipboard } from "react-use";
 
 import { CopyIconSquare } from "src/commons/resources";
 
-import CustomTooltip from "../CustomTooltip";
 import CustomIcon from "../CustomIcon";
+import CustomTooltip from "../CustomTooltip";
 
 const Button = styled(IconButton)`
   color: ${(props) => props.theme.palette.text.primary};
@@ -28,8 +28,8 @@ interface CopyButtonProps extends IconButtonProps {
 const CopyButton: React.FC<CopyButtonProps> = ({ text = "", onClick, children, placement, customIcon, ...props }) => {
   const [, copyToClipboard] = useCopyToClipboard();
   const [copied, setCopied] = useState<boolean>();
+  const [open, setOpen] = useState<boolean>(false);
   const theme = useTheme();
-  const [open, setOpen] = useState(false);
 
   useEffect(() => {
     if (copied) {
@@ -48,6 +48,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({ text = "", onClick, children, p
       onClick?.(e);
     }
   };
+
   return (
     <CustomTooltip
       open={open}

src/components/commons/CustomAccordion/index.tsx

@@ -42,7 +42,7 @@ export const CustomAccordion: React.FC<TCustomAccordionProps> = ({
       if (newExpanded) {
         setTimeout(() => {
           tabRef?.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
-        }, 0);
+        }, 100);
         tabRef?.current?.removeEventListener("transitionend", handleTransitionEnd);
       }
     };

src/components/commons/DetailHeader/index.tsx

@@ -211,7 +211,7 @@ const DetailHeader: React.FC<DetailHeaderProps> = (props) => {
               {hashLabel ? <SlotLeaderTitle>{hashLabel}: </SlotLeaderTitle> : ""}
               <SlotLeaderValue sidebar={sidebar}>
                 <TruncateSubTitleContainer>
-                  <DynamicEllipsisText value={hash} isCopy />
+                  <DynamicEllipsisText value={hash} isCopy isSeparateCopyIcon isTooltip />
                 </TruncateSubTitleContainer>
               </SlotLeaderValue>
             </SlotLeader>

src/components/commons/DropdownTokens/index.tsx

@@ -204,7 +204,7 @@ export const TokenLink: React.FC<{
             </CustomTooltip>
           </Box>
         </Box>
-        <Box display={"flex"} alignItems={"center"}>
+        <Box display={"flex"} alignItems={"center"} className="BBB">
           {!hideValue ? (
             <Box
               fontWeight={"bold"}
@@ -214,7 +214,7 @@ export const TokenLink: React.FC<{
               {formatNumberDivByDecimals(token?.assetQuantity || 0, token?.metadata?.decimals || 0)}
             </Box>
           ) : null}
-          <Box mr={1} mt={"2px"}>
+          <Box mr={1} mt={"2px"} className="CCC">
             <RiArrowRightSLine color={theme.palette.secondary.main} />
           </Box>
         </Box>