added token and refactor TokenApprove (es ButtonApprove)

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

@@ -1,11 +1,6 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import Conversion, { ConversionProps } from '@shared/Price/Conversion'
-import {
-  locale,
-  currency,
-  prices
-} from '../../../../../.storybook/__mockdata__'
 
 export default {
   title: 'Component/@shared/Price/Conversion',

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

@@ -2,6 +2,9 @@ import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
 import Token, { TokenProps } from '@shared/Token'
 import { locale, currency, prices } from '../../../../.storybook/__mockdata__'
+import { PricesProvider } from '@context/Prices'
+import { UserPreferencesProvider } from '@context/UserPreferences'
+import { MarketMetadataProvider } from '@context/MarketMetadata'
 
 export default {
   title: 'Component/@shared/Token',
@@ -9,7 +12,15 @@ export default {
 } as ComponentMeta<typeof Token>
 
 const Template: ComponentStory<typeof Token> = (args: TokenProps) => {
-  return <Token {...args} />
+  return (
+    <MarketMetadataProvider>
+      <UserPreferencesProvider>
+        <PricesProvider>
+          <Token {...args} />
+        </PricesProvider>
+      </UserPreferencesProvider>
+    </MarketMetadataProvider>
+  )
 }
 
 interface Props {
@@ -19,8 +30,5 @@ interface Props {
 export const Default: Props = Template.bind({})
 Default.args = {
   symbol: 'ETH',
-  balance: '1',
-  locale,
-  currency,
-  prices
+  balance: '1'
 }

src/components/@shared/TokenApproval/TokenApprove.tsx

@@ -5,7 +5,7 @@ import { useUserPreferences } from '@context/UserPreferences'
 import Tooltip from '@shared/atoms/Tooltip'
 import content from '../../../../content/price.json'
 
-export function ButtonApprove({
+export function TokenApprove({
   amount,
   tokenSymbol,
   approveTokens,

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import TokenApproval, { TokenApprovalProps } from '@shared/TokenApproval'
+import { UserPreferencesProvider } from '@context/UserPreferences'
+import { MarketMetadataProvider } from '@context/MarketMetadata'
+
+export default {
+  title: 'Component/@shared/TokenApproval',
+  component: TokenApproval
+} as ComponentMeta<typeof TokenApproval>
+
+const Template: ComponentStory<typeof TokenApproval> = (
+  args: TokenApprovalProps
+) => {
+  return (
+    <MarketMetadataProvider>
+      <UserPreferencesProvider>
+        <TokenApproval {...args} />
+      </UserPreferencesProvider>
+    </MarketMetadataProvider>
+  )
+}
+
+interface Props {
+  args: TokenApprovalProps
+}
+
+export const Default: Props = Template.bind({})
+Default.args = {
+  actionButton: <p>test</p>,
+  disabled: false,
+  amount: '1',
+  tokenAddress: '0x0000000000000000000000000000000000000000',
+  tokenSymbol: 'ETH',
+  setIsTokenApproved: () => {
+    console.log('clicked')
+  }
+}

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

@@ -2,9 +2,19 @@ import React, { ReactElement, useCallback, useEffect, useState } from 'react'
 import { useAsset } from '@context/Asset'
 import { useWeb3 } from '@context/Web3'
 import Decimal from 'decimal.js'
-import { ButtonApprove } from './ButtonApprove'
+import { TokenApprove } from './TokenApprove'
 import { allowance, approve, LoggerInstance } from '@oceanprotocol/lib'
 
+export interface TokenApprovalProps {
+  actionButton: JSX.Element
+  disabled: boolean
+  amount: string
+  tokenAddress: string
+  tokenSymbol: string
+  setSubmitting?: (isSubmitting: boolean) => void
+  setIsTokenApproved: (isApproved: boolean) => void
+}
+
 export default function TokenApproval({
   actionButton,
   disabled,
@@ -13,19 +23,11 @@ export default function TokenApproval({
   tokenSymbol,
   setSubmitting,
   setIsTokenApproved
-}: {
-  actionButton: JSX.Element
-  disabled: boolean
-  amount: string
-  tokenAddress: string
-  tokenSymbol: string
-  setSubmitting?: (isSubmitting: boolean) => void
-  setIsTokenApproved: (isApproved: boolean) => void
-}): ReactElement {
+}: TokenApprovalProps): ReactElement {
   const { asset, isAssetNetwork } = useAsset()
+  const { web3, accountId } = useWeb3()
   const [tokenApproved, setTokenApproved] = useState(false)
   const [loading, setLoading] = useState(false)
-  const { web3, accountId } = useWeb3()
 
   const spender = asset?.accessDetails?.addressOrId
 
@@ -84,7 +86,7 @@ export default function TokenApproval({
       typeof amount === 'undefined' ? (
         actionButton
       ) : (
-        <ButtonApprove
+        <TokenApprove
           amount={amount}
           tokenSymbol={tokenSymbol}
           approveTokens={approveTokens}