feat: added BTC variant to ramps-card and illustration image (#25615)

## **Description**

Updates the Ramps banners for BTC accounts. 

Added

- `BTC` to `RAMPS_CARD_VARIANT_TYPES` with `illustractionSrc`,
`gradient`, `title`, and `body` in the `RAMPS_CARD_VARIANTS`
- [BTC
illustration](https://www.figma.com/design/vsHVGgHiWo37Qs2EyMMy0K/Empty-Account-Contextual-Buy-Button?node-id=354-8198&t=61v1CV61FZV68ssr-0)
to `app/images`
- `BtcBanner` to `RampsMetaMaskEntry` enum 

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/25615?quickstart=1)

## **Related issues**

Fixes: MetaMask/accounts-planning#496

## **Manual testing steps**

N/A 
@georgeweiler is working on subsequent PR to include BTC in the list of
buyable tokens, which will render the new banner in that flow.

## **Screenshots/Recordings**

<img width="321" alt="Screenshot 2024-07-01 at 3 50 59 PM"
src="https://github.com/MetaMask/metamask-extension/assets/91970214/2ca6b3a9-842c-42ea-8c87-4e8e4481e923">

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.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.

ui/components/multichain/ramps-card/ramps-card.js

@@ -32,6 +32,7 @@ export const RAMPS_CARD_VARIANT_TYPES = {
   TOKEN: 'token',
   NFT: 'nft',
   ACTIVITY: 'activity',
+  BTC: 'btc',
 };
 
 export const RAMPS_CARD_VARIANTS = {
@@ -56,12 +57,20 @@ export const RAMPS_CARD_VARIANTS = {
     title: 'startYourJourney',
     body: 'startYourJourneyDescription',
   },
+  [RAMPS_CARD_VARIANT_TYPES.BTC]: {
+    illustrationSrc: './images/ramps-card-btc-illustration.png',
+    gradient:
+      'linear-gradient(90deg, #017ED9 0%, #446FD9 35%, #5E6AD9 58%, #635ED9 80.5%, #6855D9 92.5%, #6A4FD9 100%)',
+    title: 'fundYourWallet',
+    body: 'fundYourWalletDescription',
+  },
 };
 
 const metamaskEntryMap = {
   [RAMPS_CARD_VARIANT_TYPES.TOKEN]: RampsMetaMaskEntry.TokensBanner,
   [RAMPS_CARD_VARIANT_TYPES.NFT]: RampsMetaMaskEntry.NftBanner,
   [RAMPS_CARD_VARIANT_TYPES.ACTIVITY]: RampsMetaMaskEntry.ActivityBanner,
+  [RAMPS_CARD_VARIANT_TYPES.BTC]: RampsMetaMaskEntry.BtcBanner,
 };
 
 export const RampsCard = ({ variant }) => {

ui/components/multichain/ramps-card/ramps-card.stories.js

@@ -35,3 +35,8 @@ export const ActivityStory = (args) => (
 );
 
 ActivityStory.storyName = 'Activity';
+
+export const BTCStory = (args) => (
+  <RampsCard {...args} variant={RAMPS_CARD_VARIANT_TYPES.BTC} />
+);
+BTCStory.storyName = 'BTC';

ui/hooks/ramps/useRamps/useRamps.ts

@@ -14,6 +14,7 @@ export enum RampsMetaMaskEntry {
   NftBanner = 'ext_buy_banner_nfts',
   TokensBanner = 'ext_buy_banner_tokens',
   ActivityBanner = 'ext_buy_banner_activity',
+  BtcBanner = 'ext_buy_banner_btc',
 }
 
 const portfolioUrl = process.env.PORTFOLIO_URL;