WIP: 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',
@@ -126,13 +127,16 @@ export const Link = styled.a.attrs({
   cursor: pointer;
   color: ${({ theme }) => theme.primary1};
   font-weight: 500;
+
   :hover {
     text-decoration: underline;
   }
+
   :focus {
     outline: none;
     text-decoration: underline;
   }
+
   :active {
     text-decoration: none;
   }
@@ -147,8 +151,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;
@@ -159,11 +162,17 @@ export const ThemedBackground = styled.div`
 
 export const GlobalStyle = createGlobalStyle`
   @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&display=swap');
-  html { font-family: 'DM Sans', sans-serif; }
+
+  html {
+    font-family: 'DM Sans', sans-serif;
+  }
+
   @supports (font-variation-settings: normal) {
-    html { font-family: 'DM Sans', sans-serif; }
+    html {
+      font-family: 'DM Sans', sans-serif;
+    }
   }
-  
+
   html,
   body {
     margin: 0;
@@ -173,7 +182,7 @@ export const GlobalStyle = createGlobalStyle`
     font-size: 14px;
     background-color: ${({ theme }) => theme.bg6};
   }
-  
+
   * {
     box-sizing: border-box;
   }
@@ -186,47 +195,50 @@ export const GlobalStyle = createGlobalStyle`
     }
   }
 
-
-.three-line-legend {
-	width: 100%;
-	height: 70px;
-	position: absolute;
-	padding: 8px;
-	font-size: 12px;
-	color: #20262E;
-	background-color: rgba(255, 255, 255, 0.23);
-	text-align: left;
-	z-index: 10;
-  pointer-events: none;
-}
-
-.three-line-legend-dark {
-	width: 100%;
-	height: 70px;
-	position: absolute;
-	padding: 8px;
-	font-size: 12px;
-	color: white;
-	background-color: rgba(255, 255, 255, 0.23);
-	text-align: left;
-	z-index: 10;
-  pointer-events: none;
-}
+  button {
+    font-family: 'DM Sans', sans-serif;
+  }
 
-@media screen and (max-width: 800px) {
   .three-line-legend {
-    display: none !important;
+    width: 100%;
+    height: 70px;
+    position: absolute;
+    padding: 8px;
+    font-size: 12px;
+    color: #20262E;
+    background-color: rgba(255, 255, 255, 0.23);
+    text-align: left;
+    z-index: 10;
+    pointer-events: none;
   }
-}
 
-.tv-lightweight-charts{
-  width: 100% !important;
-
+  .three-line-legend-dark {
+    width: 100%;
+    height: 70px;
+    position: absolute;
+    padding: 8px;
+    font-size: 12px;
+    color: white;
+    background-color: rgba(255, 255, 255, 0.23);
+    text-align: left;
+    z-index: 10;
+    pointer-events: none;
+  }
 
-  & > * {
+  @media screen and (max-width: 800px) {
+    .three-line-legend {
+      display: none !important;
+    }
+  }
+
+  .tv-lightweight-charts {
     width: 100% !important;
+
+
+    & > * {
+      width: 100% !important;
+    }
   }
-}
 
 
   html {

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,35 @@ export const USER_LP_CONTEST_TRANSACTIONS = gql`
   }
 `
 
+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
+      }
+  }`
+  return gql(queryString)
+}
+
 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 +683,27 @@ export const LP_CONTEST_DATA = gql`
   }
 `
 
+export const USER_VOLUME_CONTEST_DATA = (account, startDate) => {
+  const queryString = `
+    query VolumeContest {
+      volumeContest(where: {user: "${account}", startDate: "${startDate}"}) {
+        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 +853,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>
+  )
+}