chore: adds solana banner to carousel (#32000)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR adds the solana banner/slide to the existing carousel, to the
1st position.
For users that don't have a solana account, it will invite you to create
one when clicked.
For Users that already have a solana account it will just focus on it.

![Screenshot 2025-04-15 at 15 11
09](https://github.com/user-attachments/assets/bc251df0-e3f3-440e-8a70-367395b9cadb)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: Alejandro Garcia Anglada <[email protected]>

Author: zone-live

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Changes in account modal to switch to smart account type ([#31899](https://github.com/MetaMask/metamask-extension/pull/31899))
 - Support for Solana Devnet ([#31702](https://github.com/MetaMask/metamask-extension/pull/31702))
 - [Beta] Create Solana account automatically on wallet creation or SRP import [#32038](https://github.com/MetaMask/metamask-extension/pull/32038)
+- Adds the Solana banner/slide to the existing home carousel ([#32000](https://github.com/MetaMask/metamask-extension/pull/32000))
 - Support for Solana on Firefox ([#32104](https://github.com/MetaMask/metamask-extension/pull/32104))
 - Update CAIP-294 wallet announcement event to include `targets` property and new `caip-348` target object ([#32070](https://github.com/MetaMask/metamask-extension/pull/32070))
 - Replace `caip-x` with `caip-348` in Multichain API over externally_connectable ([#32070](https://github.com/MetaMask/metamask-extension/pull/32070))

app/_locales/en/messages.json

@@ -3,13 +3,21 @@ import { useDispatch, useSelector } from 'react-redux';
 ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
 import { isEqual } from 'lodash';
 ///: END:ONLY_INCLUDE_IF
-import { removeSlide } from '../../../store/actions';
+import {
+  removeSlide,
+  ///: BEGIN:ONLY_INCLUDE_IF(solana)
+  setSelectedAccount,
+  ///: END:ONLY_INCLUDE_IF
+} from '../../../store/actions';
 import { Carousel } from '..';
 import {
   getAppIsLoading,
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   getSwapsDefaultToken,
   ///: END:ONLY_INCLUDE_IF
+  ///: BEGIN:ONLY_INCLUDE_IF(solana)
+  hasCreatedSolanaAccount,
+  ///: END:ONLY_INCLUDE_IF
 } from '../../../selectors';
 ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
 import useBridging from '../../../hooks/bridge/useBridging';
@@ -20,7 +28,16 @@ import {
   MetaMetricsEventCategory,
 } from '../../../../shared/constants/metametrics';
 import type { CarouselSlide } from '../../../../shared/constants/app-state';
-import { useCarouselManagement } from '../../../hooks/useCarouselManagement';
+import {
+  useCarouselManagement,
+  ///: BEGIN:ONLY_INCLUDE_IF(solana)
+  SOLANA_SLIDE,
+  ///: END:ONLY_INCLUDE_IF
+} from '../../../hooks/useCarouselManagement';
+///: BEGIN:ONLY_INCLUDE_IF(solana)
+import { CreateSolanaAccountModal } from '../create-solana-account-modal';
+import { getLastSelectedSolanaAccount } from '../../../selectors/multichain';
+///: END:ONLY_INCLUDE_IF
 import {
   AccountOverviewTabsProps,
   AccountOverviewTabs,
@@ -39,6 +56,13 @@ export const AccountOverviewLayout = ({
   const trackEvent = useContext(MetaMetricsContext);
   const [hasRendered, setHasRendered] = useState(false);
 
+  ///: BEGIN:ONLY_INCLUDE_IF(solana)
+  const [showCreateSolanaAccountModal, setShowCreateSolanaAccountModal] =
+    useState(false);
+  const hasSolanaAccount = useSelector(hasCreatedSolanaAccount);
+  const selectedSolanaAccount = useSelector(getLastSelectedSolanaAccount);
+  ///: END:ONLY_INCLUDE_IF
+
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   const defaultSwapsToken = useSelector(getSwapsDefaultToken, isEqual);
   ///: END:ONLY_INCLUDE_IF
@@ -60,6 +84,16 @@ export const AccountOverviewLayout = ({
     }
     ///: END:ONLY_INCLUDE_IF
 
+    ///: BEGIN:ONLY_INCLUDE_IF(solana)
+    if (id === SOLANA_SLIDE.id) {
+      if (hasSolanaAccount && selectedSolanaAccount) {
+        dispatch(setSelectedAccount(selectedSolanaAccount.address));
+      } else {
+        setShowCreateSolanaAccountModal(true);
+      }
+    }
+    ///: END:ONLY_INCLUDE_IF
+
     trackEvent({
       event: MetaMetricsEventName.BannerSelect,
       category: MetaMetricsEventCategory.Banner,
@@ -108,6 +142,15 @@ export const AccountOverviewLayout = ({
         onRenderSlides={handleRenderSlides}
       />
       <AccountOverviewTabs {...tabsProps}></AccountOverviewTabs>
+      {
+        ///: BEGIN:ONLY_INCLUDE_IF(solana)
+        showCreateSolanaAccountModal && (
+          <CreateSolanaAccountModal
+            onClose={() => setShowCreateSolanaAccountModal(false)}
+          />
+        )
+        ///: END:ONLY_INCLUDE_IF
+      }
     </>
   );
 };

app/_locales/en_GB/messages.json

@@ -15,7 +15,12 @@ import {
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
-import { getSweepstakesCampaignActive } from '../../../hooks/useCarouselManagement';
+import {
+  getSweepstakesCampaignActive,
+  ///: BEGIN:ONLY_INCLUDE_IF(solana)
+  SOLANA_SLIDE,
+  ///: END:ONLY_INCLUDE_IF
+} from '../../../hooks/useCarouselManagement';
 import type { CarouselProps } from './carousel.types';
 import { BANNER_STYLES, MAX_SLIDES } from './constants';
 import {
@@ -43,6 +48,16 @@ export const Carousel = React.forwardRef(
     const visibleSlides = slides
       .filter((slide) => !slide.dismissed || slide.undismissable)
       .sort((a, b) => {
+        ///: BEGIN:ONLY_INCLUDE_IF(solana)
+        // prioritize Solana slide
+        if (a.id === SOLANA_SLIDE.id) {
+          return -1;
+        }
+        if (b.id === SOLANA_SLIDE.id) {
+          return 1;
+        }
+        ///: END:ONLY_INCLUDE_IF
+
         const isSweepstakesActive = getSweepstakesCampaignActive(
           new Date(new Date().toISOString()),
         );

app/images/slide-solana-icon.svg

@@ -7,6 +7,15 @@ export const REMOTE_MODE_SLIDE = {
   href: '/home.html#remote',
 };
 
+///: BEGIN:ONLY_INCLUDE_IF(solana)
+export const SOLANA_SLIDE = {
+  id: 'solana',
+  title: 'slideSolanaTitle',
+  description: 'slideSolanaDescription',
+  image: './images/slide-solana-icon.svg',
+};
+///: END:ONLY_INCLUDE_IF
+
 export const SWEEPSTAKES_SLIDE = {
   id: 'sweepStake',
   title: 'slideSweepStakeTitle',

ui/components/multichain/account-overview/account-overview-layout.tsx

@@ -19,6 +19,7 @@ import {
   ZERO_BALANCE,
   REMOTE_MODE_SLIDE,
   MULTI_SRP_SLIDE,
+  SOLANA_SLIDE,
 } from './constants';
 
 const SLIDES_ZERO_FUNDS_REMOTE_OFF_SWEEPSTAKES_OFF = [
@@ -29,6 +30,9 @@ const SLIDES_ZERO_FUNDS_REMOTE_OFF_SWEEPSTAKES_OFF = [
   CARD_SLIDE,
   CASH_SLIDE,
   MULTI_SRP_SLIDE,
+  ///: BEGIN:ONLY_INCLUDE_IF(solana)
+  SOLANA_SLIDE,
+  ///: END:ONLY_INCLUDE_IF
 ];
 
 const SLIDES_POSITIVE_FUNDS_REMOTE_OFF_SWEEPSTAKES_OFF = [
@@ -39,6 +43,9 @@ const SLIDES_POSITIVE_FUNDS_REMOTE_OFF_SWEEPSTAKES_OFF = [
   { ...FUND_SLIDE, undismissable: false },
   CASH_SLIDE,
   MULTI_SRP_SLIDE,
+  ///: BEGIN:ONLY_INCLUDE_IF(solana)
+  SOLANA_SLIDE,
+  ///: END:ONLY_INCLUDE_IF
 ];
 
 const SLIDES_ZERO_FUNDS_REMOTE_ON_SWEEPSTAKES_OFF = [
@@ -50,6 +57,9 @@ const SLIDES_ZERO_FUNDS_REMOTE_ON_SWEEPSTAKES_OFF = [
   CARD_SLIDE,
   CASH_SLIDE,
   MULTI_SRP_SLIDE,
+  ///: BEGIN:ONLY_INCLUDE_IF(solana)
+  SOLANA_SLIDE,
+  ///: END:ONLY_INCLUDE_IF
 ];
 
 const SLIDES_POSITIVE_FUNDS_REMOTE_ON_SWEEPSTAKES_OFF = [
@@ -61,6 +71,9 @@ const SLIDES_POSITIVE_FUNDS_REMOTE_ON_SWEEPSTAKES_OFF = [
   { ...FUND_SLIDE, undismissable: false },
   CASH_SLIDE,
   MULTI_SRP_SLIDE,
+  ///: BEGIN:ONLY_INCLUDE_IF(solana)
+  SOLANA_SLIDE,
+  ///: END:ONLY_INCLUDE_IF
 ];
 
 const SLIDES_ZERO_FUNDS_REMOTE_OFF_SWEEPSTAKES_ON = [
@@ -72,6 +85,9 @@ const SLIDES_ZERO_FUNDS_REMOTE_OFF_SWEEPSTAKES_ON = [
   CARD_SLIDE,
   CASH_SLIDE,
   MULTI_SRP_SLIDE,
+  ///: BEGIN:ONLY_INCLUDE_IF(solana)
+  SOLANA_SLIDE,
+  ///: END:ONLY_INCLUDE_IF
 ];
 
 const SLIDES_POSITIVE_FUNDS_REMOTE_OFF_SWEEPSTAKES_ON = [
@@ -83,6 +99,9 @@ const SLIDES_POSITIVE_FUNDS_REMOTE_OFF_SWEEPSTAKES_ON = [
   { ...FUND_SLIDE, undismissable: false },
   CASH_SLIDE,
   MULTI_SRP_SLIDE,
+  ///: BEGIN:ONLY_INCLUDE_IF(solana)
+  SOLANA_SLIDE,
+  ///: END:ONLY_INCLUDE_IF
 ];
 
 const SLIDES_ZERO_FUNDS_REMOTE_ON_SWEEPSTAKES_ON = [
@@ -95,6 +114,9 @@ const SLIDES_ZERO_FUNDS_REMOTE_ON_SWEEPSTAKES_ON = [
   CARD_SLIDE,
   CASH_SLIDE,
   MULTI_SRP_SLIDE,
+  ///: BEGIN:ONLY_INCLUDE_IF(solana)
+  SOLANA_SLIDE,
+  ///: END:ONLY_INCLUDE_IF
 ];
 
 const SLIDES_POSITIVE_FUNDS_REMOTE_ON_SWEEPSTAKES_ON = [
@@ -107,6 +129,9 @@ const SLIDES_POSITIVE_FUNDS_REMOTE_ON_SWEEPSTAKES_ON = [
   { ...FUND_SLIDE, undismissable: false },
   CASH_SLIDE,
   MULTI_SRP_SLIDE,
+  ///: BEGIN:ONLY_INCLUDE_IF(solana)
+  SOLANA_SLIDE,
+  ///: END:ONLY_INCLUDE_IF
 ];
 
 jest.mock('react-redux', () => ({

ui/components/multichain/carousel/carousel.tsx

@@ -12,11 +12,14 @@ import {
   CARD_SLIDE,
   CASH_SLIDE,
   REMOTE_MODE_SLIDE,
-  SWEEPSTAKES_SLIDE,
   SWEEPSTAKES_START,
   SWEEPSTAKES_END,
   ZERO_BALANCE,
   MULTI_SRP_SLIDE,
+  SWEEPSTAKES_SLIDE,
+  ///: BEGIN:ONLY_INCLUDE_IF(solana)
+  SOLANA_SLIDE,
+  ///: END:ONLY_INCLUDE_IF
 } from './constants';
 
 type UseSlideManagementProps = {
@@ -57,6 +60,9 @@ export const useCarouselManagement = ({
     defaultSlides.push(CARD_SLIDE);
     defaultSlides.push(CASH_SLIDE);
     defaultSlides.push(MULTI_SRP_SLIDE);
+    ///: BEGIN:ONLY_INCLUDE_IF(solana)
+    defaultSlides.push(SOLANA_SLIDE);
+    ///: END:ONLY_INCLUDE_IF
 
     defaultSlides.splice(hasZeroBalance ? 0 : 2, 0, fundSlide);