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

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EACL,OAAO,IAAI,YAAY,EAEvB,iBAAiB,EAClB,MAAM,8BAA8B,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+CAA+C,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,8CAA8C,CAAC;AAC7D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wDAAwD,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,cAAc,4BAA4B,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,sCAAsC,CAAC;AACrD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wFAAwF,CAAC;AACvG,cAAc,mEAAmE,CAAC;AAClF,cAAc,iEAAiE,CAAC;AAChF,cAAc,qEAAqE,CAAC;AACpF,cAAc,0EAA0E,CAAC;AACzF,cAAc,4EAA4E,CAAC;AAC3F,cAAc,sBAAsB,CAAC;AACrC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,0CAA0C,CAAC;AACzD,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,OAAO,EACL,OAAO,IAAI,YAAY,EAEvB,iBAAiB,EAClB,MAAM,8BAA8B,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,wCAAwC,CAAC;AACvD,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0CAA0C,CAAC;AACzD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,4CAA4C,CAAC;AAC3D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+CAA+C,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,8CAA8C,CAAC;AAC7D,cAAc,gDAAgD,CAAC;AAC/D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,8CAA8C,CAAC;AAC7D,cAAc,wDAAwD,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,cAAc,4BAA4B,CAAC;AAC3C,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,sCAAsC,CAAC;AACrD,cAAc,oCAAoC,CAAC;AACnD,cAAc,wFAAwF,CAAC;AACvG,cAAc,mEAAmE,CAAC;AAClF,cAAc,iEAAiE,CAAC;AAChF,cAAc,qEAAqE,CAAC;AACpF,cAAc,0EAA0E,CAAC;AACzF,cAAc,4EAA4E,CAAC;AAC3F,cAAc,sBAAsB,CAAC;AACrC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,0CAA0C,CAAC;AACzD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iCAAiC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bosonprotocol/react-kit",
   "description": "React toolkit with smart components and hooks for building on top of the Boson Protocol.",
-  "version": "0.32.0-alpha.2",
+  "version": "0.32.0-alpha.4",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -15,8 +15,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/core-sdk": "^1.40.4-alpha.0",
-    "@bosonprotocol/ethers-sdk": "^1.14.4-alpha.0",
+    "@bosonprotocol/core-sdk": "^1.40.4-alpha.2",
+    "@bosonprotocol/ethers-sdk": "^1.14.4-alpha.2",
     "@bosonprotocol/ipfs-storage": "^1.11.3",
     "@davatar/react": "1.11.1",
     "@ethersproject/units": "5.6.0",
@@ -185,5 +185,5 @@
   "overrides": {
     "typescript": "^5.1.6"
   },
-  "gitHead": "08423f0daa486c2445a61ebd7c922795929651d0"
+  "gitHead": "0d0f567f5b192ff030acb4ab68e26afa1583462f"
 }

package/src/components/buttons/BaseButton.tsx

@@ -98,7 +98,7 @@ const ChildWrapperButton = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 12px;
+  gap: ${(props) => props.theme?.gap || "12px"};
   position: relative;
   z-index: ${zIndex.Button};
 
@@ -112,6 +112,7 @@ export type BaseButtonTheme = {
   borderWidth?: CSSProperties["borderWidth"];
   color?: CSSProperties["color"];
   padding?: CSSProperties["padding"];
+  gap?: CSSProperties["gap"];
   hover?: {
     background?: CSSProperties["backgroundColor"];
     borderColor?: CSSProperties["borderColor"];
@@ -179,7 +180,7 @@ export const BaseButton = forwardRef<HTMLButtonElement, BaseButtonProps>(
             {isLoading ? (
               <Loading />
             ) : (
-              <ChildWrapperButton data-child-wrapper-button>
+              <ChildWrapperButton data-child-wrapper-button theme={theme}>
                 {children}
                 {step !== 0 && (
                   <Typography>

package/src/components/modal/Modal.tsx

@@ -134,16 +134,8 @@ const Wrapper = styled.div<{
   }};
   ${({ $modalType }) => {
     switch ($modalType) {
-      case "PRODUCT_CREATE_SUCCESS":
-        return css`
-          max-width: 65.875rem;
-        `;
       case "FINANCE_WITHDRAW_MODAL":
       case "FINANCE_DEPOSIT_MODAL":
-      case "MANAGE_FUNDS_MODAL":
-      case "EXPIRE_VOUCHER_MODAL":
-      case "DISPUTE_RESOLUTION_DECIDE_MODAL":
-      case "DISPUTE_RESOLUTION_REFUSE_MODAL":
         return css`
           ${breakpoint.xs} {
             max-width: 31.25rem;

package/src/components/modal/ModalProvider.tsx

@@ -56,8 +56,7 @@ const RenderModalComponent = ({
 interface Props {
   children: React.ReactNode;
 }
-export default function ModalProvider({ children }: Props) {
-  // const { pathname } = useLocation();
+export function ModalProvider({ children }: Props) {
   const [store, setStore] = useState(initalState.store);
 
   const showModal = useCallback(
@@ -100,6 +99,7 @@ export default function ModalProvider({ children }: Props) {
   }, []);
 
   // TODO: check if this is necessary
+  // const { pathname } = useLocation();
   // useEffect(() => {
   //   if (store.modalType !== null) {
   //     hideModal();

package/src/components/scroll/ScrollToID.tsx

@@ -0,0 +1,7 @@
+export const ScrollToID = ({ id }: { id: string }) => {
+  const localElement = document.getElementById(id);
+  if (localElement) {
+    localElement.scrollIntoView({ block: "center" });
+  }
+  return null;
+};

package/src/components/scroll/ScrollToTop.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scroll({ top: 0, left: 0 });
+  }, [pathname]);
+
+  return null;
+}

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

@@ -30,6 +30,7 @@ import {
   useConnections
 } from "../../connection/ConnectionsProvider";
 import { useWeb3React } from "@web3-react/core";
+import { BaseButton, BaseButtonTheme } from "../../buttons/BaseButton";
 const colors = theme.colors.light;
 const AuthenticatedHeaderWrapper = styled.div`
   padding: 20px 16px;
@@ -38,45 +39,6 @@ const AuthenticatedHeaderWrapper = styled.div`
   flex: 1;
 `;
 
-const HeaderButton = styled.button<{
-  $color: CSSProperties["color"];
-  $backgroundColor: CSSProperties["backgroundColor"];
-}>`
-  color: ${({ $color }) => $color};
-  background-color: ${({ $backgroundColor }) => $backgroundColor};
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-  border-color: transparent;
-  border-radius: 12px;
-  border-style: solid;
-  border-width: 1px;
-  height: 40px;
-  margin-top: 8px;
-
-  position: relative;
-  z-index: 1;
-  letter-spacing: 0.5px;
-  font-style: normal;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 24px;
-
-  &:hover:not(:disabled) {
-    background-color: color-mix(
-      in srgb,
-      ${({ $backgroundColor }) => $backgroundColor} 90%,
-      black
-    );
-    transition: 125ms background-color ease-in;
-  }
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-`;
 const IconHoverText = styled.span`
   color: ${colors.white};
   position: absolute;
@@ -174,16 +136,16 @@ export type AuthenticatedHeaderProps = {
   onUserDisconnect?: () => unknown;
   disconnectColor: CSSProperties["color"];
   disconnectBackgroundColor: CSSProperties["backgroundColor"];
-  buyCryptoColor: CSSProperties["color"];
-  buyCryptoBackgroundColor: CSSProperties["backgroundColor"];
+  disconnectBorderRadius: CSSProperties["borderRadius"];
+  buyCryptoTheme: BaseButtonTheme;
 };
 export function AuthenticatedHeader({
   account,
   onUserDisconnect,
   disconnectColor,
   disconnectBackgroundColor,
-  buyCryptoColor,
-  buyCryptoBackgroundColor
+  disconnectBorderRadius,
+  buyCryptoTheme
 }: AuthenticatedHeaderProps) {
   const { connector } = useWeb3React();
   const { ENSName } = useENSName(account);
@@ -282,14 +244,15 @@ export function AuthenticatedHeader({
             dismissOnHoverOut
             color={disconnectColor}
             backgroundColor={disconnectBackgroundColor}
+            borderRadius={disconnectBorderRadius}
           />
         </IconContainer>
       </HeaderWrapper>
       <PortfolioDrawerContainer>
         <FiatLink>
-          <HeaderButton
-            $color={buyCryptoColor}
-            $backgroundColor={buyCryptoBackgroundColor}
+          <BaseButton
+            fill
+            theme={buyCryptoTheme}
             // onClick={handleBuyCryptoClick}
             // disabled={disableBuyCryptoButton}
             disabled={isFiatLoading}
@@ -307,7 +270,7 @@ export function AuthenticatedHeader({
                 Buy crypto
               </>
             )}
-          </HeaderButton>
+          </BaseButton>
         </FiatLink>
         {Boolean(!fiatOnrampAvailable && fiatOnrampAvailabilityChecked) && (
           <FiatOnrampNotAvailableText marginTop="8px">

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

@@ -27,12 +27,13 @@ const IconStyles = css<{
   $hideHorizontal?: boolean;
   $color: CSSProperties["color"];
   $backgroundColor: CSSProperties["backgroundColor"];
+  $borderRadius: CSSProperties["borderRadius"];
 }>`
   color: ${({ $color }) => $color};
   /* TODO: background-color: var(--buttonBgColor); */
   background-color: ${({ $backgroundColor }) => $backgroundColor};
   transition: ${getWidthTransition};
-  border-radius: 12px;
+  border-radius: ${({ $borderRadius }) => $borderRadius || "12px"};
   display: flex;
   padding: 0;
   cursor: pointer;
@@ -66,6 +67,7 @@ const IconBlockLink = styled.a<{
   $hideHorizontal?: boolean;
   $color: CSSProperties["color"];
   $backgroundColor: CSSProperties["backgroundColor"];
+  $borderRadius: CSSProperties["borderRadius"];
 }>`
   ${IconStyles};
 `;
@@ -74,6 +76,7 @@ const IconBlockButton = styled.button<{
   $hideHorizontal?: boolean;
   $color: CSSProperties["color"];
   $backgroundColor: CSSProperties["backgroundColor"];
+  $borderRadius: CSSProperties["borderRadius"];
 }>`
   ${IconStyles};
   border: none;
@@ -106,15 +109,17 @@ const IconBlock = forwardRef<
   IconBlockProps & {
     color: CSSProperties["color"];
     backgroundColor: CSSProperties["backgroundColor"];
+    borderRadius: CSSProperties["borderRadius"];
   }
 >(function IconBlock(props, ref) {
-  const { color, backgroundColor } = props;
+  const { color, backgroundColor, borderRadius } = props;
   if ("href" in props) {
     return (
       <IconBlockLink
         ref={ref as React.ForwardedRef<HTMLAnchorElement>}
         $color={color}
         $backgroundColor={backgroundColor}
+        $borderRadius={borderRadius}
         {...props}
       />
     );
@@ -128,6 +133,7 @@ const IconBlock = forwardRef<
       ref={ref}
       $color={color}
       $backgroundColor={backgroundColor}
+      $borderRadius={borderRadius}
       {...props}
     />
   );
@@ -141,6 +147,7 @@ type IconWithTextProps = (IconButtonProps | IconLinkProps) & {
   dismissOnHoverDurationMs?: number;
   color: CSSProperties["color"];
   backgroundColor: CSSProperties["backgroundColor"];
+  borderRadius: CSSProperties["borderRadius"];
 };
 
 const TextWrapper = styled.div`
@@ -172,6 +179,7 @@ export const IconWithConfirmTextButton = ({
   dismissOnHoverDurationMs = 500,
   color,
   backgroundColor,
+  borderRadius,
   ...rest
 }: IconWithTextProps) => {
   const [showText, setShowTextWithoutCallback] = useState(false);
@@ -254,6 +262,7 @@ export const IconWithConfirmTextButton = ({
       }}
       color={color}
       backgroundColor={backgroundColor}
+      borderRadius={borderRadius}
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore MouseEvent is valid, its a subset of the two mouse events,
       // even manually typing this all out more specifically it still gets mad about any casting for some reason

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

@@ -49,14 +49,16 @@ const HeaderText = styled.div<{ $color: CSSProperties["color"] }>`
   font-weight: 600;
   padding: 0 8px;
 `;
-const IconWrapper = styled.div`
+const IconWrapper = styled.div<{
+  $borderRadius: CSSProperties["borderRadius"];
+}>`
   ${flexColumnNoWrap};
   align-items: center;
   justify-content: center;
   img,
   svg {
     border: 1px solid ${colors.border};
-    border-radius: 12px;
+    border-radius: ${({ $borderRadius }) => $borderRadius};
   }
   & > img,
   & > svg,
@@ -107,13 +109,15 @@ export interface OptionProps {
   hoverFocusBackgroundColor: CSSProperties["backgroundColor"];
   hoverColor: CSSProperties["color"];
   backgroundColor: CSSProperties["backgroundColor"];
+  borderRadius: CSSProperties["borderRadius"];
 }
 export function Option({
   connection,
   color,
   hoverFocusBackgroundColor,
   hoverColor,
-  backgroundColor
+  backgroundColor,
+  borderRadius
 }: OptionProps) {
   const { activationState, tryActivation } = useActivationState();
   const toggleAccountDrawer = useToggleAccountDrawer();
@@ -140,7 +144,7 @@ export function Option({
         data-testid={`wallet-option-${connection.type}`}
       >
         <OptionCardLeft>
-          <IconWrapper>
+          <IconWrapper $borderRadius={borderRadius}>
             <SvgImage
               src={connection.getIcon?.(false)}
               alt={connection.getName()}

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { useWeb3React } from "@web3-react/core";
 import { useEffect } from "react";
-import styled from "styled-components";
+import styled, { CSSProperties } from "styled-components";
 
 import { Grid } from "../../ui/Grid";
 import { flexColumnNoWrap } from "../styles";
@@ -26,11 +26,11 @@ const Wrapper = styled.div`
   flex: 1;
 `;
 
-const OptionGrid = styled.div`
+const OptionGrid = styled.div<{ $borderRadius: CSSProperties["borderRadius"] }>`
   width: 100%;
   display: grid;
   grid-gap: 2px;
-  border-radius: 12px;
+  border-radius: ${({ $borderRadius }) => $borderRadius};
   overflow: hidden;
   ${breakpoint.m} {
     grid-template-columns: 1fr;
@@ -42,8 +42,12 @@ export type WalletModalProps = {
   magicLoginButtonProps: MagicLoginButtonProps;
   optionProps: Pick<
     OptionProps,
-    "color" | "hoverFocusBackgroundColor" | "hoverColor" | "backgroundColor"
-  >;
+    | "color"
+    | "hoverFocusBackgroundColor"
+    | "hoverColor"
+    | "backgroundColor"
+    | "borderRadius"
+  > & { iconBorderRadius: CSSProperties["borderRadius"] };
 };
 export function WalletModal({
   PrivacyPolicy,
@@ -81,12 +85,16 @@ export function WalletModal({
         <ConnectionErrorView />
       ) : (
         <AutoColumn $gap="16px">
-          <OptionGrid data-testid="option-grid">
+          <OptionGrid
+            data-testid="option-grid"
+            $borderRadius={optionProps.borderRadius}
+          >
             {connections
               .filter((connection) => connection.shouldDisplay())
               .map((connection) => (
                 <Option
                   {...optionProps}
+                  borderRadius={optionProps.iconBorderRadius}
                   key={connection.getName()}
                   connection={connection}
                 />

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/hooks/index.ts

@@ -17,3 +17,4 @@ export * from "./contracts/erc721/useErc721OwnerOf";
 export * from "./contracts/erc1155/useErc1155Name";
 export * from "./contracts/erc1155/useErc1155Uris";
 export * from "./uniswap/useIsWindowVisible";
+export * from "./connection/connection";

package/src/index.tsx

@@ -9,6 +9,9 @@ export {
 } from "./components/ui/ThemedButton";
 export * from "./components/ui/zIndex";
 export * from "./components/ui/buttonSize";
+export * from "./components/scroll/ScrollToID";
+export * from "./components/scroll/ScrollToTop";
+export { useConfigContext } from "./components/config/ConfigContext";
 export * from "./components/buttons/Button";
 export * from "./components/buttons/BaseButton";
 export * from "./components/buttons/CommitButtonView";
@@ -78,3 +81,4 @@ export * from "./components/wallet2/web3Status/index";
 export * from "./components/wallet2/web3Provider/index";
 export * from "./components/wallet2/accountDrawer/index";
 export * from "./components/portal/Portal";
+export * from "./components/error/ErrorMessage";