added avatar network component

[NidhiKJha]

fixes #15075

https://user-images.githubusercontent.com/39872794/183472179-a52fe383-42b9-4ef9-80f0-0a44291c75a3.mov

[metamaskbot]

Builds ready [6c84ae0]

• builds: chrome, firefox, opera
• builds (beta): chrome, firefox, opera
• builds (flask): chrome, firefox, opera
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• code coverage: Report
• storybook: Storybook
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1681 ± 45 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	84	156	112	17	8
		domContentLoaded	1579	1941	1670	87	42
		load	1579	1941	1681	94	45
		domInteractive	1578	1941	1670	87	42

highlights:

storybook

• ui/components/component-library/avatar-network/avatar-network.stories.js
• ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js
• ui/pages/confirm-approve/confirm-approve.stories.js
• ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.stories.js
• ui/pages/confirm-import-token/confirm-import-token.stories.js
• ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js

[metamaskbot]

Builds ready [095e931]

• builds: chrome, firefox, opera
• builds (beta): chrome, firefox, opera
• builds (flask): chrome, firefox, opera
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• code coverage: Report
• storybook: Storybook
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1806 ± 88 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	93	1751	199	356	171
		domContentLoaded	1586	2408	1791	180	87
		load	1586	2408	1806	182	88
		domInteractive	1586	2408	1791	180	87

highlights:

storybook

• ui/components/component-library/avatar-network/avatar-network.stories.js
• ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js
• ui/pages/confirm-approve/confirm-approve.stories.js
• ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.stories.js
• ui/pages/confirm-import-token/confirm-import-token.stories.js
• ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js

[metamaskbot]

Builds ready [66cc4c5]

• builds: chrome, firefox, opera
• builds (beta): chrome, firefox, opera
• builds (flask): chrome, firefox, opera
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1685 ± 35 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	90	117	98	8	4
		domContentLoaded	1567	1820	1670	60	29
		load	1567	1832	1685	72	35
		domInteractive	1567	1820	1670	60	29

highlights:

storybook

• ui/components/component-library/avatar-network/avatar-network.stories.js
• ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js
• ui/pages/confirm-approve/confirm-approve.stories.js
• ui/pages/confirm-import-token/confirm-import-token.stories.js
• ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js

[NidhiKJha]

Not sure if its because I'm looking at the storybook build on this PR but it seems like he base avatar classes aren't working?

And there needs to be some updates to the storybook ids in the README.mdx

Fixed, it was because I hadn't added changes to BaseAvatar in this PR 😅

[metamaskbot]

Builds ready [cd8947b]

• builds: chrome, firefox, opera
• builds (beta): chrome, firefox, opera
• builds (flask): chrome, firefox, opera
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1777 ± 42 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	98	1849	377	606	291
		domContentLoaded	1598	1884	1763	88	42
		load	1598	1906	1777	88	42
		domInteractive	1598	1884	1763	88	42

highlights:

storybook

• ui/components/component-library/avatar-network/avatar-network.stories.js
• ui/components/component-library/avatar-token/avatar-token.stories.js
• ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js
• ui/pages/confirm-approve/confirm-approve.stories.js
• ui/pages/confirm-import-token/confirm-import-token.stories.js
• ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js