Skip to content

Commit

Permalink
Bolts multiplier update (#604)
Browse files Browse the repository at this point in the history 
* Rename GenesisNFV

* scaffold multiplier

* connect-src update

* update quests

* update description

* display multiplier

* lint fix
  • Loading branch information
@pi0neerpat
pi0neerpat authored Jul 4, 2024
1 parent 1478661 commit bc37420
Show file tree
Hide file tree
Showing 8 changed files with 200 additions and 169 deletions.
2 changes: 1 addition & 1 deletion public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
script-src 'self' blob: https://kb.wowto.ai https://app.wowto.ai http://cdn.matomo.cloud/usekeyp.matomo.cloud/matomo.js https://cdn.matomo.cloud/usekeyp.matomo.cloud/matomo.js https://cdn.matomo.cloud/matomo.js https://usekeyp.matomo.cloud/matomo.js;
media-src 'self';
img-src 'self' data: blob: https://explorer-api.walletconnect.com https://usekeyp.matomo.cloud https://app.opendollar.com;
connect-src 'self' blob: https://*.quiknode.pro https://api.opensea.io https://api.fuul.xyz https://api.camelot.exchange https://opt-mainnet.g.alchemy.com https://arb-mainnet.g.alchemy.com https://mainnet.optimism.io/ https://eth.llamarpc.com https://base.llamarpc.com https://polygon-bor-rpc.publicnode.com https://eth-pokt.nodies.app https://polygon-pokt.nodies.app https://op-pokt.nodies.app https://arb-pokt.nodies.app https://holy-damp-firefly.arbitrum-mainnet.quiknode.pro https://api.studio.thegraph.com https://od-subgraph-node-image.onrender.com https://usekeyp.matomo.cloud https://o1016103.ingest.us.sentry.io/api/4507153379295232/envelope/ https://o1016103.ingest.us.sentry.io/api/4507153379295232/security/ https://arbitrum-sepolia.infura.io https://arbitrum-sepolia.blockpi.network/v1/rpc/public https://arbitrum.blockpi.network/v1/rpc/public https://optimism.blockpi.network wss://relay.walletconnect.com/ https://verify.walletconnect.org wss://www.walletlink.org/rpc https://explorer-api.walletconnect.com https://chain-proxy.wallet.coinbase.com https://rpc.walletconnect.com https://bot.opendollar.com https://bot.dev.opendollar.com https://subgraph.reflexer.finance/subgraphs/name/reflexer-labs/rai https://api.country.is/ ;
connect-src 'self' blob: https://eth-pokt.nodies.app http://localhost:3000 https://*.quiknode.pro https://api.opensea.io https://api.fuul.xyz https://api.camelot.exchange https://opt-mainnet.g.alchemy.com https://arb-mainnet.g.alchemy.com https://mainnet.optimism.io/ https://eth.llamarpc.com https://base.llamarpc.com https://polygon-bor-rpc.publicnode.com https://eth-pokt.nodies.app https://polygon-pokt.nodies.app https://op-pokt.nodies.app https://arb-pokt.nodies.app https://holy-damp-firefly.arbitrum-mainnet.quiknode.pro https://api.studio.thegraph.com https://od-subgraph-node-image.onrender.com https://usekeyp.matomo.cloud https://o1016103.ingest.us.sentry.io/api/4507153379295232/envelope/ https://o1016103.ingest.us.sentry.io/api/4507153379295232/security/ https://arbitrum-sepolia.infura.io https://arbitrum-sepolia.blockpi.network/v1/rpc/public https://arbitrum.blockpi.network/v1/rpc/public https://optimism.blockpi.network wss://relay.walletconnect.com/ https://verify.walletconnect.org wss://www.walletlink.org/rpc https://explorer-api.walletconnect.com https://chain-proxy.wallet.coinbase.com https://rpc.walletconnect.com https://bot.opendollar.com https://bot.dev.opendollar.com https://subgraph.reflexer.finance/subgraphs/name/reflexer-labs/rai https://api.country.is/ ;
object-src 'self' blob:;
form-action 'self';
font-src 'self' data: https://fonts.gstatic.com;
Expand Down
7 changes: 3 additions & 4 deletions src/chains.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,9 @@ const ETH: AddEthereumChainParameter['nativeCurrency'] = {
decimals: 18,
}

export const RPC_URL_ETHEREUM =
process.env.REACT_APP_RPC_URL_ETHEREUM && process.env.NODE_ENV !== 'development'
? process.env.REACT_APP_RPC_URL_ETHEREUM
: 'https://eth.llamarpc.com'
export const RPC_URL_ETHEREUM = process.env.REACT_APP_RPC_URL_ETHEREUM
? process.env.REACT_APP_RPC_URL_ETHEREUM
: 'https://eth.llamarpc.com'
export const RPC_URL_ARBITRUM = 'https://arbitrum.blockpi.network/v1/rpc/public'
export const RPC_URL_OPTIMISM = 'https://op-pokt.nodies.app'
export const RPC_URL_POLYGON = 'https://polygon-bor-rpc.publicnode.com'
Expand Down
8 changes: 4 additions & 4 deletions src/components/Bolts/AddressCell.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,18 @@ import styled from 'styled-components'

interface AddressCellProps {
address: string
userFuulDataAddress: string
userBoltsDataAddress: string
data: LeaderboardUser[]
}

const AddressCell: React.FC<AddressCellProps> = ({ address, userFuulDataAddress, data }) => {
const AddressCell: React.FC<AddressCellProps> = ({ address, userBoltsDataAddress, data }) => {
const userInTop10 = useMemo(() => data.find((user) => user.rank <= 10 && user.address === address), [data, address])
// Skip ENS check for users not in the top 10
const resolvedAddress = useAddress(address, 0, !userInTop10)

return (
<Address>
{userFuulDataAddress === address && (
{userBoltsDataAddress === address && (
<Badge
style={{
backgroundColor: '#e2f1ff',
Expand All @@ -43,7 +43,7 @@ const AddressCell: React.FC<AddressCellProps> = ({ address, userFuulDataAddress,
export default React.memo(AddressCell, (prevProps, nextProps) => {
return (
prevProps.address === nextProps.address &&
prevProps.userFuulDataAddress === nextProps.userFuulDataAddress &&
prevProps.userBoltsDataAddress === nextProps.userBoltsDataAddress &&
prevProps.data === nextProps.data
)
})
Expand Down
22 changes: 11 additions & 11 deletions src/containers/Bolts/Leaderboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { LeaderboardUser } from '~/model/boltsModel'
const columnHelper = createColumnHelper()

// @ts-ignore
const Table = ({ data, userFuulData }) => {
const Table = ({ data, userBoltsData }) => {
const [sorting, setSorting] = useState<SortingState>([])
const [globalFilter, setGlobalFilter] = useState<string>('')
const [isTableReady, setIsTableReady] = useState(false)
Expand All @@ -39,16 +39,16 @@ const Table = ({ data, userFuulData }) => {

const displayData = useMemo(() => {
let dataToDisplay = [...data.slice(0, 10)]
if (userFuulData.points) {
if (userBoltsData.bolts) {
const userInTop10 = data.find(
(user: LeaderboardUser) => user.address === userFuulData.address && user.rank <= 10
(user: LeaderboardUser) => user.address === userBoltsData.address && user.rank <= 10
)
if (!userInTop10) {
dataToDisplay.push(userFuulData)
dataToDisplay.push(userBoltsData)
}
}
return dataToDisplay
}, [data, userFuulData])
}, [data, userBoltsData])

const columns = [
columnHelper.accessor('rank', {
Expand All @@ -60,7 +60,7 @@ const Table = ({ data, userFuulData }) => {
if (rank <= 3) {
color = '#FFFFFF'
badge = <BadgeImage src={leaderboardLeadersBadge} alt="leaderboard-badge" />
} else if (rank === userFuulData.rank) {
} else if (rank === userBoltsData.rank) {
color = '#1A74EC'
}
return (
Expand All @@ -75,11 +75,11 @@ const Table = ({ data, userFuulData }) => {
header: 'Address',
cell: (info) => {
const address = info.getValue()
return <AddressCell address={address} userFuulDataAddress={userFuulData.address} data={data} />
return <AddressCell address={address} userBoltsDataAddress={userBoltsData.address} data={data} />
},
}),
columnHelper.accessor('points', {
header: 'Points',
columnHelper.accessor('bolts', {
header: 'Bolts',
// @ts-ignore
cell: (info) => <Points>{info.getValue().toLocaleString()}</Points>,
}),
Expand Down Expand Up @@ -144,7 +144,7 @@ const Table = ({ data, userFuulData }) => {
key={row.id}
style={
// @ts-ignore
row.original.address === userFuulData.address
row.original.address === userBoltsData.address
? { backgroundColor: '#8DB2FF99' }
: { backgroundColor: '#1A74EC' }
}
Expand All @@ -156,7 +156,7 @@ const Table = ({ data, userFuulData }) => {
else tdStyle = { paddingTop: '10px', color: '#eeeeee' }
if (index === 0) tdStyle.paddingBottom = '10px'
// @ts-ignore
if (row?.original.address === userFuulData.address) tdStyle.color = '#1A74EC'
if (row?.original.address === userBoltsData.address) tdStyle.color = '#1A74EC'

return (
<td key={cell.id} style={tdStyle}>
Expand Down
126 changes: 78 additions & 48 deletions src/containers/Bolts/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,49 @@ import { useActiveWeb3React } from '~/hooks'
import Button from '~/components/Button'
import { MULTIPLIERS, QUESTS } from './quests'
import QuestBlock from './QuestBlock'
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()
const userFuulData = useStoreState((state) => state.boltsModel.userFuulData)
const userBoltsData = useStoreState((state) => state.boltsModel.userBoltsData)
const leaderboardData = useStoreState((state) => state.boltsModel.leaderboardData)
const boltsEarnedData = useStoreState((state) => state.boltsModel.boltsEarnedData)
const multipliersData = useStoreState((state) => state.boltsModel.multipliersData)

const fetchData = useStoreActions((actions) => actions.boltsModel.fetchData)

useEffect(() => {
fetchData({ account } as { account: string | null })
}, [account, fetchData])

return (
<Container>
<Section>
<Title>Bolts</Title>
<SubHeader>Welcome Vault Keepers!</SubHeader>
</Section>
<Section>
<SectionHeader>Leaderboard</SectionHeader>
<Leaderboard data={leaderboardData} userFuulData={userFuulData} />
<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>
<MessageBox>
<img src={Image} alt="" />
<Text>
Expand All @@ -45,7 +61,7 @@ const Bolts = () => {
</p>
</Text>
</MessageBox>
</Section>
</Section> */}

<Section>
<SectionHeader>Quests</SectionHeader>
Expand All @@ -56,7 +72,7 @@ const Bolts = () => {

<Section>
<SectionHeader>Multipliers</SectionHeader>
{MULTIPLIERS(boltsEarnedData).map((quest, index) => (
{MULTIPLIERS(multipliersData).map((quest, index) => (
<QuestBlock key={index} {...quest} />
))}
</Section>
Expand All @@ -79,6 +95,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;
Expand All @@ -89,46 +119,46 @@ const Container = styled.div`
color: ${(props) => props.theme.colors.accent};
`

const MessageBox = styled.div`
max-width: 800px;
margin-left: auto;
margin-right: auto;
border-radius: 4px;
background: ${(props) => props.theme.colors.gradientBg};
color: white;
padding-left: 28px;
display: flex;
align-items: center;
& h3 {
font-size: 32px;
font-weight: 700;
font-family: ${(props) => props.theme.family.headers};
margin-bottom: 10px;
line-height: 36px;
}
a {
text-decoration: underline;
color: white;
}
@media (max-width: 767px) {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-left: 0;
padding-bottom: 36px;
padding-left: 25px;
padding-right: 25px;
border-radius: 0;
}
`

const Text = styled.div`
max-width: 400px;
`
// const MessageBox = styled.div`
// max-width: 800px;
// margin-left: auto;
// margin-right: auto;
// border-radius: 4px;
// background: ${(props) => props.theme.colors.gradientBg};
// color: white;
// padding-left: 28px;
// display: flex;
// align-items: center;

// & h3 {
// font-size: 32px;
// font-weight: 700;
// font-family: ${(props) => props.theme.family.headers};
// margin-bottom: 10px;
// line-height: 36px;
// }

// a {
// text-decoration: underline;
// color: white;
// }

// @media (max-width: 767px) {
// display: flex;
// flex-direction: column;
// align-items: center;
// text-align: center;
// padding-left: 0;
// padding-bottom: 36px;
// padding-left: 25px;
// padding-right: 25px;
// border-radius: 0;
// }
// `

// const Text = styled.div`
// max-width: 400px;
// `

const Title = styled.h2`
font-size: 34px;
Expand Down Expand Up @@ -184,6 +214,6 @@ const BtnWrapper = styled.div`
}
`

const Link = styled.a``
// const Link = styled.a``

export default Bolts
Loading

0 comments on commit bc37420

Please sign in to comment.