@bosonprotocol/react-kit 0.36.0-alpha.0 → 0.36.0-alpha.10

package/src/components/widgets/finance/Finance.tsx

@@ -20,7 +20,7 @@ import { useModal } from "../../modal/useModal";
 import { Tooltip } from "../../tooltip/Tooltip";
 import { Grid } from "../../ui/Grid";
 import { Typography } from "../../ui/Typography";
-import { theme } from "../../../theme";
+import { colors } from "../../../theme";
 import { Button } from "../../buttons/Button";
 import PaginationPages from "../../pagination/PaginationPages";
 import Loading from "../../ui/loading/LoadingWrapper";
@@ -33,7 +33,7 @@ import { ExchangeTokensProps } from "./exchange-tokens/useExchangeTokens";
 import ThemedButton from "../../ui/ThemedButton";
 import { useAccount } from "../../../hooks/connection/connection";
 dayjs.extend(isBetween);
-const colors = theme.colors.light;
+
 const BosonButton = Button;
 
 const Table = styled.table`
@@ -41,7 +41,7 @@ const Table = styled.table`
   border-collapse: collapse;
   th {
     font-weight: 600;
-    color: ${colors.darkGrey};
+    color: ${colors.greyDark};
     :not([data-sortable]) {
       cursor: default !important;
     }
@@ -78,7 +78,7 @@ const Table = styled.table`
     tr {
       &:hover {
         td {
-          background-color: ${colors.darkGrey}08;
+          background-color: ${colors.greyDark}08;
           cursor: pointer;
         }
       }
@@ -127,14 +127,14 @@ const Pagination = styled.div`
 `;
 const Span = styled.span`
   font-size: 0.75rem;
-  color: ${colors.darkGrey};
+  color: ${colors.greyDark};
   &:not(:last-of-type) {
     margin-right: 1rem;
   }
 `;
 
 const WithdrawButton = styled(ThemedButton)`
-  color: ${colors.secondary};
+  color: ${colors.violet};
   border-color: transparent;
 `;
 const WarningWrapper = styled(Grid)`
@@ -346,7 +346,7 @@ export default function Finance({
                 tooltip={
                   address
                     ? "This action is restricted to only the assistant wallet"
-                    : "Please connect your wallet"
+                    : "Please connect your account"
                 }
                 onClick={() => {
                   showModal(
@@ -361,8 +361,7 @@ export default function Finance({
                       availableAmount: fund.availableAmount,
                       reload: reloadData
                     },
-                    "auto",
-                    "dark"
+                    "auto"
                   );
                 }}
               >
@@ -372,7 +371,7 @@ export default function Finance({
                 variant="accentInverted"
                 size="small"
                 disabled={!address}
-                tooltip={"Please connect your wallet"}
+                tooltip={"Please connect your account"}
                 onClick={() => {
                   showModal(
                     "FINANCE_DEPOSIT_MODAL",
@@ -385,8 +384,7 @@ export default function Finance({
                       exchangeToken: fund.token.address,
                       reload: reloadData
                     },
-                    "auto",
-                    "dark"
+                    "auto"
                   );
                 }}
               >
@@ -454,7 +452,7 @@ export default function Finance({
   }, [pageCount, pageIndex]);
 
   if (!address) {
-    return <p style={{ textAlign: "center" }}>Please connect your wallet</p>;
+    return <p style={{ textAlign: "center" }}>Please connect your account</p>;
   }
 
   if (!isFundsInitialized || isLoadingSellerData || isLoadingExchangesTokens) {
@@ -594,12 +592,10 @@ export default function Finance({
                   themeVal="blank"
                   style={{
                     color:
-                      pageNumber === pageIndex
-                        ? colors.secondary
-                        : colors.black,
+                      pageNumber === pageIndex ? colors.violet : colors.black,
                     background:
                       pageNumber === pageIndex
-                        ? colors.lightGrey
+                        ? colors.greyLight
                         : "transparent"
                   }}
                   onClick={() => gotoPage(pageNumber)}

package/src/components/widgets/finance/FinanceWidget.tsx

@@ -9,7 +9,6 @@ import { useDisconnect } from "../../../hooks/connection/useDisconnect";
 import { useCurrentSellers } from "../../../hooks/useCurrentSellers";
 import { Grid } from "../../ui/Grid";
 import Loading from "../../ui/loading/LoadingWrapper";
-import ConnectButton from "../../wallet/ConnectButton";
 import Finance, { Props } from "./Finance";
 import { useConvertionRate } from "./convertion-rate/useConvertionRate";
 import { useExchangeTokens } from "./exchange-tokens/useExchangeTokens";
@@ -21,12 +20,9 @@ import {
   FinanceWidgetProviders,
   FinanceWidgetProvidersProps
 } from "./FinanceWidgetProviders";
+import { BosonConnectWallet } from "../../wallet2/web3Status/BosonConnectWallet";
 dayjs.extend(isBetween);
 
-const StyledConnectButton = styled(ConnectButton)`
-  padding: 10px;
-`;
-
 const Wrapper = styled.div`
   text-align: center;
 `;
@@ -115,7 +111,7 @@ function WithSellerData(WrappedComponent: React.ComponentType<Props>) {
     }
 
     if (!address) {
-      return <p style={{ textAlign: "center" }}>Please connect your wallet</p>;
+      return <p style={{ textAlign: "center" }}>Please connect your account</p>;
     }
 
     if (!sellerIdToUse) {
@@ -134,7 +130,10 @@ function WithSellerData(WrappedComponent: React.ComponentType<Props>) {
 }
 
 const Component = WithSellerData(Finance);
-type FinanceWidgetProps = FinanceWidgetProvidersProps & {
+export type FinanceWidgetProps = Omit<
+  FinanceWidgetProvidersProps,
+  "children"
+> & {
   sellerId: string | null | undefined;
 };
 
@@ -143,8 +142,8 @@ export function FinanceWidget(props: FinanceWidgetProps) {
   return (
     <FinanceWidgetProviders {...props} withReduxProvider>
       {!withExternalSigner && (
-        <Grid justifyContent="flex-end">
-          <StyledConnectButton showChangeWallet />
+        <Grid justifyContent="flex-end" padding="0.625rem">
+          <BosonConnectWallet />
         </Grid>
       )}
       <Component sellerId={sellerId ?? undefined} />

package/src/components/widgets/finance/FinanceWidgetProviders.tsx

@@ -9,7 +9,6 @@ import { ModalProvider } from "../../modal/ModalProvider";
 import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 import { SignerProvider } from "../../signer/SignerProvider";
 import GlobalStyle from "../../styles/GlobalStyle";
-import { WalletConnectionProviderProps } from "../../wallet/WalletConnectionProvider";
 import { WithReduxProvider, WithReduxProviderProps } from "../ReduxProvider";
 import { getParentWindowOrigin } from "../common";
 import { CommonWidgetTypes } from "../types";
@@ -17,46 +16,70 @@ import ConvertionRateProvider, {
   ConvertionRateProviderProps
 } from "./convertion-rate/ConvertionRateProvider";
 import { BosonProvider, BosonProviderProps } from "../../boson/BosonProvider";
+import { Web3Provider, Web3ProviderProps } from "../../wallet2/web3Provider";
+import { BlockNumberProvider } from "../../../hooks/contracts/useBlockNumber";
+import {
+  BosonThemeProvider,
+  BosonThemeProviderProps,
+  useBosonTheme
+} from "../BosonThemeProvider";
+import { GlobalStyledThemed } from "../../styles/GlobalStyledThemed";
 
 export type FinanceWidgetProvidersProps = Omit<
-  WalletConnectionProviderProps,
-  "children" | "envName"
+  ConfigProviderProps,
+  "magicLinkKey" | "infuraKey"
 > &
-  Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
+  Omit<Web3ProviderProps, "infuraKey"> &
+  Partial<BosonThemeProviderProps> &
   CommonWidgetTypes &
   ConvertionRateProviderProps &
   BosonProviderProps &
   WithReduxProviderProps & {
     children: ReactNode;
+    withGlobalStyle?: boolean;
   };
 
 const { infuraKey, magicLinkKey } = CONFIG;
 
 export const FinanceWidgetProviders: React.FC<FinanceWidgetProvidersProps> =
-  withQueryClientProvider(({ children, ...props }) => {
+  withQueryClientProvider(({ children, withGlobalStyle, ...props }) => {
     const parentOrigin = getParentWindowOrigin();
+    const { themeKey: storyBookThemeKey } =
+      useBosonTheme({
+        throwOnError: false
+      }) || {};
     return (
-      <WithReduxProvider
-        withCustomReduxContext={props.withCustomReduxContext}
-        withReduxProvider={props.withReduxProvider}
+      <BosonThemeProvider
+        theme={props.theme || storyBookThemeKey || "light"}
+        roundness={props.roundness || "min"}
       >
-        <ConfigProvider
-          magicLinkKey={magicLinkKey}
-          infuraKey={infuraKey}
-          {...props}
+        {withGlobalStyle && <GlobalStyledThemed />}
+        <WithReduxProvider
+          withCustomReduxContext={props.withCustomReduxContext}
+          withReduxProvider={props.withReduxProvider}
         >
-          <BosonProvider {...props}>
-            <GlobalStyle />
-            <SignerProvider
-              parentOrigin={parentOrigin}
-              withExternalSigner={props.withExternalSigner}
+          <Web3Provider {...props} infuraKey={infuraKey}>
+            <ConfigProvider
+              magicLinkKey={magicLinkKey}
+              infuraKey={infuraKey}
+              {...props}
             >
-              <ConvertionRateProvider>
-                <ModalProvider>{children}</ModalProvider>
-              </ConvertionRateProvider>
-            </SignerProvider>
-          </BosonProvider>
-        </ConfigProvider>
-      </WithReduxProvider>
+              <BlockNumberProvider>
+                <BosonProvider {...props}>
+                  <GlobalStyle />
+                  <SignerProvider
+                    parentOrigin={parentOrigin}
+                    withExternalSigner={props.withExternalSigner}
+                  >
+                    <ConvertionRateProvider>
+                      <ModalProvider>{children}</ModalProvider>
+                    </ConvertionRateProvider>
+                  </SignerProvider>
+                </BosonProvider>
+              </BlockNumberProvider>
+            </ConfigProvider>
+          </Web3Provider>
+        </WithReduxProvider>
+      </BosonThemeProvider>
     );
   });

package/src/components/widgets/finance/convertion-rate/useUniswapPools.ts

@@ -131,6 +131,7 @@ export function useUniswapPools({ tokens }: Props) {
   const bosonToken = useQuery(
     ["pools-boson"],
     async () => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const poolsIdsQuery = await request<any>(UNISWAP_API_URL, poolsId, {
         token0: "USDC",
         token1: "WETH"

package/src/components/widgets/index.tsx

@@ -1,5 +1,7 @@
-export { RedemptionWidgetAction } from "./redemption/provider/RedemptionContext";
+export * from "./BosonThemeProvider";
+export { RedemptionWidgetAction } from "./redemption/provider/RedemptionWidgetContext";
 
 export * from "./finance/FinanceWidget";
 export * from "./redemption/RedemptionWidget";
 export * from "./commit/CommitWidget";
+export * from "./roblox/RobloxWidget";

package/src/components/widgets/redemption/RedemptionWidget.tsx

@@ -21,8 +21,7 @@ type RedemptionProps = {
   };
 
 export type RedemptionWidgetProps = RedemptionProps &
-  RedemptionWidgetProvidersProps;
-
+  Omit<RedemptionWidgetProvidersProps, "children">;
 export function RedemptionWidget(props: RedemptionWidgetProps) {
   const parentOrigin = getParentWindowOrigin();
   const sellerIds = Array.isArray(props.sellerIds)

package/src/components/widgets/redemption/RedemptionWidgetProviders.tsx

@@ -10,65 +10,100 @@ import { ModalProvider } from "../../modal/ModalProvider";
 import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 import { SignerProvider } from "../../signer/SignerProvider";
 import GlobalStyle from "../../styles/GlobalStyle";
-import { WalletConnectionProviderProps } from "../../wallet/WalletConnectionProvider";
 import { WithReduxProvider, WithReduxProviderProps } from "../ReduxProvider";
 import { getParentWindowOrigin } from "../common";
 import ConvertionRateProvider, {
   ConvertionRateProviderProps
 } from "../finance/convertion-rate/ConvertionRateProvider";
 import { CommonWidgetTypes } from "../types";
-import { RedemptionContextProps } from "./provider/RedemptionContext";
-import { RedemptionProvider } from "./provider/RedemptionProvider";
+import {
+  RedemptionProvider,
+  RedemptionProviderProps
+} from "./provider/RedemptionProvider";
+import {
+  RedemptionWidgetProvider,
+  RedemptionWidgetProviderProps
+} from "./provider/RedemptionWidgetProvider";
 import { BosonProvider, BosonProviderProps } from "../../boson/BosonProvider";
+import { Web3Provider, Web3ProviderProps } from "../../wallet2/web3Provider";
+import { BlockNumberProvider } from "../../../hooks/contracts/useBlockNumber";
+import { RobloxProvider } from "../../../hooks/roblox/context/RobloxProvider";
+import {
+  BosonThemeProvider,
+  BosonThemeProviderProps,
+  useBosonTheme
+} from "../BosonThemeProvider";
+import { GlobalStyledThemed } from "../../styles/GlobalStyledThemed";
 
 export type RedemptionWidgetProvidersProps = IpfsProviderProps &
   Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &
-  Omit<RedemptionContextProps, "setWidgetAction"> &
+  RedemptionProviderProps &
+  Partial<BosonThemeProviderProps> &
+  Omit<RedemptionWidgetProviderProps, "setWidgetAction"> &
   ConvertionRateProviderProps &
   CommonWidgetTypes &
-  Omit<WalletConnectionProviderProps, "children" | "envName"> &
+  Omit<Web3ProviderProps, "infuraKey"> &
   BosonProviderProps &
   WithReduxProviderProps & {
-    signatures?: string[] | undefined | null; // signature1,signature2,signature3
+    signatures?: string[] | undefined | null;
   } & {
     children: ReactNode;
+    withGlobalStyle?: boolean;
   };
 
 const { infuraKey, magicLinkKey } = CONFIG;
 
 export const RedemptionWidgetProviders: React.FC<RedemptionWidgetProvidersProps> =
-  withQueryClientProvider(({ children, ...props }) => {
+  withQueryClientProvider(({ children, withGlobalStyle, ...props }) => {
     const parentOrigin = getParentWindowOrigin();
+    const { themeKey: storyBookThemeKey } =
+      useBosonTheme({
+        throwOnError: false
+      }) || {};
     return (
-      <WithReduxProvider
-        withCustomReduxContext={props.withCustomReduxContext}
-        withReduxProvider={props.withReduxProvider}
+      <BosonThemeProvider
+        theme={props.theme || storyBookThemeKey || "light"}
+        roundness={props.roundness || "min"}
       >
-        <ConfigProvider
-          magicLinkKey={magicLinkKey}
-          infuraKey={infuraKey}
-          {...props}
+        {withGlobalStyle && <GlobalStyledThemed />}
+        <WithReduxProvider
+          withCustomReduxContext={props.withCustomReduxContext}
+          withReduxProvider={props.withReduxProvider}
         >
-          <BosonProvider {...props}>
-            <GlobalStyle />
-            <SignerProvider
-              parentOrigin={parentOrigin}
-              withExternalSigner={props.withExternalSigner}
+          <Web3Provider {...props} infuraKey={infuraKey}>
+            <ConfigProvider
+              magicLinkKey={magicLinkKey}
+              {...props}
+              infuraKey={infuraKey}
             >
-              <ChatProvider>
-                <IpfsProvider {...props}>
-                  <ConvertionRateProvider>
-                    <ModalProvider>
-                      <RedemptionProvider {...props}>
-                        {children}
-                      </RedemptionProvider>
-                    </ModalProvider>
-                  </ConvertionRateProvider>
-                </IpfsProvider>
-              </ChatProvider>
-            </SignerProvider>
-          </BosonProvider>
-        </ConfigProvider>
-      </WithReduxProvider>
+              <RobloxProvider>
+                <BlockNumberProvider>
+                  <BosonProvider {...props}>
+                    <GlobalStyle />
+                    <SignerProvider
+                      parentOrigin={parentOrigin}
+                      withExternalSigner={props.withExternalSigner}
+                    >
+                      <ChatProvider>
+                        <IpfsProvider {...props}>
+                          <ConvertionRateProvider>
+                            <ModalProvider>
+                              <RedemptionProvider {...props}>
+                                <RedemptionWidgetProvider {...props}>
+                                  {children}
+                                </RedemptionWidgetProvider>
+                              </RedemptionProvider>
+                            </ModalProvider>
+                          </ConvertionRateProvider>
+                        </IpfsProvider>
+                      </ChatProvider>
+                    </SignerProvider>
+                  </BosonProvider>
+                </BlockNumberProvider>
+              </RobloxProvider>
+            </ConfigProvider>
+          </Web3Provider>
+        </WithReduxProvider>
+      </BosonThemeProvider>
     );
   });

package/src/components/widgets/redemption/const.ts

@@ -0,0 +1,9 @@
+const deliveryAddressVar =
+  typeof process !== "undefined"
+    ? process?.env?.REACT_APP_DELIVERY_ADDRESS_MOCK || // @ts-expect-error import.meta.env only exists in vite environments
+      import.meta?.env?.REACT_APP_DELIVERY_ADDRESS_MOCK
+    : // @ts-expect-error import.meta.env only exists in vite environments
+      import.meta?.env?.REACT_APP_DELIVERY_ADDRESS_MOCK;
+export const mockedDeliveryAddress = deliveryAddressVar
+  ? JSON.parse(deliveryAddressVar)
+  : undefined;

package/src/components/widgets/redemption/provider/RedemptionContext.tsx

@@ -1,4 +1,3 @@
-import { subgraph } from "@bosonprotocol/core-sdk";
 import { createContext, useContext } from "react";
 import { FormType as RedeemFormType } from "../../../modal/components/Redeem/RedeemFormModel";
 import {
@@ -10,28 +9,7 @@ import {
   RedeemTransactionSubmittedMessage
 } from "../../../../hooks/callbacks/types";
 
-export enum RedemptionWidgetAction {
-  // The widget will ask the user to select an Exchange (My Items view)
-  SELECT_EXCHANGE = "SELECT_EXCHANGE",
-  // The widget will directly show the details of a given exchange
-  EXCHANGE_DETAILS = "EXCHANGE_DETAILS",
-  // The widget will directly show the redeem form of a given exchange
-  REDEEM_FORM = "REDEEM_FORM",
-  // The widget will directly show the cancellation form of a given exchange
-  CANCEL_FORM = "CANCEL_FORM",
-  // The widget will directly show the redeem confirmation view for of a given exchange
-  CONFIRM_REDEEM = "CONFIRM_REDEEM"
-}
-
 export type RedemptionContextProps = {
-  // if the Overview (step #1) shall be shown
-  showRedemptionOverview: boolean;
-  // action that shall be presented to the user when the widget shows up
-  widgetAction: RedemptionWidgetAction;
-  // allow to change the widgetAction property from the code
-  setWidgetAction: (widgetAction: RedemptionWidgetAction) => void;
-  // default state of exchanges shown in My Items view
-  exchangeState: subgraph.ExchangeState;
   // If the deliveryInfo shall be sent to the seller via XMTP
   sendDeliveryInfoThroughXMTP: boolean;
   // A specific handler to transfer deliveryInfo (can be used to post message between frontend windows)

package/src/components/widgets/redemption/provider/RedemptionProvider.tsx

@@ -1,19 +1,14 @@
-import React, { ReactNode, useState } from "react";
+import React, { ReactNode } from "react";
 import { RedemptionContext, RedemptionContextProps } from "./RedemptionContext";
-
+export type RedemptionProviderProps = RedemptionContextProps & {
+  children: ReactNode;
+};
 export function RedemptionProvider({
   children,
   ...rest
-}: Omit<RedemptionContextProps, "setWidgetAction"> & { children: ReactNode }) {
-  const [widgetAction, setWidgetAction] = useState(rest.widgetAction);
+}: RedemptionProviderProps) {
   return (
-    <RedemptionContext.Provider
-      value={{
-        ...rest,
-        widgetAction,
-        setWidgetAction
-      }}
-    >
+    <RedemptionContext.Provider value={rest}>
       {children}
     </RedemptionContext.Provider>
   );

package/src/components/widgets/redemption/provider/RedemptionWidgetContext.tsx

@@ -0,0 +1,40 @@
+import { subgraph } from "@bosonprotocol/core-sdk";
+import { createContext, useContext } from "react";
+
+export enum RedemptionWidgetAction {
+  // The widget will ask the user to select an Exchange (My Items view)
+  SELECT_EXCHANGE = "SELECT_EXCHANGE",
+  // The widget will directly show the details of a given exchange
+  EXCHANGE_DETAILS = "EXCHANGE_DETAILS",
+  // The widget will directly show the redeem form of a given exchange
+  REDEEM_FORM = "REDEEM_FORM",
+  // The widget will directly show the cancellation form of a given exchange
+  CANCEL_FORM = "CANCEL_FORM",
+  // The widget will directly show the redeem confirmation view for of a given exchange
+  CONFIRM_REDEEM = "CONFIRM_REDEEM"
+}
+
+export type RedemptionWidgetContextProps = {
+  // if the Overview (step #1) shall be shown
+  showRedemptionOverview: boolean;
+  // action that shall be presented to the user when the widget shows up
+  widgetAction: RedemptionWidgetAction;
+  // allow to change the widgetAction property from the code
+  setWidgetAction: (widgetAction: RedemptionWidgetAction) => void;
+  // default state of exchanges shown in My Items view
+  exchangeState: subgraph.ExchangeState;
+};
+
+export const RedemptionWidgetContext = createContext<
+  RedemptionWidgetContextProps | undefined
+>(undefined);
+
+export const useRedemptionWidgetContext = () => {
+  const contextValue = useContext(RedemptionWidgetContext);
+  if (!contextValue) {
+    throw new Error(
+      "You need to use RedemptionWidgetProvider before using useRedemptionWidgetContext"
+    );
+  }
+  return contextValue;
+};

package/src/components/widgets/redemption/provider/RedemptionWidgetProvider.tsx

@@ -0,0 +1,29 @@
+import React, { ReactNode, useState } from "react";
+import {
+  RedemptionWidgetContext,
+  RedemptionWidgetContextProps
+} from "./RedemptionWidgetContext";
+
+export type RedemptionWidgetProviderProps = Omit<
+  RedemptionWidgetContextProps,
+  "setWidgetAction"
+> & {
+  children: ReactNode;
+};
+export function RedemptionWidgetProvider({
+  children,
+  ...rest
+}: RedemptionWidgetProviderProps) {
+  const [widgetAction, setWidgetAction] = useState(rest.widgetAction);
+  return (
+    <RedemptionWidgetContext.Provider
+      value={{
+        ...rest,
+        widgetAction,
+        setWidgetAction
+      }}
+    >
+      {children}
+    </RedemptionWidgetContext.Provider>
+  );
+}