feat: added showExternalWallets and showLinkedWallets config flags (#416)

* feat: added showExternalWallets and showLinkedWallets config flags

* rename property and hide divider + text

* feat: added showSocialWallets flag

* add showSocialWallets to tsdoc

* change naming of properties

Author: VGabriel45

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) => {
         </div>
       ) : (
         <>
-          {wallets.length > 0 && !showEmailWaasPinInput && (
+          {!hideConnectedWallets && wallets.length > 0 && !showEmailWaasPinInput && (
             <>
               <ConnectedWallets
                 wallets={wallets}
@@ -390,12 +392,16 @@ export const Connect = (props: ConnectProps) => {
               />
 
               <>
-                <Divider className="text-background-raised w-full" />
-                <div className="flex justify-center">
-                  <Text variant="small" color="muted">
-                    {!hasConnectedSocialOrSequenceUniversal ? 'Connect with a social account' : 'Connect another wallet'}
-                  </Text>
-                </div>
+                {!hideExternalConnectOptions && (
+                  <>
+                    <Divider className="text-background-raised w-full" />
+                    <div className="flex justify-center">
+                      <Text variant="small" color="muted">
+                        {!hasConnectedSocialOrSequenceUniversal ? 'Connect with a social account' : 'Connect another wallet'}
+                      </Text>
+                    </div>
+                  </>
+                )}
               </>
             </>
           )}
@@ -415,7 +421,7 @@ export const Connect = (props: ConnectProps) => {
 
                   <div className="flex mt-6 gap-6 flex-col">
                     <>
-                      {showSocialConnectorSection && (
+                      {!hideSocialConnectOptions && showSocialConnectorSection && (
                         <div className={`flex gap-2 justify-center items-center ${descriptiveSocials ? 'flex-col' : 'flex-row'}`}>
                           {socialAuthConnectors.slice(0, socialConnectorsPerRow).map(connector => {
                             return (
@@ -450,7 +456,7 @@ export const Connect = (props: ConnectProps) => {
                           )}
                         </div>
                       )}
-                      {showSocialConnectorSection && showEmailInputSection && (
+                      {!hideSocialConnectOptions && showSocialConnectorSection && showEmailInputSection && (
                         <div className="flex gap-4 flex-row justify-center items-center">
                           <Divider className="mx-0 my-0 text-background-secondary grow" />
                           <Text className="leading-4 h-4 text-sm" variant="normal" fontWeight="medium" color="muted">
@@ -486,7 +492,7 @@ export const Connect = (props: ConnectProps) => {
                   </div>
                 </>
               )}
-              {walletConnectors.length > 0 && (
+              {!hideExternalConnectOptions && walletConnectors.length > 0 && (
                 <>
                   <div
                     className={clsx(

packages/connect/src/components/SequenceConnectPreviewProvider/SequenceConnectPreviewProvider.tsx

@@ -32,7 +32,10 @@ export const SequenceConnectPreviewProvider = (props: SequenceConnectProviderPro
     displayedAssets: displayedAssetsSetting = [],
     readOnlyNetworks,
     ethAuth = {} as EthAuthSettings,
-    disableAnalytics = false
+    disableAnalytics = false,
+    hideExternalConnectOptions = false,
+    hideConnectedWallets = false,
+    hideSocialConnectOptions = false
   } = config
 
   const defaultAppName = signIn.projectName || 'app'
@@ -122,7 +125,16 @@ export const SequenceConnectPreviewProvider = (props: SequenceConnectProviderPro
           <ConnectModalContextProvider
             value={{ isConnectModalOpen: openConnectModal, setOpenConnectModal, openConnectModalState: openConnectModal }}
           >
-            <WalletConfigContextProvider value={{ setDisplayedAssets, displayedAssets, readOnlyNetworks }}>
+            <WalletConfigContextProvider
+              value={{
+                setDisplayedAssets,
+                displayedAssets,
+                readOnlyNetworks,
+                hideExternalConnectOptions,
+                hideConnectedWallets,
+                hideSocialConnectOptions
+              }}
+            >
               <AnalyticsContextProvider value={{ setAnalytics, analytics }}>
                 <div id="kit-provider">
                   <ThemeProvider root="#kit-provider" scope="kit" theme={theme}>

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) =>
             <ConnectModalContextProvider
               value={{ isConnectModalOpen: openConnectModal, setOpenConnectModal, openConnectModalState: openConnectModal }}
             >
-              <WalletConfigContextProvider value={{ setDisplayedAssets, displayedAssets, readOnlyNetworks }}>
+              <WalletConfigContextProvider
+                value={{
+                  setDisplayedAssets,
+                  displayedAssets,
+                  readOnlyNetworks,
+                  hideExternalConnectOptions,
+                  hideConnectedWallets,
+                  hideSocialConnectOptions
+                }}
+              >
                 <AnalyticsContextProvider value={{ setAnalytics, analytics }}>
                   <ShadowRoot theme={theme}>
                     <AnimatePresence>

packages/connect/src/contexts/WalletConfig.ts

@@ -8,6 +8,9 @@ type WalletConfigContext = {
   setDisplayedAssets: React.Dispatch<React.SetStateAction<DisplayedAsset[]>>
   displayedAssets: DisplayedAsset[]
   readOnlyNetworks?: number[]
+  hideExternalConnectOptions?: boolean
+  hideConnectedWallets?: boolean
+  hideSocialConnectOptions?: boolean
 }
 
 const [useWalletConfigContext, WalletConfigContextProvider] = createGenericContext<WalletConfigContext>()

packages/connect/src/hooks/useWalletSettings.ts

@@ -6,17 +6,22 @@ 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.
  *
  * @returns An object containing:
  * - `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
   }
 }

packages/connect/src/styles.ts

@@ -304,6 +304,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);
   }
@@ -379,6 +382,9 @@ export const styles = String.raw`
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -469,6 +475,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%);
   }
@@ -562,12 +571,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);
   }
@@ -1228,6 +1249,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 srgb, #fff 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1266,6 +1290,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, display, visibility, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));

packages/connect/src/types.ts

@@ -79,6 +79,9 @@ export interface ConnectConfig {
   readOnlyNetworks?: number[]
   ethAuth?: EthAuthSettings
   env?: Partial<SequenceHooksEnv>
+  hideExternalConnectOptions?: boolean
+  hideSocialConnectOptions?: boolean
+  hideConnectedWallets?: boolean
 }
 
 export type StorageItem = {