feat: integrate Notifications in NavBar

[goga-m]

Summary

• Add Notifications dropdown in NavBar
• Add new props in NavBar

NavBar API:

const notifications = {
	pluginsHeader: "Plugin Jun 16, 2020",
	plugins: [
		{
			logoClassName: "w-8 h-8 p-2 mr-4 rounded-lg bg-logo",
			title: "ARK Explorer",
			description: "- update v2.5.6",
			action: {
				label: "Update now",
				value: "update",
			},
		},
	],
	transactionsHeader: "Transaction Jun 16, 2020",
	transactions: [
		{
			date: "17 Mar 2020 22:02:10",
			avatarId: "test",
			type: "send",
			address: "ASuusXSW9kfWnicScSgUTjttP6T9GQ3kqT",
			walletName: "My Wallet",
			amount: "100 BTC",
			fiat: "1,000,000 USD",
		},
		{
			date: "17 Mar 2020 22:02:10",
			avatarId: "test",
			type: "receive",
			address: "ASuusXSW9kfWnicScSgUTjttP6T9GQ3kqT",
			walletName: "My Wallet",
			amount: "100 BTC",
			fiat: "1,000,000 USD",
		},
	],
};

return (
	<div>
		<NavBar
			currencyIcon="Ark"
			balance="34,253.75"
			userInitials="IO"
			onUserAction={(action: any) => alert(action.label)}
			notifications={notifications}
			onNotificationAction={(actionName: string, actionData: any) => alert(actionName)}
		></NavBar>
	</div>
);

Checklist

• Documentation (if necessary)
• Tests (if necessary)
• Ready to be merged

[codecov]

Codecov Report

Merging #2152 into 3.0-react will not change coverage.
The diff coverage is 100.00%.

@@             Coverage Diff              @@
##           3.0-react     #2152    +/-   ##
============================================
  Coverage     100.00%   100.00%            
============================================
  Files             24        98    +74     
  Lines            142       763   +621     
  Branches          18       119   +101     
============================================
+ Hits             142       763   +621     

Flag	Coverage Δ
#unit	100.00% <100.00%> (?)

Impacted Files	Coverage Δ
src/app/components/Button/Button.tsx	100.00% <ø> (ø)
src/app/components/Card/Card.tsx	100.00% <ø> (ø)
src/app/components/Card/CardControl.tsx	100.00% <ø> (ø)
src/app/components/StepIndicator/StepIndicator.tsx	100.00% <ø> (ø)
src/app/components/Address/Address.tsx	100.00% <100.00%> (ø)
src/app/components/Address/utils.ts	100.00% <100.00%> (ø)
src/app/components/Alert/Alert.tsx	100.00% <100.00%> (ø)
src/app/components/Badge/Badge.styles.ts	100.00% <100.00%> (ø)
src/app/components/Badge/Badge.tsx	100.00% <100.00%> (ø)
src/app/components/Button/Button.styles.ts	100.00% <100.00%> (ø)
... and 128 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b20ec3a...fb4442c. Read the comment docs.