Feat/stip (#2504)

* temp * feat: info * integrate api * my dashboard * total reward my dashboard * feat: handle claim * mobile view * fill information * feat: referral * fix: auto show if have refcode * referral leaderboard * referral leaderboard * fix: linh qa * fix: linh qa * fix: button size * fix: total reward * fqa * fix: url my dashboard * fix: update referral message * fix: header active * fix: my dashboard * fix: my dashboard * fix: my dashboard * remove test week * fix: date * chore: change note * feat: update new
KyberNetwork · Jul 9, 2024 · 7a95002 · 7a95002
1 parent 2053736
commit 7a95002
Show file tree

Hide file tree

Showing 28 changed files with 2,491 additions and 2 deletions.
diff --git a/.env b/.env
@@ -42,3 +42,6 @@ VITE_ELASTIC_POOL_TOPIC_ID=7
 VITE_BFF_API=https://bff.kyberswap.com/api
 VITE_BUCKET_NAME=ks-setting-1d682dca
 VITE_WALLETCONNECT_PROJECT_ID=b5b37945209ea323811f1032e84eaeb5
+
+VITE_CAMPAIGN_URL=https://kyberswap-arbitrum-stip.kyberengineering.io/api
+VITE_REFERRAL_URL=https://referral.kyberswap.com/api
diff --git a/.env.dev b/.env.dev
@@ -43,3 +43,6 @@ VITE_PRICE_ALERT_TOPIC_ID=13
 VITE_ELASTIC_POOL_TOPIC_ID=12
 VITE_BUCKET_NAME=ks-setting-a3aa20b7
 VITE_WALLETCONNECT_PROJECT_ID=b5b37945209ea323811f1032e84eaeb5
+
+VITE_CAMPAIGN_URL=https://kyberswap-arbitrum-stip.kyberengineering.io/api
+VITE_REFERRAL_URL=https://referral.kyberswap.com/api
diff --git a/.env.production b/.env.production
@@ -42,3 +42,6 @@ VITE_ELASTIC_POOL_TOPIC_ID=7
 VITE_BFF_API=https://bff.kyberswap.com/api
 VITE_BUCKET_NAME=ks-setting-1d682dca
 VITE_WALLETCONNECT_PROJECT_ID=b5b37945209ea323811f1032e84eaeb5
+
+VITE_CAMPAIGN_URL=https://kyberswap-arbitrum-stip.kyberengineering.io/api
+VITE_REFERRAL_URL=https://referral.kyberswap.com/api
diff --git a/.env.stg b/.env.stg
@@ -40,3 +40,7 @@ VITE_ELASTIC_POOL_TOPIC_ID=4,5
 VITE_BFF_API=https://kyberswap-bff.stg.kyberengineering.io/api
 VITE_BUCKET_NAME=ks-setting-6d114fd1
 VITE_WALLETCONNECT_PROJECT_ID=b5b37945209ea323811f1032e84eaeb5
+
+VITE_CAMPAIGN_URL=https://kyberswap-arbitrum-stip.kyberengineering.io/api
+VITE_REFERRAL_URL=https://referral.kyberswap.com/api
+
diff --git a/package.json b/package.json
@@ -127,6 +127,7 @@
     "recharts": "2.6.0",
     "recharts-legacy": "npm:recharts@2.0.9",
     "redux-localstorage-simple": "^2.5.1",
+    "siwe": "^2.3.2",
     "styled-components": "^5.3.6",
     "swiper": "^8.4.4",
     "ua-parser-js": "^1.0.33",

diff --git a/src/components/Header/groups/CampaignNavGroup.tsx b/src/components/Header/groups/CampaignNavGroup.tsx
@@ -0,0 +1,51 @@
+import { Trans } from '@lingui/macro'
+import { useLocation } from 'react-router-dom'
+import { useMedia } from 'react-use'
+
+import Column from 'components/Column'
+import { NewLabel } from 'components/Menu'
+import { APP_PATHS } from 'constants/index'
+
+import { DropdownTextAnchor, StyledNavLink } from '../styleds'
+import NavGroup from './NavGroup'
+
+const CampaignNavGroup = () => {
+  const { pathname } = useLocation()
+  const isActive = pathname.includes('/campaigns')
+  const upTo500 = useMedia('(max-width: 500px)')
+
+  if (upTo500) return null
+
+  return (
+    <>
+      <NavGroup
+        dropdownAlign={'left'}
+        isActive={isActive}
+        anchor={
+          <DropdownTextAnchor style={{ position: 'relative', width: '115px' }}>
+            <Trans>Campaigns</Trans>
+            <NewLabel style={{ position: 'absolute', right: '0' }}>New</NewLabel>
+          </DropdownTextAnchor>
+        }
+        dropdownContent={
+          <Column>
+            <StyledNavLink to={APP_PATHS.AGGREGATOR_CAMPAIGN} style={{ gap: '12px' }}>
+              <Trans>Aggregator Trading</Trans>
+            </StyledNavLink>
+            <StyledNavLink to={APP_PATHS.LIMIT_ORDER_CAMPAIGN} style={{ gap: '12px' }}>
+              <Trans>Limit Order</Trans>
+            </StyledNavLink>
+            <StyledNavLink to={APP_PATHS.REFFERAL_CAMPAIGN} style={{ gap: '12px' }}>
+              <Trans>Referral</Trans>
+            </StyledNavLink>
+            <StyledNavLink to={APP_PATHS.MY_DASHBOARD} style={{ gap: '12px' }}>
+              <Trans>My Dashboard</Trans>
+            </StyledNavLink>
+          </Column>
+        }
+      />
+    </>
+  )
+}
+
+export default CampaignNavGroup
diff --git a/src/components/Header/groups/SwapNavGroup.tsx b/src/components/Header/groups/SwapNavGroup.tsx
@@ -57,7 +57,7 @@ const SwapNavGroup = () => {
   const { mixpanelHandler } = useMixpanel()
 
   const isActive = [APP_PATHS.SWAP, APP_PATHS.BUY_CRYPTO, APP_PATHS.BRIDGE, APP_PATHS.LIMIT].some(path =>
-    pathname.includes(path),
+    pathname.startsWith(path),
   )
 
   return (

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -18,6 +18,7 @@ import { useHolidayMode } from 'state/user/hooks'
 import { MEDIA_WIDTHS } from 'theme'
 
 import AboutNavGroup from './groups/AboutNavGroup'
+import CampaignNavGroup from './groups/CampaignNavGroup'
 import KyberDAONavGroup from './groups/KyberDaoGroup'
 import SwapNavGroup from './groups/SwapNavGroup'
 import { StyledNavExternalLink } from './styleds'
@@ -208,6 +209,7 @@ export default function Header() {
           <HeaderLinks>
             <SwapNavGroup />
             <KyberDAONavGroup />
+            <CampaignNavGroup />
             <StyledNavExternalLink target="_blank" href={AGGREGATOR_ANALYTICS_URL}>
               <Trans>Analytics</Trans>
             </StyledNavExternalLink>

diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
@@ -317,6 +317,29 @@ export default function Menu() {
               </MenuItem>
             )}
 
+            {showAnalytics && (
+              <>
+                <MenuItem>
+                  <NavDropDown
+                    icon={<Info />}
+                    title={
+                      <Text sx={{ position: 'relative' }} width="max-content">
+                        Campaigns
+                        <NewLabel style={{ position: 'absolute', right: '-1.5rem' }}>New</NewLabel>
+                      </Text>
+                    }
+                    link={'/campaigns'}
+                    options={[
+                      { link: '/campaigns/aggregator', label: 'Aggregator Trading' },
+                      { link: '/campaigns/limit-order', label: 'Limit Order' },
+                      { link: '/campaigns/referrals', label: 'Referral' },
+                      { link: '/campaigns/dashboard', label: 'My Dashboard' },
+                    ]}
+                  />
+                </MenuItem>
+              </>
+            )}
+
             {bridgeLink && (
               <MenuItem>
                 <ExternalLink href={bridgeLink}>

diff --git a/src/constants/env.ts b/src/constants/env.ts
@@ -50,6 +50,8 @@ export const PRICE_ALERT_TOPIC_ID = required('PRICE_ALERT_TOPIC_ID')
 export const ELASTIC_POOL_TOPIC_ID = required('ELASTIC_POOL_TOPIC_ID')
 export const BUCKET_NAME = required('BUCKET_NAME')
 export const WALLETCONNECT_PROJECT_ID = required('WALLETCONNECT_PROJECT_ID')
+export const CAMPAIGN_URL = required('CAMPAIGN_URL')
+export const REFERRAL_URL = required('REFERRAL_URL')
 
 type FirebaseConfig = {
   apiKey: string

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -163,6 +163,11 @@ export const APP_PATHS = {
 
   DEPRECATED_NOTI_CENTER: '/notification-center/overview',
   ELASTIC_SNAPSHOT: '/elastic-snapshot',
+
+  AGGREGATOR_CAMPAIGN: '/campaigns/aggregator',
+  LIMIT_ORDER_CAMPAIGN: '/campaigns/limit-order',
+  REFFERAL_CAMPAIGN: '/campaigns/referrals',
+  MY_DASHBOARD: '/campaigns/dashboard',
 } as const
 
 export const TERM_FILES_PATH = {

diff --git a/src/pages/App.tsx b/src/pages/App.tsx
@@ -60,6 +60,9 @@ const BuyCrypto = lazy(() => import('pages/BuyCrypto'))
 
 const NotificationCenter = lazy(() => import('pages/NotificationCenter'))
 
+const Campaign = lazy(() => import('pages/Campaign'))
+const CampaignMyDashboard = lazy(() => import('pages/Campaign/MyDashboard'))
+
 const AppWrapper = styled.div`
   display: flex;
   flex-flow: column;
@@ -324,6 +327,11 @@ export default function App() {
 
               <Route path={APP_PATHS.ELASTIC_SNAPSHOT} element={<ElasticSnapshot />} />
 
+              <Route path={APP_PATHS.AGGREGATOR_CAMPAIGN} element={<Campaign />} />
+              <Route path={APP_PATHS.LIMIT_ORDER_CAMPAIGN} element={<Campaign />} />
+              <Route path={APP_PATHS.REFFERAL_CAMPAIGN} element={<Campaign />} />
+              <Route path={APP_PATHS.MY_DASHBOARD} element={<CampaignMyDashboard />} />
+
               <Route path="*" element={<RedirectPathToSwapV3Network />} />
             </Routes>
           </BodyWrapper>