feat: aggregated balance UI

app/scripts/controllers/app-state.js

@@ -74,6 +74,7 @@ export default class AppStateController extends EventEmitter {
       // States used for displaying the changed network toast
       switchedNetworkDetails: null,
       switchedNetworkNeverShowMessage: false,
+      shouldShowAggregatedBalancePopover: true, // by default user should see popover;
       currentExtensionPopupId: 0,
       lastInteractedConfirmationInfo: undefined,
     });
@@ -465,6 +466,16 @@ export default class AppStateController extends EventEmitter {
     });
   }
 
+  /**
+   * Sets shouldShowAggregatedBalancePopover to false once the user toggles
+   * the setting to show native token as main balance.
+   */
+  setAggregatedBalancePopoverShown() {
+    this.store.updateState({
+      shouldShowAggregatedBalancePopover: false,
+    });
+  }
+
   /**
    * Sets a property indicating the model of the user's Trezor hardware wallet
    *

app/scripts/metamask-controller.js

@@ -3451,6 +3451,10 @@ export default class MetamaskController extends EventEmitter {
         appStateController.setSwitchedNetworkNeverShowMessage.bind(
           appStateController,
         ),
+      setAggregatedBalancePopoverShown:
+        appStateController.setAggregatedBalancePopoverShown.bind(
+          appStateController,
+        ),
       getLastInteractedConfirmationInfo:
         appStateController.getLastInteractedConfirmationInfo.bind(
           appStateController,

ui/components/app/wallet-overview/coin-buttons.tsx

@@ -79,6 +79,7 @@ const CoinButtons = ({
   defaultSwapsToken,
   ///: END:ONLY_INCLUDE_IF
   classPrefix = 'coin',
+  iconButtonClassName = '',
 }: {
   chainId: `0x${string}` | CaipChainId | number;
   trackingLocation: string;
@@ -90,6 +91,7 @@ const CoinButtons = ({
   defaultSwapsToken?: SwapsEthToken;
   ///: END:ONLY_INCLUDE_IF
   classPrefix?: string;
+  iconButtonClassName?: string;
 }) => {
   const t = useContext(I18nContext);
   const dispatch = useDispatch();
@@ -191,13 +193,15 @@ const CoinButtons = ({
       <>
         <IconButton
           className={`${classPrefix}-overview__button`}
+          iconButtonClassName={iconButtonClassName}
           Icon={<Icon name={IconName.Stake} color={IconColor.primaryInverse} />}
           label={t('stake')}
           onClick={handleMmiStakingOnClick}
         />
         {mmiPortfolioEnabled && (
           <IconButton
             className={`${classPrefix}-overview__button`}
+            iconButtonClassName={iconButtonClassName}
             Icon={
               <Icon name={IconName.Diagram} color={IconColor.primaryInverse} />
             }
@@ -308,6 +312,7 @@ const CoinButtons = ({
         ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
         <IconButton
           className={`${classPrefix}-overview__button`}
+          iconButtonClassName={iconButtonClassName}
           Icon={
             <Icon name={IconName.PlusMinus} color={IconColor.primaryInverse} />
           }
@@ -330,6 +335,24 @@ const CoinButtons = ({
 
       <IconButton
         className={`${classPrefix}-overview__button`}
+        iconButtonClassName={iconButtonClassName}
+        data-testid={`${classPrefix}-overview-send`}
+        Icon={
+          <Icon
+            name={IconName.Arrow2UpRight}
+            color={IconColor.primaryInverse}
+          />
+        }
+        disabled={!isSigningEnabled}
+        label={t('send')}
+        onClick={handleSendOnClick}
+        tooltipRender={(contents: React.ReactElement) =>
+          generateTooltip('sendButton', contents)
+        }
+      />
+      <IconButton
+        className={`${classPrefix}-overview__button`}
+        iconButtonClassName={iconButtonClassName}
         disabled={
           !isSwapsChain || !isSigningEnabled || !isExternalServicesEnabled
         }
@@ -350,6 +373,7 @@ const CoinButtons = ({
         ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
         <IconButton
           className={`${classPrefix}-overview__button`}
+          iconButtonClassName={iconButtonClassName}
           disabled={!isBridgeChain || !isSigningEnabled}
           data-testid={`${classPrefix}-overview-bridge`}
           Icon={
@@ -389,6 +413,7 @@ const CoinButtons = ({
           )}
           <IconButton
             className={`${classPrefix}-overview__button`}
+            iconButtonClassName={iconButtonClassName}
             data-testid={`${classPrefix}-overview-receive`}
             Icon={
               <Icon