stories fixes

src/components/@shared/AddToken/index.stories.tsx

@@ -1,15 +1,16 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import AddToken, { AddTokenProps } from '@shared/AddToken'
+import Web3Provider from '@context/Web3'
 
 export default {
   title: 'Component/@shared/AddToken',
   component: AddToken
 } as ComponentMeta<typeof AddToken>
 
-const Template: ComponentStory<typeof AddToken> = (args: AddTokenProps) => (
+const Template: ComponentStory<typeof AddToken> = (args: AddTokenProps) => {
-  <AddToken {...args} />
+  return <AddToken {...args} />
-)
+}
 
 interface Props {
   args: AddTokenProps

src/components/@shared/AddToken/index.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { act, render } from '@testing-library/react'
+import AddToken from './'
+
+test('render AddToken ', async () => {
+  const args = {
+    address: '0xd8992Ed72C445c35Cb4A2be468568Ed1079357c8',
+    symbol: 'OCEAN',
+    logo: 'https://raw.githubusercontent.com/oceanprotocol/art/main/logo/datatoken.png'
+  }
+  // TODO: remove eslint rule (testing-library/no-unnecessary-act) and solve act issue
+  // eslint-disable-next-line testing-library/no-unnecessary-act
+  await act(async () => {
+    render(<AddToken {...args} />)
+  })
+})

src/components/@shared/AssetList/AssetComputeList/index.stories.tsx

@@ -5,6 +5,7 @@ import AssetComputeList, {
 } from '@shared/AssetList/AssetComputeList'
 import { assetSelectionAsset } from '../../../../../.storybook/__mockdata__'
 import MarketMetadataProvider from '@context/MarketMetadata'
+import { UserPreferencesProvider } from '@context/UserPreferences'
 
 export default {
   title: 'Component/@shared/AssetList/AssetComputeList',
@@ -16,7 +17,9 @@ const Template: ComponentStory<typeof AssetComputeList> = (
 ) => {
   return (
     <MarketMetadataProvider>
-      <AssetComputeList {...args} />
+      <UserPreferencesProvider>
+        <AssetComputeList {...args} />
+      </UserPreferencesProvider>
     </MarketMetadataProvider>
   )
 }

src/components/@shared/AssetList/AssetListTitle/index.stories.tsx

@@ -4,6 +4,7 @@ import AssetListTitle, {
   AssetListTitleProps
 } from '@shared/AssetList/AssetListTitle'
 import MarketMetadataProvider from '@context/MarketMetadata'
+import { UserPreferencesProvider } from '@context/UserPreferences'
 
 export default {
   title: 'Component/@shared/AssetList/AssetListTitle',
@@ -15,7 +16,9 @@ const Template: ComponentStory<typeof AssetListTitle> = (
 ) => {
   return (
     <MarketMetadataProvider>
-      <AssetListTitle {...args} />
+      <UserPreferencesProvider>
+        <AssetListTitle {...args} />
+      </UserPreferencesProvider>
     </MarketMetadataProvider>
   )
 }

src/components/@shared/AssetList/index.stories.tsx

@@ -4,6 +4,8 @@ import AssetList, { AssetListProps } from '@shared/AssetList'
 import * as config from '../../../../app.config'
 import { assets, mockWallet } from '../../../../.storybook/__mockdata__'
 import UrqlClientProvider from '@context/UrqlProvider'
+import { UserPreferencesProvider } from '@context/UserPreferences'
+import MarketMetadataProvider from '@context/MarketMetadata'
 
 export default {
   title: 'Component/@shared/AssetList',
@@ -12,9 +14,13 @@ export default {
 
 const Template: ComponentStory<typeof AssetList> = (args: AssetListProps) => {
   return (
-    <UrqlClientProvider>
+    <MarketMetadataProvider>
-      <AssetList {...args} />
+      <UrqlClientProvider>
-    </UrqlClientProvider>
+        <UserPreferencesProvider>
+          <AssetList {...args} />
+        </UserPreferencesProvider>
+      </UrqlClientProvider>
+    </MarketMetadataProvider>
   )
 }
 

src/components/@shared/AssetTeaser/index.stories.tsx

@@ -7,6 +7,8 @@ import {
   prices
 } from '../../../../.storybook/__mockdata__'
 import AssetTeaser, { AssetTeaserProps } from '@shared/AssetTeaser'
+import { UserPreferencesProvider } from '@context/UserPreferences'
+import MarketMetadataProvider from '@context/MarketMetadata'
 
 export default {
   title: 'Component/@shared/AssetTeaser',
@@ -16,7 +18,13 @@ export default {
 const Template: ComponentStory<typeof AssetTeaser> = (
   args: AssetTeaserProps
 ) => {
-  return <AssetTeaser {...args} />
+  return (
+    <MarketMetadataProvider>
+      <UserPreferencesProvider>
+        <AssetTeaser {...args} />
+      </UserPreferencesProvider>
+    </MarketMetadataProvider>
+  )
 }
 
 interface Props {

src/components/@shared/FormFields/AssetSelection/index.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { act, render } from '@testing-library/react'
+import { assetSelectionAsset } from '../../../../../.storybook/__mockdata__/index'
+import UrqlClientProvider from '../../../../@context/UrqlProvider'
+import AssetSelection from './'
+import MarketMetadataProvider from '@context/MarketMetadata'
+
+test('render Asset Selection List', async () => {
+  const args = {
+    assets: assetSelectionAsset,
+    multiple: true,
+    disabled: false
+  }
+  // TODO: remove eslint rule (testing-library/no-unnecessary-act) and solve act issue
+  // eslint-disable-next-line testing-library/no-unnecessary-act
+  await act(async () => {
+    render(
+      <MarketMetadataProvider>
+        <UrqlClientProvider>
+          <AssetSelection {...args} />
+        </UrqlClientProvider>
+      </MarketMetadataProvider>
+    )
+  })
+})

src/components/@shared/FormFields/Datatoken/RefreshName/index.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import RefreshName, {
+  RefreshNameProps
+} from '@shared/FormFields/Datatoken/RefreshName'
+
+export default {
+  title: 'Component/@shared/FormFields/Datatoken/RefreshName',
+  component: RefreshName
+} as ComponentMeta<typeof RefreshName>
+
+const Template: ComponentStory<typeof RefreshName> = (
+  args: RefreshNameProps
+) => <RefreshName {...args} />
+
+interface Props {
+  args: RefreshNameProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  generateName: () => {
+    console.log('A new name generated!')
+  }
+}

src/components/@shared/FormFields/Datatoken/RefreshName/index.tsx

@@ -1,13 +1,15 @@
 import React, { ReactElement } from 'react'
-import styles from './RefreshName.module.css'
+import styles from './index.module.css'
 import Button from '@shared/atoms/Button'
 import Refresh from '@images/refresh.svg'
 
+export interface RefreshNameProps {
+  generateName: () => void
+}
+
 export default function RefreshName({
   generateName
-}: {
+}: RefreshNameProps): ReactElement {
-  generateName: () => void
-}): ReactElement {
   return (
     <Button
       style="text"

src/components/@shared/Pagination/index.stories.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import Pagination from '@shared/Pagination'
 import { PaginationProps } from './_types'
-import { UserPreferencesProvider } from '@context/UserPreferences'
 import MarketMetadataProvider from '@context/MarketMetadata'
 
 export default {

src/components/@shared/Publisher/Add/index.module.css

@@ -3,5 +3,5 @@
 }
 
 .linksExternal {
-  composes: linksExternal from './index.module.css';
+  composes: linksExternal from '../index.module.css';
 }

src/components/@shared/Publisher/Add/index.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
 import External from '@images/external.svg'
-import styles from './Add.module.css'
+import styles from './index.module.css'
 
 export default function Add(): ReactElement {
   return (

src/components/@shared/Publisher/index.stories.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import Publisher, { PublisherProps } from '@shared/Publisher'
-import MarketMetadataProvider from '@context/MarketMetadata'
 
 export default {
   title: 'Component/@shared/Publisher',