added volume contest section

package.json

@@ -87,6 +87,7 @@
   "license": "GPL-3.0-or-later",
   "dependencies": {
     "@jediswap/token-lists": "^1.0.0-beta.1",
+    "@szhsin/react-accordion": "^1.2.3",
     "babel-plugin-styled-components": "^2.0.7",
     "lodash": "^4.17.21",
     "react-countdown": "^2.3.5",

src/App.js

@@ -3,6 +3,9 @@ import styled from 'styled-components'
 import { Route, Switch, BrowserRouter, Redirect } from 'react-router-dom'
 import { ApolloProvider } from 'react-apollo'
 import { isEmpty } from 'lodash'
+import VolumeContestLookup from './pages/VolumeContestLookup'
+import VolumeContestAccountPage from './pages/VolumeContestPage'
+
 import { jediSwapClient } from './apollo/client'
 import GlobalPage from './pages/GlobalPage'
 import TokenPage from './pages/TokenPage'
@@ -226,6 +229,29 @@ function App() {
                 </LayoutWrapper>
               </Route>
 
+              <Route
+                exacts
+                strict
+                path="/volume-contest/:accountAddress"
+                render={({ match }) => {
+                  if (isStarknetAddress(match.params.accountAddress.toLowerCase())) {
+                    return (
+                      <LayoutWrapper savedOpen={savedOpen} setSavedOpen={setSavedOpen}>
+                        <VolumeContestAccountPage account={match.params.accountAddress.toLowerCase()} />
+                      </LayoutWrapper>
+                    )
+                  } else {
+                    return <Redirect to="/home" />
+                  }
+                }}
+              />
+
+              <Route path="/volume-contest/">
+                <LayoutWrapper savedOpen={savedOpen} setSavedOpen={setSavedOpen}>
+                  <VolumeContestLookup />
+                </LayoutWrapper>
+              </Route>
+
               <Redirect to="/home" />
             </Switch>
           </BrowserRouter>

src/Theme/index.js

@@ -18,6 +18,7 @@ const theme = (darkMode, color) => ({
   backgroundColor: darkMode ? '#252323' : '#F7F8FA',
 
   uniswapPink: darkMode ? '#FF00E9' : 'black',
+  jediGray: darkMode ? '#959595' : 'black',
 
   concreteGray: darkMode ? '#292C2F' : '#FAFAFA',
   inputBackground: darkMode ? '#1F1F1F' : '#FAFAFA',
@@ -147,8 +148,7 @@ export const ThemedBackground = styled.div`
   max-width: 100vw !important;
   height: 200vh;
   mix-blend-mode: color;
-  background: ${({ backgroundColor }) =>
-    `radial-gradient(50% 50% at 50% 50%, ${backgroundColor} 0%, rgba(255, 255, 255, 0) 100%)`};
+  background: ${({ backgroundColor }) => `radial-gradient(50% 50% at 50% 50%, ${backgroundColor} 0%, rgba(255, 255, 255, 0) 100%)`};
   position: absolute;
   top: 0px;
   left: 0px;

src/apollo/queries.js

@@ -198,6 +198,7 @@ export const USER_LP_CONTEST_HISTORY = gql`
     }
   }
 `
+
 export const USER_LP_CONTEST_PERCENTILE = gql`
   query lpContestPercentile($user: String!) {
     lpContestPercentile(where: { user: $user }) {
@@ -366,6 +367,30 @@ 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
+        }
+      }
+      amount0In
+      amount0Out
+      amount1In
+      amount1Out
+      amountUSD
+      to
+    }
+  }
+`
+
 export const PAIR_CHART = gql`
   query pairDayDatas($pairAddress: String!, $skip: Int!) {
     pairDayDatas(first: 1000, skip: $skip, orderBy: "date", orderByDirection: "asc", where: { pair: $pairAddress }) {
@@ -653,6 +678,27 @@ export const LP_CONTEST_DATA = gql`
   }
 `
 
+export const USER_VOLUME_CONTEST_DATA = (account) => {
+  const queryString = `
+    query VolumeContest {
+      volumeContest(where: {user: "${account}", startDate: "2023-09-04"}) {
+        nftLevel
+        totalContestScore
+        totalContestVolume
+        weeks {
+          endDt
+          id
+          name
+          score
+          startDt
+          volume
+        }
+      }
+    }
+  `
+  return gql(queryString)
+}
+
 export const LP_CONTEST_NFT_RANK = gql`
   query lpcontestnftrank {
     lpContestNftRank {
@@ -802,7 +848,7 @@ export const TOKEN_DATA = (tokenAddress, block) => {
 }
 
 export const FILTERED_TRANSACTIONS = gql`
-  query ($allPairs: [String!]) {
+  query($allPairs: [String!]) {
     mints(first: 20, where: { pairIn: $allPairs }, orderBy: "timestamp", orderByDirection: "desc") {
       transactionHash
       timestamp

src/components/Banner/index.js

@@ -1,31 +1,32 @@
 import React from 'react'
 import styled from 'styled-components'
-import Panel from "../Panel";
+import Panel from '../Panel'
 
 const PollingDot = styled.div`
   width: 13px;
   height: 13px;
   border-radius: 50%;
   background-color: ${({ theme }) => theme.green2};
-`;
+`
 
-const Title = styled.div`
+export const Title = styled.div`
   display: flex;
   align-items: center;
   font-size: 16px;
   font-weight: 500;
   margin-bottom: 14px;
-`;
+`
 
 const TitleIconWrapper = styled.div`
   display: flex;
-  margin-right: .75rem;
-`;
+  margin-right: 0.75rem;
+`
 
 const Wrapper = styled(Panel)`
   padding: 24px;
   position: relative;
   color: #fff;
+  overflow: hidden;
 
   ${PollingDot} {
     position: absolute;
@@ -36,27 +37,45 @@ const Wrapper = styled(Panel)`
   @media screen and (max-width: 800px) {
     padding: 14px;
   }
-`;
+`
 const Content = styled.div`
   font-weight: 700;
   font-size: 26px;
-`;
+`
 
+const MainContent = styled.div`
+  position: relative;
+  z-index: 2;
+`
 
+export const DecorationWrapper = styled.div`
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 
-export function Banner({title, titleIcon = null, content, showPollingDot}) {
-	return (
-		<Wrapper>
-			<Title>
-				{titleIcon && (<TitleIconWrapper>{titleIcon}</TitleIconWrapper>)}
-				{title}
-			</Title>
-			<Content>
-				{content}
-			</Content>
+  & > * {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+`
 
-			{showPollingDot && (<PollingDot />)}
-		</Wrapper>
-	)
-}
+export function Banner({ className, title, titleIcon = null, decoration = null, content, showPollingDot = false, style = {} }) {
+  return (
+    <Wrapper className={className} style={style}>
+      <MainContent>
+        <Title>
+          {titleIcon && <TitleIconWrapper>{titleIcon}</TitleIconWrapper>}
+          {title}
+        </Title>
+        <Content>{content}</Content>
 
+        {showPollingDot && <PollingDot />}
+      </MainContent>
+      {decoration && <DecorationWrapper>{decoration}</DecorationWrapper>}
+    </Wrapper>
+  )
+}

src/components/ButtonStyled/index.js

@@ -72,8 +72,29 @@ export const ButtonLight = styled(Base)`
   }
 
   :hover {
-    background-color: ${({ color, theme }) =>
-      color ? transparentize(0.8, color) : transparentize(0.8, theme.primary1)};
+    background-color: ${({ color, theme }) => (color ? transparentize(0.8, color) : transparentize(0.8, theme.primary1))};
+  }
+`
+
+export const ButtonGradient = styled(Base)`
+  background: linear-gradient(95deg, #29aafd 8%, #ff00e9 105%);
+  color: #fff;
+  transition: background-position 0.1s;
+  font-size: 16px;
+  font-weight: 750;
+  border: none;
+  white-space: nowrap;
+
+  &:hover {
+    background-position: 100%;
+  }
+
+  &[disabled] {
+    cursor: default;
+    background: rgba(196, 196, 196, 0.01);
+    box-shadow: inset 0px -63.1213px 52.3445px -49.2654px rgba(96, 68, 145, 0.3), inset 0px 75.4377px 76.9772px -36.9491px rgba(202, 172, 255, 0.3),
+      inset 0px 3.07909px 13.8559px rgba(154, 146, 210, 0.3), inset 0px 0.769772px 30.7909px rgba(227, 222, 255, 0.2);
+    overflow: hidden;
   }
 `
 
@@ -103,13 +124,17 @@ export const ButtonDark = styled(Base)`
   border-radius: 12px;
   white-space: nowrap;
 
-    ${(props) => !props.disabled && `
+  ${(props) =>
+    !props.disabled &&
+    `
           :hover {
             background-color: ${({ color, theme }) => (color ? darken(0.1, color) : darken(0.1, theme.primary1))};
           }
     `}
-    
-    ${(props) => props.disabled && `
+
+  ${(props) =>
+    props.disabled &&
+    `
         opacity: 0.5;
         cursor: default;
     `}