From a1785cd5e6262d01e4dbec7c52169e5fc931b6cb Mon Sep 17 00:00:00 2001 From: tuanddd Date: Fri, 23 Feb 2024 14:33:41 +0700 Subject: [PATCH] fix: profile dropdown can't scroll to bottom --- apps/mochi-web/components/ProfileDropdown.tsx | 14 +++++- .../src/connect-wallet-widget.tsx | 49 ++++++++++++------- .../web3/login-widget/src/login-content.tsx | 48 +++++++++++++----- 3 files changed, 80 insertions(+), 31 deletions(-) diff --git a/apps/mochi-web/components/ProfileDropdown.tsx b/apps/mochi-web/components/ProfileDropdown.tsx index 1acceed08..f2e62ad45 100644 --- 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({ { + 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( (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 index 952b5ff13..7676e617f 100644 --- 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', + }) }} > @@ -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', + }) }} > @@ -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', + }) }} > @@ -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, + }) }} > @@ -292,8 +309,12 @@ export default function LoginContent({
{ - 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 && ( */}