fix: fix blurring, text hidden, ransom image of zodiac sign, active price item

src/components/BlurringSubstrate/styles.module.css

@@ -1,6 +1,8 @@
 .blurring-substrate {
+    -webkit-backdrop-filter: blur(14px);
     backdrop-filter: blur(14px);
     width: fit-content;
+    height: fit-content;
     padding: 8px;
     box-shadow: inset 0px 0px 25px rgba(0,0,0,0.5);
     border-radius: 18px;

src/components/CompatResultPage/styles.module.css

@@ -5,6 +5,7 @@
   max-height: -webkit-fill-available;
   background-color: #000;
   color: #fff;
+  overflow-y: scroll;
 }
 
 .title-container {

src/components/HomePage/index.tsx

@@ -8,6 +8,10 @@ import { useCallback, useEffect, useState } from "react";
 import BlurringSubstrate from "../BlurringSubstrate";
 import EnergyValues from "../EnergyValues";
 import { UserAura } from "@/api/resources/Auras";
+import { useSelector } from "react-redux";
+import { getCategoryIdByZodiacSign, getZodiacSignByDate } from "@/services/zodiac-sign";
+import { selectors } from "@/store";
+import { getRandomArbitrary } from "@/services/random-value";
 
 const buttonTextFormatter = (text: string): JSX.Element => {
   const sentences = text.split(".");
@@ -32,17 +36,17 @@ function HomePage(): JSX.Element {
     navigate(routes.client.breath());
   };
 
-//   const { i18n } = useTranslation();
-//   const locale = i18n.language;
-//   const birthdate = useSelector(selectors.selectBirthdate);
-//   const zodiacSign = getZodiacSignByDate(birthdate);
+  const { i18n } = useTranslation();
+  const locale = i18n.language;
+  const birthdate = useSelector(selectors.selectBirthdate);
+  const zodiacSign = getZodiacSignByDate(birthdate);
   const [asset, setAsset] = useState<Asset>();
   const api = useApi();
 
   const assetsData = useCallback(async () => {
-    // const { asset_categories } = await api.getAssetCategories({ locale });
-    // const categoryId = getCategoryIdByZodiacSign(zodiacSign, asset_categories);
-    const { assets } = await api.getAssets({ category: String("10" || "1") });
+    const { asset_categories } = await api.getAssetCategories({ locale });
+    const categoryId = getCategoryIdByZodiacSign(zodiacSign, asset_categories);
+    const { assets } = await api.getAssets({ category: String(categoryId || "1") });
     return assets;
   }, [api]);
 
@@ -53,7 +57,7 @@ function HomePage(): JSX.Element {
 
   useEffect(() => {
     if (assets) {
-      setAsset(assets[13]);
+      setAsset(assets[getRandomArbitrary(0, assets?.length || 0)]);
     }
   }, [assets]);
 

src/components/PriceItem/index.tsx

@@ -1,45 +1,52 @@
-import { Currency, Locale, Price } from '../PaymentTable'
-import { IPrice } from '../PriceList'
-import styles from './styles.module.css'
+import { Currency, Locale, Price } from "../PaymentTable";
+import { IPrice } from "../PriceList";
+import styles from "./styles.module.css";
 
-const currency = Currency.USD
-const locale = Locale.EN
+const currency = Currency.USD;
+const locale = Locale.EN;
 
 const roundToWhole = (value: string | number): number => {
-    value = Number(value)
-    if (value % Math.floor(value) !== 0) {
-        return value
-    }
-    return Math.floor(value)
-}
+  value = Number(value);
+  if (value % Math.floor(value) !== 0) {
+    return value;
+  }
+  return Math.floor(value);
+};
 
 const removeAfterDot = (value: string): string => {
-    const _value = Number(value.split('$')[1])
-    if (_value % Math.floor(_value) !== 0 && _value !== 0) {
-        return value
-    }
-    return value.split('.')[0]
-}
+  const _value = Number(value.split("$")[1]);
+  if (_value % Math.floor(_value) !== 0 && _value !== 0) {
+    return value;
+  }
+  return value.split(".")[0];
+};
 
 interface PriceItemProps {
-  active: boolean
-  click: () => void
+  active: boolean;
+  click: () => void;
 }
 
-function PriceItem({ id, value, active, click }: IPrice & PriceItemProps): JSX.Element {
-  const _price = new Price(roundToWhole(value), currency, locale)
+function PriceItem({
+  id,
+  value,
+  active,
+  click,
+}: IPrice & PriceItemProps): JSX.Element {
+  const _price = new Price(roundToWhole(value), currency, locale);
+  console.log(id, active);
+  
 
   const compatClassName = () => {
-    const isPopular = id === 3
-    const isActive = active
-    return `${styles.container} ${isPopular ? styles.popular : ''} ${isActive ? styles.active : ''}`
-  }
+    const isPopular = id === 3;
+    // const isActive = active;
+    return `${styles.container} ${isPopular ? styles.popular : ""}`;
+  };
 
   return (
     <div onClick={click} className={compatClassName()}>
       {removeAfterDot(_price.format())}
     </div>
-  )
+  );
 }
 
-export default PriceItem
+export default PriceItem;