fix: use mnemonic name for social wallet safe creation

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

@@ -20,6 +20,7 @@ import { type ReactElement, useMemo, useState } from 'react'
 import ExternalLink from '@/components/common/ExternalLink'
 import { HelpCenterArticle } from '@/config/constants'
 import { isSocialLoginWallet } from '@/services/mpc/SocialLoginModule'
+import { useMnemonicSafeName } from '@/hooks/useMnemonicName'
 
 export type NewSafeFormData = {
   name: string
@@ -157,17 +158,19 @@ const CreateSafe = () => {
 
   const staticHint = useMemo(() => staticHints[activeStep], [activeStep])
 
+  const mnemonicSafeName = useMnemonicSafeName()
+
+  // Jump to review screen when using social login
+  const isSocialLogin = isSocialLoginWallet(wallet?.label)
+  const initialStep = isSocialLogin ? 2 : 0
+
   const initialData: NewSafeFormData = {
-    name: '',
+    name: isSocialLogin ? mnemonicSafeName : '',
     owners: [defaultOwner],
     threshold: 1,
     saltNonce: Date.now(),
   }
 
-  // Jump to review screen when using social login
-  const isSocialLogin = isSocialLoginWallet(wallet?.label)
-  const initialStep = isSocialLogin ? 2 : 0
-
   const onClose = () => {
     router.push(AppRoutes.welcome.index)
   }