last fixes, home and videos

src/screens/Studio/ComposeSong.web.js

@@ -11,7 +11,7 @@ import BorderGradientButton from "../../components/BorderGradientButton";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import AppAlert from "../../components/Alert";
-import CoinIcon from "../../components/CoinIcon";
+import CreditAmount from "../../components/CreditAmount";
 import firebase, { getFunctionsClient } from "../../config/firebase";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
@@ -68,16 +68,6 @@ const ComposeSong = () => {
     return 0;
   }, [currentUserData?.coins]);
 
-  const formattedCoinBalance = useMemo(() => {
-    try {
-      return new Intl.NumberFormat("fr-FR", {
-        maximumFractionDigits: 0,
-      }).format(coinBalance);
-    } catch (_error) {
-      return `${coinBalance}`;
-    }
-  }, [coinBalance]);
-
   const isStepValid = useMemo(() => {
     switch (selectedIndex) {
       case 0:
@@ -386,19 +376,18 @@ const ComposeSong = () => {
                         textAlign: "center",
                       }}
                     >
-                      Cette action coûte{" "}
+                      Cette action coûte
                     </Text>
-                    <Text
-                      style={{
+                    <CreditAmount
+                      value={MUSIC_GENERATION_COIN_COST}
+                      textStyle={{
                         fontSize: 16,
                         color: Palette.white,
                         fontFamily: FONT_FAMILY.InterSemiBold,
                         textAlign: "center",
                       }}
-                    >
-                      {MUSIC_GENERATION_COIN_COST}
-                    </Text>
-                    <CoinIcon size={18} />
+                      iconSize={18}
+                    />
                   </View>
                   <Text
                     style={{
@@ -427,9 +416,18 @@ const ComposeSong = () => {
                       textAlign: "center",
                     }}
                   >
-                    Solde disponible : {formattedCoinBalance}
+                    Solde disponible :
                   </Text>
-                  <CoinIcon size={16} />
+                  <CreditAmount
+                    value={coinBalance}
+                    textStyle={{
+                      fontSize: 14,
+                      color: Palette.white,
+                      fontFamily: FONT_FAMILY.InterMedium,
+                      textAlign: "center",
+                    }}
+                    iconSize={16}
+                  />
                 </View>
               </View>
               <View style={{ width: "85%", alignSelf: "center", gap: 15 }}>