diff --git a/packages/connect/src/components/Connect/Connect.tsx b/packages/connect/src/components/Connect/Connect.tsx index 47fd8934a..a6dceb79f 100644 --- a/packages/connect/src/components/Connect/Connect.tsx +++ b/packages/connect/src/components/Connect/Connect.tsx @@ -15,6 +15,7 @@ import { useEmailAuth } from '../../hooks/useWaasEmailAuth' import { FormattedEmailConflictInfo } from '../../hooks/useWaasEmailConflict' import { useWaasLinkWallet } from '../../hooks/useWaasLinkWallet' import { useWallets } from '../../hooks/useWallets' +import { useWalletSettings } from '../../hooks/useWalletSettings' import { ExtendedConnector, ConnectConfig, LogoProps } from '../../types' import { isEmailValid } from '../../utils/helpers' import { AppleWaasConnectButton, ConnectButton, GoogleWaasConnectButton, ShowAllWalletsButton } from '../ConnectButton' @@ -39,6 +40,7 @@ export const Connect = (props: ConnectProps) => { useScript(appleAuthHelpers.APPLE_SCRIPT_SRC) const { analytics } = useAnalyticsContext() + const { hideExternalConnectOptions, hideConnectedWallets, hideSocialConnectOptions } = useWalletSettings() const { onClose, emailConflictInfo, config = {} as ConnectConfig, isPreview = false } = props const { signIn = {} } = config @@ -380,7 +382,7 @@ export const Connect = (props: ConnectProps) => { ) : ( <> - {wallets.length > 0 && !showEmailWaasPinInput && ( + {!hideConnectedWallets && wallets.length > 0 && !showEmailWaasPinInput && ( <> { /> <> - -
- - {!hasConnectedSocialOrSequenceUniversal ? 'Connect with a social account' : 'Connect another wallet'} - -
+ {!hideExternalConnectOptions && ( + <> + +
+ + {!hasConnectedSocialOrSequenceUniversal ? 'Connect with a social account' : 'Connect another wallet'} + +
+ + )} )} @@ -415,7 +421,7 @@ export const Connect = (props: ConnectProps) => {
<> - {showSocialConnectorSection && ( + {!hideSocialConnectOptions && showSocialConnectorSection && (
{socialAuthConnectors.slice(0, socialConnectorsPerRow).map(connector => { return ( @@ -450,7 +456,7 @@ export const Connect = (props: ConnectProps) => { )}
)} - {showSocialConnectorSection && showEmailInputSection && ( + {!hideSocialConnectOptions && showSocialConnectorSection && showEmailInputSection && (
@@ -486,7 +492,7 @@ export const Connect = (props: ConnectProps) => {
)} - {walletConnectors.length > 0 && ( + {!hideExternalConnectOptions && walletConnectors.length > 0 && ( <>
- +
diff --git a/packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx b/packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx index 72a19d766..170bbff87 100644 --- a/packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx +++ b/packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx @@ -45,7 +45,10 @@ export const SequenceConnectProvider = (props: SequenceConnectProviderProps) => displayedAssets: displayedAssetsSetting = [], readOnlyNetworks, ethAuth = {} as EthAuthSettings, - disableAnalytics = false + disableAnalytics = false, + hideExternalConnectOptions = false, + hideConnectedWallets = false, + hideSocialConnectOptions = false } = config const defaultAppName = signIn.projectName || 'app' @@ -168,7 +171,16 @@ export const SequenceConnectProvider = (props: SequenceConnectProviderProps) => - + diff --git a/packages/connect/src/contexts/WalletConfig.ts b/packages/connect/src/contexts/WalletConfig.ts index 371df9c62..f0f8655e0 100644 --- a/packages/connect/src/contexts/WalletConfig.ts +++ b/packages/connect/src/contexts/WalletConfig.ts @@ -8,6 +8,9 @@ type WalletConfigContext = { setDisplayedAssets: React.Dispatch> displayedAssets: DisplayedAsset[] readOnlyNetworks?: number[] + hideExternalConnectOptions?: boolean + hideConnectedWallets?: boolean + hideSocialConnectOptions?: boolean } const [useWalletConfigContext, WalletConfigContextProvider] = createGenericContext() diff --git a/packages/connect/src/hooks/useWalletSettings.ts b/packages/connect/src/hooks/useWalletSettings.ts index 71ee57fc2..5e8dea8a4 100644 --- a/packages/connect/src/hooks/useWalletSettings.ts +++ b/packages/connect/src/hooks/useWalletSettings.ts @@ -6,6 +6,8 @@ import { useWalletConfigContext } from '../contexts/WalletConfig' * This hook provides access to wallet settings including: * - Displayed assets configuration (which tokens/contracts to show) * - Read-only networks (networks where transactions are disabled) + * - See if external wallets are visible on the Connect Modal + * - See if linked wallets are visible on the Connect Modal * * @see {@link https://docs.sequence.xyz/sdk/web/hooks/useWalletSettings} for more detailed documentation. * @@ -13,10 +15,13 @@ import { useWalletConfigContext } from '../contexts/WalletConfig' * - `displayedAssets` - Array of assets to display, each with a contract address and chain ID * - `readOnlyNetworks` - Array of network IDs where transactions are disabled * - `setDisplayedAssets` - Function to update the list of displayed assets + * - `hideExternalConnectOptions` - Hide external wallets on the Connect Modal + * - `hideConnectedWallets` - Hide connected wallets on the Connect Modal + * - `hideSocialConnectOptions` - Hide social wallets on the Connect Modal * * @example * ```tsx - * const { displayedAssets, readOnlyNetworks, setDisplayedAssets } = useWalletSettings() + * const { displayedAssets, readOnlyNetworks, setDisplayedAssets, hideExternalConnectOptions, hideConnectedWallets, hideSocialConnectOptions } = useWalletSettings() * * // Check if a network is read-only * const isReadOnly = readOnlyNetworks?.includes(1) // true if Ethereum mainnet is read-only @@ -29,11 +34,21 @@ import { useWalletConfigContext } from '../contexts/WalletConfig' * ``` */ export const useWalletSettings = () => { - const { setDisplayedAssets, displayedAssets, readOnlyNetworks } = useWalletConfigContext() + const { + setDisplayedAssets, + displayedAssets, + readOnlyNetworks, + hideExternalConnectOptions, + hideConnectedWallets, + hideSocialConnectOptions + } = useWalletConfigContext() return { displayedAssets, readOnlyNetworks, - setDisplayedAssets + setDisplayedAssets, + hideExternalConnectOptions, + hideConnectedWallets, + hideSocialConnectOptions } } diff --git a/packages/connect/src/styles.ts b/packages/connect/src/styles.ts index 7b2414fe9..d7e717f0a 100644 --- a/packages/connect/src/styles.ts +++ b/packages/connect/src/styles.ts @@ -307,6 +307,9 @@ export const styles = String.raw` .my-4 { margin-block: calc(var(--spacing) * 4); } + .mt-0 { + margin-top: calc(var(--spacing) * 0); + } .mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); } @@ -382,6 +385,9 @@ export const styles = String.raw` .inline-flex { display: inline-flex; } + .table { + display: table; + } .aspect-square { aspect-ratio: 1 / 1; } @@ -472,6 +478,9 @@ export const styles = String.raw` .min-h-full { min-height: 100%; } + .w-1 { + width: calc(var(--spacing) * 1); + } .w-1\/2 { width: calc(1/2 * 100%); } @@ -565,12 +574,21 @@ export const styles = String.raw` .min-w-full { min-width: 100%; } + .flex-shrink { + flex-shrink: 1; + } .shrink-0 { flex-shrink: 0; } + .flex-grow { + flex-grow: 1; + } .grow { flex-grow: 1; } + .border-collapse { + border-collapse: collapse; + } .origin-top { transform-origin: top; } @@ -939,6 +957,9 @@ export const styles = String.raw` .pt-0 { padding-top: calc(var(--spacing) * 0); } + .pt-1 { + padding-top: calc(var(--spacing) * 1); + } .pt-1\.5 { padding-top: calc(var(--spacing) * 1.5); } @@ -1221,6 +1242,9 @@ export const styles = String.raw` .ring-border-normal { --tw-ring-color: var(--seq-color-border-normal); } + .ring-white { + --tw-ring-color: var(--color-white); + } .ring-white\/10 { --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent); } @@ -1256,6 +1280,10 @@ export const styles = String.raw` -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } + .backdrop-filter { + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); diff --git a/packages/connect/src/types.ts b/packages/connect/src/types.ts index 013eb7886..3692bd84d 100644 --- a/packages/connect/src/types.ts +++ b/packages/connect/src/types.ts @@ -79,6 +79,9 @@ export interface ConnectConfig { readOnlyNetworks?: number[] ethAuth?: EthAuthSettings env?: Partial + hideExternalConnectOptions?: boolean + hideSocialConnectOptions?: boolean + hideConnectedWallets?: boolean } export type StorageItem = {