diff --git a/packages/react-kit/src/components/chat/ChatProvider/ChatProvider.tsx b/packages/react-kit/src/components/chat/ChatProvider/ChatProvider.tsx index f797dee4a..f83e764e9 100644 --- a/packages/react-kit/src/components/chat/ChatProvider/ChatProvider.tsx +++ b/packages/react-kit/src/components/chat/ChatProvider/ChatProvider.tsx @@ -1,6 +1,6 @@ import { BosonXmtpClient } from "@bosonprotocol/chat-sdk"; import React, { ReactNode, useEffect, useState } from "react"; -import { useCoreSDKWithContext } from "../../../hooks/useCoreSdkWithContext"; +import { useCoreSDKWithContext } from "../../../hooks/core-sdk/useCoreSdkWithContext"; import { useEnvContext } from "../../environment/EnvironmentContext"; import { Context } from "./ChatContext"; diff --git a/packages/react-kit/src/components/cta/common/CtaButton.tsx b/packages/react-kit/src/components/cta/common/CtaButton.tsx index 7e0edf9c4..9c1cf9143 100644 --- a/packages/react-kit/src/components/cta/common/CtaButton.tsx +++ b/packages/react-kit/src/components/cta/common/CtaButton.tsx @@ -8,7 +8,7 @@ import { ButtonTextWrapper, ExtraInfo, LoadingWrapper } from "../common/styles"; import { CtaButtonProps } from "../common/types"; import { Loading } from "../../Loading"; import { ButtonSize } from "../../ui/buttonSize"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type Props = CtaButtonProps & { defaultLabel?: string; diff --git a/packages/react-kit/src/components/cta/common/types.ts b/packages/react-kit/src/components/cta/common/types.ts index 2af6011ca..9720751de 100644 --- a/packages/react-kit/src/components/cta/common/types.ts +++ b/packages/react-kit/src/components/cta/common/types.ts @@ -1,6 +1,6 @@ import React, { RefObject } from "react"; import { providers } from "ethers"; -import { CoreSdkConfig } from "../../../hooks/useCoreSdk"; +import { CoreSdkConfig } from "../../../hooks/core-sdk/useCoreSdk"; import { ButtonProps } from "../../buttons/Button"; import { Action } from "../../../hooks/useCtaClickHandler"; diff --git a/packages/react-kit/src/components/cta/dispute/AddFeesDisputeResolverButton.tsx b/packages/react-kit/src/components/cta/dispute/AddFeesDisputeResolverButton.tsx index 38405070b..499bd06f9 100644 --- a/packages/react-kit/src/components/cta/dispute/AddFeesDisputeResolverButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/AddFeesDisputeResolverButton.tsx @@ -8,7 +8,7 @@ import { Loading } from "../../Loading"; import { CreateSellerArgs, TransactionResponse } from "@bosonprotocol/common"; import { DisputeResolutionFee } from "@bosonprotocol/core-sdk/dist/cjs/accounts"; import { ButtonSize } from "../../ui/buttonSize"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; export type IAddFeesDisputeResolverButton = { exchangeId: BigNumberish; createSellerArgs: CreateSellerArgs; diff --git a/packages/react-kit/src/components/cta/dispute/AddSellerToDisputeResolverButton.tsx b/packages/react-kit/src/components/cta/dispute/AddSellerToDisputeResolverButton.tsx index 5643c66c5..f30317b38 100644 --- a/packages/react-kit/src/components/cta/dispute/AddSellerToDisputeResolverButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/AddSellerToDisputeResolverButton.tsx @@ -8,7 +8,7 @@ import { Loading } from "../../Loading"; import { CreateSellerArgs, TransactionResponse } from "@bosonprotocol/common"; import { DisputeResolutionFee } from "@bosonprotocol/core-sdk/dist/cjs/accounts"; import { ButtonSize } from "../../ui/buttonSize"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; export type IAddSellerToDisputeResolver = { exchangeId: BigNumberish; createSellerArgs: CreateSellerArgs; diff --git a/packages/react-kit/src/components/cta/dispute/CreateDisputeResolverButton.tsx b/packages/react-kit/src/components/cta/dispute/CreateDisputeResolverButton.tsx index 12e63e193..65260a9d2 100644 --- a/packages/react-kit/src/components/cta/dispute/CreateDisputeResolverButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/CreateDisputeResolverButton.tsx @@ -8,7 +8,7 @@ import { Loading } from "../../Loading"; import { TransactionResponse } from "@bosonprotocol/common"; import { accounts } from "@bosonprotocol/core-sdk"; import { ButtonSize } from "../../ui/buttonSize"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; export type ICreateDisputeResolverButton = { exchangeId: BigNumberish; disputeResolverToCreate: accounts.CreateDisputeResolverArgs; diff --git a/packages/react-kit/src/components/cta/dispute/DecideDisputeButton.tsx b/packages/react-kit/src/components/cta/dispute/DecideDisputeButton.tsx index 03059e5cb..a4f75294a 100644 --- a/packages/react-kit/src/components/cta/dispute/DecideDisputeButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/DecideDisputeButton.tsx @@ -3,7 +3,7 @@ import { BigNumberish } from "ethers"; import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { exchangeId: BigNumberish; diff --git a/packages/react-kit/src/components/cta/dispute/EscalateDisputeButton.tsx b/packages/react-kit/src/components/cta/dispute/EscalateDisputeButton.tsx index 292f592af..adc772a9f 100644 --- a/packages/react-kit/src/components/cta/dispute/EscalateDisputeButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/EscalateDisputeButton.tsx @@ -3,7 +3,7 @@ import { BigNumberish } from "ethers"; import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { exchangeId: BigNumberish; diff --git a/packages/react-kit/src/components/cta/dispute/ExpireDisputeButton.tsx b/packages/react-kit/src/components/cta/dispute/ExpireDisputeButton.tsx index 8f72c2312..61f0a1f56 100644 --- a/packages/react-kit/src/components/cta/dispute/ExpireDisputeButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/ExpireDisputeButton.tsx @@ -3,7 +3,7 @@ import { BigNumberish } from "ethers"; import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { exchangeId: BigNumberish; diff --git a/packages/react-kit/src/components/cta/dispute/ExpireEscalationDisputeButton.tsx b/packages/react-kit/src/components/cta/dispute/ExpireEscalationDisputeButton.tsx index e95c755db..cac51bc74 100644 --- a/packages/react-kit/src/components/cta/dispute/ExpireEscalationDisputeButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/ExpireEscalationDisputeButton.tsx @@ -3,7 +3,7 @@ import { BigNumberish } from "ethers"; import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { exchangeId: BigNumberish; diff --git a/packages/react-kit/src/components/cta/dispute/ExtendDisputeTimeoutButton.tsx b/packages/react-kit/src/components/cta/dispute/ExtendDisputeTimeoutButton.tsx index 1ec41012b..677fa895f 100644 --- a/packages/react-kit/src/components/cta/dispute/ExtendDisputeTimeoutButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/ExtendDisputeTimeoutButton.tsx @@ -3,7 +3,7 @@ import { BigNumberish } from "ethers"; import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { exchangeId: BigNumberish; diff --git a/packages/react-kit/src/components/cta/dispute/RaiseDisputeButton.tsx b/packages/react-kit/src/components/cta/dispute/RaiseDisputeButton.tsx index cbedfafea..e537d4418 100644 --- a/packages/react-kit/src/components/cta/dispute/RaiseDisputeButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/RaiseDisputeButton.tsx @@ -3,7 +3,7 @@ import { BigNumberish } from "ethers"; import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { exchangeId: BigNumberish; diff --git a/packages/react-kit/src/components/cta/dispute/RefuseDisputeButton.tsx b/packages/react-kit/src/components/cta/dispute/RefuseDisputeButton.tsx index e012b78a4..83e631756 100644 --- a/packages/react-kit/src/components/cta/dispute/RefuseDisputeButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/RefuseDisputeButton.tsx @@ -3,7 +3,7 @@ import { BigNumberish } from "ethers"; import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { exchangeId: BigNumberish; diff --git a/packages/react-kit/src/components/cta/dispute/RemoveFeesDisputeResolverButton.tsx b/packages/react-kit/src/components/cta/dispute/RemoveFeesDisputeResolverButton.tsx index 9c24a75aa..5d4e7651f 100644 --- a/packages/react-kit/src/components/cta/dispute/RemoveFeesDisputeResolverButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/RemoveFeesDisputeResolverButton.tsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import { BigNumberish, providers } from "ethers"; import { Button } from "../../buttons/Button"; -import { useCoreSdk } from "../../../hooks/useCoreSdk"; +import { useCoreSdk } from "../../../hooks/core-sdk/useCoreSdk"; import { ButtonTextWrapper, ExtraInfo, LoadingWrapper } from "../common/styles"; import { CtaButtonProps } from "../common/types"; import { Loading } from "../../Loading"; diff --git a/packages/react-kit/src/components/cta/dispute/RemoveSellerFromDisputeResolverButton.tsx b/packages/react-kit/src/components/cta/dispute/RemoveSellerFromDisputeResolverButton.tsx index 9d1cea507..87efee523 100644 --- a/packages/react-kit/src/components/cta/dispute/RemoveSellerFromDisputeResolverButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/RemoveSellerFromDisputeResolverButton.tsx @@ -8,7 +8,7 @@ import { Loading } from "../../Loading"; import { CreateSellerArgs, TransactionResponse } from "@bosonprotocol/common"; import { DisputeResolutionFee } from "@bosonprotocol/core-sdk/dist/cjs/accounts"; import { ButtonSize } from "../../ui/buttonSize"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; export type IRemoveSellerFromDisputeResolverButton = { exchangeId: BigNumberish; createSellerArgs: CreateSellerArgs; diff --git a/packages/react-kit/src/components/cta/dispute/ResolveDisputeButton.tsx b/packages/react-kit/src/components/cta/dispute/ResolveDisputeButton.tsx index 62872fdab..62f07ab9a 100644 --- a/packages/react-kit/src/components/cta/dispute/ResolveDisputeButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/ResolveDisputeButton.tsx @@ -3,7 +3,7 @@ import { BigNumberish, utils } from "ethers"; import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { exchangeId: BigNumberish; diff --git a/packages/react-kit/src/components/cta/dispute/RetractDisputeButton.tsx b/packages/react-kit/src/components/cta/dispute/RetractDisputeButton.tsx index 10e6c3856..0be5dbf6e 100644 --- a/packages/react-kit/src/components/cta/dispute/RetractDisputeButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/RetractDisputeButton.tsx @@ -3,7 +3,7 @@ import { BigNumberish } from "ethers"; import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { exchangeId: BigNumberish; diff --git a/packages/react-kit/src/components/cta/dispute/UpdateDisputeResolverButton.tsx b/packages/react-kit/src/components/cta/dispute/UpdateDisputeResolverButton.tsx index 2508f8303..4418f2d98 100644 --- a/packages/react-kit/src/components/cta/dispute/UpdateDisputeResolverButton.tsx +++ b/packages/react-kit/src/components/cta/dispute/UpdateDisputeResolverButton.tsx @@ -8,7 +8,7 @@ import { Loading } from "../../Loading"; import { CreateSellerArgs, TransactionResponse } from "@bosonprotocol/common"; import { accounts } from "@bosonprotocol/core-sdk"; import { ButtonSize } from "../../ui/buttonSize"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; export type IUpdateDisputeResolverButton = { exchangeId: BigNumberish; disputeResolverId: BigNumberish; diff --git a/packages/react-kit/src/components/cta/exchange/BatchCompleteButton.tsx b/packages/react-kit/src/components/cta/exchange/BatchCompleteButton.tsx index a07f39161..850b075dc 100644 --- a/packages/react-kit/src/components/cta/exchange/BatchCompleteButton.tsx +++ b/packages/react-kit/src/components/cta/exchange/BatchCompleteButton.tsx @@ -3,7 +3,7 @@ import { BigNumberish } from "ethers"; import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { /** diff --git a/packages/react-kit/src/components/cta/exchange/CancelButton.tsx b/packages/react-kit/src/components/cta/exchange/CancelButton.tsx index b0e2f52e2..adc4971e2 100644 --- a/packages/react-kit/src/components/cta/exchange/CancelButton.tsx +++ b/packages/react-kit/src/components/cta/exchange/CancelButton.tsx @@ -3,7 +3,7 @@ import { BigNumberish } from "ethers"; import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { exchangeId: BigNumberish; diff --git a/packages/react-kit/src/components/cta/exchange/CompleteButton.tsx b/packages/react-kit/src/components/cta/exchange/CompleteButton.tsx index 973a83469..c7a106c21 100644 --- a/packages/react-kit/src/components/cta/exchange/CompleteButton.tsx +++ b/packages/react-kit/src/components/cta/exchange/CompleteButton.tsx @@ -3,7 +3,7 @@ import { BigNumberish } from "ethers"; import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { exchangeId: BigNumberish; diff --git a/packages/react-kit/src/components/cta/exchange/ExpireButton.tsx b/packages/react-kit/src/components/cta/exchange/ExpireButton.tsx index a64e17c97..a0c2dc1aa 100644 --- a/packages/react-kit/src/components/cta/exchange/ExpireButton.tsx +++ b/packages/react-kit/src/components/cta/exchange/ExpireButton.tsx @@ -3,7 +3,7 @@ import { BigNumberish } from "ethers"; import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { exchangeId: BigNumberish; diff --git a/packages/react-kit/src/components/cta/exchange/RedeemButton.tsx b/packages/react-kit/src/components/cta/exchange/RedeemButton.tsx index 94821f12d..d656b9dcf 100644 --- a/packages/react-kit/src/components/cta/exchange/RedeemButton.tsx +++ b/packages/react-kit/src/components/cta/exchange/RedeemButton.tsx @@ -3,7 +3,7 @@ import { BigNumberish } from "ethers"; import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { exchangeId: BigNumberish; diff --git a/packages/react-kit/src/components/cta/exchange/RevokeButton.tsx b/packages/react-kit/src/components/cta/exchange/RevokeButton.tsx index 975e6fe78..2494a8935 100644 --- a/packages/react-kit/src/components/cta/exchange/RevokeButton.tsx +++ b/packages/react-kit/src/components/cta/exchange/RevokeButton.tsx @@ -3,7 +3,7 @@ import { BigNumberish } from "ethers"; import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { exchangeId: BigNumberish; diff --git a/packages/react-kit/src/components/cta/funds/DepositFundsButton.tsx b/packages/react-kit/src/components/cta/funds/DepositFundsButton.tsx index c8f48af72..80c19f62d 100644 --- a/packages/react-kit/src/components/cta/funds/DepositFundsButton.tsx +++ b/packages/react-kit/src/components/cta/funds/DepositFundsButton.tsx @@ -5,7 +5,7 @@ import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; import { useSignerAddress } from "../../../hooks/useSignerAddress"; import { TransactionReceipt } from "@bosonprotocol/common"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { exchangeToken: string; diff --git a/packages/react-kit/src/components/cta/funds/WithdrawAllFundsButton.tsx b/packages/react-kit/src/components/cta/funds/WithdrawAllFundsButton.tsx index 8cb920e9d..d47235b18 100644 --- a/packages/react-kit/src/components/cta/funds/WithdrawAllFundsButton.tsx +++ b/packages/react-kit/src/components/cta/funds/WithdrawAllFundsButton.tsx @@ -3,7 +3,7 @@ import React from "react"; import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; import { TransactionReceipt } from "@bosonprotocol/common"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { accountId: string; diff --git a/packages/react-kit/src/components/cta/funds/WithdrawFundsButton.tsx b/packages/react-kit/src/components/cta/funds/WithdrawFundsButton.tsx index e6ddea407..974fe3831 100644 --- a/packages/react-kit/src/components/cta/funds/WithdrawFundsButton.tsx +++ b/packages/react-kit/src/components/cta/funds/WithdrawFundsButton.tsx @@ -5,7 +5,7 @@ import { CtaButtonProps } from "../common/types"; import { CtaButton } from "../common/CtaButton"; import { useSignerAddress } from "../../../hooks/useSignerAddress"; import { TransactionReceipt } from "@bosonprotocol/common"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { accountId: string; diff --git a/packages/react-kit/src/components/cta/offer/BatchVoidButton.tsx b/packages/react-kit/src/components/cta/offer/BatchVoidButton.tsx index 7ac9cfb38..1ebcfc088 100644 --- a/packages/react-kit/src/components/cta/offer/BatchVoidButton.tsx +++ b/packages/react-kit/src/components/cta/offer/BatchVoidButton.tsx @@ -8,7 +8,7 @@ import { CtaButtonProps } from "../common/types"; import { Loading } from "../../Loading"; import { ButtonSize } from "../../ui/buttonSize"; import { TransactionResponse } from "@bosonprotocol/common"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type Props = { /** diff --git a/packages/react-kit/src/components/cta/offer/CommitButton.tsx b/packages/react-kit/src/components/cta/offer/CommitButton.tsx index 8d2e4953e..e54fd0e5a 100644 --- a/packages/react-kit/src/components/cta/offer/CommitButton.tsx +++ b/packages/react-kit/src/components/cta/offer/CommitButton.tsx @@ -6,7 +6,7 @@ import { Action } from "../../../hooks/useCtaClickHandler"; import { useSignerAddress } from "../../../hooks/useSignerAddress"; import { CtaButton } from "../common/CtaButton"; import { CtaButtonProps } from "../common/types"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type AdditionalProps = { /** diff --git a/packages/react-kit/src/components/cta/offer/CreateOfferButton.tsx b/packages/react-kit/src/components/cta/offer/CreateOfferButton.tsx index ed486b3d9..f2a24f718 100644 --- a/packages/react-kit/src/components/cta/offer/CreateOfferButton.tsx +++ b/packages/react-kit/src/components/cta/offer/CreateOfferButton.tsx @@ -9,7 +9,7 @@ import { Loading } from "../../Loading"; import { offers, accounts } from "@bosonprotocol/core-sdk"; import { TransactionResponse } from "@bosonprotocol/common"; import { ButtonSize } from "../../ui/buttonSize"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type Props = { hasSellerAccount: boolean; diff --git a/packages/react-kit/src/components/cta/offer/VoidButton.tsx b/packages/react-kit/src/components/cta/offer/VoidButton.tsx index cb7e8166a..a24a4e86c 100644 --- a/packages/react-kit/src/components/cta/offer/VoidButton.tsx +++ b/packages/react-kit/src/components/cta/offer/VoidButton.tsx @@ -8,7 +8,7 @@ import { ButtonTextWrapper, ExtraInfo, LoadingWrapper } from "../common/styles"; import { CtaButtonProps } from "../common/types"; import { Loading } from "../../Loading"; import { ButtonSize } from "../../ui/buttonSize"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; type Props = { /** diff --git a/packages/react-kit/src/components/cta/seller/CreateSellerButton.tsx b/packages/react-kit/src/components/cta/seller/CreateSellerButton.tsx index 5b58afc29..6aab38d98 100644 --- a/packages/react-kit/src/components/cta/seller/CreateSellerButton.tsx +++ b/packages/react-kit/src/components/cta/seller/CreateSellerButton.tsx @@ -8,7 +8,7 @@ import { CtaButtonProps } from "../common/types"; import { Loading } from "../../Loading"; import { CreateSellerArgs, TransactionResponse } from "@bosonprotocol/common"; import { ButtonSize } from "../../ui/buttonSize"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; export type ICreateSellerButton = { exchangeId: BigNumberish; createSellerArgs: CreateSellerArgs; diff --git a/packages/react-kit/src/components/cta/seller/UpdateSellerButton.tsx b/packages/react-kit/src/components/cta/seller/UpdateSellerButton.tsx index 56ebb469c..e9cadaafd 100644 --- a/packages/react-kit/src/components/cta/seller/UpdateSellerButton.tsx +++ b/packages/react-kit/src/components/cta/seller/UpdateSellerButton.tsx @@ -7,7 +7,7 @@ import { CtaButtonProps } from "../common/types"; import { Loading } from "../../Loading"; import { UpdateSellerArgs, TransactionResponse } from "@bosonprotocol/common"; import { ButtonSize } from "../../ui/buttonSize"; -import { useCoreSdkOverrides } from "../../../hooks/useCoreSdkOverrides"; +import { useCoreSdkOverrides } from "../../../hooks/core-sdk/useCoreSdkOverrides"; export type IUpdateSellerButton = { exchangeId: BigNumberish; diff --git a/packages/react-kit/src/components/error/ConnectWalletErrorMessage.tsx b/packages/react-kit/src/components/error/ConnectWalletErrorMessage.tsx new file mode 100644 index 000000000..c852f6144 --- /dev/null +++ b/packages/react-kit/src/components/error/ConnectWalletErrorMessage.tsx @@ -0,0 +1,22 @@ +import frame from "assets/frame.png"; +import React from "react"; +import { ErrorMessage, ErrorMessageProps } from "./ErrorMessage"; +import ConnectButton from "../wallet/ConnectButton"; + +type ConnectWalletErrorMessageProps = Partial< + Pick +>; +export function ConnectWalletErrorMessage({ + cta, + title, + message +}: ConnectWalletErrorMessageProps) { + return ( + } + message={message ?? "Please connect wallet to proceed"} + title={title ?? "Connect wallet"} + img={{title}} + /> + ); +} diff --git a/packages/react-kit/src/components/error/EmptyErrorMessage.tsx b/packages/react-kit/src/components/error/EmptyErrorMessage.tsx new file mode 100644 index 000000000..6aa2a1115 --- /dev/null +++ b/packages/react-kit/src/components/error/EmptyErrorMessage.tsx @@ -0,0 +1,24 @@ +import frame from "../../assets/frame.png"; +import React from "react"; +import { ErrorMessage, ErrorMessageProps } from "./ErrorMessage"; + +type EmptyErrorMessageProps = Pick< + ErrorMessageProps, + "cta" | "title" | "message" +>; +export function EmptyErrorMessage({ + cta, + title, + message, + ...rest +}: EmptyErrorMessageProps) { + return ( + } + {...rest} + /> + ); +} diff --git a/packages/react-kit/src/components/error/ErrorMessage.tsx b/packages/react-kit/src/components/error/ErrorMessage.tsx new file mode 100644 index 000000000..e5e3225b5 --- /dev/null +++ b/packages/react-kit/src/components/error/ErrorMessage.tsx @@ -0,0 +1,73 @@ +import React, { ReactNode } from "react"; +import styled from "styled-components"; + +import Grid from "../ui/Grid"; +import GridContainer from "../ui/GridContainer"; +import { breakpoint } from "../../lib/ui/breakpoint"; + +const margin = "1.75rem"; +const StyledGridContainer = styled(GridContainer)` + margin-top: ${margin}; + margin-bottom: ${margin}; + justify-items: center; + justify-content: center; + align-content: center; + align-items: center; + flex: 1; + ${breakpoint.m} { + justify-items: end; + justify-content: space-between; + } +`; +const Title = styled.div` + white-space: pre-line; + margin: 0; + font-size: 3.5rem; + font-weight: 600; + line-height: 1.2; +`; +const Message = styled.p` + white-space: pre-line; +`; + +export type ErrorMessageProps = { + cta?: ReactNode; + img: ReactNode; + title: string; + message?: string; +}; +export function ErrorMessage({ + cta: CTA, + img, + title, + message, + ...rest +}: ErrorMessageProps) { + return ( + + + {title} + {message && {message}} + {CTA} + + {img} + + ); +} diff --git a/packages/react-kit/src/components/magicLink/Login.tsx b/packages/react-kit/src/components/magicLink/Login.tsx index aa7413b36..d14c64af3 100644 --- a/packages/react-kit/src/components/magicLink/Login.tsx +++ b/packages/react-kit/src/components/magicLink/Login.tsx @@ -4,8 +4,10 @@ import { useUser } from "./UserContext"; import { useMagic } from "../../hooks"; import { Button } from "../buttons/Button"; import { Spinner } from "../ui/loading/Spinner"; - -export const MagicLoginButton = () => { +type MagicLoginButtonProps = { + buttonProps: Omit[0], "onClick" | "disabled">; +}; +export const MagicLoginButton = ({ buttonProps }: MagicLoginButtonProps) => { const magic = useMagic(); const { setUser } = useUser(); const [disabled, setDisabled] = useState(false); @@ -31,7 +33,7 @@ export const MagicLoginButton = () => { }; return ( - - ) : ( - <> - {/* {showCommitProxyButton ? ( - - ) : ( */} - - {/* )} */} - - )} - - - By proceeding to Commit, I agree to the{" "} - { - onLicenseAgreementClick(); - }} - > - rNFT Terms - - . - + {hasVariations && ( +
+ +
+ )} - + {offer.condition && ( = ({ inheritColor={false} /> + + + { + if (!address) { + saveItemInStorage("isConnectWalletFromCommit", true); + setIsCommittingFromNotConnectedWallet(true); + openAccountModal?.(); + } + }} + > + {balanceLoading && address ? ( + + ) : ( + <> + {/* {showCommitProxyButton ? ( + + ) : ( */} + + {/* )} */} + + )} + + + By proceeding to Commit, I agree to the{" "} + { + onLicenseAgreementClick(); + }} + > + rNFT Terms + + . + + ); }; diff --git a/packages/react-kit/src/components/modal/components/Commit/OfferVariantView.tsx b/packages/react-kit/src/components/modal/components/Commit/OfferVariantView.tsx index c41ad1488..a9bada9fa 100644 --- a/packages/react-kit/src/components/modal/components/Commit/OfferVariantView.tsx +++ b/packages/react-kit/src/components/modal/components/Commit/OfferVariantView.tsx @@ -9,13 +9,11 @@ import { useConvertionRate } from "../../../widgets/finance/convertion-rate/useC import useCheckExchangePolicy from "../../../../hooks/useCheckExchangePolicy"; import { useNonModalContext } from "../../nonModal/NonModal"; import Grid from "../../../ui/Grid"; -import Typography from "../../../ui/Typography"; -import { Loading } from "../../../Loading"; import DetailSlider from "../common/detail/DetailSlider"; import GridContainer from "../../../ui/GridContainer"; import { SellerAndDescription } from "../common/detail/SellerAndDescription"; -import VariationSelects from "../Redeem/ExchangeView/VariationSelects"; import DetailView from "./DetailView/DetailView"; +import Loading from "../../../ui/loading/Loading"; const colors = theme.colors.light; @@ -56,7 +54,6 @@ export function OfferVariantView({ fairExchangePolicyRules, defaultDisputeResolverId }: OfferVariantViewProps) { - const hasVariations = !!selectedVariant.variations?.length; const { offer } = selectedVariant; const { @@ -103,30 +100,21 @@ export function OfferVariantView({ useEffect(() => { dispatch({ payload: { - headerComponent: ( - - {offer && ( - - {offer.metadata.name} - - )} - - ), + headerComponent: <>, contentStyle: { background: colors.lightGrey } } }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [dispatch, offer]); + }, [dispatch]); return ( <> {isLoading ? ( ) : !offer ? ( -
This exchange does not exist
+
This offer does not exist
) : isError ? ( -
+
There has been an error, please try again later...
) : ( @@ -157,28 +145,18 @@ export function OfferVariantView({ /> - - {hasVariations && ( -
- -
- )} - - + )} diff --git a/packages/react-kit/src/components/modal/components/Redeem/Confirmation/Confirmation.tsx b/packages/react-kit/src/components/modal/components/Redeem/Confirmation/Confirmation.tsx index bba9403e9..48b8e84b2 100644 --- a/packages/react-kit/src/components/modal/components/Redeem/Confirmation/Confirmation.tsx +++ b/packages/react-kit/src/components/modal/components/Redeem/Confirmation/Confirmation.tsx @@ -12,7 +12,7 @@ import React, { useRef, useState } from "react"; import toast from "react-hot-toast"; import styled from "styled-components"; import { useAddPendingTransactionWithContext } from "../../../../../hooks/transactions/usePendingTransactionsWithContext"; -import { useCoreSDKWithContext } from "../../../../../hooks/useCoreSdkWithContext"; +import { useCoreSDKWithContext } from "../../../../../hooks/core-sdk/useCoreSdkWithContext"; import { poll } from "../../../../../lib/promises/promises"; import { theme } from "../../../../../theme"; diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/DetailView/DetailView.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/DetailView/DetailView.tsx index 4e61f17da..52062aaf3 100644 --- a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/DetailView/DetailView.tsx +++ b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/DetailView/DetailView.tsx @@ -47,7 +47,7 @@ import { useAccount, useIsConnectedToWrongChain } from "../../../../../../hooks/connection/connection"; -import { useCoreSDKWithContext } from "../../../../../../hooks/useCoreSdkWithContext"; +import { useCoreSDKWithContext } from "../../../../../../hooks/core-sdk/useCoreSdkWithContext"; import TokenGated from "../../../common/detail/TokenGated"; const colors = theme.colors.light; diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeView.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeView.tsx index e2ca76a64..2cda4ecce 100644 --- a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeView.tsx +++ b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/ExchangeView.tsx @@ -10,7 +10,7 @@ import Loading from "../../../../ui/loading/Loading"; import Typography from "../../../../ui/Typography"; import DetailOpenSea from "../../common/DetailOpenSea"; import DetailView from "./DetailView/DetailView"; -import VariationSelects from "./VariationSelects"; +import VariationSelects from "../../common/VariationSelects"; import { isTruthy } from "../../../../../types/helpers"; import GridContainer from "../../../../ui/GridContainer"; import { theme } from "../../../../../theme"; diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/cancellation/CancelExchange.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/cancellation/CancelExchange.tsx index d934deab6..0ba929d9a 100644 --- a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/cancellation/CancelExchange.tsx +++ b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/cancellation/CancelExchange.tsx @@ -5,7 +5,7 @@ import React, { useState } from "react"; import toast from "react-hot-toast"; import styled from "styled-components"; import { useAddPendingTransactionWithContext } from "../../../../../../hooks/transactions/usePendingTransactionsWithContext"; -import { useCoreSDKWithContext } from "../../../../../../hooks/useCoreSdkWithContext"; +import { useCoreSDKWithContext } from "../../../../../../hooks/core-sdk/useCoreSdkWithContext"; import useRefundData from "../../../../../../hooks/useRefundData"; import { useDisplayFloat } from "../../../../../../lib/price/prices"; import { poll } from "../../../../../../lib/promises/promises"; diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucher.tsx b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucher.tsx index f744ad1b7..e71e690e2 100644 --- a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucher.tsx +++ b/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/expireVoucher/ExpireVoucher.tsx @@ -3,7 +3,7 @@ import { Provider } from "@bosonprotocol/ethers-sdk"; import React, { useState } from "react"; import styled from "styled-components"; import { useAddPendingTransactionWithContext } from "../../../../../../hooks/transactions/usePendingTransactionsWithContext"; -import { useCoreSDKWithContext } from "../../../../../../hooks/useCoreSdkWithContext"; +import { useCoreSDKWithContext } from "../../../../../../hooks/core-sdk/useCoreSdkWithContext"; import useRefundData from "../../../../../../hooks/useRefundData"; import { useDisplayFloat } from "../../../../../../lib/price/prices"; import { poll } from "../../../../../../lib/promises/promises"; diff --git a/packages/react-kit/src/components/modal/components/Redeem/RedeemNonModal.tsx b/packages/react-kit/src/components/modal/components/Redeem/RedeemNonModal.tsx index a72e1d9b6..eff111817 100644 --- a/packages/react-kit/src/components/modal/components/Redeem/RedeemNonModal.tsx +++ b/packages/react-kit/src/components/modal/components/Redeem/RedeemNonModal.tsx @@ -95,17 +95,15 @@ export default function RedeemWrapper({ }: RedeemNonModalProps) { return ( - Redeem your item - - ), - footerComponent: , - contentStyle: { - background: colors.white - } + hideModal={hideModal} + headerComponent={ + + Redeem your item + + } + footerComponent={} + contentStyle={{ + background: colors.white }} > diff --git a/packages/react-kit/src/components/modal/components/SellerFinance/FinanceDeposit.tsx b/packages/react-kit/src/components/modal/components/SellerFinance/FinanceDeposit.tsx index b52b127e7..f87483d01 100644 --- a/packages/react-kit/src/components/modal/components/SellerFinance/FinanceDeposit.tsx +++ b/packages/react-kit/src/components/modal/components/SellerFinance/FinanceDeposit.tsx @@ -20,7 +20,7 @@ import { Spinner } from "phosphor-react"; import { Provider } from "@bosonprotocol/ethers-sdk"; import { DepositFundsButton } from "../../../cta/funds/DepositFundsButton"; import { useEnvContext } from "../../../environment/EnvironmentContext"; -import { useCoreSDKWithContext } from "../../../../hooks/useCoreSdkWithContext"; +import { useCoreSDKWithContext } from "../../../../hooks/core-sdk/useCoreSdkWithContext"; import { useAddPendingTransactionWithContext } from "../../../../hooks/transactions/usePendingTransactionsWithContext"; import { subgraph } from "@bosonprotocol/core-sdk"; import { useAccount, useSigner } from "../../../../hooks/connection/connection"; diff --git a/packages/react-kit/src/components/modal/components/SellerFinance/FinanceWithdraw.tsx b/packages/react-kit/src/components/modal/components/SellerFinance/FinanceWithdraw.tsx index 482f43b9c..6cfdd7e54 100644 --- a/packages/react-kit/src/components/modal/components/SellerFinance/FinanceWithdraw.tsx +++ b/packages/react-kit/src/components/modal/components/SellerFinance/FinanceWithdraw.tsx @@ -24,7 +24,7 @@ import { } from "./FinancesStyles"; import { WithdrawFundsButton } from "../../../cta/funds/WithdrawFundsButton"; import { Provider } from "@bosonprotocol/ethers-sdk"; -import { useCoreSDKWithContext } from "../../../../hooks/useCoreSdkWithContext"; +import { useCoreSDKWithContext } from "../../../../hooks/core-sdk/useCoreSdkWithContext"; import { useEnvContext } from "../../../environment/EnvironmentContext"; import { useAddPendingTransactionWithContext } from "../../../../hooks/transactions/usePendingTransactionsWithContext"; import { subgraph } from "@bosonprotocol/core-sdk"; diff --git a/packages/react-kit/src/components/modal/components/Transactions/TransactionSubmittedModal/TransactionSubmittedModal.tsx b/packages/react-kit/src/components/modal/components/Transactions/TransactionSubmittedModal/TransactionSubmittedModal.tsx index 32b4838e1..c87d4588e 100644 --- a/packages/react-kit/src/components/modal/components/Transactions/TransactionSubmittedModal/TransactionSubmittedModal.tsx +++ b/packages/react-kit/src/components/modal/components/Transactions/TransactionSubmittedModal/TransactionSubmittedModal.tsx @@ -9,7 +9,7 @@ import { GenericModalProps } from "../../../ModalContext"; import { useModal } from "../../../useModal"; import { theme } from "../../../../../theme"; import { Button } from "../../../../buttons/Button"; -import { useCoreSDKWithContext } from "../../../../../hooks/useCoreSdkWithContext"; +import { useCoreSDKWithContext } from "../../../../../hooks/core-sdk/useCoreSdkWithContext"; const colors = theme.colors.light; const StyledArrowCircleUp = styled(ArrowCircleUp)` diff --git a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/VariationSelects.tsx b/packages/react-kit/src/components/modal/components/common/VariationSelects.tsx similarity index 96% rename from packages/react-kit/src/components/modal/components/Redeem/ExchangeView/VariationSelects.tsx rename to packages/react-kit/src/components/modal/components/common/VariationSelects.tsx index b3f91d4c6..fbf9d9d18 100644 --- a/packages/react-kit/src/components/modal/components/Redeem/ExchangeView/VariationSelects.tsx +++ b/packages/react-kit/src/components/modal/components/common/VariationSelects.tsx @@ -7,13 +7,13 @@ import React, { useMemo, useState } from "react"; -import { isNumeric } from "../../../../../lib/numbers/numbers"; -import { isTruthy } from "../../../../../types/helpers"; -import { VariantV1, Variation } from "../../../../../types/variants"; -import SimpleError from "../../../../error/SimpleError"; -import { Select } from "../../../../form"; -import { SelectDataProps } from "../../../../form/types"; -import Grid from "../../../../ui/Grid"; +import { isNumeric } from "../../../../lib/numbers/numbers"; +import { isTruthy } from "../../../../types/helpers"; +import { VariantV1, Variation } from "../../../../types/variants"; +import SimpleError from "../../../error/SimpleError"; +import { Select } from "../../../form"; +import { SelectDataProps } from "../../../form/types"; +import Grid from "../../../ui/Grid"; interface Quantity { type: string[]; diff --git a/packages/react-kit/src/components/modal/components/common/detail/SellerAndDescription.tsx b/packages/react-kit/src/components/modal/components/common/detail/SellerAndDescription.tsx index e0e458fe5..99b472d37 100644 --- a/packages/react-kit/src/components/modal/components/common/detail/SellerAndDescription.tsx +++ b/packages/react-kit/src/components/modal/components/common/detail/SellerAndDescription.tsx @@ -13,10 +13,10 @@ const colors = theme.colors.light; const Container = styled(Grid)` background: ${colors.white}; padding: 1rem; - [data-seller-id] { + .seller-id { flex: 1 1 50%; } - [data-description] { + .description { flex: 1 1 50%; padding: 0 !important; [data-child-wrapper-button] { @@ -38,10 +38,10 @@ export function SellerAndDescription({ offer, onViewFullDescription }: Props) { buyerOrSeller={offer?.seller} justifyContent="flex-start" withProfileImage - data-seller-id + className="seller-id" /> ` position: relative; text-align: left; - padding: 1rem 2rem; + padding: 1rem 0 1rem 2rem; display: flex; border-bottom: 2px solid ${colors.border}; align-items: center; @@ -20,7 +20,15 @@ const Wrapper = styled(Typography)<{ $title?: string }>` gap: 0.5rem; `; +const StyledThemedButton = styled(ThemedButton)` + padding-right: 0 !important; +`; + const Close = styled(X)` + && { + stroke: unset; + } + line { stroke: ${colors.darkGrey}; } @@ -45,9 +53,13 @@ const Header: React.FC = ({ {closable && ( - + - + )} diff --git a/packages/react-kit/src/components/modal/nonModal/NonModal.tsx b/packages/react-kit/src/components/modal/nonModal/NonModal.tsx index 54fe96fa2..dda75badc 100644 --- a/packages/react-kit/src/components/modal/nonModal/NonModal.tsx +++ b/packages/react-kit/src/components/modal/nonModal/NonModal.tsx @@ -2,7 +2,8 @@ import React, { useContext, CSSProperties, useReducer, - createContext + createContext, + useMemo } from "react"; import { theme } from "../../../theme"; import { ReactNode } from "react"; @@ -207,24 +208,22 @@ export interface NonModalProps { maxWidths?: Store["modalMaxWidth"]; theme?: NonNullable; closable?: boolean; + lookAndFeel?: "modal" | "regular"; + children: ReactNode; } export default function NonModal({ children, - props: { - hideModal, - headerComponent, - footerComponent: FooterComponent, - size = "auto", - maxWidths = null, - theme = "light", - contentStyle: _contentStyle, - closable = true - } -}: { - children: React.ReactNode; - props: NonModalProps; -}) { + hideModal, + headerComponent, + footerComponent: FooterComponent, + size = "auto", + maxWidths = null, + theme = "light", + contentStyle: _contentStyle, + closable = true, + lookAndFeel = "modal" +}: NonModalProps) { const handleOnClose = () => { if (closable && hideModal) { hideModal(); @@ -235,9 +234,24 @@ export default function NonModal({ headerComponent, contentStyle: _contentStyle }); - + const Container = useMemo(() => { + return ({ children }: { children: ReactNode }) => { + return lookAndFeel === "modal" ? ( + + { + handleOnClose(); + }} + /> + + ) : ( + <>{children} + ); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [lookAndFeel]); return ( - +
{FooterComponent && {FooterComponent}} - { - handleOnClose(); - }} - /> - + ); } diff --git a/packages/react-kit/src/components/searchBar/SearchBar.tsx b/packages/react-kit/src/components/searchBar/SearchBar.tsx index 85fcee091..ad0bf3a08 100644 --- a/packages/react-kit/src/components/searchBar/SearchBar.tsx +++ b/packages/react-kit/src/components/searchBar/SearchBar.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import { MagnifyingGlass } from "../../icons/MagnifyingGlass"; -import { useCoreSdk } from "../../hooks/useCoreSdk"; +import { useCoreSdk } from "../../hooks/core-sdk/useCoreSdk"; import { InputField, InputWrapper } from "./SearchBar.styles"; import { subgraph } from "@bosonprotocol/core-sdk"; import { EnvironmentType, ConfigId } from "@bosonprotocol/common/src/types"; diff --git a/packages/react-kit/src/components/ui/GridContainer.tsx b/packages/react-kit/src/components/ui/GridContainer.tsx index 129c5d26d..0a056cd52 100644 --- a/packages/react-kit/src/components/ui/GridContainer.tsx +++ b/packages/react-kit/src/components/ui/GridContainer.tsx @@ -1,5 +1,6 @@ -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { breakpoint } from "../../lib/ui/breakpoint"; +import { CSSProperties } from "react"; export interface ItemsPerRow { xs: number; @@ -9,46 +10,71 @@ export interface ItemsPerRow { xl: number; } -const GridContainer = styled.div<{ itemsPerRow?: Partial }>` - display: grid; - grid-column-gap: 2rem; - grid-row-gap: 2rem; - - grid-template-columns: repeat(1, minmax(0, 1fr)); - ${breakpoint.xs} { - grid-template-columns: repeat( - ${({ itemsPerRow }) => itemsPerRow?.xs || "2"}, - minmax(0, 1fr) - ); - } - - ${breakpoint.s} { - grid-template-columns: repeat( - ${({ itemsPerRow }) => itemsPerRow?.s || "3"}, - minmax(0, 1fr) - ); - } - - ${breakpoint.m} { - grid-template-columns: repeat( - ${({ itemsPerRow }) => itemsPerRow?.m || "3"}, - minmax(0, 1fr) - ); - } +export interface ColumnGapPerRow { + xs: CSSProperties["columnGap"]; + s: CSSProperties["columnGap"]; + m: CSSProperties["columnGap"]; + l: CSSProperties["columnGap"]; + xl: CSSProperties["columnGap"]; +} - ${breakpoint.l} { - grid-template-columns: repeat( - ${({ itemsPerRow }) => itemsPerRow?.l || "3"}, - minmax(0, 1fr) - ); - } +export interface RowGapPerRow { + xs: CSSProperties["rowGap"]; + s: CSSProperties["rowGap"]; + m: CSSProperties["rowGap"]; + l: CSSProperties["rowGap"]; + xl: CSSProperties["rowGap"]; +} - ${breakpoint.xl} { - grid-template-columns: repeat( - ${({ itemsPerRow }) => itemsPerRow?.xl || "3"}, - minmax(0, 1fr) - ); - } ; +const GridContainer = styled.div<{ + itemsPerRow?: Partial; + columnGapPerRow?: Partial; + rowGapPerRow?: Partial; + columnGap?: CSSProperties["columnGap"]; + rowGap?: CSSProperties["rowGap"]; + defaultSize?: string; +}>` + display: grid; + grid-column-gap: ${({ columnGap }) => columnGap || "2rem"}; + grid-row-gap: ${({ rowGap }) => rowGap || "2rem"}; + ${({ + defaultSize = "minmax(0, 1fr)", + itemsPerRow, + columnGapPerRow, + rowGapPerRow + }) => css` + grid-template-columns: repeat(1, ${defaultSize}); + ${breakpoint.xs} { + grid-template-columns: repeat(${() => + itemsPerRow?.xs || "2"}, ${defaultSize})}; + grid-column-gap: ${() => columnGapPerRow?.xs}; + grid-row-gap: ${() => rowGapPerRow?.xs}; + } + ${breakpoint.s} { + grid-template-columns: repeat(${() => + itemsPerRow?.s || "3"}, ${defaultSize})}; + grid-column-gap: ${() => columnGapPerRow?.s}; + grid-row-gap: ${() => rowGapPerRow?.s}; + } + ${breakpoint.m} { + grid-template-columns: repeat(${() => + itemsPerRow?.m || "3"}, ${defaultSize})}; + grid-column-gap: ${() => columnGapPerRow?.m}; + grid-row-gap: ${() => rowGapPerRow?.m}; + } + ${breakpoint.l} { + grid-template-columns: repeat(${() => + itemsPerRow?.l || "3"}, ${defaultSize})}; + grid-column-gap: ${() => columnGapPerRow?.l}; + grid-row-gap: ${() => rowGapPerRow?.l}; + } + ${breakpoint.xl} { + grid-template-columns: repeat(${() => + itemsPerRow?.xl || "3"}, ${defaultSize})}; + grid-column-gap: ${() => columnGapPerRow?.xl}; + grid-row-gap: ${() => rowGapPerRow?.xl}; + } + `} `; export default GridContainer; diff --git a/packages/react-kit/src/components/wallet/ConnectButton.tsx b/packages/react-kit/src/components/wallet/ConnectButton.tsx index f5d488922..a3527ba6b 100644 --- a/packages/react-kit/src/components/wallet/ConnectButton.tsx +++ b/packages/react-kit/src/components/wallet/ConnectButton.tsx @@ -104,7 +104,12 @@ export default function ConnectButton({ return ( <> - +