@bosonprotocol/react-kit 0.32.0-alpha.3 → 0.32.0-alpha.4

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

@@ -25,65 +25,8 @@ import { Tooltip } from "../../tooltip/Tooltip";
 import { Grid } from "../../ui/Grid";
 import { useAccountDrawer } from "../accountDrawer";
 import StatusIcon from "../identicon/StatusIcon";
-import { flexRowNoWrap } from "../styles";
-
-const Web3StatusGeneric = styled.button`
-  ${flexRowNoWrap};
-  width: 100%;
-  align-items: center;
-  padding: 0.5rem;
-  cursor: pointer;
-  user-select: none;
-
-  margin-right: 2px;
-  margin-left: 2px;
-  &:focus {
-    outline: none;
-  }
-`;
 
 const breakpointWhenConnectButtonOverflows = "1300px";
-const Web3StatusConnected = styled(Web3StatusGeneric)<{
-  $color: string;
-  $backgroundColor: string;
-}>`
-  border: 2px solid transparent;
-  width: auto;
-  font-weight: 500;
-  color: ${({ $color }) => $color};
-  &:hover,
-  &:focus {
-    border: 2px solid
-      color-mix(
-        in srgb,
-        ${({ $backgroundColor }) => $backgroundColor} 90%,
-        black
-      );
-  }
-  @media (min-width: ${breakpointNumbers.xs}px) and (max-width: ${breakpointNumbers.l -
-    1}px) {
-    background-color: ${({ $backgroundColor }) => $backgroundColor};
-    border: 2px solid ${({ $backgroundColor }) => $backgroundColor};
-  }
-  @media (min-width: ${breakpointWhenConnectButtonOverflows}) {
-    background-color: ${({ $backgroundColor }) => $backgroundColor};
-    border: 2px solid ${({ $backgroundColor }) => $backgroundColor};
-  }
-  ${breakpoint.xxs} {
-    border-radius: 8px;
-    margin: initial;
-    * {
-      margin: initial;
-    }
-  }
-  @media (min-width: ${breakpointNumbers.l}px) and (max-width: ${breakpointWhenConnectButtonOverflows}) {
-    border-radius: 8px;
-    margin: initial;
-    * {
-      margin: initial;
-    }
-  }
-`;
 
 const AddressAndChevronContainer = styled.div`
   display: flex;
@@ -174,12 +117,11 @@ function Web3StatusInner({
 
   if (!connectedToWrongChainId && account) {
     return (
-      <Web3StatusConnected
+      <BaseButton
         disabled={Boolean(switchingChain)}
         data-testid="web3-status-connected"
         onClick={handleWalletDropdownClick}
-        $color={successButtonTheme.color}
-        $backgroundColor={successButtonTheme.background}
+        theme={successButtonTheme}
       >
         <StatusIcon
           account={account}
@@ -191,7 +133,7 @@ function Web3StatusInner({
         <AddressAndChevronContainer>
           <Text>{ENSName || formatAddress(account)}</Text>
         </AddressAndChevronContainer>
-      </Web3StatusConnected>
+      </BaseButton>
     );
   }
 

package/src/components/widgets/commit/CommitWidgetProviders.tsx

@@ -3,13 +3,14 @@ import { useProvider } from "../../../hooks/connection/connection";
 import { useIsWindowVisible } from "../../../hooks/uniswap/useIsWindowVisible";
 import { CONFIG } from "../../../lib/config/config";
 import { Updaters } from "../../../state/updaters";
+import { BosonProvider, BosonProviderProps } from "../../boson/BosonProvider";
 import ChatProvider from "../../chat/ChatProvider/ChatProvider";
 import {
   ConfigProvider,
   ConfigProviderProps
 } from "../../config/ConfigProvider";
 import { IpfsProvider, IpfsProviderProps } from "../../ipfs/IpfsProvider";
-import ModalProvider from "../../modal/ModalProvider";
+import { ModalProvider } from "../../modal/ModalProvider";
 import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 import { WalletConnectionProviderProps } from "../../wallet/WalletConnectionProvider";
 import {
@@ -20,7 +21,6 @@ import {
 import ConvertionRateProvider, {
   ConvertionRateProviderProps
 } from "../finance/convertion-rate/ConvertionRateProvider";
-import { BosonProvider, BosonProviderProps } from "../../boson/BosonProvider";
 
 export type CommitWidgetProvidersProps = IpfsProviderProps &
   Omit<ConfigProviderProps, "magicLinkKey" | "infuraKey"> &

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

@@ -5,7 +5,7 @@ import {
   ConfigProvider,
   ConfigProviderProps
 } from "../../config/ConfigProvider";
-import ModalProvider from "../../modal/ModalProvider";
+import { ModalProvider } from "../../modal/ModalProvider";
 import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 import { SignerProvider } from "../../signer/SignerProvider";
 import GlobalStyle from "../../styles/GlobalStyle";

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

@@ -6,7 +6,7 @@ import {
   ConfigProviderProps
 } from "../../config/ConfigProvider";
 import { IpfsProvider, IpfsProviderProps } from "../../ipfs/IpfsProvider";
-import ModalProvider from "../../modal/ModalProvider";
+import { ModalProvider } from "../../modal/ModalProvider";
 import { withQueryClientProvider } from "../../queryClient/withQueryClientProvider";
 import { SignerProvider } from "../../signer/SignerProvider";
 import GlobalStyle from "../../styles/GlobalStyle";

package/src/stories/ConnectWallet.stories.tsx

@@ -39,34 +39,44 @@ const ColorGlobalStyle = createGlobalStyle<{ color: CSSProperties["color"] }>`
 const Component = ({
   textColor,
   chainSelectorBackgroundColor,
+  connectWalletBorderRadius,
   connectWalletSuccessButtonThemeKey,
   connectWalletErrorButtonThemeKey,
+  accountDrawerBuyCryptoBorderRadiusPx,
   accountDrawerBackgroundColor,
-  accountDrawerBuyCryptoColor,
-  accountDrawerBuyCryptoBackgroundColor,
+  accountDrawerBuyCryptoThemeKey,
   accountDrawerDisconnectBackgroundColor,
+  accountDrawerDisconnectBorderRadius,
   accountDrawerDisconnectColor,
+  walletBorderRadius,
+  walletIconBorderRadius,
   walletBackgroundColor,
   walletColor,
   walletHoverFocusBackgroundColor,
   walletHoverColor,
   magicLoginButtonThemeKey,
+  magicLoginButtonBorderRadiusPx,
   onUserDisconnect
 }: {
   textColor: string;
   chainSelectorBackgroundColor: string | undefined;
+  connectWalletBorderRadius: string | undefined;
   connectWalletSuccessButtonThemeKey: string | undefined;
   connectWalletErrorButtonThemeKey: string | undefined;
   accountDrawerBackgroundColor: string | undefined;
-  accountDrawerBuyCryptoColor: string | undefined;
-  accountDrawerBuyCryptoBackgroundColor: string | undefined;
+  accountDrawerBuyCryptoBorderRadiusPx: string | undefined;
+  accountDrawerBuyCryptoThemeKey: string | undefined;
+  accountDrawerDisconnectBorderRadius: string | undefined;
   accountDrawerDisconnectBackgroundColor: string | undefined;
   accountDrawerDisconnectColor: string | undefined;
+  walletBorderRadius: string | undefined;
+  walletIconBorderRadius: string | undefined;
   walletBackgroundColor: string | undefined;
   walletColor: string | undefined;
   walletHoverFocusBackgroundColor: string | undefined;
   walletHoverColor: string | undefined;
   magicLoginButtonThemeKey: string | undefined;
+  magicLoginButtonBorderRadiusPx: string | undefined;
   onUserDisconnect: () => unknown;
 }) => {
   return (
@@ -106,29 +116,38 @@ const Component = ({
                     backgroundColor={chainSelectorBackgroundColor}
                   />
                   <ConnectWallet
-                    successButtonTheme={
-                      connectWalletSuccessButtonThemeKey
+                    successButtonTheme={{
+                      ...(connectWalletSuccessButtonThemeKey
                         ? bosonButtonThemes({ withBosonStyle: false })[
                             connectWalletSuccessButtonThemeKey
                           ]
-                        : successButtonTheme
-                    }
-                    errorButtonTheme={
-                      connectWalletErrorButtonThemeKey
+                        : successButtonTheme),
+                      borderRadius: connectWalletBorderRadius,
+                      gap: "2px"
+                    }}
+                    errorButtonTheme={{
+                      ...(connectWalletErrorButtonThemeKey
                         ? bosonButtonThemes({ withBosonStyle: false })[
                             connectWalletErrorButtonThemeKey
                           ]
-                        : errorButtonTheme
-                    }
+                        : errorButtonTheme),
+                      borderRadius: connectWalletBorderRadius,
+                      gap: "2px"
+                    }}
                   />
                 </Grid>
                 <Portal>
                   <AccountDrawer
                     backgroundColor={accountDrawerBackgroundColor}
-                    buyCryptoColor={accountDrawerBuyCryptoColor}
-                    buyCryptoBackgroundColor={
-                      accountDrawerBuyCryptoBackgroundColor
-                    }
+                    buyCryptoTheme={{
+                      ...(accountDrawerBuyCryptoThemeKey
+                        ? bosonButtonThemes({ withBosonStyle: false })[
+                            accountDrawerBuyCryptoThemeKey
+                          ]
+                        : successButtonTheme),
+                      borderRadius: accountDrawerBuyCryptoBorderRadiusPx
+                    }}
+                    disconnectBorderRadius={accountDrawerDisconnectBorderRadius}
                     disconnectBackgroundColor={
                       accountDrawerDisconnectBackgroundColor
                     }
@@ -138,17 +157,22 @@ const Component = ({
                       optionProps: {
                         backgroundColor: walletBackgroundColor,
                         color: walletColor,
+                        borderRadius: walletBorderRadius,
+                        iconBorderRadius: walletIconBorderRadius,
                         hoverFocusBackgroundColor:
                           walletHoverFocusBackgroundColor,
                         hoverColor: walletHoverColor
                       },
                       magicLoginButtonProps: {
                         buttonProps: {
-                          theme: magicLoginButtonThemeKey
-                            ? bosonButtonThemes({ withBosonStyle: false })[
-                                magicLoginButtonThemeKey
-                              ]
-                            : successButtonTheme
+                          theme: {
+                            ...(magicLoginButtonThemeKey
+                              ? bosonButtonThemes({ withBosonStyle: false })[
+                                  magicLoginButtonThemeKey
+                                ]
+                              : successButtonTheme),
+                            borderRadius: magicLoginButtonBorderRadiusPx
+                          }
                         }
                       },
                       PrivacyPolicy: () => <div>privacy policy</div>
@@ -187,8 +211,10 @@ export default {
       options: bosonButtonThemeKeys
     },
     accountDrawerBackgroundColor: { control: "color" },
-    accountDrawerBuyCryptoColor: { control: "color" },
-    accountDrawerBuyCryptoBackgroundColor: { control: "color" },
+    accountDrawerBuyCryptoThemeKey: {
+      control: "select",
+      options: bosonButtonThemeKeys
+    },
     accountDrawerDisconnectBackgroundColor: { control: "color" },
     accountDrawerDisconnectColor: { control: "color" },
     walletBackgroundColor: { control: "color" },
@@ -217,13 +243,17 @@ export const BosonTheme = {
     ...BASE_ARGS,
     textColor: colors.black,
     chainSelectorBackgroundColor: "var(--buttonBgColor)",
+    connectWalletBorderRadius: undefined,
     connectWalletSuccessButtonThemeKey: undefined,
     connectWalletErrorButtonThemeKey: "orangeInverse",
+    accountDrawerBuyCryptoBorderRadiusPx: "0",
     accountDrawerBackgroundColor: "var(--primaryBgColor)",
-    accountDrawerBuyCryptoColor: colors.black,
-    accountDrawerBuyCryptoBackgroundColor: "var(--buttonBgColor)",
+    accountDrawerBuyCryptoThemeKey: undefined,
     accountDrawerDisconnectBackgroundColor: colors.green,
     accountDrawerDisconnectColor: colors.black,
+    accountDrawerDisconnectBorderRadius: "0px",
+    walletBorderRadius: "0px",
+    walletIconBorderRadius: "0px",
     walletBackgroundColor: "var(--secondaryBgColor)",
     walletColor: colors.white,
     walletHoverFocusBackgroundColor: colors.black,
@@ -237,17 +267,22 @@ export const CustomTheme = {
     ...BASE_ARGS,
     textColor: colors.white,
     chainSelectorBackgroundColor: "#00e1ff",
+    connectWalletBorderRadius: "50",
     connectWalletSuccessButtonThemeKey: "accentFill",
     connectWalletErrorButtonThemeKey: "orangeInverse",
+    accountDrawerBuyCryptoBorderRadiusPx: "50",
     accountDrawerBackgroundColor: "#123123",
-    accountDrawerBuyCryptoColor: "#ff7b00",
-    accountDrawerBuyCryptoBackgroundColor: "#bf00ff",
+    accountDrawerBuyCryptoThemeKey: "accentFill",
+    accountDrawerDisconnectBorderRadius: "50px",
     accountDrawerDisconnectBackgroundColor: "#9b05ff",
     accountDrawerDisconnectColor: "#0dff00",
+    walletBorderRadius: "10px",
+    walletIconBorderRadius: "50px",
     walletBackgroundColor: "#ffd693",
     walletColor: "#ff00ea",
     walletHoverFocusBackgroundColor: "#e89f0e",
     walletHoverColor: "#ff0000",
-    magicLoginButtonThemeKey: "#0f9a5b"
+    magicLoginButtonThemeKey: "orangeInverse",
+    magicLoginButtonBorderRadiusPx: "50"
   }
 };