fixes

src/@context/MarketMetadata/index.tsx

@@ -36,9 +36,9 @@ function MarketMetadataProvider({
 
         opcData.push({
           chainId: appConfig.chainIdsSupported[i],
-          approvedTokens: response.data?.opc.approvedTokens?.map((x) => x.id),
-          swapApprovedFee: response.data?.opc.swapOceanFee,
-          swapNotApprovedFee: response.data?.opc.swapNonOceanFee
+          approvedTokens: response?.data?.opc.approvedTokens?.map((x) => x.id),
+          swapApprovedFee: response?.data?.opc.swapOceanFee,
+          swapNotApprovedFee: response?.data?.opc.swapNonOceanFee
         } as OpcFee)
       }
       setOpcFees(opcData)

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

@@ -3,11 +3,8 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 import AssetComputeList, {
   AssetComputeListProps
 } from '@shared/AssetList/AssetComputeList'
-import {
-  assetSelectionAsset,
-  locale,
-  prices
-} from '../../../../../.storybook/__mockdata__'
+import { assetSelectionAsset } from '../../../../../.storybook/__mockdata__'
+import MarketMetadataProvider from '@context/MarketMetadata'
 
 export default {
   title: 'Component/@shared/AssetList/AssetComputeList',
@@ -16,7 +13,13 @@ export default {
 
 const Template: ComponentStory<typeof AssetComputeList> = (
   args: AssetComputeListProps
-) => <AssetComputeList {...args} />
+) => {
+  return (
+    <MarketMetadataProvider>
+      <AssetComputeList {...args} />
+    </MarketMetadataProvider>
+  )
+}
 
 interface Props {
   args: AssetComputeListProps

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

@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'
 import AssetListTitle, {
   AssetListTitleProps
 } from '@shared/AssetList/AssetListTitle'
-import { asset } from '../../../../../.storybook/__mockdata__'
+import MarketMetadataProvider from '@context/MarketMetadata'
 
 export default {
   title: 'Component/@shared/AssetList/AssetListTitle',
@@ -12,7 +12,13 @@ export default {
 
 const Template: ComponentStory<typeof AssetListTitle> = (
   args: AssetListTitleProps
-) => <AssetListTitle {...args} />
+) => {
+  return (
+    <MarketMetadataProvider>
+      <AssetListTitle {...args} />
+    </MarketMetadataProvider>
+  )
+}
 
 interface Props {
   args: AssetListTitleProps

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

@@ -4,6 +4,8 @@ import AssetSelection, {
   AssetSelectionProps
 } from '@shared/FormFields/AssetSelection'
 import { assetSelectionAsset } from '../../../../../.storybook/__mockdata__'
+import MarketMetadataProvider from '@context/MarketMetadata'
+import { UserPreferencesProvider } from '@context/UserPreferences'
 
 export default {
   title: 'Component/@shared/FormFields/AssetSelection',
@@ -12,8 +14,15 @@ export default {
 
 const Template: ComponentStory<typeof AssetSelection> = (
   args: AssetSelectionProps
-) => <AssetSelection {...args} />
-
+) => {
+  return (
+    <MarketMetadataProvider>
+      <UserPreferencesProvider>
+        <AssetSelection {...args} />
+      </UserPreferencesProvider>
+    </MarketMetadataProvider>
+  )
+}
 interface Props {
   args: AssetSelectionProps
 }

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

@@ -24,3 +24,16 @@ Default.args = {
     </a>
   )
 }
+
+export const WithDescription: Props = Template.bind({})
+WithDescription.args = {
+  ...Default.args,
+  description:
+    'Data owners and consumers use Ocean Market app to publish, discover, and consume data in a secure, privacy-preserving fashion. OCEAN holders stake liquidity to data pools.'
+}
+
+export const WithTitle: Props = Template.bind({})
+WithTitle.args = {
+  ...WithDescription.args,
+  title: 'Ocean Market'
+}

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

@@ -0,0 +1,30 @@
+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 {
+  title: 'Component/@shared/Pagination',
+  component: Pagination
+} as ComponentMeta<typeof Pagination>
+
+const Template: ComponentStory<typeof Pagination> = (args: PaginationProps) => {
+  return (
+    <MarketMetadataProvider>
+      <Pagination {...args} />
+    </MarketMetadataProvider>
+  )
+}
+
+interface Props {
+  args: PaginationProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  totalPages: 10,
+  currentPage: 1,
+  rowsPerPage: 3
+}

src/components/@shared/Price/PriceUnit/index.stories.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import PriceUnit, { PriceUnitProps } from '@shared/Price/PriceUnit'
-import MarketMetadataProvider from '@context/MarketMetadata'
-import PricesProvider from '@context/Prices'
 import { UserPreferencesProvider } from '@context/UserPreferences'
+import MarketMetadataProvider from '@context/MarketMetadata'
 
 export default {
   title: 'Component/@shared/Price/PriceUnit',

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

@@ -0,0 +1,12 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import Add from '@shared/Publisher/Add'
+
+export default {
+  title: 'Component/@shared/Add',
+  component: Add
+} as ComponentMeta<typeof Add>
+
+const Template: ComponentStory<typeof Add> = () => <Add />
+
+export const Default = Template.bind({})

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

@@ -0,0 +1,28 @@
+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',
+  component: Publisher
+} as ComponentMeta<typeof Publisher>
+
+const Template: ComponentStory<typeof Publisher> = (args: PublisherProps) => (
+  <Publisher {...args} />
+)
+
+interface Props {
+  args: PublisherProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  account: '0x134B4eDd7dE8Ea003E721e7670800BA97D9AF1fd'
+}
+
+export const MinimalProfile: Props = Template.bind({})
+MinimalProfile.args = {
+  account: '0x134B4eDd7dE8Ea003E721e7670800BA97D9AF1fd',
+  minimal: true
+}

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

@@ -10,15 +10,17 @@ import { useIsMounted } from '@hooks/useIsMounted'
 
 const cx = classNames.bind(styles)
 
+export interface PublisherProps {
+  account: string
+  minimal?: boolean
+  className?: string
+}
+
 export default function Publisher({
   account,
   minimal,
   className
-}: {
-  account: string
-  minimal?: boolean
-  className?: string
-}): ReactElement {
+}: PublisherProps): ReactElement {
   const isMounted = useIsMounted()
   const [profile, setProfile] = useState<Profile>()
   const [name, setName] = useState('')