display multiplier

open-dollar · Jul 4, 2024 · 00e4673 · 00e4673
1 parent afda9ba
commit 00e4673
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/src/containers/Bolts/index.tsx b/src/containers/Bolts/index.tsx
@@ -8,6 +8,7 @@ import Image from '~/assets/quests-img.png'
 import styled from 'styled-components'
 import Leaderboard from '~/containers/Bolts/Leaderboard'
 import { useStoreState, useStoreActions } from '~/store'
+import DataCard from '~/containers/Analytics/DataCard'
 
 const Bolts = () => {
     const { account } = useActiveWeb3React()
@@ -21,18 +22,32 @@ const Bolts = () => {
     useEffect(() => {
         fetchData({ account } as { account: string | null })
     }, [account, fetchData])
-
     return (
         <Container>
             <Section>
                 <Title>Bolts</Title>
                 <SubHeader>Welcome Vault Keepers!</SubHeader>
             </Section>
+            <Section>
+                <FlexMultipleRow>
+                    <DataCard
+                        title={'Your Bolts'}
+                        value={userBoltsData.bolts ? userBoltsData.bolts : '-'}
+                        // description={val.description}
+                    />
+                    <DataCard
+                        title={'Your Multiplier'}
+                        value={userBoltsData.multiplier ? userBoltsData.multiplier : '-'}
+                        // description={"Multiplier"}
+                    />
+                </FlexMultipleRow>
+            </Section>
+
             <Section>
                 <SectionHeader>Leaderboard</SectionHeader>
                 <Leaderboard data={leaderboardData} userBoltsData={userBoltsData} />
             </Section>
-            <Section>
+            {/* <Section>
                 <MessageBox>
                     <img src={Image} alt="" />
                     <Text>
@@ -47,7 +62,7 @@ const Bolts = () => {
                         </p>
                     </Text>
                 </MessageBox>
-            </Section>
+            </Section> */}
 
             <Section>
                 <SectionHeader>Quests</SectionHeader>
@@ -81,6 +96,20 @@ const Bolts = () => {
     )
 }
 
+const FlexMultipleRow = styled.div`
+    display: flex;
+    gap: 24px;
+    margin-bottom: 24px;
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+        display: block;
+
+        & div {
+            margin-bottom: 24px;
+        }
+    `}
+`
+
 const Container = styled.div`
     margin: 80px auto;
     max-width: 1362px;

diff --git a/src/model/boltsModel.ts b/src/model/boltsModel.ts
@@ -17,8 +17,9 @@ export interface BoltsModel {
     userBoltsData: {
         rank: string
         bolts: string
+        multiplier: string
     }
-    setUserBoltsData: Action<BoltsModel, { rank: string; bolts: string }>
+    setUserBoltsData: Action<BoltsModel, { rank: string; bolts: string; multiplier: string }>
 
     leaderboardData: LeaderboardUser[]
     setLeaderboardData: Action<BoltsModel, LeaderboardUser[]>
@@ -42,6 +43,7 @@ const boltsModel: BoltsModel = {
     userBoltsData: {
         rank: '',
         bolts: '',
+        multiplier: '',
     },
     setUserBoltsData: action((state, payload) => {
         state.userBoltsData = payload