@bosonprotocol/react-kit 0.34.0-alpha.2 → 0.34.0-alpha.20

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,
@@ -47,12 +49,17 @@ export type WalletModalProps = {
     | "hoverColor"
     | "backgroundColor"
     | "borderRadius"
+    | "onOptionClick"
   > & { iconBorderRadius: CSSProperties["borderRadius"] };
+  withMagicLogin?: boolean;
+  connectionErrorProps: ConnectionErrorViewProps;
 };
 export function WalletModal({
   PrivacyPolicy,
   magicLoginButtonProps,
-  optionProps
+  optionProps,
+  withMagicLogin = true,
+  connectionErrorProps
 }: WalletModalProps) {
   const chainId = useChainId();
   const { config } = useConfigContext();
@@ -82,7 +89,7 @@ export function WalletModal({
         Connect a wallet
       </Grid>
       {activationState.status === ActivationStatus.ERROR ? (
-        <ConnectionErrorView />
+        <ConnectionErrorView {...connectionErrorProps} />
       ) : (
         <AutoColumn $gap="16px">
           <OptionGrid
@@ -100,7 +107,7 @@ export function WalletModal({
                 />
               ))}
           </OptionGrid>
-          <MagicLoginButton {...magicLoginButtonProps} />
+          {withMagicLogin && <MagicLoginButton {...magicLoginButtonProps} />}
           <PrivacyPolicy />
         </AutoColumn>
       )}

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

@@ -1,5 +1,5 @@
 import { useWeb3React } from "@web3-react/core";
-import React, { memo, useCallback, useEffect, useRef } from "react";
+import React, { ReactNode, memo, useCallback, useEffect, useRef } from "react";
 import styled from "styled-components";
 
 import { useIsMagicLoggedIn } from "../../../hooks";
@@ -64,7 +64,17 @@ const getCommonWalletButtonProps = (isXXS: boolean) =>
 function Web3StatusInner({
   showOnlyIcon,
   errorButtonTheme,
-  successButtonTheme
+  connectedButtonTheme,
+  connectWalletButtonTheme,
+  connectWalletChild = <>Connect Wallet</>,
+  showStatusIcon = true,
+  wrongNetworkChild = <>Wrong network</>,
+  leftConnectWalletChild,
+  leftConnectedChild,
+  leftWrongNetworkChild,
+  rightConnectWalletChild,
+  rightConnectedChild,
+  rightWrongNetworkChild
 }: ConnectWalletProps) {
   const switchingChain = useAppSelector(
     (state) => state.wallets.switchingChain
@@ -121,18 +131,21 @@ function Web3StatusInner({
         disabled={Boolean(switchingChain)}
         data-testid="web3-status-connected"
         onClick={handleWalletDropdownClick}
-        theme={successButtonTheme}
+        theme={connectedButtonTheme}
       >
-        <StatusIcon
-          account={account}
-          size={24}
-          connection={connection}
-          showMiniIcons={showOnlyIcon}
-        />
-
+        {showStatusIcon && (
+          <StatusIcon
+            account={account}
+            size={24}
+            connection={connection}
+            showMiniIcons={showOnlyIcon}
+          />
+        )}
+        {leftConnectedChild}
         <AddressAndChevronContainer>
           <Text>{ENSName || formatAddress(account)}</Text>
         </AddressAndChevronContainer>
+        {rightConnectedChild}
       </BaseButton>
     );
   }
@@ -163,7 +176,9 @@ function Web3StatusInner({
             onClick={handleWalletDropdownClick}
             theme={errorButtonTheme}
           >
-            Wrong network
+            {leftWrongNetworkChild}
+            {wrongNetworkChild}
+            {rightWrongNetworkChild}
           </BaseButton>
         </Tooltip>
       ) : (
@@ -171,23 +186,36 @@ function Web3StatusInner({
           onClick={handleWalletDropdownClick}
           data-testid="navbar-connect-wallet"
           {...getCommonWalletButtonProps(isXXS)}
-          theme={successButtonTheme}
+          theme={connectWalletButtonTheme}
           style={{
             ...getCommonWalletButtonProps(isXXS).style
           }}
         >
-          Connect Wallet
+          {leftConnectWalletChild}
+          {connectWalletChild}
+          {rightConnectWalletChild}
         </BaseButton>
       )}
     </Grid>
   );
 }
+type SuccessButtonTheme = Omit<BaseButtonTheme, "color" | "background"> &
+  Required<Pick<BaseButtonTheme, "color" | "background">>;
 
 export type ConnectWalletProps = {
   showOnlyIcon?: boolean;
   errorButtonTheme: BaseButtonTheme;
-  successButtonTheme: Omit<BaseButtonTheme, "color" | "background"> &
-    Required<Pick<BaseButtonTheme, "color" | "background">>;
+  connectedButtonTheme: SuccessButtonTheme;
+  connectWalletButtonTheme: SuccessButtonTheme;
+  connectWalletChild?: ReactNode;
+  wrongNetworkChild?: ReactNode;
+  showStatusIcon?: boolean;
+  leftConnectedChild?: ReactNode;
+  rightConnectedChild?: ReactNode;
+  leftWrongNetworkChild?: ReactNode;
+  rightWrongNetworkChild?: ReactNode;
+  leftConnectWalletChild?: ReactNode;
+  rightConnectWalletChild?: ReactNode;
 };
 export const ConnectWallet = memo(function Web3Status(
   props: ConnectWalletProps

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

@@ -25,3 +25,13 @@ export * from "./ipfs/useIpfsStorage";
 export * from "./location/buildUseSearchParams";
 export * from "./form/useForm";
 export * from "./useBreakpoints";
+export * from "./useSignerAddress";
+export * from "./useMetaTx";
+export { useCtaClickHandler } from "./useCtaClickHandler";
+export {
+  useToggleAccountDrawer,
+  useAccountDrawer,
+  useCloseAccountDrawer,
+  useOpenAccountDrawer
+} from "../components/wallet2/accountDrawer/index";
+export * from "./usePrevious";

package/src/hooks/useCtaClickHandler.ts

@@ -20,7 +20,10 @@ export function useCtaClickHandler<T>({
   successPayload
 }: {
   waitBlocks: number;
-  coreSdk: CoreSDK;
+  coreSdk: Pick<
+    CoreSDK,
+    "relayNativeMetaTransaction" | "relayMetaTransaction" | "parseError"
+  >;
   useMetaTx: boolean;
   actions: Action[];
   successPayload: T | ((receipt: providers.TransactionReceipt) => T);

package/src/hooks/useMetaTx.ts

@@ -1,7 +1,9 @@
 import { CoreSDK } from "@bosonprotocol/core-sdk";
 import { useSignerAddress } from "./useSignerAddress";
 
-export function useMetaTx(coreSdk: CoreSDK | undefined) {
+export function useMetaTx(
+  coreSdk: Pick<CoreSDK, "isMetaTxConfigSet" | "web3Lib"> | undefined
+) {
   const { signerAddress, signerContract } = useSignerAddress(coreSdk?.web3Lib);
   const isMetaTx = coreSdk
     ? Boolean(coreSdk.isMetaTxConfigSet && signerAddress && !signerContract)

package/src/index.tsx

@@ -3,6 +3,7 @@ export * from "./components/buttons/BurgerButton";
 export * from "./components/buttons/Button";
 export * from "./components/buttons/CommitButtonView";
 export * from "./components/config/ConfigProvider";
+export * from "./components/cta/common/types";
 export * from "./components/cta/dispute/DecideDisputeButton";
 export * from "./components/cta/dispute/EscalateDisputeButton";
 export * from "./components/cta/dispute/ExpireDisputeButton";
@@ -45,6 +46,8 @@ export * from "./components/modal/components/Redeem/DetailView/ExternalExchangeD
 export * from "./components/portal/Portal";
 export * from "./components/productCard/const";
 export * from "./components/productCard/ProductCard";
+export * from "./components/queryClient/withQueryClientProvider";
+export * from "./components/queryClient/QueryClientProviderCustom";
 export * from "./components/scroll/ScrollToID";
 export * from "./components/scroll/ScrollToTop";
 export * from "./components/searchBar/SearchBar";
@@ -85,6 +88,7 @@ export * from "./lib/magicLink/logout";
 export * from "./lib/magicLink/provider";
 export * from "./lib/offer/filter";
 export * from "./lib/offer/getIsOfferExpired";
+export * from "./lib/opensea/getOpenSeaUrl";
 export * from "./lib/promises/promises";
 export * from "./lib/url/url";
 export * from "./theme";

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,

package/src/stories/ConnectWallet.stories.tsx

@@ -1,5 +1,5 @@
 import { fn } from "@storybook/test";
-import React from "react";
+import React, { ReactNode } from "react";
 import { Meta } from "@storybook/react";
 import {
   ChainSelector,
@@ -17,8 +17,9 @@ import {
 import { HashRouter, Route, Routes } from "react-router-dom";
 import { bosonButtonThemeKeys } from "../components/ui/ThemedButton";
 import { CSSProperties, createGlobalStyle } from "styled-components";
+import { Wallet } from "phosphor-react";
 const colors = theme.colors.light;
-const successButtonTheme: ConnectWalletProps["successButtonTheme"] = {
+const successButtonTheme: ConnectWalletProps["connectWalletButtonTheme"] = {
   ...bosonButtonThemes({ withBosonStyle: false })["primary"],
   color: "inherit",
   background: "var(--buttonBgColor)"
@@ -30,13 +31,17 @@ const errorButtonTheme = bosonButtonThemes({ withBosonStyle: false })[
 const envName =
   (process.env.STORYBOOK_DATA_ENV_NAME as EnvironmentType) || "testing";
 const envConfig = getEnvConfigs(envName);
-const configId = envConfig[0].configId;
+const config = envConfig[0];
+const configId = config.configId;
 const ColorGlobalStyle = createGlobalStyle<{ color: CSSProperties["color"] }>`
   html, body{
     color: ${({ color }) => color};
   }
 `;
 const Component = ({
+  showStatusIcon,
+  rightConnectedChild,
+  connectWalletChild,
   textColor,
   chainSelectorBackgroundColor,
   connectWalletBorderRadius,
@@ -55,10 +60,16 @@ const Component = ({
   walletHoverFocusBackgroundColor,
   walletHoverColor,
   magicLoginButtonThemeKey,
+  connectionErrorTryAgainButtonThemeKey,
+  connectionErrorBackToWalletSelectionButtonThemeKey,
   magicLoginButtonBorderRadiusPx,
+  withMagicLogin,
   onUserDisconnect
 }: {
+  showStatusIcon: boolean;
+  rightConnectedChild?: ReactNode;
   textColor: string;
+  connectWalletChild: string;
   chainSelectorBackgroundColor: string | undefined;
   connectWalletBorderRadius: string | undefined;
   connectWalletSuccessButtonThemeKey: string | undefined;
@@ -76,7 +87,10 @@ const Component = ({
   walletHoverFocusBackgroundColor: string | undefined;
   walletHoverColor: string | undefined;
   magicLoginButtonThemeKey: string | undefined;
+  connectionErrorTryAgainButtonThemeKey: string;
+  connectionErrorBackToWalletSelectionButtonThemeKey: string;
   magicLoginButtonBorderRadiusPx: string | undefined;
+  withMagicLogin: boolean | undefined;
   onUserDisconnect: () => unknown;
 }) => {
   return (
@@ -114,9 +128,22 @@ const Component = ({
                   <ChainSelector
                     leftAlign={true}
                     backgroundColor={chainSelectorBackgroundColor}
+                    config={config}
                   />
                   <ConnectWallet
-                    successButtonTheme={{
+                    showStatusIcon={showStatusIcon}
+                    connectWalletChild={connectWalletChild}
+                    rightConnectedChild={rightConnectedChild}
+                    connectWalletButtonTheme={{
+                      ...(connectWalletSuccessButtonThemeKey
+                        ? bosonButtonThemes({ withBosonStyle: false })[
+                            connectWalletSuccessButtonThemeKey
+                          ]
+                        : successButtonTheme),
+                      borderRadius: connectWalletBorderRadius,
+                      gap: "2px"
+                    }}
+                    connectedButtonTheme={{
                       ...(connectWalletSuccessButtonThemeKey
                         ? bosonButtonThemes({ withBosonStyle: false })[
                             connectWalletSuccessButtonThemeKey
@@ -154,6 +181,7 @@ const Component = ({
                     disconnectColor={accountDrawerDisconnectColor}
                     onUserDisconnect={onUserDisconnect}
                     walletModalProps={{
+                      withMagicLogin,
                       optionProps: {
                         backgroundColor: walletBackgroundColor,
                         color: walletColor,
@@ -175,6 +203,19 @@ const Component = ({
                           }
                         }
                       },
+                      connectionErrorProps: {
+                        tryAgainTheme: connectionErrorTryAgainButtonThemeKey
+                          ? bosonButtonThemes({ withBosonStyle: false })[
+                              connectionErrorTryAgainButtonThemeKey
+                            ]
+                          : successButtonTheme,
+                        backToWalletSelectionTheme:
+                          connectionErrorBackToWalletSelectionButtonThemeKey
+                            ? bosonButtonThemes({ withBosonStyle: false })[
+                                connectionErrorBackToWalletSelectionButtonThemeKey
+                              ]
+                            : successButtonTheme
+                      },
                       PrivacyPolicy: () => <div>privacy policy</div>
                     }}
                   />
@@ -224,6 +265,14 @@ export default {
     magicLoginButtonThemeKey: {
       control: "select",
       options: bosonButtonThemeKeys
+    },
+    connectionErrorTryAgainButtonThemeKey: {
+      control: "select",
+      options: bosonButtonThemeKeys
+    },
+    connectionErrorBackToWalletSelectionButtonThemeKey: {
+      control: "select",
+      options: bosonButtonThemeKeys
     }
   },
   decorators: [
@@ -258,7 +307,9 @@ export const BosonTheme = {
     walletColor: colors.white,
     walletHoverFocusBackgroundColor: colors.black,
     walletHoverColor: colors.white,
-    magicLoginButtonThemeKey: undefined
+    magicLoginButtonThemeKey: undefined,
+    connectionErrorTryAgainButtonThemeKey: "orangeInverse",
+    connectionErrorBackToWalletSelectionButtonThemeKey: "orangeInverse"
   }
 };
 
@@ -283,6 +334,12 @@ export const CustomTheme = {
     walletHoverFocusBackgroundColor: "#e89f0e",
     walletHoverColor: "#ff0000",
     magicLoginButtonThemeKey: "orangeInverse",
-    magicLoginButtonBorderRadiusPx: "50"
+    connectionErrorTryAgainButtonThemeKey: "orangeInverse",
+    connectionErrorBackToWalletSelectionButtonThemeKey: "orangeInverse",
+    magicLoginButtonBorderRadiusPx: "50",
+    withMagicLogin: true,
+    showStatusIcon: false,
+    connectWalletChild: <>Connect</>,
+    rightConnectedChild: <Wallet />
   }
 };

package/src/stories/ProductCard.stories.tsx

@@ -39,13 +39,7 @@ ProductCardPrimary.args = {
     "https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80",
   avatarName: (
     <>
-      <span
-        style={{
-          color: "green"
-        }}
-      >
-        JSON Doe
-      </span>
+      <span>JSON Doe</span>
     </>
   ),
   asterisk: true,

package/src/stories/buttons/Upload.stories.tsx

@@ -1,11 +1,9 @@
-import { fn } from "@storybook/test";
 import React from "react";
 import { Meta } from "@storybook/react";
-import { Upload } from "../..";
+import { QueryClientProviderCustom, Upload } from "../..";
 import { EnvironmentProvider } from "../../components/environment/EnvironmentProvider";
 import { IpfsProvider } from "../../components/ipfs/IpfsProvider";
 import { Formik } from "formik";
-import { QueryClientProviderCustom } from "../../components/queryClient/withQueryClientProvider";
 import {
   bosonButtonThemeKeys,
   bosonButtonThemes