Trading contest nov

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

@@ -210,15 +210,6 @@ export const ButtonOutlined = styled(Base)<{ color?: string }>`
   color: ${({ theme, color }) => color || theme.subText};
   border-radius: 999px;
   font-size: 14px;
-  &:focus {
-    box-shadow: 0 0 0 1px ${({ theme, color }) => color || theme.subText};
-  }
-  &:hover {
-    box-shadow: 0 0 0 1px ${({ theme, color }) => color || theme.subText};
-  }
-  &:active {
-    box-shadow: 0 0 0 1px ${({ theme, color }) => color || theme.subText};
-  }
   &:disabled {
     ${disabledOutlined}
   }

apps/kyberswap-interface/src/components/ErrorBoundary/FallbackView.tsx

@@ -42,7 +42,7 @@ const BodyWrapper = styled.div`
 
 const CodeBlockWrapper = styled.div`
   overflow: auto;
-  white-space: pre;
+  white-space: pre-line;
 `
 
 const LinkWrapper = styled.div`

apps/kyberswap-interface/src/components/Header/groups/CampaignNavGroup.tsx

@@ -22,9 +22,10 @@ const StyledNavGroup = styled(NavGroup)`
   `}
 `
 
-const ELabel = styled.span`
+const ELabel = styled.span<{ isNew?: boolean }>`
   font-size: 10px;
   margin-left: 4px;
+  color: ${({ theme, isNew }) => (isNew ? theme.red : theme.subText)};
 `
 
 const NestedNavLink = styled(StyledNavLink)`
@@ -55,8 +56,14 @@ const CampaignNavGroup = () => {
         }
         dropdownContent={
           <Column>
+            <StyledNavLink to={APP_PATHS.RAFFLE_CAMPAIGN}>
+              <Trans>Raffle Campaign</Trans>
+              <ELabel isNew>{t`NEW`}</ELabel>
+            </StyledNavLink>
+
             <StyledNavLink to={APP_PATHS.NEAR_INTENTS_CAMPAIGN}>
               <Trans>Cross Chain Campaign</Trans>
+              <ELabel>{t`ENDED`}</ELabel>
             </StyledNavLink>
 
             <StyledNavLink to={APP_PATHS.MAY_TRADING_CAMPAIGN}>

apps/kyberswap-interface/src/components/Menu/index.tsx

@@ -383,6 +383,7 @@ export default function Menu() {
                   }
                   link="/campaigns"
                   options={[
+                    { link: APP_PATHS.RAFFLE_CAMPAIGN, label: t`Raffle Campaign` },
                     { link: APP_PATHS.NEAR_INTENTS_CAMPAIGN, label: t`Cross Chain Campaign` },
                     { link: APP_PATHS.MAY_TRADING_CAMPAIGN, label: t`May Trading` },
                     { link: APP_PATHS.AGGREGATOR_CAMPAIGN, label: t`Aggregator Trading` },

apps/kyberswap-interface/src/components/Select/index.tsx

@@ -97,6 +97,25 @@ const getOptionLabel = (option: SelectOption | undefined) => {
 }
 
 const defaultOffset: [number, number] = [0 /* skidding */, 2 /* distance */]
+
+export type SelectProps = {
+  value?: string | number
+  className?: string
+  options: SelectOption[]
+  dropdownRender?: (menu: ReactNode) => ReactNode
+  activeRender?: (selectedItem: SelectOption | undefined) => ReactNode
+  optionRender?: (option: SelectOption | undefined) => ReactNode
+  style?: CSSProperties
+  menuStyle?: CSSProperties
+  optionStyle?: CSSProperties
+  onChange?: (value: any) => void
+  forceMenuPlacementTop?: boolean
+  arrowColor?: string
+  placement?: Placement
+  withSearch?: boolean
+  onHideMenu?: () => void // hide without changes
+}
+
 function Select({
   options = [],
   activeRender,
@@ -113,23 +132,7 @@ function Select({
   onHideMenu,
   withSearch,
   placement = 'bottom',
-}: {
-  value?: string | number
-  className?: string
-  options: SelectOption[]
-  dropdownRender?: (menu: ReactNode) => ReactNode
-  activeRender?: (selectedItem: SelectOption | undefined) => ReactNode
-  optionRender?: (option: SelectOption | undefined) => ReactNode
-  style?: CSSProperties
-  menuStyle?: CSSProperties
-  optionStyle?: CSSProperties
-  onChange?: (value: any) => void
-  forceMenuPlacementTop?: boolean
-  arrowColor?: string
-  placement?: string
-  withSearch?: boolean
-  onHideMenu?: () => void // hide without changes
-}) {
+}: SelectProps) {
   const [selected, setSelected] = useState(getOptionValue(options?.[0]))
   const [showMenu, setShowMenu] = useState(false)
   const [searchValue, setSearchValue] = useState('')
@@ -184,7 +187,7 @@ function Select({
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
 
   const { styles } = usePopper(ref.current, popperElement, {
-    placement: placement as Placement,
+    placement: placement,
     strategy: 'fixed',
     modifiers: [{ name: 'offset', options: { offset: defaultOffset } }],
   })

apps/kyberswap-interface/src/components/swapv2/LimitOrder/ExpirePicker.tsx

@@ -4,12 +4,12 @@ import { rgba } from 'polished'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Calendar, X } from 'react-feather'
 import { Flex, Text } from 'rebass'
-import styled, { CSSProperties } from 'styled-components'
+import styled from 'styled-components'
 
 import { ButtonOutlined, ButtonPrimary } from 'components/Button'
 import DatePicker from 'components/DatePicker'
 import Modal from 'components/Modal'
-import Select from 'components/Select'
+import Select, { SelectProps } from 'components/Select'
 import useTheme from 'hooks/useTheme'
 
 import { MIN_TIME_MINUTES, getExpireOptions } from './const'
@@ -128,14 +128,14 @@ export default function DateTimePicker({
   }
   const theme = useTheme()
 
-  const propsSelect = {
-    style: { width: 120, borderRadius: 20, background: theme.background } as CSSProperties,
+  const propsSelect: Partial<SelectProps> = {
+    style: { width: 120, borderRadius: 20, background: theme.background },
     menuStyle: {
       height: 250,
       overflow: 'scroll',
       textAlign: 'center',
       width: 'fit-content',
-    } as CSSProperties,
+    },
     placement: 'left',
   }
 

apps/kyberswap-interface/src/constants/index.ts

@@ -175,6 +175,7 @@ export const APP_PATHS = {
   ELASTIC_SNAPSHOT: '/elastic-snapshot',
   MARKET_OVERVIEW: '/market-overview',
 
+  RAFFLE_CAMPAIGN: '/campaigns/raffle-campaign',
   NEAR_INTENTS_CAMPAIGN: '/campaigns/near-intents',
   MAY_TRADING_CAMPAIGN: '/campaigns/may-trading',
   AGGREGATOR_CAMPAIGN: '/campaigns/aggregator',

apps/kyberswap-interface/src/pages/App.tsx

@@ -346,6 +346,7 @@ export default function App() {
               <Route path={APP_PATHS.ELASTIC_SNAPSHOT} element={<ElasticSnapshot />} />
               <Route path={APP_PATHS.MARKET_OVERVIEW} element={<MarketOverview />} />
 
+              <Route path={APP_PATHS.RAFFLE_CAMPAIGN} element={<Campaign />} />
               <Route path={APP_PATHS.NEAR_INTENTS_CAMPAIGN} element={<Campaign />} />
               <Route path={APP_PATHS.MAY_TRADING_CAMPAIGN} element={<Campaign />} />
               <Route path={APP_PATHS.AGGREGATOR_CAMPAIGN} element={<Campaign />} />