feat: add more props to connect wallet button to further customise it…

…s look
bosonprotocol · Sep 30, 2024 · 86ff8b5 · 86ff8b5
1 parent 11ea7c7
commit 86ff8b5
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 19 deletions.
diff --git a/packages/react-kit/src/components/wallet2/web3Status/index.tsx b/packages/react-kit/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,31 +176,46 @@ function Web3StatusInner({
             onClick={handleWalletDropdownClick}
             theme={errorButtonTheme}
           >
-            Wrong network
+            {leftWrongNetworkChild}
+            {wrongNetworkChild}
+            {rightWrongNetworkChild}
           </BaseButton>
         </Tooltip>
       ) : (
         <BaseButton
           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

diff --git a/packages/react-kit/src/stories/ConnectWallet.stories.tsx b/packages/react-kit/src/stories/ConnectWallet.stories.tsx
@@ -1,5 +1,5 @@
 import { fn } from "@storybook/test";
-import React from "react";
+import React, { ReactNode } from "react";
 import { Meta } from "@storybook/react";
 import {
   ChainSelector,
@@ -17,8 +17,9 @@ import {
 import { HashRouter, Route, Routes } from "react-router-dom";
 import { bosonButtonThemeKeys } from "../components/ui/ThemedButton";
 import { CSSProperties, createGlobalStyle } from "styled-components";
+import { Wallet } from "phosphor-react";
 const colors = theme.colors.light;
-const successButtonTheme: ConnectWalletProps["successButtonTheme"] = {
+const successButtonTheme: ConnectWalletProps["connectWalletButtonTheme"] = {
   ...bosonButtonThemes({ withBosonStyle: false })["primary"],
   color: "inherit",
   background: "var(--buttonBgColor)"
@@ -38,6 +39,9 @@ const ColorGlobalStyle = createGlobalStyle<{ color: CSSProperties["color"] }>`
   }
 `;
 const Component = ({
+  showStatusIcon,
+  rightConnectedChild,
+  connectWalletChild,
   textColor,
   chainSelectorBackgroundColor,
   connectWalletBorderRadius,
@@ -59,7 +63,10 @@ const Component = ({
   magicLoginButtonBorderRadiusPx,
   onUserDisconnect
 }: {
+  showStatusIcon: boolean;
+  rightConnectedChild?: ReactNode;
   textColor: string;
+  connectWalletChild: string;
   chainSelectorBackgroundColor: string | undefined;
   connectWalletBorderRadius: string | undefined;
   connectWalletSuccessButtonThemeKey: string | undefined;
@@ -118,7 +125,19 @@ const Component = ({
                     config={config}
                   />
                   <ConnectWallet
-                    successButtonTheme={{
+                    showStatusIcon={showStatusIcon}
+                    connectWalletChild={connectWalletChild}
+                    rightConnectedChild={rightConnectedChild}
+                    connectWalletButtonTheme={{
+                      ...(connectWalletSuccessButtonThemeKey
+                        ? bosonButtonThemes({ withBosonStyle: false })[
+                            connectWalletSuccessButtonThemeKey
+                          ]
+                        : successButtonTheme),
+                      borderRadius: connectWalletBorderRadius,
+                      gap: "2px"
+                    }}
+                    connectedButtonTheme={{
                       ...(connectWalletSuccessButtonThemeKey
                         ? bosonButtonThemes({ withBosonStyle: false })[
                             connectWalletSuccessButtonThemeKey
@@ -285,6 +304,9 @@ export const CustomTheme = {
     walletHoverFocusBackgroundColor: "#e89f0e",
     walletHoverColor: "#ff0000",
     magicLoginButtonThemeKey: "orangeInverse",
-    magicLoginButtonBorderRadiusPx: "50"
+    magicLoginButtonBorderRadiusPx: "50",
+    showStatusIcon: false,
+    connectWalletChild: <>Connect</>,
+    rightConnectedChild: <Wallet />
   }
 };