From 85c5710f8b8162e24a3f48f62f971807acbcbf2f Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Wed, 31 Jul 2024 08:29:13 -0700
Subject: [PATCH] chore: Create a story for TokenCurrencyDisplay component
 (#26172)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Copy pasta of https://github.com/MetaMask/metamask-extension/pull/25278

## **Description**

This PR introduces a Storybook story for the TokenCurrencyDisplay
component to facilitate isolated UI testing and development.

## **Related issues**
N/A

## **Manual testing steps**

1. Go to the latest build of storybook in this PR
2. Navigate to the TokenCurrencyDisplay component in the Components/UI
folder.

## **Screenshots/Recordings**

<img width="1650" alt="Screenshot 2024-06-12 at 2 22 56 AM"
src="https://github.com/Devin-Applications/metamask-extension-devin/assets/168687171/90985da3-80bc-4865-be6a-bd3d2a4ad340">

## **Pre-merge author checklist**

- [X] I’ve followed [MetaMask 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.

[Devin
Run](https://preview.devin.ai/devin/2160d3493b21468dbb83691ab5fefe84)
---
 .../token-currency-display.stories.tsx        | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 ui/components/ui/token-currency-display/token-currency-display.stories.tsx

diff --git a/ui/components/ui/token-currency-display/token-currency-display.stories.tsx b/ui/components/ui/token-currency-display/token-currency-display.stories.tsx
new file mode 100644
index 000000000000..7cf850c42c84
--- /dev/null
+++ b/ui/components/ui/token-currency-display/token-currency-display.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import TokenCurrencyDisplay from './token-currency-display.component';
+import { TokenCurrencyDisplayProps } from './token-currency-display.types';
+
+export default {
+  title: 'Components/UI/TokenCurrencyDisplay',
+  component: TokenCurrencyDisplay,
+  argTypes: {
+    className: { control: 'text' },
+    transactionData: { control: 'text' },
+    token: { control: 'object' },
+    prefix: { control: 'text' },
+  },
+} as Meta;
+
+const Template: Story<TokenCurrencyDisplayProps> = (args) => <TokenCurrencyDisplay {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  className: '',
+  transactionData: '0x123',
+  token: { symbol: 'ETH' },
+  prefix: '',
+};