reveal demo sections

xdevguild · Dec 26, 2023 · 7206e63 · 7206e63
1 parent d64b25e
commit 7206e63
Show file tree

Hide file tree

Showing 12 changed files with 210 additions and 261 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+### [9.4.2](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v9.4.1) (2023-12-26)
+- reveal demo section for not logged in
+
 ### [9.4.1](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v9.4.1) (2023-12-24)
 - update useElven with bugfixes
 - update other dependencies

diff --git a/app/page.tsx b/app/page.tsx
@@ -3,7 +3,6 @@ import { SimpleDemo } from '@/components/demo/simple-demo';
 import { GetUserDataDemo } from '@/components/demo/get-user-data-demo';
 import { GetLoggingInStateDemo } from '@/components/demo/get-logging-in-state-demo';
 import { GetLoginInfoDemo } from '@/components/demo/get-login-info-demo';
-import { Authenticated } from '@/components/elven-ui/authenticated';
 import { CardContent, Card } from '@/components/ui/card';
 
 const Home: NextPage = () => {
@@ -56,79 +55,68 @@ const Home: NextPage = () => {
           </div>
         </CardContent>
       </Card>
-      <Authenticated
-        spinnerCentered
-        fallback={
-          <div className="font-bold text-2xl text-center mt-8">
-            Connect your wallet!
+      <SimpleDemo />
+      <Card className="mb-4">
+        <CardContent className="mt-6">
+          <div className="mb-4">
+            Now let us see what other valuable tools are included.
           </div>
-        }
-      >
-        <SimpleDemo />
-        <Card className="mb-4">
-          <CardContent className="mt-6">
-            <div className="mb-4">
-              Now let us see what other valuable tools are included.
-            </div>
-            <div className="mb-4">
-              You can get the data of currently logged-in users and network
-              state. These are:
-            </div>
-            <ul>
-              <li>- User data such as: address, nonce, balance.</li>
-              <li>- User logging in state: pending, error, loggedIn.</li>
-              <li>
-                - Login info state: loginMethod, expires, loginToken, signature.
-              </li>
-            </ul>
-          </CardContent>
-        </Card>
-        <div className="flex mb-4 gap-4 flex-wrap justify-center flex-col lg:flex-row">
-          <GetUserDataDemo />
-          <GetLoginInfoDemo />
-          <GetLoggingInStateDemo />
-        </div>
-        <Card className="mb-4">
-          <CardContent className="mt-6">
-            <span>You will also get a couple of other tools, like:</span>
-            <ul>
-              <li>
-                - Authenticated component - wrapper to check the auth state
-              </li>
-              <li>- LoginComponent - component with 3 auth options</li>
-              <li>
-                - LoginModalButton component - ready to use modal with
-                LoginComponent
-              </li>
-              <li>
-                - You will get all tools from{' '}
-                <a href="https://www.useElven.com" target="_blank">
-                  useElven
-                </a>
-              </li>
-              <li>- Preserved app state after hard refresh of the page</li>
-              <li>
-                - And of course Shadcn UI, Tailwind CSS and NextJS framework
-              </li>
-            </ul>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardContent className="mt-6">
-            <div>Better docs, and more improvements soon!</div>
-            <div>
-              Check the{' '}
-              <a
-                target="_blank"
-                href="https://github.com/xdevguild"
-                className="underline"
-              >
-                xDevGuild
+          <div className="mb-4">
+            You can get the data of currently logged-in users and network state.
+            These are:
+          </div>
+          <ul>
+            <li>- User data such as: address, nonce, balance.</li>
+            <li>- User logging in state: pending, error, loggedIn.</li>
+            <li>
+              - Login info state: loginMethod, expires, loginToken, signature.
+            </li>
+          </ul>
+        </CardContent>
+      </Card>
+      <div className="flex mb-4 gap-4 flex-wrap justify-center flex-col lg:flex-row">
+        <GetUserDataDemo />
+        <GetLoginInfoDemo />
+        <GetLoggingInStateDemo />
+      </div>
+      <Card className="mb-4">
+        <CardContent className="mt-6">
+          <span>You will also get a couple of other tools, like:</span>
+          <ul>
+            <li>- Authenticated component - wrapper to check the auth state</li>
+            <li>- LoginComponent - component with 3 auth options</li>
+            <li>
+              - LoginModalButton component - ready to use modal with
+              LoginComponent
+            </li>
+            <li>
+              - You will get all tools from{' '}
+              <a href="https://www.useElven.com" target="_blank">
+                useElven
               </a>
-            </div>
-          </CardContent>
-        </Card>
-      </Authenticated>
+            </li>
+            <li>- Preserved app state after hard refresh of the page</li>
+            <li>
+              - And of course Shadcn UI, Tailwind CSS and NextJS framework
+            </li>
+          </ul>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardContent className="mt-6">
+          <div>Better docs, and more improvements soon!</div>
+          <div>
+            Check the{' '}
+            <a
+              target="_blank"
+              href="https://github.com/xdevguild"
+              className="underline"
+            >
+              xDevGuild
+            </a>
+          </div>
+        </CardContent>
+      </Card>
     </>
   );
 };

diff --git a/components/demo/connect-wallet-info.tsx b/components/demo/connect-wallet-info.tsx
@@ -0,0 +1,9 @@
+export const ConnectWalletInfo = ({ loggedIn }: { loggedIn: boolean }) => {
+  if (loggedIn) return null;
+
+  return (
+    <div className="text-destructive text-xs font-bold ml-3">
+      Connect your wallet!
+    </div>
+  );
+};
diff --git a/components/demo/get-login-info-demo.tsx b/components/demo/get-login-info-demo.tsx
@@ -26,7 +26,11 @@ export const GetLoginInfoDemo = () => {
         </div>
         <div>
           <span className="inline-block font-bold">loginToken:</span>
-          <div className="break-all text-left">{loginToken || '-'}</div>
+          {loginToken ? (
+            <div className="break-words text-left">{loginToken}</div>
+          ) : (
+            '-'
+          )}
         </div>
         <TooltipProvider>
           <Tooltip>

diff --git a/components/demo/get-user-data-demo.tsx b/components/demo/get-user-data-demo.tsx
@@ -16,12 +16,16 @@ export const GetUserDataDemo = () => {
         <div className="text-xl mb-2 font-bold">User data:</div>
         <div>
           <span className="inline-block font-bold">address:</span>{' '}
-          <Link
-            className="underline"
-            href={`${explorerAddress}/accounts/${address}`}
-          >
-            {shortenHash(address, 8)}
-          </Link>
+          {address ? (
+            <Link
+              className="underline"
+              href={`${explorerAddress}/accounts/${address}`}
+            >
+              {shortenHash(address, 8)}
+            </Link>
+          ) : (
+            '-'
+          )}
         </div>
         <div>
           <span className="inline-block font-bold">guardian:</span>{' '}

diff --git a/components/demo/sign-message-demo.tsx b/components/demo/sign-message-demo.tsx
@@ -1,11 +1,13 @@
 'use client';
 
-import { useLoginInfo, useSignMessage } from '@useelven/core';
+import { useLoggingIn, useLoginInfo, useSignMessage } from '@useelven/core';
 import { Card, CardContent, CardFooter } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import { ConnectWalletInfo } from '@/components/demo/connect-wallet-info';
 
 export const SimpleSignMessageDemo = () => {
   const { loginMethod } = useLoginInfo();
+  const { loggedIn } = useLoggingIn();
   const { signMessage, pending, signature } = useSignMessage();
 
   const handleSignMessage = () => {
@@ -41,13 +43,14 @@ export const SimpleSignMessageDemo = () => {
       <CardFooter>
         <Button
           variant="outline"
-          disabled={pending}
+          disabled={pending || !loggedIn}
           onClick={handleSignMessage}
         >
           {pending
             ? `Pending... (confirmation with ${loginMethod})`
             : 'Sign a message'}
         </Button>
+        <ConnectWalletInfo loggedIn={loggedIn} />
       </CardFooter>
     </Card>
   );

diff --git a/components/demo/simple-deploy-sc-demo.tsx b/components/demo/simple-deploy-sc-demo.tsx
@@ -3,17 +3,20 @@
 import {
   TransactionCallbackParams,
   useConfig,
+  useLoggingIn,
   useScDeploy,
 } from '@useelven/core';
 import { Card, CardContent, CardFooter } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import { ConnectWalletInfo } from '@/components/demo/connect-wallet-info';
 
 export const SimpleDeployScDemo = ({
   cb,
 }: {
   cb: (params: TransactionCallbackParams) => void;
 }) => {
   const { explorerAddress } = useConfig();
+  const { loggedIn } = useLoggingIn();
   const { deploy, scAddress, txResult, pending } = useScDeploy({ cb });
 
   const handleDeploy = () => {
@@ -50,9 +53,14 @@ export const SimpleDeployScDemo = ({
         )}
       </CardContent>
       <CardFooter>
-        <Button variant="outline" disabled={pending} onClick={handleDeploy}>
+        <Button
+          variant="outline"
+          disabled={pending || !loggedIn}
+          onClick={handleDeploy}
+        >
           {pending ? 'Pending...' : 'Deploy'}
         </Button>
+        <ConnectWalletInfo loggedIn={loggedIn} />
       </CardFooter>
     </Card>
   );

diff --git a/components/demo/simple-egld-tx-demo.tsx b/components/demo/simple-egld-tx-demo.tsx
@@ -4,11 +4,13 @@ import {
   TransactionCallbackParams,
   useConfig,
   useAccount,
+  useLoggingIn,
 } from '@useelven/core';
 import { useCallback } from 'react';
 import { shortenHash } from '@/lib/shortenHash';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardFooter } from '@/components/ui/card';
+import { ConnectWalletInfo } from '@/components/demo/connect-wallet-info';
 
 const egldTransferAddress = process.env.NEXT_PUBLIC_EGLD_TRANSFER_ADDRESS || '';
 const egldTransferAmount = process.env.NEXT_PUBLIC_EGLD_TRANSFER_AMOUNT || '';
@@ -19,6 +21,7 @@ export const SimpleEGLDTxDemo = ({
   cb: (params: TransactionCallbackParams) => void;
 }) => {
   const { pending, triggerTx } = useTransaction({ cb });
+  const { loggedIn } = useLoggingIn();
   const { activeGuardianAddress } = useAccount();
   const { explorerAddress, chainType } = useConfig();
 
@@ -41,7 +44,7 @@ export const SimpleEGLDTxDemo = ({
   }, [activeGuardianAddress, triggerTx]);
 
   return (
-    <Card className="flex-1 flex flex-col justify-between">
+    <Card className="flex flex-1 flex-col justify-between">
       <CardContent className="mt-6">
         <div className="mb-4">
           1. You will be sending 0.001 EGLD to the address: <br />
@@ -56,9 +59,14 @@ export const SimpleEGLDTxDemo = ({
         </div>
       </CardContent>
       <CardFooter>
-        <Button variant="outline" disabled={pending} onClick={handleSendTx}>
+        <Button
+          variant="outline"
+          disabled={pending || !loggedIn}
+          onClick={handleSendTx}
+        >
           Send Transaction
         </Button>
+        <ConnectWalletInfo loggedIn={loggedIn} />
       </CardFooter>
     </Card>
   );

diff --git a/components/demo/simple-nft-mint-demo.tsx b/components/demo/simple-nft-mint-demo.tsx
@@ -9,11 +9,13 @@ import {
   TransactionCallbackParams,
   useConfig,
   useAccount,
+  useLoggingIn,
 } from '@useelven/core';
 import { useCallback } from 'react';
 import { shortenHash } from '@/lib/shortenHash';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardFooter } from '@/components/ui/card';
+import { ConnectWalletInfo } from '@/components/demo/connect-wallet-info';
 
 const mintSmartContractAddress =
   process.env.NEXT_PUBLIC_MINT_SMART_CONTRACT_ADDRESS || '';
@@ -26,6 +28,7 @@ export const SimpleNftMintDemo = ({
 }: {
   cb: (params: TransactionCallbackParams) => void;
 }) => {
+  const { loggedIn } = useLoggingIn();
   const { pending, triggerTx } = useTransaction({ cb });
   const { activeGuardianAddress } = useAccount();
   const { explorerAddress, chainType } = useConfig();
@@ -52,7 +55,7 @@ export const SimpleNftMintDemo = ({
   }, [activeGuardianAddress, triggerTx]);
 
   return (
-    <Card className="flex-1">
+    <Card className="flex flex-1 flex-col justify-between">
       <CardContent className="mt-6">
         <div className="mb-4">
           2. You will be minting one NFT using{' '}
@@ -69,9 +72,14 @@ export const SimpleNftMintDemo = ({
         </div>
       </CardContent>
       <CardFooter>
-        <Button variant="outline" disabled={pending} onClick={handleSendTx}>
+        <Button
+          variant="outline"
+          disabled={pending || !loggedIn}
+          onClick={handleSendTx}
+        >
           Mint
         </Button>
+        <ConnectWalletInfo loggedIn={loggedIn} />
       </CardFooter>
     </Card>
   );

diff --git a/components/demo/simple-sc-query-demo.tsx b/components/demo/simple-sc-query-demo.tsx
@@ -41,7 +41,7 @@ export const SimpleScQeryDemo = ({
   };
 
   return (
-    <Card className="flex-1">
+    <Card className="flex flex-1 flex-col justify-between">
       <CardContent className="mt-6">
         <div className="mb-4">
           3. You will be querying the smart contract for NFT tokens left to