From 875bdbfe49628a27d341994231c775e9af4f8177 Mon Sep 17 00:00:00 2001 From: vrtnd Date: Thu, 18 Jul 2024 17:14:03 +0300 Subject: [PATCH 1/3] lazy load for tabs --- src/components/Tabs/index.tsx | 2 +- src/pages/index.tsx | 43 ++++++++++++++++++++++++++++------- 2 files changed, 36 insertions(+), 9 deletions(-) diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx index 45db05cd8..3eba222c1 100644 --- a/src/components/Tabs/index.tsx +++ b/src/components/Tabs/index.tsx @@ -159,7 +159,7 @@ const Tabs = ({ tabs = [] }) => { - {tabs.find((tab) => tab.id === activeTab)?.content} + {tabs.find((tab) => tab.id === activeTab)?.content()} ); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 80965bce1..81cb74240 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,8 +1,5 @@ -import * as React from 'react'; -import { AggregatorContainer } from '~/components/Aggregator'; -import Lending from '~/components/Lending'; +import { Suspense, lazy } from 'react'; import Tabs from '~/components/Tabs'; -import Yields from '~/components/Yields'; import Layout from '~/layout'; import { getSandwichList } from '~/props/getSandwichList'; import { getTokenList } from '~/props/getTokenList'; @@ -10,6 +7,12 @@ import { getTokensMaps } from '~/props/getTokensMaps'; import { useLendingProps } from '~/queries/useLendingProps'; import { useYieldProps } from '~/queries/useYieldProps'; +const AggregatorContainer = lazy(() => + import('~/components/Aggregator').then((module) => ({ default: module.AggregatorContainer })) +); +const Lending = lazy(() => import('~/components/Lending')); +const Yields = lazy(() => import('~/components/Yields')); + export async function getStaticProps() { const tokenList = await getTokenList(); const sandwichList = await getSandwichList(); @@ -26,12 +29,36 @@ export async function getStaticProps() { } export default function Aggregator(props) { - const yeildProps = useYieldProps(); + const yieldProps = useYieldProps(); const lendingProps = useLendingProps(); const tabData = [ - { id: 'swap', name: 'Swap', content: }, - { id: 'earn', name: 'Earn', content: }, - { id: 'borrow', name: 'Borrow', content: } + { + id: 'swap', + name: 'Swap', + content: () => ( + Loading...}> + + + ) + }, + { + id: 'earn', + name: 'Earn', + content: () => ( + Loading...}> + + + ) + }, + { + id: 'borrow', + name: 'Borrow', + content: () => ( + Loading...}> + + + ) + } ]; return ( From 2ff168563c57c4ea10afb9cd231d03f75123fca4 Mon Sep 17 00:00:00 2001 From: vrtnd Date: Thu, 18 Jul 2024 17:36:05 +0300 Subject: [PATCH 2/3] separate styles --- src/components/Lending/index.tsx | 28 ++++++++++++++++++++++++++-- src/pages/index.tsx | 7 ++++--- 2 files changed, 30 insertions(+), 5 deletions(-) diff --git a/src/components/Lending/index.tsx b/src/components/Lending/index.tsx index b89a9fee1..6e542e8b9 100644 --- a/src/components/Lending/index.tsx +++ b/src/components/Lending/index.tsx @@ -1,9 +1,9 @@ import React, { useState, useRef, useMemo, useEffect } from 'react'; import { useVirtualizer } from '@tanstack/react-virtual'; import styled from 'styled-components'; -import { Box, Flex, Tooltip, Text, Button, Badge, Link, Switch } from '@chakra-ui/react'; +import { Box, Flex, Tooltip, Text, Button, Badge, Link } from '@chakra-ui/react'; import ReactSelect from '../MultiSelect'; -import { ColumnHeader, RowContainer, YieldsBody, YieldsCell, YieldsContainer, YieldsWrapper } from '../Yields'; +import { ColumnHeader, RowContainer, YieldsBody, YieldsCell, YieldsContainer } from '../Yields'; import NotFound from './NotFound'; import { formatAmountString } from '~/utils/formatAmount'; import { useQuery } from '@tanstack/react-query'; @@ -671,6 +671,30 @@ const Container = styled.div` } `; +const YieldsWrapper = styled.div` + min-height: 560px; + border: 1px solid #2f333c; + align-self: center; + z-index: 1; + position: relative; + padding: 16px; + margin: 0 auto; + box-shadow: 0px 0px 20px rgba(26, 26, 26, 0.5); + border-radius: 16px; + text-align: left; + + @media screen and (min-width: ${({ theme }) => theme.bpLg}) { + position: sticky; + top: 24px; + align-self: flex-start; + } + + @media screen and (max-width: ${({ theme }) => theme.bpMed}) { + box-shadow: none; + max-width: 100%; + } +`; + const LeftWrapper = styled(YieldsWrapper)` width: 550px; max-width: 550px; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 81cb74240..3996d83ca 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,4 +1,5 @@ import { Suspense, lazy } from 'react'; +import Loader from '~/components/Aggregator/Loader'; import Tabs from '~/components/Tabs'; import Layout from '~/layout'; import { getSandwichList } from '~/props/getSandwichList'; @@ -36,7 +37,7 @@ export default function Aggregator(props) { id: 'swap', name: 'Swap', content: () => ( - Loading...}> + }> ) @@ -45,7 +46,7 @@ export default function Aggregator(props) { id: 'earn', name: 'Earn', content: () => ( - Loading...}> + }> ) @@ -54,7 +55,7 @@ export default function Aggregator(props) { id: 'borrow', name: 'Borrow', content: () => ( - Loading...}> + }> ) From 9c5e39afc1dc57f186336c2ac50eeb56724cc7be Mon Sep 17 00:00:00 2001 From: vrtnd Date: Thu, 18 Jul 2024 17:47:35 +0300 Subject: [PATCH 3/3] fix --- src/pages/index.tsx | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3996d83ca..90cd0f533 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -7,10 +7,8 @@ import { getTokenList } from '~/props/getTokenList'; import { getTokensMaps } from '~/props/getTokensMaps'; import { useLendingProps } from '~/queries/useLendingProps'; import { useYieldProps } from '~/queries/useYieldProps'; +import { AggregatorContainer } from '~/components/Aggregator'; -const AggregatorContainer = lazy(() => - import('~/components/Aggregator').then((module) => ({ default: module.AggregatorContainer })) -); const Lending = lazy(() => import('~/components/Lending')); const Yields = lazy(() => import('~/components/Yields')); @@ -36,11 +34,7 @@ export default function Aggregator(props) { { id: 'swap', name: 'Swap', - content: () => ( - }> - - - ) + content: () => }, { id: 'earn',