Skip to content

Commit

Permalink
chore: update happening
Browse files Browse the repository at this point in the history
  • Loading branch information
@271212
271212 committed Jan 31, 2024
1 parent f68fcdd commit 1ec47da
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 44 deletions.
72 changes: 47 additions & 25 deletions src/modules/PublicSale/activities/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import {
AccordionPanel,
Center,
Flex,
Text, useDisclosure,
Text,
useDisclosure,
} from '@chakra-ui/react';
import styles from './styles.module.scss';
import { CDN_URL, CDN_URL_ICONS } from '@/config';
Expand All @@ -32,7 +33,7 @@ enum ActivityType {
Day4,
Day5,
Day6,
Day7
Day7,
}

export interface GameItemProps {
Expand All @@ -42,7 +43,7 @@ export interface GameItemProps {
desc: string | any;
src: string;
ctas?: ICTA[];
type: ActivityType
type: ActivityType;
}

const Activities = React.memo(() => {
Expand Down Expand Up @@ -85,12 +86,13 @@ Good luck and have fun!
title: 'Winners',
type: 'action',
onPress: () => {
onOpenNakaWinners()
}
onOpenNakaWinners();
},
},
],
desc: 'NakaChain is a low-cost and lightning-fast Bitcoin Layer 2 blockchain designed for DeFi apps, enabling the payment of gas fees in Bitcoin. It’s powered by BVM with these modules: Bitcoin for security, Polygon for data availability, and Optimism for execution.' +
'<br/><br/>On the second day of awesomeness, challenge yourself to dominate the market by trading futures on BRC-20 tokens\' prices. Every two hours, the top gainer will earn $50 in Bitcoin.\n' +
desc:
'NakaChain is a low-cost and lightning-fast Bitcoin Layer 2 blockchain designed for DeFi apps, enabling the payment of gas fees in Bitcoin. It’s powered by BVM with these modules: Bitcoin for security, Polygon for data availability, and Optimism for execution.' +
"<br/><br/>On the second day of awesomeness, challenge yourself to dominate the market by trading futures on BRC-20 tokens' prices. Every two hours, the top gainer will earn $50 in Bitcoin.\n" +
'<br/><br/>Total rewards: <span style="color: #FA4E0E">$1,000</span>',
},
{
Expand Down Expand Up @@ -182,7 +184,8 @@ Good luck and have fun!
};
}, []);

const [expandIndex, setExpandIndex] = React.useState<Number | undefined>(undefined)
const [expandIndex, setExpandIndex] =
React.useState<Number | undefined>(undefined);

const renderCta = (item: ICTA) => {
switch (item.type) {
Expand Down Expand Up @@ -241,10 +244,7 @@ Good luck and have fun!
const title = isDisable ? item.title : item.title;

return (
<AccordionItem
isDisabled={isDisable}
className={styles.itemWrapper}
>
<AccordionItem isDisabled={isDisable} className={styles.itemWrapper}>
{({ isExpanded }) => (
<>
<h2>
Expand All @@ -261,17 +261,31 @@ Good luck and have fun!
[styles.itemWrapper_title__active]: isExpanded,
})}
>
<Text>{item.key === currentDay.diffDay && <span>Happening Now</span>} {item.tag}: {title}</Text>
<Flex direction="column" gap="4px">
<Text>
{item.key === currentDay.diffDay && (
<span>Happening Now</span>
)}
</Text>
<Text>
{item.tag}: {title}
</Text>
</Flex>
</Flex>
<button>
<SvgInset
className={
isDisable ? "" :
isExpanded
? styles.itemWrapper_downArrow
: styles.itemWrapper_normalArrow
isDisable
? ''
: isExpanded
? styles.itemWrapper_downArrow
: styles.itemWrapper_normalArrow
}
svgUrl={
isDisable
? `${CDN_URL_ICONS}/lock.svg`
: `${CDN_URL}/icons/chevron-right-ic-32.svg`
}
svgUrl={isDisable ? `${CDN_URL_ICONS}/lock.svg` : `${CDN_URL}/icons/chevron-right-ic-32.svg`}
size={20}
/>
</button>
Expand All @@ -283,9 +297,9 @@ Good luck and have fun!
className={styles.itemWrapper_desc}
dangerouslySetInnerHTML={{ __html: item.desc }}
/>
{currentDay.diffDay === expandIndex && expandIndex === item.key && item.key === 1 && (
<NakaCountDown />
)}
{currentDay.diffDay === expandIndex &&
expandIndex === item.key &&
item.key === 1 && <NakaCountDown />}
<Flex alignItems="center" gap="8px">
{item.ctas?.map(renderCta)}
</Flex>
Expand All @@ -307,13 +321,21 @@ Good luck and have fun!
<p className={styles.container__title}>
Experience Bitcoin like never before.
</p>
<Accordion allowToggle={true} allowMultiple={false} index={expandIndex as any} onChange={(expandedIndex) => {
setExpandIndex(expandedIndex as number)
}}>
<Accordion
allowToggle={true}
allowMultiple={false}
index={expandIndex as any}
onChange={(expandedIndex) => {
setExpandIndex(expandedIndex as number);
}}
>
{DAYS.map(renderItem)}
</Accordion>
</Flex>
<TradeNakaWinnersPopup isShow={isOpenNakaWinners} onHide={onCloseNakaWinners} />
<TradeNakaWinnersPopup
isShow={isOpenNakaWinners}
onHide={onCloseNakaWinners}
/>
</>
);
});
Expand Down
37 changes: 18 additions & 19 deletions src/modules/PublicSale/activities/styles.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
.wrap{
.wrap {
overflow-y: auto;
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */

@include is-pc{
@include is-pc {
height: 810px;
}

&::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
background-color: #1B1B1B;
background-color: #1b1b1b;
}

.container {
&__title {
align-self: stretch;
color: #FFFFFF;
color: #ffffff;
font-size: 24px;
font-style: normal;
font-weight: 400;
Expand All @@ -31,24 +31,24 @@
justify-content: space-between;
align-items: center;
align-self: stretch;
background-color: rgba(white, .06);
background-color: rgba(white, 0.06);
border: 1px solid rgba(255, 255, 255, 0.06);
button {
padding: 12px 20px;

svg path{
stroke: #FFFFFF !important;
svg path {
stroke: #ffffff !important;
}
}
}

:global(.chakra-collapse){
:global(.chakra-collapse) {
padding: 10px 16px !important;
padding-bottom: 0 !important;
}

&_title {
color: #FFFFFF;
color: #ffffff;
font-size: 14px;
font-weight: 500;
line-height: 20px;
Expand All @@ -61,11 +61,11 @@

span {
color: white;
padding: 2px 4px;
padding: 4px 12px;
font-size: 10px;
font-weight: 400;
border-radius: 100px;
background: #FA4E0E;
background: #fa4e0e;
margin-right: 4px;
}

Expand All @@ -74,28 +74,28 @@
}

&__active {
color: #FFFFFF;
color: #ffffff;
//background-color: rgba(white, .08);
}
}
&_desc {
color: rgba(white, .7);
color: rgba(white, 0.7);
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
b, strong{
b,
strong {
color: white;
}

@include is-mobile {
font-size: 14px;
}

}
&_header {
padding: 10px 16px !important;
background-color: rgba(black, .8);
background-color: rgba(black, 0.8);
//border: 1px solid rgba(white, .10);
cursor: default !important;
gap: 8px;
Expand All @@ -107,7 +107,7 @@
&__active {
background-color: transparent;
border: 0 !important;
border-bottom: 1px solid rgba(white, .07) !important;
border-bottom: 1px solid rgba(white, 0.07) !important;

button {
display: block !important;
Expand All @@ -119,7 +119,6 @@
// display: none !important;
//}
}

}
&_downArrow {
transform: rotate(270deg);
Expand All @@ -135,7 +134,7 @@
}

&_learnMore {
color: #FA4E0E;
color: #fa4e0e;
text-align: center;
font-size: 14px;
font-style: normal;
Expand Down

0 comments on commit 1ec47da

Please sign in to comment.