Skip to content

Commit c4a3741

Browse files
neikopneikop
committed
Update content
1 parent 9cac883 commit c4a3741

File tree

11 files changed

+264
-44
lines changed

11 files changed

+264
-44
lines changed

‎apps/kyberswap-interface/src/components/Button/index.tsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -210,15 +210,6 @@ export const ButtonOutlined = styled(Base)<{ color?: string }>`
210210
color: ${({ theme, color }) => color || theme.subText};
211211
border-radius: 999px;
212212
font-size: 14px;
213-
&:focus {
214-
box-shadow: 0 0 0 1px ${({ theme, color }) => color || theme.subText};
215-
}
216-
&:hover {
217-
box-shadow: 0 0 0 1px ${({ theme, color }) => color || theme.subText};
218-
}
219-
&:active {
220-
box-shadow: 0 0 0 1px ${({ theme, color }) => color || theme.subText};
221-
}
222213
&:disabled {
223214
${disabledOutlined}
224215
}

‎apps/kyberswap-interface/src/pages/Campaign/components/CampaignStats/WeekCountdown.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const EMPTY_WEEK: CampaignWeek = { value: -1, start: 0, end: 0 }
2626

2727
export const WeekCountdown = ({ weekOptions, selectedWeek }: Props) => {
2828
const theme = useTheme()
29+
const initializing = weekOptions.length === 0
2930

3031
const defaultWeek = weekOptions[0] || EMPTY_WEEK
3132
const week = weekOptions.find(w => w.value === selectedWeek) || defaultWeek
@@ -55,10 +56,10 @@ export const WeekCountdown = ({ weekOptions, selectedWeek }: Props) => {
5556
return (
5657
<StatCard style={{ flex: 1 }}>
5758
<Text fontSize={14} color={theme.subText}>
58-
{startEndIn}
59+
{initializing ? '' : startEndIn}
5960
</Text>
6061
<Text marginTop="8px" fontSize={20} fontWeight="500">
61-
{isEnd ? dayjs(week.end * 1000).format('MMM DD YYYY') : formatCountdown(duration)}
62+
{initializing ? '' : isEnd ? dayjs(week.end * 1000).format('MMM DD YYYY') : formatCountdown(duration)}
6263
</Text>
6364
</StatCard>
6465
)

‎apps/kyberswap-interface/src/pages/Campaign/components/Information/campaignInfos/raffle.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ const raffleFaq: FaqItem[] = [
248248
},
249249
]
250250

251-
const renderRaffleTerms = () => (
251+
export const renderRaffleTerms = () => (
252252
<>
253253
<li>
254254
<Trans>

‎apps/kyberswap-interface/src/pages/Campaign/components/JoinRaffleCampaignModal.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { Trans, t } from '@lingui/macro'
2+
import { Flex, Text } from 'rebass'
3+
import styled from 'styled-components'
4+
5+
import { ButtonOutlined, ButtonPrimary } from 'components/Button'
6+
import Modal from 'components/Modal'
7+
import useTheme from 'hooks/useTheme'
8+
import { ExternalLink } from 'theme'
9+
10+
import { renderRaffleTerms } from './Information/campaignInfos/raffle'
11+
12+
const Wrapper = styled.div`
13+
padding: 24px;
14+
color: ${({ theme }) => theme.text};
15+
font-size: 14px;
16+
line-height: 24px;
17+
18+
${({ theme }) => theme.mediaWidth.upToSmall`
19+
padding: 20px;
20+
`}
21+
`
22+
23+
const ActionRow = styled(Flex)`
24+
gap: 12px;
25+
`
26+
27+
type Props = {
28+
isOpen: boolean
29+
onDismiss: () => void
30+
onConfirm: () => void
31+
}
32+
33+
export const JoinRaffleCampaignModal = ({ isOpen, onDismiss, onConfirm }: Props) => {
34+
const theme = useTheme()
35+
36+
return (
37+
<Modal isOpen={isOpen} onDismiss={onDismiss} maxWidth={560}>
38+
<Wrapper>
39+
<Text fontWeight={500}>{t`By clicking "Join Campaign" you agree to the campaign's terms and conditions.`}</Text>
40+
<Text color={theme.subText} paddingLeft="14px">
41+
<li>
42+
<Trans>
43+
These Terms and Conditions{' '}
44+
<ExternalLink href="https://kyberswap.com/files/Kyber%20-%20Terms%20of%20Use%20-%2020%20November%202023.pdf">
45+
({'"Terms"'})
46+
</ExternalLink>{' '}
47+
should be read in conjunction with the KyberSwap Terms of Use, which lay out the terms and conditions that
48+
apply to all KyberSwap promotional activities ({'"Campaign"'}).
49+
</Trans>
50+
</li>
51+
{renderRaffleTerms()}
52+
</Text>
53+
54+
<ActionRow marginTop="24px">
55+
<ButtonOutlined flex={1} height="36px" onClick={onDismiss}>
56+
<Trans>Close</Trans>
57+
</ButtonOutlined>
58+
<ButtonPrimary flex={1} height="36px" onClick={onConfirm}>
59+
<Trans>Join Campaign</Trans>
60+
</ButtonPrimary>
61+
</ActionRow>
62+
</Wrapper>
63+
</Modal>
64+
)
65+
}
66+
67+
export default JoinRaffleCampaignModal

‎apps/kyberswap-interface/src/pages/Campaign/components/Leaderboard/RaffleLeaderboard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export default function RaffleLeaderboard({ type, selectedWeek }: Props) {
139139
textAlign={upToSmall ? 'left' : 'right'}
140140
>
141141
{renderLabel(<Trans>REWARDS</Trans>)}
142-
<Text>{formatDisplayNumber(tx.rewarded, { significantDigits: 6 })}</Text>
142+
<Text>{formatDisplayNumber(tx.rewarded, { significantDigits: 6 })} KNC</Text>
143143
</Flex>
144144
</Box>
145145
)

‎apps/kyberswap-interface/src/pages/Campaign/components/MyDashboard/MyRaffleDashboard.tsx‎

Lines changed: 46 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Trans } from '@lingui/macro'
2-
import { ReactNode } from 'react'
2+
import { ReactNode, useMemo } from 'react'
33
import { useMedia } from 'react-use'
44
import { Box, Flex, Text } from 'rebass'
55
import { useGetRaffleCampaignParticipantQuery, useGetRaffleCampaignStatsQuery } from 'services/campaignRaffle'
@@ -23,6 +23,13 @@ export default function MyRaffleDashboard() {
2323

2424
const weeks = campaignStats?.weeks ?? []
2525

26+
const rewaredWeek = useMemo(() => {
27+
if (participant?.reward_week_1 && participant.reward_week_2) return '1 & 2'
28+
if (participant?.reward_week_1) return '1'
29+
if (participant?.reward_week_2) return '2'
30+
return null
31+
}, [participant])
32+
2633
return (
2734
<Box marginTop="1.25rem" sx={{ borderRadius: '20px', background: theme.background }} padding="1.5rem">
2835
<Flex mb="24px" sx={{ rowGap: '1rem', columnGap: '4rem', flexWrap: 'wrap' }}>
@@ -33,15 +40,15 @@ export default function MyRaffleDashboard() {
3340
<Flex alignItems="center" sx={{ gap: '8px', marginTop: '8px' }}>
3441
<img src={reward.logo} alt={reward.symbol} width="20px" height="20px" style={{ borderRadius: '50%' }} />
3542
<Text fontSize={18} fontWeight="500" color={theme.text}>
36-
{formatDisplayNumber(participant?.reward, { significantDigits: 6, fallback: '0' })} {reward.symbol}
43+
{formatDisplayNumber(participant?.reward_all, { significantDigits: 6, fallback: '0' })} {reward.symbol}
3744
</Text>
3845
</Flex>
3946
</Box>
4047

41-
{!!participant?.reward && (
48+
{!!participant?.reward_all && (
4249
<Box flex={1} minWidth={280}>
4350
<Text color={theme.subText}>
44-
<Trans>You&apos;ve won 🎁 Week 1/2 Raffle Campaign.</Trans>
51+
<Trans>You&apos;ve won 🎁 Week {rewaredWeek} - Raffle Campaign.</Trans>
4552
</Text>
4653
<Text fontSize={14} color={theme.subText} marginTop="8px">
4754
<Trans>
@@ -60,9 +67,12 @@ export default function MyRaffleDashboard() {
6067
<Text flex={1}>
6168
<Trans>WEEK</Trans>
6269
</Text>
63-
<Text flex={1}>
70+
<Text flex={1} textAlign="right">
6471
<Trans>ELIGIBLE TRANSACTIONS</Trans>
6572
</Text>
73+
<Text flex={1} textAlign="right">
74+
<Trans>REWARDS</Trans>
75+
</Text>
6676
</Flex>
6777
<Divider />
6878
</>
@@ -77,21 +87,37 @@ export default function MyRaffleDashboard() {
7787
fontWeight="500"
7888
fontSize={14}
7989
>
80-
<WeekRewardLine title={weeks[0]?.label} txCount={participant?.tx_count_week_1 || 0} />
90+
<WeekRewardLine
91+
title={weeks[0]?.label}
92+
txCount={participant?.tx_count_week_1}
93+
reward={participant?.reward_week_1}
94+
/>
8195
<Divider />
82-
<WeekRewardLine title={weeks[1]?.label} txCount={participant?.tx_count_week_2 || 0} />
96+
<WeekRewardLine
97+
title={weeks[1]?.label}
98+
txCount={participant?.tx_count_week_2}
99+
reward={participant?.reward_week_2}
100+
/>
83101
</Flex>
84102
) : (
85103
<>
86-
<WeekRewardLine title={weeks[0]?.label} txCount={participant?.tx_count_week_1 || 0} />
87-
<WeekRewardLine title={weeks[1]?.label} txCount={participant?.tx_count_week_2 || 0} />
104+
<WeekRewardLine
105+
title={weeks[0]?.label}
106+
txCount={participant?.tx_count_week_1}
107+
reward={participant?.reward_week_1}
108+
/>
109+
<WeekRewardLine
110+
title={weeks[1]?.label}
111+
txCount={participant?.tx_count_week_2}
112+
reward={participant?.reward_week_2}
113+
/>
88114
</>
89115
)}
90116
</Box>
91117
)
92118
}
93119

94-
const WeekRewardLine = ({ title, txCount }: { title: ReactNode; txCount: number }) => {
120+
const WeekRewardLine = ({ title, txCount, reward }: { title: ReactNode; txCount?: number; reward?: number }) => {
95121
const theme = useTheme()
96122
const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
97123

@@ -104,13 +130,22 @@ const WeekRewardLine = ({ title, txCount }: { title: ReactNode; txCount: number
104130
{formatDisplayNumber(txCount, { significantDigits: 6 })}
105131
</Text>
106132
</Flex>
133+
<Flex justifyContent="space-between">
134+
<Text flex={1}>REWARDS</Text>
135+
<Text color="white" fontSize={16}>
136+
{formatDisplayNumber(reward, { significantDigits: 6 })} KNC
137+
</Text>
138+
</Flex>
107139
</Flex>
108140
) : (
109141
<Flex padding="1rem 0" color={theme.subText} fontWeight="500" fontSize={14}>
110142
<Text flex={1}>{title}</Text>
111-
<Text flex={1} color="white">
143+
<Text flex={1} color="white" textAlign="right">
112144
{formatDisplayNumber(txCount, { significantDigits: 6 })}
113145
</Text>
146+
<Text flex={1} color="white" textAlign="right">
147+
{formatDisplayNumber(reward, { significantDigits: 6 })} KNC
148+
</Text>
114149
</Flex>
115150
)
116151
}

‎apps/kyberswap-interface/src/pages/Campaign/components/RaffleRewardModal.tsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { Trans } from '@lingui/macro'
2+
import { useMemo } from 'react'
3+
import { Flex, Text } from 'rebass'
4+
import { RaffleCampaignParticipant } from 'services/campaignRaffle'
5+
import styled from 'styled-components'
6+
7+
import { ButtonOutlined, ButtonPrimary } from 'components/Button'
8+
import Modal from 'components/Modal'
9+
import useTheme from 'hooks/useTheme'
10+
import { formatDisplayNumber } from 'utils/numbers'
11+
12+
const Wrapper = styled.div`
13+
padding: 24px;
14+
color: ${({ theme }) => theme.text};
15+
display: flex;
16+
flex-direction: column;
17+
align-items: center;
18+
gap: 24px;
19+
20+
${({ theme }) => theme.mediaWidth.upToSmall`
21+
padding: 20px;
22+
`}
23+
`
24+
25+
const ActionRow = styled(Flex)`
26+
width: 100%;
27+
gap: 12px;
28+
`
29+
30+
type Props = {
31+
isOpen: boolean
32+
onDismiss: () => void
33+
onConfirm: () => void
34+
participant?: RaffleCampaignParticipant
35+
}
36+
37+
export const RaffleRewardModal = ({ isOpen, onDismiss, onConfirm, participant }: Props) => {
38+
const theme = useTheme()
39+
40+
const rewaredWeek = useMemo(() => {
41+
if (participant?.reward_week_1 && participant.reward_week_2) return '1 & 2'
42+
if (participant?.reward_week_1) return '1'
43+
if (participant?.reward_week_2) return '2'
44+
return null
45+
}, [participant])
46+
47+
return (
48+
<Modal isOpen={isOpen} onDismiss={onDismiss} maxWidth={460} minHeight={false}>
49+
<Wrapper>
50+
<Text fontSize={18} fontWeight={500} textAlign="center">
51+
<Trans>🎉 Congratulations!</Trans>
52+
</Text>
53+
54+
<Flex flexDirection="column" sx={{ gap: '8px', alignItems: 'center' }}>
55+
<Text color={theme.subText}>
56+
<Trans>You&apos;ve won 🎁 Week {rewaredWeek} - Raffle Campaign.</Trans>
57+
</Text>
58+
<Text>
59+
<Trans>🏆 Prize: {formatDisplayNumber(participant?.reward_all, { significantDigits: 6 })} KNC</Trans>
60+
</Text>
61+
<Text fontSize={14} color={theme.subText} textAlign="center">
62+
<Trans>
63+
Your rewards will be distributed directly to your wallet within 7 business days after the announcement.
64+
</Trans>
65+
</Text>
66+
</Flex>
67+
68+
<ActionRow>
69+
<ButtonOutlined flex={1} height="36px" onClick={onDismiss}>
70+
<Trans>Close</Trans>
71+
</ButtonOutlined>
72+
<ButtonPrimary flex={1} height="36px" onClick={onConfirm}>
73+
<Trans>View details</Trans>
74+
</ButtonPrimary>
75+
</ActionRow>
76+
</Wrapper>
77+
</Modal>
78+
)
79+
}
80+
81+
export default RaffleRewardModal

‎apps/kyberswap-interface/src/pages/Campaign/constants.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -240,11 +240,11 @@ const stipInfo = {
240240
}
241241

242242
const rewardKNC = {
243-
chainId: ChainId.MAINNET,
243+
chainId: ChainId.BASE,
244244
symbol: 'KNC',
245245
logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/9444.png',
246-
address: KNC[ChainId.MAINNET].address,
247-
decimals: KNC[ChainId.MAINNET].decimals,
246+
address: KNC[ChainId.BASE].address,
247+
decimals: KNC[ChainId.BASE].decimals,
248248
}
249249

250250
export enum CampaignType {

‎apps/kyberswap-interface/src/pages/Campaign/hooks/useRaffleCampaignJoin.ts‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,16 @@ export const useRaffleCampaignJoin = ({ selectedWeek }: Props) => {
1717
const toggleWalletModal = useWalletModalToggle()
1818
const notify = useNotify()
1919

20-
const [joinRaffleCampaign] = useJoinRaffleCampaignMutation()
21-
const { data: raffleParticipant, refetch: refetchParticipant } = useGetRaffleCampaignParticipantQuery(
20+
const [joinCampaign] = useJoinRaffleCampaignMutation()
21+
22+
const { data: participant, refetch: refetchParticipant } = useGetRaffleCampaignParticipantQuery(
2223
{ address: account ?? '' },
2324
{ skip: !account },
2425
)
25-
const isNotEligible = !!account && raffleParticipant?.eligible === false
26+
27+
const isNotEligible = !!account && participant?.eligible === false
2628
const isJoinedByWeek =
27-
!!raffleParticipant?.[`joined_week${selectedWeek + 1}_at` as keyof typeof raffleParticipant] && selectedWeek >= 0
29+
!!participant?.[`joined_week${selectedWeek + 1}_at` as keyof typeof participant] && selectedWeek >= 0
2830

2931
const onJoin = useCallback(async () => {
3032
if (!account) {
@@ -54,25 +56,27 @@ export const useRaffleCampaignJoin = ({ selectedWeek }: Props) => {
5456
}).prepareMessage()
5557

5658
const signature = await library.getSigner().signMessage(message)
57-
await joinRaffleCampaign({ address: account, message, signature, week: `week_${selectedWeek + 1}` }).unwrap()
59+
await joinCampaign({ address: account, message, signature, week: `week_${selectedWeek + 1}` }).unwrap()
5860

5961
await refetchParticipant()
6062
notify({
6163
title: t`Joined Raffle Campaign`,
6264
type: NotificationType.SUCCESS,
6365
})
6466
} catch (error) {
67+
console.warn('Raffle campaign join error:', error)
6568
notify({
6669
title: t`Unable to join Raffle Campaign`,
6770
summary: error.message || error.data?.message || t`Something went wrong. Please try again.`,
6871
type: NotificationType.ERROR,
6972
})
7073
}
71-
}, [account, chainId, joinRaffleCampaign, library, selectedWeek, notify, refetchParticipant, toggleWalletModal])
74+
}, [account, chainId, joinCampaign, library, selectedWeek, notify, refetchParticipant, toggleWalletModal])
7275

7376
return {
7477
onJoin,
7578
isJoinedByWeek,
7679
isNotEligible,
80+
participant,
7781
}
7882
}

0 commit comments

Comments
 (0)