volume contest fixes

src/apollo/queries.js

@@ -367,29 +367,34 @@ export const USER_LP_CONTEST_TRANSACTIONS = gql`
   }
 `
 
-export const USER_VOLUME_CONTEST_TRANSACTIONS = gql`
-  query transactions($user: String!) {
-    swaps(orderBy: "timestamp", orderByDirection: "desc", where: { to: $user }) {
-      id
-      transactionHash
-      timestamp
-      pair {
-        token0 {
-          symbol
-        }
-        token1 {
-          symbol
+export const USER_VOLUME_CONTEST_TRANSACTIONS = ({ account, timestampGte, timestampLte }) => {
+  let queryString = `query transactions {
+    swaps(orderBy: "timestamp", orderByDirection: "desc", where: { 
+      to: "${account}", 
+      ${timestampGte && `timestampGte: ${timestampGte}, `} 
+      ${timestampLte && `timestampLte: ${timestampLte}, `} 
+    }) {
+        id
+        transactionHash
+        timestamp
+        pair {
+          token0 {
+            symbol
+          }
+          token1 {
+            symbol
+          }
         }
+        amount0In
+        amount0Out
+        amount1In
+        amount1Out
+        amountUSD
+        to
       }
-      amount0In
-      amount0Out
-      amount1In
-      amount1Out
-      amountUSD
-      to
-    }
-  }
-`
+  }`
+  return gql(queryString)
+}
 
 export const PAIR_CHART = gql`
   query pairDayDatas($pairAddress: String!, $skip: Int!) {
@@ -678,10 +683,10 @@ export const LP_CONTEST_DATA = gql`
   }
 `
 
-export const USER_VOLUME_CONTEST_DATA = (account) => {
+export const USER_VOLUME_CONTEST_DATA = (account, startDate) => {
   const queryString = `
     query VolumeContest {
-      volumeContest(where: {user: "${account}", startDate: "2023-09-04"}) {
+      volumeContest(where: {user: "${account}", startDate: "${startDate}"}) {
         nftLevel
         totalContestScore
         totalContestVolume

src/components/VolumeContestNftClaim/index.js

@@ -10,22 +10,16 @@ import 'swiper/modules/navigation/navigation.min.css'
 import 'swiper/modules/effect-coverflow/effect-coverflow.min.css'
 
 import T1A1 from './T1A1.png'
+import T1A2 from './T1A2.png'
+import T1A3 from './T1A3.png'
+import T1A4 from './T1A4.png'
+import T1A5 from './T1A5.png'
 
 import T1A1_x2 from './[email protected]'
-
-// import L1PW from './L1PW.png'
-// import L1P1 from './L1P1.png'
-// import L1P2 from './L1P2.png'
-// import L1P3 from './L1P3.png'
-// import L1P4 from './L1P4.png'
-// import L1P5 from './L1P5.png'
-//
-// import L1PW_x2 from './[email protected]'
-// import L1P1_x2 from './[email protected]'
-// import L1P2_x2 from './[email protected]'
-// import L1P3_x2 from './[email protected]'
-// import L1P4_x2 from './[email protected]'
-// import L1P5_x2 from './[email protected]'
+import T1A2_x2 from './[email protected]'
+import T1A3_x2 from './[email protected]'
+import T1A4_x2 from './[email protected]'
+import T1A5_x2 from './[email protected]'
 
 const Wrapper = styled.div`
   display: flex;
@@ -54,6 +48,7 @@ const Slider = styled.div`
     img {
       max-width: 100%;
       opacity: 0;
+      border-radius: 8px;
       transition: all 0.2s;
       filter: saturate(0%) opacity(0.3);
     }
@@ -141,16 +136,16 @@ function VolumeContestNftClaim() {
             <img src={T1A1} srcSet={T1A1 + ' 1x,' + T1A1_x2 + ' 2x'} alt={''} />
           </SwiperSlide>
           <SwiperSlide>
-            <img src={T1A1} srcSet={T1A1 + ' 1x,' + T1A1_x2 + ' 2x'} alt={''} />
+            <img src={T1A2} srcSet={T1A2 + ' 1x,' + T1A2_x2 + ' 2x'} alt={''} />
           </SwiperSlide>
           <SwiperSlide>
-            <img src={T1A1} srcSet={T1A1 + ' 1x,' + T1A1_x2 + ' 2x'} alt={''} />
+            <img src={T1A3} srcSet={T1A3 + ' 1x,' + T1A3_x2 + ' 2x'} alt={''} />
           </SwiperSlide>
           <SwiperSlide>
-            <img src={T1A1} srcSet={T1A1 + ' 1x,' + T1A1_x2 + ' 2x'} alt={''} />
+            <img src={T1A4} srcSet={T1A4 + ' 1x,' + T1A4_x2 + ' 2x'} alt={''} />
           </SwiperSlide>
           <SwiperSlide>
-            <img src={T1A1} srcSet={T1A1 + ' 1x,' + T1A1_x2 + ' 2x'} alt={''} />
+            <img src={T1A5} srcSet={T1A5 + ' 1x,' + T1A5_x2 + ' 2x'} alt={''} />
           </SwiperSlide>
           <NavigationArrowPrev ref={navigationPrevRef}>
             <Play size={30} />

src/components/VolumeContestTxnList/index.js

@@ -350,7 +350,7 @@ function VolumeContestTxnList({ transactions, account }) {
 
           <PageButtons>
             <ArrowLeft
-              faded={page === 1}
+              faded={String(page === 1)}
               onClick={(e) => {
                 setPage(page === 1 ? page : page - 1)
               }}
@@ -359,7 +359,7 @@ function VolumeContestTxnList({ transactions, account }) {
             <TYPE.body style={{ padding: '0 20px' }}>{page + ' of ' + maxPage}</TYPE.body>
 
             <ArrowRight
-              faded={page === maxPage}
+              faded={String(page === maxPage)}
               onClick={(e) => {
                 setPage(page === maxPage ? page : page + 1)
               }}

src/contexts/User.js

@@ -327,19 +327,14 @@ export function useUserLpCampaignTransactions(account) {
   return transactions || {}
 }
 
-export function useUserVolumeCampaignTransactions(account, timestampsStart, timestampsEnd) {
+export function useUserVolumeCampaignTransactions({ account, timestampGte, timestampLte }) {
   const [state, { updateVolumeContestTransactions }] = useUserContext()
   const transactions = state?.[account]?.[VOLUME_CONTEST_TRANSACTIONS_KEY]
   useEffect(() => {
     async function fetchData(account) {
       try {
         let result = await jediSwapClient.query({
-          query: USER_VOLUME_CONTEST_TRANSACTIONS,
-          variables: {
-            user: account,
-            timestampsStart,
-            timestampsEnd,
-          },
+          query: USER_VOLUME_CONTEST_TRANSACTIONS({ account, timestampGte, timestampLte }),
           fetchPolicy: 'no-cache',
         })
         if (result?.data) {

src/contexts/VolumeContestData.js

@@ -2,9 +2,11 @@ import React, { createContext, useContext, useReducer, useMemo, useCallback, use
 
 import dayjs from 'dayjs'
 import utc from 'dayjs/plugin/utc'
+import { isEmpty } from 'lodash'
+
 import { jediSwapClient } from '../apollo/client'
 import { USER_VOLUME_CONTEST_DATA } from '../apollo/queries'
-import { isEmpty } from 'lodash'
+import { START_DATE_UTC as START_VOLUME_CONTEST_DATE } from '../pages/VolumeContestLookup'
 
 const UPDATE_PLAYER_DATA = 'UPDATE_PLAYER_DATA'
 
@@ -75,8 +77,9 @@ export function useVolumeContestUserData(account) {
   useEffect(() => {
     async function fetchData(account) {
       try {
+        const normalizedStartDate = dayjs(START_VOLUME_CONTEST_DATE).format('YYYY-MM-DD')
         let result = await jediSwapClient.query({
-          query: USER_VOLUME_CONTEST_DATA(account),
+          query: USER_VOLUME_CONTEST_DATA(account, normalizedStartDate),
           fetchPolicy: 'no-cache',
         })
         if (!isEmpty(result?.data?.volumeContest)) {

src/pages/VolumeContestLookup.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { withRouter } from 'react-router-dom'
 import dayjs from 'dayjs'
 import weekday from 'dayjs/plugin/weekday'
+import utc from 'dayjs/plugin/utc'
 import styled from 'styled-components'
 import 'feather-icons'
 
@@ -20,6 +21,7 @@ import { TYPE } from '../Theme'
 import contestFlagIcon from '../../src/assets/flag.svg'
 
 dayjs.extend(weekday)
+dayjs.extend(utc)
 
 const Title = styled.div`
   display: flex;
@@ -102,35 +104,59 @@ const NftSliderWrapper = styled.div`
   margin: 0 auto;
 `
 
-const START_DATE = dayjs('2023-09-19T00:00:00.000Z')
+const START_DATE = dayjs('2023-09-12T00:00:00.000Z')
 const END_DATE = START_DATE.add(8, 'weeks')
 const START_DATE_DAY_OF_THE_WEEK = START_DATE.weekday()
 const CURRENT_WEEK_START_DATE = dayjs().weekday(START_DATE_DAY_OF_THE_WEEK)
 const CURRENT_WEEK_END_DATE = CURRENT_WEEK_START_DATE.add(6, 'days')
-
 const HAS_CAMPAIGN_STARTED = dayjs().isAfter(dayjs.utc(START_DATE))
 const HAS_CAMPAIGN_ENDED = CURRENT_WEEK_END_DATE.isAfter(dayjs.utc(END_DATE))
 
+export const START_DATE_UTC = String(START_DATE)
+export const END_DATE_UTC = String(END_DATE)
+
 const faqItems = [
   {
-    header: 'How is the score getting calculated?',
-    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing...',
+    header: 'How long will the contest last?',
+    content: (
+      <>
+        The contest lasts for 8 weeks, starting from <strong>{START_DATE.utc().format('MMM DD YYYY')}</strong> and ending on{' '}
+        <strong>{END_DATE.utc().format('MMM DD YYYY')}</strong>
+      </>
+    ),
+  },
+  {
+    header: 'Can I still take part in the contest if I missed the first week?',
+    content: <>Yes! It’s possible to get rewarded with an NFT even by participating only for one week and gathering at least 500 contest points.</>,
   },
   {
-    header: 'When and how the NFTs can be claimed?',
-    content: 'Quisque eget luctus mi, vehicula mollis lorem...',
+    header: 'How are the contest points calculated?',
+    content: (
+      <>
+        Each $ in user volume is given 1 contest point. It is possible to earn a maximum of 1000 points every week for 8 weeks.{' '}
+        <i>
+          Trading liked assets (like stablecoins with stablecoins or ETH with stETH) against each other has a multiplier of 0.5, so in order to get
+          the max points for a week, users would have to trade at least $2000 in stablecoins.
+        </i>
+      </>
+    ),
   },
   {
-    header: 'How is the score getting calculated? ',
-    content: 'Suspendisse massa risus, pretium id interdum in...',
+    header: 'Are all tokens part of the contest?',
+    content: <>Points can be earned only for trading between any of these tokens: USDC, USDT, DAI, ETH, WBTC, LORD and wstETH.</>,
   },
   {
-    header: 'How is the score getting calculated?',
-    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing...',
+    header: 'What are the rewards?',
+    content: (
+      <>
+        Users are rewarded with NFTs based on how many points they gather by the end of the contest.
+        <i>Minimum amount of points needed to be eligible for an NFT is 500.</i>
+      </>
+    ),
   },
   {
-    header: 'When and how the NFTs can be claimed?',
-    content: 'Quisque eget luctus mi, vehicula mollis lorem...',
+    header: 'Will the NFT be tradable?',
+    content: <>Yes!</>,
   },
 ]
 

src/pages/VolumeContestPage.js

@@ -31,6 +31,8 @@ import { useUserVolumeCampaignTransactions } from '../contexts/User'
 
 import { useUserStraknetIdDomain } from '../hooks'
 
+import { START_DATE_UTC, END_DATE_UTC } from './VolumeContestLookup'
+
 dayjs.extend(isBetween)
 
 const EligibilityBadge = styled.img``
@@ -137,10 +139,13 @@ const nftUserScoreLookup = {
   5: 'T1A5',
 }
 
+const startDateTimestamp = dayjs(START_DATE_UTC).unix()
+const endDateTimestamp = dayjs(END_DATE_UTC).unix()
+
 function VolumeContestAccountPage({ account }) {
   const [, starknetIdDomain] = useUserStraknetIdDomain(account)
   const userData = useVolumeContestUserData(account)
-  const transactions = useUserVolumeCampaignTransactions(account)
+  const transactions = useUserVolumeCampaignTransactions({ account, timestampGte: startDateTimestamp, timestampLte: endDateTimestamp })
 
   const userNftLevel = userData?.nftLevel
   const totalContestScore = userData?.totalContestScore