fix empty project creation and use credit to generate

src/layouts/Page.js

@@ -10,11 +10,11 @@ import ConnectBtn from "../components/ConnectBtn.js";
 import NavigateHeader from "../components/NavigateHeader";
 import ShareBtn from "../components/ShareBtn/ShareBtn";
 import { isWeb } from "../hooks/useLayoutType.js";
-import { Routes } from "../navigation";
-import { push } from "../navigation/NavigationService";
 import { useUserData } from "../providers/UserDataProvider";
 import { gutters } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
+import CoinPackModal from "../components/modal/CoinPackModal";
+import { subscribeCoinPackModal } from "../utils/coinPackModal";
 
 export default ({
   children,
@@ -83,10 +83,31 @@ export default ({
   }, [coinBalance]);
 
   const showCoinBadge = isWeb && !!currentUID;
+  const [isCoinModalVisible, setCoinModalVisible] = React.useState(false);
 
   const handleCoinPress = React.useCallback(() => {
     if (!showCoinBadge) return;
-    push?.(Routes?.Payments || "Payments", { pack: "packs" });
+    setCoinModalVisible(true);
+  }, [showCoinBadge]);
+
+  const handleCloseCoinModal = React.useCallback(() => {
+    setCoinModalVisible(false);
+  }, []);
+
+  React.useEffect(() => {
+    if (!showCoinBadge && isCoinModalVisible) {
+      setCoinModalVisible(false);
+    }
+  }, [showCoinBadge, isCoinModalVisible]);
+
+  React.useEffect(() => {
+    const unsubscribe = subscribeCoinPackModal(() => {
+      if (!showCoinBadge) {
+        return;
+      }
+      setCoinModalVisible(true);
+    });
+    return unsubscribe;
   }, [showCoinBadge]);
 
   const PageContainer =
@@ -234,6 +255,11 @@ export default ({
           {connect && <ConnectBtn />}
         </View>
       )}
+
+      <CoinPackModal
+        visible={isCoinModalVisible}
+        onClose={handleCloseCoinModal}
+      />
     </View>
   );
 };