add campaign to mobile menu (#2524)

* add campaign to mobile menu * remove comment
KyberNetwork · Aug 30, 2024 · 93bee05 · 93bee05
1 parent 69cb9ec
commit 93bee05
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/src/components/Icons/CampaignIcon.tsx b/src/components/Icons/CampaignIcon.tsx
@@ -0,0 +1,12 @@
+export default function CampaignIcon({ size = 16 }: { size?: string | number }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 16 16" version="1.1">
+      <g id="surface1">
+        <path
+          style={{ stroke: 'none', fillRule: 'nonzero', fill: 'currentColor', fillOpacity: 1 }}
+          d="M 14.335938 2.957031 C 14.84375 3.789062 14.785156 4.566406 14.777344 5.519531 C 14.777344 5.71875 14.777344 5.914062 14.78125 6.117188 C 14.78125 6.53125 14.777344 6.945312 14.773438 7.363281 C 14.769531 7.996094 14.773438 8.632812 14.78125 9.269531 C 14.78125 9.671875 14.777344 10.074219 14.777344 10.480469 C 14.78125 10.765625 14.78125 10.765625 14.78125 11.054688 C 14.761719 12.367188 14.761719 12.367188 14.28125 13.035156 C 13.617188 13.476562 13.09375 13.464844 12.332031 13.332031 C 11.710938 13.167969 11.097656 12.984375 10.488281 12.78125 C 9.660156 12.507812 9.660156 12.507812 8.832031 12.667969 C 8.550781 12.941406 8.273438 13.21875 8 13.5 C 7.035156 13.820312 6.019531 13.828125 5.09375 13.40625 C 4.375 12.722656 4.023438 12.179688 3.957031 11.175781 C 3.980469 10.925781 3.980469 10.925781 4 10.667969 C 3.835938 10.652344 3.671875 10.640625 3.5 10.625 C 2.765625 10.523438 2.121094 10.234375 1.5 9.832031 C 1.21875 9.269531 1.289062 8.640625 1.28125 8.019531 C 1.277344 7.886719 1.273438 7.75 1.265625 7.609375 C 1.265625 7.476562 1.265625 7.34375 1.261719 7.210938 C 1.261719 7.089844 1.257812 6.96875 1.253906 6.847656 C 1.371094 6.328125 1.582031 6.15625 2 5.832031 C 2.4375 5.652344 2.855469 5.5 3.308594 5.363281 C 3.4375 5.320312 3.566406 5.28125 3.703125 5.238281 C 4.132812 5.101562 4.566406 4.964844 5 4.832031 C 5.148438 4.785156 5.296875 4.742188 5.449219 4.691406 C 6.390625 4.398438 7.332031 4.113281 8.277344 3.832031 C 8.601562 3.734375 8.925781 3.636719 9.25 3.539062 C 9.730469 3.390625 10.207031 3.25 10.6875 3.105469 C 10.832031 3.0625 10.976562 3.015625 11.121094 2.972656 C 12.230469 2.648438 13.292969 2.355469 14.335938 2.957031 Z M 11.710938 4.089844 C 11.523438 4.144531 11.335938 4.199219 11.140625 4.257812 C 10.941406 4.316406 10.738281 4.378906 10.53125 4.441406 C 10.324219 4.503906 10.113281 4.566406 9.898438 4.628906 C 9.460938 4.761719 9.019531 4.894531 8.582031 5.027344 C 8.019531 5.195312 7.457031 5.363281 6.894531 5.53125 C 6.355469 5.691406 5.820312 5.851562 5.28125 6.015625 C 5.078125 6.074219 4.878906 6.136719 4.667969 6.195312 C 4.480469 6.253906 4.292969 6.308594 4.101562 6.367188 C 3.9375 6.417969 3.773438 6.46875 3.601562 6.519531 C 2.828125 6.753906 2.828125 6.753906 2.332031 7.332031 C 2.253906 8.3125 2.253906 8.3125 2.667969 9.167969 C 2.988281 9.324219 2.988281 9.324219 3.371094 9.425781 C 3.515625 9.472656 3.664062 9.515625 3.8125 9.5625 C 3.972656 9.609375 4.128906 9.65625 4.292969 9.703125 C 4.457031 9.753906 4.621094 9.800781 4.792969 9.851562 C 5.320312 10.011719 5.847656 10.167969 6.375 10.324219 C 6.722656 10.425781 7.070312 10.53125 7.417969 10.636719 C 8.246094 10.882812 9.070312 11.128906 9.898438 11.371094 C 10.289062 11.488281 10.679688 11.605469 11.070312 11.722656 C 11.277344 11.78125 11.484375 11.84375 11.695312 11.90625 C 11.867188 11.957031 12.039062 12.007812 12.214844 12.0625 C 12.660156 12.164062 13.042969 12.1875 13.5 12.167969 C 13.695312 11.773438 13.6875 11.535156 13.6875 11.097656 C 13.6875 10.867188 13.6875 10.867188 13.691406 10.636719 C 13.691406 10.46875 13.6875 10.304688 13.6875 10.136719 C 13.6875 9.882812 13.6875 9.882812 13.6875 9.625 C 13.6875 9.265625 13.6875 8.910156 13.6875 8.550781 C 13.6875 8.003906 13.6875 7.453125 13.691406 6.90625 C 13.6875 6.558594 13.6875 6.210938 13.6875 5.863281 C 13.6875 5.617188 13.6875 5.617188 13.691406 5.363281 C 13.6875 5.210938 13.6875 5.058594 13.6875 4.902344 C 13.6875 4.769531 13.6875 4.632812 13.6875 4.496094 C 13.6875 4.152344 13.6875 4.152344 13.5 3.832031 C 12.851562 3.804688 12.332031 3.902344 11.710938 4.089844 Z M 5.167969 11.167969 C 5.226562 11.597656 5.34375 11.847656 5.59375 12.207031 C 6.210938 12.652344 6.585938 12.59375 7.332031 12.5 C 7.625 12.175781 7.625 12.175781 7.832031 11.832031 C 7.484375 11.722656 7.132812 11.609375 6.78125 11.5 C 6.585938 11.4375 6.390625 11.375 6.191406 11.3125 C 5.675781 11.144531 5.675781 11.144531 5.167969 11.167969 Z M 5.167969 11.167969 "
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
@@ -15,6 +15,7 @@ import { ReactComponent as RoadMapIcon } from 'assets/svg/roadmap.svg'
 import { ButtonEmpty, ButtonPrimary } from 'components/Button'
 import { AutoColumn } from 'components/Column'
 import ArrowRight from 'components/Icons/ArrowRight'
+import CampaignIcon from 'components/Icons/CampaignIcon'
 import Faucet from 'components/Icons/Faucet'
 import Icon from 'components/Icons/Icon'
 import MailIcon from 'components/Icons/MailIcon'
@@ -222,6 +223,7 @@ export default function Menu() {
   const showAbout = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`)
   const showBlog = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`)
   const showAnalytics = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`)
+  const showCampaigns = useMedia(`(max-width: ${MEDIA_WIDTHS.upToXXSmall}px)`)
 
   const bridgeLink = networkInfo.bridgeURL
   const toggleClaimPopup = useToggleModal(ApplicationModal.CLAIM_POPUP)
@@ -350,6 +352,27 @@ export default function Menu() {
               </>
             )}
 
+            {showCampaigns && (
+              <MenuItem>
+                <NavDropDown
+                  icon={<CampaignIcon />}
+                  title={
+                    <Text sx={{ position: 'relative' }} width="max-content">
+                      <Trans>Campaigns</Trans>
+                      <NewLabel style={{ position: 'absolute', right: -22 }}>New</NewLabel>
+                    </Text>
+                  }
+                  link="#"
+                  options={[
+                    { link: APP_PATHS.AGGREGATOR_CAMPAIGN, label: t`Aggregator Trading` },
+                    { link: APP_PATHS.LIMIT_ORDER_CAMPAIGN, label: t`Limit Order` },
+                    { link: APP_PATHS.REFFERAL_CAMPAIGN, label: t`Referral` },
+                    { link: APP_PATHS.MY_DASHBOARD, label: t`My Dashboard`, external: true },
+                  ]}
+                />
+              </MenuItem>
+            )}
+
             {bridgeLink && (
               <MenuItem>
                 <ExternalLink href={bridgeLink}>