Skip to content

Commit

Permalink
fix(unlock-app): Skip redundant connection step in migration process …
Browse files Browse the repository at this point in the history 
…for previously connected users (#15095)

update migrate user component
  • Loading branch information
@0xTxbi
0xTxbi authored Nov 15, 2024
1 parent 3ab6a8f commit 07fd551
Showing 1 changed file with 110 additions and 107 deletions.
217 changes: 110 additions & 107 deletions unlock-app/src/components/legacy-auth/MigrateUserContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client'

import { useState } from 'react'
import { useState, useEffect } from 'react'
import { ConnectViaEmail } from './ConnectViaEmail'
import { useMutation } from '@tanstack/react-query'
import { locksmith } from '~/config/locksmith'
Expand All @@ -15,15 +15,13 @@ import { PromptSignOut } from './PromptSignOut'
import { usePrivy } from '@privy-io/react-auth'

export const MigrateUserContent = () => {
const { user } = usePrivy()
const { user: privyUser } = usePrivy()
const [userEmail, setUserEmail] = useState<string>('')
const [walletPk, setWalletPk] = useState<string | null>(null)
const [userAccountType, setUserAccountType] = useState<UserAccountType[]>([])

// Track migration status
const [isMigrating, setIsMigrating] = useState(false)
// Track Privy connection status
const [privyConnected, setPrivyConnected] = useState(false)
const [skipPrivyStep, setSkipPrivyStep] = useState(false)

// Mutation to handle the user account type
const checkUserAccountType = useMutation({
Expand Down Expand Up @@ -61,6 +59,111 @@ export const MigrateUserContent = () => {
},
})

// Determine if the Privy step can be skipped
useEffect(() => {
if (privyUser && walletPk) {
setPrivyConnected(true)
setSkipPrivyStep(true)
}
}, [privyUser, walletPk])

// Dynamically define the tabs
const tabs = [
{
title: 'Enter your email',
description: 'First, verify your email address',
disabled: false,
button: {
disabled:
checkPrivyUserMutation.isPending || checkUserAccountType.isPending,
},
children: ({ onNext }: { onNext: () => void }) => {
return (
<ConnectViaEmail
email={privyUser?.email?.address || ''}
onNext={({ email, accountType }) => {
setUserEmail(email || privyUser?.email?.address || '')
setUserAccountType(accountType)
onNext()
}}
/>
)
},
showButton: false,
},
{
title: 'Sign in to your account',
description: 'Sign in to your existing Unlock account',
disabled: !userEmail || checkPrivyUserMutation.isPending,
children: ({ onNext }: { onNext: () => void }) => {
if (userAccountType?.includes(UserAccountType.UnlockAccount)) {
return (
<SignInWithPassword
userEmail={userEmail}
onNext={(walletPk) => {
setWalletPk(walletPk)
onNext()
}}
/>
)
}
if (userAccountType?.includes(UserAccountType.EmailCodeAccount)) {
return (
<SignInWithCode
email={userEmail}
onNext={(walletPk) => {
setWalletPk(walletPk)
onNext()
}}
/>
)
}
if (userAccountType?.includes(UserAccountType.GoogleAccount)) {
return (
<SignInWithGoogle
onNext={(walletPk) => {
setWalletPk(walletPk)
onNext()
}}
/>
)
}
return null
},
},
// Conditionally include the Privy connection step
...(!skipPrivyStep
? [
{
title: 'Create a Privy Account',
disabled: !walletPk,
description: 'Create a Privy Account',
children: ({ onNext }: { onNext: () => void }) => (
<ConnectToPrivy
userEmail={userEmail}
onNext={onNext}
setPrivyConnected={setPrivyConnected}
/>
),
showButton: false,
},
]
: []),
{
title: 'Migration',
disabled: !walletPk || (!privyConnected && !skipPrivyStep),
description:
'This is the last step! We will migrate your Unlock account to Privy!',
children: (
<MigrationFeedback
walletPk={walletPk!}
onMigrationStart={() => setIsMigrating(true)}
/>
),
showButton: false,
},
]

return (
<>
<div className="md:px-28 mt-10">
Expand All @@ -72,110 +175,10 @@ export const MigrateUserContent = () => {
account.
</p>
</div>
<Tabs
tabs={[
{
title: 'Enter your email',
description: 'First, verify your email address',
disabled: false,
button: {
// Disable button during mutation
disabled:
checkPrivyUserMutation.isPending ||
checkUserAccountType.isPending,
},
children: ({ onNext }) => {
// Goal of this component is to get user email address + type of account
// It should also check if there is a Privy account already.
// If not, it "yields" the email account + type to the next step
return (
<ConnectViaEmail
email={user?.email?.address || ''}
onNext={({ email, accountType }) => {
setUserEmail(email || user?.email?.address || '')
setUserAccountType(accountType)
onNext()
}}
/>
)
},
showButton: false,
},
{
title: 'Sign in to your account',
description: 'Sign in to your existing Unlock account',
disabled: !userEmail || checkPrivyUserMutation.isPending,
children: ({ onNext }) => {
// This component is in charge of getting a private key for
// any account used
if (userAccountType?.includes(UserAccountType.UnlockAccount)) {
return (
<SignInWithPassword
userEmail={userEmail}
onNext={(walletPk) => {
setWalletPk(walletPk)
onNext()
}}
/>
)
}
if (
userAccountType?.includes(UserAccountType.EmailCodeAccount)
) {
return (
<SignInWithCode
email={userEmail}
onNext={(walletPk) => {
setWalletPk(walletPk)
onNext()
}}
/>
)
}
if (userAccountType?.includes(UserAccountType.GoogleAccount)) {
return (
<SignInWithGoogle
onNext={(walletPk) => {
setWalletPk(walletPk)
onNext()
}}
/>
)
}
return null
},
},
{
title: 'Create a Privy Account',
disabled: !walletPk,
description: 'Create a Privy Account',
children: ({ onNext }) => (
<ConnectToPrivy
userEmail={userEmail}
onNext={onNext}
setPrivyConnected={setPrivyConnected}
/>
),
showButton: false,
},
{
title: 'Migration',
disabled: !walletPk || !privyConnected,
description:
'This is the last step! We will migrate your Unlock account to Privy!',
children: (
<MigrationFeedback
walletPk={walletPk!}
onMigrationStart={() => setIsMigrating(true)}
/>
),
showButton: false,
},
]}
/>
<Tabs tabs={tabs} />
</div>

{user?.email?.address && user?.wallet && !isMigrating && (
{privyUser?.email?.address && privyUser?.wallet && !isMigrating && (
<PromptSignOut />
)}
</>
Expand Down

0 comments on commit 07fd551

Please sign in to comment.