[NO-CHANGELOG] feat: primary revenue widget hooks - part 2

packages/checkout/widgets-lib/src/app.tsx

@@ -38,7 +38,7 @@ function App() {
       </h2>
       <br />
       <h2>
-        <a href="/primary-revenue?amount=0.01&fromCurrency=USDC&envId=123">Primary Revenue Widget</a>
+        <a href="/primary-revenue">Primary Revenue Widget</a>
       </h2>
       <br />
     </div>

packages/checkout/widgets-lib/src/widgets/primary-revenue/PrimaryRevenueWidget.tsx

@@ -20,6 +20,7 @@ import { ConnectLoaderContext } from '../../context/connect-loader-context/Conne
 import { PrimaryRevenueWidgetViews } from '../../context/view-context/PrimaryRevenueViewContextTypes';
 import { Item } from './types';
 import { widgetTheme } from '../../lib/theme';
+import { SharedContextProvider } from './context/SharedContextProvider';
 
 export interface PrimaryRevenueWidgetProps {
   config: StrongCheckoutWidgetsConfig;
@@ -35,7 +36,15 @@ export function PrimaryRevenueWidget(props: PrimaryRevenueWidgetProps) {
     config, amount, items, fromContractAddress, env, environmentId,
   } = props;
 
-  console.log('@@@ PrimaryRevenueWidget', config, amount, items, fromContractAddress, env, environmentId);
+  console.log(
+    '@@@ PrimaryRevenueWidget',
+    config,
+    amount,
+    items,
+    fromContractAddress,
+    env,
+    environmentId,
+  );
 
   const { connectLoaderState } = useContext(ConnectLoaderContext);
   const { checkout, provider } = connectLoaderState;
@@ -51,7 +60,7 @@ export function PrimaryRevenueWidget(props: PrimaryRevenueWidgetProps) {
     [viewState, viewDispatch],
   );
 
-  const mount = useCallback(() => {
+  const onMount = useCallback(() => {
     if (!checkout || !provider) return;
 
     viewDispatch({
@@ -66,16 +75,35 @@ export function PrimaryRevenueWidget(props: PrimaryRevenueWidgetProps) {
 
   useEffect(() => {
     if (!checkout || !provider) return;
-    mount();
+
+    onMount();
   }, [checkout, provider]);
 
   return (
     <BiomeCombinedProviders theme={{ base: biomeTheme }}>
       <ViewContext.Provider value={viewReducerValues}>
-        {viewState.view.type === SharedViews.LOADING_VIEW && (
-          <LoadingView loadingText={loadingText} />
-        )}
-        Primary Revenue Widget
+        <SharedContextProvider
+          value={{
+            items,
+            amount,
+            fromContractAddress,
+            env,
+            environmentId,
+            provider,
+            checkout,
+          }}
+        >
+          {viewState.view.type === SharedViews.LOADING_VIEW && (
+            <LoadingView loadingText={loadingText} />
+          )}
+          {viewState.view.type === SharedViews.ERROR_VIEW && (
+            <div>{viewState.view.error.message}</div>
+          )}
+          {viewState.view.type
+            === PrimaryRevenueWidgetViews.PAYMENT_METHODS && (
+            <div>Payment methods</div>
+          )}
+        </SharedContextProvider>
       </ViewContext.Provider>
     </BiomeCombinedProviders>
   );

packages/checkout/widgets-lib/src/widgets/primary-revenue/context/SharedContextProvider.tsx

@@ -0,0 +1,109 @@
+import {
+  useContext,
+  createContext,
+  useMemo,
+  ReactNode,
+  useEffect,
+  useState,
+} from 'react';
+
+import { PrimaryRevenueSuccess } from '@imtbl/checkout-widgets';
+
+import { Item, PaymentTypes, SignResponse } from '../types';
+import { useSignOrder } from '../hooks/useSignOrder';
+import { ConnectLoaderState } from '../../../context/connect-loader-context/ConnectLoaderContext';
+
+type SharedContextProps = {
+  env: string;
+  environmentId: string;
+  items: Item[];
+  amount: string;
+  fromContractAddress: string;
+  provider: ConnectLoaderState['provider'];
+  checkout: ConnectLoaderState['checkout'];
+};
+
+type SharedContextValues = SharedContextProps & {
+  sign: (paymentType: PaymentTypes) => Promise<SignResponse | undefined>
+  execute: () => Promise<PrimaryRevenueSuccess>;
+  recipientAddress: string;
+  signResponse: SignResponse | undefined;
+};
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const SharedContext = createContext<SharedContextValues>({
+  items: [],
+  amount: '',
+  fromContractAddress: '',
+  provider: undefined,
+  checkout: undefined,
+  environmentId: '',
+  env: '',
+  recipientAddress: '',
+  sign: () => Promise.resolve(undefined),
+  execute: () => Promise.resolve({} as PrimaryRevenueSuccess),
+  signResponse: undefined,
+});
+
+SharedContext.displayName = 'PrimaryRevenueSharedContext';
+
+export function SharedContextProvider(props: {
+  children: ReactNode;
+  value: SharedContextProps;
+}) {
+  const {
+    children,
+    value: {
+      env, environmentId, items, amount, fromContractAddress, provider, checkout,
+    },
+  } = props;
+
+  const [recipientAddress, setRecipientAddress] = useState<string>('');
+
+  // Get recipient address
+  useEffect(() => {
+    const getRecipientAddress = async () => {
+      const signer = provider?.getSigner();
+      const address = await signer?.getAddress();
+      if (address) {
+        setRecipientAddress(address);
+      }
+    };
+
+    getRecipientAddress();
+  }, [provider]);
+
+  const { sign, execute, signResponse } = useSignOrder({
+    items,
+    provider,
+    fromContractAddress,
+    recipientAddress,
+    environmentId,
+    env,
+  });
+
+  const values = useMemo(
+    () => ({
+      items,
+      amount,
+      fromContractAddress,
+      sign,
+      execute,
+      signResponse,
+      environmentId,
+      env,
+      provider,
+      checkout,
+      recipientAddress,
+    }),
+    [env, environmentId, items, amount, fromContractAddress, provider, checkout, recipientAddress, signResponse],
+  );
+
+  return (
+    <SharedContext.Provider value={values}>{children}</SharedContext.Provider>
+  );
+}
+
+export function useSharedContext() {
+  return useContext(SharedContext);
+}