feat: MMS-1868 new quote card and story (#30303)

<!--
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**

New quote card design for Solana cross-chain swaps.

integration blocked by dependencies, separate integration PR will come
in the future, probably next week, to add it to the prepare-bridge page.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

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

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/MMS-1868 (item no.
3)

## **Manual testing steps**

Not relevant. Only on storybook for now. Component is not rendered
anywhere in the app.

## **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**

- [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/main/.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/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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/pages/bridge/quotes/multichain-bridge-quote-card.stories.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import configureStore from '../../../store/store';
+import { MultichainBridgeQuoteCard } from './multichain-bridge-quote-card';
+import { createBridgeMockStore } from '../../../../test/jest/mock-store';
+import mockBridgeQuotesErc20Erc20 from '../../../../test/data/bridge/mock-quotes-erc20-erc20.json';
+
+const storybook = {
+  title: 'Pages/Bridge/MultichainBridgeQuoteCard',
+  component: MultichainBridgeQuoteCard,
+};
+
+const Container = ({ children }: { children: React.ReactNode }) => (
+  <div style={{ width: '312px', padding: '16px' }}>{children}</div>
+);
+
+export const DefaultStory = () => {
+  return (
+    <Container>
+      <MultichainBridgeQuoteCard />
+    </Container>
+  );
+};
+DefaultStory.storyName = 'Default';
+DefaultStory.decorators = [
+  (story) => (
+    <Provider
+      store={configureStore(
+        createBridgeMockStore({
+          bridgeStateOverrides: { quotes: mockBridgeQuotesErc20Erc20 },
+          metamaskStateOverrides: {
+            currencyRates: {
+              ETH: { conversionRate: 2514.5 },
+            },
+          },
+        }),
+      )}
+    >
+      {story()}
+    </Provider>
+  ),
+];
+
+export const WithDestinationAddress = () => {
+  return (
+    <Container>
+      <MultichainBridgeQuoteCard destinationAddress="0x1234567890123456789012345678901234567890" />
+    </Container>
+  );
+};
+WithDestinationAddress.decorators = [
+  (story) => (
+    <Provider
+      store={configureStore(
+        createBridgeMockStore({
+          bridgeStateOverrides: { quotes: mockBridgeQuotesErc20Erc20 },
+          metamaskStateOverrides: {
+            currencyRates: {
+              ETH: { conversionRate: 2514.5 },
+            },
+          },
+        }),
+      )}
+    >
+      {story()}
+    </Provider>
+  ),
+];
+
+export const WithLowEstimatedReturn = () => {
+  return (
+    <Container>
+      <MultichainBridgeQuoteCard destinationAddress="0x1234567890123456789012345678901234567890" />
+    </Container>
+  );
+};
+WithLowEstimatedReturn.decorators = [
+  (story) => (
+    <Provider
+      store={configureStore(
+        createBridgeMockStore({
+          bridgeStateOverrides: { quotes: mockBridgeQuotesErc20Erc20 },
+          bridgeSliceOverrides: {
+            validationErrors: {
+              isEstimatedReturnLow: true,
+            },
+          },
+          metamaskStateOverrides: {
+            currencyRates: {
+              ETH: { conversionRate: 2514.5 },
+            },
+          },
+        }),
+      )}
+    >
+      {story()}
+    </Provider>
+  ),
+];
+
+export default storybook;