secureweb/sweb/src/components/IPFSProvider.svelte
Mahmoud Emad 3e1822247d feat: Implement IPFS functionality using Helia
- Add Helia and related dependencies for IPFS integration.
- Create IPFS service module for core IPFS operations.
- Create IPFS context provider for application-wide access.
- Modify MarkdownContent component to fetch from IPFS.
- Create IPFS uploader component for content upload.
- Create IPFS gateway fallback for offline access.
- Modify NavDataProvider to load from IPFS.
- Implement offline support and local caching.
- Create Network Status Service to monitor network status.
- Create Offline Status Component to display offline status.
- Implement Service Worker for caching app assets.
- Create Offline page.
2025-05-13 09:31:14 +03:00

108 lines
3.5 KiB
Svelte

<script lang="ts">
import { onMount } from "svelte";
import { ipfsService } from "../services/ipfs.service";
let initialized = false;
let initializing = true;
let error: string | null = null;
let mockMode = false;
onMount(async () => {
try {
initializing = true;
initialized = await ipfsService.initialize();
console.log("IPFS initialization status:", initialized);
// Even if initialization returns true, check if IPFS is actually initialized
if (!ipfsService.isInitialized()) {
console.warn(
"IPFS service reports success but is not fully initialized",
);
mockMode = true;
}
} catch (err: any) {
error = err.message || "Unknown error during IPFS initialization";
console.error("Failed to initialize IPFS:", err);
mockMode = true;
} finally {
initializing = false;
}
});
</script>
{#if initializing}
<div
class="fixed top-0 left-0 right-0 bg-black/70 text-white py-2 px-4 z-50 flex justify-center"
>
<div class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="animate-spin"
>
<path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
</svg>
<span>Initializing IPFS...</span>
</div>
</div>
{:else if error}
<div
class="fixed top-0 left-0 right-0 bg-red-600/90 text-white py-2 px-4 z-50 flex justify-center"
>
<div class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
<span
>IPFS initialization issue: {error} - Running in demo mode</span
>
</div>
</div>
{:else if mockMode}
<div
class="fixed top-0 left-0 right-0 bg-amber-500/90 text-white py-2 px-4 z-50 flex justify-center"
>
<div class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
></path>
<line x1="12" y1="9" x2="12" y2="13"></line>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
<span>IPFS running in demo mode with mock functionality</span>
</div>
</div>
{/if}
<slot />