diff --git a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx index 6caebae54a..a9a750b7b5 100644 --- a/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx +++ b/packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx @@ -38,7 +38,6 @@ import { TopUpView } from '../../views/top-up/TopUpView'; import { UserJourney } from '../../context/analytics-provider/SegmentAnalyticsProvider'; import { sendSaleWidgetCloseEvent } from './SaleWidgetEvents'; import { EventTargetContext } from '../../context/event-target-context/EventTargetContext'; -import { useClientConfig } from './hooks/useClientConfig'; export interface SaleWidgetProps extends Required> { @@ -66,12 +65,6 @@ export default function SaleWidget(props: SaleWidgetProps) { () => ({ viewState, viewDispatch }), [viewState, viewDispatch], ); - const { currency, clientConfig } = useClientConfig({ - environmentId, - environment: config.environment, - }); - - const fromTokenAddress = currency?.erc20Address || ''; const loadingText = viewState.view.data?.loadingText || t('views.LOADING_VIEW.text'); @@ -86,7 +79,7 @@ export default function SaleWidget(props: SaleWidgetProps) { const mounted = useRef(false); const onMount = useCallback(() => { - if (!checkout || !provider || fromTokenAddress === '') return; + if (!checkout || !provider) return; if (!mounted.current) { mounted.current = true; @@ -99,13 +92,13 @@ export default function SaleWidget(props: SaleWidgetProps) { }, }); } - }, [checkout, provider, fromTokenAddress]); + }, [checkout, provider]); useEffect(() => { if (!checkout || !provider) return; onMount(); - }, [checkout, provider, currency]); + }, [checkout, provider]); return ( @@ -114,14 +107,12 @@ export default function SaleWidget(props: SaleWidgetProps) { config, items, amount, - fromTokenAddress, environment: config.environment, environmentId, provider, checkout, passport: checkout?.passport, collectionName, - clientConfig, }} > diff --git a/packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx b/packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx index 3f488b78f9..940608f0f1 100644 --- a/packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx +++ b/packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx @@ -40,7 +40,7 @@ import { } from '../types'; import { useSmartCheckout } from '../hooks/useSmartCheckout'; -import { defaultClientConfig } from '../hooks/useClientConfig'; +import { useClientConfig, defaultClientConfig } from '../hooks/useClientConfig'; type SaleContextProps = { config: StrongCheckoutWidgetsConfig; @@ -49,11 +49,9 @@ type SaleContextProps = { items: SaleItem[]; amount: string; collectionName: string; - fromTokenAddress: string; provider: ConnectLoaderState['provider']; checkout: ConnectLoaderState['checkout']; passport?: Passport; - clientConfig: ClientConfig; }; type SaleContextValues = SaleContextProps & { @@ -86,13 +84,15 @@ type SaleContextValues = SaleContextProps & { fundingRoutes: FundingRoute[]; disabledPaymentTypes: SalePaymentTypes[]; invalidParameters: boolean; + fromTokenAddress: string; + clientConfig: ClientConfig; + signTokenIds: string[]; }; // eslint-disable-next-line @typescript-eslint/naming-convention const SaleContext = createContext({ items: [], amount: '', - fromTokenAddress: '', collectionName: '', provider: undefined, checkout: undefined, @@ -118,7 +118,9 @@ const SaleContext = createContext({ fundingRoutes: [], disabledPaymentTypes: [], invalidParameters: false, + fromTokenAddress: '', clientConfig: defaultClientConfig, + signTokenIds: [], }); SaleContext.displayName = 'SaleSaleContext'; @@ -138,12 +140,10 @@ export function SaleContextProvider(props: { environmentId, items, amount, - fromTokenAddress, provider, checkout, passport, collectionName, - clientConfig, }, } = props; @@ -168,6 +168,13 @@ export function SaleContextProvider(props: { const [invalidParameters, setInvalidParameters] = useState(false); + const { currency, clientConfig } = useClientConfig({ + environmentId, + environment: config.environment, + }); + + const fromTokenAddress = currency?.erc20Address || ''; + const goBackToPaymentMethods = useCallback( ( type?: SalePaymentTypes | undefined, @@ -222,6 +229,12 @@ export function SaleContextProvider(props: { type: SignPaymentTypes, callback?: (r?: SignResponse) => void, ): Promise => { + const invalidFromTokenAddress = !fromTokenAddress || !fromTokenAddress.startsWith('0x'); + if (invalidFromTokenAddress) { + setInvalidParameters(true); + return undefined; + } + const response = await signOrder(type, fromTokenAddress); if (!response) return undefined; @@ -360,20 +373,11 @@ export function SaleContextProvider(props: { useEffect(() => { const invalidItems = !items || items.length === 0; const invalidAmount = !amount || amount === '0'; - const invalidFromTokenAddress = !fromTokenAddress || !fromTokenAddress.startsWith('0x'); - if ( - invalidItems - || invalidAmount - || invalidFromTokenAddress - || !collectionName - || !environmentId - ) { + if (invalidItems || invalidAmount || !collectionName || !environmentId) { setInvalidParameters(true); - } else { - setInvalidParameters(false); } - }, [items, amount, fromTokenAddress, collectionName, environmentId]); + }, [items, amount, collectionName, environmentId]); const values = useMemo( () => ({ @@ -405,6 +409,7 @@ export function SaleContextProvider(props: { disabledPaymentTypes, invalidParameters, clientConfig, + signTokenIds: tokenIds, }), [ config, @@ -432,6 +437,7 @@ export function SaleContextProvider(props: { disabledPaymentTypes, invalidParameters, clientConfig, + tokenIds, ], );