Skip to content

Commit

Permalink
[Issue-175] Update UI for Mint screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@lw-cdm
lw-cdm committed Nov 21, 2024
1 parent 8b3bca8 commit a0581c7
Show file tree
Hide file tree
Showing 6 changed files with 165 additions and 128 deletions.
44 changes: 23 additions & 21 deletions packages/extension-koni-ui/src/components/Mint/MintNftDetail/variants/About.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '';
Expand Down Expand Up @@ -100,27 +102,27 @@ function Component ({ airdropInfo, className }: Props) {
<div className={CN(className)}>
<DynamicContent content={airdropInfo.description} />

<div className='__divider' />
<div className='__content-footer'>
<div className='__token-info'>
<div className='__token-label'>
{t('Token')}:
</div>
{/* <div className='__token-icon'></div> */}
<div className='__token-symbol'>
{airdropInfo.symbol}
</div>
</div>

<div className='__content-footer-separator' />

<div className='__social-info'>
<div className='__social-label'>
{t('Social')}:
</div>
{buttons}
</div>
</div>
{/* <div className='__divider' /> */}
{/* <div className='__content-footer'> */}
{/* <div className='__token-info'> */}
{/* <div className='__token-label'> */}
{/* {t('Token')}: */}
{/* </div> */}
{/* /!* <div className='__token-icon'></div> *!/ */}
{/* <div className='__token-symbol'> */}
{/* {airdropInfo.symbol} */}
{/* </div> */}
{/* </div> */}

{/* <div className='__content-footer-separator' /> */}

{/* <div className='__social-info'> */}
{/* <div className='__social-label'> */}
{/* {t('Social')}: */}
{/* </div> */}
{/* {buttons} */}
{/* </div> */}
{/* </div> */}
</div>
);
}
Expand Down
24 changes: 15 additions & 9 deletions packages/extension-koni-ui/src/components/Mint/MintNftDetail/variants/Condition.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};
Expand Down Expand Up @@ -56,12 +56,16 @@ function Component ({ airdropInfo, className }: Props) {
</div>
</div>

<div className='__eligibility-item-note'>
<span className='__eligibility-item-note-label'>{t('Note')}:</span>
<span className='__eligibility-item-note-content'>
{item.note || t('A player can win multiple types of rewards')}
</span>
</div>
{
!!item.note && (
<div className='__eligibility-item-note'>
<span className='__eligibility-item-note-label'>{t('Note')}:</span>
<span className='__eligibility-item-note-content'>
{item.note || t('A player can win multiple types of rewards')}
</span>
</div>
)
}
</div>
))
}
Expand Down Expand Up @@ -120,6 +124,8 @@ const MintNftDetailCondition = styled(Component)<Props>(({ theme: { token } }: P
},

'.__eligibility-item-date': {
fontSize: token.fontSizeSM,
lineHeight: token.lineHeightSM,
display: 'flex',
gap: token.sizeXXS
},
Expand Down
114 changes: 61 additions & 53 deletions packages/extension-koni-ui/src/components/Mint/MintNftHeader/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className={CN(className)}>
<div className='__airdrop-info-area'>
Expand All @@ -84,17 +107,17 @@ function Component ({ airdropNftInfo, className }: Props) {
</div>

<div className='__time-line-area'>
<div className={CN('__time-line-bar', {
'-is-snapshot': currentTimeline === Timeline.SNAPSHOT,
'-is-claim': currentTimeline === Timeline.CLAIM,
'-is-end': currentTimeline === Timeline.END
})}
/>
<div className={CN('__time-line-bar')}>
<div
className='__time-line-bar-current'
style={{ maxWidth: getTimeLinePercent() }}
/>
</div>

<div className='__time-line-legend-container'>
<div className='__time-line-legend-item-wrapper'>
<div className={CN('__time-line-legend-item', '-start', {
'-active': pastTimelines.includes(Timeline.START)
'-active': timelines.includes(Timeline.START)
})}
>
<div className='__time-line-legend-item-name'>{t('Start')}</div>
Expand All @@ -106,19 +129,19 @@ function Component ({ airdropNftInfo, className }: Props) {

<div className='__time-line-legend-item-wrapper'>
<div className={CN('__time-line-legend-item', '-center', {
'-active': pastTimelines.includes(Timeline.SNAPSHOT)
'-active': timelines.includes(Timeline.SNAPSHOT)
})}
>
<div className='__time-line-legend-item-name'>{t('Snapshot')}</div>
<div className='__time-line-legend-item-date'>
{customFormatDate(airdropNftInfo.end_snapshot, '#DD#/#MM#')}
{customFormatDate(airdropNftInfo.start_snapshot, '#DD#/#MM#')}
</div>
</div>
</div>

<div className='__time-line-legend-item-wrapper'>
<div className={CN('__time-line-legend-item', '-center', {
'-active': pastTimelines.includes(Timeline.CLAIM)
'-active': timelines.includes(Timeline.MINT)
})}
>
<div className='__time-line-legend-item-name'>{t('Claim')}</div>
Expand All @@ -130,7 +153,7 @@ function Component ({ airdropNftInfo, className }: Props) {

<div className='__time-line-legend-item-wrapper'>
<div className={CN('__time-line-legend-item', '-end', {
'-active': pastTimelines.includes(Timeline.END)
'-active': timelines.includes(Timeline.END)
})}
>
<div className='__time-line-legend-item-name'>{t('End')}</div>
Expand Down Expand Up @@ -202,28 +225,13 @@ const MintNftHeader = styled(Component)<Props>(({ 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': {
Expand Down
Loading

0 comments on commit a0581c7

Please sign in to comment.