Skip to content

Commit

Permalink
Merge branch 'peter/main-lm' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
Peter committed Feb 2, 2024
2 parents 9d63836 + b0ffc60 commit 1bb2f07
Show file tree
Hide file tree
Showing 8 changed files with 302 additions and 23 deletions.
Binary file added public/images/lucky-money-envelops/lucky-money-background-conffeti.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/lucky-money-envelops/lucky-money-success.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/lucky-money-envelops/lucky-mony-background.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/public-sale/lucky_normal_bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/public-sale/lucky_reward_bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
143 changes: 128 additions & 15 deletions src/modules/PublicSale/luckyMoney/LuckMoneyModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,16 @@ import {
} from '@/stores/states/common/reducer';
import { commonSelector } from '@/stores/states/common/selector';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import React, { useEffect, useState } from 'react';
import { toast } from 'react-hot-toast';
import { Flex, Text } from '@chakra-ui/react';
import Loading from '@/components/Loading';
import s from './styles.module.scss';
import { closeModal } from '@/stores/states/modal/reducer';
import SvgInset from '@/components/SvgInset';
import bg from '@/public/images/lucky-money-envelops/lucky-money-background-conffeti.png';
import bgSuccess from '@/public/images/lucky-money-envelops/lucky-money-success.png';
import { formatAmount, formatCurrency } from '@/utils/format';

type Props = {
envelopSrc: string;
Expand All @@ -23,6 +31,8 @@ export default function LuckyMoneyModal({ envelopSrc }: Props) {
const currentLuckyMoney = useAppSelector(commonSelector).currentLuckyMoney;

const [submitting, setSubmitting] = useState(false);
const [reward, setReward] = useState<IPublicSaleLuckyMoney>();
const [subbmited, setSubmitted] = useState(false);

useEffect(() => {
handleClaim();
Expand All @@ -44,17 +54,22 @@ export default function LuckyMoneyModal({ envelopSrc }: Props) {
const handleClaim = async () => {
try {
setSubmitting(true);
// const res = await claimPublicSaleLuckyMoney(4072);

const res = await claimPublicSaleLuckyMoney(
currentLuckyMoney?.id as number,
);

if (res) {
toast.success(
`Claim successfully! You received ${currentLuckyMoney?.bvm_amount} BVM`,
);
} else {
toast.success('Better luck next time!');
}
setSubmitted(true);
setReward(res);

// if (res) {
// toast.success(
// `Claim successfully! You received ${currentLuckyMoney?.bvm_amount} BVM`,
// );
// } else {
// toast.success('Better luck next time!');
// }

const index = luckyMoneyList.indexOf(
currentLuckyMoney as IPublicSaleLuckyMoney,
Expand All @@ -66,20 +81,118 @@ export default function LuckyMoneyModal({ envelopSrc }: Props) {
getLatestCurrentLuckyMoney();
}
} catch (e: any) {
if (e?.code === -2010) {
toast.error('Already claimed.');
} else if (e?.code === 1003) {
toast.error('Something went wrong. Please try again.');
}
// if (e?.code === -2010) {
// toast.error('Already claimed.');
// } else if (e?.code === 1003) {
// toast.error('Something went wrong. Please try again.');
// }
getLatestCurrentLuckyMoney();
// onHide();
} finally {
setSubmitting(false);
setSubmitted(true);
}
};

const onHide = () => {
dispatch(
closeModal({
id: 'lucky-money-dialog',
}),
);
};

const handleShareTw = () => {
window.open('https://twitter.com', '_blank');
};

const renderLoading = () => {
if (submitting) {
return (
<div className={s.waiting}>
<Loading className={s.loading} />
</div>
);
}
return <></>;
};

const renderSuccess = () => {
if (subbmited) {
if (reward) {
return (
<div className={s.success}>
<div className={s.rewardTitle}>You have snatched</div>
<div className={s.rewardValue}>
{formatCurrency(reward?.bvm_amount || 0, 0, 0)}
</div>
<div className={s.rewardUnit}>BVM tokens</div>

<div className={s.btnShare} onClick={handleShareTw}>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="16" height="16" rx="8" fill="black" />
<path
d="M10.875 3.46875H12.4087L9.05875 7.3075L13 12.5313H9.91437L7.4975 9.3625L4.73187 12.5313H3.1975L6.78062 8.425L3 3.46875H6.16438L8.34875 6.36438L10.875 3.46875ZM10.3375 11.6113H11.1875L5.70187 4.34063H4.79062L10.3375 11.6113Z"
fill="white"
/>
</svg>
<span>Share to claim</span>
</div>
</div>
);
}
}

return <></>;
};

const renderFailed = () => {
if (subbmited) {
if (!reward) {
return (
<div className={s.failed}>
<div className={s.betterTitle}>Better luck next time!</div>
<div className={s.betterDesc}>
We are still dropping tons of Lucky Red Packets for early $BVM
contributors until the end of the public sale
</div>
</div>
);
}
}

return <></>;
};

return (
<div>
<img src={envelopSrc} />
<div className={s.LuckMoneyModal}>
<button onClick={onHide} className={s.closeBtn}>
<SvgInset
className={s.closeIcon}
svgUrl={`/icons/ic_close_modal.svg`}
/>
</button>
<div className={s.background}>
{subbmited && reward ? (
<img src={bgSuccess.src} />
) : (
<img src={bg.src} />
)}
</div>

<div className={s.Container}>
<div className={s.ContainerBody}>
{renderLoading()}
{renderSuccess()}
{renderFailed()}
</div>
</div>
</div>
);
}
38 changes: 31 additions & 7 deletions src/modules/PublicSale/luckyMoney/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,19 @@ export default function LuckyMoney() {
const luckyMoneyList = useAppSelector(commonSelector).luckyMoneyList;
const currentLuckyMoney = useAppSelector(commonSelector).currentLuckyMoney;

// useEffect(() => {
// dispatch(
// openModal({
// id: 'lucky-money-dialog',
// disableBgClose: true,
// contentPadding: 0,
// hideCloseButton: true,
// className: s.Modal,
// render: () => <LuckyMoneyModal envelopSrc={ENVELOPS[0].src} />,
// }),
// );
// }, []);

const makeInRain = () => {
let width: number;
let height: number;
Expand Down Expand Up @@ -61,15 +74,15 @@ export default function LuckyMoney() {

money.currentFrame += 1;
money.y += money.speed;
money.angle += money.direction * 0.1;
money.angle += money.direction * 0.05;
const radius = money.direction * (5 + (index % 6));
money.x +=
Math.sin((money.currentFrame + index) / (2 * Math.PI)) * radius;
});
}

const initAnimation = () => {
const numMoney = Math.floor(Math.random() * 5);
const numMoney = Math.floor(Math.random() * 10);
const speedOffset = 5;
const speedRange = 5;
const numImages = 6;
Expand All @@ -82,6 +95,7 @@ export default function LuckyMoney() {
const mouseX = evt.clientX - canvas.getBoundingClientRect().left;
const mouseY = evt.clientY - canvas.getBoundingClientRect().top;

let grabbedIndex = -1;
fallingMoney.forEach(function (money, index) {
const coordinates = getRotatedObjectCoordinates(
money.x,
Expand All @@ -93,16 +107,23 @@ export default function LuckyMoney() {

if (isPointInsideRotatedObject(mouseX, mouseY, coordinates)) {
console.log('grabbed package');
grabbedIndex = index;
dispatch(
openModal({
id: 'lucky-money-dialog',
disableBgClose: true,
contentPadding: 0,
// hideCloseButton: true,
hideCloseButton: true,
className: s.Modal,
render: () => <LuckyMoneyModal envelopSrc={envelop.src} />,
}),
);
}

if (grabbedIndex !== -1) {
fallingMoney.splice(grabbedIndex, 1);
draw();
}
});
});

Expand Down Expand Up @@ -213,10 +234,13 @@ export default function LuckyMoney() {

if (timeSpan > 0) {
console.log('_________set', currentLuckyMoney?.id, timeSpan);
(timeouts.current as any)[(currentLuckyMoney as any)?.id] = setTimeout(() => {
makeInRain();
getListLuckyMoney();
}, timeSpan);
(timeouts.current as any)[(currentLuckyMoney as any)?.id] = setTimeout(
() => {
makeInRain();
getListLuckyMoney();
},
timeSpan,
);
}
}
}, [currentLuckyMoney?.id]);
Expand Down
Loading

0 comments on commit 1bb2f07

Please sign in to comment.