add video effect and result box

src/App.tsx

@@ -1,7 +1,52 @@
+import { useMemo } from 'react'
+import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
+import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react'
+import { WalletModalProvider } from '@solana/wallet-adapter-react-ui'
+import {
+	PhantomWalletAdapter,
+	SlopeWalletAdapter,
+	SolflareWalletAdapter,
+	SolletWalletAdapter,
+} from '@solana/wallet-adapter-wallets'
+import type { WalletError } from '@solana/wallet-adapter-base'
+import '@solana/wallet-adapter-react-ui/styles.css'
+import 'react-toastify/dist/ReactToastify.css'
+import { devnetRPC, mainnetRPC } from 'constant'
+import { ToastContainer } from 'react-toastify'
 import Router from 'routes'
 
+const network = WalletAdapterNetwork.Mainnet
+
 const App = () => {
-	return <Router />
+	// @ts-ignore
+	const endpoint = network === WalletAdapterNetwork.Devnet ? devnetRPC : mainnetRPC
+	const wallets = useMemo(
+		() => [
+			new PhantomWalletAdapter(),
+			new SlopeWalletAdapter({ network }),
+			new SolflareWalletAdapter({ network }),
+			new SolletWalletAdapter({ network }),
+		],
+		[network] //eslint-disable-line
+	)
+
+	const walletConnectionError = (error: WalletError) => {
+		console.log('Wallet Connection Error:', error)
+	}
+	return (
+		<ConnectionProvider endpoint={endpoint}>
+			<WalletProvider
+				wallets={wallets}
+				onError={walletConnectionError}
+				autoConnect={true}
+			>
+				<WalletModalProvider>
+					<Router />
+					<ToastContainer style={{ fontSize: 14 }} />
+				</WalletModalProvider>
+			</WalletProvider>
+		</ConnectionProvider>
+	)
 }
 
 export default App

src/components/FunkyBox/index.tsx

@@ -1,6 +1,6 @@
-// import { useMemo } from 'react';
-// import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';
-// import { useConnection, useWallet } from '@solana/wallet-adapter-react';
+import { useMemo } from 'react'
+import { useWallet } from '@solana/wallet-adapter-react'
+import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
 import SolanaIcon from 'assets/icons/solana.svg'
 
 type FunkyBoxProps = {
@@ -11,16 +11,17 @@ type FunkyBoxProps = {
 
 type Props = {
 	box: FunkyBoxProps
+	isOpen: boolean
+	onClick: () => void
 }
 
-const FunkyBox = ({ box }: Props) => {
-	const { imageUrl, videoUrl, value } = box
+const FunkyBox = ({ box, isOpen, onClick }: Props) => {
+	const { imageUrl, value } = box
 
-	// const { connection } = useConnection();
-	// const wallet = useWallet();
-	// const isConnected = useMemo(() => {
-	// 	return !!wallet.publicKey;
-	// }, [wallet.publicKey]);
+	const wallet = useWallet()
+	const isConnected = useMemo(() => {
+		return !!wallet.publicKey
+	}, [wallet.publicKey])
 
 	return (
 		<div className="box">
@@ -30,9 +31,13 @@ const FunkyBox = ({ box }: Props) => {
 					<img src={SolanaIcon} alt="" width="40px" height="40px" />
 				</div>
 				<span>{value}</span>
-				{/* <WalletMultiButton className='wallet-connect'>
-					{!isConnected ? 'Select Wallet' : 'Open'}
-				</WalletMultiButton> */}
+				{!isConnected ? (
+					<WalletMultiButton className="wallet-connect">Select Wallet</WalletMultiButton>
+				) : (
+					<button className="wallet-connect" onClick={onClick}>
+						{isOpen ? 'Processing...' : 'Open'}
+					</button>
+				)}
 			</div>
 		</div>
 	)

src/constant/index.ts

@@ -0,0 +1,3 @@
+export const devnetRPC = 'https://api.devnet.solana.com'
+export const mainnetRPC =
+	'https://quiet-aged-frog.solana-mainnet.quiknode.pro/6a56c0f12de472ff85a245955e5ff33d99704b1a'

src/pages/FunkyBoxes/FunkyBoxes.scss

@@ -145,4 +145,39 @@
       }
     }
   }
+
+  .video-box {
+    position: fixed;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    backdrop-filter: blur(12px);
+  }
+
+  .result-modal {
+    position: fixed;
+    z-index: 100;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+
+    .modal-content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      padding: 20px 30px;
+      width: fit-content;
+      height: fit-content;
+      background-color: #323232;
+      font-size: 18px;
+      line-height: 1.5;
+    }
+  }
 }

src/pages/FunkyBoxes/FunkyBoxes.tsx

@@ -1,29 +1,75 @@
+import { useEffect, useRef, useState } from 'react'
 import MainLayout from 'layouts/MainLayout'
 import FunkyBox from 'components/FunkyBox'
 import './FunkyBoxes.scss'
 
 const boxes = [
-	{ imageUrl: '/img/lootbox-1.jpg', videoUrl: '/video/lootbox-1.mp4', value: 0.1 },
-	{ imageUrl: '/img/lootbox-2.jpg', videoUrl: '/video/lootbox-2.mp4', value: 0.2 },
-	{ imageUrl: '/img/lootbox-3.jpg', videoUrl: '/video/lootbox-3.mp4', value: 0.3 },
+	{ imageUrl: '/img/lootbox-1.jpg', videoUrl: '/videos/lootbox-1.mp4', value: 0.1 },
+	{ imageUrl: '/img/lootbox-2.jpg', videoUrl: '/videos/lootbox-2.mp4', value: 0.2 },
+	{ imageUrl: '/img/lootbox-3.jpg', videoUrl: '/videos/lootbox-3.mp4', value: 0.3 },
 ]
 
 const FunkyBoxes = () => {
+	const [openedBox, setOpenedBox] = useState<number>(-1)
+	const [isOpen, setIsOpen] = useState<boolean>(false)
+	const videoRef = useRef<HTMLVideoElement>(null)
+
+	const handleSelectBox = (i: number) => {
+		setOpenedBox(i)
+	}
+
+	useEffect(() => {
+		if (openedBox === -1) return
+		videoRef.current?.play()
+		setTimeout(() => {
+			setOpenedBox(-1)
+			handleShowResult()
+		}, 7000)
+	}, [openedBox])
+
+	const handleShowResult = () => {
+		setIsOpen(true)
+		setTimeout(() => {
+			setIsOpen(false)
+		}, 2000)
+	}
+
 	return (
 		<MainLayout title="Funky Boxes" className="funky-boxes">
 			<div className="container">
 				<h1 className="title">Open Lotties to win up to 100X in the SOL</h1>
 				<h5 className="description">No house edge, with 100% RTP.</h5>
 				<div className="boxes">
 					{boxes.map((box, index) => (
-						<FunkyBox box={box} key={index} />
+						<FunkyBox
+							box={box}
+							key={index}
+							isOpen={index === openedBox}
+							onClick={() => handleSelectBox(index)}
+						/>
 					))}
 				</div>
 				<h3 className="responsive">Open Responsibly</h3>
 				<div className="recent-open">
 					<h2>Recent Opens</h2>
 				</div>
 			</div>
+			{openedBox !== -1 ? (
+				<div className="video-box">
+					<video ref={videoRef}>
+						<source src={boxes[openedBox].videoUrl} type="video/mp4" />
+					</video>
+				</div>
+			) : (
+				<></>
+			)}
+			{isOpen ? (
+				<div className="result-modal" onClick={() => setIsOpen(false)}>
+					<div className="modal-content">Sorry you lost, better luck next time</div>
+				</div>
+			) : (
+				<></>
+			)}
 		</MainLayout>
 	)
 }