feat: add prop to disable magic link (#804)

bosonprotocol · Oct 7, 2024 · 2857edd · 2857edd
1 parent d17366e
commit 2857edd
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/packages/react-kit/src/components/wallet2/walletModal/index.tsx b/packages/react-kit/src/components/wallet2/walletModal/index.tsx
@@ -49,11 +49,13 @@ export type WalletModalProps = {
     | "borderRadius"
     | "onOptionClick"
   > & { iconBorderRadius: CSSProperties["borderRadius"] };
+  withMagicLogin?: boolean;
 };
 export function WalletModal({
   PrivacyPolicy,
   magicLoginButtonProps,
-  optionProps
+  optionProps,
+  withMagicLogin = true
 }: WalletModalProps) {
   const chainId = useChainId();
   const { config } = useConfigContext();
@@ -101,7 +103,7 @@ export function WalletModal({
                 />
               ))}
           </OptionGrid>
-          <MagicLoginButton {...magicLoginButtonProps} />
+          {withMagicLogin && <MagicLoginButton {...magicLoginButtonProps} />}
           <PrivacyPolicy />
         </AutoColumn>
       )}

diff --git a/packages/react-kit/src/hooks/connection/useSyncChainQuery.ts b/packages/react-kit/src/hooks/connection/useSyncChainQuery.ts
@@ -35,7 +35,7 @@ export default function useSyncChainQuery() {
   const parsedQs = useParsedQueryString();
   const configIdRef = useRef(currentConfigId);
   const accountRef = useRef(account);
-  const accountAlreadyConnected = useRef(account);
+  const accountAlreadyConnected = useRef<string | undefined>(account);
   const disconnect = useCallback(() => {
     accountAlreadyConnected.current = undefined;
     _disconnect({ isUserDisconnecting: false });

diff --git a/packages/react-kit/src/stories/ConnectWallet.stories.tsx b/packages/react-kit/src/stories/ConnectWallet.stories.tsx
@@ -61,6 +61,7 @@ const Component = ({
   walletHoverColor,
   magicLoginButtonThemeKey,
   magicLoginButtonBorderRadiusPx,
+  withMagicLogin,
   onUserDisconnect
 }: {
   showStatusIcon: boolean;
@@ -85,6 +86,7 @@ const Component = ({
   walletHoverColor: string | undefined;
   magicLoginButtonThemeKey: string | undefined;
   magicLoginButtonBorderRadiusPx: string | undefined;
+  withMagicLogin: boolean | undefined;
   onUserDisconnect: () => unknown;
 }) => {
   return (
@@ -175,6 +177,7 @@ const Component = ({
                     disconnectColor={accountDrawerDisconnectColor}
                     onUserDisconnect={onUserDisconnect}
                     walletModalProps={{
+                      withMagicLogin,
                       optionProps: {
                         backgroundColor: walletBackgroundColor,
                         color: walletColor,
@@ -305,6 +308,7 @@ export const CustomTheme = {
     walletHoverColor: "#ff0000",
     magicLoginButtonThemeKey: "orangeInverse",
     magicLoginButtonBorderRadiusPx: "50",
+    withMagicLogin: true,
     showStatusIcon: false,
     connectWalletChild: <>Connect</>,
     rightConnectedChild: <Wallet />