Skip to content

Commit

Permalink
Add "Powered By Thirdweb" Branding in CW
Browse files Browse the repository at this point in the history
  • Loading branch information
@MananTank
MananTank committed Feb 13, 2024
1 parent e65e802 commit 4920335
Show file tree
Hide file tree
Showing 10 changed files with 165 additions and 260 deletions.
3 changes: 2 additions & 1 deletion packages/thirdweb/.eslintrc.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,14 @@ module.exports = {
"plugin:@tanstack/eslint-plugin-query/recommended",
"plugin:jsdoc/recommended-typescript-error",
],
plugins: ["better-tree-shaking", "jsdoc"],
plugins: ["better-tree-shaking", "jsdoc", "svg-jsx"],
settings: {
jsdoc: {
ignoreInternal: true,
},
},
rules: {
"svg-jsx/camel-case-dash": "error",
"better-tree-shaking/no-top-level-side-effects": "error",
"no-restricted-globals": [
"error",
Expand Down
1 change: 1 addition & 0 deletions packages/thirdweb/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,7 @@
"eslint-config-thirdweb": "workspace:*",
"eslint-plugin-better-tree-shaking": "0.0.4",
"eslint-plugin-jsdoc": "48.0.6",
"eslint-plugin-svg-jsx": "^1.2.2",
"ethers5": "npm:[email protected]",
"ethers6": "npm:[email protected]",
"react": "18.2.0",
Expand Down
105 changes: 46 additions & 59 deletions packages/thirdweb/src/react/ui/ConnectWallet/Modal/ConnectEmbed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,10 @@ import {
defaultTheme,
reservedScreens,
} from "../constants.js";
import { useScreen } from "./screen.js";
import { useSetupScreen } from "./screen.js";
import { type ComponentProps, useContext, useEffect } from "react";
import { Spinner } from "../../components/Spinner.js";
import { Container } from "../../components/basic.js";
import type { WalletConfig } from "../../../types/wallets.js";
import { radius, type Theme } from "../../design-system/index.js";
import { StyledDiv } from "../../design-system/elements.js";
import {
Expand Down Expand Up @@ -301,29 +300,30 @@ export function useShowConnectEmbed(loginOptional?: boolean) {
*/
export function ConnectEmbed(props: ConnectEmbedProps) {
const loginOptional = props.auth?.loginOptional;
const requiresSignIn = useSignInRequired(loginOptional);
const show = useShowConnectEmbed(loginOptional);
const { screen, setScreen, initialScreen } = useScreen();

// if showing main screen but signIn is required, switch to signIn screen
useEffect(() => {
if (requiresSignIn && screen === reservedScreens.main) {
setScreen(reservedScreens.signIn);
}
}, [requiresSignIn, screen, setScreen]);
const contextTheme = useCustomTheme();

const walletUIStatesProps = {
theme: props.theme || contextTheme || defaultTheme,
modalSize: "compact" as const,
title: undefined,
termsOfServiceUrl: props.termsOfServiceUrl,
privacyPolicyUrl: props.privacyPolicyUrl,
isEmbed: true,
auth: props.auth,
onConnect: props.onConnect,
showThirdwebBranding: props.showThirdwebBranding,
};

if (show) {
return (
<ConnectEmbedContent
{...props}
onClose={() => {
setScreen(initialScreen);
}}
screen={screen}
setScreen={setScreen}
initialScreen={initialScreen}
onConnect={props.onConnect}
/>
<WalletUIStatesProvider {...walletUIStatesProps}>
<CustomThemeProvider theme={walletUIStatesProps.theme}>
<ConnectEmbedContent {...props} onConnect={props.onConnect} />
<SyncedWalletUIStates {...walletUIStatesProps} />
</CustomThemeProvider>
</WalletUIStatesProvider>
);
}

Expand All @@ -335,17 +335,23 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
*/
const ConnectEmbedContent = (
props: Omit<ConnectEmbedProps, "onConnect"> & {
onClose: () => void;
screen: string | WalletConfig;
setScreen: (screen: string | WalletConfig) => void;
initialScreen: string | WalletConfig;
onConnect?: () => void;
loginOptional?: boolean;
},
) => {
const modalSize = "compact" as const;
const requiresSignIn = useSignInRequired(props.loginOptional);
const screenSetup = useSetupScreen();
const { screen, setScreen, initialScreen } = screenSetup;

// if showing main screen but signIn is required, switch to signIn screen
useEffect(() => {
if (requiresSignIn && screen === reservedScreens.main) {
setScreen(reservedScreens.signIn);
}
}, [requiresSignIn, screen, setScreen]);

const connectionStatus = useActiveWalletConnectionStatus();
const isAutoConnecting = useIsAutoConnecting();
const contextTheme = useCustomTheme();

let content = null;

Expand All @@ -365,11 +371,11 @@ const ConnectEmbedContent = (
} else {
content = (
<ConnectModalContent
initialScreen={props.initialScreen}
screen={props.screen}
setScreen={props.setScreen}
screenSetup={screenSetup}
isOpen={true}
onClose={props.onClose}
onClose={() => {
setScreen(initialScreen);
}}
onHide={() => {
// no op
}}
Expand All @@ -380,36 +386,17 @@ const ConnectEmbedContent = (
);
}

const walletUIStatesProps = {
theme: props.theme || contextTheme || defaultTheme,
modalSize: modalSize,
title: undefined,
termsOfServiceUrl: props.termsOfServiceUrl,
privacyPolicyUrl: props.privacyPolicyUrl,
isEmbed: true,
auth: props.auth,
onConnect: props.onConnect,
chainId: props.chainId ? BigInt(props.chainId) : undefined,
chains: props.chains,
showThirdwebBranding: props.showThirdwebBranding,
};

return (
<WalletUIStatesProvider {...walletUIStatesProps}>
<CustomThemeProvider theme={walletUIStatesProps.theme}>
<EmbedContainer
className={props.className}
style={{
height: "auto",
maxWidth: modalMaxWidthCompact,
...props.style,
}}
>
<DynamicHeight> {content} </DynamicHeight>
<SyncedWalletUIStates {...walletUIStatesProps} />
</EmbedContainer>
</CustomThemeProvider>
</WalletUIStatesProvider>
<EmbedContainer
className={props.className}
style={{
height: "auto",
maxWidth: modalMaxWidthCompact,
...props.style,
}}
>
<DynamicHeight> {content} </DynamicHeight>
</EmbedContainer>
);
};

Expand Down
9 changes: 4 additions & 5 deletions packages/thirdweb/src/react/ui/ConnectWallet/Modal/ConnectModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
} from "../../../providers/wallet-ui-states-provider.js";
import { useCallback, useEffect, useContext, useState } from "react";
import { reservedScreens, onModalUnmount } from "../constants.js";
import { useScreen } from "./screen.js";
import { useSetupScreen } from "./screen.js";
import { CustomThemeProvider } from "../../design-system/CustomThemeProvider.js";
import { useActiveAccount } from "../../../providers/wallet-provider.js";
import { Modal } from "../../components/Modal.js";
Expand All @@ -17,7 +17,8 @@ import { ConnectModalContent } from "./ConnectModalContent.js";
export const ConnectModal = () => {
const { theme, modalSize } = useContext(ModalConfigCtx);

const { screen, setScreen, initialScreen } = useScreen();
const screenSetup = useSetupScreen();
const { screen, setScreen, initialScreen } = screenSetup;
const isWalletModalOpen = useIsWalletModalOpen();
const setIsWalletModalOpen = useSetIsWalletModalOpen();
const [hideModal, setHideModal] = useState(false);
Expand Down Expand Up @@ -120,9 +121,7 @@ export const ConnectModal = () => {
}}
>
<ConnectModalContent
initialScreen={initialScreen}
screen={screen}
setScreen={setScreen}
screenSetup={screenSetup}
onHide={onHide}
onShow={onShow}
isOpen={isWalletModalOpen}
Expand Down
146 changes: 8 additions & 138 deletions packages/thirdweb/src/react/ui/ConnectWallet/Modal/ConnectModalContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,13 @@
import {
ModalConfigCtx,
// SetModalConfigCtx,
useIsWalletModalOpen,
useSetIsWalletModalOpen,
} from "../../../providers/wallet-ui-states-provider.js";
import { useCallback, useEffect, useContext, useState } from "react";
import { useCallback, useContext } from "react";
import { reservedScreens, onModalUnmount } from "../constants.js";
import { HeadlessConnectUI } from "../../../wallets/headlessConnectUI.js";
import { ScreenContext, useScreen } from "./screen.js";
import { ScreenSetupContext, type ScreenSetup } from "./screen.js";
import { StartScreen } from "../screens/StartScreen.js";
import { CustomThemeProvider } from "../../design-system/CustomThemeProvider.js";
import {
useActiveAccount,
useConnect,
} from "../../../providers/wallet-provider.js";
import { Modal } from "../../components/Modal.js";
import { useConnect } from "../../../providers/wallet-provider.js";
import { WalletSelector } from "../WalletSelector.js";
import { useThirdwebProviderProps } from "../../../hooks/others/useThirdwebProviderProps.js";
import type { ScreenConfig, WalletConfig } from "../../../types/wallets.js";
Expand All @@ -28,15 +21,14 @@ import type { Account } from "../../../../wallets/interfaces/wallet.js";
* @internal
*/
export const ConnectModalContent = (props: {
screen: string | WalletConfig;
initialScreen: string | WalletConfig;
setScreen: (screen: string | WalletConfig) => void;
screenSetup: ScreenSetup;
onHide: () => void;
onShow: () => void;
isOpen: boolean;
onClose: () => void;
}) => {
const { screen, setScreen, initialScreen, onHide, onShow, onClose } = props;
const { onHide, onShow, onClose } = props;
const { screen, setScreen, initialScreen } = props.screenSetup;
const { wallets, client, dappMetadata } = useThirdwebProviderProps();
// const disconnect = useDisconnect();
const modalConfig = useContext(ModalConfigCtx);
Expand Down Expand Up @@ -193,7 +185,7 @@ export const ConnectModalContent = (props: {
// );

return (
<ScreenContext.Provider value={screen}>
<ScreenSetupContext.Provider value={props.screenSetup}>
{isWideModal ? (
<ConnectModalWideLayout
left={walletList}
Expand All @@ -214,128 +206,6 @@ export const ConnectModalContent = (props: {
{typeof screen !== "string" && getWalletUI(screen)}
</ConnectModalCompactLayout>
)}
</ScreenContext.Provider>
);
};

/**
* @internal
*/
export const ConnectModal = () => {
const { theme, modalSize } = useContext(ModalConfigCtx);

const { screen, setScreen, initialScreen } = useScreen();
const isWalletModalOpen = useIsWalletModalOpen();
const setIsWalletModalOpen = useSetIsWalletModalOpen();
const [hideModal, setHideModal] = useState(false);
// const connectionStatus = useConnectionStatus();

const closeModal = useCallback(() => {
setIsWalletModalOpen(false);
onModalUnmount(() => {
setScreen(initialScreen);
});
}, [initialScreen, setIsWalletModalOpen, setScreen]);

// const [prevConnectionStatus, setPrevConnectionStatus] =
// useState(connectionStatus);

// useEffect(() => {
// setPrevConnectionStatus(connectionStatus);
// }, [connectionStatus]);

// const disconnect = useDisconnect();

const activeAccount = useActiveAccount();
// const isWrapperConnected = !!wallet?.getPersonalWallet();

// const isWrapperScreen =
// typeof screen !== "string" && !!screen.personalWallets;

// reopen the screen to complete wrapper wallet's next step after connecting a personal wallet
// useEffect(() => {
// if (
// // !isWrapperConnected &&
// isWrapperScreen &&
// !isWalletModalOpen &&
// // connectionStatus === "connected" &&
// // prevConnectionStatus === "connecting"
// ) {
// setIsWalletModalOpen(true);
// }
// }, [
// isWalletModalOpen,
// connectionStatus,
// setIsWalletModalOpen,
// isWrapperScreen,
// // isWrapperConnected,
// prevConnectionStatus,
// ]);

useEffect(() => {
if (!isWalletModalOpen) {
onModalUnmount(() => {
setHideModal(false);
});
}
}, [isWalletModalOpen, setIsWalletModalOpen, screen]);

const onHide = useCallback(() => setHideModal(true), []);
const onShow = useCallback(() => setHideModal(false), []);

// if wallet is suddenly disconnected when showing the sign in screen, close the modal and reset the screen
useEffect(() => {
if (
isWalletModalOpen &&
screen === reservedScreens.signIn &&
!activeAccount
) {
setScreen(initialScreen);
setIsWalletModalOpen(false);
}
}, [
initialScreen,
isWalletModalOpen,
screen,
setIsWalletModalOpen,
setScreen,
activeAccount,
]);

return (
<CustomThemeProvider theme={theme}>
<Modal
hide={hideModal}
size={modalSize}
open={isWalletModalOpen}
setOpen={(value) => {
if (hideModal) {
return;
}

setIsWalletModalOpen(value);

if (!value) {
onModalUnmount(() => {
// if (connectionStatus === "connecting") {
// disconnect();
// }

setScreen(initialScreen);
});
}
}}
>
<ConnectModalContent
initialScreen={initialScreen}
screen={screen}
setScreen={setScreen}
onHide={onHide}
onShow={onShow}
isOpen={isWalletModalOpen}
onClose={closeModal}
/>
</Modal>
</CustomThemeProvider>
</ScreenSetupContext.Provider>
);
};

Check warning on line 211 in packages/thirdweb/src/react/ui/ConnectWallet/Modal/ConnectModalContent.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/ui/ConnectWallet/Modal/ConnectModalContent.tsx#L2-L211 

Added lines #L2 - L211 were not covered by tests
Loading

0 comments on commit 4920335

Please sign in to comment.