Merge pull request #3092 from cardano-foundation/fix/update-ui-in-gal…

…axy-fold fix: update ui in galaxy fold
cardano-foundation · Mar 1, 2024 · 6136d30 · 6136d30
2 parents ec45ad1 + 09a3f44
commit 6136d30
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/src/commons/utils/helper.ts b/src/commons/utils/helper.ts
@@ -26,6 +26,11 @@ export const getShortHash = (address = "", firstpart?: number, lastPart?: number
     : "";
 };
 
+export const getShortHashXs = (address = "", firstpart?: number, lastPart?: number) => {
+  if (address?.length <= 18) return address;
+  return address ? `${address.slice(0, firstpart ? firstpart : 7)}...${address.slice(-(lastPart ? lastPart : 5))}` : "";
+};
+
 export const LARGE_NUMBER_ABBREVIATIONS = ["", "K", "M", "B", "T", "q", "Q", "s", "S"];
 
 export const formatPrice = (value?: string | number, abbreviations: string[] = LARGE_NUMBER_ABBREVIATIONS): string => {

diff --git a/src/components/StakingLifeCycle/SPOLifecycle/OperatorRewards/index.tsx b/src/components/StakingLifeCycle/SPOLifecycle/OperatorRewards/index.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 
 import CustomTooltip from "src/components/commons/CustomTooltip";
 import { details } from "src/commons/routers";
-import { formatADAFull, getShortHash } from "src/commons/utils/helper";
+import { formatADAFull, getShortHash, getShortHashXs } from "src/commons/utils/helper";
 import useFetch from "src/commons/hooks/useFetch";
 import { API } from "src/commons/utils/api";
 import CustomModal from "src/components/commons/CustomModal";
@@ -39,6 +39,7 @@ const OperatorReward = () => {
   const { data } = useFetch<PoolInfo>(API.SPO_LIFECYCLE.SPO_POOL_INFO(poolId));
   const SPOHolderRef = useRef(null);
   const cardanoBlockchainRef = useRef(null);
+  const { isGalaxyFoldSmall } = useScreen();
 
   const paths = useMemo((): LineArrowItem[] => {
     return [
@@ -62,7 +63,7 @@ const OperatorReward = () => {
           <HoldBoxTitle>{t("common.rewardAccount")}</HoldBoxTitle>
           <SPOHolderBox
             data={{
-              poolName: getShortHash(data?.poolName),
+              poolName: isGalaxyFoldSmall ? getShortHashXs(data?.poolName) : getShortHash(data?.poolName),
               poolView: data?.poolView,
               stakeKeys: data?.rewardAccounts
             }}

diff --git a/src/components/commons/CustomModal/styles.ts b/src/components/commons/CustomModal/styles.ts
@@ -50,7 +50,7 @@ export const WrapTitle = styled(Box)(({ theme }) => ({
   position: "relative",
   zIndex: 2,
   [theme.breakpoints.down("sm")]: {
-    maxWidth: " 100% - 40px)",
+    maxWidth: "calc(100% - 40px)",
     fontSize: 20,
     lineHeight: "23px"
   }