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 ()

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
ui/components/ui/account-list
account-list.jsindex.scss

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 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">

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

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