Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bolts multiplier update #604

Merged
merged 7 commits into from
Jul 4, 2024
Merged

Bolts multiplier update #604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a07bba3
Rename GenesisNFV
pi0neerpat Jun 29, 2024
431c261
scaffold multiplier
pi0neerpat Jul 1, 2024
d8705d2
connect-src update
pi0neerpat Jul 2, 2024
52e5e48
update quests
pi0neerpat Jul 3, 2024
afda9ba
update description
pi0neerpat Jul 4, 2024
00e4673
display multiplier
pi0neerpat Jul 4, 2024
e0f28aa
lint fix
pi0neerpat Jul 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/index.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading