From ce340e19dc8b627511e3944dac5656a6c0171897 Mon Sep 17 00:00:00 2001 From: gregs Date: Thu, 15 Jun 2023 09:43:40 -0300 Subject: [PATCH] weird scroll behavior (#645) --- .../components/AccountName/AccountName.tsx | 10 ++-- src/entries/popup/hooks/useAllTransactions.ts | 56 ++++++++++------- src/entries/popup/pages/home/Activity.tsx | 3 +- src/entries/popup/pages/home/Tokens.tsx | 4 +- src/entries/popup/pages/home/index.tsx | 60 ++++++++----------- 5 files changed, 67 insertions(+), 66 deletions(-) diff --git a/src/entries/popup/components/AccountName/AccountName.tsx b/src/entries/popup/components/AccountName/AccountName.tsx index 07db3fa578..e4b8c2e08e 100644 --- a/src/entries/popup/components/AccountName/AccountName.tsx +++ b/src/entries/popup/components/AccountName/AccountName.tsx @@ -1,9 +1,8 @@ /* eslint-disable react/jsx-props-no-spreading */ import { motion } from 'framer-motion'; -import React, { useCallback, useState } from 'react'; +import { useCallback, useState } from 'react'; import { useAccount } from 'wagmi'; -import { useENSAvatar } from '~/core/resources/metadata/ensAvatar'; import { Box, Column, Columns, Symbol, TextOverflow } from '~/design-system'; import { Lens } from '~/design-system/components/Lens/Lens'; import { transformScales } from '~/design-system/styles/designTokens'; @@ -12,7 +11,7 @@ import { useRainbowNavigate } from '../../hooks/useRainbowNavigate'; import { useWalletName } from '../../hooks/useWalletName'; import { ROUTES } from '../../urls'; import { tabIndexes } from '../../utils/tabIndexes'; -import { Avatar } from '../Avatar/Avatar'; +import { WalletAvatar } from '../WalletAvatar/WalletAvatar'; type AccountNameProps = { includeAvatar?: boolean; @@ -34,7 +33,6 @@ export function AccountName({ }: AccountNameProps) { const { address } = useAccount(); const { displayName } = useWalletName({ address: address || '0x' }); - const { data: ensAvatar } = useENSAvatar({ addressOrName: address }); const navigate = useRainbowNavigate(); const [hover, setHover] = useState(false); @@ -66,10 +64,10 @@ export function AccountName({ {...chevronProps} > - {includeAvatar && ( + {includeAvatar && address && ( - + )} diff --git a/src/entries/popup/hooks/useAllTransactions.ts b/src/entries/popup/hooks/useAllTransactions.ts index ca203bdb3b..b277929405 100644 --- a/src/entries/popup/hooks/useAllTransactions.ts +++ b/src/entries/popup/hooks/useAllTransactions.ts @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useMemo, useState } from 'react'; import { Address, useNetwork } from 'wagmi'; import { SupportedCurrencyKey } from '~/core/references'; @@ -131,25 +131,41 @@ export function useAllTransactions({ const pendingTransactions: RainbowTransaction[] = getPendingTransactions({ address, }); - const allTransactions = [ - ...pendingTransactions, - ...(confirmedTransactions || []), - ...(confirmedArbitrumTransactions || []), - ...(confirmedBscTransactions || []), - ...(confirmedOptimismTransactions || []), - ...(confirmedPolygonTransactions || []), - ]; - return { - allTransactions, - allTransactionsByDate: selectTransactionsByDate(allTransactions), - isInitialLoading: - confirmedInitialLoading || - arbitrumInitialLoading || - bscInitialLoading || - optimismInitialLoading || - polygonInitialLoading || - manuallyRefetching, - }; + const allTransactions = useMemo( + () => [ + ...pendingTransactions, + ...(confirmedTransactions || []), + ...(confirmedArbitrumTransactions || []), + ...(confirmedBscTransactions || []), + ...(confirmedOptimismTransactions || []), + ...(confirmedPolygonTransactions || []), + ], + [ + confirmedArbitrumTransactions, + confirmedBscTransactions, + confirmedOptimismTransactions, + confirmedPolygonTransactions, + confirmedTransactions, + pendingTransactions, + ], + ); + + const isInitialLoading = + confirmedInitialLoading || + arbitrumInitialLoading || + bscInitialLoading || + optimismInitialLoading || + polygonInitialLoading || + manuallyRefetching; + + return useMemo( + () => ({ + allTransactions, + allTransactionsByDate: selectTransactionsByDate(allTransactions), + isInitialLoading, + }), + [allTransactions, isInitialLoading], + ); } function watchConfirmedTransactions( diff --git a/src/entries/popup/pages/home/Activity.tsx b/src/entries/popup/pages/home/Activity.tsx index f6e9217dbc..2651dc1d3b 100644 --- a/src/entries/popup/pages/home/Activity.tsx +++ b/src/entries/popup/pages/home/Activity.tsx @@ -136,12 +136,11 @@ export function Activity() { > {activityRowVirtualizer.getVirtualItems().map((virtualItem) => { const { index, start } = virtualItem; - const rowData = listData?.[index]; + const rowData = listData[index]; return ( {assetsRowVirtualizer.getVirtualItems().map((virtualItem) => { const { index } = virtualItem; - const rowData = assets?.[index]; + const rowData = assets[index]; return ( { - return scrollY.onChange((position) => { - const isAtTop = position === 0; - if (isAtTop && !scrollAtTop) setScrollAtTop(true); - else if (!isAtTop && scrollAtTop) setScrollAtTop(false); - }); - }, [scrollAtTop, scrollY]); - useEffect(() => { analytics.track(event.walletViewed); }, []); @@ -126,7 +110,7 @@ export function Home() {
- + {activeTab === 'tokens' && } {activeTab === 'activity' && } @@ -139,7 +123,12 @@ export function Home() { } function TopNav() { - const { scrollY } = useScroll({ offset: ['0px', '64px'] }); + const { scrollY } = useScroll({ offset: ['0px', TOP_NAV_HEIGHT] }); + const [isCollapsed, setIsCollapsed] = useState(false); + useMotionValueEvent(scrollY, 'change', () => { + if (scrollY.get() === 0) setIsCollapsed(false); + if (scrollY.getPrevious() === 0) setIsCollapsed(true); + }); return ( - {scrollY.get() && ( + {isCollapsed && ( ; - shouldSpring: boolean; -}) { - const y = shouldSpring ? scrollSpring : 0; +function Content({ children }: PropsWithChildren) { + const { scrollY } = useScroll({ axis: 'y' }); + const smoothScrollY = useSpring(scrollY, { damping: 50, stiffness: 350 }); + const scrollYTransform = useTransform( + smoothScrollY, + [0, 1000], + [0, COLLAPSED_HEADER_TOP_OFFSET], + ); + + const [isTop, setIsTop] = useState(!!scrollY.get()); + useMotionValueEvent(scrollY, 'change', (y) => setIsTop(y < 1)); + const y = isTop ? scrollYTransform : 0; + return ( {/** spring transformY to imitate scroll bounce*/}