@bosonprotocol/react-kit 0.34.0-alpha.9 → 0.35.0-alpha.0

package/src/components/ui/styles.ts

@@ -5,6 +5,14 @@ export const transition = css`
   transition: all 150ms ease-in-out;
 `;
 
+export const buttonText = css`
+  letter-spacing: 0.5px;
+  font-style: normal;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 24px;
+`;
+
 export const button = css`
   box-sizing: border-box;
   cursor: pointer;
@@ -18,7 +26,7 @@ export const button = css`
   position: relative;
   overflow: hidden;
   box-shadow: 0px 0px 0px #000000;
-
+  ${buttonText}
   ${transition}
   svg {
     ${transition}
@@ -47,51 +55,34 @@ export const text = css`
   line-height: 24px;
 `;
 
-export const buttonText = css`
-  letter-spacing: 0.5px;
-  font-style: normal;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 24px;
-`;
-
 export const small = css`
   min-height: 2.125rem;
   padding: 0.5rem 1rem;
-  > * {
-    font-size: 0.75rem !important;
-  }
-  #buttonText {
+  * {
     font-size: 0.75rem;
   }
 `;
 export const regular = css`
   min-height: 2.813rem;
   padding: 0.75rem 1.5rem;
-  > * {
-    font-size: 1rem !important;
+  * {
+    font-size: 1rem;
   }
   ${breakpoint.xxs} {
-    > * {
-      font-size: 0.875rem !important;
+    * {
+      font-size: 0.875rem;
     }
   }
-  #buttonText {
-    font-size: 0.875rem;
-  }
 `;
 export const large = css`
   min-height: 3.5rem;
   padding: 1rem 2rem;
-  > * {
-    font-size: 1.125rem !important;
+  * {
+    font-size: 1.125rem;
   }
   ${breakpoint.xxs} {
-    > * {
-      font-size: 1rem !important;
+    * {
+      font-size: 1rem;
     }
   }
-  #buttonText {
-    font-size: 1rem;
-  }
 `;

package/src/components/wallet/ConnectButton.tsx

@@ -10,7 +10,7 @@ import ThemedButton, { bosonButtonThemes } from "../ui/ThemedButton";
 import { useBreakpoints } from "../../hooks/useBreakpoints";
 import { saveItemInStorage } from "../../hooks/storage/useBosonLocalStorage";
 import { SignOut, Wallet } from "phosphor-react";
-import { useIsMagicLoggedIn } from "../../hooks";
+import { useConfigContext, useIsMagicLoggedIn } from "../../hooks";
 import { useAccount, useChainId } from "../../hooks/connection/connection";
 import { useDisconnect } from "../../hooks/connection/useDisconnect";
 import { MagicLoginButton } from "../magicLink/Login";
@@ -79,6 +79,7 @@ export default function ConnectButton({
   showChangeWallet,
   ...rest
 }: Props) {
+  const { withMagicLink } = useConfigContext();
   const { isLteXS, isLteS } = useBreakpoints();
   const isSideBar = ["left", "right"].includes(navigationBarPosition);
   const buttonPadding = isSideBar ? "0.75rem 1rem" : "";
@@ -120,14 +121,16 @@ export default function ConnectButton({
 
                       return (
                         <>
-                          <MagicLoginButton
-                            buttonProps={{
-                              size: isLteXS ? "small" : "regular",
-                              theme: bosonButtonThemes({
-                                withBosonStyle: false
-                              })["primary"]
-                            }}
-                          />
+                          {withMagicLink && (
+                            <MagicLoginButton
+                              buttonProps={{
+                                size: isLteXS ? "small" : "regular",
+                                theme: bosonButtonThemes({
+                                  withBosonStyle: false
+                                })["primary"]
+                              }}
+                            />
+                          )}
                           <Button
                             onClick={() => {
                               saveItemInStorage(

package/src/components/wallet2/accountDrawer/AuthenticatedHeader.tsx

@@ -9,13 +9,12 @@ import {
 } from "phosphor-react";
 import React, { useCallback, useState } from "react";
 import styled, { CSSProperties } from "styled-components";
-
 import { Typography } from "../../ui/Typography";
 import StatusIcon from "../identicon/StatusIcon";
 import { FiatLink, useFiatLinkContext } from "./fiatOnrampModal/FiatLink";
 // import FiatOnrampModal from "./fiatOnrampModal";
 import { IconWithConfirmTextButton } from "./IconButton";
-import MiniPortfolio from "./miniPortfolio";
+import MiniPortfolio, { MiniPortfolioProps } from "./miniPortfolio";
 import { Column } from "../../ui/column";
 import { theme } from "../../../theme";
 import { useENSName } from "../../../hooks/ens/useENSName";
@@ -131,8 +130,7 @@ export function PortfolioArrow({
     <ArrowUpRight size={20} {...rest} />
   );
 }
-export type AuthenticatedHeaderProps = {
-  account: string;
+export type AuthenticatedHeaderProps = MiniPortfolioProps & {
   onUserDisconnect?: () => unknown;
   disconnectColor: CSSProperties["color"];
   disconnectBackgroundColor: CSSProperties["backgroundColor"];
@@ -145,7 +143,8 @@ export function AuthenticatedHeader({
   disconnectColor,
   disconnectBackgroundColor,
   disconnectBorderRadius,
-  buyCryptoTheme
+  buyCryptoTheme,
+  defaultTokens
 }: AuthenticatedHeaderProps) {
   const { connector } = useWeb3React();
   const { ENSName } = useENSName(account);
@@ -292,7 +291,7 @@ export function AuthenticatedHeader({
             </Tooltip>
           </FiatOnrampNotAvailableText>
         )}
-        <MiniPortfolio account={account} />
+        <MiniPortfolio account={account} defaultTokens={defaultTokens} />
       </PortfolioDrawerContainer>
     </AuthenticatedHeaderWrapper>
   );

package/src/components/wallet2/accountDrawer/IconButton.tsx

@@ -112,19 +112,19 @@ const IconBlock = forwardRef<
     borderRadius: CSSProperties["borderRadius"];
   }
 >(function IconBlock(props, ref) {
-  const { color, backgroundColor, borderRadius } = props;
   if ("href" in props) {
+    const { color, backgroundColor, borderRadius, ...restProps } = props;
     return (
       <IconBlockLink
         ref={ref as React.ForwardedRef<HTMLAnchorElement>}
         $color={color}
         $backgroundColor={backgroundColor}
         $borderRadius={borderRadius}
-        {...props}
+        {...restProps}
       />
     );
   }
-
+  const { color, backgroundColor, borderRadius, ...restProps } = props;
   return (
     <IconBlockButton
       // ignoring 'button' 'type' conflict between React and styled-components
@@ -134,7 +134,7 @@ const IconBlock = forwardRef<
       $color={color}
       $backgroundColor={backgroundColor}
       $borderRadius={borderRadius}
-      {...props}
+      {...restProps}
     />
   );
 });

package/src/components/wallet2/accountDrawer/miniPortfolio/index.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 import { Grid } from "../../../ui/Grid";
 import { Typography } from "../../../ui/Typography";
-import Tokens from "./tokens";
+import Tokens, { TokensProps } from "./tokens";
 import { breakpointNumbers } from "../../../../lib/ui/breakpoint";
 import { Column } from "../../../ui/column";
 
@@ -41,7 +41,7 @@ const PageWrapper = styled.div`
 interface Page {
   title: React.ReactNode;
   key: string;
-  component: ({ account }: { account: string }) => JSX.Element;
+  component: ({ account }: MiniPortfolioProps) => JSX.Element;
 }
 
 const Pages: Array<Page> = [
@@ -52,7 +52,11 @@ const Pages: Array<Page> = [
   }
 ];
 
-export default function MiniPortfolio({ account }: { account: string }) {
+export type MiniPortfolioProps = TokensProps;
+export default function MiniPortfolio({
+  account,
+  defaultTokens
+}: MiniPortfolioProps) {
   const [currentPage, setCurrentPage] = useState(0);
 
   const { component: Page } = Pages[currentPage];
@@ -72,7 +76,7 @@ export default function MiniPortfolio({ account }: { account: string }) {
         })}
       </Nav>
       <PageWrapper data-testid="mini-portfolio-page">
-        <Page account={account} />
+        <Page account={account} defaultTokens={defaultTokens} />
       </PageWrapper>
     </Wrapper>
   );

package/src/components/wallet2/accountDrawer/miniPortfolio/tokens/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Token as TokenType } from "@bosonprotocol/common";
 import { Token } from "@uniswap/sdk-core";
 import { ethers } from "ethers";
 import styled from "styled-components";
@@ -20,11 +21,16 @@ import {
 import { nativeOnChain } from "../../../../../lib/const/tokens";
 import { PortfolioLogo } from "../../../../logo/PortfolioLogo";
 
-export default function Tokens({ account }: { account: string }) {
+export type TokensProps = {
+  account: string;
+  defaultTokens?: TokenType[];
+};
+export default function Tokens({ account, defaultTokens }: TokensProps) {
   const chainId = useChainId();
   const { data: tokenBalances, isLoading } = useTokenBalances({
     address: account,
-    chainId
+    chainId,
+    tokens: defaultTokens
   });
 
   if (!chainId || isLoading) {

package/src/components/wallet2/selector/ChainSelector.tsx

@@ -36,6 +36,7 @@ import {
   CoreProtocolConfig
 } from "@bosonprotocol/core-sdk";
 import { SvgImage } from "../../ui/SvgImage";
+import { getSupportedChainIdsFromWalletConnectSession } from "./getSupportedChainIdsFromWalletConnectSession";
 
 const IconAndChevron = styled.div<{
   $isOpen: boolean;
@@ -71,8 +72,6 @@ function useWalletSupportedChains({
 
   switch (connectionType) {
     case ConnectionType.WALLET_CONNECT_V2:
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
       return getSupportedChainIdsFromWalletConnectSession(
         (connector as WalletConnectV2).provider?.session
       );

package/src/components/wallet2/selector/getSupportedChainIdsFromWalletConnectSession.ts

@@ -0,0 +1,39 @@
+import type { SessionTypes } from "@walletconnect/types";
+import { ChainId } from "@uniswap/sdk-core";
+
+// Helper function to extract chainId from string in format 'eip155:{chainId}'
+function getChainIdFromFormattedString(item: string): number | null {
+  const splitItem = item.startsWith("eip155:") ? item.split(":") : [];
+  return splitItem.length > 1 && !isNaN(Number(splitItem[1]))
+    ? Number(splitItem[1])
+    : null;
+}
+
+export function getSupportedChainIdsFromWalletConnectSession(
+  session?: SessionTypes.Struct
+): ChainId[] {
+  if (!session?.namespaces) return [];
+
+  const eip155Keys = Object.keys(session.namespaces);
+  const namespaces = Object.values(session.namespaces);
+
+  // Collect all arrays into one for unified processing
+  const allItems = [
+    ...eip155Keys,
+    ...namespaces.flatMap((namespace) => namespace.chains),
+    ...namespaces.flatMap((namespace) => namespace.accounts)
+  ];
+
+  // Process all items to extract chainIds
+  const allChainIds = allItems
+    .map((item) => {
+      if (typeof item === "string") {
+        return getChainIdFromFormattedString(item);
+      }
+      // Check if the item is a number
+      return isNaN(Number(item)) ? null : Number(item);
+    })
+    .filter((item) => item !== null); // Filter out any null values
+
+  return Array.from(new Set(allChainIds)) as ChainId[];
+}

package/src/components/wallet2/walletModal/ConnectionErrorView.tsx

@@ -5,12 +5,13 @@ import styled from "styled-components";
 import { Typography } from "../../ui/Typography";
 import { useCloseAccountDrawer } from "../accountDrawer";
 import { flexColumnNoWrap } from "../styles";
-import { Button } from "../../buttons/Button";
 import {
   ActivationStatus,
   useActivationState
 } from "../../connection/activate";
 import { theme } from "../../../theme";
+import { Grid } from "../../ui/Grid";
+import { BaseButton, BaseButtonProps } from "../../buttons/BaseButton";
 const colors = theme.colors.light;
 const Wrapper = styled.div`
   ${flexColumnNoWrap};
@@ -27,8 +28,15 @@ const AlertTriangleIcon = styled(Warning)`
   color: ${colors.red};
 `;
 
+export type ConnectionErrorViewProps = {
+  tryAgainTheme: BaseButtonProps["theme"];
+  backToWalletSelectionTheme: BaseButtonProps["theme"];
+};
 // TODO(cartcrom): move this to a top level modal, rather than inline in the drawer
-export default function ConnectionErrorView() {
+export default function ConnectionErrorView({
+  tryAgainTheme,
+  backToWalletSelectionTheme
+}: ConnectionErrorViewProps) {
   const { activationState, tryActivation, cancelActivation } =
     useActivationState();
   const closeDrawer = useCloseAccountDrawer();
@@ -50,10 +58,17 @@ export default function ConnectionErrorView() {
         The connection attempt failed. Please click try again and follow the
         steps to connect in your wallet.
       </Typography>
-      <Button onClick={retry}>Try Again</Button>
-      <Button onClick={cancelActivation}>
-        <Typography marginBottom={12}>Back to wallet selection</Typography>
-      </Button>
+      <Grid gap="1rem">
+        <BaseButton onClick={retry} theme={tryAgainTheme}>
+          Try Again
+        </BaseButton>
+        <BaseButton
+          onClick={cancelActivation}
+          theme={backToWalletSelectionTheme}
+        >
+          <Typography marginBottom={12}>Back to wallet selection</Typography>
+        </BaseButton>
+      </Grid>
     </Wrapper>
   );
 }

package/src/components/wallet2/walletModal/Option.tsx

@@ -110,6 +110,9 @@ export interface OptionProps {
   hoverColor: CSSProperties["color"];
   backgroundColor: CSSProperties["backgroundColor"];
   borderRadius: CSSProperties["borderRadius"];
+  onOptionClick?: (arg0: {
+    activationState: ReturnType<typeof useActivationState>["activationState"];
+  }) => void;
 }
 export function Option({
   connection,
@@ -117,7 +120,8 @@ export function Option({
   hoverFocusBackgroundColor,
   hoverColor,
   backgroundColor,
-  borderRadius
+  borderRadius,
+  onOptionClick
 }: OptionProps) {
   const { activationState, tryActivation } = useActivationState();
   const toggleAccountDrawer = useToggleAccountDrawer();
@@ -139,7 +143,10 @@ export function Option({
     >
       <OptionCardClickable
         disabled={isSomeOptionPending}
-        onClick={activate}
+        onClick={() => {
+          activate();
+          onOptionClick?.({ activationState });
+        }}
         selected={isCurrentOptionPending}
         data-testid={`wallet-option-${connection.type}`}
       >

package/src/components/wallet2/walletModal/index.tsx

@@ -5,7 +5,9 @@ import styled, { CSSProperties } from "styled-components";
 
 import { Grid } from "../../ui/Grid";
 import { flexColumnNoWrap } from "../styles";
-import ConnectionErrorView from "./ConnectionErrorView";
+import ConnectionErrorView, {
+  ConnectionErrorViewProps
+} from "./ConnectionErrorView";
 import { Option, OptionProps } from "./Option";
 import {
   ActivationStatus,
@@ -39,7 +41,6 @@ const OptionGrid = styled.div<{ $borderRadius: CSSProperties["borderRadius"] }>`
 
 export type WalletModalProps = {
   PrivacyPolicy: React.FC;
-  magicLoginButtonProps: MagicLoginButtonProps;
   optionProps: Pick<
     OptionProps,
     | "color"
@@ -47,12 +48,20 @@ export type WalletModalProps = {
     | "hoverColor"
     | "backgroundColor"
     | "borderRadius"
+    | "onOptionClick"
   > & { iconBorderRadius: CSSProperties["borderRadius"] };
-};
+  withMagicLogin?: boolean;
+  connectionErrorProps: ConnectionErrorViewProps;
+} & (
+  | { withMagicLogin: true; magicLoginButtonProps: MagicLoginButtonProps }
+  | { withMagicLogin?: false; magicLoginButtonProps?: undefined }
+);
 export function WalletModal({
   PrivacyPolicy,
   magicLoginButtonProps,
-  optionProps
+  optionProps,
+  withMagicLogin = true,
+  connectionErrorProps
 }: WalletModalProps) {
   const chainId = useChainId();
   const { config } = useConfigContext();
@@ -82,7 +91,7 @@ export function WalletModal({
         Connect a wallet
       </Grid>
       {activationState.status === ActivationStatus.ERROR ? (
-        <ConnectionErrorView />
+        <ConnectionErrorView {...connectionErrorProps} />
       ) : (
         <AutoColumn $gap="16px">
           <OptionGrid
@@ -100,7 +109,9 @@ export function WalletModal({
                 />
               ))}
           </OptionGrid>
-          <MagicLoginButton {...magicLoginButtonProps} />
+          {withMagicLogin && magicLoginButtonProps && (
+            <MagicLoginButton {...magicLoginButtonProps} />
+          )}
           <PrivacyPolicy />
         </AutoColumn>
       )}

package/src/hooks/connection/connection.ts

@@ -67,26 +67,36 @@ export function useChainId(): number | undefined {
   const {
     withExternalConnectionProps,
     externalConnectedChainId,
-    withWeb3React
+    withWeb3React,
+    withMagicLink
   } = useConfigContext();
   const externalSigner = useExternalSigner();
   const { data: externalSignerChainId } = useExternalSignerChainId();
-  const magicChainId = useMagicChainId();
   const isMagicLoggedIn = useIsMagicLoggedIn();
   let networkChainId: number | undefined;
+  let magicChainId: number | undefined;
   let error: unknown;
+  let magicError: unknown;
   try {
     networkChainId = useNetwork().chain?.id;
   } catch (wagmiError) {
     error = wagmiError; // error if the provider is not there
   }
+  try {
+    magicChainId = useMagicChainId();
+  } catch (error) {
+    magicError = error; // error if the provider is not there
+  }
+  if (!withExternalConnectionProps && magicError && withMagicLink) {
+    throw magicError;
+  }
   if (externalConnectedChainId) {
     return externalConnectedChainId;
   }
   if (externalSigner) {
     return externalSignerChainId;
   }
-  if (isMagicLoggedIn) {
+  if (isMagicLoggedIn && withMagicLink) {
     return magicChainId;
   }
   if (web3ReactChainId) {
@@ -108,32 +118,43 @@ export function useIsConnectedToWrongChain(): boolean {
 export function useProvider():
   | providers.JsonRpcProvider
   | providers.FallbackProvider {
-  const { withExternalConnectionProps, withWeb3React } = useConfigContext();
+  const { withExternalConnectionProps, withWeb3React, withMagicLink } =
+    useConfigContext();
   const { provider: web3Provider } = useWeb3ReactWrapper() || {};
-  let provider;
+  let provider, magicProvider;
   let error: unknown;
   try {
     provider = useEthersProvider();
   } catch (wagmiError) {
     error = wagmiError; // error if the provider is not there
   }
-  const magicProvider = useMagicProvider();
-  const isMagicLoggedIn = useIsMagicLoggedIn();
   if (!withExternalConnectionProps && error && !withWeb3React) {
     throw error;
   }
+  try {
+    magicProvider = useMagicProvider();
+  } catch (magicError) {
+    error = magicError; // error if the provider is not there
+  }
+  if (!withExternalConnectionProps && error && withMagicLink) {
+    throw error;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  const magicLinkProvider = magicProvider!; // it should always be not null at this point
+  const isMagicLoggedIn = useIsMagicLoggedIn();
   return isMagicLoggedIn
-    ? magicProvider ?? web3Provider ?? provider
+    ? magicLinkProvider ?? web3Provider ?? provider
     : withWeb3React
-      ? web3Provider ?? magicProvider ?? provider
-      : provider ?? magicProvider ?? web3Provider;
+      ? web3Provider ?? magicLinkProvider ?? provider
+      : provider ?? magicLinkProvider ?? web3Provider;
 }
 
 export function useSigner(): Signer | undefined {
   const {
     withExternalConnectionProps,
     externalConnectedSigner,
-    withWeb3React
+    withWeb3React,
+    withMagicLink
   } = useConfigContext();
   let wagmiSigner: ReturnType<typeof useEthersSigner>, error: unknown;
   try {
@@ -142,8 +163,14 @@ export function useSigner(): Signer | undefined {
   } catch (wagmiError) {
     error = wagmiError; // error if the provider is not there
   }
+  let magicProvider: providers.Web3Provider | undefined, magicError: unknown;
+
+  try {
+    magicProvider = useMagicProvider();
+  } catch (err) {
+    magicError = err; // error if the provider is not there
+  }
   const { externalSigner } = useExternalSigner() ?? {};
-  const magicProvider = useMagicProvider();
   const isMagicLoggedIn = useIsMagicLoggedIn();
   const { provider: web3Provider } = useWeb3ReactWrapper() || {};
 
@@ -169,6 +196,9 @@ export function useSigner(): Signer | undefined {
   if (!withExternalConnectionProps && error && !withWeb3React) {
     throw error;
   }
+  if (!withExternalConnectionProps && magicError && withMagicLink) {
+    throw magicError;
+  }
   return signer;
 }
 

package/src/hooks/connection/useSyncChainQuery.ts

@@ -35,7 +35,7 @@ export default function useSyncChainQuery() {
   const parsedQs = useParsedQueryString();
   const configIdRef = useRef(currentConfigId);
   const accountRef = useRef(account);
-  const accountAlreadyConnected = useRef(account);
+  const accountAlreadyConnected = useRef<string | undefined>(account);
   const disconnect = useCallback(() => {
     accountAlreadyConnected.current = undefined;
     _disconnect({ isUserDisconnecting: false });

package/src/hooks/index.ts

@@ -34,3 +34,4 @@ export {
   useCloseAccountDrawer,
   useOpenAccountDrawer
 } from "../components/wallet2/accountDrawer/index";
+export * from "./usePrevious";

package/src/hooks/magic.ts

@@ -2,13 +2,15 @@ import { useContext } from "react";
 import { useQuery } from "react-query";
 import { MagicContext } from "../components/magicLink/MagicContext";
 import { useUser } from "../components/magicLink/UserContext";
+import { useConfigContext } from "../components/config/ConfigContext";
 
 export const useMagic = () => {
+  const { withMagicLink } = useConfigContext();
   const context = useContext(MagicContext);
-  if (!context) {
+  if (!context && withMagicLink) {
     throw new Error("useMagic must be used within MagicContext");
   }
-  return context.magic;
+  return context?.magic;
 };
 
 export const useWalletInfo = () => {
@@ -23,11 +25,12 @@ export const useWalletInfo = () => {
 };
 
 export function useMagicProvider() {
+  const { withMagicLink } = useConfigContext();
   const context = useContext(MagicContext);
-  if (!context) {
+  if (!context && withMagicLink) {
     throw new Error("useMagic must be used within MagicContext");
   }
-  return context.magicProvider;
+  return context?.magicProvider;
 }
 
 export function useMagicChainId() {
@@ -36,7 +39,7 @@ export function useMagicChainId() {
 }
 
 export function useIsMagicLoggedIn() {
-  const { user } = useUser();
-  const isMagicLoggedIn = !!user;
+  const userContext = useUser();
+  const isMagicLoggedIn = !!userContext?.user;
   return isMagicLoggedIn;
 }

package/src/lib/config/config.ts

@@ -7,11 +7,6 @@ const magicLinkKey =
   import.meta?.env.STORYBOOK_REACT_APP_MAGIC_API_KEY ||
   // @ts-expect-error import.meta.env only exists in vite environments
   import.meta?.env.REACT_APP_MAGIC_API_KEY;
-if (!magicLinkKey) {
-  throw new Error(
-    "STORYBOOK_REACT_APP_MAGIC_API_KEY/REACT_APP_MAGIC_API_KEY is not defined"
-  );
-}
 const infuraKey =
   process.env.STORYBOOK_REACT_APP_INFURA_KEY ||
   process.env.REACT_APP_INFURA_KEY ||

package/src/lib/signer/externalSigner.ts

@@ -152,6 +152,13 @@ const getExternalWeb3LibAdapterListener = ({
         );
       });
     },
+    estimateGas: async (...args: any[]): Promise<BigNumberish> => {
+      return getDefaultHandleSignerFunction<BigNumberish>({
+        parentOrigin,
+        functionName: "estimateGas",
+        args
+      });
+    },
     call: async (...args: any[]): Promise<string> => {
       return getDefaultHandleSignerFunction<string>({
         parentOrigin,