Skip to content

Commit 7206e63

Browse files
juliancwirkojuliancwirko
committed
reveal demo sections
1 parent d64b25e commit 7206e63

12 files changed

+210
-261
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
### [9.4.2](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v9.4.1) (2023-12-26)
2+
- reveal demo section for not logged in
3+
14
### [9.4.1](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v9.4.1) (2023-12-24)
25
- update useElven with bugfixes
36
- update other dependencies

‎app/page.tsx‎

Lines changed: 60 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { SimpleDemo } from '@/components/demo/simple-demo';
33
import { GetUserDataDemo } from '@/components/demo/get-user-data-demo';
44
import { GetLoggingInStateDemo } from '@/components/demo/get-logging-in-state-demo';
55
import { GetLoginInfoDemo } from '@/components/demo/get-login-info-demo';
6-
import { Authenticated } from '@/components/elven-ui/authenticated';
76
import { CardContent, Card } from '@/components/ui/card';
87

98
const Home: NextPage = () => {
@@ -56,79 +55,68 @@ const Home: NextPage = () => {
5655
</div>
5756
</CardContent>
5857
</Card>
59-
<Authenticated
60-
spinnerCentered
61-
fallback={
62-
<div className="font-bold text-2xl text-center mt-8">
63-
Connect your wallet!
58+
<SimpleDemo />
59+
<Card className="mb-4">
60+
<CardContent className="mt-6">
61+
<div className="mb-4">
62+
Now let us see what other valuable tools are included.
6463
</div>
65-
}
66-
>
67-
<SimpleDemo />
68-
<Card className="mb-4">
69-
<CardContent className="mt-6">
70-
<div className="mb-4">
71-
Now let us see what other valuable tools are included.
72-
</div>
73-
<div className="mb-4">
74-
You can get the data of currently logged-in users and network
75-
state. These are:
76-
</div>
77-
<ul>
78-
<li>- User data such as: address, nonce, balance.</li>
79-
<li>- User logging in state: pending, error, loggedIn.</li>
80-
<li>
81-
- Login info state: loginMethod, expires, loginToken, signature.
82-
</li>
83-
</ul>
84-
</CardContent>
85-
</Card>
86-
<div className="flex mb-4 gap-4 flex-wrap justify-center flex-col lg:flex-row">
87-
<GetUserDataDemo />
88-
<GetLoginInfoDemo />
89-
<GetLoggingInStateDemo />
90-
</div>
91-
<Card className="mb-4">
92-
<CardContent className="mt-6">
93-
<span>You will also get a couple of other tools, like:</span>
94-
<ul>
95-
<li>
96-
- Authenticated component - wrapper to check the auth state
97-
</li>
98-
<li>- LoginComponent - component with 3 auth options</li>
99-
<li>
100-
- LoginModalButton component - ready to use modal with
101-
LoginComponent
102-
</li>
103-
<li>
104-
- You will get all tools from{' '}
105-
<a href="https://www.useElven.com" target="_blank">
106-
useElven
107-
</a>
108-
</li>
109-
<li>- Preserved app state after hard refresh of the page</li>
110-
<li>
111-
- And of course Shadcn UI, Tailwind CSS and NextJS framework
112-
</li>
113-
</ul>
114-
</CardContent>
115-
</Card>
116-
<Card>
117-
<CardContent className="mt-6">
118-
<div>Better docs, and more improvements soon!</div>
119-
<div>
120-
Check the{' '}
121-
<a
122-
target="_blank"
123-
href="https://github.com/xdevguild"
124-
className="underline"
125-
>
126-
xDevGuild
64+
<div className="mb-4">
65+
You can get the data of currently logged-in users and network state.
66+
These are:
67+
</div>
68+
<ul>
69+
<li>- User data such as: address, nonce, balance.</li>
70+
<li>- User logging in state: pending, error, loggedIn.</li>
71+
<li>
72+
- Login info state: loginMethod, expires, loginToken, signature.
73+
</li>
74+
</ul>
75+
</CardContent>
76+
</Card>
77+
<div className="flex mb-4 gap-4 flex-wrap justify-center flex-col lg:flex-row">
78+
<GetUserDataDemo />
79+
<GetLoginInfoDemo />
80+
<GetLoggingInStateDemo />
81+
</div>
82+
<Card className="mb-4">
83+
<CardContent className="mt-6">
84+
<span>You will also get a couple of other tools, like:</span>
85+
<ul>
86+
<li>- Authenticated component - wrapper to check the auth state</li>
87+
<li>- LoginComponent - component with 3 auth options</li>
88+
<li>
89+
- LoginModalButton component - ready to use modal with
90+
LoginComponent
91+
</li>
92+
<li>
93+
- You will get all tools from{' '}
94+
<a href="https://www.useElven.com" target="_blank">
95+
useElven
12796
</a>
128-
</div>
129-
</CardContent>
130-
</Card>
131-
</Authenticated>
97+
</li>
98+
<li>- Preserved app state after hard refresh of the page</li>
99+
<li>
100+
- And of course Shadcn UI, Tailwind CSS and NextJS framework
101+
</li>
102+
</ul>
103+
</CardContent>
104+
</Card>
105+
<Card>
106+
<CardContent className="mt-6">
107+
<div>Better docs, and more improvements soon!</div>
108+
<div>
109+
Check the{' '}
110+
<a
111+
target="_blank"
112+
href="https://github.com/xdevguild"
113+
className="underline"
114+
>
115+
xDevGuild
116+
</a>
117+
</div>
118+
</CardContent>
119+
</Card>
132120
</>
133121
);
134122
};

‎components/demo/connect-wallet-info.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export const ConnectWalletInfo = ({ loggedIn }: { loggedIn: boolean }) => {
2+
if (loggedIn) return null;
3+
4+
return (
5+
<div className="text-destructive text-xs font-bold ml-3">
6+
Connect your wallet!
7+
</div>
8+
);
9+
};

‎components/demo/get-login-info-demo.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,11 @@ export const GetLoginInfoDemo = () => {
2626
</div>
2727
<div>
2828
<span className="inline-block font-bold">loginToken:</span>
29-
<div className="break-all text-left">{loginToken || '-'}</div>
29+
{loginToken ? (
30+
<div className="break-words text-left">{loginToken}</div>
31+
) : (
32+
'-'
33+
)}
3034
</div>
3135
<TooltipProvider>
3236
<Tooltip>

‎components/demo/get-user-data-demo.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,16 @@ export const GetUserDataDemo = () => {
1616
<div className="text-xl mb-2 font-bold">User data:</div>
1717
<div>
1818
<span className="inline-block font-bold">address:</span>{' '}
19-
<Link
20-
className="underline"
21-
href={`${explorerAddress}/accounts/${address}`}
22-
>
23-
{shortenHash(address, 8)}
24-
</Link>
19+
{address ? (
20+
<Link
21+
className="underline"
22+
href={`${explorerAddress}/accounts/${address}`}
23+
>
24+
{shortenHash(address, 8)}
25+
</Link>
26+
) : (
27+
'-'
28+
)}
2529
</div>
2630
<div>
2731
<span className="inline-block font-bold">guardian:</span>{' '}

‎components/demo/sign-message-demo.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
'use client';
22

3-
import { useLoginInfo, useSignMessage } from '@useelven/core';
3+
import { useLoggingIn, useLoginInfo, useSignMessage } from '@useelven/core';
44
import { Card, CardContent, CardFooter } from '@/components/ui/card';
55
import { Button } from '@/components/ui/button';
6+
import { ConnectWalletInfo } from '@/components/demo/connect-wallet-info';
67

78
export const SimpleSignMessageDemo = () => {
89
const { loginMethod } = useLoginInfo();
10+
const { loggedIn } = useLoggingIn();
911
const { signMessage, pending, signature } = useSignMessage();
1012

1113
const handleSignMessage = () => {
@@ -41,13 +43,14 @@ export const SimpleSignMessageDemo = () => {
4143
<CardFooter>
4244
<Button
4345
variant="outline"
44-
disabled={pending}
46+
disabled={pending || !loggedIn}
4547
onClick={handleSignMessage}
4648
>
4749
{pending
4850
? `Pending... (confirmation with ${loginMethod})`
4951
: 'Sign a message'}
5052
</Button>
53+
<ConnectWalletInfo loggedIn={loggedIn} />
5154
</CardFooter>
5255
</Card>
5356
);

‎components/demo/simple-deploy-sc-demo.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,20 @@
33
import {
44
TransactionCallbackParams,
55
useConfig,
6+
useLoggingIn,
67
useScDeploy,
78
} from '@useelven/core';
89
import { Card, CardContent, CardFooter } from '@/components/ui/card';
910
import { Button } from '@/components/ui/button';
11+
import { ConnectWalletInfo } from '@/components/demo/connect-wallet-info';
1012

1113
export const SimpleDeployScDemo = ({
1214
cb,
1315
}: {
1416
cb: (params: TransactionCallbackParams) => void;
1517
}) => {
1618
const { explorerAddress } = useConfig();
19+
const { loggedIn } = useLoggingIn();
1720
const { deploy, scAddress, txResult, pending } = useScDeploy({ cb });
1821

1922
const handleDeploy = () => {
@@ -50,9 +53,14 @@ export const SimpleDeployScDemo = ({
5053
)}
5154
</CardContent>
5255
<CardFooter>
53-
<Button variant="outline" disabled={pending} onClick={handleDeploy}>
56+
<Button
57+
variant="outline"
58+
disabled={pending || !loggedIn}
59+
onClick={handleDeploy}
60+
>
5461
{pending ? 'Pending...' : 'Deploy'}
5562
</Button>
63+
<ConnectWalletInfo loggedIn={loggedIn} />
5664
</CardFooter>
5765
</Card>
5866
);

‎components/demo/simple-egld-tx-demo.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ import {
44
TransactionCallbackParams,
55
useConfig,
66
useAccount,
7+
useLoggingIn,
78
} from '@useelven/core';
89
import { useCallback } from 'react';
910
import { shortenHash } from '@/lib/shortenHash';
1011
import { Button } from '@/components/ui/button';
1112
import { Card, CardContent, CardFooter } from '@/components/ui/card';
13+
import { ConnectWalletInfo } from '@/components/demo/connect-wallet-info';
1214

1315
const egldTransferAddress = process.env.NEXT_PUBLIC_EGLD_TRANSFER_ADDRESS || '';
1416
const egldTransferAmount = process.env.NEXT_PUBLIC_EGLD_TRANSFER_AMOUNT || '';
@@ -19,6 +21,7 @@ export const SimpleEGLDTxDemo = ({
1921
cb: (params: TransactionCallbackParams) => void;
2022
}) => {
2123
const { pending, triggerTx } = useTransaction({ cb });
24+
const { loggedIn } = useLoggingIn();
2225
const { activeGuardianAddress } = useAccount();
2326
const { explorerAddress, chainType } = useConfig();
2427

@@ -41,7 +44,7 @@ export const SimpleEGLDTxDemo = ({
4144
}, [activeGuardianAddress, triggerTx]);
4245

4346
return (
44-
<Card className="flex-1 flex flex-col justify-between">
47+
<Card className="flex flex-1 flex-col justify-between">
4548
<CardContent className="mt-6">
4649
<div className="mb-4">
4750
1. You will be sending 0.001 EGLD to the address: <br />
@@ -56,9 +59,14 @@ export const SimpleEGLDTxDemo = ({
5659
</div>
5760
</CardContent>
5861
<CardFooter>
59-
<Button variant="outline" disabled={pending} onClick={handleSendTx}>
62+
<Button
63+
variant="outline"
64+
disabled={pending || !loggedIn}
65+
onClick={handleSendTx}
66+
>
6067
Send Transaction
6168
</Button>
69+
<ConnectWalletInfo loggedIn={loggedIn} />
6270
</CardFooter>
6371
</Card>
6472
);

‎components/demo/simple-nft-mint-demo.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,13 @@ import {
99
TransactionCallbackParams,
1010
useConfig,
1111
useAccount,
12+
useLoggingIn,
1213
} from '@useelven/core';
1314
import { useCallback } from 'react';
1415
import { shortenHash } from '@/lib/shortenHash';
1516
import { Button } from '@/components/ui/button';
1617
import { Card, CardContent, CardFooter } from '@/components/ui/card';
18+
import { ConnectWalletInfo } from '@/components/demo/connect-wallet-info';
1719

1820
const mintSmartContractAddress =
1921
process.env.NEXT_PUBLIC_MINT_SMART_CONTRACT_ADDRESS || '';
@@ -26,6 +28,7 @@ export const SimpleNftMintDemo = ({
2628
}: {
2729
cb: (params: TransactionCallbackParams) => void;
2830
}) => {
31+
const { loggedIn } = useLoggingIn();
2932
const { pending, triggerTx } = useTransaction({ cb });
3033
const { activeGuardianAddress } = useAccount();
3134
const { explorerAddress, chainType } = useConfig();
@@ -52,7 +55,7 @@ export const SimpleNftMintDemo = ({
5255
}, [activeGuardianAddress, triggerTx]);
5356

5457
return (
55-
<Card className="flex-1">
58+
<Card className="flex flex-1 flex-col justify-between">
5659
<CardContent className="mt-6">
5760
<div className="mb-4">
5861
2. You will be minting one NFT using{' '}
@@ -69,9 +72,14 @@ export const SimpleNftMintDemo = ({
6972
</div>
7073
</CardContent>
7174
<CardFooter>
72-
<Button variant="outline" disabled={pending} onClick={handleSendTx}>
75+
<Button
76+
variant="outline"
77+
disabled={pending || !loggedIn}
78+
onClick={handleSendTx}
79+
>
7380
Mint
7481
</Button>
82+
<ConnectWalletInfo loggedIn={loggedIn} />
7583
</CardFooter>
7684
</Card>
7785
);

‎components/demo/simple-sc-query-demo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const SimpleScQeryDemo = ({
4141
};
4242

4343
return (
44-
<Card className="flex-1">
44+
<Card className="flex flex-1 flex-col justify-between">
4545
<CardContent className="mt-6">
4646
<div className="mb-4">
4747
3. You will be querying the smart contract for NFT tokens left to

0 commit comments

Comments
 (0)