feat: add stylex template

packages/stylex/.babelrc.js

@@ -14,6 +14,7 @@ module.exports = {
 					rootDir: path.join(__dirname, '../..')
 				}
 			}
-		]
+		],
+		'@babel/plugin-transform-private-methods'
 	]
 };

packages/stylex/app/_components/home/CTA/CTA.tsx

@@ -0,0 +1,56 @@
+import Button from '@components/theme/Button';
+import Text from '@components/theme/Text';
+import { EFontWeight, ETextAlign, ETextType } from '@components/theme/Text/Text.enum';
+import * as stylex from '@stylexjs/stylex';
+import { FC } from 'react';
+import { EColor, ESize } from 'styles/theme.enum';
+import { colors } from '../../../../styles/theme.stylex';
+
+const SM = '@media only screen and (min-width: 600px)';
+
+const styles = stylex.create({
+	container: {
+		display: 'flex',
+		flexDirection: 'column',
+		justifyContent: 'center',
+		alignItems: 'center',
+		transform: {
+			default: 'scale(0.9)',
+			[SM]: 'scale(1)'
+		}
+	},
+	text: {
+		display: 'flex',
+		flexDirection: 'column',
+		justifyContent: 'center',
+		alignItems: 'center'
+	},
+	button: {
+		marginTop: '32px',
+		color: colors.lightBlue
+	}
+});
+
+const cloneCmd = 'npx create-nextjs-dapp';
+
+const CTA: FC = () => {
+	return (
+		<div {...stylex.props(styles.container)}>
+			<Text
+				type={ETextType.h2}
+				size={ESize.s}
+				color={EColor.gray}
+				weight={EFontWeight.regular}
+				align={ETextAlign.center}
+				style={styles.text}
+			>
+				Start coding is easy as
+				<Button style={styles.button} valueToCopy={cloneCmd + '@latest'}>
+					{cloneCmd}
+				</Button>
+			</Text>
+		</div>
+	);
+};
+
+export { CTA };

packages/stylex/app/_components/home/CTA/index.ts

@@ -0,0 +1 @@
+export { CTA as default } from './CTA';

packages/stylex/app/_components/home/HomePage/HomePage.tsx

@@ -1,5 +1,6 @@
 import * as stylex from '@stylexjs/stylex';
 import { spacing } from '../../../../styles/theme.stylex';
+import CTA from '../CTA';
 import Tagline from '../Tagline';
 import Technologies from '../Technologies';
 
@@ -33,6 +34,8 @@ const HomePage = () => {
 			<Technologies />
 
 			<Tagline />
+
+			<CTA />
 		</main>
 	);
 };

packages/stylex/app/_components/home/Technologies/Technologies.tsx

@@ -76,7 +76,8 @@ const styles = stylex.create({
 		width: 'auto',
 		height: {
 			default: '30px',
-			[MD]: '45px'
+			[MD]: '45px',
+			[LG]: '60px'
 		}
 	},
 	link: {

packages/stylex/app/_components/Navbar/Navbar.tsx → packages/stylex/app/_components/navbar/Navbar/Navbar.tsx

@@ -3,7 +3,8 @@ import Text from '@components/theme/Text';
 import { ETextType } from '@components/theme/Text/Text.enum';
 import * as stylex from '@stylexjs/stylex';
 import { FaStar } from 'react-icons/fa';
-import { ESize } from '../../../styles/theme.enum';
+import { ESize } from '../../../../styles/theme.enum';
+import WalletButton from '../WalletButton';
 
 const repoUrl = 'https://github.com/swiiny/create-nextjs-dapp';
 
@@ -15,7 +16,7 @@ const styles = stylex.create({
 		position: 'fixed',
 		top: 0,
 		left: 0,
-		zIndex: 100,
+		zIndex: 10,
 		display: 'flex',
 		width: '100%',
 		padding: {
@@ -35,11 +36,13 @@ const styles = stylex.create({
 	},
 	buttonsContainer: {
 		display: 'flex',
-		alignItems: 'center'
+		alignItems: 'center',
+		gap: '1rem'
 	},
 	button: {
 		display: {
-			default: 'flex'
+			default: 'initial',
+			'@media (max-width: 600px)': 'none'
 		}
 	},
 	icon: {
@@ -55,11 +58,11 @@ const Navbar = () => {
 			</Text>
 
 			<div {...stylex.props(styles.buttonsContainer)}>
-				<Button href={repoUrl} icon={<FaStar size={28} {...stylex.props(styles.icon)} />} style={styles.button}>
+				<Button href={repoUrl} icon={<FaStar size={28} {...stylex.props(styles.icon, styles.button)} />}>
 					Star on Github
 				</Button>
 
-				{/* <WalletButton /> */}
+				<WalletButton />
 			</div>
 		</nav>
 	);

packages/stylex/app/_components/navbar/WalletButton/WalletButton.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import Button from '@components/theme/Button';
+import { WALLETS } from '@contexts/Web3Context/Web3Context.variables';
+import useWeb3 from '@hooks/useWeb3';
+import Address from '@models/Address';
+import * as stylex from '@stylexjs/stylex';
+import { FC } from 'react';
+import { MdOutlineAccountBalanceWallet } from 'react-icons/md';
+import { colors } from '../../../../styles/theme.stylex';
+import WalletModal from '../WalletModal';
+import { IWalletButton } from './WalletButton.type';
+
+const styles = stylex.create({
+	button: {
+		color: colors.lightBlue
+	}
+});
+
+const WalletButton: FC<IWalletButton> = () => {
+	const { connectWallet, accounts, setIsWalletModalOpen, isWalletModalOpen } = useWeb3();
+
+	const address = accounts[0]?.address;
+	const ens = accounts[0]?.ens;
+
+	const isWalletConnected = !!address;
+
+	return (
+		<>
+			<WalletModal isOpen={isWalletModalOpen} onClose={() => setIsWalletModalOpen(false)} />
+			<Button
+				onClick={isWalletConnected ? () => setIsWalletModalOpen(true) : () => connectWallet(WALLETS.blocknative)}
+				icon={<MdOutlineAccountBalanceWallet size={28} />}
+				style={styles.button}
+			>
+				{isWalletConnected ? ens?.name || Address.from(address)?.truncate() : 'Connect Wallet'}
+			</Button>
+		</>
+	);
+};
+
+export { WalletButton };

packages/stylex/app/_components/navbar/WalletButton/WalletButton.type.ts

@@ -0,0 +1,4 @@
+
+interface IWalletButton {}
+
+export type { IWalletButton }

packages/stylex/app/_components/navbar/WalletButton/index.ts

@@ -0,0 +1 @@
+export { WalletButton as default } from './WalletButton';

packages/stylex/app/_components/navbar/WalletModal/WalletModal.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import Portal from '@components/Portal';
+import Text from '@components/theme/Text';
+import { EFontWeight, ETextAlign } from '@components/theme/Text/Text.enum';
+import useWeb3 from '@hooks/useWeb3';
+import * as stylex from '@stylexjs/stylex';
+import { FC, useEffect, useState } from 'react';
+import { ESize } from 'styles/theme.enum';
+import { colors, spacing } from '../../../../styles/theme.stylex';
+import { IWalletModal } from './WalletModal.type';
+
+const styles = stylex.create({
+	bgButton: {
+		position: 'fixed',
+		inset: 0,
+		zIndex: 900,
+		backgroundColor: colors.black,
+		opacity: 0.0,
+		transition: 'opacity 0.3s ease-in-out',
+		border: 'none'
+	},
+	bgButtonVisible: {
+		opacity: 0.5
+	},
+	modalContainer: {
+		display: 'flex',
+		flexDirection: 'column',
+		justifyContent: 'center',
+		alignItems: 'center',
+		position: 'fixed',
+		zIndex: 901,
+		transition: 'opacity 0.3s ease-in-out',
+		top: '50%',
+		left: '50%',
+		transform: 'translate(-50%, -50%)',
+		width: 500,
+		height: 'auto',
+		opacity: 0,
+		padding: {
+			default: spacing['2xs'],
+			'@media (min-width: 900px)': spacing.s
+		},
+		borderRadius: '13px',
+		background: colors.darkGradient,
+		border: '1px solid',
+		borderColor: colors.darkGray,
+		boxShadow: '0px 5px 20px 10px #12131450'
+	},
+	modalContainerVisible: {
+		opacity: 1
+	},
+	button: {
+		border: 'none',
+		height: 80,
+		width: '100%',
+		display: 'flex',
+		justifyContent: 'center',
+		alignItems: 'center',
+		borderRadius: 8,
+		backgroundColor: {
+			default: colors.transparentGray,
+			':hover': colors.lessTransparentGray
+		},
+		padding: '0 20px',
+		cursor: 'pointer',
+		transition: 'all 0.3s ease-in-out'
+	}
+});
+
+const WalletModal: FC<IWalletModal> = ({ isOpen = false, onClose = () => {} }) => {
+	const { disconnectWallet } = useWeb3();
+
+	const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
+
+	useEffect(() => {
+		if (isOpen) {
+			const timeout = setTimeout(() => {
+				document.body.style.overflow = 'hidden';
+				setIsModalVisible(true);
+			}, 10);
+
+			return () => clearTimeout(timeout);
+		} else {
+			const timeout = setTimeout(() => {
+				document.body.style.overflow = 'visible';
+				document.body.style.overflowX = 'hidden';
+
+				setIsModalVisible(false);
+			}, 400);
+
+			return () => clearTimeout(timeout);
+		}
+	}, [isOpen]);
+
+	const handleDisconnectWallet = () => {
+		onClose();
+
+		setTimeout(() => {
+			disconnectWallet();
+		}, 300);
+	};
+
+	if (!isOpen && !isModalVisible) {
+		return <></>;
+	}
+
+	return (
+		<Portal selector='body'>
+			<button
+				{...stylex.props(styles.bgButton, isModalVisible && isOpen ? styles.bgButtonVisible : {})}
+				onClick={onClose}
+			/>
+
+			<div {...stylex.props(styles.modalContainer, isModalVisible && isOpen ? styles.modalContainerVisible : {})}>
+				<button onClick={() => handleDisconnectWallet()} {...stylex.props(styles.button)}>
+					<Text size={ESize.l} weight={EFontWeight.bold} align={ETextAlign.center}>
+						Disconnect Wallet
+					</Text>
+				</button>
+			</div>
+		</Portal>
+	);
+};
+
+export { WalletModal };

packages/stylex/app/_components/navbar/WalletModal/WalletModal.type.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+interface IWalletModal {
+	isOpen: boolean;
+	onClose: () => void;
+}
+
+export type { IWalletModal };

packages/stylex/app/_components/navbar/WalletModal/index.ts

@@ -0,0 +1 @@
+export { WalletModal as default } from './WalletModal';

packages/stylex/app/_components/theme/Button/Button.tsx

@@ -40,14 +40,19 @@ const styles = stylex.create({
 		display: 'flex',
 		justifyContent: 'center',
 		alignItems: 'center',
-		marginLeft: '20px'
+		marginLeft: '20px',
+		color: 'inherit'
 	},
 	icons: {
-		position: 'absolute'
+		position: 'absolute',
+		transition: {
+			'@media screen and (prefers-reduced-motion: no-preference)': 'all 0.3s ease-in-out'
+		}
 	},
 	firstIcon: {
 		opacity: 1,
-		transform: 'translateX(0) rotateX(0)'
+		transform: 'translateX(0) rotateX(0)',
+		color: 'inherit'
 	},
 	firstIconActive: {
 		opacity: 0,
@@ -62,7 +67,7 @@ const styles = stylex.create({
 		transform: 'translateX(0) rotateX(0)'
 	},
 	gradientContainer: {
-		height: '46px',
+		minHeight: '46px',
 		position: 'relative',
 		borderRadius: '13px',
 		background: colors.darkGradient,
@@ -74,8 +79,12 @@ const styles = stylex.create({
 		alignItems: 'center',
 		padding: {
 			default: '6px 18px',
-			'@media screen and (min-width: 600px)': '9px 27px',
+			[SM]: '9px 27px',
 			'@media screen and (min-width: 960px)': '12px 36px'
+		},
+		transform: {
+			default: 'scale(1.0)',
+			':hover': 'scale(1.02)'
 		}
 	},
 	containerGap: {
@@ -114,9 +123,12 @@ const Button: FC<IButton> = ({ children, onClick, href, valueToCopy, icon, style
 						<span {...stylex.props(styles.iconContainer)}>
 							<MdOutlineContentCopy
 								size={24}
-								{...stylex.props(isCopying ? styles.firstIconActive : styles.firstIcon)}
+								{...stylex.props(styles.icons, isCopying ? styles.firstIconActive : styles.firstIcon)}
+							/>
+							<MdOutlineCheck
+								size={24}
+								{...stylex.props(styles.icons, isCopying ? styles.secondIconActive : styles.secondIcon)}
 							/>
-							<MdOutlineCheck size={24} {...stylex.props(isCopying ? styles.secondIconActive : styles.secondIcon)} />
 						</span>
 					</>
 				) : icon ? (
@@ -140,7 +152,6 @@ const Button: FC<IButton> = ({ children, onClick, href, valueToCopy, icon, style
 					style,
 					isCopying && styles.copyingColor
 				)}
-				{...otherProps}
 			>
 				{content}
 			</a>