UserProfile Component Cannot read properties of undefined (reading 'iconUrl')

[codingwithmanny]

Describe the bug The component disappears and gives an errors in the console log after signing up with an email, then connecting github, and adding a web3 wallet.

To Reproduce Steps to reproduce the behavior:

1. Add the following code to nextjs main page to add support for createWeb3Wallet

File: ./app/nextjs/src/pages/index.tsx

// ...

const AuthShowcase: React.FC = () => {
  const { isSignedIn } = useAuth();
  const { data: secretMessage } = trpc.auth.getSecretMessage.useQuery(
    undefined,
    { enabled: !!isSignedIn },
  );
  // ADD THIS ------------------------------------
  const { user } = useUser();
  const onPress = async () => {
      await user?.createWeb3Wallet({ web3Wallet: '0xB3f03B93F0bd65B960EE950d9aFC6867D461C33f'})
      .then((data) => {
        console.log({ data });
      })
      .catch((error) => {
        console.log(error)
      });
  };
  // ----------------------------------------------

   return (
    <div className="flex flex-col items-center justify-center gap-4">
      {isSignedIn && (
        <>
          <p className="text-center text-2xl text-white">
            {secretMessage && (
              <span>
                {" "}
                {secretMessage} click the user button!
                <br />
              </span>
            )}
          </p>
          <div className="flex items-center justify-center">
            <UserButton
              appearance={{
                elements: {
                  userButtonAvatarBox: {
                    width: "3rem",
                    height: "3rem",
                  },
                },
              }}
            />
            {/* ADD THIS ------------------------------------ */}
            <button onClick={() => onPress()}>Add Account</button>
            {/* --------------------------------------------- */}
          </div>
        </>
      )}
      {!isSignedIn && (
        <p className="text-center text-2xl text-white">
          <Link href="/sign-in">Sign In</Link>
        </p>
      )}
    </div>
  );
};

3. Once the server is started with the db initiated and all, click on the "Add Account" button
4. See error of the button disappearing and the error in the console log

Expected behavior

Show the profile modal to manage the user acccount.

Logs

next-dev.js?36dd:20 TypeError: Cannot read properties of undefined (reading 'iconUrl')
    at Ke (userprofile_8db891_4.37.0.js:1:48836)
    at xo (vendors_8db891_4.37.0.js:2:102649)
    at Eu (vendors_8db891_4.37.0.js:2:159608)
    at bs (vendors_8db891_4.37.0.js:2:148590)
    at vs (vendors_8db891_4.37.0.js:2:148518)
    at gs (vendors_8db891_4.37.0.js:2:148381)
    at as (vendors_8db891_4.37.0.js:2:145188)
    at ls (vendors_8db891_4.37.0.js:2:143743)
    at S (vendors_8db891_4.37.0.js:2:170487)

Screenshots If applicable, add screenshots to help explain your problem.

1 - Everything Working:

2 - Profile Dropdown Shows:

3 - Clicks On Manage Account (see error):

Desktop (please complete the following information):

• OS: Mac Ventura 13.1
• Browser: Chrome
• Version: v112.0.5615.49

Smartphone (please complete the following information): N/A

Additional context

Goal is trying to associate multiple auths accounts with the same account, including a wallet address.