diff --git a/packages/extension-koni-ui/src/components/Mint/MintNftDetail/variants/About.tsx b/packages/extension-koni-ui/src/components/Mint/MintNftDetail/variants/About.tsx index 0026882f74..2adb1798c7 100644 --- a/packages/extension-koni-ui/src/components/Mint/MintNftDetail/variants/About.tsx +++ b/packages/extension-koni-ui/src/components/Mint/MintNftDetail/variants/About.tsx @@ -18,12 +18,14 @@ type Props = ThemeProps & { const telegramConnector = TelegramConnector.instance; function Component ({ airdropInfo, className }: Props) { + // @ts-ignore const { t } = useTranslation(); const openLink = useCallback((link: string) => { telegramConnector.openLink(link); }, []); + // @ts-ignore const buttons = useMemo(() => { const urlTwitter = ''; const urlTelegram = ''; @@ -100,27 +102,27 @@ function Component ({ airdropInfo, className }: Props) {
-
-
-
-
- {t('Token')}: -
- {/*
*/} -
- {airdropInfo.symbol} -
-
- -
- -
-
- {t('Social')}: -
- {buttons} -
-
+ {/*
*/} + {/*
*/} + {/*
*/} + {/*
*/} + {/* {t('Token')}: */} + {/*
*/} + {/* /!*
*!/ */} + {/*
*/} + {/* {airdropInfo.symbol} */} + {/*
*/} + {/*
*/} + + {/*
*/} + + {/*
*/} + {/*
*/} + {/* {t('Social')}: */} + {/*
*/} + {/* {buttons} */} + {/*
*/} + {/*
*/}
); } diff --git a/packages/extension-koni-ui/src/components/Mint/MintNftDetail/variants/Condition.tsx b/packages/extension-koni-ui/src/components/Mint/MintNftDetail/variants/Condition.tsx index a1348304f7..8da2cb5e6c 100644 --- a/packages/extension-koni-ui/src/components/Mint/MintNftDetail/variants/Condition.tsx +++ b/packages/extension-koni-ui/src/components/Mint/MintNftDetail/variants/Condition.tsx @@ -20,9 +20,9 @@ function Component ({ airdropInfo, className }: Props) { const { t } = useTranslation(); const checkEligibility = (eligibilityId: number) => { - if (airdropInfo && airdropInfo.eligibilityIds) { - return airdropInfo.eligibilityIds.includes(eligibilityId); - } + // if (airdropInfo && airdropInfo.eligibilityIds) { + // return airdropInfo.eligibilityIds.includes(eligibilityId); + // } return false; }; @@ -56,12 +56,16 @@ function Component ({ airdropInfo, className }: Props) {
-
- {t('Note')}: - - {item.note || t('A player can win multiple types of rewards')} - -
+ { + !!item.note && ( +
+ {t('Note')}: + + {item.note || t('A player can win multiple types of rewards')} + +
+ ) + }
)) } @@ -120,6 +124,8 @@ const MintNftDetailCondition = styled(Component)(({ theme: { token } }: P }, '.__eligibility-item-date': { + fontSize: token.fontSizeSM, + lineHeight: token.lineHeightSM, display: 'flex', gap: token.sizeXXS }, diff --git a/packages/extension-koni-ui/src/components/Mint/MintNftHeader/index.tsx b/packages/extension-koni-ui/src/components/Mint/MintNftHeader/index.tsx index 2e3e8cbb21..260b2f8ae4 100644 --- a/packages/extension-koni-ui/src/components/Mint/MintNftHeader/index.tsx +++ b/packages/extension-koni-ui/src/components/Mint/MintNftHeader/index.tsx @@ -17,47 +17,70 @@ type Props = ThemeProps & { enum Timeline { START = 'start', SNAPSHOT = 'snapshot', - CLAIM = 'claim', + MINT = 'mint', END = 'end' } function Component ({ airdropNftInfo, className }: Props) { const { t } = useTranslation(); - const { currentTimeline, pastTimelines } = (() => { + const { timelines } = (() => { // eslint-disable-next-line camelcase - const { end, end_mint, start, start_mint, start_snapshot } = airdropNftInfo; + const { end, start, start_mint, start_snapshot } = airdropNftInfo; const currentDate = Date.now(); const startMs = new Date(start).getTime(); const endMs = new Date(end).getTime(); const startSnapshotMs = new Date(start_snapshot).getTime(); - // const endSnapshotMs = new Date(end_snapshot).getTime(); - const endClaimMs = new Date(end_mint).getTime(); - const startClaim = new Date(start_mint).getTime(); + const startMintMs = new Date(start_mint).getTime(); - let currentTimeline: Timeline = Timeline.START; - const pastTimelines: Timeline[] = []; + const timelines: Timeline[] = []; if (currentDate >= startMs && currentDate < startSnapshotMs) { - currentTimeline = Timeline.START; - pastTimelines.push(Timeline.START); - } else if (currentDate >= startSnapshotMs && currentDate <= startClaim) { - currentTimeline = Timeline.SNAPSHOT; - pastTimelines.push(Timeline.START, Timeline.SNAPSHOT); - } else if (currentDate >= startClaim && currentDate <= endClaimMs) { - currentTimeline = Timeline.CLAIM; - pastTimelines.push(Timeline.START, Timeline.SNAPSHOT, Timeline.CLAIM); - } else if (currentDate > endMs) { - currentTimeline = Timeline.END; - pastTimelines.push(Timeline.START, Timeline.SNAPSHOT, Timeline.CLAIM, Timeline.END); + timelines.push(Timeline.START); + } else if (currentDate >= startSnapshotMs && currentDate < startMintMs) { + timelines.push(Timeline.START, Timeline.SNAPSHOT); + } else if (currentDate >= startMintMs && currentDate < endMs) { + timelines.push(Timeline.START, Timeline.SNAPSHOT, Timeline.MINT); + } else if (currentDate >= endMs) { + timelines.push(Timeline.START, Timeline.SNAPSHOT, Timeline.MINT, Timeline.END); } return { - currentTimeline, - pastTimelines + timelines }; })(); + const getTimeLinePercent = (): string => { + // eslint-disable-next-line camelcase + const { end, start, start_mint, start_snapshot } = airdropNftInfo; + + const currentDate = Date.now(); + + const startMs = new Date(start).getTime(); + const endMs = new Date(end).getTime(); + const startSnapshotMs = new Date(start_snapshot).getTime(); + const startMintMs = new Date(start_mint).getTime(); + const basePercent = 100 / 3; + + if (currentDate >= startMs && currentDate < startSnapshotMs) { + return `${(currentDate - startMs) * basePercent / (startSnapshotMs - startMs)}%`; + } + + if (currentDate >= startSnapshotMs && currentDate < startMintMs) { + return `${basePercent + ((currentDate - startSnapshotMs) * basePercent / (startMintMs - startSnapshotMs))}%`; + } + + if (currentDate >= startMintMs && currentDate < endMs) { + return `${2 * basePercent + ((currentDate - startMintMs) * basePercent / (endMs - startMintMs))}%`; + } + + if (currentDate >= endMs) { + return '100%'; + } + + return '0'; + }; + return (
@@ -84,17 +107,17 @@ function Component ({ airdropNftInfo, className }: Props) {
-
+
+
+
{t('Start')}
@@ -106,19 +129,19 @@ function Component ({ airdropNftInfo, className }: Props) {
{t('Snapshot')}
- {customFormatDate(airdropNftInfo.end_snapshot, '#DD#/#MM#')} + {customFormatDate(airdropNftInfo.start_snapshot, '#DD#/#MM#')}
{t('Claim')}
@@ -130,7 +153,7 @@ function Component ({ airdropNftInfo, className }: Props) {
{t('End')}
@@ -202,28 +225,13 @@ const MintNftHeader = styled(Component)(({ theme: { extendToken, token } borderRadius: 100, overflow: 'hidden', backgroundColor: token.colorBgSecondary, - marginBottom: token.marginXS, - - '&:before': { - content: '""', - borderRadius: 100, - display: 'block', - height: 8, - backgroundColor: token.colorSuccess, - maxWidth: '5%' - }, - - '&.-is-snapshot:before': { - maxWidth: `${100 / 3}%` - }, - - '&.-is-claim:before': { - maxWidth: `${200 / 3}%` - }, + marginBottom: token.marginXS + }, - '&.-is-end:before': { - maxWidth: '100%' - } + '.__time-line-bar-current': { + borderRadius: 100, + height: 8, + backgroundColor: token.colorSuccess }, '.__time-line-legend-container': { diff --git a/packages/extension-koni-ui/src/connector/booka/sdk.ts b/packages/extension-koni-ui/src/connector/booka/sdk.ts index aecd4f0513..284bebc179 100644 --- a/packages/extension-koni-ui/src/connector/booka/sdk.ts +++ b/packages/extension-koni-ui/src/connector/booka/sdk.ts @@ -928,67 +928,88 @@ export class BookaSdk { const { promise, resolve } = createPromiseHandler(); await wait(1000); - const currentDate = new Date(); + + const getUCTPlus7 = (dateString: string) => { + return new Date(dateString + ' UTC+7'); + }; const eligibilityList = [ { id: 1, - name: 'Eligibility 1', - type: 'type 1', - start: new Date((new Date()).setDate(currentDate.getDate() + 1)), - end: new Date((new Date()).setDate(currentDate.getDate() + 10)), - boxCount: 10, - note: 'note 1' + name: 'Top 5000 on General SP Leaderboard', + start: getUCTPlus7('2024-11-07 07:00'), + end: getUCTPlus7('2024-11-21 07:00') }, { id: 2, - name: 'Eligibility 2', - type: 'type 2', - start: new Date((new Date()).setDate(currentDate.getDate() + 1)), - end: new Date((new Date()).setDate(currentDate.getDate() + 10)), - boxCount: 10, - note: 'note 2' - }, - { - id: 3, - name: 'Eligibility 3', - type: 'type 3', - start: new Date((new Date()).setDate(currentDate.getDate() + 1)), - end: new Date((new Date()).setDate(currentDate.getDate() + 10)), - boxCount: 10, - note: 'note 3' - }, - { - id: 4, - name: 'Eligibility 4', - type: 'type 4', - start: new Date((new Date()).setDate(currentDate.getDate() + 1)), - end: new Date((new Date()).setDate(currentDate.getDate() + 10)), - boxCount: 10, - note: 'note 4' + name: 'Hunt at least 5,000 SP', + start: getUCTPlus7('2024-11-07 07:00'), + end: getUCTPlus7('2024-11-21 07:00') } ]; this.airdropNftMintSubject.next([{ id: 1, name: 'Koni Story', - icon: '/images/default-nft-logo.png', + icon: '/images/mint-event-logo.png', banner: '', - start_snapshot: new Date((new Date()).setDate(currentDate.getDate() + 1)), - end_snapshot: new Date((new Date()).setDate(currentDate.getDate() + 10)), - start_mint: new Date(), - end_mint: new Date((new Date()).setMonth(currentDate.getMonth() + 2)), + start_snapshot: getUCTPlus7('2024-11-22 09:00'), + start_mint: getUCTPlus7('2024-11-25 09:00'), network: 'Polkadot', total_badges: 500, symbol: 'DOT', // decimal: number; // method: string; // raffle_count: number; - start: currentDate, - end: new Date(new Date((new Date()).setMonth(currentDate.getMonth() + 2)).setDate(currentDate.getDate() + 1)), + start: getUCTPlus7('2024-11-07 09:00'), + end: getUCTPlus7('2024-11-29 09:00'), conditionDescription: '', - description: 'asdasdsadasddajsggdhasgdhjabsdhasbdhasdsad', - shortDescription: 'kkkkkkkkkkkkkkkkkkkk', + description: ` +

+ Let your IPventure begin by participating in the campaign now for a chance to earn the exclusive Koni Story badge! +

+ +

Who we are

+ +

+ Koni Story is a unified Telegram mini app that lets you bring your IPs to life. With Koni Story, you can create unique + stories in your adventure — an IPventure that activates creativity, participation, and cross-community collaboration + through story-writing and Story World exploration within the Story ecosystem. +

+ +

+ How does the badge work? +

+ +

+ Each Koni Story badge is a soul-bound token signifying your active involvement in our campaign during Odyssey testnet + and can only be earned ONCE per user. +

+ + How to hunt SP? + +

+ 👉Join Koni Story TG app to receive an original Story Point (SP) package that gives you a head start in the campaign +

+ +

+ 👉Accumulate more SP by completing tasks listed in the Missions tab +

+ +

+ 👉Climb up the ranks, as only top 5000 users with at least 5,000 SP will be rewarded with Koni Story badges +

+ +

+ For Story OG 😎 +

+ +

+ Those who have minted IPs in Iliad Testnet Commemorative collection, Commemorative Color NFT collection, and + Mycelium Remix collection will receive additional SP. +

+ `, + shortDescription: '', // tokenDistributions: JSON; // npsDistributions: JSON; // share: AirdropCampaignShare; diff --git a/packages/extension-koni-ui/src/connector/booka/types.ts b/packages/extension-koni-ui/src/connector/booka/types.ts index 0f3e3b0f20..bcef9d0167 100644 --- a/packages/extension-koni-ui/src/connector/booka/types.ts +++ b/packages/extension-koni-ui/src/connector/booka/types.ts @@ -348,9 +348,9 @@ export interface IAirdropNftMinting { icon: string; banner: string; start_snapshot: Date; - end_snapshot: Date; + end_snapshot?: Date; start_mint: Date; - end_mint: Date; + end_mint?: Date; network: string; total_badges: number; symbol: string; @@ -372,11 +372,11 @@ export interface IAirdropNftMinting { eligibilityList: { id: number; name: string; - type: string; + type?: string; start: Date; end: Date; - boxCount: number, - note: string + boxCount?: number, + note?: string }[]; eligibilityIds?: number[]; } diff --git a/packages/webapp/public/images/mint-event-logo.png b/packages/webapp/public/images/mint-event-logo.png new file mode 100644 index 0000000000..cada9561fb Binary files /dev/null and b/packages/webapp/public/images/mint-event-logo.png differ