@bosonprotocol/react-kit 0.34.0-alpha.4 → 0.34.0-alpha.40

package/src/components/ui/styles.ts

@@ -5,6 +5,14 @@ export const transition = css`
   transition: all 150ms ease-in-out;
 `;
 
+export const buttonText = css`
+  letter-spacing: 0.5px;
+  font-style: normal;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 24px;
+`;
+
 export const button = css`
   box-sizing: border-box;
   cursor: pointer;
@@ -18,7 +26,7 @@ export const button = css`
   position: relative;
   overflow: hidden;
   box-shadow: 0px 0px 0px #000000;
-
+  ${buttonText}
   ${transition}
   svg {
     ${transition}
@@ -47,51 +55,34 @@ export const text = css`
   line-height: 24px;
 `;
 
-export const buttonText = css`
-  letter-spacing: 0.5px;
-  font-style: normal;
-  font-size: 1rem;
-  font-weight: 500;
-  line-height: 24px;
-`;
-
 export const small = css`
   min-height: 2.125rem;
   padding: 0.5rem 1rem;
-  > * {
-    font-size: 0.75rem !important;
-  }
-  #buttonText {
+  * {
     font-size: 0.75rem;
   }
 `;
 export const regular = css`
   min-height: 2.813rem;
   padding: 0.75rem 1.5rem;
-  > * {
-    font-size: 1rem !important;
+  * {
+    font-size: 1rem;
   }
   ${breakpoint.xxs} {
-    > * {
-      font-size: 0.875rem !important;
+    * {
+      font-size: 0.875rem;
     }
   }
-  #buttonText {
-    font-size: 0.875rem;
-  }
 `;
 export const large = css`
   min-height: 3.5rem;
   padding: 1rem 2rem;
-  > * {
-    font-size: 1.125rem !important;
+  * {
+    font-size: 1.125rem;
   }
   ${breakpoint.xxs} {
-    > * {
-      font-size: 1rem !important;
+    * {
+      font-size: 1rem;
     }
   }
-  #buttonText {
-    font-size: 1rem;
-  }
 `;

package/src/components/wallet/ConnectButton.tsx

@@ -10,7 +10,7 @@ import ThemedButton, { bosonButtonThemes } from "../ui/ThemedButton";
 import { useBreakpoints } from "../../hooks/useBreakpoints";
 import { saveItemInStorage } from "../../hooks/storage/useBosonLocalStorage";
 import { SignOut, Wallet } from "phosphor-react";
-import { useIsMagicLoggedIn } from "../../hooks";
+import { useConfigContext, useIsMagicLoggedIn } from "../../hooks";
 import { useAccount, useChainId } from "../../hooks/connection/connection";
 import { useDisconnect } from "../../hooks/connection/useDisconnect";
 import { MagicLoginButton } from "../magicLink/Login";
@@ -79,6 +79,7 @@ export default function ConnectButton({
   showChangeWallet,
   ...rest
 }: Props) {
+  const { withMagicLink } = useConfigContext();
   const { isLteXS, isLteS } = useBreakpoints();
   const isSideBar = ["left", "right"].includes(navigationBarPosition);
   const buttonPadding = isSideBar ? "0.75rem 1rem" : "";
@@ -120,14 +121,16 @@ export default function ConnectButton({
 
                       return (
                         <>
-                          <MagicLoginButton
-                            buttonProps={{
-                              size: isLteXS ? "small" : "regular",
-                              theme: bosonButtonThemes({
-                                withBosonStyle: false
-                              })["primary"]
-                            }}
-                          />
+                          {withMagicLink && (
+                            <MagicLoginButton
+                              buttonProps={{
+                                size: isLteXS ? "small" : "regular",
+                                theme: bosonButtonThemes({
+                                  withBosonStyle: false
+                                })["primary"]
+                              }}
+                            />
+                          )}
                           <Button
                             onClick={() => {
                               saveItemInStorage(

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

@@ -9,13 +9,12 @@ import {
 } from "phosphor-react";
 import React, { useCallback, useState } from "react";
 import styled, { CSSProperties } from "styled-components";
-
 import { Typography } from "../../ui/Typography";
 import StatusIcon from "../identicon/StatusIcon";
 import { FiatLink, useFiatLinkContext } from "./fiatOnrampModal/FiatLink";
 // import FiatOnrampModal from "./fiatOnrampModal";
 import { IconWithConfirmTextButton } from "./IconButton";
-import MiniPortfolio from "./miniPortfolio";
+import MiniPortfolio, { MiniPortfolioProps } from "./miniPortfolio";
 import { Column } from "../../ui/column";
 import { theme } from "../../../theme";
 import { useENSName } from "../../../hooks/ens/useENSName";
@@ -131,8 +130,7 @@ export function PortfolioArrow({
     <ArrowUpRight size={20} {...rest} />
   );
 }
-export type AuthenticatedHeaderProps = {
-  account: string;
+export type AuthenticatedHeaderProps = MiniPortfolioProps & {
   onUserDisconnect?: () => unknown;
   disconnectColor: CSSProperties["color"];
   disconnectBackgroundColor: CSSProperties["backgroundColor"];
@@ -145,7 +143,8 @@ export function AuthenticatedHeader({
   disconnectColor,
   disconnectBackgroundColor,
   disconnectBorderRadius,
-  buyCryptoTheme
+  buyCryptoTheme,
+  defaultTokens
 }: AuthenticatedHeaderProps) {
   const { connector } = useWeb3React();
   const { ENSName } = useENSName(account);
@@ -292,7 +291,7 @@ export function AuthenticatedHeader({
             </Tooltip>
           </FiatOnrampNotAvailableText>
         )}
-        <MiniPortfolio account={account} />
+        <MiniPortfolio account={account} defaultTokens={defaultTokens} />
       </PortfolioDrawerContainer>
     </AuthenticatedHeaderWrapper>
   );

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

@@ -112,19 +112,19 @@ const IconBlock = forwardRef<
     borderRadius: CSSProperties["borderRadius"];
   }
 >(function IconBlock(props, ref) {
-  const { color, backgroundColor, borderRadius } = props;
   if ("href" in props) {
+    const { color, backgroundColor, borderRadius, ...restProps } = props;
     return (
       <IconBlockLink
         ref={ref as React.ForwardedRef<HTMLAnchorElement>}
         $color={color}
         $backgroundColor={backgroundColor}
         $borderRadius={borderRadius}
-        {...props}
+        {...restProps}
       />
     );
   }
-
+  const { color, backgroundColor, borderRadius, ...restProps } = props;
   return (
     <IconBlockButton
       // ignoring 'button' 'type' conflict between React and styled-components
@@ -134,7 +134,7 @@ const IconBlock = forwardRef<
       $color={color}
       $backgroundColor={backgroundColor}
       $borderRadius={borderRadius}
-      {...props}
+      {...restProps}
     />
   );
 });

package/src/components/wallet2/accountDrawer/miniPortfolio/index.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 import { Grid } from "../../../ui/Grid";
 import { Typography } from "../../../ui/Typography";
-import Tokens from "./tokens";
+import Tokens, { TokensProps } from "./tokens";
 import { breakpointNumbers } from "../../../../lib/ui/breakpoint";
 import { Column } from "../../../ui/column";
 
@@ -41,7 +41,7 @@ const PageWrapper = styled.div`
 interface Page {
   title: React.ReactNode;
   key: string;
-  component: ({ account }: { account: string }) => JSX.Element;
+  component: ({ account }: MiniPortfolioProps) => JSX.Element;
 }
 
 const Pages: Array<Page> = [
@@ -52,7 +52,11 @@ const Pages: Array<Page> = [
   }
 ];
 
-export default function MiniPortfolio({ account }: { account: string }) {
+export type MiniPortfolioProps = TokensProps;
+export default function MiniPortfolio({
+  account,
+  defaultTokens
+}: MiniPortfolioProps) {
   const [currentPage, setCurrentPage] = useState(0);
 
   const { component: Page } = Pages[currentPage];
@@ -72,7 +76,7 @@ export default function MiniPortfolio({ account }: { account: string }) {
         })}
       </Nav>
       <PageWrapper data-testid="mini-portfolio-page">
-        <Page account={account} />
+        <Page account={account} defaultTokens={defaultTokens} />
       </PageWrapper>
     </Wrapper>
   );

package/src/components/wallet2/accountDrawer/miniPortfolio/tokens/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Token as TokenType } from "@bosonprotocol/common";
 import { Token } from "@uniswap/sdk-core";
 import { ethers } from "ethers";
 import styled from "styled-components";
@@ -20,11 +21,16 @@ import {
 import { nativeOnChain } from "../../../../../lib/const/tokens";
 import { PortfolioLogo } from "../../../../logo/PortfolioLogo";
 
-export default function Tokens({ account }: { account: string }) {
+export type TokensProps = {
+  account: string;
+  defaultTokens?: TokenType[];
+};
+export default function Tokens({ account, defaultTokens }: TokensProps) {
   const chainId = useChainId();
   const { data: tokenBalances, isLoading } = useTokenBalances({
     address: account,
-    chainId
+    chainId,
+    tokens: defaultTokens
   });
 
   if (!chainId || isLoading) {

package/src/components/wallet2/selector/ChainSelector.tsx

@@ -28,10 +28,13 @@ import {
   UniWalletSupportedChains,
   getChainPriority
 } from "../../../lib/const/chains";
-import { useConfigContext } from "../../config/ConfigContext";
-import { getEnvConfigsFilteredByEnv } from "../../../lib/config/getConfigsByChainId";
+import { getEnvConfigsFilteredByEnv as importedGetEnvConfigsFilteredByEnv } from "../../../lib/config/getConfigsByChainId";
 import { useSelectChain } from "../../../hooks/connection/useSelectChain";
-import { ConfigId, ProtocolConfig } from "@bosonprotocol/core-sdk";
+import {
+  ConfigId,
+  EnvironmentType,
+  CoreProtocolConfig
+} from "@bosonprotocol/core-sdk";
 import { SvgImage } from "../../ui/SvgImage";
 
 const IconAndChevron = styled.div<{
@@ -57,11 +60,6 @@ const IconAndChevron = styled.div<{
   }
 `;
 
-export interface ChainSelectorProps {
-  leftAlign?: boolean;
-  backgroundColor: CSSProperties["backgroundColor"];
-}
-
 function useWalletSupportedChains({
   NETWORK_SELECTOR_CHAINS_IDS
 }: {
@@ -88,14 +86,25 @@ const chevronProps = {
   height: 20,
   width: 20
 };
+
+export interface ChainSelectorProps {
+  leftAlign?: boolean;
+  backgroundColor: CSSProperties["backgroundColor"];
+  config: CoreProtocolConfig;
+  getEnvConfigsFilteredByEnv?: (
+    envName: EnvironmentType
+  ) => CoreProtocolConfig[];
+}
+
 export const ChainSelector = ({
   leftAlign,
-  backgroundColor
+  backgroundColor,
+  config,
+  getEnvConfigsFilteredByEnv = importedGetEnvConfigsFilteredByEnv
 }: ChainSelectorProps) => {
-  const { config } = useConfigContext();
   const NETWORK_SELECTOR_CHAINS = useMemo(
     () => getEnvConfigsFilteredByEnv(config.envName),
-    [config.envName]
+    [config.envName, getEnvConfigsFilteredByEnv]
   );
   const NETWORK_SELECTOR_CHAINS_IDS = NETWORK_SELECTOR_CHAINS.map(
     (config) => config.chainId as ChainId
@@ -128,7 +137,10 @@ export const ChainSelector = ({
           }
           return acc;
         },
-        { supported: [], unsupported: [] } as Record<string, ProtocolConfig[]>
+        { supported: [], unsupported: [] } as Record<
+          string,
+          CoreProtocolConfig[]
+        >
       );
     return [supported, unsupported];
   }, [NETWORK_SELECTOR_CHAINS, walletSupportsChain]);
@@ -148,7 +160,7 @@ export const ChainSelector = ({
 
   const [pendingConfigId, setPendingConfigId] = useState<ConfigId>();
   const onSelectChain = useCallback(
-    async (config: ProtocolConfig) => {
+    async (config: CoreProtocolConfig) => {
       try {
         setPendingConfigId(config.configId);
         await selectChain(config.configId);

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

@@ -5,12 +5,13 @@ import styled from "styled-components";
 import { Typography } from "../../ui/Typography";
 import { useCloseAccountDrawer } from "../accountDrawer";
 import { flexColumnNoWrap } from "../styles";
-import { Button } from "../../buttons/Button";
 import {
   ActivationStatus,
   useActivationState
 } from "../../connection/activate";
 import { theme } from "../../../theme";
+import { Grid } from "../../ui/Grid";
+import { BaseButton, BaseButtonProps } from "../../buttons/BaseButton";
 const colors = theme.colors.light;
 const Wrapper = styled.div`
   ${flexColumnNoWrap};
@@ -27,8 +28,15 @@ const AlertTriangleIcon = styled(Warning)`
   color: ${colors.red};
 `;
 
+export type ConnectionErrorViewProps = {
+  tryAgainTheme: BaseButtonProps["theme"];
+  backToWalletSelectionTheme: BaseButtonProps["theme"];
+};
 // TODO(cartcrom): move this to a top level modal, rather than inline in the drawer
-export default function ConnectionErrorView() {
+export default function ConnectionErrorView({
+  tryAgainTheme,
+  backToWalletSelectionTheme
+}: ConnectionErrorViewProps) {
   const { activationState, tryActivation, cancelActivation } =
     useActivationState();
   const closeDrawer = useCloseAccountDrawer();
@@ -50,10 +58,17 @@ export default function ConnectionErrorView() {
         The connection attempt failed. Please click try again and follow the
         steps to connect in your wallet.
       </Typography>
-      <Button onClick={retry}>Try Again</Button>
-      <Button onClick={cancelActivation}>
-        <Typography marginBottom={12}>Back to wallet selection</Typography>
-      </Button>
+      <Grid gap="1rem">
+        <BaseButton onClick={retry} theme={tryAgainTheme}>
+          Try Again
+        </BaseButton>
+        <BaseButton
+          onClick={cancelActivation}
+          theme={backToWalletSelectionTheme}
+        >
+          <Typography marginBottom={12}>Back to wallet selection</Typography>
+        </BaseButton>
+      </Grid>
     </Wrapper>
   );
 }

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

@@ -110,6 +110,9 @@ export interface OptionProps {
   hoverColor: CSSProperties["color"];
   backgroundColor: CSSProperties["backgroundColor"];
   borderRadius: CSSProperties["borderRadius"];
+  onOptionClick?: (arg0: {
+    activationState: ReturnType<typeof useActivationState>["activationState"];
+  }) => void;
 }
 export function Option({
   connection,
@@ -117,7 +120,8 @@ export function Option({
   hoverFocusBackgroundColor,
   hoverColor,
   backgroundColor,
-  borderRadius
+  borderRadius,
+  onOptionClick
 }: OptionProps) {
   const { activationState, tryActivation } = useActivationState();
   const toggleAccountDrawer = useToggleAccountDrawer();
@@ -139,7 +143,10 @@ export function Option({
     >
       <OptionCardClickable
         disabled={isSomeOptionPending}
-        onClick={activate}
+        onClick={() => {
+          activate();
+          onOptionClick?.({ activationState });
+        }}
         selected={isCurrentOptionPending}
         data-testid={`wallet-option-${connection.type}`}
       >

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

@@ -5,7 +5,9 @@ import styled, { CSSProperties } from "styled-components";
 
 import { Grid } from "../../ui/Grid";
 import { flexColumnNoWrap } from "../styles";
-import ConnectionErrorView from "./ConnectionErrorView";
+import ConnectionErrorView, {
+  ConnectionErrorViewProps
+} from "./ConnectionErrorView";
 import { Option, OptionProps } from "./Option";
 import {
   ActivationStatus,
@@ -39,7 +41,6 @@ const OptionGrid = styled.div<{ $borderRadius: CSSProperties["borderRadius"] }>`
 
 export type WalletModalProps = {
   PrivacyPolicy: React.FC;
-  magicLoginButtonProps: MagicLoginButtonProps;
   optionProps: Pick<
     OptionProps,
     | "color"
@@ -47,12 +48,20 @@ export type WalletModalProps = {
     | "hoverColor"
     | "backgroundColor"
     | "borderRadius"
+    | "onOptionClick"
   > & { iconBorderRadius: CSSProperties["borderRadius"] };
-};
+  withMagicLogin?: boolean;
+  connectionErrorProps: ConnectionErrorViewProps;
+} & (
+  | { withMagicLogin: true; magicLoginButtonProps: MagicLoginButtonProps }
+  | { withMagicLogin?: false; magicLoginButtonProps?: undefined }
+);
 export function WalletModal({
   PrivacyPolicy,
   magicLoginButtonProps,
-  optionProps
+  optionProps,
+  withMagicLogin = true,
+  connectionErrorProps
 }: WalletModalProps) {
   const chainId = useChainId();
   const { config } = useConfigContext();
@@ -82,7 +91,7 @@ export function WalletModal({
         Connect a wallet
       </Grid>
       {activationState.status === ActivationStatus.ERROR ? (
-        <ConnectionErrorView />
+        <ConnectionErrorView {...connectionErrorProps} />
       ) : (
         <AutoColumn $gap="16px">
           <OptionGrid
@@ -100,7 +109,9 @@ export function WalletModal({
                 />
               ))}
           </OptionGrid>
-          <MagicLoginButton {...magicLoginButtonProps} />
+          {withMagicLogin && magicLoginButtonProps && (
+            <MagicLoginButton {...magicLoginButtonProps} />
+          )}
           <PrivacyPolicy />
         </AutoColumn>
       )}

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

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