From 6d25d8db3dbb18b527ac27f71ac0746204cec2d2 Mon Sep 17 00:00:00 2001 From: Anton Cheng Date: Fri, 18 Oct 2024 15:37:51 +0800 Subject: [PATCH 1/4] fix: home page + info page mobile view strangeness --- app/home/HomePage.tsx | 12 +-- app/info/components/info.tsx | 137 +++++++++++++++++---------- app/info/components/sectionData.tsx | 141 ++++++++++++---------------- 3 files changed, 150 insertions(+), 140 deletions(-) diff --git a/app/home/HomePage.tsx b/app/home/HomePage.tsx index aa9c2801..9377d189 100644 --- a/app/home/HomePage.tsx +++ b/app/home/HomePage.tsx @@ -4,7 +4,6 @@ import React, { useState, useEffect } from 'react'; import { useAccount } from 'wagmi'; import PrimaryButton from '@/components/common/PrimaryButton'; import Footer from '@/components/layout/footer/Footer'; -import backgroundImage from '@/imgs/bg/bg.png'; import HomeHeader from './_components/HomeHeader'; export default function HomePage() { @@ -21,16 +20,7 @@ export default function HomePage() { return (
-
+
diff --git a/app/info/components/info.tsx b/app/info/components/info.tsx index bc0dffc1..63c60526 100644 --- a/app/info/components/info.tsx +++ b/app/info/components/info.tsx @@ -6,6 +6,8 @@ import { useState, useEffect, useRef } from 'react'; import Image from 'next/image'; import Header from '@/components/layout/header/Header'; import { sections } from './sectionData'; +import { FaChevronLeft, FaChevronRight } from 'react-icons/fa'; +import { Button } from '@nextui-org/react'; function InfoPage() { const [currentSection, setCurrentSection] = useState(0); @@ -30,35 +32,35 @@ function InfoPage() { setTimeout(() => setIsTransitioning(false), 500); }; - // eslint-disable-next-line react-hooks/exhaustive-deps const nextSection = () => changeSection('next'); - // eslint-disable-next-line react-hooks/exhaustive-deps const prevSection = () => changeSection('prev'); useEffect(() => { const container = containerRef.current; if (!container) return; - let lastScrollTime = 0; - const scrollCooldown = 1000; // 1 second cooldown + let lastWheelTime = 0; + const wheelThreshold = 50; // Minimum time between wheel events in ms const handleWheel = (e: WheelEvent) => { - e.preventDefault(); - const now = new Date().getTime(); - if (now - lastScrollTime < scrollCooldown) return; - - if (e.deltaY > 0) { - nextSection(); - } else { - prevSection(); + const now = Date.now(); + if (now - lastWheelTime < wheelThreshold) return; + + if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) { + e.preventDefault(); + if (e.deltaX > 0) { + nextSection(); + } else { + prevSection(); + } + lastWheelTime = now; } - lastScrollTime = now; }; const handleKeyDown = (e: KeyboardEvent) => { - if (e.key === 'ArrowDown') { + if (e.key === 'ArrowRight') { nextSection(); - } else if (e.key === 'ArrowUp') { + } else if (e.key === 'ArrowLeft') { prevSection(); } }; @@ -77,53 +79,92 @@ function InfoPage() { } return ( -
+
-
-
+
+
- {sections.map((section) => ( + {sections.map((section, index) => (
-
-

{section.mainTitle}

-

{section.subTitle}

-
-
- {section.mainTitle} +
+

{section.mainTitle}

+

{section.subTitle}

+
+ {index === sections.length - 1 ? ( + // Special case for the logo in the last section +
+ {section.mainTitle} +
+ ) : ( + // For all other sections +
+ {section.mainTitle} +
+ )} +
+ {section.content}
-
{section.content}
))}
+
+ + +
+
-
); } diff --git a/app/info/components/sectionData.tsx b/app/info/components/sectionData.tsx index 947c47a4..a823db61 100644 --- a/app/info/components/sectionData.tsx +++ b/app/info/components/sectionData.tsx @@ -4,6 +4,17 @@ import monarchImage from '../../../src/imgs/intro/direct-supply.png'; import morphoImage from '../../../src/imgs/intro/morpho.png'; import vaultsImage from '../../../src/imgs/intro/vaults.png'; +const Card = ({ title, items }: { title: string; items: string[] }) => ( +
+

{title}

+
    + {items.map((item, index) => ( +
  • {item}
    • + ))} +
+
+); + export const sections = [ { mainTitle: 'Introducing Monarch', @@ -14,27 +25,15 @@ export const sections = [

Morpho Blue is the core protocol of the Morpho ecosystem. It's a decentralized, immutable, and neutral lending protocol that enables the - creation of lending markets with any assets in a truly decentralized manner. As a{' '} - - hyperstructure - - , Morpho Blue embodies unstoppable, free, and neutral DeFi primitives. + creation of lending markets with any assets in a truly decentralized manner.

- Built with a minimalistic and unopinionated approach, Morpho Blue is the foundation upon - which the entire Morpho ecosystem is constructed. Its efficiency and security have made it - highly regarded in the DeFi community, positioning it as the most crucial element in - Morpho's architecture. + Built with a minimalistic approach, Morpho Blue is the foundation of the entire Morpho + ecosystem. Its efficiency and security have made it highly regarded in the DeFi community.

Monarch serves as an advanced interface for Morpho Blue, providing users with a gateway to - interact with this powerful core protocol. As we explore Morpho's ecosystem, understanding - Morpho Blue is essential, as it underpins all other components and functionalities. + interact with this powerful core protocol.

), @@ -45,38 +44,29 @@ export const sections = [ image: vaultsImage, content: ( <> -

+

The Morpho Lab team introduces Morpho Vaults, intermediate contracts managed by curators to simplify risk management for normal - suppliers. This is the recommended way to interact with Morpho Blue, as it offers a more - user-friendly experience and simplified risk management. -

-

- Advantages: -

    -
  • Simplified user experience, managed risk exposure
    • -
  • Easier to reuse the supplied liquidity as ERC4626 tokens.
    • -
  • - {' '} - Learn more about{' '} - - Benefit of Morpho Vaults - {' '} -
    • -
-

-

- Limitations: -

    -
  • Less control over lending parameter changes
    • -
  • Limited customization options
    • -
  • Potential performance fees
    • -
+ suppliers.

+
+ + +
), }, @@ -86,35 +76,29 @@ export const sections = [ image: monarchImage, content: ( <> -

+

Monarch empowers advanced users by enabling{' '} direct lending to Morpho Blue markets, bypassing the - need for vaults. This approach offers greater control and customization over your lending - positions. -

-

- Benefits: -

    -
  • Full control over lending parameters
    • -
  • Customizable risk management
    • -
  • No performance fees
    • -
-

-

- Considerations: -

    -
  • Deep understanding of market risks needed
    • -
  • Currently requires manual rebalancing
    • -
  • - {' '} - Learn more about the risks{' '} - - {' '} - here{' '} - {' '} -
    • -
+ need for vaults.

+
+ + +
), }, @@ -122,33 +106,28 @@ export const sections = [ mainTitle: 'The Future of Monarch', subTitle: 'Automation and Beyond', image: logoImage, - customHeight: 200, content: ( <>

Coming Soon: Monarch Auto
- We're developing "Monarch Auto", a feature that will help automate the rebalancing process - with your custom strategies. This will combine the benefits of direct market access with - automated management. + We're developing "Monarch Auto" to automate the rebalancing process with custom strategies.

What's in Progress:

  • Automated rebalancing strategies
  • Enhanced risk management tools
    • -
  • Improved user interface and experience
    • +
  • Improved user interface

We Value Your Feedback!
- Your input is crucial in shaping the future of Monarch. We encourage you to share your - thoughts, suggestions, and any issues you encounter. Please send your feedback to + Your input is crucial in shaping Monarch's future. Share your thoughts in our{' '} - {' '} - our telegram chat here{' '} - + Telegram chat + .

), From 4252a035c2a36db22166af490bf278213aef9567 Mon Sep 17 00:00:00 2001 From: Anton Cheng Date: Fri, 18 Oct 2024 15:48:16 +0800 Subject: [PATCH 2/4] fix: homepage and lint --- app/home/HomePage.tsx | 22 ++++---- app/info/components/info.tsx | 32 ++++++------ app/info/components/sectionData.tsx | 52 ++++++++++--------- src/components/FeedInfo/OracleFeedInfo.tsx | 31 ++++++----- src/components/OracleVendorBadge.tsx | 17 +++--- src/components/layout/header/NavbarMobile.tsx | 33 ++++++------ src/utils/oracle.ts | 17 +++--- 7 files changed, 106 insertions(+), 98 deletions(-) diff --git a/app/home/HomePage.tsx b/app/home/HomePage.tsx index 9377d189..eb64cc99 100644 --- a/app/home/HomePage.tsx +++ b/app/home/HomePage.tsx @@ -23,26 +23,30 @@ export default function HomePage() {
-
-
-

- Direct access to{' '} +
+
+ {' '} + {/* Fixed height container */} +

+ Direct access to{' '} {isMorphoBlue ? '{Morpho Blue}' : 'the most decentralized lending protocol.'} - {' '} +

-
- +
+ Why Monarch - View Portfolio + + View Portfolio +