@dynamic-labs/sdk-react-core
Version:
A React SDK for implementing wallet web3 authentication and authorization to your website.
89 lines (86 loc) • 3.35 kB
JavaScript
'use client'
import { jsx } from 'react/jsx-runtime';
import { createContext, useContext, useState, useMemo, useCallback } from 'react';
import { useInternalDynamicEvents } from '../../utils/hooks/events/useDynamicEvents/useDynamicEvents.js';
import { useErrorContext } from '../ErrorContext/ErrorContext.js';
const ViewContext = createContext(undefined);
const ViewContextProvider = ({ children, initialViewType }) => {
var _a;
const [stack, setStack] = useState([]);
const initialView = useMemo(() => ({ type: initialViewType }), [initialViewType]);
const view = (_a = stack[stack.length - 1]) !== null && _a !== void 0 ? _a : initialView;
const { clearError } = useErrorContext();
const pushView = useCallback((type, props, events) => {
if (view.type === type)
return;
clearError();
// If the stack was "empty" (i.e. showing a default view), let's make sure the stack
// reflects this by having this default view as the first item in the stack
setStack((stack) => {
if (stack.length === 0)
return [{ type: initialViewType }, { events, props, type }];
else
return [...stack, { events, props, type }];
});
}, [clearError, view.type, initialViewType]);
const replaceView = useCallback((type, props, events) => {
if (view.type === type)
return;
clearError();
setStack((prev) => {
if (prev.length <= 1) {
return [{ type: initialViewType }, { events, props, type }];
}
return [...prev.slice(0, -1), { events, props, type }];
});
}, [clearError, initialViewType, view.type]);
const canGoBack = stack.length > 1;
const goBack = useCallback(() => {
if (!canGoBack)
return;
clearError();
setStack((prev) => prev.slice(0, -1));
}, [canGoBack, clearError]);
const clearStackAndPush = useCallback((type, props, events) => {
clearError();
setStack([{ events, props, type }]);
}, [clearError]);
const clearStackAndPushInitialView = useCallback(() => {
clearError();
setStack((stack) => {
if (stack.length > 0)
return [];
return stack;
});
}, [clearError]);
useInternalDynamicEvents('logout', clearStackAndPushInitialView);
// Wait for the auth flow animation transition to finish before clearing the stack
useInternalDynamicEvents('authFlowClose', () => setTimeout(clearStackAndPushInitialView, 100));
const value = useMemo(() => ({
canGoBack: stack.length > 1,
clearStackAndPush,
clearStackAndPushInitialView,
goBack,
pushView,
replaceView,
stack,
view,
}), [
clearStackAndPushInitialView,
goBack,
clearStackAndPush,
pushView,
view,
stack,
replaceView,
]);
return jsx(ViewContext.Provider, { value: value, children: children });
};
const useViewContext = () => {
const context = useContext(ViewContext);
if (context === undefined) {
throw new Error('usage of useViewContext not wrapped in `ViewContextProvider`.');
}
return context;
};
export { ViewContext, ViewContextProvider, useViewContext };