Skip to content

feat: added disclaimer #277

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Aug 7, 2025
Merged

feat: added disclaimer #277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5704d14
feat: added disclaimer to pictique's login screen.
Sahil2004 Aug 6, 2025
11a46ec
feat: added w3ds logo.
Sahil2004 Aug 6, 2025
98b87f7
feat: added disclaimer modal to pictique.
Sahil2004 Aug 7, 2025
f5a7788
feat: added disclaimer to login screen.
Sahil2004 Aug 7, 2025
ff18b6b
feat: added disclaimer box and the w3ds logo on login page in blabsy.
Sahil2004 Aug 7, 2025
54dc7e5
chore: re-init lock
coodos Aug 7, 2025
968a16f
chore: fix conflict in pnpm lock
coodos Aug 7, 2025
0f86bb5
chore: fix conflict in pnpm lock
coodos Aug 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions platforms/blabsy/public/assets/w3dslogo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
68 changes: 64 additions & 4 deletions platforms/blabsy/src/components/layout/common-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,79 @@ import { useRequireAuth } from '@lib/hooks/useRequireAuth';
import { Aside } from '@components/aside/aside';
import { Suggestions } from '@components/aside/suggestions';
import { Placeholder } from '@components/common/placeholder';
import type { ReactNode } from 'react';
import { type ReactNode, useState } from 'react';
import { Modal } from '@components/modal/modal';
import { Button } from '@components/ui/button';
import { useAuth } from '@lib/context/auth-context';

export type LayoutProps = {
children: ReactNode;
};

export function ProtectedLayout({ children }: LayoutProps): JSX.Element {
// const user = useRequireAuth();
const user = true; // TODO: Change back to useRequireAuth; Doing for development purposes
const user = useRequireAuth();
const { signOut } = useAuth();

const [disclaimerAccepted, setDisclaimerAccepted] = useState(false);
if (!user) return <Placeholder />;

return <>{children}</>;
return (
<>
{children}
{!disclaimerAccepted ? (
<Modal
open={!disclaimerAccepted}
closeModal={() => signOut()}
className='max-w-lg mx-auto mt-24'
modalClassName='bg-black backdrop-blur-md p-6 rounded-lg flex flex-col gap-2'
>
<h1 className='text-xl text-center font-bold'>
Disclaimer from MetaState Foundation
</h1>
<p className='font-bold'>⚠️ Please note:</p>
<p>
Blabsy is a <b>functional prototype</b>, intended to
showcase <b>interoperability</b> and core concepts of
the W3DS ecosystem.
</p>
<p>
<b>It is not a production-grade platform</b> and may
lack full reliability, performance, and security
guarantees.
</p>
<p>
We <b>strongly recommend</b> that you avoid sharing{' '}
<b>sensitive or private content</b>, and kindly ask for
your understanding regarding any bugs, incomplete
features, or unexpected behaviours.
</p>
<p>
The app is still in development, so we kindly ask for
your understanding regarding any potential issues. If
you experience issues or have feedback, feel free to
contact us at:
</p>
<a
href='mailto:[email protected]'
className='outline-none'
>
[email protected]
</a>
<Button
type='button'
className='mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600'
onClick={() => {
setDisclaimerAccepted(true);
}}
>
I Understand
</Button>
</Modal>
) : (
<></>
)}
</>
);
}

export function HomeLayout({ children }: LayoutProps): JSX.Element {
Expand Down
19 changes: 17 additions & 2 deletions platforms/blabsy/src/components/login/login-main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import axios from 'axios';
import { useEffect, useState } from 'react';
import { useAuth } from '@lib/context/auth-context';
import { NextImage } from '@components/ui/next-image';
import Image from 'next/image';

export function LoginMain(): JSX.Element {
const { signInWithCustomToken } = useAuth();
Expand Down Expand Up @@ -76,9 +77,23 @@ export function LoginMain(): JSX.Element {
{qr && <QRCode value={qr} />}
</div>
</div>
<div className='absolute right-0 rotate-90 top-1/2'>
<Image
src='/assets/w3dslogo.svg'
alt='W3DS logo'
width={100}
height={20}
/>
</div>
Comment on lines +80 to +87
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Verify absolute positioning context and asset availability.

The absolute positioning may not work as expected without a positioned parent container. Also ensure the logo asset exists at the specified path.

🏁 Script executed:

#!/bin/bash
# Description: Check if the W3DS logo asset exists and verify positioning context

# Check if the logo file exists in the public assets directory
fd -t f "w3dslogo.svg" platforms/blabsy/public

# Look for any positioned parent containers in the component
rg -A 10 -B 5 "position.*relative|position.*absolute" platforms/blabsy/src/components/login/login-main.tsx

Length of output: 199

Ensure correct positioning context and verify asset path

  • Asset Verification: Confirmed that platforms/blabsy/public/assets/w3dslogo.svg exists, so using src="/assets/w3dslogo.svg" is valid.
  • Positioning Context: There’s no ancestor in login-main.tsx with a positioning context (e.g., relative). Without it, the .absolute wrapper will be positioned against the viewport.
    • Add className="relative" (or equivalent CSS) to the nearest container around lines 80–87 to scope the absolute positioning.
🤖 Prompt for AI Agents 
In platforms/blabsy/src/components/login/login-main.tsx around lines 80 to 87,
the div with class 'absolute' lacks a positioned ancestor, causing it to be
positioned relative to the viewport. To fix this, add className="relative" to
the nearest container element wrapping this div to establish a positioning
context, ensuring the absolute positioning is scoped correctly. The asset path
is correct and requires no change.

</div>
<div className='flex max-w-xs flex-col gap-6 [&_button]:py-2'>
<div className='grid gap-3 font-bold' />
<div className='flex max-w-lg flex-col gap-6 [&_button]:py-2 bg-white/20 p-4 rounded-lg'>
<div className='grid gap-3 font-bold text-white/80'>
You are entering Blabsy - a social network built on the
Web 3.0 Data Space (W3DS) architecture. This system is
designed around the principle of data-platform
separation, where all your personal content is stored in
your own sovereign eVault, not on centralised servers.
</div>
</div>
</div>
</main>
Expand Down
1 change: 0 additions & 1 deletion platforms/blabsy/src/lib/context/auth-context.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,6 @@ export function AuthContextProvider({

export function useAuth(): AuthContext {
const context = useContext(AuthContext);

if (!context)
throw new Error('useAuth must be used within an AuthContextProvider');

Expand Down
1 change: 1 addition & 0 deletions platforms/pictique/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
"axios": "^1.6.7",
"moment": "^2.30.1",
"svelte-qrcode": "^1.0.1",
"svelte-qrcode-action": "^1.0.2",
"tailwind-merge": "^3.0.2"
}
}
9 changes: 6 additions & 3 deletions platforms/pictique/src/declaration.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
declare module 'svelte-qrcode' {
import { SvelteComponentTyped } from 'svelte';
export default class QRCode extends SvelteComponentTyped<{ value: string; size?: number }> {}
declare module "svelte-qrcode" {
import { SvelteComponentTyped } from "svelte";
export default class QRCode extends SvelteComponentTyped<{
value: string;
size?: number;
}> {}
}
21 changes: 21 additions & 0 deletions platforms/pictique/src/lib/icons/W3dslogo.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<svg width="63" height="26" viewBox="0 0 63 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3450_2389)">
<path
d="M56.4669 0H6.53305C2.92485 0 0 2.95179 0 6.59323V19.4045C0 23.046 2.92485 25.9978 6.53305 25.9978H56.4647C60.0729 25.9978 62.9978 23.046 62.9978 19.4045V6.59323C62.9978 2.95179 60.0729 0 56.4647 0H56.4669ZM16.2736 18.479H14.0611L12.0155 11.3916H11.9309L9.89195 18.479H7.6794L4.60541 7.64006H7.08508L8.86358 15.1723H8.95262L10.9136 7.64006H13.0372L14.9937 15.188H15.0872L16.8657 7.64006H19.3454L16.2714 18.479H16.2736ZM28.071 17.0817C27.7171 17.5625 27.2274 17.9399 26.6063 18.2139C25.9831 18.4902 25.2708 18.6273 24.4672 18.6273C23.6637 18.6273 22.987 18.4902 22.3771 18.2162C21.7672 17.9421 21.2864 17.5647 20.9347 17.084C20.583 16.6033 20.4027 16.0461 20.3916 15.4149H22.6776C22.691 15.68 22.7778 15.9114 22.938 16.1113C23.0961 16.3112 23.3098 16.464 23.5746 16.574C23.8395 16.6841 24.14 16.738 24.4717 16.738C24.8033 16.738 25.1239 16.6774 25.3888 16.5538C25.6536 16.4303 25.8629 16.2595 26.012 16.0394C26.1634 15.8215 26.2368 15.5677 26.2368 15.2824C26.2368 14.9971 26.1567 14.7365 25.9987 14.5118C25.8406 14.2872 25.6113 14.112 25.3175 13.9862C25.0215 13.8581 24.672 13.7952 24.2669 13.7952H23.2652V12.1127H24.2669C24.6097 12.1127 24.9124 12.052 25.1773 11.933C25.4422 11.8139 25.647 11.6454 25.7939 11.432C25.9408 11.2186 26.0142 10.9692 26.0142 10.6839C26.0142 10.3987 25.9497 10.174 25.8228 9.96734C25.6959 9.76067 25.5179 9.59893 25.2886 9.48211C25.0593 9.3653 24.7922 9.3069 24.4895 9.3069C24.1868 9.3069 23.8996 9.36306 23.6459 9.47313C23.3899 9.5832 23.1851 9.7427 23.0315 9.94712C22.8779 10.1515 22.7956 10.3919 22.7844 10.666H20.6075C20.6186 10.0415 20.7945 9.4911 21.1373 9.01486C21.4801 8.53862 21.943 8.16572 22.524 7.89615C23.1072 7.62658 23.7638 7.49179 24.4984 7.49179C25.2329 7.49179 25.8874 7.62658 26.4438 7.89839C27.0003 8.17021 27.4321 8.53638 27.7415 8.99689C28.0509 9.4574 28.2045 9.97408 28.2001 10.5447C28.2045 11.1512 28.0176 11.6589 27.6414 12.0632C27.2652 12.4698 26.7777 12.7259 26.1767 12.836V12.9214C26.9669 13.0247 27.5702 13.2988 27.9842 13.7503C28.3982 14.1996 28.603 14.7612 28.6007 15.4351C28.6052 16.0529 28.4294 16.601 28.0732 17.0817H28.071ZM61.6734 18.3577C61.6734 21.9205 58.8108 24.8116 55.2783 24.8116H39.4654C35.9329 24.8116 33.0704 21.9228 33.0704 18.3577V7.6423C33.0704 4.07949 35.9329 1.18835 39.4654 1.18835H55.2783C58.8108 1.18835 61.6734 4.07724 61.6734 7.6423V18.3577Z"
fill="#A5A5A5"
/>
<path
d="M44.7762 8.43754C43.9972 8.00623 43.0667 7.78833 41.9872 7.78833H38.1475V18.6273H41.9538C43.0445 18.6273 43.9816 18.4094 44.7673 17.9758C45.5531 17.5423 46.1563 16.92 46.577 16.1068C46.9977 15.2958 47.2091 14.3254 47.2091 13.1954C47.2091 12.0655 46.9977 11.104 46.577 10.2953C46.1563 9.48662 45.5553 8.86661 44.7762 8.4353V8.43754ZM44.5959 15.1745C44.3644 15.6845 44.0172 16.0596 43.5564 16.3022C43.0957 16.5449 42.5303 16.6639 41.8603 16.6639H40.4179V9.7517H41.8647C42.537 9.7517 43.1001 9.87076 43.5587 10.1111C44.0172 10.3515 44.3622 10.7244 44.5937 11.2321C44.8252 11.7398 44.9432 12.3957 44.9432 13.1954C44.9432 13.9952 44.8274 14.6624 44.5937 15.1723L44.5959 15.1745Z"
fill="#A5A5A5"
/>
<path
d="M56.1265 13.4201C55.8394 13.1618 55.5011 12.9461 55.1093 12.7686C54.7175 12.5912 54.2879 12.4519 53.8183 12.3441L52.8544 12.1104C52.6207 12.0565 52.4004 11.9936 52.1934 11.9172C51.9863 11.8409 51.806 11.751 51.648 11.6477C51.49 11.5443 51.3675 11.4185 51.2785 11.2748C51.1895 11.131 51.1472 10.9603 51.1561 10.7671C51.1561 10.5334 51.2229 10.3268 51.3586 10.1426C51.4922 9.95836 51.6881 9.81459 51.944 9.71126C52.2 9.60792 52.5117 9.55401 52.8834 9.55401C53.4287 9.55401 53.8606 9.67307 54.1789 9.90894C54.4972 10.1448 54.6775 10.4773 54.7198 10.9041H56.8967C56.8856 10.2594 56.7142 9.69104 56.3825 9.19908C56.0509 8.70936 55.5856 8.32522 54.9891 8.05116C54.3926 7.7771 53.6958 7.63782 52.899 7.63782C52.1021 7.63782 51.4165 7.77485 50.8022 8.05116C50.1878 8.32747 49.7026 8.70936 49.3531 9.19908C49.0014 9.68879 48.8278 10.2639 48.8322 10.9198C48.8278 11.7218 49.0882 12.3575 49.6135 12.8315C50.1388 13.3033 50.8534 13.6515 51.7593 13.8739L52.9279 14.1704C53.3197 14.2647 53.6513 14.3726 53.9207 14.4871C54.1922 14.6039 54.397 14.7455 54.5395 14.9095C54.6819 15.0757 54.7531 15.2801 54.7531 15.5227C54.7531 15.7833 54.6752 16.0147 54.5172 16.2169C54.3592 16.4191 54.1388 16.5741 53.8539 16.6886C53.569 16.8009 53.2351 16.8571 52.85 16.8571C52.4649 16.8571 52.1088 16.7965 51.7994 16.6751C51.49 16.5538 51.2429 16.3719 51.0604 16.1293C50.8778 15.8867 50.7732 15.5856 50.7487 15.2217H48.5518C48.5696 16.0012 48.7565 16.6549 49.1149 17.1828C49.4733 17.7107 49.9741 18.1084 50.6152 18.3757C51.2562 18.643 52.0108 18.7778 52.8789 18.7778C53.747 18.7778 54.4994 18.6452 55.1204 18.3779C55.7415 18.1106 56.2156 17.7355 56.5472 17.2502C56.8789 16.765 57.0436 16.1899 57.0481 15.5272C57.0436 15.0757 56.9635 14.6758 56.8032 14.3254C56.6452 13.9772 56.4204 13.6717 56.1354 13.4156L56.1265 13.4201Z"
fill="#A5A5A5"
/>
</g>
<defs>
<clipPath id="clip0_3450_2389">
<rect width="63" height="26" fill="white" />
</clipPath>
</defs>
</svg>
25 changes: 13 additions & 12 deletions platforms/pictique/src/lib/icons/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
export { default as Icons } from './Icons.svelte';
export { default as Like } from './Like.svelte';
export { default as Refresh } from './Refresh.svelte';
export { default as CommentIcon } from './CommentIcon.svelte';
export { default as VerticalDots } from './VerticalDots.svelte';
export { default as Home } from './Home.svelte';
export { default as Flash } from './Flash.svelte';
export { default as CommentsTwo } from './CommentsTwo.svelte';
export { default as Search } from './Search.svelte';
export { default as Camera } from './Camera.svelte';
export { default as Settings } from './Settings.svelte';
export { default as Cross } from './Cross.svelte';
export { default as Icons } from "./Icons.svelte";
export { default as Like } from "./Like.svelte";
export { default as Refresh } from "./Refresh.svelte";
export { default as CommentIcon } from "./CommentIcon.svelte";
export { default as VerticalDots } from "./VerticalDots.svelte";
export { default as Home } from "./Home.svelte";
export { default as Flash } from "./Flash.svelte";
export { default as CommentsTwo } from "./CommentsTwo.svelte";
export { default as Search } from "./Search.svelte";
export { default as Camera } from "./Camera.svelte";
export { default as Settings } from "./Settings.svelte";
export { default as Cross } from "./Cross.svelte";
export { default as W3dslogo } from "./W3dslogo.svelte";
5 changes: 5 additions & 0 deletions platforms/pictique/src/lib/stores/disclaimer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { writable } from "svelte/store";

export const isDisclaimerModalOpen = writable(true);

export const closeDisclaimerModal = () => isDisclaimerModalOpen.set(false);
52 changes: 45 additions & 7 deletions platforms/pictique/src/routes/(auth)/auth/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { PUBLIC_PICTIQUE_BASE_URL } from '$env/static/public';
import { W3dslogo } from '$lib/icons';
import { Qr } from '$lib/ui';
import { apiClient, setAuthId, setAuthToken } from '$lib/utils';
import { onMount } from 'svelte';
import { qrcode } from 'svelte-qrcode-action';

let qrData: string;

Expand Down Expand Up @@ -37,14 +39,50 @@
class="align-center flex h-full w-full flex-col content-center items-center
justify-center"
>
<div class="mb-5 flex flex-col items-center gap-2">
<img src="/images/Logo.svg" alt="logo" class="w-30" />
<p>Connect Socially in the Metastate</p>
</div>
<div
class="h-max-[600px] bg-grey flex w-[300px] flex-col items-center gap-5
rounded-md p-5"
class="h-max-[600px] w-max-[400px] mb-5 flex flex-col items-center gap-5 rounded-xl bg-[#F476481A] p-5"
>
<img src="/images/Logo.svg" alt="logo" />

<Qr data={qrData}></Qr>

<h1>Scan the QR to Login</h1>
<h2>Scan the QR code using your <b><u>eID App</u></b> to login</h2>
<article
class="overflow-hidden rounded-2xl"
use:qrcode={{
data: qrData,
width: 250,
height: 250,
margin: 12,
type: 'canvas',
dotsOptions: {
type: 'rounded',
color: '#fff'
},
backgroundOptions: {
gradient: {
type: 'linear',
rotation: 50,
colorStops: [
{ offset: 0, color: '#4D44EF' },
{ offset: 0.65, color: '#F35B5B' },
{ offset: 1, color: '#F7A428' }
]
}
}
}}
></article>
<p>
<span class="mb-1 block font-bold text-gray-600">The code is valid for 60 seconds</span>
<span class="block font-light text-gray-600">Please refresh the page if it expires</span
>
</p>
<p class="w-[350px] bg-white/60 p-4 leading-4 text-black/60">
You are entering Pictique - a social network built on the Web 3.0 Data Space (W3DS)
architecture. This system is designed around the principle of data-platform separation,
where all your personal content is stored in your own sovereign eVault, not on
centralised servers.
</p>
</div>
<W3dslogo />
</div>
Loading
Loading