Feature/view content without wallet (#331)

packages/demo/usecase-demo/src/externals/dataProtectorClient.ts

@@ -19,10 +19,6 @@ export async function initDataProtectorSDK({
   connector?: Connector;
 }) {
   const provider = await connector?.getProvider();
-  if (!provider) {
-    cleanDataProtectorSDK();
-    return;
-  }
 
   const iexecOptions = {
     smsURL: import.meta.env.VITE_SMS_URL || undefined,

packages/demo/usecase-demo/src/modules/home/AllContent.tsx

@@ -1,74 +1,20 @@
-import { ProtectedDataInCollection } from '@iexec/dataprotector';
-import { useLoginLogout } from '@/components/NavBar/useLoginLogout.ts';
 import { LatestContents } from '@/modules/home/latestContent/LatestContents.tsx';
-import { OneContentCard } from '@/modules/home/latestContent/OneContentCard.tsx';
 import { useUserStore } from '@/stores/user.store.ts';
 import { AllCreators } from './allCreators/AllCreators.tsx';
 
 export function AllContent() {
   const isConnected = useUserStore((state) => state.isConnected);
 
-  const { login } = useLoginLogout();
-
   return (
     <div className="mb-28 mt-16 w-full">
-      {!isConnected && (
-        <div className="relative">
-          <div className="flex gap-x-4 overflow-x-hidden blur">
-            <OneContentCard
-              protectedData={
-                {
-                  id: '0x1234567890',
-                  name: 'Content 1',
-                } as ProtectedDataInCollection
-              }
-              className="w-[300px] shrink-0 md:w-[400px]"
-            />
-            <OneContentCard
-              protectedData={
-                {
-                  id: '0x5678901234',
-                  name: 'Interesting video by Melua3',
-                } as ProtectedDataInCollection
-              }
-              className="w-[300px] shrink-0 md:w-[400px]"
-            />
-            <OneContentCard
-              protectedData={
-                {
-                  id: '0x7890123456',
-                  name: 'Exclusive wallpaper',
-                } as ProtectedDataInCollection
-              }
-              className="w-[300px] shrink-0 md:w-[400px]"
-            />
-          </div>
-          <div className="absolute left-1/2 top-14 -translate-x-1/2">
-            <button
-              type="button"
-              onClick={() => {
-                login();
-              }}
-            >
-              <div className="rounded-lg border border-white bg-black px-4 py-5 md:px-24">
-                <span className="underline">Connect your wallet</span> to see
-                all content.
-              </div>
-            </button>
-          </div>
-        </div>
-      )}
+      <div className="mt-8">
+        <LatestContents />
+      </div>
 
       {isConnected && (
-        <>
-          <div className="xl:mt16 mt-8">
-            <LatestContents />
-          </div>
-
-          <div className="xl:mt16 mt-8">
-            <AllCreators />
-          </div>
-        </>
+        <div className="mt-8">
+          <AllCreators />
+        </div>
       )}
     </div>
   );

packages/demo/usecase-demo/src/modules/home/ContentCreatorSection.tsx

@@ -1,5 +1,4 @@
-import { ArrowUpRight, CheckCircle, DownloadCloud, Key } from 'react-feather';
-import { Button } from '../../components/ui/button.tsx';
+import { CheckCircle, DownloadCloud, Key } from 'react-feather';
 import { cn } from '../../utils/style.utils.ts';
 
 export function ContentCreatorSection({ className }: { className?: string }) {

packages/demo/usecase-demo/src/modules/home/latestContent/OneContentCard.tsx

@@ -2,12 +2,14 @@ import { ProtectedDataInCollection } from '@iexec/dataprotector';
 import { Link } from '@tanstack/react-router';
 import { clsx } from 'clsx';
 import { Lock } from 'react-feather';
+import { useUserStore } from '@/stores/user.store.ts';
 import { getCardVisualNumber } from '@/utils/getCardVisualNumber.ts';
 import { nrlcToRlc } from '@/utils/nrlcToRlc.ts';
 import { readableSecondsToDays } from '@/utils/secondsToDays.ts';
 import { cn } from '@/utils/style.utils.ts';
 import { truncateAddress } from '@/utils/truncateAddress.ts';
 import styles from './OneContentCard.module.css';
+import { OneContentCardLoginModal } from './OneContentCardLoginModal';
 
 export function OneContentCard({
   protectedData,
@@ -23,33 +25,40 @@ export function OneContentCard({
   const cardVisualBg = getCardVisualNumber({
     address: protectedData.id,
   });
+
+  const isConnected = useUserStore((state) => state.isConnected);
+
   return (
     <div className={cn(className, 'flex grow flex-col')}>
-      <Link
-        to={linkToDetails}
-        params={{
-          protectedDataAddress: protectedData.id,
-        }}
-        className={cn(
-          'group relative mx-auto flex aspect-[2/1] w-full flex-none items-center justify-center overflow-hidden rounded-t-3xl transition-shadow hover:shadow-lg',
-          !linkToDetails && 'cursor-default'
-        )}
-      >
-        <div
-          className={clsx(
-            styles[cardVisualBg],
-            'flex h-full w-full items-center justify-center bg-cover bg-bottom'
+      {!isConnected ? (
+        <OneContentCardLoginModal protectedDataAddress={protectedData.id} />
+      ) : (
+        <Link
+          to={linkToDetails}
+          params={{
+            protectedDataAddress: protectedData.id,
+          }}
+          className={cn(
+            'group relative mx-auto flex aspect-[2/1] w-full flex-none items-center justify-center overflow-hidden rounded-t-3xl transition-shadow hover:shadow-lg',
+            !linkToDetails && 'cursor-default'
           )}
         >
-          &nbsp;
-          {showLockIcon && (
-            <Lock
-              size="30"
-              className="absolute text-grey-50 opacity-100 duration-200 group-hover:opacity-50"
-            />
-          )}
-        </div>
-      </Link>
+          <div
+            className={clsx(
+              styles[cardVisualBg],
+              'flex h-full w-full items-center justify-center bg-cover bg-bottom'
+            )}
+          >
+            &nbsp;
+            {showLockIcon && (
+              <Lock
+                size="30"
+                className="absolute text-grey-50 opacity-100 duration-200 group-hover:opacity-50"
+              />
+            )}
+          </div>
+        </Link>
+      )}
       <div className="max-w-full grow truncate rounded-b-3xl border-x border-b border-grey-700 bg-grey-900 px-4 py-4 text-sm">
         <div className="flex">
           <div className="flex-1 overflow-hidden">

packages/demo/usecase-demo/src/modules/home/latestContent/OneContentCardLoginModal.tsx

@@ -0,0 +1,70 @@
+import { clsx } from 'clsx';
+import { useState } from 'react';
+import { Lock } from 'react-feather';
+import { useLoginLogout } from '@/components/NavBar/useLoginLogout.ts';
+import { Button } from '@/components/ui/button.tsx';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog.tsx';
+import { getCardVisualNumber } from '@/utils/getCardVisualNumber.ts';
+import styles from './OneContentCard.module.css';
+
+export function OneContentCardLoginModal({
+  protectedDataAddress,
+}: {
+  protectedDataAddress: string;
+}) {
+  const { login } = useLoginLogout();
+  const [isOpen, setOpen] = useState(false);
+
+  const cardVisualBg = getCardVisualNumber({
+    address: protectedDataAddress,
+  });
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setOpen}>
+      <DialogTrigger className="group relative mx-auto flex aspect-[2/1] w-full flex-none items-center justify-center overflow-hidden rounded-t-3xl transition-shadow hover:shadow-lg">
+        <div
+          className={clsx(
+            styles[cardVisualBg],
+            'relative flex h-full w-full items-center justify-center bg-cover bg-bottom'
+          )}
+        >
+          <Lock
+            size="30"
+            className="absolute text-grey-50 opacity-100 duration-200 group-hover:opacity-50"
+          />
+        </div>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="pr-8">
+            Connect your wallet to see this content
+          </DialogTitle>
+        </DialogHeader>
+        <div className="px-6 pt-4">
+          Please connect your wallet to access the content page. Rent content,
+          subscribe to creators, and upload your own content.{' '}
+        </div>
+        <DialogFooter className="justify-end">
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+          <Button
+            onClick={() => {
+              login();
+            }}
+          >
+            Connect wallet
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}