remove locale, currency and prices as props, use providers for stories

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

@@ -24,8 +24,5 @@ interface Props {
 
 export const Default: Props = Template.bind({})
 Default.args = {
-  assets: assetSelectionAsset,
+  assets: assetSelectionAsset
-  locale,
-  currency: 'OCEAN',
-  prices
 }

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

@@ -29,11 +29,8 @@ interface Props {
 
 export const Default: Props = Template.bind({})
 Default.args = {
-  locale,
   assets,
   showPagination: false,
   chainIds: config.chainIds,
-  accountId: mockWallet,
+  accountId: mockWallet
-  currency: 'OCEAN',
-  prices
 }

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

@@ -25,8 +25,5 @@ interface Props {
 
 export const Default: Props = Template.bind({})
 Default.args = {
-  locale,
-  currency,
-  prices,
   asset: assetExtended
 }

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

@@ -24,23 +24,17 @@ interface Props {
 
 export const Default: Props = Template.bind({})
 Default.args = {
-  assets: assetSelectionAsset,
+  assets: assetSelectionAsset
-  currency: 'OCEAN',
-  prices
 }
 
 export const Multiple: Props = Template.bind({})
 Multiple.args = {
   assets: assetSelectionAsset,
-  multiple: true,
+  multiple: true
-  currency: 'OCEAN',
-  prices
 }
 
 export const Disabled: Props = Template.bind({})
 Disabled.args = {
   assets: assetSelectionAsset,
-  disabled: true,
+  disabled: true
-  currency: 'OCEAN',
-  prices
 }

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

@@ -7,7 +7,6 @@ import External from '@images/external.svg'
 import InputElement from '@shared/FormInput/InputElement'
 import Loader from '@shared/atoms/Loader'
 import styles from './index.module.css'
-import { Prices } from '@context/Prices'
 
 const cx = classNames.bind(styles)
 
@@ -21,8 +20,6 @@ export interface AssetSelectionAsset {
 
 export interface AssetSelectionProps {
   assets: AssetSelectionAsset[]
-  currency: string
-  prices: Prices
   multiple?: boolean
   disabled?: boolean
 }

src/components/@shared/FormInput/InputElement.tsx

@@ -11,8 +11,6 @@ import AssetSelection, {
 } from '../FormFields/AssetSelection'
 import Nft from '../FormFields/Nft'
 import InputRadio from './InputRadio'
-import { useUserPreferences } from '@context/UserPreferences'
-import { usePrices } from '@context/Prices'
 
 const cx = classNames.bind(styles)
 
@@ -57,8 +55,7 @@ export default function InputElement({
   ...props
 }: InputProps): ReactElement {
   const styleClasses = cx({ select: true, [size]: size })
-  const { locale, currency } = useUserPreferences()
+
-  const { prices } = usePrices()
   switch (props.type) {
     case 'select': {
       const sortedOptions =
@@ -95,9 +92,6 @@ export default function InputElement({
       return (
         <AssetSelection
           assets={options as unknown as AssetSelectionAsset[]}
-          locale={locale}
-          currency={currency}
-          prices={prices}
           {...field}
           {...props}
         />
@@ -107,9 +101,6 @@ export default function InputElement({
       return (
         <AssetSelection
           assets={options as unknown as AssetSelectionAsset[]}
-          locale={locale}
-          currency={currency}
-          prices={prices}
           multiple
           {...field}
           {...props}

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

@@ -1,6 +1,9 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import Conversion, { ConversionProps } from '@shared/Price/Conversion'
+import PricesProvider from '@context/Prices'
+import MarketMetadataProvider from '@context/MarketMetadata'
+import { UserPreferencesProvider } from '@context/UserPreferences'
 
 export default {
   title: 'Component/@shared/Price/Conversion',
@@ -8,7 +11,15 @@ export default {
 } as ComponentMeta<typeof Conversion>
 
 const Template: ComponentStory<typeof Conversion> = (args: ConversionProps) => {
-  return <Conversion {...args} />
+  return (
+    <MarketMetadataProvider>
+      <UserPreferencesProvider>
+        <PricesProvider>
+          <Conversion {...args} />
+        </PricesProvider>
+      </UserPreferencesProvider>
+    </MarketMetadataProvider>
+  )
 }
 
 interface Props {

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

@@ -1,11 +1,8 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import PriceUnit, { PriceUnitProps } from '@shared/Price/PriceUnit'
-import {
+import MarketMetadataProvider from '@context/MarketMetadata'
-  locale,
+import PricesProvider from '@context/Prices'
-  currency,
-  prices
-} from '../../../../../.storybook/__mockdata__'
 
 export default {
   title: 'Component/@shared/Price/PriceUnit',
@@ -13,7 +10,13 @@ export default {
 } as ComponentMeta<typeof PriceUnit>
 
 const Template: ComponentStory<typeof PriceUnit> = (args: PriceUnitProps) => {
-  return <PriceUnit {...args} />
+  return (
+    <MarketMetadataProvider>
+      <PricesProvider>
+        <PriceUnit {...args} />
+      </PricesProvider>
+    </MarketMetadataProvider>
+  )
 }
 
 interface Props {
@@ -22,8 +25,5 @@ interface Props {
 
 export const Default: Props = Template.bind({})
 Default.args = {
-  price: '11.12333',
+  price: '11.12333'
-  locale,
-  currency,
-  prices
 }