blockworks-foundation
/
mango-web
mirror of https://github.com/blockworks-foundation/mango-web.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

meeting feedback

This commit is contained in:
saml33 2023-11-29 13:37:35 +11:00
parent dc2fdbb68f
commit 9cf0099f33
7 changed files with 127 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
components/home/HomePage.tsx
View File

@ -71,11 +71,11 @@ const HomePage = () => {
queryFn: fetchAppData,
})
const topSection = useRef()
const callouts = useRef()
const swapPanel = useRef()
const coreFeatures = useRef()
const build = useRef()
const topSection = useRef<HTMLDivElement>(null)
const callouts = useRef<HTMLDivElement>(null)
const swapPanel = useRef<HTMLDivElement>(null)
const coreFeatures = useRef<HTMLDivElement>(null)
const build = useRef<HTMLDivElement>(null)
const tabsWithCount: [string, number][] = useMemo(() => {
const perpMarketsNumber =
@ -93,7 +93,11 @@ const HomePage = () => {
if (!marketData?.spotData || !Object.keys(marketData?.spotData)?.length)
return []
const data = Object.entries(marketData.spotData)
.sort((a, b) => b[1][0].quote_volume_24h - a[1][0].quote_volume_24h)
.sort((a, b) => {
const aVolume = a[1][0]?.quote_volume_24h || 0
const bVolume = b[1][0]?.quote_volume_24h || 0
return bVolume - aVolume
})
.map(([key, value]) => {
const data = value[0]
return { name: key, data }
@ -105,7 +109,11 @@ const HomePage = () => {
if (!marketData?.perpData || !Object.keys(marketData?.perpData)?.length)
return []
const data = Object.entries(marketData.perpData)
.sort((a, b) => b[1][0].quote_volume_24h - a[1][0].quote_volume_24h)
.sort((a, b) => {
const aVolume = a[1][0]?.quote_volume_24h || 0
const bVolume = b[1][0]?.quote_volume_24h || 0
return bVolume - aVolume
})
.map(([key, value]) => {
const data = value[0]
return { name: key, data }
@ -135,95 +143,104 @@ const HomePage = () => {
useLayoutEffect(() => {
const ctx = gsap.context((self) => {
const boxes = self.selector('.highlight-features')
boxes.forEach((box) => {
gsap.to(box, {
y: -40,
ease: 'power3.inOut',
scrollTrigger: {
trigger: box,
end: 'top 40%',
scrub: true,
},
if (self?.selector) {
const boxes = self.selector('.highlight-features')
boxes.forEach((box) => {
gsap.to(box, {
opacity: 1,
y: -40,
ease: 'power3.inOut',
scrollTrigger: {
trigger: box,
end: 'top 40%',
scrub: true,
},
})
})
})
}
}, callouts) // <- Scope!
return () => ctx.revert() // <- Cleanup!
}, [])
useLayoutEffect(() => {
const ctx = gsap.context((self) => {
const icons = self.selector('.token-icon')
icons.forEach((icon, i) => {
gsap.to(icon, {
y: i % 2 ? 100 : -100,
rotateZ: i % 2 ? 45 : -45,
scrollTrigger: {
trigger: icon,
scrub: true,
},
})
})
gsap
.timeline({
scrollTrigger: {
trigger: '#swap-desktop',
scrub: true,
},
})
.from('#swap-desktop', {
rotateX: -45,
if (self?.selector) {
const icons = self.selector('.token-icon')
icons.forEach((icon, i) => {
gsap.to(icon, {
y: i % 2 ? 100 : -100,
rotateZ: i % 2 ? 45 : -45,
scrollTrigger: {
trigger: icon,
scrub: true,
},
})
})
gsap
.timeline({
scrollTrigger: {
trigger: '#swap-desktop',
scrub: true,
},
})
.from('#swap-desktop', {
rotateX: -45,
})
}
}, swapPanel) // <- Scope!
return () => ctx.revert() // <- Cleanup!
}, [])
useLayoutEffect(() => {
const ctx = gsap.context((self) => {
const features = self.selector('.core-feature')
const text = self.selector('.core-text')
const image = self.selector('.core-image')
features.forEach((feature, i) => {
gsap.from(text[i], {
opacity: 0.4,
y: 60,
ease: 'power3.inOut',
scrollTrigger: {
start: 'top 60%',
end: 'top 20%',
trigger: feature,
scrub: true,
},
if (self?.selector) {
const features = self.selector('.core-feature')
const text = self.selector('.core-text')
const image = self.selector('.core-image')
features.forEach((feature, i) => {
gsap.from(text[i], {
opacity: 0.4,
y: 60,
ease: 'power3.inOut',
scrollTrigger: {
start: 'top 60%',
end: 'top 20%',
trigger: feature,
scrub: true,
},
})
gsap.from(image[i], {
opacity: 0.4,
scale: 0.9,
ease: 'power3.inOut',
scrollTrigger: {
start: 'top 60%',
end: 'top 20%',
trigger: feature,
scrub: true,
},
})
})
gsap.from(image[i], {
opacity: 0.4,
scale: 0.9,
ease: 'power3.inOut',
scrollTrigger: {
start: 'top 60%',
end: 'top 20%',
trigger: feature,
scrub: true,
},
})
})
}
}, coreFeatures) // <- Scope!
return () => ctx.revert() // <- Cleanup!
}, [])
useLayoutEffect(() => {
const ctx = gsap.context((self) => {
const spheres = self.selector('.sphere')
spheres.forEach((sphere, i) => {
gsap.to(sphere, {
y: i % 2 ? -150 : 100,
scrollTrigger: {
trigger: sphere,
start: i % 2 ? 'bottom bottom' : 'center center',
scrub: true,
},
if (self?.selector) {
const spheres = self.selector('.sphere')
spheres.forEach((sphere, i) => {
gsap.to(sphere, {
y: i % 2 ? -150 : 100,
scrollTrigger: {
trigger: sphere,
start: i % 2 ? 'bottom bottom' : 'center center',
scrub: true,
},
})
})
})
}
}, topSection) // <- Scope!
return () => ctx.revert() // <- Cleanup!
}, [])

17
components/navigation/DesktopNavigation.tsx
View File

@ -131,13 +131,24 @@ const NavigationItem = ({
const [isOpen, setIsOpen] = useState(false)
const [isTouchInput, setIsTouchInput] = useState(false)
const [hasClicked, setHasClicked] = useState(false)
const button = useRef(null)
const button = useRef<HTMLButtonElement>(null)
useLayoutEffect(() => {
if (isOpen && !isOverButton && !isOverList && !isTouchInput) {
if (
isOpen &&
!isOverButton &&
!isOverList &&
!isTouchInput &&
button?.current
) {
button.current.click()
setIsOpen(false)
} else if (!isOpen && (isOverButton || isOverList) && !isTouchInput) {
} else if (
!isOpen &&
(isOverButton || isOverList) &&
!isTouchInput &&
button?.current
) {
button.current.click()
setIsOpen(true)
}

6
components/rewards/RewardsPage.tsx
View File

@ -130,12 +130,12 @@ const RewardsPage = () => {
className="bg-[url('/images/mango-mints/mints-bg.jpeg')] bg-cover bg-no-repeat border-t border-th-bkg-2 py-20"
>
<div className="flex flex-col items-center">
<Image
{/* <Image
src="/images/mango-mints/chest.png"
height={96}
width={96}
alt="Chest"
/>
/> */}
<h1 className="mt-6 text-center lg:text-left font-rewards md:text-8xl">
Trade. Win. Repeat.
</h1>
@ -307,7 +307,7 @@ const RewardsPage = () => {
</div>
<LandingPageButton
className="mt-12 mx-auto"
linkText="Ditch your CEX"
linkText="Create your Account"
path="https://app.mango.markets"
/>
</div>

5
hooks/useMarketData.ts
View File

@ -1,5 +1,6 @@
import { useQuery } from '@tanstack/react-query'
import { MANGO_DATA_API_URL } from '../utils/constants'
import { MarketData } from '../types'
const fetchMarketData = async () => {
const promises = [
@ -8,8 +9,8 @@ const fetchMarketData = async () => {
]
try {
const data = await Promise.all(promises)
const perpData = await data[0].json()
const spotData = await data[1].json()
const perpData: MarketData = await data[0].json()
const spotData: MarketData = await data[1].json()
return { perpData, spotData }
} catch (e) {
console.error('Failed to fetch market data', e)

1
next-env.d.ts vendored
View File

@ -1,5 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
/// <reference types="next/navigation-types/compat/navigation" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

16
tsconfig.json
View File

@ -16,8 +16,20 @@
"incremental": true,
"paths": {
"react": ["./node_modules/@types/react"]
}
},
"plugins": [
{
"name": "next"
}
],
"strictNullChecks": true
},
"exclude": ["node_modules", ".next", "out"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"]
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"**/*.js",
".next/types/**/*.ts"
]
}

2
tsconfig.tsbuildinfo
View File

File diff suppressed because one or more lines are too long