fix: Enable 1-click safe create for social login

src/components/common/ConnectWallet/AccountCenter.tsx

@@ -55,13 +55,7 @@ const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
     <>
       <ButtonBase onClick={handleClick} aria-describedby={id} disableRipple sx={{ alignSelf: 'stretch' }}>
         <Box className={css.buttonContainer}>
-          {wallet.label === ONBOARD_MPC_MODULE_LABEL ? (
-            <div className={css.socialLoginInfo}>
-              <SocialLoginInfo wallet={wallet} chainInfo={chainInfo} hideActions={true} />
-            </div>
-          ) : (
-            <WalletInfo wallet={wallet} />
-          )}
+          <WalletInfo wallet={wallet} />
 
           <Box display="flex" alignItems="center" justifyContent="flex-end" marginLeft="auto">
             {open ? <ExpandLessIcon color="border" /> : <ExpandMoreIcon color="border" />}

src/components/common/ConnectWallet/MPCLogin.tsx

@@ -4,16 +4,24 @@ import { useContext } from 'react'
 import { MpcWalletContext } from './MPCWalletProvider'
 import { PasswordRecovery } from './PasswordRecovery'
 import GoogleLogo from '@/public/images/welcome/logo-google.svg'
+import InfoIcon from '@/public/images/notifications/info.svg'
 
 import css from './styles.module.css'
 import useWallet from '@/hooks/wallets/useWallet'
+import { useCurrentChain } from '@/hooks/useChains'
+import chains from '@/config/chains'
 
 const MPCLogin = ({ onLogin }: { onLogin?: () => void }) => {
+  const currentChain = useCurrentChain()
   const { triggerLogin, userInfo, walletState, recoverFactorWithPassword } = useContext(MpcWalletContext)
 
   const wallet = useWallet()
   const loginPending = walletState === MPCWalletState.AUTHENTICATING
 
+  // TODO: Replace with feature flag from config service
+  const isMPCLoginEnabled = currentChain?.chainId === chains.gno
+  const isDisabled = loginPending || !isMPCLoginEnabled
+
   const login = async () => {
     const success = await triggerLogin()
 
@@ -39,7 +47,7 @@ const MPCLogin = ({ onLogin }: { onLogin?: () => void }) => {
             sx={{ px: 2, py: 1, borderWidth: '1px !important' }}
             onClick={onLogin}
             size="small"
-            disabled={loginPending}
+            disabled={isDisabled}
             fullWidth
           >
             <Box width="100%" display="flex" flexDirection="row" alignItems="center" gap={1}>
@@ -64,7 +72,7 @@ const MPCLogin = ({ onLogin }: { onLogin?: () => void }) => {
           variant="outlined"
           onClick={login}
           size="small"
-          disabled={loginPending}
+          disabled={isDisabled}
           fullWidth
           sx={{ borderWidth: '1px !important' }}
         >
@@ -74,6 +82,22 @@ const MPCLogin = ({ onLogin }: { onLogin?: () => void }) => {
         </Button>
       )}
 
+      {!isMPCLoginEnabled && (
+        <Typography variant="body2" color="text.secondary" display="flex" gap={1} alignItems="center">
+          <SvgIcon
+            component={InfoIcon}
+            inheritViewBox
+            color="border"
+            fontSize="small"
+            sx={{
+              verticalAlign: 'middle',
+              ml: 0.5,
+            }}
+          />
+          Currently only supported on Gnosis Chain
+        </Typography>
+      )}
+
       {walletState === MPCWalletState.MANUAL_RECOVERY && (
         <PasswordRecovery recoverFactorWithPassword={recoverPassword} />
       )}

src/components/common/NetworkSelector/index.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import type { SelectChangeEvent } from '@mui/material'
-import { MenuItem, Select, Skeleton } from '@mui/material'
+import { FormControl, MenuItem, Select, Skeleton } from '@mui/material'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import useChains from '@/hooks/useChains'
 import { useRouter } from 'next/router'
@@ -11,10 +11,13 @@ import type { ReactElement } from 'react'
 import { useCallback } from 'react'
 import { AppRoutes } from '@/config/routes'
 import { trackEvent, OVERVIEW_EVENTS } from '@/services/analytics'
+import useWallet from '@/hooks/wallets/useWallet'
+import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/module'
 
 const keepPathRoutes = [AppRoutes.welcome, AppRoutes.newSafe.create, AppRoutes.newSafe.load]
 
 const NetworkSelector = (): ReactElement => {
+  const wallet = useWallet()
   const { configs } = useChains()
   const chainId = useChainId()
   const router = useRouter()
@@ -54,40 +57,42 @@ const NetworkSelector = (): ReactElement => {
   }
 
   return configs.length ? (
-    <Select
-      value={chainId}
-      onChange={onChange}
-      size="small"
-      className={css.select}
-      variant="standard"
-      IconComponent={ExpandMoreIcon}
-      MenuProps={{
-        sx: {
-          '& .MuiPaper-root': {
-            mt: 2,
-            overflow: 'auto',
+    <FormControl disabled={wallet?.label === ONBOARD_MPC_MODULE_LABEL}>
+      <Select
+        value={chainId}
+        onChange={onChange}
+        size="small"
+        className={css.select}
+        variant="standard"
+        IconComponent={ExpandMoreIcon}
+        MenuProps={{
+          sx: {
+            '& .MuiPaper-root': {
+              mt: 2,
+              overflow: 'auto',
+            },
           },
-        },
-      }}
-      sx={{
-        '& .MuiSelect-select': {
-          py: 0,
-        },
-        '& svg path': {
-          fill: ({ palette }) => palette.border.main,
-        },
-      }}
-    >
-      {configs.map((chain) => {
-        return (
-          <MenuItem key={chain.chainId} value={chain.chainId}>
-            <Link href={getNetworkLink(chain.shortName)} passHref>
-              <ChainIndicator chainId={chain.chainId} inline />
-            </Link>
-          </MenuItem>
-        )
-      })}
-    </Select>
+        }}
+        sx={{
+          '& .MuiSelect-select': {
+            py: 0,
+          },
+          '& svg path': {
+            fill: ({ palette }) => palette.border.main,
+          },
+        }}
+      >
+        {configs.map((chain) => {
+          return (
+            <MenuItem key={chain.chainId} value={chain.chainId}>
+              <Link href={getNetworkLink(chain.shortName)} passHref>
+                <ChainIndicator chainId={chain.chainId} inline />
+              </Link>
+            </MenuItem>
+          )
+        })}
+      </Select>
+    </FormControl>
   ) : (
     <Skeleton width={94} height={31} sx={{ mx: 2 }} />
   )

src/components/common/NetworkSelector/styles.module.css

@@ -24,6 +24,10 @@
   margin-right: var(--space-2);
 }
 
+.select :global .Mui-disabled {
+  pointer-events: none;
+}
+
 .newChip {
   font-weight: bold;
   letter-spacing: -0.1px;

src/components/common/WalletInfo/index.tsx

@@ -9,13 +9,25 @@ import { useAppSelector } from '@/store'
 import { selectChainById } from '@/store/chainsSlice'
 
 import css from './styles.module.css'
+import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/module'
+import SocialLoginInfo from '@/components/common/SocialLoginInfo'
 
 export const UNKNOWN_CHAIN_NAME = 'Unknown'
 
 const WalletInfo = ({ wallet }: { wallet: ConnectedWallet }): ReactElement => {
   const walletChain = useAppSelector((state) => selectChainById(state, wallet.chainId))
   const prefix = walletChain?.shortName
 
+  const isSocialLogin = wallet.label === ONBOARD_MPC_MODULE_LABEL
+
+  if (isSocialLogin) {
+    return (
+      <div className={css.socialLoginInfo}>
+        <SocialLoginInfo wallet={wallet} chainInfo={walletChain} hideActions={true} />
+      </div>
+    )
+  }
+
   return (
     <Box className={css.container}>
       <Box className={css.imageContainer}>

src/components/common/WalletInfo/styles.module.css

@@ -31,4 +31,8 @@
   .walletName {
     display: none;
   }
+
+  .socialLoginInfo > div > div {
+    display: none;
+  }
 }

src/components/new-safe/create/index.tsx

@@ -19,6 +19,7 @@ import CreateSafeInfos from '@/components/new-safe/create/CreateSafeInfos'
 import { type ReactElement, useMemo, useState } from 'react'
 import ExternalLink from '@/components/common/ExternalLink'
 import { HelpCenterArticle } from '@/config/constants'
+import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/module'
 
 export type NewSafeFormData = {
   name: string
@@ -163,6 +164,9 @@ const CreateSafe = () => {
     saltNonce: Date.now(),
   }
 
+  // Jump to review screen when using social login
+  const initialStep = wallet?.label === ONBOARD_MPC_MODULE_LABEL ? 2 : 0
+
   const onClose = () => {
     router.push(AppRoutes.welcome)
   }
@@ -178,6 +182,7 @@ const CreateSafe = () => {
         <Grid item xs={12} md={8} order={[1, null, 0]}>
           <CardStepper
             initialData={initialData}
+            initialStep={initialStep}
             onClose={onClose}
             steps={CreateSafeSteps}
             eventCategory={CREATE_SAFE_CATEGORY}

src/components/new-safe/create/steps/ReviewStep/index.tsx

@@ -27,6 +27,9 @@ import { hasRemainingRelays } from '@/utils/relaying'
 import { BigNumber } from 'ethers'
 import { usePendingSafe } from '../StatusStep/usePendingSafe'
 import { LATEST_SAFE_VERSION } from '@/config/constants'
+import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/module'
+import { SPONSOR_LOGOS } from '@/components/tx/SponsoredBy'
+import Image from 'next/image'
 
 const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafeFormData>) => {
   const isWrongChain = useIsWrongChain()
@@ -105,12 +108,14 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
     onSubmit(pendingSafe)
   }
 
+  const isSocialLogin = wallet?.label === ONBOARD_MPC_MODULE_LABEL
+
   return (
     <>
       <Box className={layoutCss.row}>
         <Grid container spacing={3}>
           <ReviewRow name="Network" value={<ChainIndicator chainId={chain?.chainId} inline />} />
-          <ReviewRow name="Name" value={<Typography>{data.name}</Typography>} />
+          {data.name && <ReviewRow name="Name" value={<Typography>{data.name}</Typography>} />}
           <ReviewRow
             name="Owners"
             value={
@@ -142,27 +147,43 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
       </Box>
 
       <Divider />
-      <Box className={layoutCss.row}>
-        <Grid container xs={12} spacing={3}>
-          {canRelay && (
-            <Grid item container spacing={3}>
-              <ReviewRow
-                name="Execution method"
-                value={
-                  <ExecutionMethodSelector
-                    executionMethod={executionMethod}
-                    setExecutionMethod={setExecutionMethod}
-                    relays={minRelays}
-                  />
-                }
-              />
-            </Grid>
-          )}
-          <Grid item container spacing={3}>
+      <Box className={layoutCss.row} display="flex" flexDirection="column" gap={3}>
+        {canRelay && !isSocialLogin && (
+          <Grid container spacing={3}>
             <ReviewRow
-              name="Est. network fee"
+              name="Execution method"
               value={
-                <>
+                <ExecutionMethodSelector
+                  executionMethod={executionMethod}
+                  setExecutionMethod={setExecutionMethod}
+                  relays={minRelays}
+                />
+              }
+            />
+          </Grid>
+        )}
+
+        <Grid container spacing={3}>
+          <ReviewRow
+            name="Est. network fee"
+            value={
+              <>
+                {isSocialLogin ? (
+                  <>
+                    <Typography fontWeight="bold">Free</Typography>
+                    <Typography variant="body2">
+                      Your account is sponsored by
+                      <Image
+                        src={SPONSOR_LOGOS[chain?.chainId || '']}
+                        alt={chain?.chainName || ''}
+                        width={16}
+                        height={16}
+                        style={{ margin: '-3px 0px -3px 4px' }}
+                      />{' '}
+                      Gnosis Chain
+                    </Typography>
+                  </>
+                ) : (
                   <Box
                     p={1}
                     sx={{
@@ -178,20 +199,23 @@ const ReviewStep = ({ data, onSubmit, onBack, setStep }: StepRenderProps<NewSafe
                       </b>
                     </Typography>
                   </Box>
-                  {willRelay ? null : (
-                    <Typography variant="body2" color="text.secondary" mt={1}>
-                      You will have to confirm a transaction with your connected wallet.
-                    </Typography>
-                  )}
-                </>
-              }
-            />
-          </Grid>
+                )}
+
+                {willRelay ? null : (
+                  <Typography variant="body2" color="text.secondary" mt={1}>
+                    You will have to confirm a transaction with your connected wallet.
+                  </Typography>
+                )}
+              </>
+            }
+          />
         </Grid>
 
         {isWrongChain && <NetworkWarning />}
       </Box>
+
       <Divider />
+
       <Box className={layoutCss.row}>
         <Box display="flex" flexDirection="row" justifyContent="space-between" gap={3}>
           <Button variant="outlined" size="small" onClick={handleBack} startIcon={<ArrowBackIcon fontSize="small" />}>