[$250] Animate the Sign-In Link Pages

[grgia]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

cc @shawnborton

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0179f7696509701054
• Upwork Job ID: 1653380060656201728
• Last Price Increase: 2024-04-09
• Automatic offers:
• tienifr | Contributor | 0

Issue Owner

Current Issue Owner: @

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~0179f7696509701054

[MelvinBot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @eVoloshchak (Internal)

[grgia]

not overdue

[grgia]

not overdue

[grgia]

not overdue

[grgia]

started this

[grgia]

not overdue, working on resizing lottie files

[grgia]

not overdue

[grgia]

@shawnborton could I get the lottie files for these (magic ball, magician, locked safe)? While I'm working on the animated backgrounds sizing problems, these seem straightforward since they're statically sized

[shawnborton]

Safe: https://www.dropbox.com/s/rvg9lp3fj63wgms/Expensify-Safe-Slow-022323-kjs-1.json?dl=0

Code: https://www.dropbox.com/s/ln5w64pxlv8pvva/Expensify-Magic-Code-121222-kjs-1.json?dl=0

Link: https://www.dropbox.com/s/s2yb7qvmkxvommc/Expensify-Magic-Link-120922-kjs-1.json?dl=0

[grgia]

not overdue

[grgia]

not overdue

[grgia]

not overdue

[grgia]

not overdue, not prioritizing

[grgia]

^

[grgia]

^

[grgia]

^

[grgia]

^

[grgia]

@shawnborton could you confirm if the design here is still correct? I'm going to get this sorted to delegate out

[shawnborton]

Wow, blast from the past!

I think those designs are correct but honestly I'm not even sure how you access them, as I haven't really run into any of these designs in the wild before.

Perhaps @cristipaval can help confirm if these designs are still relevant or not, as I think you helped implement them back then?

cc @Expensify/design for visibility, too.

[cristipaval]

yes the above designs are still the same in NewDot. But there is one more page for when the magic code expired

[shawnborton]

@cristipaval how do you access the designs from above though? The images from the first comment on this issue.

[cristipaval]

@shawnborton I'm unsure I understand what you mean by accessing the design. Are you asking how I open the pages as a user in NewDot, or you're asking how the App loads the images? (they are bundled in the App)

[shawnborton]

Ah, I meant how do those pages get accessed as a normal user. My understanding was that most of those cases were just directly handled in the left area of the sign in page now?

[cristipaval]

These pages are opened when the user clicks on the magic link received in the email. The link opens a new browser tab with one of these pages, according to the sign-in state that the user has on the browser. Please see the screen recordings below

https://github.com/Expensify/App/assets/18078393/734fc8cd-45e9-49a3-9103-de100c117c64

https://github.com/Expensify/App/assets/18078393/9cf4ea8d-cc9d-4907-9bd9-fb3a2af8b530

[shawnborton]

Right on - that's what I was looking for!

Magic Code: Lottie file here

Magic Link: Lottie file here

[shawnborton]

cc @Expensify/design for vis, so you can see how dope these are

[dannymcclain]

Yeah those are absolutely sick!

[grgia]

Should be able to get this rolling again, I need to double check where we're at with these and get assets then I'll have a contributor take it on

[melvin-bot[bot]]

Current assignee @eVoloshchak is eligible for the External assigner, not assigning anyone new.

[melvin-bot[bot]]

Upwork job price has been updated to $250

[grgia]

Let's get this moving- Making this External!
See here for assets https://github.com/Expensify/App/issues/18262#issuecomment-1639104282

[tienifr]

Proposal

Please re-state the problem that we are trying to solve in this issue.

We want to use animation in the Sign in pages in the OP

What is the root cause of that problem?

New feature

What changes do you think we should make in order to solve the problem?

We can replace the use of static Icon in those pages with the Lottie that uses the above assets, an example is this in the Just sign in modal.

There could be additional minor paddings/margins required, depending on the design team's opinion.

More details on the steps:

1. Convert the assets file provided here to .lottie format, currently it's .json which will not work well with our app. Or maybe @shawnborton can provide the already-converted .lottie files

2. Put those .lottie asset files in assets/animations, and declare them here. Example:

   MagicLink: {
   file: require('@assets/animations/MagicLink.lottie'),
   w: 375,
   h: 400,
   },

   (We need to make sure the w and h above are correct according to the size of the Lottie, those can be seen in the JSON Lottie file)

3. In the pages that need the update, replace the usage of static Icon with Lottie, and use the Lottie source declared in 2. For example in here

   <Lottie
   source={is2FARequired ? LottieAnimations.SafeBlue : LottieAnimations.MagicLink}
   style={{
       height: is2FARequired ? variables.modalTopIconHeight : variables.modalTopBigIconHeight
   }}
   webStyle={{
       height: is2FARequired ? variables.modalTopIconHeight : variables.modalTopBigIconHeight
   }}
   autoPlay
   loop
   />

   (makes sure to preserve the styles of the current Icon in the Lottie, to maintain correct UI) And the outer View of the Lottie can optionally be removed.

We should do the same for the other pages that need the update, like here

What alternative solutions did you explore? (Optional)

It's worth checking if the new Lotties are duplicate of any existing Lottie, if any is, we don't need to import the new assets.

[ghost]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Animate the Sign-In Link Pages

What is the root cause of that problem?

New Feature

What changes do you think we should make in order to solve the problem?

There are different sign pages that needs to be animated like hmmm not here page, here is your magic code etc, this can be by adding Lottie animation as done in AboutPage.tsx's coin animation.

https://github.com/Expensify/App/assets/158435970/f0570d3f-28db-42a3-a2bc-5589f856ca80

Also, we need to update these newly downloaded assets into LottieAnimations i.e. src/components/LottieAnimations/index.tsx as well

What alternative solutions did you explore? (Optional)

N/A

TEST BRANCH (EXAMPLE) - https://github.com/godofoutcasts94/App/tree/animate-sign-in-pages

[ghost]

Updated proposal

[allgandalf]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Animate the Sign-In Link Pages

What is the root cause of that problem?

Feature Request

What changes do you think we should make in order to solve the problem?

We need to change these static animations to lottie: https://github.com/Expensify/App/blob/d8361eee3486ccb5472060f2af7655e96461471e/src/components/ValidateCode/JustSignedInModal.tsx#L25-L29 https://github.com/Expensify/App/blob/d8361eee3486ccb5472060f2af7655e96461471e/src/components/ValidateCode/ValidateCodeModal.tsx#L40-L44 https://github.com/Expensify/App/blob/d8361eee3486ccb5472060f2af7655e96461471e/src/components/ValidateCode/JustSignedInModal.tsx#L25-L29

What alternative solutions did you explore? (Optional)

N/A

[tienifr]

Proposal updated to add detailed steps (solution remains the same).

[ghost]

Updated Proposal with test branch and example, of changes I will make to the files to implement animations in Sign-in Link Pages @shawnborton @grgia

[grgia]

@eVoloshchak if you're around, I think we can get this assigned today

[ghost]

Updated Test Branch with assessts as provided above, but its not working maybe need Lottie converted file. @shawnborton

[shawnborton]

@roryabraham @grgia do you remember how we've been getting Lottie converted files previously?

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[roryabraham]

do you remember how we've been getting Lottie converted files previously?

Yeah, we've been converting them from .json to .lottie in https://app.lottiefiles.com/?utm_medium=web&utm_source=login-main-nav - sign in with credentials in 1P, upload the JSON, download the .lottie: https://stackoverflowteams.com/c/expensify/questions/17073

[shawnborton]

Amazing, thanks for the refresher!

[grgia]

@shawnborton are you able to link the converted files ?

[melvin-bot[bot]]

Triggered auto assignment to @garrettmknight (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[grgia]

assigning BugZero for tracking

[shawnborton]

Let me know if these work: Animations.zip

FWIW I think we already have the Safe animation in product in Settings > Security.

[grgia]

bump for C+ review @eVoloshchak, but low priority :)

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸