From ab2f3d76acd47a5926cbd550ba528fc6169ba94f Mon Sep 17 00:00:00 2001
From: "devin-ai-integration[bot]"
 <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Tue, 30 Jul 2024 09:39:26 -0700
Subject: [PATCH] chore: Create a story for convert-token-to-nft-modal
 component (#25561)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**

This pull request updates the screenshot for the story on the
`devin/story-kgJ` branch of the MetaMask extension repository. The
change ensures that the visual output of the story is accurately
reflected and up to date.

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

## **Related issues**

Fixes: N/A

## **Manual testing steps**

1. Go to the `devin/story-kgJ` branch.
2. Run the story.
3. Verify the screenshot reflects the correct output as shown in the PR.

## **Screenshots/Recordings**

### **Before**

<!-- Add any previous screenshots/recordings if available -->

### **After**


![ConvertTokenToNFTModal](https://api.devin.ai/attachments/77bfef20-a071-4261-be3d-d111fc612617/3b760524-ce12-487d-8ac9-8a6f60f3736a.png)

## **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/2041dc2cae694c76b2c429c376e8f177)

This Devin run was requested by Devin.

---------

Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: George Marshall <george.marshall@consensys.net>
---
 .../convert-token-to-nft-modal.stories.tsx    | 116 ++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.stories.tsx

diff --git a/ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.stories.tsx b/ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.stories.tsx
new file mode 100644
index 000000000000..2fa1506b064f
--- /dev/null
+++ b/ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.stories.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Provider, useSelector } from 'react-redux';
+import configureStore from '../../../../store/store';
+import ConvertTokenToNFTModal from './convert-token-to-nft-modal';
+
+const storeMock = configureStore({
+  metamask: {
+    selectedAddress: '0x1234567890abcdef1234567890abcdef12345678',
+    accounts: {
+      '0x1234567890abcdef1234567890abcdef12345678': {
+        balance: '1000000000000000000',
+      },
+    },
+    tokens: [
+      {
+        address: '0x1234567890abcdef1234567890abcdef12345678',
+        symbol: 'ETH',
+        decimals: 18,
+      },
+    ],
+    allNfts: [
+      {
+        address: '0x1234567890abcdef1234567890abcdef12345678',
+        tokenId: '1',
+      },
+    ],
+    identities: {
+      '0x1234567890abcdef1234567890abcdef12345678': {
+        address: '0x1234567890abcdef1234567890abcdef12345678',
+        name: 'Test Account',
+      },
+    },
+    internalAccounts: {
+      accounts: {
+        'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3': {
+          address: '0x1234567890abcdef1234567890abcdef12345678',
+          id: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3',
+          metadata: {
+            name: 'Test Account',
+            keyring: {
+              type: 'HD Key Tree',
+            },
+          },
+          options: {},
+          methods: [],
+          type: 'Eoa',
+        },
+      },
+      selectedAccount: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3',
+    },
+    selectedNetworkClientId: 'mainnet',
+    networksMetadata: {
+      mainnet: {
+        EIPS: {
+          1559: false,
+        },
+        status: 'Available',
+      },
+    },
+    providerConfig: {
+      chainId: '1',
+      ticker: 'ETH',
+    },
+    preferences: {
+      useCurrencyRateCheck: true,
+      currentCurrency: 'ETH',
+      currencyRates: {
+        ETH: {
+          conversionRate: 1,
+        },
+      },
+    },
+  },
+});
+
+const DebugWrapper = ({ children }) => {
+  const allNfts = useSelector((state: any) => state.metamask.allNfts);
+  console.log('allNfts:', allNfts);
+  return children;
+};
+
+const meta: Meta<typeof ConvertTokenToNFTModal> = {
+  title: 'Components/App/Modals/ConvertTokenToNFTModal',
+  component: ConvertTokenToNFTModal,
+  parameters: {
+    docs: {
+      // page: README, // Commented out as README.mdx does not exist
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Provider store={storeMock}>
+        <DebugWrapper>
+          <Story />
+        </DebugWrapper>
+      </Provider>
+    ),
+  ],
+  argTypes: {
+    hideModal: { action: 'hideModal' },
+    tokenAddress: { control: 'text' },
+  },
+  args: {
+    hideModal: () => {},
+    tokenAddress: '0x1234567890abcdef1234567890abcdef12345678',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ConvertTokenToNFTModal>;
+
+export const DefaultStory: Story = {};
+
+DefaultStory.storyName = 'Default';
+