m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Ensure pre-selected account on connect screen is visible in list (#13621)

Browse Source 
* Ensure pre-selected account on connect screen is visible in list

* adding smooth scroll behavior

* Change conditional
This commit is contained in:
ryanml 2022-02-16 11:00:44 -07:00 committed by GitHub
parent b3f90f7031
commit b954ca447d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/components/ui/account-list/account-list.js
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { useLayoutEffect, useRef } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import classnames from 'classnames';
import { useI18nContext } from '../../../hooks/useI18nContext'; import { useI18nContext } from '../../../hooks/useI18nContext';
@ -20,6 +20,11 @@ const AccountList = ({
handleAccountClick, handleAccountClick,
}) => { }) => {
const t = useI18nContext(); const t = useI18nContext();
const selectedAccountScrollRef = useRef(null);
useLayoutEffect(() => {
selectedAccountScrollRef.current?.scrollIntoView({ behavior: 'smooth' });
}, []);
const Header = () => { const Header = () => {
let checked; let checked;
@ -76,16 +81,18 @@ const AccountList = ({
<div className="choose-account-list__list"> <div className="choose-account-list__list">
{accounts.map((account, index) => { {accounts.map((account, index) => {
const { address, addressLabel, balance } = account; const { address, addressLabel, balance } = account;
const isSelectedAccount = selectedAccounts.has(address);
return ( return (
<div <div
key={`choose-account-list-${index}`} key={`choose-account-list-${index}`}
onClick={() => handleAccountClick(address)} onClick={() => handleAccountClick(address)}
className="choose-account-list__account" className="choose-account-list__account"
ref={isSelectedAccount ? selectedAccountScrollRef : null}
> >
<div className="choose-account-list__account-info-wrapper"> <div className="choose-account-list__account-info-wrapper">
<CheckBox <CheckBox
className="choose-account-list__list-check-box" className="choose-account-list__list-check-box"
checked={selectedAccounts.has(address)} checked={isSelectedAccount}
/> />
<Identicon diameter={34} address={address} /> <Identicon diameter={34} address={address} />
<div className="choose-account-list__account__info"> <div className="choose-account-list__account__info">

1
ui/components/ui/account-list/index.scss
View File

@ -2,7 +2,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%;
align-items: center; align-items: center;
&__header--one-item, &__header--one-item,