Handle already used phone in UI #866
Conversation
Playwright ReportSummary
Suitesaccount-rewards.onboarded.spec.tscan visit rewards page
account-sendtag-checkout.onboarded.spec.tscan visit checkout page
can add a pending tag
cannot add an invalid tag name
can confirm a tag
can refer a tag
can refer multiple tags in separate transactions
cannot confirm a tag without paying
cannot add more than 5 tags
account-settings-backup.onboarded.spec.tscan backup account
can remove a signer
account.logged-in.spec.tscan visit account page
can update profile
activity.onboarded.spec.tscan visit activity page and see correct activity feed
can search on activity page
home.onboarded.spec.tscan visit token detail page
leaderboard.logged-in.spec.tscan visit leaderboard page
onboarding.logged-in.spec.tscan visit onboarding page
profile.anon.spec.tsanon user can visit public profile
anon user cannot visit private profile
profile.logged-in.spec.tslogged in user needs onboarding before visiting profile
profile.onboarded.spec.tscan visit other user profile and send by tag
can visit my own profile
can visit private profile
can view activities between another profile
send.onboarded.spec.tscan send USDC starting from profile page
can send USDC using tag starting from home page
can send USDC using sendid starting from home page
can send USDC using address starting from home page
can send ETH starting from profile page
can send ETH using tag starting from home page
can send ETH using sendid starting from home page
can send ETH using address starting from home page
can send SPX starting from profile page
can send SPX using tag starting from home page
can send SPX using sendid starting from home page
can send SPX using address starting from home page
can send SEND starting from profile page
can send SEND using tag starting from home page
can send SEND using sendid starting from home page
can send SEND using address starting from home page
sign-in.anon.spec.tsredirect on sign-in
redirect to send confirm page on sign-in
sign-up.anon.spec.tscan sign up
country code is selected based on geoip
|
musidlo
force-pushed
the
handle-already-used-phone-in-ui
branch
from
a67c727
to
487007b
Compare
| )} | ||
| </SchemaForm> | ||
| )} | ||
| {!form.formState.isSubmitSuccessful && !shouldShowBackUpPrompt && signUpForm} |
There was a problem hiding this comment.
Good job on this. Would prefer it to use a switch(true) to make it even more readable.
Here's an example
packages/api/src/routers/_app.ts
Outdated
| @@ -1,6 +1,6 @@ | |||
| import type { inferRouterInputs, inferRouterOutputs } from '@trpc/server' | |||
| import { createTRPCRouter } from '../trpc' | |||
| import { authRouter } from './auth' | |||
| import { authRouter } from './auth/router' | |||
There was a problem hiding this comment.
Is there a specific reason to change this route?
There was a problem hiding this comment.
yes, I added file for types for auth router and moved both files to auth directory. The reason types cannot be in the same file as router is that it cannot be imported in UI, just like RecoveryOptions
| const { mutateAsync: validateSignatureMutateAsync } = api.challenge.validateSignature.useMutation( | ||
| { retry: false } | ||
| ) | ||
|
|
||
| const handleSignIn = async () => { | ||
| const handleSignIn = async (isNumberAlreadyUsed = false) => { |
There was a problem hiding this comment.
NIT: maybe should be isPhoneAlreadyUsed to maintain consistency
| <Paragraph size="$2" color="$color11"> | ||
| Already have an account? | ||
| </Paragraph> | ||
| <SubmitButton onPress={() => handleSignIn()} disabled={isSigningIn} unstyled> |
There was a problem hiding this comment.
dont have to make this an arrow function since it has no args
onPress={handleSignIn}
is there a reason for the change
There was a problem hiding this comment.
actually there is a reason I did that, on press is passing event as a arg to the function, and this function have optional arg, typescript complains about types mismatch between event and function param, and it's right
There was a problem hiding this comment.
Ah ok I see. Looks good
| <ButtonText>YES</ButtonText> | ||
| </SubmitButton> | ||
| <Button | ||
| borderColor="$primary" |
There was a problem hiding this comment.
for light mode primary is always assigned to black. Unfortunately our tamagui doesn't do this for us yet
| borderColor="$primary" | |
| borderColor="$primary" | |
| $theme-light={{borderColor: "$color12"}} |
| const errorMessage = error.message.toLowerCase() | ||
| form.setError('phone', { type: 'custom', message: errorMessage }) | ||
| } | ||
| } | ||
|
|
||
| function handleBackUpConfirm() { | ||
| const formData = form.getValues() | ||
| void signUpWithPhone(formData, true) |
There was a problem hiding this comment.
NIT: This boolean is a bit magical. Hard to know what it does. Consider using a string enum or passing it in a object so we can name it
| }) | ||
|
|
||
| if (error) { | ||
| if (status === AuthStatus.PhoneAlreadyUsed) { | ||
| await handleSignIn(true) |
| w="$12" | ||
| onPress={handleBackUpDenial} | ||
| > | ||
| <Button.Text color="$white" $gtMd={{ color: '$color12' }}> |
There was a problem hiding this comment.
This won't work on light mode. Instead use our radix-style color pallette
| <Button.Text color="$white" $gtMd={{ color: '$color12' }}> | |
| <Button.Text color="$color12"> |
| const { mutateAsync: validateSignatureMutateAsync } = api.challenge.validateSignature.useMutation( | ||
| { retry: false } | ||
| ) | ||
|
|
||
| const handleSignIn = async () => { | ||
| const handleSignIn = async (isNumberAlreadyUsed = false) => { | ||
| setIsSigningIn(true) |
There was a problem hiding this comment.
There is some logical flaw in sign in. If I put the wrong passkey, it pushes me to the Verify Code screen with a phone that exists already
youngkidwarrior
changed the base branch from
dev
to
throw-error-when-exisitng-user-uses-otp
|
Vercel Unique URL: https://sendapp-3bqw4aw69-0xsend.vercel.app |
UI part of the ticket https://3.basecamp.com/5743564/buckets/36023883/todos/8021528909
checked out off #864