TypeError: Cannot read properties of undefined (reading 'scrollTo')

[sentry-io]

Sentry Issue: METAMASK-XC3G

TypeError: Cannot read properties of undefined (reading 'scrollTo')
  at <anonymous> (ui/components/ui/unit-input/unit-input.component.js:98:20)
  at obj[prop] (/metamask/scripts/sentry-install.js:24:1)
  at obj[prop] (/metamask/scripts/sentry-install.js:24:1)
  at obj[prop] (/metamask/scripts/sentry-install.js:24:1)
  at obj[prop] (/metamask/scripts/sentry-install.js:24:1)
...
(40 additional frame(s) were not displayed)

[seaona]

Repro:

1. Deploy an ERC6909 token contract
2. Mint some tokens
3. Import it as NFT
4. Start a Send ETH flow
5. Add recipient
6. Click Asset and change it to the NFT
7. See error

undefined-scrollto.mp4

Contract you can deploy in Remix

// SPDX-License-Identifier: MIT
pragma solidity >=0.8.0;

/// @notice Minimalist and gas efficient standard ERC6909 implementation.
/// @author Solmate (https://github.com/transmissions11/solmate/blob/main/src/tokens/ERC6909.sol)
abstract contract ERC6909 {
    /*//////////////////////////////////////////////////////////////
                                 EVENTS
    //////////////////////////////////////////////////////////////*/

    event OperatorSet(address indexed owner, address indexed operator, bool approved);

    event Approval(address indexed owner, address indexed spender, uint256 indexed id, uint256 amount);

    event Transfer(address caller, address indexed from, address indexed to, uint256 indexed id, uint256 amount);

    /*//////////////////////////////////////////////////////////////
                             ERC6909 STORAGE
    //////////////////////////////////////////////////////////////*/

    mapping(address => mapping(address => bool)) public isOperator;

    mapping(address => mapping(uint256 => uint256)) public balanceOf;

    mapping(address => mapping(address => mapping(uint256 => uint256))) public allowance;

    /*//////////////////////////////////////////////////////////////
                              ERC6909 LOGIC
    //////////////////////////////////////////////////////////////*/

    function transfer(
        address receiver,
        uint256 id,
        uint256 amount
    ) public virtual returns (bool) {
        balanceOf[msg.sender][id] -= amount;

        balanceOf[receiver][id] += amount;

        emit Transfer(msg.sender, msg.sender, receiver, id, amount);

        return true;
    }

    function transferFrom(
        address sender,
        address receiver,
        uint256 id,
        uint256 amount
    ) public virtual returns (bool) {
        if (msg.sender != sender && !isOperator[sender][msg.sender]) {
            uint256 allowed = allowance[sender][msg.sender][id];
            if (allowed != type(uint256).max) allowance[sender][msg.sender][id] = allowed - amount;
        }

        balanceOf[sender][id] -= amount;

        balanceOf[receiver][id] += amount;

        emit Transfer(msg.sender, sender, receiver, id, amount);

        return true;
    }

    function approve(
        address spender,
        uint256 id,
        uint256 amount
    ) public virtual returns (bool) {
        allowance[msg.sender][spender][id] = amount;

        emit Approval(msg.sender, spender, id, amount);

        return true;
    }

    function setOperator(address operator, bool approved) public virtual returns (bool) {
        isOperator[msg.sender][operator] = approved;

        emit OperatorSet(msg.sender, operator, approved);

        return true;
    }

    /*//////////////////////////////////////////////////////////////
                              ERC165 LOGIC
    //////////////////////////////////////////////////////////////*/

    function supportsInterface(bytes4 interfaceId) public view virtual returns (bool) {
        return
            interfaceId == 0x01ffc9a7 || // ERC165 Interface ID for ERC165
            interfaceId == 0x0f632fb3; // ERC165 Interface ID for ERC6909
    }

    /*//////////////////////////////////////////////////////////////
                        INTERNAL MINT/BURN LOGIC
    //////////////////////////////////////////////////////////////*/

    function _mint(
        address receiver,
        uint256 id,
        uint256 amount
    ) internal virtual {
        balanceOf[receiver][id] += amount;

        emit Transfer(msg.sender, address(0), receiver, id, amount);
    }

    function _burn(
        address sender,
        uint256 id,
        uint256 amount
    ) internal virtual {
        balanceOf[sender][id] -= amount;

        emit Transfer(msg.sender, sender, address(0), id, amount);
    }
}

contract Token is ERC6909 {
    /// @notice mocked mint logic
    function mint(address to, uint256 id, uint256 amount) public {
        _mint(to, id, amount);
    }

    /// @notice mocked burn logic
    function burn(uint256 id, uint256 amount) public {
        _burn(msg.sender, id, amount);
    }
}
``

[matteoscurati]

@seaona I tested the bug (see video here: https://www.loom.com/share/9a6561e097da4283b8d8273a81d77bf2?sid=b26c6ba3-7c7d-4bbd-8b5c-6aef0e4ba111) and couldn’t reproduce the error.

I checked the error on SENTRY. The issue refers to this line:

this.unitInput.scrollTo && this.unitInput.scrollTo(0, 0);

however, in the main repository, this line has already been updated as follows:

this.unitInput?.scrollTo?.(0, 0);

You can see the fix here:

metamask-extension/ui/components/ui/unit-input/unit-input.component.js

Line 98 in b2c5314

this.unitInput?.scrollTo?.(0, 0);

And the relevant commit: 29cbe95

Is this correct? Can we close it?