Feature/minimal account center

[mahmud-bn]

Description

Checklist

• The version field in package.json is incremented following semantic versioning
• The box that allows repo maintainers to update this PR is checked
• I tested locally to make sure this feature/fix works
• This PR passes the Circle CI checks

[gesquinca]

How would a dev configure which component they would like to use for the minimized state of account center?
And how would they configure different ones for desktop and mobile?

[mahmud-bn]

@gesquinca
Still waiting for Murat's feedback on this but there will be an account center initialization addition for devs to make appropriate configurations.

Right now, the current opinion is: Desktop should default to minimal: false, and mobile should default to minimal: true

[gesquinca]

is there a way to test this on the demo?

[lnbc1QWFyb24]

Added some requested changes from looking at the code.

Also I can't see in the diff changes to the Onboard initialization code that allow for accountCenter mobile configuration and the extra field in the desktop configuration and the associated validation?

[mahmud-bn]

Also I can't see in the diff changes to the Onboard initialization code that allow for accountCenter mobile configuration and the extra field in the desktop configuration and the associated validation?
@aaronbarnardsound That's for the next card that allows added configuration

[Adamj1232]

Looks good! Good work sticking it out!
I would wait for @aaronbarnardsound for a final approval but code looks clean and works well from what I can tell

[gesquinca]

I'm seeing the Micro.svelte component rendering with a size of 84 x 56 px. This designs specify 80 x 56 px.

I'm also still seeing Mimimized.svelte and Maximized.svelte components rendering with different widths. This should not be the case. They should have the same width.

[lnbc1QWFyb24]

A few small requested changes.

[lnbc1QWFyb24]

Looks good to me! 🎉

[funiimunii]

The current validation doesnt allow for setting minimal

const initOptions = Joi.object({
    wallets: walletInit,
    chains: chains.required(),
    appMetadata: appMetadata,
    i18n: Joi.object().unknown(),
    accountCenter: Joi.object({
        desktop: Joi.object({
            enabled: Joi.boolean(),
            position: accountCenterPosition
        }),
        mobile: Joi.object({
            enabled: Joi.boolean(),
            position: accountCenterPosition
        })
    })
});

[mahmud-bn]

The current validation doesn't allow for setting minimal

Hi @funiimunii,
We do have the current validation for minimal. You can look at the changes tab. We've also had it merged in the main branch:

const initOptions = Joi.object({
  wallets: walletInit,
  chains: chains.required(),
  appMetadata: appMetadata,
  i18n: Joi.object().unknown(),
  accountCenter: Joi.object({
    desktop: Joi.object({
      enabled: Joi.boolean(),
      minimal: Joi.boolean(),
      position: accountCenterPosition
    }),
    mobile: Joi.object({
      enabled: Joi.boolean(),
      minimal: Joi.boolean(),
      position: accountCenterPosition,
    })
  })
}) 

[funiimunii]

aghh okay. we are using @web3-onboard/react npm package 2.1.6. Will upgrade to 2.1.7 and hopefully these made the cut?