fix: marketing section and nonce improvement

package.json

@@ -70,11 +70,11 @@
     "@thirdweb-dev/react": "^4.9.4",
     "@thirdweb-dev/sdk": "^4.0.99",
     "@vidstack/react": "^1.9.7",
-    "@web3auth/account-abstraction-provider": "~9.4.5",
-    "@web3auth/base": "~9.4.5",
-    "@web3auth/ethereum-provider": "~9.4.0",
-    "@web3auth/modal": "~9.4.0",
-    "@web3auth/modal-react-hooks": "~9.4.0",
+    "@web3auth/account-abstraction-provider": "~9.7.0",
+    "@web3auth/base": "~9.7.0",
+    "@web3auth/ethereum-provider": "~9.7.0",
+    "@web3auth/modal": "~9.7.0",
+    "@web3auth/modal-react-hooks": "~9.7.0",
     "apexcharts": "^4.3.0",
     "autosuggest-highlight": "^3.3.4",
     "axios": "^1.4.0",

src/components/avatar/avatar.tsx

@@ -1,8 +1,8 @@
-// @mui
+import React, { forwardRef } from 'react';
 import Avatar from '@mui/material/Avatar';
-import { CSSProperties, FC } from 'react';
-import { COLORS } from '@src/layouts/config-layout.ts';
 import { SxProps } from '@mui/material/styles';
+import { CSSProperties } from 'react';
+import { COLORS } from '@src/layouts/config-layout.ts';
 import { resolveSrc } from '@src/utils/image.ts';
 
 interface AvatarProfileProps {
@@ -15,23 +15,22 @@ interface AvatarProfileProps {
   imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
 }
 
-const AvatarProfile: FC<AvatarProfileProps> = ({ src, alt, sx, ...other }) => {
-  const imageSrc = resolveSrc(src);
+const AvatarProfile = forwardRef<HTMLDivElement, AvatarProfileProps>(
+  ({ src, alt, sx, ...other }, ref) => {
+    const imageSrc = resolveSrc(src);
 
-  const avatarStyles = {
-    backgroundColor: COLORS.GRAY_DARK,
-    fontWeight: 'bold',
-    ...sx,
-  };
+    return (
+      <Avatar
+        ref={ref}
+        alt={alt?.toUpperCase() ?? 'Avatar profile'}
+        src={imageSrc}
+        sx={{ backgroundColor: COLORS.GRAY_DARK, fontWeight: 'bold', ...sx }}
+        {...other}
+      />
+    );
+  }
+);
 
-  return (
-    <Avatar
-      alt={alt?.toUpperCase() ?? 'Avatar profile'}
-      src={imageSrc}
-      sx={avatarStyles}
-      {...other}
-    />
-  );
-};
+AvatarProfile.displayName = 'AvatarProfile';
 
 export default AvatarProfile;

src/hooks/protocol/use-authorize-policy.ts

@@ -2,18 +2,17 @@
 import { useState } from 'react';
 
 // VIEM IMPORTS
-import { Address, encodeFunctionData } from 'viem';
+import { encodeFunctionData } from 'viem';
 
 // LOCAL IMPORTS
 import RightsPolicyAuthorizerAbi from '@src/config/abi/RightsPolicyAuthorizer.json';
 import { useAccountSession } from '@src/hooks/use-account-session.ts';
 import { useAuth } from '@src/hooks/use-auth.ts';
 import {AuthorizePolicyParams, UseAuthorizePolicyHook, UseAuthorizePolicyResult} from '@src/hooks/protocol/types.ts'
-import { Calls, WaitForUserOperationReceiptReturnType } from '@src/hooks/types.ts'
+import { Calls } from '@src/hooks/types.ts'
 import { ERRORS } from '@src/libs/notifications/errors.ts';
 import { GLOBAL_CONSTANTS } from '@src/config-global.ts';
 import { useWeb3Auth } from '@src/hooks/use-web3-auth.ts';
-import { getNonce } from '@src/utils/wallet.ts';
 
 // ----------------------------------------------------------------------
 
@@ -22,7 +21,7 @@ export const useAuthorizePolicy = (): UseAuthorizePolicyHook => {
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<keyof typeof ERRORS | null>(null);
   const { session } = useAuth();
-  const { bundlerClient, smartAccount } = useWeb3Auth();
+  const { sendOperation } = useWeb3Auth();
   const { logout } = useAccountSession();
 
   /**
@@ -70,17 +69,7 @@ export const useAuthorizePolicy = (): UseAuthorizePolicyHook => {
         },
       ];
 
-      // Send the user operation
-      const userOpHash = await bundlerClient?.sendUserOperation({
-        account: smartAccount,
-        calls: calls,
-        nonce: await getNonce(smartAccount)
-      });
-
-      // Wait for the user operation receipt
-      const receipt: WaitForUserOperationReceiptReturnType = await bundlerClient?.waitForUserOperationReceipt({
-        hash: userOpHash as Address,
-      });
+      const receipt = await sendOperation(calls);
 
       // Update the state with the result
       setData(receipt);

src/hooks/protocol/use-campaign-pause.ts

@@ -4,16 +4,15 @@ import CampaignSubscriptionTplAbi from '@src/config/abi/CampaignSubscriptionTpl.
 import { ERRORS } from '@src/libs/notifications/errors';
 import { useAccountSession } from '@src/hooks/use-account-session.ts';
 import {UseCampaignPauseHook, UseCampaignPauseResult} from '@src/hooks/protocol/types.ts'
-import { Calls, WaitForUserOperationReceiptReturnType } from '@src/hooks/types.ts'
+import { Calls } from '@src/hooks/types.ts'
 import { useAuth } from '@src/hooks/use-auth.ts';
 import { useWeb3Auth } from '@src/hooks/use-web3-auth.ts';
-import { getNonce } from '@src/utils/wallet.ts';
 
 export const useCampaignPause = (): UseCampaignPauseHook => {
   const [data, setData] = useState<UseCampaignPauseResult | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<keyof typeof ERRORS | null>(null);
-  const { bundlerClient, smartAccount } = useWeb3Auth();
+  const { sendOperation } = useWeb3Auth();
   const { logout } = useAccountSession();
   const { session } = useAuth();
 
@@ -43,14 +42,8 @@ export const useCampaignPause = (): UseCampaignPauseHook => {
         },
       ];
 
-      const userOpHash = await bundlerClient?.sendUserOperation({
-        account: smartAccount,
-        calls,
-        nonce: await getNonce(smartAccount)
-      });
-      const receipt: WaitForUserOperationReceiptReturnType = await bundlerClient?.waitForUserOperationReceipt({
-        hash: userOpHash,
-      });
+      const receipt = await sendOperation(calls);
+
       setData(receipt);
     } catch (err) {
       console.error('Error in pause:', err);

src/hooks/protocol/use-campaign-remove-funds.ts

@@ -8,16 +8,15 @@ import {
   UseCampaignRemoveFundsHook,
   UseCampaignRemoveFundsResult,
 } from '@src/hooks/protocol/types.ts';
-import { Calls, WaitForUserOperationReceiptReturnType } from '@src/hooks/types.ts'
+import { Calls } from '@src/hooks/types.ts'
 import { useAuth } from '@src/hooks/use-auth.ts';
 import { useWeb3Auth } from '@src/hooks/use-web3-auth.ts';
-import { getNonce } from '@src/utils/wallet.ts';
 
 export const useCampaignRemoveFunds = (): UseCampaignRemoveFundsHook => {
   const [data, setData] = useState<UseCampaignRemoveFundsResult | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<keyof typeof ERRORS | null>(null);
-  const { bundlerClient, smartAccount } = useWeb3Auth();
+  const { sendOperation } = useWeb3Auth();
   const { logout } = useAccountSession();
   const { session } = useAuth();
 
@@ -50,14 +49,8 @@ export const useCampaignRemoveFunds = (): UseCampaignRemoveFundsHook => {
         },
       ];
 
-      const userOpHash = await bundlerClient.sendUserOperation({
-        account: smartAccount,
-        calls,
-        nonce: await getNonce(smartAccount)
-      });
-      const receipt: WaitForUserOperationReceiptReturnType = await bundlerClient.waitForUserOperationReceipt({
-        hash: userOpHash,
-      });
+      const receipt = await sendOperation(calls);
+
       setData(receipt);
 
       console.log('Transaction receipt:', receipt);

src/hooks/protocol/use-campaign-unpause.ts

@@ -6,14 +6,13 @@ import { useAccountSession } from '@src/hooks/use-account-session.ts';
 import {CampaignUnpauseResult, UseCampaignUnPauseHook} from '@src/hooks/protocol/types.ts'
 import { useAuth } from '@src/hooks/use-auth.ts';
 import { useWeb3Auth } from '@src/hooks/use-web3-auth.ts';
-import { Calls, WaitForUserOperationReceiptReturnType } from '@src/hooks/types.ts'
-import { getNonce } from '@src/utils/wallet.ts';
+import { Calls } from '@src/hooks/types.ts'
 
 export const useCampaignUnPause = (): UseCampaignUnPauseHook => {
   const [data, setData] = useState<CampaignUnpauseResult | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<keyof typeof ERRORS | null>(null);
-  const { bundlerClient, smartAccount } = useWeb3Auth();
+  const { sendOperation } = useWeb3Auth();
   const { logout } = useAccountSession();
   const { session } = useAuth();
 
@@ -43,14 +42,8 @@ export const useCampaignUnPause = (): UseCampaignUnPauseHook => {
         },
       ];
 
-      const userOpHash = await bundlerClient.sendUserOperation({
-        account: smartAccount,
-        calls,
-        nonce: await getNonce(smartAccount)
-      });
-      const receipt: WaitForUserOperationReceiptReturnType = await bundlerClient.waitForUserOperationReceipt({
-        hash: userOpHash,
-      });
+      const receipt = await sendOperation(calls);
+
       setData(receipt);
     } catch (err) {
       console.error('Error in unPause:', err);

src/hooks/protocol/use-configure-campaign.ts

@@ -9,13 +9,12 @@ import {ConfigureCampaignParams, ConfigureCampaignResult, UseConfigureCampaignHo
 import { notifyError } from '@src/libs/notifications/internal-notifications.ts';
 import { useAuth } from '@src/hooks/use-auth.ts';
 import { useWeb3Auth } from '@src/hooks/use-web3-auth.ts';
-import { Calls, WaitForUserOperationReceiptReturnType } from '@src/hooks/types.ts'
-import { getNonce } from '@src/utils/wallet.ts';
+import { Calls } from '@src/hooks/types.ts'
 
 export const useConfigureCampaign = (): UseConfigureCampaignHook => {
   const [data, setData] = useState<ConfigureCampaignResult | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
-  const { bundlerClient, smartAccount } = useWeb3Auth();
+  const { sendOperation } = useWeb3Auth();
   const { logout } = useAccountSession();
   const { session } = useAuth();
 
@@ -87,17 +86,7 @@ export const useConfigureCampaign = (): UseConfigureCampaignHook => {
         },
       ];
 
-      // Send the UserOperation to our bundler
-      const userOpHash = await bundlerClient.sendUserOperation({
-        account: smartAccount,
-        calls,
-        nonce: await getNonce(smartAccount)
-      });
-
-      // Wait for the transaction receipt
-      const receipt: WaitForUserOperationReceiptReturnType = await bundlerClient.waitForUserOperationReceipt({
-        hash: userOpHash,
-      });
+      const receipt = await sendOperation(calls);
 
       setData(receipt);
       setLoading(false);

src/hooks/protocol/use-create-campaign.ts

@@ -7,13 +7,12 @@ import {CreateCampaignParams, CreateCampaignResult, UseCreateCampaignHook} from
 import { notifyError } from '@src/libs/notifications/internal-notifications.ts';
 import { useAuth } from '@src/hooks/use-auth.ts';
 import { useWeb3Auth } from '@src/hooks/use-web3-auth.ts';
-import { Calls, WaitForUserOperationReceiptReturnType } from '@src/hooks/types.ts'
-import { getNonce } from '@src/utils/wallet.ts';
+import { Calls } from '@src/hooks/types.ts'
 
 export const useCreateCampaign = (): UseCreateCampaignHook => {
   const [data, setData] = useState<CreateCampaignResult |null>(null);
   const [loading, setLoading] = useState<boolean>(false);
-  const { bundlerClient, smartAccount } = useWeb3Auth();
+  const { sendOperation } = useWeb3Auth();
   const { session } = useAuth();
 
   const initializeCampaign = ({ policy, expiration, description }: CreateCampaignParams) => {
@@ -49,15 +48,7 @@ export const useCreateCampaign = (): UseCreateCampaignHook => {
         },
       ];
 
-      const userOpHash = await bundlerClient.sendUserOperation({
-        account: smartAccount,
-        calls,
-        nonce: await getNonce(smartAccount)
-      });
-
-      const receipt: WaitForUserOperationReceiptReturnType = await bundlerClient.waitForUserOperationReceipt({
-        hash: userOpHash,
-      });
+      const receipt = await sendOperation(calls);
 
       setData(receipt);
       setLoading(false);

src/hooks/protocol/use-deposit.ts

@@ -13,14 +13,13 @@ import {DepositParams, UseDepositHook, UseDepositResult} from '@src/hooks/protoc
 import { ERRORS } from '@src/libs/notifications/errors.ts';
 import { GLOBAL_CONSTANTS } from '@src/config-global.ts';
 import { useWeb3Auth } from '@src/hooks/use-web3-auth.ts';
-import { Calls, WaitForUserOperationReceiptReturnType } from '@src/hooks/types.ts'
-import { getNonce } from '@src/utils/wallet.ts';
+import { Calls } from '@src/hooks/types.ts'
 
 export const useDeposit = (): UseDepositHook => {
   const [data, setData] = useState<UseDepositResult | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<keyof typeof ERRORS | null>(null);
-  const { bundlerClient, smartAccount } = useWeb3Auth();
+  const { sendOperation } = useWeb3Auth();
   const { session } = useAuth();
   const { logout } = useAccountSession();
 
@@ -82,17 +81,7 @@ export const useDeposit = (): UseDepositHook => {
         },
       ];
 
-      // Send the user operation
-      const userOpHash = await bundlerClient.sendUserOperation({
-        account: smartAccount,
-        calls,
-        nonce: await getNonce(smartAccount)
-      });
-
-      // Wait for the operation receipt
-      const receipt: WaitForUserOperationReceiptReturnType = await bundlerClient.waitForUserOperationReceipt({
-        hash: userOpHash,
-      });
+      const receipt = await sendOperation(calls);
 
       setData(receipt);