Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@imhson
imhson committed Feb 19, 2024
1 parent 92615fc commit 73cbc35
Show file tree
Hide file tree
Showing 11 changed files with 1,790 additions and 168 deletions.
2 changes: 1 addition & 1 deletion app/components/header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export function Header() {
</div>
{open && account && (
<div className='absolute top-full right-[max(16px,calc(50%-545px))] p-4 rounded-b-md flex flex-col gap-4 border-x border-b border-[#D52121] bg-[linear-gradient(180deg,rgba(117,20,20,0.50)_0%,rgba(133,7,7,0.50)_0.01%,rgba(244,63,63,0.50)_100%)] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] backdrop-blur-[6px]'>
{account?.code && (
{account?.code && account.isFollowed && (
<Link
onClick={() => setOpen(false)}
href='/my-inventory'
Expand Down
197 changes: 75 additions & 122 deletions app/components/homeComponents/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,10 @@ import LeaderboardSection from './leaderboardSection'
import LixiStage from './lixiStage'
import RuleSection from './ruleSection'
import { getItem } from '@/utils/localStorage'
import NFImage from '@/assets/404.png'
import BGFl from '@/assets/bg-follow.svg'
import BGFldt from '@/assets/bg-follow-dt.svg'
import Link from 'next/link'
import { SpecialResult } from './specialResult'
export default function HomePage() {
const { account, submitCode } = useContext(Context)
const [loading, setLoading] = useState(false)
Expand Down Expand Up @@ -60,80 +63,30 @@ export default function HomePage() {
</main>
)
}
if (
moment('2024-02-10T00:00:00.00+07:00').isAfter(data?.datetime) &&
location.origin == 'https://lixi.aura.network' &&
getItem('backdoor_code') != 'AURA100$'
) {

if (account && !account.code) {
return (
<main className='relative min-h-screen'>
{/* background */}
<div className='absolute inset-0 overflow-hidden flex flex-col items-center'>
<div className='absolute inset-x-0 top-0 overflow-hidden flex flex-col items-center'>
<Image src={Background} alt='' className='w-full min-w-[1008px] hidden sm:block' />
<Image src={MBackground} alt='' className='w-full min-w-[375px] mt-[50px] sm:hidden' />
</div>
{/* background */}
<div className='relative overflow-hidden flex flex-col items-center w-full mx-auto'>
<Image src={Stage} alt='' className='mt-16 max-w-[390px] w-[110%] mr-[2.3rem]' />
<div className='absolute top-[66%] inset-x-0 flex flex-col items-center'>
<Countdown
date={new Date('2024-02-10T00:00:00.00+07:00')}
renderer={({ days, hours, minutes, seconds }) => {
return (
<div className='flex gap-8 justify-center items-center'>
<div className='flex flex-col items-center gap-[6px]'>
<div className='flex gap-[10px]'>
<div
className={`border border-[#FFFFFF]/40 bg-[linear-gradient(180deg,#FF5D5D_0%,rgba(255,255,255,0.1)_100%)] w-[28px] h-[43px] rounded-sm flex justify-center items-center ${DN.className} text-[28px] leading-9 text-[#FEF368]`}>
{zeroPad(days).slice(0, 1)}
</div>
<div
className={`border border-[#FFFFFF]/40 bg-[linear-gradient(180deg,#FF5D5D_0%,rgba(255,255,255,0.1)_100%)] w-[28px] h-[43px] rounded-sm flex justify-center items-center ${DN.className} text-[28px] leading-9 text-[#FEF368]`}>
{zeroPad(days).slice(-1)}
</div>
</div>
<div className='font-medium text-[#EDD0BA]'>{`DAY${days > 1 ? 'S' : ''}`}</div>
</div>
<div className='flex flex-col items-center gap-[6px]'>
<div className='flex gap-[10px]'>
<div
className={`w-[28px] border border-[#FFFFFF]/40 bg-[linear-gradient(180deg,#FF5D5D_0%,rgba(255,255,255,0.1)_100%)] h-[43px] rounded-sm flex justify-center items-center ${DN.className} text-[28px] leading-9 text-[#FEF368]`}>
{zeroPad(hours).slice(0, 1)}
</div>
<div
className={`w-[28px] border border-[#FFFFFF]/40 bg-[linear-gradient(180deg,#FF5D5D_0%,rgba(255,255,255,0.1)_100%)] h-[43px] rounded-sm flex justify-center items-center ${DN.className} text-[28px] leading-9 text-[#FEF368]`}>
{zeroPad(hours).slice(-1)}
</div>
</div>
<div className='font-medium text-[#EDD0BA]'>{`HOUR${hours > 1 ? 'S' : ''}`}</div>
</div>
<div className='flex flex-col items-center gap-[6px]'>
<div className='flex gap-[10px]'>
<div
className={`w-[28px] border border-[#FFFFFF]/40 bg-[linear-gradient(180deg,#FF5D5D_0%,rgba(255,255,255,0.1)_100%)] h-[43px] rounded-sm flex justify-center items-center ${DN.className} text-[28px] leading-9 text-[#FEF368]`}>
{zeroPad(minutes).slice(0, 1)}
</div>
<div
className={`w-[28px] border border-[#FFFFFF]/40 bg-[linear-gradient(180deg,#FF5D5D_0%,rgba(255,255,255,0.1)_100%)] h-[43px] rounded-sm flex justify-center items-center ${DN.className} text-[28px] leading-9 text-[#FEF368]`}>
{zeroPad(minutes).slice(-1)}
</div>
</div>
<div className='font-medium text-[#EDD0BA]'>{`MINUTE${minutes > 1 ? 'S' : ''}`}</div>
</div>
</div>
)
}}
/>
<div className='text-sm italic text-[#FEA768] mt-8'>
Unwrap your blessings at 00:00 UTC+7, February 10th, 2024
<div className='flex flex-col items-center relative pt-20'>
<Image src={BGFl} alt='' className='md:hidden' />
<Image src={BGFldt} alt='' className='hidden md:block' />
<div className='bottom-[20%] w-[317px] md:w-[417px] absolute'>
<div className='text-base text-center'>
You're not able to access this time because you missed the Dragon's last visit. But stay tuned, more
exciting opportunities are on the horizon!
</div>
</div>
</div>
</main>
)
}

if (account && account.code) {
if (account && !account.isFollowed) {
return (
<main className='relative min-h-screen'>
{/* background */}
Expand All @@ -142,19 +95,57 @@ export default function HomePage() {
<Image src={MBackground} alt='' className='w-full min-w-[375px] mt-[50px] sm:hidden' />
</div>
{/* background */}
<div className='flex flex-col items-center xl:flex-row xl:items-start xl:justify-center xl:gap-12 xl:pt-7'>
<LixiStage />
<div className='flex flex-col items-center xl:mt-20'>
<RuleSection />
<div className='flex flex-col items-center md:flex-row md:items-start md:gap-[14px] md:ml-6'>
<FortuneNumberSection />
<LeaderboardSection />
<div className='flex flex-col items-center relative pt-20'>
<Image src={BGFl} alt='' className='md:hidden' />
<Image src={BGFldt} alt='' className='hidden md:block' />
<div className='bottom-5 w-[317px] md:w-[417px] absolute'>
<div className='text-sm'>
Follow Aura Network's Twitter and turn on your notifications to unveil the secrets of Dragon Power and
acquire Dragon Gems.
<br />
<br />
Note: The portal is available for those who have yet to claim their treasures; no further Li Xi will be
distributed upon entry.
</div>
<Link
href='https://twitter.com/intent/follow?screen_name=AuraNetworkHQ'
target='_blank'
className='p-[10px] rounded-2xl bg-[linear-gradient(180deg,#F3DBA9_0%,#FFA031_100%)] flex items-center gap-2 h-10 w-[149px] justify-center mx-auto mt-3'>
<span className='font-medium text-[#6D3A0A]'>Follow</span>
</Link>
<div className='text-[#FEA768] text-sm mt-3 text-center'>
Refresh if the page isn't automatically redirected
</div>
</div>
</div>
</main>
)
}
if (account) {
return (
<>
{account.specialRequestId && !getItem('request_id') && <SpecialResult requestId={account.specialRequestId} />}
<main className='relative min-h-screen'>
{/* background */}
<div className='absolute inset-x-0 top-0 overflow-hidden flex flex-col items-center'>
<Image src={Background} alt='' className='w-full min-w-[1008px] hidden sm:block' />
<Image src={MBackground} alt='' className='w-full min-w-[375px] mt-[50px] sm:hidden' />
</div>
{/* background */}
<div className='flex flex-col items-center xl:flex-row xl:items-start xl:justify-center xl:gap-12 xl:pt-7'>
<LixiStage />
<div className='flex flex-col items-center xl:mt-20'>
<RuleSection />
<div className='flex flex-col items-center md:flex-row md:items-start md:gap-[14px] md:ml-6'>
<FortuneNumberSection />
<LeaderboardSection />
</div>
</div>
</div>
</main>
</>
)
}

return (
<main className='relative min-h-screen'>
Expand All @@ -167,60 +158,22 @@ export default function HomePage() {
<div className='relative overflow-hidden flex flex-col items-center w-full mx-auto'>
<Image src={Stage} alt='' className='mt-16 max-w-[390px] w-[110%] mr-[2.3rem]' />
<div className='absolute top-[69%] inset-x-0 flex flex-col items-center'>
{account && !account?.code ? (
<>
<div className='text-[#F7C983] text-sm leading-4 font-semibold'>Fortune Number</div>
<div className='mt-4 w-[311px] flex gap-4'>
<input
value={value}
onChange={(e) => setValue(e.target.value)}
title='Fortune Number'
className={`text-sm leading-[18px] p-[10px] bg-[#fff] rounded-lg shadow-[0px_4px_8.8px_0px_rgba(0,0,0,0.25)_inset] w-[251px] ${
errorMsg ? 'text-[#F23A3A]' : 'text-[#292929]'
} focus:outline-none`}
<button
onClick={connectXHandler}
className='p-[10px] rounded-2xl bg-[linear-gradient(180deg,#F3DBA9_0%,#FFA031_100%)] flex items-center gap-2 h-10 w-[149px] justify-center'>
<span className='font-medium text-[#6D3A0A]'>Connect</span>
<span className='p-[3px]'>
<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'>
<path
d='M0.0340664 0L5.4393 7.7218L0 14H1.22427L5.98647 8.50322L9.83407 14H14L8.29052 5.84394L13.3534 0H12.1292L7.74358 5.06227L4.2 0H0.0340664ZM1.8344 0.963405H3.74821L12.1994 13.0366H10.2856L1.8344 0.963405Z'
fill='#6D3A0A'
/>
<button
onClick={submitCodeHandler}
disabled={!value || !!errorMsg}
className='cursor-pointer p-[10px] bg-[linear-gradient(180deg,#F3DBA9_0%,#FFA031_100%)] rounded-2xl disabled:bg-[linear-gradient(180deg,#EFEBE4_0%,#B3AAA0_100%)] [&_path]:disabled:stroke-[#9D9D9D]'>
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'>
<path d='M5 12H19' stroke='#6D3A0A' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
<path
d='M12 5L19 12L12 19'
stroke='#6D3A0A'
strokeWidth='2'
strokeLinecap='round'
strokeLinejoin='round'
/>
</svg>
</button>
</div>
<div className='text-sm leading-[18px] text-[#F23A3A] mt-[6px] w-[311px] min-h-[18px]'>{errorMsg}</div>
<div className='flex items-center gap-[10px] mt-2'>
<Image src={BlueLixi} alt='' className='h-8 w-8' />
<div className='text-[#FEA768] text-sm italic'>Collect a Fortune Number to receive a Blue Li Xi</div>
</div>
</>
) : (
<>
<button
onClick={connectXHandler}
className='p-[10px] rounded-2xl bg-[linear-gradient(180deg,#F3DBA9_0%,#FFA031_100%)] flex items-center gap-2 h-10 w-[149px] justify-center'>
<span className='font-medium text-[#6D3A0A]'>Connect</span>
<span className='p-[3px]'>
<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'>
<path
d='M0.0340664 0L5.4393 7.7218L0 14H1.22427L5.98647 8.50322L9.83407 14H14L8.29052 5.84394L13.3534 0H12.1292L7.74358 5.06227L4.2 0H0.0340664ZM1.8344 0.963405H3.74821L12.1994 13.0366H10.2856L1.8344 0.963405Z'
fill='#6D3A0A'
/>
</svg>
</span>
</button>
<div className='text-[#FEA768] italic text-sm leading-4 mt-11'>
*Please connect your X account to continue
</div>
</>
)}
</svg>
</span>
</button>
<div className='text-[#FEA768] italic text-sm leading-4 mt-11'>
*Please connect your X account to continue
</div>
</div>
</div>
</main>
Expand Down
2 changes: 1 addition & 1 deletion app/components/homeComponents/lixiStage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export default function LixiStage() {
</>
)
}
const Result = ({ requestId, setRequestLoading, isOpen, onOpenChange, requestLoading, onClose }: any) => {
export const Result = ({ requestId, setRequestLoading, isOpen, onOpenChange, requestLoading, onClose }: any) => {
const [prize, setPrize] = useState<any>()
const { account } = useContext(Context)
const { data } = useSubscription(GET_REQUEST_MANAGER, {
Expand Down
Loading

0 comments on commit 73cbc35

Please sign in to comment.