From b0e57c66df6fe4764dd1cab973caaec17bc1b168 Mon Sep 17 00:00:00 2001 From: Enzo Vezzaro Date: Mon, 20 Jun 2022 07:22:29 -0400 Subject: [PATCH] added token and refactor TokenApprove (es ButtonApprove) --- .../Price/Conversion/index.stories.tsx | 5 --- .../@shared/Token/index.stories.tsx | 18 ++++++--- .../{ButtonApprove.tsx => TokenApprove.tsx} | 2 +- .../@shared/TokenApproval/index.stories.tsx | 38 +++++++++++++++++++ .../@shared/TokenApproval/index.tsx | 26 +++++++------ 5 files changed, 66 insertions(+), 23 deletions(-) rename src/components/@shared/TokenApproval/{ButtonApprove.tsx => TokenApprove.tsx} (97%) create mode 100644 src/components/@shared/TokenApproval/index.stories.tsx diff --git a/src/components/@shared/Price/Conversion/index.stories.tsx b/src/components/@shared/Price/Conversion/index.stories.tsx index 48fc144a7..f79357153 100644 --- a/src/components/@shared/Price/Conversion/index.stories.tsx +++ b/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', diff --git a/src/components/@shared/Token/index.stories.tsx b/src/components/@shared/Token/index.stories.tsx index c08c7f29d..35d2ba549 100644 --- a/src/components/@shared/Token/index.stories.tsx +++ b/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 const Template: ComponentStory = (args: TokenProps) => { - return + return ( + + + + + + + + ) } 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' } diff --git a/src/components/@shared/TokenApproval/ButtonApprove.tsx b/src/components/@shared/TokenApproval/TokenApprove.tsx similarity index 97% rename from src/components/@shared/TokenApproval/ButtonApprove.tsx rename to src/components/@shared/TokenApproval/TokenApprove.tsx index 9583d494c..2e0bf2aa1 100644 --- a/src/components/@shared/TokenApproval/ButtonApprove.tsx +++ b/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, diff --git a/src/components/@shared/TokenApproval/index.stories.tsx b/src/components/@shared/TokenApproval/index.stories.tsx new file mode 100644 index 000000000..6c5832489 --- /dev/null +++ b/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 + +const Template: ComponentStory = ( + args: TokenApprovalProps +) => { + return ( + + + + + + ) +} + +interface Props { + args: TokenApprovalProps +} + +export const Default: Props = Template.bind({}) +Default.args = { + actionButton:

test

, + disabled: false, + amount: '1', + tokenAddress: '0x0000000000000000000000000000000000000000', + tokenSymbol: 'ETH', + setIsTokenApproved: () => { + console.log('clicked') + } +} diff --git a/src/components/@shared/TokenApproval/index.tsx b/src/components/@shared/TokenApproval/index.tsx index ce5ca2630..3f7e58a32 100644 --- a/src/components/@shared/TokenApproval/index.tsx +++ b/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 ) : ( -