mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Ensure pre-selected account on connect screen is visible in list (#13621)
* Ensure pre-selected account on connect screen is visible in list * adding smooth scroll behavior * Change conditional
This commit is contained in:
parent
b3f90f7031
commit
b954ca447d
@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { useLayoutEffect, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
import { useI18nContext } from '../../../hooks/useI18nContext';
|
||||
@ -20,6 +20,11 @@ const AccountList = ({
|
||||
handleAccountClick,
|
||||
}) => {
|
||||
const t = useI18nContext();
|
||||
const selectedAccountScrollRef = useRef(null);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
selectedAccountScrollRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, []);
|
||||
|
||||
const Header = () => {
|
||||
let checked;
|
||||
@ -76,16 +81,18 @@ const AccountList = ({
|
||||
<div className="choose-account-list__list">
|
||||
{accounts.map((account, index) => {
|
||||
const { address, addressLabel, balance } = account;
|
||||
const isSelectedAccount = selectedAccounts.has(address);
|
||||
return (
|
||||
<div
|
||||
key={`choose-account-list-${index}`}
|
||||
onClick={() => handleAccountClick(address)}
|
||||
className="choose-account-list__account"
|
||||
ref={isSelectedAccount ? selectedAccountScrollRef : null}
|
||||
>
|
||||
<div className="choose-account-list__account-info-wrapper">
|
||||
<CheckBox
|
||||
className="choose-account-list__list-check-box"
|
||||
checked={selectedAccounts.has(address)}
|
||||
checked={isSelectedAccount}
|
||||
/>
|
||||
<Identicon diameter={34} address={address} />
|
||||
<div className="choose-account-list__account__info">
|
||||
|
@ -2,7 +2,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
|
||||
&__header--one-item,
|
||||
|
Loading…
Reference in New Issue
Block a user