weird scroll behavior (#645)

rainbow-me · Jun 15, 2023 · ce340e1 · ce340e1
1 parent 5e77e10
commit ce340e1
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 66 deletions.
diff --git 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}
       >
         <Columns alignVertical="center" space="4px">
-          {includeAvatar && (
+          {includeAvatar && address && (
             <Column width="content">
               <Box paddingRight="2px">
-                <Avatar imageUrl={ensAvatar || ''} size={16} />
+                <WalletAvatar address={address} size={16} emojiSize="10pt" />
               </Box>
             </Column>
           )}

diff --git 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
@@ -136,12 +136,11 @@ export function Activity() {
         >
           {activityRowVirtualizer.getVirtualItems().map((virtualItem) => {
             const { index, start } = virtualItem;
-            const rowData = listData?.[index];
+            const rowData = listData[index];
             return (
               <Box
                 key={index}
                 data-index={index}
-                ref={activityRowVirtualizer.measureElement}
                 style={{
                   position: 'absolute',
                   top: 0,

diff --git a/src/entries/popup/pages/home/Tokens.tsx b/src/entries/popup/pages/home/Tokens.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { i18n } from '~/core/languages';
 import { supportedCurrencies } from '~/core/references';
@@ -98,7 +98,7 @@ export function Tokens() {
         >
           {assetsRowVirtualizer.getVirtualItems().map((virtualItem) => {
             const { index } = virtualItem;
-            const rowData = assets?.[index];
+            const rowData = assets[index];
             return (
               <Box
                 key={index}

diff --git a/src/entries/popup/pages/home/index.tsx b/src/entries/popup/pages/home/index.tsx
@@ -1,12 +1,12 @@
 import {
   AnimatePresence,
-  MotionValue,
   motion,
+  useMotionValueEvent,
   useScroll,
   useSpring,
   useTransform,
 } from 'framer-motion';
-import React, { useCallback, useEffect, useState } from 'react';
+import { PropsWithChildren, useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useAccount } from 'wagmi';
 
@@ -74,22 +74,6 @@ export function Home() {
     setActiveTab(tab);
   }, []);
 
-  const { scrollY } = useScroll();
-  const smoothScrollY = useSpring(scrollY, {
-    damping: 50,
-    stiffness: 350,
-  });
-  const scrollYTransform = useTransform(smoothScrollY, [1, 1000], [0, 200]);
-  const [scrollAtTop, setScrollAtTop] = useState(true);
-
-  useEffect(() => {
-    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() {
             <Header />
             <TabBar activeTab={activeTab} setActiveTab={onSelectTab} />
             <Separator color="separatorTertiary" strokeWeight="1px" />
-            <Content scrollSpring={scrollYTransform} shouldSpring={scrollAtTop}>
+            <Content>
               {activeTab === 'tokens' && <Tokens />}
               {activeTab === 'activity' && <Activity />}
             </Content>
@@ -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 (
     <StickyHeader
@@ -160,7 +149,7 @@ function TopNav() {
         }
         titleComponent={
           <AnimatePresence>
-            {scrollY.get() && (
+            {isCollapsed && (
               <Box
                 key="top-nav-account-name"
                 as={motion.div}
@@ -194,24 +183,23 @@ function TabBar({
   );
 }
 
-function Content({
-  children,
-  scrollSpring,
-  shouldSpring,
-}: {
-  children: React.ReactNode;
-  scrollSpring?: MotionValue<number>;
-  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 (
     <Box
       background="surfacePrimaryElevated"
-      style={{
-        flex: 1,
-        position: 'relative',
-        contentVisibility: 'auto',
-      }}
+      style={{ flex: 1, position: 'relative', contentVisibility: 'auto' }}
     >
       {/** spring transformY to imitate scroll bounce*/}
       <Box height="full" as={motion.div} style={{ y }}>