fix: profile dropdown can't scroll to bottom

consolelabs · Feb 23, 2024 · a1785cd · a1785cd
1 parent eeec395
commit a1785cd
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 31 deletions.
diff --git a/apps/mochi-web/components/ProfileDropdown.tsx b/apps/mochi-web/components/ProfileDropdown.tsx
@@ -1,3 +1,6 @@
+import { useFetchChangelogLatest } from '~hooks/app/useFetchChangelogLatest'
+import { useRouter } from 'next/router'
+import clsx from 'clsx'
 import { isMobile } from '~utils/isMobile'
 import {
   DropdownMenu,
@@ -41,9 +44,11 @@ export default function ProfileDropdown({
   children?: ReactNode
   className?: string
 }) {
+  const { pathname } = useRouter()
   const { setIsNavOpen } = useIsNavOpenStore()
   const { isLoggedIn, profile } = useLoginWidget()
   const { activeTheme, setTheme, theme } = useTheme()
+  const { data: changelogData } = useFetchChangelogLatest()
 
   let triggerRender = null
   if (children) {
@@ -71,7 +76,14 @@ export default function ProfileDropdown({
       <DropdownMenuPortal>
         <DropdownMenuContent
           wrapperClassName="z-[60]"
-          className="overflow-y-auto w-screen flex flex-col rounded-none h-[calc(100vh-56px)] lg:m-0 lg:block lg:w-auto lg:h-auto lg:rounded-lg lg:max-h-[calc(100dvh-100px)]"
+          className={clsx(
+            'overflow-y-auto w-screen flex flex-col rounded-none lg:m-0 lg:block lg:w-auto lg:h-auto lg:rounded-lg lg:max-h-[calc(100vh-100px)]',
+            {
+              'h-[calc(100vh-112px)]':
+                pathname === ROUTES.HOME && !!changelogData,
+              'h-[calc(100vh-56px)]': pathname !== ROUTES.HOME,
+            },
+          )}
           sideOffset={9}
           collisionPadding={{
             right: 32,

diff --git a/packages/web3/connect-wallet-widget/src/connect-wallet-widget.tsx b/packages/web3/connect-wallet-widget/src/connect-wallet-widget.tsx
@@ -4,6 +4,7 @@ import {
   useEffect,
   useMemo,
   useReducer,
+  useRef,
 } from 'react'
 import {
   ExclamationTriangleOutlined,
@@ -64,8 +65,8 @@ const ConnectWalletWidget = forwardRef<
     onConnectSuccess,
     walletId,
   }) => {
+    const debounce = useRef(0)
     const connectors = useMemo(() => getProviders(dispatch), [dispatch])
-    const walletById = connectors.EVM.find((c) => c.id && c.id === walletId)
 
     const [state, setState] = useReducer<Reducer>(
       (state, action) => {
@@ -75,28 +76,42 @@ const ConnectWalletWidget = forwardRef<
         }
       },
       {
-        step: walletById ? Step.Connecting : Step.Idle,
-        wallet: walletById || null,
+        step: Step.Idle,
+        wallet: null,
         error: null,
       },
     )
 
     useEffect(() => {
-      if (state.error) return
-      state.wallet
-        // connect and sign message
-        ?.connect()
-        .then((res) => {
-          if (!res || !state.wallet) {
-            const error = 'Something went wrong'
-            setState({ error })
-            return
-          }
-          onConnectSuccess?.(state.wallet, res)
-          setState({ step: Step.Authenticated })
-        })
+      const walletById = connectors.EVM.find((c) => c.id && c.id === walletId)
+
+      setState({
+        step: walletById ? Step.Connecting : Step.Idle,
+        wallet: walletById || null,
+        error: null,
+      })
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [walletId])
+
+    useEffect(() => {
+      window.clearTimeout(debounce.current)
+      debounce.current = window.setTimeout(() => {
+        if (state.error || !state.wallet) return
+        state.wallet
+          // connect and sign message
+          .connect()
+          .then((res) => {
+            if (!res || !state.wallet) {
+              const error = 'Something went wrong'
+              setState({ error })
+              return
+            }
+            onConnectSuccess?.(state.wallet, res)
+            setState({ step: Step.Authenticated })
+          })
+      }, 100)
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state.error, state.wallet])
+    }, [state.wallet])
 
     useEffect(() => {
       if (state.step === Step.Idle) {

diff --git a/packages/web3/login-widget/src/login-content.tsx b/packages/web3/login-widget/src/login-content.tsx
@@ -102,11 +102,12 @@ export default function LoginContent({
     step: number
     direction: number
     walletId?: string
+    isInteractive: boolean
   }>({
     step: chain ? 2 : 1,
     direction: 0,
+    isInteractive: false,
   })
-  const [isInteractive, setIsInteractive] = useState(false)
 
   const handleAfterConnect = useCallback(
     async (
@@ -168,7 +169,7 @@ export default function LoginContent({
 
   useEffect(() => {
     if (state.step) {
-      setTimeout(() => setIsInteractive(true), 350)
+      setTimeout(() => setState((s) => ({ ...s, isInteractive: true })), 350)
     }
   }, [state.step])
 
@@ -215,8 +216,12 @@ export default function LoginContent({
                   variant="soft"
                   color="neutral"
                   onClick={() => {
-                    setIsInteractive(false)
-                    setState({ step: 2, direction: 1, walletId: 'app.phantom' })
+                    setState({
+                      isInteractive: false,
+                      step: 2,
+                      direction: 1,
+                      walletId: 'app.phantom',
+                    })
                   }}
                 >
                   <Typography fontWeight="md" level="h7" color="neutral">
@@ -234,8 +239,12 @@ export default function LoginContent({
                   variant="soft"
                   color="neutral"
                   onClick={() => {
-                    setIsInteractive(false)
-                    setState({ step: 2, direction: 1, walletId: 'io.metamask' })
+                    setState({
+                      isInteractive: false,
+                      step: 2,
+                      direction: 1,
+                      walletId: 'io.metamask',
+                    })
                   }}
                 >
                   <Typography fontWeight="md" level="h7" color="neutral">
@@ -249,8 +258,12 @@ export default function LoginContent({
                   variant="soft"
                   color="neutral"
                   onClick={() => {
-                    setIsInteractive(false)
-                    setState({ step: 2, direction: 1, walletId: 'me.rainbow' })
+                    setState({
+                      isInteractive: false,
+                      step: 2,
+                      direction: 1,
+                      walletId: 'me.rainbow',
+                    })
                   }}
                 >
                   <Typography fontWeight="md" level="h7" color="neutral">
@@ -263,10 +276,14 @@ export default function LoginContent({
                   className={loginIntroBodyWalletButtonClsx()}
                   variant="soft"
                   color="neutral"
-                  disabled={!isInteractive}
+                  disabled={!state.isInteractive}
                   onClick={() => {
-                    setIsInteractive(false)
-                    setState({ step: 2, direction: 1, walletId: undefined })
+                    setState({
+                      isInteractive: false,
+                      step: 2,
+                      direction: 1,
+                      walletId: undefined,
+                    })
                   }}
                 >
                   <Typography fontWeight="md" level="h7" color="neutral">
@@ -292,8 +309,12 @@ export default function LoginContent({
                 <div className={loginWalletListHeaderClsx()}>
                   <IconButton
                     onClick={() => {
-                      setIsInteractive(false)
-                      setState({ step: 1, direction: -1, walletId: undefined })
+                      setState({
+                        isInteractive: false,
+                        step: 1,
+                        direction: -1,
+                        walletId: undefined,
+                      })
                     }}
                     label="close"
                     variant="link"
@@ -319,6 +340,7 @@ export default function LoginContent({
                 onStartConnect={(wallet) =>
                   setTitle(`Connect to ${wallet.name} Wallet`)
                 }
+                onEndConnect={() => setTitle('Supported Wallets')}
                 walletId={state.walletId}
               />
               {/* {!chain && !isConnecting && ( */}